/* ============================================================
   SECTION LAYER — every band gets its own skeleton
   ============================================================ */

/* ---------- shared: section head ---------- */
.head{ max-width:74ch; }
.head .tag{ margin-bottom:1.3rem; }
.head .lede{ margin-top:1.5rem; }

/* ---------- shared: schedule table (a drawing-set schedule) ---------- */
.tbl{ width:100%; border-collapse:collapse; text-align:start; }
.tbl caption{ text-align:start; padding-bottom:1rem; font-size:.92rem; color:var(--t-soft); }
.tbl th{
  font-family:var(--mono); font-size:.76rem; font-weight:500; letter-spacing:.17em;
  text-transform:uppercase; color:var(--t-soft); text-align:start;
  padding:0 14px .85rem 14px; border-bottom:1px solid var(--rule); white-space:nowrap;
}
.tbl th:first-child, .tbl td:first-child{ padding-inline-start:0; }
.tbl th:last-child, .tbl td:last-child{ padding-inline-end:0; }
.tbl td{ padding:1rem 14px; border-bottom:1px solid var(--rule-soft); vertical-align:top; font-size:.98rem; }
.tbl tbody tr{ transition:background .2s var(--ease); }
/* zebra banding, like a printed schedule. --surface is the same whisper
   tint used by the cards, so the table stays part of the document set.
   Hover/.lit is stronger than it was so it still wins over a banded row. */
.tbl tbody tr:nth-child(even){ background:var(--surface); }
.tbl tbody tr:hover, .tbl tbody tr.lit{ background:rgba(16,38,148,.085); }
.tbl .nm{ font-weight:500; color:var(--t-dark); }
.tbl .mut{ color:var(--t-soft); }
.tbl .idx{ font-family:var(--mono); font-size:.86rem; color:var(--burg); width:1%; white-space:nowrap; }

/* stage pill */
.stage{ display:inline-block; padding:.24em .7em; border:1px solid var(--rule); border-radius:2px;
  font-size:.86rem; color:var(--t-mid); white-space:nowrap; }
.stage[data-s="pre"]{ border-color:rgba(125,17,21,.32); color:var(--burg); }
.stage[data-s="mid"]{ border-color:rgba(16,38,148,.34); color:var(--navy); }
.stage[data-s="on"]{ border-color:rgba(16,38,148,.34); color:var(--navy); background:rgba(16,38,148,.06); }

/* ============================================================
   1. FIGURES — the numbers band
   ============================================================ */
/* no background: a band is transparent unless .band--tint paints it. Declaring
   one here would out-rank .band--tint — same specificity, later file. */
.figs{ border-bottom:1px solid var(--rule-soft); }
.figs__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.figs__i{ padding:clamp(22px,2.6vw,38px) clamp(16px,2vw,32px);
  border-inline-start:1px solid var(--rule-soft); }
.figs__i:first-child{ border-inline-start:0; padding-inline-start:0; }
.figs__i:last-child{ padding-inline-end:0; }
.figs__n{ font-family:var(--mono); font-size:clamp(2.1rem,3.9vw,3.3rem); font-weight:400;
  line-height:1; letter-spacing:-.03em; color:var(--navy); font-variant-numeric:tabular-nums; }
.figs__n .u{ font-size:.5em; color:var(--t-soft); margin-inline-end:.1em; }
.figs__l{ margin-top:.85rem; font-size:.99rem; font-weight:500; line-height:1.42; }
.figs__s{ margin-top:.3rem; font-size:.9rem; color:var(--t-soft); line-height:1.5; }
.figs__note{ margin-top:2.2rem; padding-top:1.3rem; border-top:1px solid var(--rule-soft);
  font-size:.94rem; color:var(--t-soft); max-width:88ch; }
.figs__note b{ color:var(--t-mid); font-weight:500; }

/* ============================================================
   2. LAWYERS — dark, statement beside a numbered schedule
   ============================================================ */
