/* ===================================================================
   parts.css - site-wide components owned by the design pass.

   Loaded on every page, after global.css, so rules here win on equal
   specificity without any !important.

   Why a separate file: global.css is edited by the accessibility and
   SEO passes (each appends its own marked block at the end). Two
   agents appending to one file means the last writer silently drops
   the other's work. Design-owned components live here instead.

   What belongs here: components that appear on more than one page -
   the header breadcrumb path, shared depth devices. Page-specific
   components stay in their own stylesheet (home.css, services.css,
   challenges.css, process.css, who-its-for.css, tools.css,
   service-detail.css).
   =================================================================== */

/* ===================================================================
   1. HEADER  -  the bar drawn as a dimension line
       (header.php, inc/ui.php; overrides global.css .hdr* )

   THE PROBLEM THIS REPLACES
   The header was the one element on the site that ignored the grid
   everything else obeys: .hdr-inner had padding and no cap, so at 1600
   the logo sat 60px from the viewport edge while the hero below it
   started 180px in. On top of that .hdr-right carried
   `margin-inline-start:auto;margin-right:0` - in RTL both resolve to
   margin-right, the second won, the auto margin never applied - and
   .desk-nav had been changed from flex:1 to flex:0 1 auto, so nothing
   took up the slack: every item packed to the inline start and 526px of
   dead space pooled at the inline end. The client read that, correctly,
   as "crammed to the right".

   Third cause, not previously named: .brand-logo was declared twice
   with !important (global.css) and the winner forced width:300px with
   height:auto on a 666x375 file - a 300x169px box inside a 68px bar. It
   overflowed the fixed header by 51px above and 50px below, painting
   over the page, and only 539/666 of its width is ink. The brand was
   claiming 336px of a 1240 measure for a wordmark that renders 232px
   wide. That is fixed at source in global.css; here the box is sized to
   the ink and the file's transparent margin is clipped away.

   THE COMPOSITION
   Ground is full-bleed, contents are capped. .hdr keeps painting edge
   to edge - it is a fixed bar and its bottom hairline is the page's
   horizon, which must not stop short - while .hdr-inner is capped at
   --wrap and centred, with --gut as the bar's padding. That is the same
   construction every band uses (.band + .band-in, .phero + .phero-in),
   so the brand's inline-start edge and the CTA's inline-end edge land
   on exactly the same two verticals as the H1 below them, at every
   width.

   DISTRIBUTION: three grid columns, auto / 1fr / auto. The brand is
   anchored at the inline start, the CTA at the inline end, and the six
   nav items are one run centred in the middle track. The two outer gaps
   are therefore equal by construction at every width and flex together
   as the viewport narrows - a visible rule rather than a leftover. The
   alternatives were rejected on purpose: spreading all six items across
   the full bar makes the gaps depend on the viewport and stops the nav
   reading as one run, and pushing the slack into a single joint is the
   failure the client rejected, only mirrored.

   Grid also deletes the auto-margin bug by construction: no element in
   the bar needs an auto margin any more, so there is nothing for a
   physical longhand to cancel.

   THE CURRENT PAGE: header.php has always emitted aria-current="page",
   but the only rule that styled it was `.nl.active`, a class nothing on
   the site sets, so the header never told you which page you were on. It
   now holds the SAME 2px underline the nav already used on hover, plus
   the accent colour. No new device: the client rejected an added mark
   here, and rightly - the bar is chrome, not a place to draw.

   HEIGHTS ARE UNCHANGED: 68px (58 below 767) with one row, +38px for
   the trail row, so global.css scroll-padding-top and every --hp
   consumer below are untouched. Do not change a header height without
   re-verifying SC 2.4.11 at every width.
   =================================================================== */

:root{
  --hp:0px;
  /* the ink width of the wordmark, which is what the brand box is now
     sized to. 150px at the tight widths (1025-1110, where the nav needs
     the room), 184px from ~1365 up. */
  --logo-ink:clamp(150px,13.5vw,184px);
}

