/* ===================================================================
   about.css - the About page only.

   Previously /about/ loaded home.css to borrow the team and values
   blocks. Sharing those styles is part of why the two pages read as
   the same page with different words: the roster, the rules slab and
   the section rhythm were literally the home page's. About now owns
   its composition.

   Loads after global.css and parts.css, so rules here win on ties.

   The page's one idea: THE UNBROKEN CARRY. One line, six stops, and it
   does not stop at the sixth - it runs off the edge of the sheet it is
   drawn on, because the last stage is the one with no end. Continuity
   is the only claim this page makes about the firm, so it is drawn as
   a property of the construction: ONE box paints the rail. No list
   item paints any part of it, so it cannot break at a stop, at a wrap,
   or at a width nobody tested.

   Depth on this page:
     1. the portraits hang half their height over the head -> band edge
     2. the rail's sheet is the page's single raised white object
     3. the rail bleeds off that sheet's inline-end edge
     4. H1 ~4.2x body at 1280
     5. tonal rhythm  W . W . P . D . W . P . T
     6. the rail itself, derived from the six-stage process
   =================================================================== */

:root{
  /* the portrait column width == the image height (the images are square),
     computed in lengths only so the hang and the clearance below it agree.
     224px is the source size; the image is never scaled above it. */
  --fgap:clamp(14px,2.4vw,32px);
  --fw:min(224px,calc((min(736px,100vw - 2*clamp(16px,6vw,82px)) - 2*var(--fgap))/3));
}

/* Hebrew is never tracked. global.css still tightens .hd h1 and .stmt;
   on this page that is overridden rather than inherited. */
.hd-people h1,.ab-sec h2,.own-close,.stmt,.closer h2,.deliv li,
.carry-rail,.carry-n,.creed li,.creed li b,.crew-lead,.cw h3,.cw p{letter-spacing:0}

/* Screen-reader-only text, page-scoped on purpose. The site's own .vh is
   in global.css, which the accessibility pass owns and is still editing;
   this page depends on it for the rail's <figcaption> - the sentence that
   tells a screen-reader user what the drawing says - and cannot afford to
   inherit a definition that moves under it. Carried on <figcaption>, never
   a <span>: a 1px clipped span reads as truncated text to a DOM audit. */
.a-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- 1
   The statement head: H1, lead, one ruled facts line, three faces
   that break the bottom edge. Nothing above the H1 but the trail.
   ---------------------------------------------------------------- */
.hd-people{background:var(--white);border-bottom:1px solid var(--rule);
  padding-bottom:0;overflow:visible}
.hd-people h1{font-size:var(--t-claim);line-height:1.04;max-width:20ch;
  text-wrap:balance}
.hd-people .hd-lead{margin-top:clamp(18px,2.2vw,26px);max-width:58ch;
  font-size:var(--t-sub);line-height:1.72;color:var(--ink-2)}
.hd-people .hd-lead bdi{unicode-bidi:isolate}

/* firm facts: ONE ruled sentence-line, run-ins inline, "·" generated. */
.facts-line{display:flex;flex-wrap:wrap;align-items:baseline;
  margin:clamp(18px,2.2vw,26px) 0 0;padding-top:14px;
  border-top:1px solid var(--rule);max-width:900px;letter-spacing:0;
  font-size:var(--t-base);line-height:1.7;color:var(--ink-2)}
.facts-line span{display:inline}
.facts-line b{font-weight:800;color:var(--ink)}
.facts-line span:not(:last-child)::after{content:"\00B7";margin-inline:.62em;
  color:var(--muted);font-weight:400}

/* the portraits: once on the page, uncut, half of each image below the
   band edge. The shadow is what says "in front of", not a border. */
.faces{display:grid;grid-template-columns:repeat(3,minmax(0,224px));gap:var(--fgap);
  max-width:736px;margin:clamp(28px,3.4vw,44px) 0 0;
  position:relative;z-index:2;
  /* 100% of the block puts the whole figure below the edge; backing off by
     half an image height lands the edge exactly on the portrait's midline,
     whatever the caption wraps to. */
  transform:translateY(calc(100% - var(--fw)/2))}
