/* ============================================================
   עו״ד פנחס רצון — RTL. The Israeli premium-lawyer canon,
   played straight: near-black bands, gold, cinematic photos,
   all-Heebo with an airy light body. Craft bar: mazeh.co.il,
   minus its defects. No card chrome, no pressure UI — the
   restraint gates still apply.
   Every text/background pair is verified against WCAG AA by
   gates/verify-contrast.mjs, which parses the tokens below.
   ============================================================ */

:root {
  /* @contrast-tokens */
  --ink: #14110c;          /* body text on paper */
  --ink-2: #3a352c;        /* secondary prose */
  --muted: #655d4f;        /* meta, captions */
  --paper: #fbfaf7;
  --paper-2: #f3efe8;
  --stone: #ddd5c8;        /* hairlines on light — non-text */
  --accent: #86641f;       /* gold as TEXT on paper — 5.22:1 on --paper, 4.75:1 on --paper-2 */
  --accent-lt: #c19b45;    /* bright gold on the deep ground, and the button fill */
  --deep: #0e0c09;
  --deep-2: #1a1712;
  --on-deep: #f0ebe1;
  --on-deep-2: #aaa295;

  --line-deep: rgba(240, 235, 225, .16);   /* hairlines on dark — non-text */
  --gold-line: rgba(193, 155, 69, .45);    /* gold hairlines — non-text */
  --sep-deep: #74706a;                     /* the breadcrumb dash — a glyph, so it has to be SEEN.
                                              3.97:1 on --deep, gated; deliberately quieter than
                                              the 7.73:1 crumb links beside it. */

  /* The cinematic grade — one color treatment unifying every photograph
     into the black-gold world: lifted contrast, muted saturation, a warm
     gold cast, slightly darker. Portraits get the gentler cut so skin
     stays honest. Darkening only ever RAISES text-over-photo contrast,
     and the pixel sweep re-verifies with the same filter applied. */
  --grade: brightness(.88) contrast(1.09) saturate(.82) sepia(.16);
  --grade-portrait: brightness(.94) contrast(1.05) saturate(.9) sepia(.08);

  --wrap: 1180px;
  --narrow: 760px;
  --fs: 1;

  /* Hebrew has no capitals and little ascender variety, so the word gap is the
     only boundary cue the reader gets. A hair of extra word-spacing on running
     copy — never on the display faces, which are set tight on purpose. */
  --word-space-he: .05em;

  --display: 'Heebo', 'Segoe UI', Arial, sans-serif;
  --sans: 'Heebo', 'Segoe UI', Arial, sans-serif;

  --gap-sec: clamp(3.75rem, 2rem + 5.5vw, 7rem);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  font-size: calc(100% * var(--fs));
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  accent-color: var(--accent);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 2;
  word-spacing: var(--word-space-he);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  caret-color: var(--accent);
}

/* The browser surfaces nobody styles still carry the design. */
::selection { background: var(--accent-lt); color: var(--deep); }

/* The scrollbar, in the world's own materials — square, warm, quiet.
   Non-text UI: thumb vs track measures 3.1:1. */
html { scrollbar-color: #8a8175 var(--paper-2); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: #8a8175; border: 3px solid var(--paper-2); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0;
  line-height: 1.22;
  text-wrap: balance;
}
/* The display faces are set tight on purpose — they opt out of the body's
   Hebrew word-spacing and nothing else. Kept as its own rule so it cannot
   drag the heading block's other declarations onto these elements. */
h1, h2, h3, h4, .pull, .wm-name, .route-q, .side-tel, .btn, .wordmark {
  word-spacing: normal;
}
h1 { font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.6rem); font-weight: 700; line-height: 1.12; }
h2 { font-size: clamp(1.8rem, 1.25rem + 2.1vw, 2.8rem); }
h3 { font-size: 1.35rem; line-height: 1.4; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
/* photo() wraps every image in <picture> for the WebP source. Without this the
   wrapper is an inline box with no dimensions, and every `.x img { height }`
   rule below resolves against nothing. */
picture { display: contents; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .35em; text-decoration-color: var(--accent-lt); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.section-dark :focus-visible, .route :focus-visible, .closing :focus-visible,
.site-footer :focus-visible, .site-header :focus-visible, .hero :focus-visible,
.quiet :focus-visible, .page-hero :focus-visible {
  outline-color: var(--accent-lt);
}

.wrap { width: min(var(--wrap), 100% - 3rem); margin-inline: auto; }
.wrap.narrow { width: min(var(--narrow), 100% - 3rem); }
.ic { flex: none; }

.skip {
  position: absolute; inset-inline-start: 1.5rem; inset-block-start: -6rem;
  z-index: 200; background: var(--accent-lt); color: var(--deep);
  padding: .9rem 1.5rem; font-weight: 600; transition: inset-block-start .2s;
}
.skip:focus { inset-block-start: 1.5rem; text-decoration: none; }

/* ------------------------------------------------------------ shared bits */

/* The gold kicker — the canon's signature. Hebrew never gets letter-spacing,
   so the short gold rule carries the "small caps" signal instead. */
.label {
  display: flex; align-items: center; gap: .8rem;
  font-size: .95rem; font-weight: 600; color: var(--accent);
  line-height: 1.6; margin-block-end: 1.2rem;
}
/* The rule TRAILS the text: the kicker's first letter stays flush with the
   heading's edge below it, and the dash hangs off the reading column's open
   side instead of breaking its line. */
.label::after {
  content: ''; width: 2.4rem; height: 2px; background: var(--accent-lt); flex: none;
}
/* Centered kickers are flanked symmetrically instead. */
.center .label::before {
  content: ''; width: 2.4rem; height: 2px; background: var(--accent-lt); flex: none;
}

.sec-head { max-width: 42rem; margin-block-end: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); }
.sec-sub { color: var(--muted); font-size: 1.1rem; line-height: 1.9; margin-block-start: 1rem; }

.section { padding-block: var(--gap-sec); }
.section-alt { background: var(--paper-2); }
.section-dark { background: var(--deep); color: var(--on-deep); }
.section-dark h2, .section-dark h3 { color: var(--on-deep); }
.section-dark p { color: var(--on-deep-2); }
.section-dark .label { color: var(--accent-lt); }

.lead {
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.4rem);
  font-weight: 300; line-height: 1.9; color: var(--ink-2);
}

.textlink {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 500; color: var(--accent);
}
.textlink .ic { transition: transform .3s var(--ease); }
.textlink:hover .ic { transform: translateX(-5px); }

/* The gold button — the canon's one loud object. The restraint gate caps it
   at two per page and the reading order still puts it after the content. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 1rem 3rem; border: 0;
  background: var(--accent-lt); color: var(--deep);
  font-family: var(--sans); font-size: 1.1rem; font-weight: 600;
  cursor: pointer; transition: filter .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { filter: brightness(.94); text-decoration: none; transform: translateY(-1px); }

/* ------------------------------------------------------------ header
   Always the solid dark bar the vertical ships — no transparent state,
   no scrim dependencies. */

.site-header {
  position: sticky; inset-block-start: 0; z-index: 90;
  background: var(--deep);
  border-block-end: 1px solid var(--gold-line);
}
.header-inner { display: flex; align-items: center; gap: 2rem; min-height: 88px; }

