@charset "utf-8";
/* =========================================================================
   ליאור זקר ושות׳ — LP · style.css
   Reset + design tokens + utilities + shared component classes.
   Section-specific CSS lives inline in each <section><style data-id="…">.
   ========================================================================= */

/* ---------- fonts ------------------------------------------------------- */
/* Figma uses "Atlas DL 3.1 AAA" (commercial, unlicensed here) → Heebo:
   Regular 400 · Medium 500 · Bold 700 · Black 900.
   Logo uses Almoni DL / Almoni Tzar → self-hosted Almoni Neue
   (Tzar = condensed cut we don't own → scaleX on .logo__he). */
@font-face{font-family:"Almoni Neue";src:url("../fonts/almoni-neue-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Almoni Neue";src:url("../fonts/almoni-neue-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Almoni Neue";src:url("../fonts/almoni-neue-black.woff") format("woff");font-weight:900;font-style:normal;font-display:swap}

/* ---------- tokens ------------------------------------------------------ */
:root{
  /* brand */
  --green:#0d2c21;
  --green-deep:#0a251c;
  --gold:#e1caa5;
  --gold-2:#e0c9a4;
  --gold-dark:#ab8444;
  --gold-3:#e5c38b;      /* logo rules + CTA outline gradient end */
  --gold-line:#b58d41;   /* hairline separators (Figma Line 221/222) */
  --cream:#f1ece0;
  --cream-2:#f8f4ed;
  --grey:#f2f2f2;
  --ink:#1d1d1b;
  --muted:#5e6163;
  --white:#fff;
  --black:#000;
  --field:rgba(7,28,55,.1);

  /* type */
  --font:"Heebo","Assistant",system-ui,-apple-system,sans-serif;
  --font-logo:"Almoni Neue","Heebo",sans-serif;
  --font-latin:"Oswald",sans-serif;

  /* layout */
  --container:1340px;
  --gutter:20px;
  --header-h:101px;

  /* shadows */
  --sh-text:0 3.113px 42.129px rgba(0,0,0,.52);
  --sh-card:0 0 20px rgba(0,0,0,.12);
  --sh-press:0 0 26.727px rgba(7,28,55,.1);
}

/* ---------- reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* every in-page anchor stops below the fixed header, not behind it */
section[id],footer[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-weight:400;direction:rtl;overflow-x:hidden}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,menu{margin:0;padding:0}
ul,ol,menu{list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
section{position:relative}

/* ---------- utilities --------------------------------------------------- */
.ts-01{transition:all .1s}
.ts-02{transition:all .2s}
.ts-03{transition:all .3s}
.flex-align-center{display:flex;align-items:center}
.absolute-center{position:absolute;inset-inline-start:50%;top:50%;transform:translate(50%,-50%)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.container{width:100%;max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.container--narrow{max-width:767px}

/* Alex image pattern — never object-fit/aspect-ratio on the <img> itself */
.image{position:relative;overflow:hidden}
.object-fit-cover{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover}

/* ---------- shared typography (DRY — used across sections) --------------- */
.h2{font-size:50px;line-height:60px;font-weight:400;color:var(--green);letter-spacing:-.01em}
.h2 b{font-weight:700}
.h2 strong{font-weight:900}
.h2--light{color:var(--white)}

.lead{font-size:20px;line-height:30px;color:var(--ink)}

.eyebrow{font-size:20px;line-height:20px;font-weight:700;color:var(--gold-dark)}
.eyebrow-rule{display:block;height:1px;background:var(--gold-dark);opacity:.6;margin-top:7px}

/* dark-green button ("שלח") + outlined header CTA share the type scale */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:var(--white);font-size:20px;font-weight:700;line-height:1;min-height:54px;padding-inline:24px}
.btn:hover{background:#124030}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;border:3.615px solid transparent;
  border-image:linear-gradient(168.4deg,#fff 1.4%,var(--gold-3) 71%) 1;
  color:var(--white);font-size:20px;font-weight:700;line-height:1;min-height:54px;padding-inline:22px}
.btn-outline:hover{background:var(--white);color:var(--green)}

/* carousel arrows — only shown at the widths where a row actually scrolls */
.car{position:relative}
.car-nav{position:absolute;top:50%;margin-top:-26px;width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.94);box-shadow:0 2px 12px rgba(0,0,0,.18);z-index:5;
  display:none;align-items:center;justify-content:center}
.car-nav img{width:30px;height:30px}
.car-nav--prev{inset-inline-start:14px}
.car-nav--next{inset-inline-end:14px;transform:scaleX(-1)}
.car--on .car-nav{display:flex}

/* gold-framed white panel used by "how we help" + "press":
   a 2px gold outline with a gap at the top where the title sits. */
.framed{position:relative;background:var(--white)}
.framed::before{content:"";position:absolute;inset:0;border:2px solid var(--gold);pointer-events:none}

/* ---------- responsive type -------------------------------------------- */
@media (max-width:1200px){
  :root{--container:1040px;--header-h:92px}
  .h2{font-size:40px;line-height:50px}
  .lead{font-size:19px;line-height:29px}
}
/* tablet */
@media (max-width:1024px){
  :root{--gutter:24px}
  .h2{font-size:36px;line-height:46px}
}
/* phone scale — measured off the mobile board 5642:10183 */
@media (max-width:767px){
  :root{--gutter:16px;--header-h:76px}
  .h2{font-size:32px;line-height:38px}
  .lead{font-size:18px;line-height:28px}
  .eyebrow{font-size:18px;line-height:20px}
  .btn,.btn-outline{font-size:20px;min-height:48px}
}