.faces figure{margin:0}
.faces img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:3px;
  box-shadow:0 24px 56px rgba(13,26,23,.20),0 2px 6px rgba(13,26,23,.08)}
.faces figcaption{margin-top:12px;line-height:1.45}
.faces figcaption b{display:block;font-weight:800;letter-spacing:0;color:var(--ink);
  font-size:var(--t-base)}
.faces figcaption span{display:block;margin-top:2px;font-weight:600;color:var(--td);
  font-size:var(--t-cap);line-height:1.4}
.faces figcaption bdi{display:block;margin-top:5px;color:var(--muted);
  font-size:var(--t-cap);direction:ltr;unicode-bidi:isolate;text-align:start}

/* band 2 clears the hanging half plus the captions. */
/* moved to the end of this file: the pacing rules below set
   padding-block, which would otherwise wipe this clearance. */

/* ---------------------------------------------------------------- 2
   Section head: the H2 answers the question, the paragraph answers it
   again in full. One hairline above, never a label.
   ---------------------------------------------------------------- */
.ab-sec{border-top:1px solid var(--border-hair);padding-top:clamp(16px,2vw,24px);
  margin-bottom:clamp(28px,3.6vw,48px)}
.ab-sec h2{margin:0;font-size:var(--t-h2);font-weight:800;
  line-height:1.14;color:var(--text-base);max-width:22ch;text-wrap:balance}.ab-sec p{margin:clamp(14px,1.6vw,20px) 0 0;max-width:62ch;color:var(--text-secondary);
  font-size:var(--t-base);line-height:1.7}.ab-sec h2 bdi{unicode-bidi:isolate}

/* the origin section: the statement is a pull-quote beside the prose on
   the desktop and after it on a phone - never above the heading. */
.split .prose h2{margin:0 0 clamp(14px,1.6vw,20px);font-size:var(--t-h2);
  font-weight:800;line-height:1.14;letter-spacing:0;color:var(--ink);
  max-width:20ch;text-wrap:balance}
.split-rail .stmt{max-width:14ch}
.split-rail .stmt::after{content:"";display:block;width:44px;height:2px;
  background:var(--td);margin-top:clamp(16px,2vw,24px)}
@media(max-width:840px){
  .split-rail{order:2}
  .split-rail .stmt{max-width:20ch;font-size:var(--t-lead)}
}

/* ---------------------------------------------------------------- 3
   THE CARRY RAIL - the page's one object, inside its one raised sheet.

   What used to be here: a three-row table, one row per named partner,
   six identical cells each. The client's ruling of 2026-09-09 removed
   both halves of it at once - there is no ownership to draw (S1), and
   the promise of continuity belongs to the firm rather than to three
   named individuals (S6). Three identical lanes encoded nothing in any
   case; the axis was doing all the work, so the axis is what is drawn.

   CONTINUITY BY CONSTRUCTION. The rail is a single absolutely
   positioned box on <ol class="carry-rail">. Not six borders, not
   three lanes, not a repeating background: one box, one line. No <li>
   paints any part of it, so it cannot break at a stop, at a wrap or at
   a width nobody tested - which is the whole point of the component.

   And it does not end at stop six. Stage six is "תמיכה ושיפור מתמשך",
   the one stage with no end, so the line runs past the last station
   and off the inline-end edge of the sheet, where .own-sheet clips it.
   That bleed is the page's second depth device after the portraits.

   The numerals are legitimate here and only here: these six stages are
   a real order. They sit BESIDE their stage names on one baseline,
   never stacked above them.
   ---------------------------------------------------------------- */

.own-sheet{--sheetpad:clamp(18px,2.8vw,38px);
  position:relative;overflow:hidden;
  background:var(--white);border:1px solid var(--rule);border-radius:4px;
  padding:var(--sheetpad);
  box-shadow:0 28px 64px rgba(13,26,23,.10),0 2px 6px rgba(13,26,23,.05)}