.law__in{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(38px,5vw,80px); align-items:start; }
.law__aside{ position:sticky; top:138px; }
.law__pts{ counter-reset:pt; }
.law__pt{ display:grid; grid-template-columns:auto 1fr; gap:0 20px;
  padding:1.55rem 0; border-top:1px solid var(--rule-soft); }
.law__pt:first-child{ border-top:0; padding-top:0; }
.law__pt::before{
  counter-increment:pt; content:"0" counter(pt);
  font-family:var(--mono); font-size:.86rem; letter-spacing:.1em; color:var(--burg);
  padding-top:.35em;
}
.law__pt h3{ font-family:var(--body); font-size:1.09rem; font-weight:500; line-height:1.4; color:var(--t-dark); }
.law__pt p{ margin-top:.45rem; font-size:1rem; line-height:1.65; color:var(--t-mid); }

/* ============================================================
   3. TEAM — two large plates
   ============================================================ */
.team__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(22px,2.6vw,40px); margin-top:clamp(38px,4.5vw,64px); }
.plate{ position:relative; border:1px solid var(--rule); background:var(--surface);
  padding:clamp(26px,3vw,44px); display:flex; flex-direction:column; }
.plate__seal{ position:absolute; inset-block-start:clamp(22px,3vw,38px); inset-inline-end:clamp(22px,3vw,38px);
  width:74px; height:74px; opacity:.9; }
.plate h3{ font-size:clamp(1.5rem,2.3vw,2rem); }
.plate__role{ margin-top:.5rem; font-family:var(--mono); font-size:.82rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--burg); }
.plate__bio{ margin-top:1.5rem; font-size:1.01rem; line-height:1.72; color:var(--t-mid); }
.plate__flag{ margin-top:1.5rem; padding-top:1.1rem; border-top:1px solid var(--rule-soft);
  font-size:1rem; line-height:1.6; color:var(--t-dark); }
.plate__flag b{ color:var(--burg); font-weight:500; }
.team__foot{ margin-top:clamp(26px,3vw,42px); display:flex; flex-wrap:wrap; gap:12px 30px; align-items:center; }
.chip{ display:inline-flex; align-items:center; gap:.6em; padding:.55em 1.05em;
  border:1px solid var(--rule); border-radius:2px; font-size:.94rem; color:var(--t-mid); }
.chip svg{ width:14px; height:14px; color:var(--burg); flex:none; }

/* ============================================================
   4. GOV — Dira LeHaskir, table led, seal at the head
   ============================================================ */
.gov{ border-top:1px solid var(--rule-soft); }
.gov__top{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,4vw,60px); align-items:start; }
.gov__seal{ width:clamp(96px,10vw,132px); height:auto; flex:none; }
.gov__body{ margin-top:clamp(38px,4.5vw,60px); display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(30px,4vw,58px); align-items:start; }
.note{ border-inline-start:2px solid var(--burg); padding:1.15rem 0 1.15rem 0;
  padding-inline-start:1.35rem; background:rgba(125,17,21,.045); }
.note h3{ font-family:var(--body); font-size:.99rem; font-weight:500; color:var(--burg); }
.note p{ margin-top:.5rem; font-size:.96rem; line-height:1.66; color:var(--t-mid); }

/* ============================================================
   5. PLEDGE — the conflict-of-interest answer. Quiet, central, big.
   ============================================================ */
.pledge{ color:var(--t-dark); text-align:center;
  border-top:1px solid var(--rule-soft); }
.pledge__in{ max-width:62ch; margin-inline:auto; }
.pledge .tag{ justify-content:center; }
.pledge__lead{ margin-top:1.6rem; font-size:clamp(1.02rem,1.32vw,1.16rem); line-height:1.76; color:var(--t-mid); }
.pledge__vow{ margin-top:clamp(34px,4vw,54px); padding:clamp(28px,3.4vw,46px) clamp(22px,3vw,44px);
  border:1px solid rgba(125,17,21,.38); position:relative; }
