/* ============================================================
   בונה טל מהנדסים
   Direction: "ערכת מסמכי הפרויקט" — the construction document set.
   Palette sampled from the company's own logo (LOGO_BT.pdf).
   ============================================================ */

:root{
  /* ground — the site is white throughout. Separation comes from
     hairlines and the dimension line, never from a filled band. */
  /* The site sits on concrete, not paper. Two tones alternate; --surface is
     the paper laid on top of them, which is what the cards, the plates, the
     drawing sheet and the form controls are. Every text value below was
     re-measured against the DARKER of the two grounds, #CACEC6. */
  --page:       #E1E2E3;   /* light concrete — the base band and the body */
  --surface:    #F5F6F7;   /* paper: 1.20:1 on --page, 1.47:1 on --concrete */
  /* concrete — the alternating band. Light enough that every text colour
     below still clears its AA ratio on it (they lose ~13% of the value
     they measure on white). --band-bg follows whichever band it sits in,
     so the dimension-line label and the step markers can mask the rule
     with the right ground instead of always white. */
  --concrete:   #CCCDCF;   /* deep concrete, the alternating band. 1.23:1 against --page */

  /* Concrete grain. A tiled feTurbulence speckle of the site ink, a neutral grey, capped at
     8.5% alpha (measured 7.5% in practice) — and the palette above is chosen so the DARKEST possible speck
     still clears its floor (4.89:1 for --t-soft on the deep band), not merely
     the average. SVG filters default to linearRGB, which turned an ink-coloured speck
     blue and pale — hence the explicit color-interpolation-filters=sRGB.
     It rides on --page and --concrete only; --surface is paper
     and stays smooth, which is what separates the two materials. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.22 0 0 0 0 0.22 0 0 0 0 0.23 0 0 0 0.085 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  /* a white band stays transparent so the drafting grid shows through it;
     --mask-bg is the opaque ground the dimension-line label and the step
     markers paint on to break the rule they sit over. */
  --band-bg:    transparent;
  --mask-bg:    #E1E2E3;   /* follows --page; .band--tint overrides it */
  --ink:        #0B1533;

  /* ink colours, straight from the logo */
  --navy:       #102694;
  --navy-lift:  #2440BE;
  --burg:       #7D1115;
  --burg-lift:  #A32127;

  /* text — every value below clears 4.5:1 on #FFFFFF (WCAG 2.0 AA / ת"י 5568) */
  --t-dark:     #0B1533;   /* 15.05:1 on --page, 13.36:1 on --concrete */
  --t-mid:      #333B49;   /*  6.08:1 even on the darkest grain speck */
  --t-soft:     #424955;   /*  4.89:1 on the darkest grain speck — the binding floor */

  /* hairlines. --field-line is the visible boundary of a form control
     and is held at 3:1 on white on purpose; the others are decorative. */
  --rule:       rgba(11,21,51,.20);
  --rule-soft:  rgba(11,21,51,.11);
  --field-line: rgba(11,21,51,.56);   /* 3.61:1 on --concrete, the worst case */

  --display: "Frank Ruhl Libre", "Times New Roman", serif;
  --body:    "Heebo", "Arial Hebrew", system-ui, sans-serif;
  --mono:    "Plex Num", "IBM Plex Mono", ui-monospace, monospace;

  --shell: 1320px;
  --gut: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}

/* IBM Plex Mono draws its zero with a dot inside the counter, and no
   OpenType feature in the Google Fonts build removes it (zero, ss01-ss05
   all return the same glyph). Digits are therefore served from IBM Plex
   Sans — same superfamily, same skeleton, plain zero — through a
   unicode-range that covers 0-9 and nothing else. Letters, punctuation
   and the mono voice of the labels are untouched. If the file ever fails
   to load the digits simply fall back to IBM Plex Mono. */
@font-face{
  font-family:"Plex Num";
  font-style:normal; font-weight:100 700; font-display:swap;
  src:url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2) format("woff2");
  unicode-range:U+0030-0039;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background-color:var(--page); background-image:var(--grain); color:var(--t-dark);
  font-family:var(--body); font-weight:400; font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:700; line-height:1.14; letter-spacing:-.01em; }