.wordmark { display: flex; flex-direction: column; color: var(--on-deep); margin-inline-end: auto; line-height: 1.3; }
.wordmark:hover { text-decoration: none; }
.wm-name { font-family: var(--display); font-size: 1.4rem; font-weight: 600; }
.wm-role { font-size: .85rem; font-weight: 400; color: var(--accent-lt); }

.primary { display: flex; align-items: center; gap: 2.2rem; }
.primary > ul { display: flex; align-items: center; gap: 2rem; }
.primary a { color: var(--on-deep); font-size: 1rem; font-weight: 400; }
.primary a:hover { text-decoration: none; color: var(--accent-lt); }
.primary a[aria-current] { color: var(--accent-lt); }

/* The phone, boxed in gold — the one element every site in this market
   carries in the header, kept quiet: a hairline, not a siren. */
.nav-tel {
  font-size: 1rem; font-weight: 500; color: var(--accent-lt);
  border: 1px solid var(--accent-lt); padding: .55rem 1.2rem;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.nav-tel:hover { background: var(--accent-lt); color: var(--deep); text-decoration: none; }

.has-sub { position: relative; }
.sub-toggle { display: none; }
.sub {
  position: absolute; inset-block-start: calc(100% + 1.55rem); inset-inline-start: 0;
  width: max-content; min-width: 15rem; max-width: min(20rem, 80vw);
  background: var(--deep-2); border: 1px solid var(--gold-line);
  border-block-start: 2px solid var(--accent-lt); padding: .5rem 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.sub a { display: block; padding: .7rem 1.4rem; color: var(--on-deep); font-size: .95rem; }
.sub a:hover { color: var(--accent-lt); text-decoration: none; }

/* The mobile header's call and WhatsApp buttons — visible without opening
   the drawer, the way this market always ships them. Header affordances,
   never floating ones. */
.tel-mini, .wa-mini { display: none; }
/* On desktop the drawer-call wrapper dissolves so nav-tel keeps its place
   in the horizontal header; the drawer-only extras stay hidden. */
.drawer-call { display: contents; }
.drawer-call .label, .nav-wa, .drawer-note { display: none; }

/* A real 44px tap target, not just two thin lines. */
.burger {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; width: 44px; height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.burger span { display: block; width: 26px; height: 2px; background: var(--on-deep); transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ------------------------------------------------------------ crumbs */

.crumbs { background: var(--deep); font-size: .85rem; }
/* No hairline of its own — the header's gold rule directly above already
   draws this edge, and two stacked lines read as a mistake. */
.crumbs ol { display: flex; flex-wrap: wrap; gap: .6rem; padding-block: 1rem; color: var(--on-deep-2); }
.crumbs li + li::before { content: '—'; margin-inline-end: .6rem; color: var(--sep-deep); }
.crumbs a { color: var(--on-deep-2); }
.crumbs a:hover { color: var(--accent-lt); }
.crumbs [aria-current] { color: var(--on-deep); }

/* ------------------------------------------------------------ hero
   Full-bleed cinema under the solid header. The photograph is composed with
   the reading column already in it: the subject stands in the left third and
   the right two-thirds is a dark stone wall. Measured on the source file,
   every column from 36% rightward clears 4.5:1 against white, so the
   headline needs no scrim. The site hardcodes dir="rtl", so physical
   directions here are deliberate — the figure is always the left half. */

.hero {
  position: relative; isolation: isolate;
  min-height: min(88vh, 880px);
  display: flex; flex-direction: column; justify-content: center;
  background: var(--deep); color: var(--on-deep);
  padding-block: 6rem; overflow: hidden;
}

.hero-figure { position: absolute; inset: 0; z-index: 0; }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: var(--grade-portrait); }
.hero-figure .ph { width: 100%; height: 100%; background: var(--deep-2); border: 0; color: var(--on-deep-2); }
/* The vignette that closes the frame — daylight at the window edge is what
   breaks the low-key mood; the corners settle back into the ground. */
.hero-figure::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 62% 38%, transparent 52%, rgba(14, 12, 9, .5) 100%);
}

.hero-inner { position: relative; z-index: 2; }
.hero-col { max-width: min(38rem, calc(100vw - min(48vw, 38rem) - 6rem)); }
/* Champagne gold, not --accent-lt: this line sits on the photograph itself,
   and the standard gold measures 3.63:1 against the wall's brightest pixels.
   #dcc186 measures 5.41:1 worst-case — verified against the image's pixels,
   not the DOM (the pixel sweep in the build notes). */
.hero-eyebrow {
  font-size: 1.05rem; font-weight: 400; color: #dcc186; margin-block-end: 2rem;
  line-height: 1.7;
}
/* The name outranks its own metadata: white and weighted, joining the
   headline's hierarchy, while city and year stay champagne beside it. */
.hero-eyebrow strong { font-weight: 600; color: #fff; }
/* Each segment breaks only at the separators, never inside a name or a year. */
.hero-eyebrow .nb { white-space: nowrap; }
/* Trailing dash, like every kicker — drawn inside the last segment's nowrap
   box so it can never wrap onto a line of its own. */
.hero-eyebrow .nb:last-child::after {
  content: ''; display: inline-block; width: 2.6rem; height: 2px;
  background: currentColor; vertical-align: middle; margin-inline-start: .85rem;
}
.hero h1 { color: #fff; }
/* One word in champagne — the same photo-safe gold as the eyebrow (display
   size needs 3:1; #dcc186 measures 5.4:1 against the wall's brightest pixels). */
.hero h1 .gold-word { color: #dcc186; }
/* The gold bar under the headline — jewelry, not text. */
.hero-rule { width: 5.5rem; height: 3px; background: var(--accent-lt); margin-block-start: 2rem; }
.hero-sub {
  margin-block-start: 2rem;
  font-size: clamp(1.2rem, 1.08rem + .4vw, 1.35rem); font-weight: 300;
  color: var(--on-deep-2); line-height: 1.9;
}
.hero-cue {
  position: absolute; inset-block-end: 2rem; inset-inline-start: 50%;
  transform: translateX(50%); z-index: 3; color: var(--accent-lt);
  padding: .8rem; transition: color .25s var(--ease);
  animation: cue-bob 2.8s var(--ease) infinite;
}
.hero-cue:hover { color: #fff; text-decoration: none; }
@keyframes cue-bob {
  0%, 100% { transform: translateX(50%) translateY(0); }
  50% { transform: translateX(50%) translateY(7px); }
}

/* ------------------------------------------------------------ quiet band
   A full-bleed photograph carrying ONE message — kicker plus a single line.
   A photo with no words is a wasted band (the client's call, and he is
   right): the picture sets the mood, the line does the work. */

.quiet {
  position: relative; isolation: isolate; overflow: hidden;
  /* A statement divider, not a scene: tall enough for cinema, short enough
     that one line of text never owns a whole desktop viewport. */
  min-height: min(50vh, 480px);
  display: flex; align-items: center;
  background: var(--deep); color: var(--on-deep);
  padding-block: clamp(3.5rem, 2rem + 5vw, 6rem);
}
/* The scrim the canon puts under text-on-photo: deepest on the reading side
   (right, RTL), thinning away. Verified by compositing this exact gradient
   into the pixel-sampling canvas — the gold kicker measured 2.2:1 without it. */
.quiet-figure::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to left, rgba(14, 12, 9, .8) 0%, rgba(14, 12, 9, .42) 55%, rgba(14, 12, 9, .1) 100%);
}
.quiet-inner { position: relative; z-index: 2; }
.quiet .label { color: var(--accent-lt); }
/* Display scale, not caption scale — the line on a photo band is a
   statement, and it matches the statement pull's own ramp. */
.quiet-line {
  max-width: 36rem;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.7rem, 1.15rem + 2.4vw, 3rem);
  line-height: 1.35; color: #fff;
}
.quiet-figure { position: absolute; inset: 0; z-index: 0; }
.quiet-figure img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
  filter: var(--grade);
  /* The pause breathes: a drift too slow to watch, alive in the corner of the
     eye. Wordless bands only — no text sits on these pixels, so the motion
     can never break a measured contrast. Killed by reduced-motion. */
  animation: quiet-drift 26s ease-in-out infinite alternate;
}

/* The FAQ chapter is the page's one daylight interruption: the same stamp
   motif, opened into a pale editorial spread. Its photograph was composed
   and pixel-measured for ink on the physical right side, so it needs no
   contrast scrim on wide screens. */
.quiet-light { background: var(--paper); color: var(--ink); border-block: 1px solid var(--stone); }
.quiet-light .quiet-figure::after { background: none; }
/* Ink over a photograph: no drift (motion is for wordless pixels only) and
   no darkening grade — this band's whole point is its light. */
.quiet-light .quiet-figure img { animation: none; filter: none; }
/* Standard gold measured 4.05:1 against the image's shaded cream — the
   light band gets a deeper cut of the same gold (pixel-verified 5+). */
.quiet-light .label { color: #6d5119; }
.quiet-light .quiet-line { color: var(--ink); }
@keyframes quiet-drift {
  from { transform: scale(1); }
  to { transform: scale(1.065); }
}

/* A dir="ltr" token that renders as a block (or a grid item, which is
   blockified) left-aligns its own text and zigzags against the RTL column.
   The Latin/digit run keeps its internal order — it just sits on the same
   right edge as every Hebrew line around it. */
.creds dt[dir="ltr"], .route-n[dir="ltr"], .idx-n[dir="ltr"] {
  text-align: right;
}

/* ------------------------------------------------------------ route
   "Where are you standing?" — routing by the visitor's own situation rather
   than by the practice-area taxonomy. The numbered journey, minus urgency. */

.route { padding-block: var(--gap-sec); background: var(--deep); color: var(--on-deep); }
.route .label { color: var(--accent-lt); }
.route h2 { color: #fff; }
.route .sec-sub { color: var(--on-deep-2); }
.route-list { border-block-start: 1px solid var(--line-deep); }
.route-list > li { border-block-end: 1px solid var(--line-deep); }
.route-list a {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 2.5rem;
  align-items: center; gap: 1.75rem;
  padding-block: clamp(1.6rem, 1.1rem + 1.2vw, 2.4rem);
  color: var(--on-deep); transition: transform .35s var(--ease);
}
.route-list a:hover { text-decoration: none; transform: translateX(-.7rem); }
/* Touch feedback — a breath of gold while the finger is down. */
.route-list a:active { background: rgba(193, 155, 69, .08); }
.route-n {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(2.1rem, 1.6rem + 1.6vw, 3.1rem);
  line-height: 1; color: var(--accent-lt); opacity: .65;
  transition: opacity .3s var(--ease);
}
.route-list a:hover .route-n { opacity: 1; }
.route-q { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(1.35rem, 1.15rem + .9vw, 1.8rem); line-height: 1.35; margin-block-end: .5rem; transition: color .3s var(--ease); }
.route-list a:hover .route-q { color: var(--accent-lt); }
.route-a { display: block; color: var(--on-deep-2); font-size: 1.1rem; font-weight: 300; line-height: 1.9; max-width: 46rem; }
.route-arrow { color: var(--on-deep-2); justify-self: center; transition: color .3s var(--ease), transform .35s var(--ease); }
.route-list a:hover .route-arrow { color: var(--accent-lt); transform: translateX(-6px); }

/* ------------------------------------------------------------ statement
   The one section that lives ON a photograph — the site's credo, set over
   the near-black stone still life the way the canon sets its "אני מאמין".
   One per site, and every word is measured against the rendered pixels. */

.statement {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--deep); color: var(--on-deep);
  padding-block: calc(var(--gap-sec) * 1.2);
}
.statement-figure { position: absolute; inset: 0; z-index: 0; }
.statement-figure img {
  width: 100%; height: 100%; object-fit: cover; object-position: 0% 30%;
  filter: var(--grade);
}
/* A uniform veil, not a gradient — the frame is near-black everywhere and
   the text column is centered, so the whole surface carries it. */
.statement-figure::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(14, 12, 9, .5);
}
.statement-inner { position: relative; z-index: 2; max-width: var(--narrow); }
/* Desktop: the credo joins the split language — the window portrait on the
   left at full richness, every word on the solid token. The veiled object
   still life stays as the phone background, where the split has no room. */
.statement-portrait { display: none; }
@media (min-width: 861px) {
  .statement-figure { display: none; }
  .statement-portrait { display: block; position: absolute; inset-block: 7% 0; left: 0; width: 44%; z-index: 0; }
  .statement-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 20%; }
  .statement-portrait::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(to left, var(--deep) 0%, rgba(14, 12, 9, 0) 18%),
      linear-gradient(to bottom, var(--deep) 0%, rgba(14, 12, 9, 0) 10%);
  }
  .statement-inner { max-width: none; display: grid; grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); }
  .statement-inner > * { grid-column: 1; }
}
.pull {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.7rem, 1.15rem + 2.4vw, 3rem);
  line-height: 1.35; color: #fff; margin-block-end: 2.6rem;
}
.pull::before {
  content: ''; display: block; width: 5.5rem; height: 3px;
  background: var(--accent-lt); margin-block-end: 1.6rem;
}
.statement-body { display: grid; gap: 1.5rem; max-width: 40rem; }
.statement-body p { color: var(--on-deep); }