.pledge__vow q{ quotes:none; display:block; font-family:var(--display); font-weight:500;
  font-size:clamp(1.3rem,2.4vw,2rem); line-height:1.4; color:var(--t-dark); }
.pledge__vow .sig{ margin-top:1.3rem; font-family:var(--mono); font-size:.79rem;
  letter-spacing:.18em; color:var(--burg); }

/* ============================================================
   6. LIVE PROJECTS — map beside the schedule
   ============================================================ */
.live__top{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:24px; }
.live__body{ margin-top:clamp(38px,4.6vw,64px); display:grid;
  grid-template-columns:minmax(0,408px) minmax(0,1fr); gap:clamp(30px,3.6vw,58px); align-items:start; }
.map{ position:sticky; top:132px; }
.map svg{ width:100%; height:auto; display:block; overflow:visible; direction:ltr; }
.map__legend{ margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--rule-soft);
  display:flex; flex-direction:column; gap:.6rem; }
.map__legend li{ display:flex; align-items:center; gap:.7em; font-size:.92rem; color:var(--t-mid); }
/* the frame note: what the sheet covers, and how precise it claims to be */
.map__frame{ display:flex; align-items:center; gap:.7em; font-family:var(--mono); font-size:.8rem;
  line-height:1.55; letter-spacing:.03em; color:var(--t-soft); }
.map__legend .k{ width:13px; height:13px; flex:none; }

.mp-land{ fill:rgba(16,38,148,.05); stroke:rgba(11,21,51,.48); stroke-width:1.3; stroke-linejoin:round; }
.mp-grid{ stroke:rgba(11,21,51,.11); stroke-width:.7; }
.mp-lead{ stroke:rgba(11,21,51,.42); stroke-width:.9; fill:none; }
.mp-cap{ font-family:var(--body); font-size:14px; font-weight:500; fill:var(--t-dark); }
.mp-sub{ font-family:var(--body); font-size:11.5px; fill:var(--t-soft); }
.mp-mono{ font-family:var(--mono); font-size:11px; fill:var(--t-soft); letter-spacing:.1em; }
.mp-t{ fill:var(--burg); stroke:#fff; stroke-width:1.1; transition:r .25s var(--ease), fill .25s var(--ease); }
.mp-g{ fill:none; stroke:var(--navy); stroke-width:1.1; transition:stroke-width .25s var(--ease); }
.mp-node.lit .mp-t{ fill:var(--burg-lift); r:6.5; }
.mp-node.lit .mp-g{ stroke-width:2.4; }
.mp-ring{ fill:rgba(125,17,21,.09); stroke:var(--burg); stroke-width:1.3; }
.mp-ringn{ font-family:var(--mono); font-size:13px; font-weight:500; fill:var(--burg); text-anchor:middle; }
.mp-pulse{ transform-box:fill-box; transform-origin:center; }
/* the detail window: a magnified reading of west Haifa, the way a drawing sheet
   carries a detail callout. Its ground is opaque so it reads as a separate
   sheet laid over the sea, and --mask-bg keeps it right on a tinted band. */
.mp-inset{ fill:var(--surface); stroke:rgba(11,21,51,.42); stroke-width:1; }
.mp-detail{ fill:none; stroke:var(--burg); stroke-width:1.2; }
.mp-inset[fill="none"]{ fill:none; }


/* ---------- the national sheet in "דירה להשכיר" ---------- */
.gov__side{ display:flex; flex-direction:column; gap:clamp(24px,3vw,38px); }
.gov-map svg{ width:100%; max-width:240px; height:auto; display:block; direction:ltr; overflow:visible; }
.gov-map .map__frame{ margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--rule-soft);
  align-items:flex-start; max-width:240px; }