p{ margin:0; }
figure,figcaption,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--burg); color:#fff; }
:focus-visible{ outline:2px solid var(--burg-lift); outline-offset:3px; border-radius:2px; }
.skip{ position:absolute; inset-block-start:-60px; inset-inline-start:16px; z-index:99;
  background:var(--burg); color:#fff; padding:10px 18px; border-radius:2px; text-decoration:none; }
.skip:focus{ inset-block-start:14px; }

/* ---------- the drafting grid: one fixed environment behind everything ---------- */
.grid-field{
  position:fixed; inset:-10vmax; z-index:0; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(to right, rgba(11,21,51,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,21,51,.07) 1px, transparent 1px);
  background-size:72px 72px;
  animation:drift 90s linear infinite;
}
@keyframes drift{ to{ transform:translate3d(72px,72px,0); } }

/* ---------- shell ---------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }
section{ position:relative; z-index:1; }
/* the nav is fixed and now 104px tall — anchors have to clear it */
section[id], #top{ scroll-margin-top:120px; }
.band{ padding-block:clamp(74px,9vw,138px); }
/* .band--alt was the dark navy band. It is white, and earns its separation
   from a hairline at the top edge instead of a fill. */
.band--alt{ border-top:1px solid var(--rule-soft); }
/* every second band is laid on concrete, purely to separate the parts of the
   page. The white bands stay transparent so the drafting grid shows through
   them — grid paper against poured concrete. */
.band--tint{ background-color:var(--concrete); background-image:var(--grain); --mask-bg:var(--concrete); }

/* ---------- type scale ---------- */
.d1{ font-size:clamp(2.35rem, 5vw, 4.15rem); line-height:1.06; letter-spacing:-.025em; }
.d2{ font-size:clamp(1.95rem, 4vw, 3.3rem); line-height:1.09; letter-spacing:-.02em; }
.d3{ font-size:clamp(1.3rem, 2vw, 1.8rem); line-height:1.26; }
.d4{ font-size:clamp(1.1rem, 1.5vw, 1.32rem); line-height:1.34; }
.lede{ font-size:clamp(1.02rem, 1.3vw, 1.18rem); line-height:1.74; color:var(--t-mid); max-width:62ch; }
.small{ font-size:1rem; line-height:1.64; color:var(--t-mid); }
.tiny{ font-size:.92rem; line-height:1.6; color:var(--t-soft); }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* the sheet label: mono metadata, the document register */
.tag{
  font-family:var(--mono); font-size:.83rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--burg);
  display:flex; align-items:center; gap:.7em;
}
.tag::before{ content:""; width:26px; height:1px; background:currentColor; flex:none; }
.tag--he{ letter-spacing:.06em; font-family:var(--body); font-size:.95rem; text-transform:none; }

/* ============================================================
   SIGNATURE ELEMENT — קו מידה, the dimension line.
   A hairline with tick ends and a value riding the middle.
   ============================================================ */