.carry{margin:0}

/* >=901px: the rail runs across the sheet and the six stops hang from
   it. --tick is the drop from the rail to a stop; --tickgap is the air
   between the end of that drop and the text, so no line ever touches a
   word it points at. */
.carry-rail{--tick:clamp(22px,2.6vw,34px);--tickgap:clamp(12px,1.4vw,18px);
  position:relative;margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  column-gap:clamp(12px,1.9vw,30px);
  padding-block-start:calc(var(--tick) + var(--tickgap))}

/* THE RAIL. One box. Nothing else on this page paints it. It starts at
   the first station and runs a full sheet-padding past the last one, to
   the sheet's inner edge. */
.carry-rail::before{content:"";position:absolute;top:0;inset-inline-start:0;
  inline-size:calc(100% + var(--sheetpad));block-size:2px;
  background:var(--td)}

/* the stations: a 1px drop from the rail to each stop's cap line */
.carry-rail li{position:relative;margin:0;min-width:0;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:.46em;align-items:baseline}
.carry-rail li::before{content:"";position:absolute;
  top:calc(-1 * (var(--tick) + var(--tickgap)));inset-inline-start:0;
  inline-size:1px;block-size:var(--tick);background:var(--td)}

.carry-n{font-weight:800;color:var(--td);font-variant-numeric:tabular-nums;
  font-size:var(--t-base);line-height:1.32}
.carry-rail li span{font-weight:800;color:var(--ink);
  font-size:var(--t-base);line-height:1.32;
  overflow-wrap:break-word}

/* 901-1024px: six tracks in a 740px field. The stage names keep every
   word - they step down and wrap instead of being cut. */
@media(min-width:901px) and (max-width:1024px){
  .carry-rail{column-gap:12px;--tick:20px;--tickgap:11px}
  .carry-n,.carry-rail li span{font-size:var(--t-cap);line-height:1.4}
}

/* <=900px: the same single line, stood on end. The rail is still one
   box - only its axis changes - and it still overruns the last stop,
   here into the clear space above .own-close rather than off the sheet,
   so it never crosses that line's own rule. */
@media(max-width:900px){
  .carry-rail{--tick:clamp(15px,3.2vw,24px);--tickgap:clamp(10px,1.8vw,14px);
    grid-template-columns:minmax(0,1fr);
    row-gap:clamp(13px,2.4vw,20px);
    padding-block-start:0;
    padding-inline-start:calc(var(--tick) + var(--tickgap))}
  .carry-rail::before{top:0;inset-inline-start:0;
    inline-size:2px;block-size:calc(100% + clamp(18px,3.6vw,30px))}
  .carry-rail li::before{top:.66em;
    inset-inline-start:calc(-1 * (var(--tick) + var(--tickgap)));
    inline-size:var(--tick);block-size:1px}
  /* The overrun needs somewhere to run. At the desktop it leaves the
     sheet sideways into empty padding; stood on end it ran 7px THROUGH
     the closing line's own rule at 760px, so the closing line takes
     more air here than it does above 900px. Scoped to .own-sheet
     because the base .own-close rule below uses the `margin` shorthand
     and is later in the file - a media query carries no extra weight.
     Measured clearance is reported by the probe, never assumed. */
  .own-sheet .own-close{margin-block-start:clamp(34px,5vw,46px)}
}
@media(max-width:480px){.own-sheet{padding:15px 13px}}

.own-close{margin:clamp(20px,2.4vw,30px) 0 0;padding-top:16px;
  border-top:1px solid var(--rule);font-weight:800;color:var(--ink);
  font-size:var(--t-base);line-height:1.5;letter-spacing:0}

.own-sheet+.crew{margin-top:clamp(34px,4.4vw,58px)}
.own-sheet+.midcta,.crew+.midcta{margin-top:clamp(30px,4vw,52px)}