.gov-map .k{ width:13px; height:13px; flex:none; margin-top:.15em; }
@media (max-width:1080px){
  .gov__side{ flex-direction:row; align-items:flex-start; gap:clamp(26px,4vw,48px); }
  .gov-map{ flex:none; }
}
@media (max-width:640px){
  .gov__side{ flex-direction:column; }
}

/* architect network strip */
.arch-net{ margin-top:clamp(30px,3.5vw,50px); padding-top:1.5rem; border-top:1px solid var(--rule-soft); }
.arch-net__l{ font-family:var(--mono); font-size:.76rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--t-soft); margin-bottom:1rem; }
.arch-net ul{ display:flex; flex-wrap:wrap; gap:10px 12px; }
.arch-net li{ padding:.5em 1em; border:1px solid var(--rule); border-radius:2px;
  font-size:.95rem; color:var(--t-mid); }

/* ============================================================
   7. STEPS — for the tenant committee, plain language
   ============================================================ */
.steps{ border-top:1px solid var(--rule-soft); }
.steps__rail{ margin-top:clamp(40px,5vw,68px); display:grid;
  grid-template-columns:repeat(6,1fr); gap:0; position:relative; }
.steps__rail::before{ content:""; position:absolute; inset-block-start:13px; inset-inline:0;
  height:1px; background:var(--rule); }
.step{ padding-inline-end:22px; position:relative; }
.step:last-child{ padding-inline-end:0; }
.step__k{ position:relative; width:27px; height:27px; border-radius:50%;
  background:var(--mask-bg); border:1px solid var(--burg); display:grid; place-items:center;
  font-family:var(--mono); font-size:.8rem; color:var(--burg); z-index:1; }
.step h3{ margin-top:1.2rem; font-family:var(--body); font-size:1.05rem; font-weight:500; line-height:1.4; }
.step p{ margin-top:.5rem; font-size:.94rem; line-height:1.62; color:var(--t-mid); }
.step--now .step__k{ background:var(--burg); color:#fff; border-color:var(--burg); }
.steps__note{ margin-top:clamp(34px,4vw,54px); }

/* ============================================================
   8. ARCHIVE — dark, dense schedule
   ============================================================ */
.arch__in{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(36px,5vw,80px); align-items:start; }
.arch__cols{ columns:2; column-gap:clamp(24px,3vw,44px); }
.arch__cols li{ break-inside:avoid; padding:.72rem 0; border-bottom:1px solid var(--rule-soft);
  font-size:1rem; color:var(--t-mid); display:flex; gap:.8em; align-items:baseline; }
.arch__cols li::before{ content:""; width:4px; height:4px; flex:none; background:var(--burg); transform:translateY(-3px); }
.arch__big{ font-family:var(--mono); font-size:clamp(3rem,7vw,5.6rem); line-height:1; color:var(--navy);
  letter-spacing:-.04em; }
.arch__big .pre{ font-size:.4em; color:var(--t-soft); margin-inline-end:.06em; vertical-align:.28em; }

/* ============================================================
   9. SERVICES
   ============================================================ */
.svc__grid{ margin-top:clamp(36px,4.4vw,58px); display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.2vw,32px); }
.svc__i{ padding-top:1.3rem; border-top:1px solid var(--rule); }
.svc__i h3{ font-family:var(--body); font-size:1.06rem; font-weight:500; line-height:1.4; }
.svc__i p{ margin-top:.55rem; font-size:.95rem; line-height:1.62; color:var(--t-mid); }

/* ============================================================
   10. DOCS CTA — request the sample documents
   ============================================================ */
/* The CTA used to be a solid burgundy band. On a white site it holds its
   own with a burgundy rule top and bottom instead of a fill. */
.docs{ color:var(--t-dark);
  border-block:1px solid rgba(125,17,21,.4); }
.docs__in{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(26px,4vw,56px);
  align-items:center; }