/* ---- the measure: full-bleed ground, capped contents --------------- */
.hdr{padding-inline:var(--gut)}
.hdr-inner{position:relative;
  max-inline-size:var(--wrap);margin-inline:auto;padding-inline:0;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:minmax(0,1fr);
  align-items:stretch;column-gap:clamp(14px,2.2vw,40px)}

.brand{grid-column:1;grid-row:1;justify-self:start;margin:0}
.desk-nav{grid-column:2;grid-row:1;justify-self:center;
  min-inline-size:0;flex:0 1 auto}
.hdr-right{grid-column:3;grid-row:1;justify-self:end;margin:0}
.burger{grid-column:3;grid-row:1;justify-self:end;align-self:center;margin:0}

/* ---- stations on the line ----------------------------------------- */
.brand{position:relative;overflow:hidden}
/* Full width, scaled from the inline start rather than grown from zero
   inline-size: the growth looks identical and does not lay out on every
   frame. transform-origin has no logical keyword, so the RTL value is
   written physically and the LTR case is given its own line below. */
.desk-nav .nl::after{content:"";position:absolute;
  inset-inline-start:0;inset-block-end:0;block-size:2px;inline-size:100%;
  background:var(--td);
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur-3) var(--ease-out)}
[dir="ltr"] .desk-nav .nl::after{transform-origin:left}
.desk-nav .ni:hover .nl::after,.desk-nav .nl:focus-visible::after,
.desk-nav .nl[aria-current="page"]::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .desk-nav .nl::after{transition:none}
}

.desk-nav .nl{position:relative;border-block-end:0;
  padding-inline:clamp(11px,1.15vw,17px)}