/* ---------------------------------------------------------------- 3b
   THE CREW - three partners, named at size, hanging from ONE rule.

   The portraits are four bands above this, in the head, and they are
   not repeated here: a face is the strongest asset on the page and
   printing it twice halves it. What this block adds is the part a
   portrait cannot carry - how long each partner has done this and
   which side of the work is his. So the NAME is the object: set at
   roughly twice its own paragraph and hanging off a single 2px rule
   that runs under all three at once, drawn by .crew::after as one grid
   item spanning every column. One rule, three names, because the
   sentence above it says one team. No ground, no box, no shadow - the
   sheet above is the page's only raised object.
   ---------------------------------------------------------------- */
.crew{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto;column-gap:clamp(24px,3.4vw,56px)}
.crew-lead{grid-column:1/-1;grid-row:1;
  margin:0 0 clamp(20px,2.6vw,32px);max-width:56ch;
  font-size:var(--t-base);line-height:1.72;color:var(--ink-2)}
.crew-lead bdi{unicode-bidi:isolate}
/* the one rule, spanning all three columns */
.crew::after{content:"";grid-column:1/-1;grid-row:2;
  block-size:2px;background:var(--td);align-self:start}
.crew>.cw{grid-row:2;padding-block-start:clamp(16px,2vw,24px);min-width:0}
.crew>.cw:nth-child(2){grid-column:1}
.crew>.cw:nth-child(3){grid-column:2}
.crew>.cw:nth-child(4){grid-column:3}
.cw h3{margin:0 0 clamp(9px,1.1vw,13px);
  font-size:var(--t-sub);font-weight:800;line-height:1.16;
  color:var(--ink);text-wrap:balance}
.cw p{margin:0;max-width:44ch;font-size:var(--t-base);line-height:1.72;
  color:var(--ink-2)}

/* <=900px: three names cannot share one rule when they no longer share
   a row, so each takes the rule it hung from - same weight, same
   colour, nothing lost and nothing new introduced. */
@media(max-width:900px){
  .crew{display:block}
  .crew::after{display:none}
  .cw{border-top:2px solid var(--td);
    margin-block-start:clamp(24px,4vw,34px);
    padding-block-start:clamp(14px,2vw,20px)}
  .cw:first-of-type{margin-block-start:0}
  .cw p{max-width:60ch}
}

/* ---------------------------------------------------------------- 4
   The deliverables ledger on the dark band.

   This band used to repeat the six stage names as <h3>, two bands under
   the chart that already uses them as its axis - the same strings in the
   same numbered-label form, doing two jobs the reader could not tell
   apart. The names now appear as headings exactly once on the page (the
   chart axis), and this band says the only thing that is uniquely its
   own: what you are holding when each stage ends.

   Anatomy: a statement column beside a ruled ledger. Six lines, each a
   run-in sentence, never a term stacked above a line.
   ---------------------------------------------------------------- */
.deliv-band .band-in{display:grid;
  grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);
  gap:0 clamp(30px,5vw,84px);align-items:start}
.deliv-band .ab-sec{grid-column:1;grid-row:1;margin-bottom:0}
.deliv-band .deliv{grid-column:2;grid-row:1/span 2}
.deliv-band .rail-more{grid-column:1;grid-row:2;margin:clamp(24px,3vw,38px) 0 0}
/* the same ghost control global.css already gives .band-more on dark
   grounds; a white-filled button here read as a second primary. */
.band-dark .rail-more .btn-s{background:transparent;color:#fff;
  border-color:rgba(255,255,255,.35)}