.docs h2{ color:var(--t-dark); }
.docs p{ margin-top:1rem; font-size:1.06rem; line-height:1.7; color:var(--t-mid); max-width:56ch; }
.docs .tag{ color:var(--burg); margin-bottom:1.2rem; }

/* ============================================================
   11. CONTACT
   ============================================================ */
.contact__in{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(38px,5vw,80px); align-items:start; }
.form{ margin-top:clamp(28px,3.4vw,44px); }
.form__row{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.field{ display:block; margin-bottom:18px; }
.field > span{ display:block; font-family:var(--mono); font-size:.76rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--t-soft); margin-bottom:.55rem; }
.field input, .field select, .field textarea{
  /* --field-line, not --rule: this is the visible boundary of a form control
     and has to clear 3:1 against the white ground. */
  width:100%; background:var(--surface); border:0; border-bottom:1px solid var(--field-line);
  padding:.72rem .85rem; font-size:.98rem; border-radius:4px 4px 0 0;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
/* no opacity here on purpose — it was dropping the placeholder to 2.60:1 */
.field input::placeholder, .field textarea::placeholder{ color:var(--t-soft); opacity:1; }
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--t-soft) 50%),linear-gradient(135deg,var(--t-soft) 50%,transparent 50%);
  background-position:14px calc(50% + 1px), 19px calc(50% + 1px); background-size:5px 5px,5px 5px;
  background-repeat:no-repeat; padding-inline-start:34px; }