/* ------------------------------------------------------------ index list */

.index { border-block-start: 1px solid var(--stone); }
.index > li { border-block-end: 1px solid var(--stone); }
.index a {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 2.5rem;
  align-items: baseline; gap: 1.5rem;
  padding-block: clamp(1.5rem, 1.1rem + 1vw, 2.2rem);
  color: var(--ink); transition: transform .35s var(--ease);
}
.index a:hover { text-decoration: none; transform: translateX(-.7rem); }
.index a:active { background: rgba(134, 100, 31, .07); }
.index a:hover h2, .index a:hover h3 { color: var(--accent); }
.idx-n { font-family: var(--display); font-weight: 600; font-size: .95rem; color: var(--accent); }
.idx-body { display: block; }
.index h2, .index h3 {
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.85rem); font-weight: 500;
  transition: color .3s var(--ease); margin-block-end: .5rem;
}
.idx-teaser { display: block; color: var(--muted); font-size: 1.1rem; font-weight: 300; line-height: 1.9; max-width: 46rem; }
.idx-arrow { color: var(--accent-lt); align-self: center; transition: color .3s var(--ease), transform .35s var(--ease); }
.index a:hover .idx-arrow { color: var(--accent); transform: translateX(-6px); }

/* ------------------------------------------------------------ principles */