.band-dark .rail-more .btn-s:hover,.band-dark .rail-more .btn-s:focus-visible{
  background:#fff;color:var(--td);border-color:#fff}

.deliv{margin:0;padding:0;list-style:none;border-top:2px solid var(--acc)}
.deliv li{margin:0;padding:clamp(13px,1.5vw,19px) 0;
  border-bottom:1px solid var(--rule-d);
  font-size:var(--t-base);line-height:1.7;
  color:rgba(255,255,255,.84);letter-spacing:0}
.deliv li:last-child{border-bottom:0;padding-bottom:0}
.deliv li b{font-weight:800;color:#fff;font-variant-numeric:tabular-nums}

@media(max-width:900px){
  .deliv-band .band-in{grid-template-columns:1fr}
  .deliv-band .ab-sec,.deliv-band .deliv,.deliv-band .rail-more{
    grid-column:1;grid-row:auto}
  .deliv-band .ab-sec{margin-bottom:clamp(22px,3vw,32px)}
}

/* ---------------------------------------------------------------- 5
   THE CREED - six decisions, drawn as a register of standing rules.

   This replaces .contrast, which stated the firm's position by listing
   what it is not. The client's standing instruction is that the site
   says what the firm IS, so a yes/no pair could not survive the
   rewrite in its own shape. Nothing informative was lost: each of the
   old negatives was protecting a decision, and the decision is stated
   here in the form the firm actually resolves it.

   NOT a port of .scope. The content pass suggested lifting the shape
   of services.css .scope, and putting the identical object on a second
   page is precisely the repetition this client keeps rejecting. .scope
   is five factors that set a scope: one column, term running in inline,
   opened by a 2px rule and left open at the foot. These six are six
   RECURRING QUESTIONS with a fixed answer, so they are set as a
   register instead - the question hanging in its own column at the
   inline start, ranged toward the answers so the pair reads on one
   spine, answers at roughly three times its measure, and the register
   CLOSED by a rule at the foot with nothing above the first row. Same
   family, inverted anatomy. Six decisions have no order, so there is
   no numbering anywhere in it.
   ---------------------------------------------------------------- */
.creed{margin:0;padding:0;list-style:none}
.creed li{margin:0;padding:clamp(16px,1.9vw,24px) 0;
  border-bottom:1px solid var(--rule);
  font-size:var(--t-base);line-height:1.72;color:var(--ink-2)}
.creed li b{font-weight:800;color:var(--ink)}
.creed li bdi{unicode-bidi:isolate}

/* >=961px: the question leaves the sentence and hangs in its own
   column. 961px is where the term column still holds the longest of
   the six questions on one line (163px against a measured 158px);
   below it the question runs back into its answer rather than being
   wrapped into a two-line stub. The column gap is the only thing
   between the two - there is no vertical rule to sit against, so no
   text is ever flush to one. */
@media(min-width:961px){
  /* Three tracks, and the third is deliberately empty. With two, the
     answers ran to ~102ch - a measure nothing else on this page uses
     and half of it left ragged, because the six answers are 39 to 91
     characters long. Capped at the 62ch the section's own paragraph
     uses, the answers sit on a measure the page already reads at, the
     rag closes, and the leftover becomes the measure contrast the site
     runs everywhere else: a 100ch rule answering a 62ch sentence. */
  .creed li{display:grid;
    grid-template-columns:clamp(150px,17vw,232px) minmax(0,62ch) minmax(0,1fr);
    column-gap:clamp(24px,3.2vw,56px);align-items:baseline;
    padding-block:clamp(20px,2.2vw,28px)}
  .creed li b{font-size:var(--t-sub);line-height:1.32;
    text-align:end;text-wrap:balance}
}

/* The register closes on its own last hairline, so the line that sends
   the reader to /who-its-for/ carries no rule of its own - two rules
   14px apart would read as a mistake. */
.ct-more{margin:clamp(24px,3vw,36px) 0 0;max-width:62ch;color:var(--ink-2);
  font-size:var(--t-base);line-height:1.7}
.ct-more a{color:var(--td);font-weight:700;border-bottom:1px solid var(--rule-2)}
.ct-more a:hover{border-bottom-color:var(--td)}

/* ---------------------------------------------------------------- 6
   What stands behind it. Prose with bold run-ins - no list, no rules,
   no boxes, because these four are not a set of equals.
   ---------------------------------------------------------------- */
.behind{max-width:64ch}
.behind p{margin:0 0 1.15em;line-height:1.7;color:var(--ink-2)}
.behind p:last-child{margin-bottom:0}
.behind p b{font-weight:800;color:var(--ink)}
.behind bdi{unicode-bidi:isolate}
.behind a{color:var(--td);font-weight:600;border-bottom:1px solid var(--rule-2)}
.behind a:hover{border-bottom-color:var(--td)}

/* ---------------------------------------------------------------- 7
   The closer. Three ruled sentences, then the four direct channels
   for people who will not fill in a form.
   ---------------------------------------------------------------- */
.closer h2{max-width:16ch}
.cl-line{margin:0;padding:13px 0;border-top:1px solid var(--rule-d);
  max-width:54ch;color:rgba(255,255,255,.88);line-height:1.6;
  font-size:var(--t-base)}
.cl-line:first-of-type{margin-top:clamp(18px,2.2vw,26px)}
.cl-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,34px)}
.btn-line{color:#fff;background:transparent;border:1px solid rgba(255,255,255,.55)}
.btn-line:hover{background:rgba(255,255,255,.1);border-color:#fff}

.ch-lead{margin:0 0 10px;color:rgba(255,255,255,.82);font-size:var(--t-base);line-height:1.6}
.channels{margin:0;padding:0;list-style:none}
.channels a{display:flex;align-items:baseline;gap:.55em;min-height:44px;
  padding:11px 0;color:#fff;font-weight:800;font-size:var(--t-base);
  border-bottom:1px solid rgba(255,255,255,.24);transition:border-color var(--dur-2)}
.channels li:last-child a{border-bottom:0}
.channels a:hover{border-bottom-color:#fff}
.ch-k{font-weight:600;color:rgba(255,255,255,.78);font-size:var(--t-cap)}
.ch-v{direction:ltr;unicode-bidi:isolate}
.channels bdi{unicode-bidi:isolate}

@media(max-width:840px){.closer h2{max-width:20ch}}


/* The deliverables ledger's lead is now a full answer, and the ledger's
   hand-off line uses the site-wide .op-hand rule. On the dark band the
   colour is set in parts.css; only the measure belongs here. */
.deliv-band .ab-ans{max-width:70ch}

/* ===================================================================
   PACING - the band scale applied to this page.

   About had six bands and no ruled openers, so every one of them fell
   through to the same automatic step and the page read as one long
   even column. The steps below are chosen by what each band does to
   the argument, per the rule in global.css:

     1  the opening statement          open   - it opens the argument
     2  the crew: three named partners
        with portraits and real bios   PEAK   - the page's whole claim
     3  what the firm delivers         turn   - continues 2
     4  the principles                 open   - a new subject
     5  who is behind it               close  - a footnote to 4
     6  the closing card               turn   - the door

   No two adjacent bands take the same step.
   =================================================================== */
.band:has(.split-rail){padding-block:var(--sp-open)}
.band:has(.crew){padding-block:var(--sp-peak)}
.band:has(.deliv){padding-block:var(--sp-turn)}
.band:has(.creed){padding-block:var(--sp-open)}
.band:has(.behind){padding-block:var(--sp-close)}
.band:has(.closer){padding-block:var(--sp-turn)}
/* Band 1 clears the portraits hanging out of the head plus their
   captions. This is paid on top of whatever step the band takes, so
   it has to outrank the rule above that sets padding-block. */
/* This is GEOMETRY, not a pacing step: the portraits hang out of the
   head by --fw/2 and their captions hang further, so band 1 pays that
   distance back before its own air starts. Measured at 390 with the
   open step substituted here, the first paragraph sat 45px UNDER the
   photographs. The constant stays. */
.hd-people+.band:has(.split-rail){padding-top:calc(var(--fw)/2 + clamp(142px,11vw,182px))}