.field textarea{ resize:vertical; min-height:104px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:0; border-bottom-color:var(--burg); background:#fff; }
.form__act{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:1.6rem; }
.form__msg{ font-size:.95rem; color:var(--burg); }
.form__msg.ok{ color:var(--navy); }

.ways{ border:1px solid var(--rule); padding:clamp(24px,2.8vw,38px); background:var(--surface); }
.ways__i{ padding-block:1.15rem; border-top:1px solid var(--rule-soft); }
.ways__i:first-of-type{ border-top:0; padding-top:0; }
.ways__l{ font-family:var(--mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--t-soft); }
.ways__v{ margin-top:.4rem; font-size:1.08rem; font-weight:500; }
.ways__v a{ text-decoration:none; border-bottom:1px solid var(--rule); transition:border-color .2s var(--ease); }
.ways__v a:hover{ border-bottom-color:var(--burg); color:var(--burg); }
.ways__v .todo{ color:var(--burg); font-family:var(--mono); font-size:.94rem; font-weight:400; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ color:var(--t-mid); border-top:1px solid var(--rule);
  padding-block:clamp(46px,5vw,72px) clamp(28px,3vw,40px); position:relative; z-index:1; }
.foot__top{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(26px,4vw,60px); align-items:start; }
.foot__logo img{ height:78px; width:auto; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:10px 26px; }
.foot__nav a{ font-size:.96rem; color:var(--t-mid); text-decoration:none; transition:color .2s var(--ease); }
.foot__nav a:hover{ color:var(--burg); }
.foot__contact{ margin-top:1.1rem; display:flex; flex-direction:column; gap:.35rem; }
.foot__contact li{ font-size:.95rem; color:var(--t-mid); }
.foot__contact a{ text-decoration:none; border-bottom:1px solid var(--rule);
  transition:color .2s var(--ease), border-color .2s var(--ease); }
.foot__contact a:hover{ color:var(--burg); border-bottom-color:var(--burg); }
.foot__bot{ margin-top:clamp(30px,3.4vw,46px); padding-top:1.3rem; border-top:1px solid var(--rule-soft);
  display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between;
  font-family:var(--mono); font-size:.77rem; letter-spacing:.11em; color:var(--t-soft); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero__in{ grid-template-columns:1fr; }
  .hero{ padding-block:120px 64px; }
  .law__in, .arch__in, .contact__in, .gov__body, .live__body{ grid-template-columns:1fr; }
  .law__aside, .map{ position:static; }
  .map{ max-width:400px; margin-inline:auto; }
  .figs__grid{ grid-template-columns:repeat(2,1fr); }
  .figs__i{ border-inline-start:0; border-top:1px solid var(--rule-soft); padding-inline:0; }
  .figs__i:nth-child(-n+2){ border-top:0; }
  .figs__i:nth-child(2n){ padding-inline-start:clamp(16px,3vw,32px); border-inline-start:1px solid var(--rule-soft); }
  .svc__grid{ grid-template-columns:repeat(2,1fr); }
  .steps__rail{ grid-template-columns:repeat(3,1fr); row-gap:34px; }
  .steps__rail::before{ display:none; }
  .docs__in{ grid-template-columns:1fr; }
  .foot__top{ grid-template-columns:1fr; }
}
/* The nav bar is taller and its labels are bigger, so it needs the burger
   sooner than the rest of the layout needs its mobile shape. */
@media (max-width:980px){
  .nav__in{ height:88px; }
  .nav__logo img{ height:64px; }
  .nav__links{ display:none; position:absolute; inset-block-start:88px; inset-inline:0;
    background:rgba(225,226,227,.985); backdrop-filter:blur(14px); flex-direction:column; align-items:stretch;
    padding:8px var(--gut) 24px; gap:0; border-bottom:1px solid var(--rule); }
  .nav.open .nav__links{ display:flex; }
  .nav__links a{ padding-block:14px; border-bottom:1px solid var(--rule-soft); }
  /* :not(.btn) so it out-specifies the base rule — plain `.nav__links a` loses to it */
  .nav__links a:not(.btn){ font-size:1.08rem; }
  .nav__links .nav__cta{ margin-top:16px; justify-content:center; border-bottom:0; }
  .nav__burger{ display:block; }
  .nav__cta--top{ display:none; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .team__grid{ grid-template-columns:1fr; }
  .steps__rail{ grid-template-columns:1fr; row-gap:26px; }
  .step{ padding-inline-end:0; display:grid; grid-template-columns:auto 1fr; gap:0 16px; }
  .step h3{ margin-top:.15rem; }
  .step p{ grid-column:2; }
  .arch__cols{ columns:1; }
  .form__row{ grid-template-columns:1fr; gap:0; }
  .gov__top{ grid-template-columns:1fr; }
  .plate__seal{ width:58px; height:58px; }

  /* schedule tables become cards */
  .tbl, .tbl tbody, .tbl tr, .tbl td{ display:block; width:100%; }
  .tbl thead{ display:none; }
  .tbl tr{ padding:1.15rem 0; border-bottom:1px solid var(--rule-soft); }
  .tbl td{ border:0; padding:.22rem 0; }
  .tbl td[data-h]::before{ content:attr(data-h) " · "; font-family:var(--mono); font-size:.79rem;
    letter-spacing:.1em; color:var(--t-soft); }
  .tbl .idx{ width:auto; }
}
@media (max-width:480px){
  .figs__grid{ grid-template-columns:1fr; }
  .figs__i:nth-child(2n){ padding-inline-start:0; border-inline-start:0; }
  .figs__i:nth-child(-n+2){ border-top:1px solid var(--rule-soft); }
  .figs__i:first-child{ border-top:0; }
  .svc__grid{ grid-template-columns:1fr; }
  .hero__acts .btn{ width:100%; justify-content:center; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .grid-field{ animation:none; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  .anim .rise, .anim .fade, .anim .dim{ opacity:1 !important; transform:none !important; }
  .anim .draw{ stroke-dashoffset:0 !important; }
}

/* ---------- print ---------- */
@media print{
  .nav, .grid-field, .docs, .map{ display:none; }
  body{ background:#fff; background-image:none; color:#000; font-size:11pt; }
  .hero, .band--tint{ background-image:none; }
  .band{ padding-block:18pt; }
}