.desk-nav .nl[aria-current="page"]{color:var(--td)}
/* ---- the one elevated object in the bar ---------------------------- */
.hdr-cta{min-block-size:40px;padding-inline:20px;
  transition:background var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.hdr-cta:hover,.hdr-cta:focus-visible{transform:translateY(-1px);
  background:var(--darker);box-shadow:0 10px 24px rgba(11,79,74,.34)}

/* ---- focus, which the bar had only on the trail -------------------- */
.brand:focus-visible,.desk-nav .nl:focus-visible,.nl-dd:focus-visible,
.hdr-cta:focus-visible,.burger:focus-visible{
  outline:2px solid var(--td);outline-offset:-2px;border-radius:4px}

/* ===================================================================
   1b. HEADER PATH  -  nav.hdr-path

   The breadcrumb used to open every interior page head, in the slot a
   tracked micro-label used to occupy. That is a label's slot: a small
   grey line above every H1 is the template silhouette the client
   rejected three times. The trail is not deleted - it moves into the
   header chrome and takes the header's own second row.

   The trail takes that row at EVERY width and never shares a row with
   the nav. It was breakpointed at 1360px once; above it the trail was
   wedged into the gap between the CTA and the nav and rendered as
   141x32px of floating text mid-bar, which reads as a broken nav item.
   Nobody caught it because review happened at 1280, where the
   second-row rule already applied. One layout at all widths means one
   thing to test.

   It is now placed with grid-row:2 rather than flex order:9, and
   header.php emits it after the CTA and the burger, so DOM order and
   visual order agree and a keyboard user is not sent to row 2 and back
   up to row 1 (SC 2.4.3).

   Anything that compensates for this row must NOT be breakpointed
   either - global.css scroll-padding-top was, and silently failed
   SC 2.4.11 above 1360px until it was hoisted out too.
   =================================================================== */

body.has-path{--hp:38px}

/* The trail gets its own ground, full-bleed.

   It shared the bar's paper with only a hairline between them, so the header
   read as one block with a line through it rather than as a bar plus a trail.
   The gradient sits on .hdr because .hdr is the full-bleed element: a
   background on the trail row itself would stop at the 1240 cap and leave two
   paper margins beside it. Stops are hard, so this is two flat bands, not a
   fade.

   Both stops are now OPAQUE. The bar used to be 93% paper over whatever was
   scrolling beneath it, which left --muted nav links 4.13-4.26:1 instead of
   4.88:1 - and the blur that translucency existed for was invisible at 93%
   anyway. Setting the shared --hdr-ground token rather than `background`
   directly means a page-level override cannot half-apply and lose the
   cascade, which is exactly what contact.css did for months. */
body.has-path{
  --hdr-ground:linear-gradient(to bottom,
    var(--paper) 0, var(--paper) var(--hh),
    var(--white) var(--hh), var(--white) 100%)}
body.has-path .hdr{height:auto}
body.has-path .hdr-inner{height:auto;min-block-size:var(--hh);
  grid-template-rows:var(--hh) var(--hp)}

.hdr-path{grid-column:1/-1;grid-row:2;
  display:flex;align-items:center;gap:0 8px;
  min-inline-size:0;overflow-x:auto;scrollbar-width:none;
  margin:0;padding:0;border-block-start:1px solid var(--line);
  block-size:var(--hp);
  font-size:.86rem;line-height:1.4;color:var(--muted);white-space:nowrap;
  justify-content:flex-start;text-align:start}
.hdr-path::-webkit-scrollbar{display:none}
.hdr-path a{display:inline-flex;align-items:center;min-block-size:36px;
  color:var(--td);font-weight:600;padding-block:0;
  border-block-end:1px solid transparent;transition:border-color var(--dur-2)}
.hdr-path a:hover{border-block-end-color:var(--td)}
.hdr-path a:focus-visible{outline:2px solid var(--td);outline-offset:2px;border-radius:2px}
.hdr-path i{font-style:normal;font-size:.82em;color:var(--muted)}
.hdr-path span[aria-current]{display:inline-flex;align-items:center;
  min-block-size:36px;font-weight:700;color:var(--ink)}

@media(max-width:1024px){
  .hdr-right{display:none}
}

/* every offset that starts content below the fixed header follows --hp */
/* +1px for the header's own bottom border, so the H1 clears the path row by
   at least 28px at every width (the binding condition on this row). */
#site-main>*:first-child{padding-top:calc(var(--hh) + var(--hp) + 1px + clamp(29px,3vw,44px))!important}
.mega,.drawer{top:calc(var(--hh) + var(--hp))}
.av-page{padding-top:calc(var(--hh) + var(--hp))}
.sv-rail{top:calc(var(--hh) + var(--hp) + 26px)}
.split-rail,.fc-out{top:calc(var(--hh) + var(--hp) + 24px)}

/* ===================================================================
   2. 404  -  the code, cut by the corner, and the site as a directory

   404.php has no stylesheet of its own, so its rules live here. The
   page used to be a centred stack: a 12%-opacity "404" watermark, a
   heading, a line, two buttons and five inline links. The watermark is
   now an object - full --ink, half out of the frame - and the five
   links are the whole site as a two-column ruled directory, because
   wayfinding is the only thing this page is for.
   =================================================================== */

.err404{position:relative;overflow:hidden;text-align:start;max-width:none;
  display:block;margin:0;
  padding:0 var(--gut) clamp(52px,8vw,104px)}
.err404-code{position:absolute;pointer-events:none;user-select:none;
  inset-inline-end:-.45em;top:-.15em;
  font-size:clamp(9rem,26vw,20rem);font-weight:800;line-height:.8;
  color:var(--ink);opacity:1;letter-spacing:0;font-variant-numeric:tabular-nums}
.err404-in{position:relative;max-width:var(--wrap);margin:0 auto;
  padding-top:clamp(7.5rem,22vw,15rem)}
.err404 h1{margin:0;max-width:16ch;text-align:start;
  font-size:var(--t-h1);font-weight:800;line-height:1.05;
  letter-spacing:0;color:var(--ink)}
.err404 p{margin:16px 0 0;max-width:52ch;text-align:start;
  font-size:var(--t-base);line-height:1.7;color:var(--ink-2)}
.err404-acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;
  margin-top:clamp(22px,2.6vw,30px)}