.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.2rem, 1.4rem + 2.4vw, 4rem); }
.principles article { border-block-start: 1px solid var(--accent-lt); padding-block-start: 1.8rem; }
.principles h3 { margin-block-end: .8rem; }
.principles p { font-size: 1.1rem; font-weight: 300; line-height: 1.95; color: var(--ink-2); }
/* Inside the about page's reading column the three principles stack. */
.prose .principles { grid-template-columns: 1fr; gap: 1.8rem; margin-block-start: 1.6rem; }
.prose .principles article { padding-block-start: 1.4rem; }

/* ------------------------------------------------------------ portrait */

.portrait-sec .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 1.5rem + 4vw, 6rem); align-items: center; }
.portrait-media { position: relative; }
.portrait-media::before {
  content: ''; position: absolute; z-index: 0;
  inset-block: 1.6rem -1.6rem; inset-inline: -1.6rem 5rem;
  border: 1px solid var(--accent-lt);
}
.portrait-media img, .portrait-media .ph { position: relative; z-index: 1; }
.portrait-media img, .side-portrait img { filter: var(--grade-portrait); }
.portrait-copy h2 { margin-block-end: 1.5rem; }
.portrait-copy .lead { margin-block-end: 1.4rem; }
.portrait-note { color: var(--ink-2); line-height: 1.95; max-width: 34rem; margin-block-end: 2rem; }

/* "What happens after you reach out" — the contact column's three steps.
   Same heading treatment as .sub-sec: hairline plus the short gold bar. */
.after-call { margin-block: 2.8rem; }
.after-call h2 {
  position: relative;
  font-size: 1.4rem; margin-block-end: 1.2rem;
  padding-block-end: .8rem; border-block-end: 1px solid var(--stone);
}
.after-call h2::after {
  content: ''; position: absolute; inset-block-end: -1px; inset-inline-start: 0;
  width: 5.5rem; height: 3px; background: var(--accent-lt);
}

.creds { display: grid; gap: 1.2rem; margin-block-end: 2rem; }
.creds > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.2rem; padding-block-end: 1.2rem; border-block-end: 1px solid var(--stone); }
.creds > div:last-child { border-block-end: 0; padding-block-end: 0; }
.creds dt { font-size: .95rem; font-weight: 600; color: var(--accent); }
.creds dd { color: var(--ink-2); }
.creds.wide > div { grid-template-columns: 10rem minmax(0, 1fr); }

/* ------------------------------------------------------------ page hero
   Every interior page opens on the dark masthead the canon ships: black
   ground, gold kicker, white display type. */

.page-hero {
  background: var(--deep); color: var(--on-deep);
  padding-block: clamp(3.2rem, 1.8rem + 4.4vw, 6rem) clamp(2.8rem, 1.6rem + 3.4vw, 4.6rem);
  border-block-end: 1px solid var(--gold-line);
}
.page-hero .label { color: var(--accent-lt); }
.page-hero h1 { max-width: 18em; color: #fff; }
.page-hero .lead { max-width: 44rem; margin-block-start: 1.6rem; color: var(--on-deep-2); }

/* ------------------------------------------------------------ page figure
   The practice photograph is the opener's own ground — one cinematic
   headline over it, the same scrim recipe as the quiet bands, instead of a
   flat word-band stacked on a wordless picture. */

.page-hero.has-figure {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(4rem, 2rem + 5.5vw, 7.5rem) clamp(3.2rem, 1.8rem + 4vw, 5.4rem);
}
/* These photographs are bright — measured 1.1–2.4:1 under body text through
   any watchable scrim — so text and picture never overlap: the photo owns
   the LEFT half at full richness and dissolves into the deep ground before
   the text column begins. Every glyph sits on the solid token. */
.page-hero-figure { position: absolute; inset-block: 0; left: 0; width: 52%; z-index: 0; }
.page-hero-figure img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  filter: var(--grade);
}
/* The dissolve into the ground is an overlay, not a mask — it paints the
   deep token itself over the photo's right quarter, so the fade is exact
   on every renderer. */
.page-hero-figure::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to left, var(--deep) 0%, rgba(14, 12, 9, 0) 26%);
}
.page-hero .wrap { position: relative; z-index: 2; }
/* The key band frame keeps its subject in the lower-left third — anchor
   the crop there or the figure shows only dark wood. */
/* The person is the brand: page heroes carry Pinhas himself. His face sits
   in the crop's upper-left half — anchor there so no box ever beheads him. */
.page-hero-figure.figure-pinhas img { object-position: 35% 22%; }
/* The text column is fenced to the right 46% — the fence, not an em cap,
   is what guarantees the no-overlap contract. */
.page-hero.has-figure .wrap { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
.page-hero.has-figure .wrap > * { grid-column: 1; }

/* Contact is the point at which the site opens up. On wide screens the
   photograph remains a complete, warmly lit portrait rather than being
   swallowed by the interior-page black; the response area becomes a calm
   paper field, exactly as it already reads once the layout stacks on a phone.
   This is a page-specific variation — FAQ and service pages retain their
   dark masthead. */
.contact-hero { background: var(--paper); color: var(--ink); border-block-end-color: var(--stone); }
.contact-hero h1 { color: var(--ink); }
.contact-hero .lead { color: var(--ink-2); }
.contact-hero .page-hero-figure { border-inline-start: 1px solid var(--stone); }
.contact-hero .page-hero-figure img { filter: var(--grade-portrait); }
.contact-hero .page-hero-figure::after {
  background: none;
}

/* ------------------------------------------------------------ prose + aside */

.layout-aside { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: clamp(2.5rem, 1.5rem + 4vw, 6rem); align-items: start; }
.prose > p { color: var(--ink-2); margin-block-end: 1.3rem; max-width: 42rem; }
.prose > .lead { max-width: 44rem; }
.sub-sec { margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
/* A hairline the full measure, with the signature short gold bar over its
   start — the same language as the hero rule and the pull quote, instead of
   a heavy solid-gold underline on every heading. */
.sub-sec > h2 {
  position: relative;
  margin-block-end: 1.3rem; padding-block-end: .9rem;
  border-block-end: 1px solid var(--stone); max-width: 42rem;
}
.sub-sec > h2::after {
  content: ''; position: absolute; inset-block-end: -1px; inset-inline-start: 0;
  width: 5.5rem; height: 3px; background: var(--accent-lt);
}
.sub-intro { color: var(--muted); margin-block-end: 1.8rem; max-width: 42rem; }

.checks { display: grid; gap: 0; max-width: 44rem; border-block-start: 1px solid var(--stone); }
.checks li {
  position: relative;
  padding-block: .9rem; padding-inline-start: 1.5rem;
  border-block-end: 1px solid var(--stone); color: var(--ink-2);
}
/* A small gold diamond per covered item — the checklist's own geometry,
   centered on the first line of text. */
.checks li::before {
  content: ''; position: absolute;
  inset-inline-start: 2px; inset-block-start: calc(.9rem + 1em - 4px);
  width: 8px; height: 8px; background: var(--accent-lt);
  transform: rotate(45deg);
}

.steps { border-block-start: 1px solid var(--stone); }
.steps > li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.5rem; padding-block: 1.7rem; border-block-end: 1px solid var(--stone); }
.steps h3 { margin-block-end: .5rem; }
.steps p { color: var(--muted); font-size: 1.1rem; }

.pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; }
/* Stone hairline + one small gold diamond per item — the checklist's own
   geometry. Six full-width gold rules in one grid diluted the signature;
   gold stays jewelry. */