.dim{ position:relative; display:block; height:1px; background:var(--rule); margin-block:2.2rem; }
.dim::before,.dim::after{
  content:""; position:absolute; inset-block-start:-5px; width:1px; height:11px; background:var(--rule);
}
.dim::before{ inset-inline-start:0; } .dim::after{ inset-inline-end:0; }
.dim > span{
  position:absolute; inset-block-start:50%; inset-inline-start:50%; transform:translate(50%,-50%);
  background:var(--mask-bg); padding-inline:14px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.18em; color:var(--t-soft);
  white-space:nowrap;
}
.dim > span.he{ font-family:var(--body); font-size:.94rem; letter-spacing:.02em; }
.dim{ transform-origin:right center; }
.anim .dim{ transform:scaleX(0); }
.anim .dim.in{ transform:scaleX(1); transition:transform 1.1s var(--ease); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.65em; cursor:pointer;
  padding:.92em 1.7em; border:1px solid transparent; border-radius:4px;
  font-family:var(--body); font-size:.96rem; font-weight:500; letter-spacing:.01em;
  text-decoration:none; transition:background .25s var(--ease), color .25s var(--ease),
    border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--fill{ background:var(--burg); color:#fff; }
.btn--fill:hover{ background:var(--burg-lift); }
.btn--line{ border-color:var(--field-line); color:var(--t-dark); }
.btn--line:hover{ border-color:var(--navy); color:var(--navy); }
.btn svg{ width:15px; height:15px; flex:none; transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(-3px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:60;
  background:rgba(225,226,227,0);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{ background:rgba(225,226,227,.94); backdrop-filter:blur(14px); border-bottom-color:var(--rule); }
.nav__in{ display:flex; align-items:center; gap:clamp(14px,2.4vw,36px); height:104px; }
.nav__logo{ flex:none; display:block; }
.nav__logo img{ height:80px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:clamp(11px,1.6vw,25px); margin-inline-start:auto; }
/* :not(.btn) throughout — otherwise this rule out-specifies .btn--fill and
   paints the CTA's label grey on its burgundy ground. */
.nav__links a:not(.btn){
  font-size:1.06rem; color:var(--t-mid); text-decoration:none;
  padding-block:6px; position:relative; transition:color .22s var(--ease); white-space:nowrap;
}
.nav__links a:not(.btn)::after{
  content:""; position:absolute; inset-block-end:0; inset-inline-end:0; height:1px; width:0;
  background:var(--burg); transition:width .28s var(--ease);
}
.nav__links a:not(.btn):hover{ color:var(--t-dark); }
.nav__links a:not(.btn):hover::after{ width:100%; }
.nav__cta{ padding:.62em 1.25em; font-size:1.04rem; flex:none; }
.nav__burger{ display:none; margin-inline-start:auto; background:none; border:0; cursor:pointer; padding:10px; }
.nav__burger span{ display:block; width:24px; height:1.5px; background:var(--t-dark); margin:5px 0;
  transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav.open .nav__burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav.open .nav__burger span:nth-child(2){ opacity:0; }
.nav.open .nav__burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   HERO — the rendering, presented as a marked-up drawing sheet
   ============================================================ */
.hero{ background-color:var(--page); background-image:var(--grain); color:var(--t-dark); overflow:hidden; position:relative;
  padding-block:clamp(148px,15vh,196px) clamp(58px,7vw,96px); }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(118% 82% at 76% 2%, rgba(16,38,148,.045), transparent 60%);
}
.hero__in{ position:relative; z-index:2; display:grid; gap:clamp(38px,4.6vw,70px);
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); align-items:center; }
.hero__kicker{ margin-bottom:1.5rem; }
.hero h1 .l2{ display:block; color:var(--burg); }
.hero__lede{ margin-top:1.85rem; max-width:46ch; }
.hero__acts{ display:flex; flex-wrap:wrap; gap:13px; margin-top:2.3rem; }
.hero__foot{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:2.4rem;
  padding-top:1.4rem; border-top:1px solid var(--rule-soft); }
.hero__foot li{ font-family:var(--mono); font-size:.82rem; letter-spacing:.13em; color:var(--t-soft); }
.hero__foot b{ color:var(--burg); font-weight:500; }

/* the sheet */
.sheet{ position:relative; border:1px solid var(--rule); background:var(--surface); padding:12px; }
.sheet__corner{ position:absolute; width:9px; height:9px; opacity:.9; }
.sheet__corner.tl{ inset-block-start:-1px; inset-inline-start:-1px; border-block-start:1px solid var(--burg); border-inline-start:1px solid var(--burg); }
.sheet__corner.tr{ inset-block-start:-1px; inset-inline-end:-1px; border-block-start:1px solid var(--burg); border-inline-end:1px solid var(--burg); }
.sheet__corner.bl{ inset-block-end:-1px; inset-inline-start:-1px; border-block-end:1px solid var(--burg); border-inline-start:1px solid var(--burg); }
.sheet__corner.br{ inset-block-end:-1px; inset-inline-end:-1px; border-block-end:1px solid var(--burg); border-inline-end:1px solid var(--burg); }
.sheet__frame{ position:relative; overflow:hidden; background:var(--surface); }
.sheet__frame img{ width:100%; height:auto; display:block; filter:saturate(.9) contrast(1.03) brightness(.97); }
.sheet__markup{ position:absolute; inset:0; width:100%; height:100%; direction:ltr; }
.sheet__block{
  display:flex; flex-wrap:wrap; gap:3px 26px; margin-top:12px; padding-top:11px;
  border-top:1px solid var(--rule-soft);
  font-family:var(--mono); font-size:.77rem; letter-spacing:.09em; color:var(--t-soft);
}
.sheet__block b{ color:var(--t-mid); font-weight:500; }
.sheet__block .he{ font-family:var(--body); font-size:.89rem; letter-spacing:0; }

/* markup strokes — red pen on a white sheet, which is what a marked-up
   drawing actually looks like. The plates carry their own light ground so
   the annotation stays readable wherever it lands on the rendering. */
.mk-line{ stroke:var(--burg); stroke-width:2.4; fill:none; }
.mk-txt{ font-family:var(--body); font-size:30px; font-weight:500; fill:#0B1533; }
.mk-txt--mono{ font-family:var(--mono); font-size:22px; fill:#7D1115; letter-spacing:.14em; }
.mk-plate{ fill:rgba(255,255,255,.93); stroke:rgba(125,17,21,.55); stroke-width:1.2; }

.anim .draw{ stroke-dasharray:var(--len,340); stroke-dashoffset:var(--len,340); }
.anim .draw.in{ stroke-dashoffset:0; transition:stroke-dashoffset 1.6s var(--ease-io); }
.anim .fade{ opacity:0; }
.anim .fade.in{ opacity:1; transition:opacity .9s var(--ease) .45s; }

/* ---------- generic reveal ---------- */
.anim .rise{ opacity:0; transform:translateY(22px); }
.anim .rise.in{ opacity:1; transform:none; transition:opacity .85s var(--ease), transform .85s var(--ease); }
.anim .rise[data-d="1"].in{ transition-delay:.07s; }
.anim .rise[data-d="2"].in{ transition-delay:.14s; }
.anim .rise[data-d="3"].in{ transition-delay:.21s; }
.anim .rise[data-d="4"].in{ transition-delay:.28s; }
.anim .rise[data-d="5"].in{ transition-delay:.35s; }
.anim .rise[data-d="6"].in{ transition-delay:.42s; }


/* ============================================================
   Floating WhatsApp CTA
   Ground is WhatsApp's own green so it is recognised at a glance;
   the glyph and label are the site ink (#0B1533 on #25D366 = 9.06:1)
   rather than the usual white, which measures 1.98:1 and would fail.
   Physical left/bottom on purpose: this is a viewport corner, not
   flow content, and the corner is a fixed design choice on an RTL page.
   Visible by default so it survives with JS off; site.js only tucks it
   away while the visitor is still on the hero.
   ============================================================ */
.wa{
  position:fixed; inset-block-end:24px; left:24px; z-index:70;
  display:inline-flex; align-items:center; gap:.55em;
  padding:.72em 1.05em; border-radius:4px;
  background:#25D366; color:var(--ink);
  font-family:var(--body); font-size:.92rem; font-weight:500; letter-spacing:.01em;
  text-decoration:none; border:1px solid rgba(11,21,51,.22);
  transition:transform .3s var(--ease), opacity .3s var(--ease),
             visibility .3s var(--ease), background .25s var(--ease);
}
.wa:hover{ background:#1FBE5B; transform:translateY(-2px); }
.wa svg{ width:21px; height:21px; flex:none; fill:currentColor; }
.wa--tuck{ opacity:0; visibility:hidden; transform:translateY(14px); }

@media (max-width:640px){
  .wa{ inset-block-end:16px; left:16px; padding:.7em .85em; }
  .wa__t{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
@media (prefers-reduced-motion:reduce){
  .wa, .wa:hover{ transition:none; transform:none; }
}