.err-dir{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:0 clamp(30px,4.4vw,68px);margin-top:clamp(38px,5vw,72px)}
.err-dir-col h2{margin:0 0 2px;padding-bottom:14px;
  border-bottom:2px solid var(--td);
  font-size:var(--t-sub);font-weight:800;color:var(--td);letter-spacing:0;line-height:1.3}
.err-dir ul{margin:0;padding:0;list-style:none}
.err-dir li{border-bottom:1px solid var(--rule)}
.err-dir a{display:flex;align-items:center;gap:12px;min-height:48px;padding:12px 0;
  color:var(--ink);font-weight:600;font-size:1rem;line-height:1.4;
  transition:color var(--dur-2)}
.err-dir a:hover,.err-dir a:focus-visible{color:var(--td)}
.err-dir-m{flex:none;width:22px;height:22px;color:var(--td)}
.err-dir-m svg{width:100%;height:100%;display:block}
@media(max-width:560px){
  .err404-code{font-size:clamp(7rem,34vw,12rem);inset-inline-end:-.2em}
  .err404-in{padding-top:clamp(6.5rem,30vw,11rem)}
}

/* ===================================================================
   3. HEBREW TAKES NO TRACKING

   Negative letter-spacing on headings is a Latin habit. Hebrew has no
   case and no tracking tradition, so tightening it is the fastest way
   to make a Hebrew page look machine-set - and at 200% zoom it costs
   legibility as well. Every heading on the site goes back to 0; the
   tightness those rules were reaching for comes from weight 800 and a
   line-height near 1.05-1.2, which is already set.

   Kept here rather than in global.css because global.css is being
   appended to by the accessibility pass; parts.css loads after it, so
   these win on equal specificity without !important.
   =================================================================== */

.hero-h1,.phero h1,.contact-copy h1,.hd h1,
.op-h,.closer h2,.home-final-cta h2,
.stmt,.cr,.cr b,.cr em,
.rp h3,.svc h2,.tr h3,.dg h3,.sv-h,.dx h3,.pk-if,
.err404 h1,.capx-h,.sb h3,.cap h3,.dt-col h3,.duo-i h3,
.stp-b h3,.ct h2,.ct h3,.strip p,.weigh th,.weigh caption,
.route-cols b,.outs li,.fc-score b,.err-dir a{letter-spacing:0}

/* The nav's dropdown toggle had no rules at all, so it rendered as a default
   16x19 browser button - under the 24px target minimum, and a chrome-coloured
   box in a typographic header. */
.nl-dd{display:inline-grid;place-items:center;width:26px;min-height:26px;
  padding:0;border:0;background:none;color:inherit;cursor:pointer;
  border-radius:3px}
.nl-dd svg{width:12px;height:12px;display:block;transition:transform var(--dur-3)}
.ni:hover .nl-dd svg,.nl-dd[aria-expanded="true"] svg{transform:rotate(180deg)}
.nl-dd:focus-visible{outline:2px solid var(--td);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.nl-dd svg{transition:none}}

/* ===================================================================
   4. HEADER DROPDOWN - the keyboard path
   (SC 2.1.1 Keyboard · 1.4.13 Content on Hover or Focus · 2.4.7 · 4.1.2)

   Appended by the accessibility pass. Nothing above this line is touched.

   header.php already carried a real <button class="nl-dd"> with
   aria-expanded/aria-controls, and global.js already toggled .open on the
   group - but no stylesheet reacted to either. global.css reveals the
   panel from `.ni.has-dd:hover .dd` and `.dd:hover` alone, so the button
   announced "expanded" while .dd stayed visibility:hidden and Tab skipped
   every link inside it: a 2.1.1 failure wearing a 4.1.2 failure on top,
   because the state was reported and not rendered.

   These are the missing selectors. The keyboard state gets the identical
   declarations the hover state gets - same panel, same offset, same
   transition - so the visual design is unchanged and the two paths cannot
   drift apart.
   =================================================================== */

.ni.has-dd.open>.dd,
.ni.has-dd>.nl-dd[aria-expanded="true"]~.dd{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}

/* the trigger's sibling link takes the same lit state hover gives it, so an
   open panel is never floating under an unlit nav item */