.pairs article { border-block-start: 1px solid var(--stone); padding-block-start: 1.4rem; }
.pairs h3 { position: relative; font-size: 1.22rem; margin-block-end: .6rem; padding-inline-start: 1.3rem; }
.pairs h3::before {
  content: ''; position: absolute;
  inset-inline-start: 0; inset-block-start: calc(.61em - 4px);
  width: 8px; height: 8px; background: var(--accent-lt);
  transform: rotate(45deg);
}
.pairs p { color: var(--muted); font-size: 1.1rem; }

.side { display: grid; gap: 2.5rem; position: sticky; inset-block-start: 8rem; }
.side-block .label { margin-block-end: 1rem; }
.side-links li { border-block-end: 1px solid var(--stone); }
.side-links a { display: block; padding-block: .8rem; color: var(--ink-2); font-size: .95rem; }
.side-links a:hover { color: var(--accent); text-decoration: none; }
.side-portrait { margin-block-end: 1.4rem; max-width: 12rem; }
.side-portrait img { width: 100%; }
.side-tel { display: inline-block; font-family: var(--display); font-weight: 600; font-size: 1.5rem; color: var(--ink); }
.side-tel:hover { color: var(--accent); text-decoration: none; }
.side-note { color: var(--muted); font-size: .95rem; line-height: 1.8; margin-block-end: .6rem; }

/* ------------------------------------------------------------ faq */

.faq { padding-block: var(--gap-sec); background: var(--paper-2); }
.faq-list { border-block-start: 1px solid var(--stone); max-width: 52rem; }
/* When the stamp band IS the FAQ's header, the list follows it closely —
   a full section gap after a headline band reads as two strangers. */
.quiet + .faq { padding-block-start: calc(var(--gap-sec) * .55); }
.faq-group { margin-block-end: 3.5rem; }
.faq-group > h2 { font-size: 1.5rem; margin-block-end: 1rem; }
/* The group heading IS a link to its practice page — say so: gold arrow,
   nudge on hover, the textlink language. */
.faq-group > h2 a { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); }
.faq-group > h2 a .ic { color: var(--accent); transition: transform .25s var(--ease); }
.faq-group > h2 a:hover { color: var(--accent); text-decoration: none; }
.faq-group > h2 a:hover .ic { transform: translateX(-4px); }
.faq-item { border-block-end: 1px solid var(--stone); }
.faq-item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem;
  padding-block: 1.4rem; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover .faq-q { color: var(--accent); }
.faq-q { font-family: var(--display); font-weight: 500; font-size: 1.22rem; line-height: 1.55; color: var(--ink); }
.faq-ic { position: relative; width: 14px; height: 14px; flex: none; margin-block-start: .65rem; }
.faq-ic::before, .faq-ic::after {
  content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 0;
  width: 14px; height: 2px; background: var(--accent); transition: transform .3s var(--ease);
}
.faq-ic::after { transform: rotate(90deg); }
.faq-item[open] .faq-ic::after { transform: rotate(0deg); }
.faq-a { padding-block-end: 1.6rem; max-width: 44rem; }
.faq-a p { color: var(--ink-2); }

/* ------------------------------------------------------------ closing */

.closing {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: var(--gap-sec); background: var(--deep); color: var(--on-deep);
}
/* The consultation scene under the invitation to talk — present as
   atmosphere, not as a picture: a heavy uniform veil keeps every measured
   pair intact and the chairs barely-there. */
.closing-figure { position: absolute; inset: 0; z-index: 0; }
.closing-figure img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  filter: var(--grade);
}
.closing-figure::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: rgba(14, 12, 9, .66);
}
.closing .wrap { position: relative; z-index: 2; }
/* Message column against action column — the closing speaks the site's own
   editorial language instead of the centered-CTA template. */
.closing-grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 6rem); align-items: center;
}
/* Desktop: content at the reading start (right, like every section on this
   RTL site), the portrait full-rich on the LEFT, gazing into the content
   and dissolving into the deep ground before the text begins. The veiled
   chairs stay for phones. */
.closing-portrait { display: none; }
@media (min-width: 861px) {
  .closing-figure { display: none; }
  /* Starting the figure 9% down scales the whole portrait down with it —
     the face stops competing with the headline. */
  .closing-portrait { display: block; position: absolute; inset-block: 9% 0; left: 0; width: 44%; z-index: 0; }
  /* The frame is graded at the source — no extra darkening filter, and the
     dissolves only kiss the edges (the client asked for less shadow; the
     text sits on solid ground either way). */
  .closing-portrait img {
    width: 100%; height: 100%; object-fit: cover; object-position: 42% 22%;
  }
  .closing-portrait::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(to left, var(--deep) 0%, rgba(14, 12, 9, 0) 18%),
      linear-gradient(to bottom, var(--deep) 0%, rgba(14, 12, 9, 0) 10%);
  }
  .closing-grid { grid-template-columns: minmax(0, 48fr) minmax(0, 52fr); gap: 0; }
  .closing-grid > * { grid-column: 1; }
  .closing-copy { margin-block-end: 2.2rem; }
  .closing-act { max-width: 30rem; }
}
.closing h2 { color: #fff; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); max-width: 12em; }
/* Channels first, then the formal invitation — a quiet human "או" between
   them, and the gold button closes the page. */
.ch-or { display: block; text-align: center; color: var(--on-deep-2); font-size: .95rem; margin-block: 1.3rem; }
.closing .btn { display: block; width: 100%; text-align: center; margin-block-end: 0; }
/* The channels as hairline rows — the same list language as the router and
   the index: a gold icon, a small key, the value in full. */
.closing-ch { border-block-start: 1px solid var(--line-deep); }
.closing-ch li { border-block-end: 1px solid var(--line-deep); }
.closing-ch a {
  display: flex; align-items: center; gap: 1.1rem;
  padding-block: 1.05rem; min-height: 56px; color: var(--on-deep);
}
.closing-ch .ic { color: var(--accent-lt); flex: none; }
/* The channel keys read as the gold wayfinding they are — champagne and a
   step heavier, not near-invisible beige. */
.ch-k { display: block; font-size: .85rem; font-weight: 500; color: var(--accent-lt); margin-block-end: .1rem; }
/* One quiet line under the closing headline — what the call actually buys. */
.closing-sub { color: var(--on-deep-2); font-weight: 300; margin-block-start: 1rem; max-width: 28rem; }
.ch-v { font-size: 1.1rem; }
.closing-ch a:hover { color: var(--accent-lt); text-decoration: none; }

/* ------------------------------------------------------- lead dialog
   "השארת פרטים" opens the form in place: a paper card over the dark page.
   The choreography is mechanical, not bouncy — the panel is revealed like
   an aperture opening, the gold rule draws itself, then the fields engage
   one after another on a fixed cadence. All of it dies under
   reduced-motion / data-motion="0" like every other animation here. */
.lead-dialog {
  border: 0; padding: 0; background: var(--paper); color: var(--ink);
  width: min(30rem, calc(100vw - 2rem));
  margin: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.lead-dialog::backdrop { background: rgba(14, 12, 9, .72); }
.lead-dialog[open] { animation: dlg-aperture .38s cubic-bezier(.3, 0, .15, 1) both; }
.dlg-body { padding: 1.5rem 1.8rem 2rem; }
/* The gold engage-bar: draws from the RTL anchor once the panel is open. */
.dlg-body::before {
  content: ''; display: block; height: 3px; background: var(--accent-lt);
  margin: -1.5rem -1.8rem 1.4rem;
  transform-origin: 100% 50%;
}
.lead-dialog[open] .dlg-body::before { animation: hero-rule-in .5s var(--ease) .12s both; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: .2rem; }
.dlg-sub { color: var(--muted); font-size: .95rem; line-height: 1.7; margin-block-end: 1.2rem; }
/* Inside the dialog the airy contact-page fields compress to sheet rhythm —
   half the dead space, same anatomy. */
.lead-dialog .form { gap: 1.05rem; }
.lead-dialog .field { gap: .2rem; }
.lead-dialog .field label { font-size: .9rem; color: var(--muted); }
.lead-dialog .field input, .lead-dialog .field select, .lead-dialog .field textarea {
  font-size: 1.05rem; line-height: 1.5; min-height: 46px; padding: .45rem 0;
}
.lead-dialog .field textarea { min-height: auto; resize: none; }
.lead-dialog .form .btn { width: 100%; margin-block-start: .4rem; }
.lead-dialog .fineprint { font-size: .8rem; margin-block-start: .8rem; }
.dlg-head .label { margin-block-end: 0; }
.dlg-close {
  font-family: var(--sans); font-size: 1.7rem; line-height: 1; color: var(--muted);
  background: none; border: 0; cursor: pointer;
  min-width: 44px; min-height: 44px; margin-inline-start: .5rem;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.dlg-close:hover { color: var(--ink); transform: rotate(90deg); }
/* Staggered engagement: each row of the form arrives on a fixed cadence. */
.lead-dialog[open] .form > * { animation: dlg-rise .45s cubic-bezier(.3, 0, .1, 1) both; }
.lead-dialog[open] .form > *:nth-child(2) { animation-delay: .16s; }
.lead-dialog[open] .form > *:nth-child(3) { animation-delay: .23s; }
.lead-dialog[open] .form > *:nth-child(4) { animation-delay: .3s; }
.lead-dialog[open] .form > *:nth-child(5) { animation-delay: .37s; }
.lead-dialog[open] .form > *:nth-child(6) { animation-delay: .44s; }
.lead-dialog[open] .form > *:nth-child(7) { animation-delay: .51s; }
@keyframes dlg-aperture {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes dlg-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ contact */

/* The same channel-row language as the closing, on paper: stone hairlines,
   gold icon, small key over the full value. One control, one look. */
.contact-ch { border-block-start: 1px solid var(--stone); margin-block-end: 2.4rem; }
.contact-ch li { border-block-end: 1px solid var(--stone); }
.contact-ch a {
  display: flex; align-items: center; gap: 1.1rem;
  padding-block: 1.05rem; min-height: 56px; color: var(--ink);
}
.contact-ch .ic { color: var(--accent); flex: none; }
.contact-ch .ch-k { color: var(--muted); }
.contact-ch a:hover { color: var(--accent); text-decoration: none; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 1.5rem + 4vw, 6rem); align-items: start; }
.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: .5rem; }
.field label { font-size: .95rem; font-weight: 500; color: var(--muted); }
.field .opt { color: var(--muted); font-weight: 300; }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 1.1rem; color: var(--ink);
  background: transparent; border: 0; border-block-end: 1px solid var(--stone);
  padding: .7rem 0; min-height: 52px; width: 100%; transition: border-color .25s var(--ease);
}
.field textarea { min-height: auto; resize: vertical; }
/* The field is dir="ltr" so the digits stay in Latin order; `end` keeps them
   aligned to the same edge as the Hebrew label above, without a physical side. */
.field input[type="tel"] { text-align: end; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 0; border-block-end: 2px solid var(--accent-lt);
}
.field input:user-invalid { border-block-end-color: #9d3b33; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fineprint { font-size: .85rem; color: var(--muted); line-height: 1.75; }
.err { color: #8f342c; font-size: .85rem; margin: 0; }

/* ------------------------------------------------------------ placeholders */

.ph {
  display: grid; place-items: center; width: 100%;
  background: var(--paper-2); border: 1px solid var(--stone);
  color: var(--muted); font-size: .88rem; text-align: center; padding: 1.5rem;
}
.note { border-inline-start: 2px solid var(--accent-lt); padding-block: .2rem; padding-inline: 1.2rem 0; color: var(--muted); }
.center { text-align: center; }
.center .label { justify-content: center; }
.center-links { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.center-links li { border-block-end: 0; }

/* ------------------------------------------------------------ footer
   The dark footer the canon ships: black ground, gold column headings. */

.site-footer { background: var(--deep); color: var(--on-deep); border-block-start: 1px solid var(--gold-line); padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2rem; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2.5rem; flex-wrap: wrap; padding-block-end: 3rem; border-block-end: 1px solid var(--line-deep); }
.wm-foot { margin-inline-end: 0; }
.wm-foot .wm-name { color: var(--on-deep); }
/* Identity only — the channels live in the header (always visible) and in
   the closing chips directly above; repeating them here said it twice in
   two adjacent dark bands. */
.foot-nap { display: grid; gap: .45rem; font-style: normal; text-align: start; color: var(--on-deep-2); font-size: .95rem; }

.foot-cols { display: flex; gap: clamp(2.5rem, 1.5rem + 4vw, 6rem); flex-wrap: wrap; padding-block: 3rem; }
.foot-cols h2 { font-size: .95rem; font-family: var(--sans); font-weight: 600; color: var(--accent-lt); margin-block-end: 1.1rem; }
.foot-cols li + li { margin-block-start: .5rem; }
.foot-cols a { color: var(--on-deep-2); font-size: .95rem; }
.foot-cols a:hover { color: var(--accent-lt); }

.foot-bottom { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-block-start: 2rem; border-block-start: 1px solid var(--line-deep); font-size: .85rem; color: var(--on-deep-2); line-height: 1.8; }
.foot-bottom .credit { color: var(--accent-lt); }
.foot-bottom .credit:hover { text-decoration: underline; }
.foot-bottom .credit-wa .ic { vertical-align: -3px; }
.foot-bottom p:first-child { max-width: 46rem; }

/* ------------------------------------------------------------ a11y widget */

.a11y-btn {
  position: fixed; inset-block-end: 1.5rem; inset-inline-start: 1.5rem; z-index: 80;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--deep); border: 1px solid var(--accent-lt); color: var(--accent-lt);
  cursor: pointer; opacity: .85; transition: opacity .25s var(--ease);
}
.a11y-btn:hover { opacity: 1; }
.a11y-panel {
  position: fixed; inset-block-end: 4.6rem; inset-inline-start: 1.5rem; z-index: 81;
  width: 15rem; background: var(--deep-2); border: 1px solid var(--gold-line);
  color: var(--on-deep); padding: 1rem; display: grid; gap: .3rem;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { font-size: .95rem; font-family: var(--sans); font-weight: 600; color: var(--accent-lt); margin-block-end: .4rem; }
.a11y-panel button {
  text-align: start; background: none; border: 0; border-block-end: 1px solid var(--line-deep);
  padding: .7rem .2rem; font-family: var(--sans); font-size: .95rem; color: var(--on-deep);
  cursor: pointer; min-height: 44px;
}
.a11y-panel button:hover { color: var(--accent-lt); }
.a11y-panel a { font-size: .85rem; color: var(--accent-lt); padding-block-start: .6rem; }

/* ------------------------------------------------------------ entrance
   One authored opening instead of an identical reveal on every section:
   the hero reads itself in — identity, headline, the gold rule drawing
   from its anchor, then the promise — while the photograph settles.
   Killed wholesale by reduced-motion and the a11y motion toggle. */

@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-rule-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes hero-settle {
  from { transform: scale(1.045); }
  to { transform: scale(1); }
}
.hero-eyebrow { animation: hero-in .7s var(--ease) .1s both; }
.hero h1 { animation: hero-in .8s var(--ease) .28s both; }
/* origin 100% = the right edge, the RTL anchor — the bar draws outward. */
.hero-rule { transform-origin: 100% 50%; animation: hero-rule-in .6s var(--ease) .95s both; }
.hero-sub { animation: hero-in .8s var(--ease) .6s both; }
.hero-figure img { animation: hero-settle 2.2s var(--ease) both; }

/* ------------------------------------------------------------ a11y modes */

html[data-contrast="1"] {
  --ink: #000; --ink-2: #000; --muted: #1c1c1c; --accent: #5c4526;
  --paper: #fff; --paper-2: #fff; --stone: #000;
  --deep: #000; --deep-2: #000;
  --on-deep: #fff; --on-deep-2: #fff; --accent-lt: #ffd9a0;
  --line-deep: #fff; --gold-line: #ffd9a0;
}
html[data-links="1"] a { text-decoration: underline; }
html[data-motion="0"] *, html[data-motion="0"] *::before, html[data-motion="0"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
  /* Below the split the headline stops sharing the frame with the photograph.
     Type sits on the dark ground, the picture follows it full-bleed. */
  .hero {
    min-height: auto; padding-block: 4.5rem 0;
    justify-content: flex-start;
  }
  .hero-inner { order: 1; }
  .hero-col { max-width: none; }
  .hero-figure {
    order: 2; position: static; inset: auto;
    margin-block-start: 3rem; width: 100%;
  }
  .hero-figure img {
    height: auto; max-height: 62vh; object-fit: cover; object-position: 50% 22%;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 9%);
    mask-image: linear-gradient(to top, transparent 0%, #000 9%);
  }
  .quiet { min-height: 44svh; }
}

@media (max-width: 1000px) {
  .layout-aside { grid-template-columns: 1fr; }
  .side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; gap: 2.2rem; }
}

@media (max-width: 860px) {
  .wrap, .wrap.narrow { width: calc(100% - 2.5rem); }
  .header-inner { min-height: 72px; gap: 1.1rem; }
  .burger { display: flex; }
  /* Naked glyphs, no chrome: boxed icons put three competing shapes in the
     most-seen strip of the site. Bare champagne icons beside the burger
     keep the header airy and the gold jewelry-rare. Tap targets stay 44px
     through the transparent hit area. */
  .header-inner { min-height: 72px; gap: 1.2rem; }
  .tel-mini, .wa-mini {
    display: grid; place-items: center; width: 42px; height: 44px;
    border: 0; background: none; color: var(--accent-lt);
    transition: color .25s var(--ease);
  }
  .tel-mini:hover, .tel-mini:active, .wa-mini:hover, .wa-mini:active { color: #fff; }
  /* 24px exactly — the icons are drawn on a 24 grid, and any other size
     lands every coordinate on fractional pixels and smears the strokes. */
  .tel-mini .ic, .wa-mini .ic { width: 24px; height: 24px; stroke-width: 1.5; }

  .primary {
    position: fixed; inset-block: 0 auto; inset-inline-end: 0;
    width: min(21rem, 86vw); height: 100dvh; z-index: 95;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    background: var(--deep); padding: 6rem 2rem 2.5rem; overflow-y: auto;
    border-inline-start: 1px solid var(--gold-line);
    transform: translateX(-100%); transition: transform .4s var(--ease);
  }
  /* translateX(0), never `none` — a transition to `none` is not reliably
     interpolatable and can strand the drawer at its start position. */
  .primary.open { transform: translateX(0); }
  .primary > ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .primary > ul > li { border-block-end: 1px solid var(--line-deep); }
  /* Drawer items at display scale — a premium menu, not a link list. */
  .primary a { color: var(--on-deep); display: flex; align-items: center; min-height: 60px; font-size: 1.35rem; font-weight: 500; }
  .primary a[aria-current] { color: var(--accent-lt); }
  /* The dead space at the drawer's foot becomes the call block, pinned to
     the bottom: kicker, display-size number, WhatsApp line, identity. */
  .drawer-call {
    display: block; margin-block-start: auto;
    padding-block-start: 1.6rem; border-block-start: 1px solid var(--line-deep);
  }
  .drawer-call .label { display: flex; color: var(--accent-lt); margin-block-end: .7rem; }
  .nav-tel {
    color: var(--accent-lt); border: 0; padding: 0; margin: 0;
    font-family: var(--display); font-weight: 600; font-size: 1.7rem;
  }
  .nav-tel:hover { background: transparent; color: var(--accent-lt); }
  /* The number is an LTR run inside a flex anchor — without an explicit
     end-anchor it drifts to the drawer's left edge. */
  .primary .nav-tel { justify-content: flex-end; }
  .primary .nav-wa {
    display: inline-flex; align-items: center; gap: .6rem;
    margin-block-start: .6rem; min-height: 44px;
    color: var(--on-deep-2); font-size: 1rem; font-weight: 400;
  }
  .nav-wa .ic { color: var(--accent-lt); }
  .drawer-note { display: block; margin-block-start: 1.6rem; color: var(--on-deep-2); font-size: .9rem; }
  .has-sub { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .sub-toggle {
    display: grid; place-items: center; width: 44px; height: 44px;
    background: none; border: 0; color: var(--accent-lt); cursor: pointer;
    transition: transform .3s var(--ease);
  }
  .sub-toggle[aria-expanded="true"] { transform: rotate(45deg); }
  .sub {
    position: static; grid-column: 1 / -1; width: auto; min-width: 0; max-width: none;
    background: transparent; border: 0; padding: 0 0 .8rem;
    opacity: 1; visibility: visible; transform: none; display: none;
  }
  .sub.open { display: block; }
  /* Children stay a register below their parent item. */
  .sub a { color: var(--on-deep-2); padding: .55rem 1rem; font-size: 1.05rem; font-weight: 400; min-height: 46px; }
  /* Must stay BELOW .site-header's z-index (90). The drawer lives inside the
     header, so its own z-index resolves inside the header's stacking context —
     a backdrop above 90 paints over the drawer and swallows every nav tap. */
  .nav-backdrop { position: fixed; inset: 0; background: rgba(14,12,9,.55); z-index: 85; border: 0; }

  /* On phones the text spans the full frame, including the lit subject —
     the scrims deepen so no bright pixel survives under a line. Both boosts
     are pixel-verified at 375px. */
  .quiet-figure::after {
    background: linear-gradient(to left, rgba(14, 12, 9, .8) 0%, rgba(14, 12, 9, .58) 55%, rgba(14, 12, 9, .52) 100%);
  }
  .statement-figure::after { background: rgba(14, 12, 9, .64); }
  .closing-figure::after { background: rgba(14, 12, 9, .74); }
  .closing-grid { grid-template-columns: 1fr; gap: 2.6rem; }

  /* The band subjects live in the LEFT third of each frame; a centered
     cover-crop on a phone slices them at the edge and fills the screen
     with the empty right side. Anchor the crop on the subject. */
  .quiet-figure img { object-position: 20% 62%; }
  /* The light band keeps its text over the photograph on phones too. The
     narrow crop drags the black ink pad under the headline (measured
     1.01:1 bare), so phones get the light world's version of a scrim — a
     paper veil that lifts every dark pixel while the scene stays visible. */
  .quiet-light .quiet-figure img { object-position: 28% 55%; }
  .quiet-light { min-height: 44svh; }
  .quiet-light .quiet-figure::after {
    background: rgba(251, 250, 247, .55);
  }
  /* No room for a side panel on phones, and the photos are measured too
     bright to sit behind text — so the opener stacks: headline and lead on
     the solid ground, then the photograph full-bleed, emerging from the
     dark with a top dissolve. The brightness comes from the picture, the
     contrast from the token. */
  .page-hero.has-figure { display: flex; flex-direction: column; padding-block: 2.8rem 0; }
  .page-hero.has-figure .wrap { display: block; }
  /* Preserve the established phone composition: words on the deep ground,
     then the unboxed portrait. The daylight split is desktop-only, where
     the two columns need a clear visual handoff. */
  .contact-hero { background: var(--deep); color: var(--on-deep); border-block-end-color: var(--gold-line); }
  .contact-hero h1 { color: #fff; }
  .contact-hero .lead { color: var(--on-deep-2); }
  .page-hero-figure {
    position: relative; inset-block: auto; left: auto; width: 100%; z-index: 0;
    order: 2; margin-block-start: 2.2rem;
    aspect-ratio: 2 / 1;
  }
  .contact-hero .page-hero-figure { border-inline-start: 0; }
  .page-hero-figure img { object-position: 50% 45%; }
  /* A glimpse, not a poster: the photograph surfaces out of the dark and
     sinks back into it, so the opener still ends on the solid ground and
     the gold hairline keeps the seam — bright photo never meets bright
     paper. */
  .page-hero-figure::after {
    background: linear-gradient(to bottom, var(--deep) 0%, rgba(14, 12, 9, 0) 32%, rgba(14, 12, 9, 0) 68%, var(--deep) 100%);
  }
  /* On a portrait the dissolve may touch only the frame's edges — a 32%
     reach shades the face. */
  .page-hero-figure.figure-pinhas::after {
    background: linear-gradient(to bottom, var(--deep) 0%, rgba(14, 12, 9, 0) 16%, rgba(14, 12, 9, 0) 80%, var(--deep) 100%);
  }
  .contact-hero .page-hero-figure::after {
    background: linear-gradient(to bottom, var(--deep) 0%, rgba(14, 12, 9, 0) 16%, rgba(14, 12, 9, 0) 80%, var(--deep) 100%);
  }

  .hero { padding-block: 3.2rem 0; }
  .hero-cue { display: none; }
  /* Fit the whole eyebrow on one line at common phone widths: a touch
     smaller, and a shorter trailing dash. */
  .hero-eyebrow { margin-block-end: 1.6rem; font-size: 1rem; }
  .hero-eyebrow .nb:last-child::after { width: 1.8rem; margin-inline-start: .7rem; }
  .hero-rule { margin-block-start: 1.6rem; }
  .hero-sub { margin-block-start: 1.6rem; }
  .hero-figure { margin-block-start: 2rem; }
  .hero-figure img { max-height: 56vh; }
  .quiet { min-height: 40svh; }
  /* The arrows STAY on phones — this band is the site's main router, and a
     row with no affordance reads as a statement, not a link. */
  .route-list a { grid-template-columns: 3.4rem minmax(0, 1fr) 1.5rem; gap: 1.1rem; align-items: start; }
  .route-arrow { align-self: center; }
  /* The about beat stacks only below 860px. Phones receive a dedicated 4:5
     portrait, so the suit and breathing room survive instead of collapsing
     into the oversized-face crop used by the desktop source. */
  .portrait-sec .wrap { grid-template-columns: 1fr; }
  .portrait-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; }
  .portrait-media::before { inset-inline: -1rem 3rem; inset-block: 1rem -1rem; }
  .index a { grid-template-columns: 3rem minmax(0, 1fr) 1.4rem; gap: 1rem; }
  .creds > div, .creds.wide > div { grid-template-columns: 1fr; gap: .2rem; }
  .pairs { grid-template-columns: 1fr; gap: 2rem; }
  .foot-top { flex-direction: column; gap: 1.8rem; }
  .foot-cols { gap: 2.5rem; }
  /* Clearance for the fixed accessibility button, which otherwise sits on
     the disclaimer's last lines at the very end of the page. */
  .site-footer { padding-block-end: 5rem; }
}

/* Narrow Androids (Galaxy S8 class, 360px wide): one more notch keeps the
   whole eyebrow on a single line; below ~340px it wraps cleanly at a
   separator, the dash glued to the year. */
@media (max-width: 370px) {
  .hero-eyebrow { font-size: .95rem; }
  .hero-eyebrow .nb:last-child::after { width: 1.5rem; margin-inline-start: .6rem; }
}

@media (max-width: 560px) {
  .side { grid-template-columns: 1fr; }
  .quiet { min-height: 36svh; }
  .portrait-media img { object-position: 50% 50%; }
  .btn { width: 100%; }
  .a11y-btn { inset-block-end: 1rem; inset-inline-start: 1rem; }
  /* On phones the lead dialog is a bottom sheet: full width, rising from
     the bar the thumb already lives on. */
  .lead-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 92dvh; overflow-y: auto; }
  .a11y-panel { inset-block-end: 4rem; inset-inline-start: 1rem; }
}

@media print {
  .site-header, .a11y-btn, .a11y-panel, .skip, .hero-cue, .closing, .form { display: none !important; }
  body { color: #000; background: #fff; }
  * { animation: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}