.ni.has-dd.open>.nl{color:var(--td);border-bottom-color:var(--td)}

/* SC 1.4.13 "dismissible": Escape hides a panel that hover opened, without
   asking the pointer to move off it. The class is doubled to reach (0,5,0),
   which outranks `.ni.has-dd:hover .dd`
   at (0,3,0), the .open rule at (0,3,0) and `.dd:hover` at (0,2,0);
   global.js clears
   .dd-off on mouseleave so hover re-arms. Hoverable and persistent were
   already satisfied - .dd:hover holds the panel open and nothing times it
   out. */
.ni.has-dd.dd-off.dd-off:hover>.dd,
.ni.has-dd.dd-off.dd-off>.dd:hover,
.ni.has-dd.dd-off.dd-off>.nl-dd[aria-expanded="true"]~.dd{
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px)}

/* The panel's links only became reachable by keyboard with this change, so
   they need an indicator of their own; global.css has no universal
   :focus-visible rule to inherit. 2px --td (#0b4f4a) on --white is 9.3:1,
   well past the 3:1 that SC 1.4.11 asks of a focus indicator. */
.dd-i:focus-visible{outline:2px solid var(--td);outline-offset:-2px;
  background:var(--paper);color:var(--td)}

/* SC 2.5.8 Target Size (Minimum). The panel rows are 10px+14px around a
   .9rem line - about 39px - but only because nothing shrinks them; pin it
   so a future type change cannot walk them under 24px. */
.dd-i{min-height:40px}

@media(prefers-reduced-motion:reduce){
  .dd{transition:none}
}

/* ===================================================================
   THE ANSWER OPENER  (.op-a / .op-ans / .op-hand)

   A section opener used to be a big heading with a one-line caption
   beside it, so the caption read as a subtitle and the reader met the
   list with nothing explained. Every opener that now leads a list
   carries a full answer paragraph instead, and the opener's proportions
   change with it: equal halves rather than 7/5, top-aligned rather than
   baseline-aligned, so the answer is a column of text set against the
   heading and not a note hanging off it.

   .op-hand is the last sentence of that answer - the one that says what
   the list below is and how many items it holds. It is set on its own
   ruled line, in ink, so the hand-off from prose to list is a visible
   join rather than a full stop. One device, every band, every page.
   =================================================================== */

.op-a{align-items:start;
  grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.op-a .op-note{padding-top:.3em;padding-bottom:0;max-width:62ch}
.op-ans{font-size:var(--t-base)}

/* The hand-off's ink is a token, not an enumeration.

   It used to be four hard-coded selectors listing the dark grounds, and
   .phero-dark - the service-page hero - was never in the list, so the sentence
   rendered rgb(13,26,23) on rgb(13,26,23) at a contrast of 1.00:1 on six of
   eighteen pages. Invisible, present in the DOM, and missed by every audit
   that read the declared colour without compositing the ancestor ground.

   Declaring the ink once and flipping it once per dark ground means a ground
   added later inherits correct ink by construction. A forgotten entry becomes
   impossible rather than unlikely. */
:root{
  --hand-ink:var(--ink);
  --hand-rule:var(--rule);
  --hand-link-line:var(--rule-2);
  --hand-link-hover:var(--td);
}
/* The dark values are NOT here. They live in the single dark-ground list in
   global.css, with every other token that flips. A second list in this file
   was already missing five of the twelve grounds. */

.op-hand{display:block;margin-top:.95em;padding-top:.75em;
  border-top:1px solid var(--hand-rule);color:var(--hand-ink);font-weight:700}
.op-hand a{color:var(--hand-ink);border-bottom:2px solid var(--hand-link-line);
  padding-bottom:1px;transition:border-color var(--dur-2),color var(--dur-2)}
.op-hand a:hover,.op-hand a:focus-visible{
  color:var(--hand-link-hover);border-bottom-color:var(--hand-link-hover)}

@media(max-width:840px){
  .op-a{grid-template-columns:1fr}
  .op-a .op-note{padding-top:0}
}