@charset "utf-8";
/* =========================================================================
   header.css — fixed top bar, transparent over the hero, solid on scroll.
   Figma: 5627:9194 (header x310 y11 w1300 h94)
   ========================================================================= */

.site-header{position:fixed;inset-block-start:0;inset-inline:0;z-index:50;padding-block:0;transition:background .25s,box-shadow .25s}
/* scrolled state — Figma 5647:18817: white bar 101px, gold logo, dark nav,
   gold-outlined CTA. Everything but the logo keeps its unscrolled position. */
.site-header.is-scrolled{background:var(--white);box-shadow:0 0 20px rgba(0,0,0,.12)}
/* the drawer lives inside the header, so the header has to out-rank the
   sticky mobile bar while it is open */
.nav-toggle:checked~.site-header{z-index:90;background:none;box-shadow:none;padding-block:0}

/* bar is 101px in both states (Figma 5627:9192 / 5647:18844); the logo sits
   11px from the top and overhangs it, nav + CTA are centred on y=52. */
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:101px}

/* ---------- logo (right) ------------------------------------------------ */
.logo{display:block;width:167px;flex:0 0 auto;color:var(--white);align-self:flex-start;margin-top:11px;
  transition:transform .25s,color .25s}
.logo__stack{display:block}
.logo__mark{display:block;width:45.82px;height:47.6px;margin:0 auto}
.logo__mark svg,.logo__mark img{width:100%;height:100%}
.logo__words{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:9px}
.logo__he{font-family:var(--font-logo);font-weight:400;font-size:15.83px;line-height:1;white-space:nowrap;transform:scaleX(.92);transform-origin:100% 50%}
.logo__rule-v{width:1px;height:10.35px;background:var(--gold-3);flex:0 0 auto}
.logo__en{font-family:var(--font-latin);font-size:12.278px;font-weight:400;line-height:1;white-space:nowrap;letter-spacing:.01em}
.logo__rule-h{display:block;height:1px;background:var(--gold-3);margin-top:3px}
.logo__tagline{display:block;font-family:var(--font-logo);font-size:11.448px;line-height:1;letter-spacing:.687px;text-align:center;margin-top:5px}

/* ---------- nav (centre) ------------------------------------------------ */
.site-nav{display:flex;align-items:center;gap:40px;margin-top:3px}
.site-nav__head,.site-nav__cta-wrap{display:none}
.site-nav .item>a{display:block;font-size:18px;font-weight:500;line-height:40px;color:var(--white);position:relative}
.site-nav .item>a::after{content:"";position:absolute;inset-inline:0;bottom:6px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:100% 50%;transition:transform .2s}
.site-nav .item>a:hover::after{transform:scaleX(1)}

/* ---------- cta (left) -------------------------------------------------- */
.site-header .btn-outline{width:226px;height:54px;min-height:54px;white-space:nowrap;margin-top:3px}

/* ---------- scrolled palette (Figma 5647:18817) ------------------------- */
.is-scrolled .logo{color:var(--green);margin-top:10px;transform:scale(.8743);transform-origin:100% 0}
.is-scrolled .site-nav .item>a{color:var(--green)}
.is-scrolled .btn-outline{color:var(--green)}
.is-scrolled .btn-outline:hover{background:var(--green);color:var(--white)}
.is-scrolled .burger span{background:var(--green)}

/* ---------- burger ------------------------------------------------------ */
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:24px;height:2px;background:var(--white);transition:transform .2s,opacity .2s}
.burger{transition:opacity .2s}

/* ---------- burger (tablet + mobile) ------------------------------------
   The six-item nav plus the CTA only fits the 1920 canvas it was designed
   on; below 1200 it becomes a drawer. */
@media (max-width:1200px){
  .site-header{padding-block:8px}
  .site-header__inner{height:auto;min-height:70px}
  .logo{align-self:center;margin-top:0}
  .is-scrolled .logo{margin-top:0;transform:none}
  .site-nav{margin-top:0}
  .burger{display:flex}
  .site-header .btn-outline{display:none}
  /* mobile lock-up (Figma 5647:17374): mark on the LEFT, text stacked beside it */
  .logo{width:113px;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:4px}
  .logo__mark{width:35.35px;height:36.7px;margin:2px 0 0;flex:0 0 auto}
  .logo__stack{flex:1 1 auto;min-width:0}
  .logo__words{display:flex;flex-direction:column;align-items:flex-end;margin-top:0;text-align:right}
  .logo__rule-v{display:none}
  .logo__he{display:block;order:1;font-size:12px;transform:none}
  .logo__en{display:block;order:2;font-size:9.6px;margin-top:2px}
  .logo__rule-h{margin-top:2px}
  .logo__tagline{font-size:7px;letter-spacing:.35px;margin-top:2px}

  /* ---- full-screen drawer (same pattern as the ירון דיין build) ---- */
  .site-nav{position:fixed;top:0;right:0;bottom:0;left:0;margin:0;z-index:80;background:var(--white);
    display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;
    transform:translateX(100%);visibility:hidden;
    transition:transform .38s cubic-bezier(.22,.61,.36,1),visibility 0s .38s}
  .nav-toggle:checked~.site-header .site-nav{transform:translateX(0);visibility:visible;
    transition:transform .42s cubic-bezier(.22,.61,.36,1)}

  /* Figma 5647:18032 — head 61px with a full-bleed rule, the brand lock-up in
     its dark variant stays visible above the panel, X at the far corner. */
  .site-nav__head{position:relative;display:block;height:61px;flex:0 0 61px}
  .site-nav__head::after{content:"";position:absolute;bottom:0;inset-inline-start:0;
    width:100%;height:1px;background:rgba(13,44,33,.14)}
  /* the X replaces the burger in place, at the top corner it opened from */
  .site-nav__close{position:absolute;top:25px;inset-inline-start:16px;
    width:24px;height:24px;color:var(--green);cursor:pointer}
  .nav-toggle:checked~.site-header .logo{position:relative;z-index:85;color:var(--green)}
  .site-nav__close svg{width:100%;height:100%;display:block}

  .site-nav .item{padding-inline:24px}
  .site-nav .item>a{position:relative;display:flex;align-items:center;height:66px;
    padding-inline-start:5px;
    font-size:18px;font-weight:500;line-height:1.2;color:var(--green)}
  .site-nav .item>a::after{content:"";position:absolute;bottom:0;inset-inline:0;
    height:1px;background:rgba(13,44,33,.14);transform:none;opacity:1}
  .site-nav .item>a:active{color:var(--gold-dark)}

  .site-nav__cta-wrap{display:block;margin-top:43px;padding-inline:24px}
  .site-nav__cta{display:flex;align-items:center;justify-content:center;height:54px;width:100%;
    border:3.615px solid transparent;
    border-image:linear-gradient(168.4deg,#fff 1.4%,var(--gold-3) 71%) 1;
    background:var(--white);font-size:20px;font-weight:700;color:var(--green)}
  .site-nav__cta:active,.site-nav__cta:hover{background:var(--green);border-color:var(--green);color:var(--white)}

  /* burger disappears once the panel is up — the drawer carries its own X */
  .nav-toggle:checked~.site-header .burger{opacity:0;pointer-events:none}
}

/* tablet: a side panel rather than a full-screen takeover */
@media (min-width:768px) and (max-width:1200px){
  .site-nav{left:auto;width:420px;box-shadow:-24px 0 60px rgba(0,0,0,.28)}
  .site-nav .item{padding-inline:34px}
  .site-nav__cta-wrap{padding-inline:34px}
  .site-nav__close{inset-inline-start:34px}
  .site-nav__head::after{width:100%}
  .nav-toggle:checked~.site-header .logo{z-index:auto}
  .nav-toggle:checked~.site-header::before{content:"";position:fixed;inset:0;z-index:75;
    background:rgba(13,44,33,.45)}
}

@media (max-width:1200px) and (max-height:640px){
  .site-nav{overflow-y:auto}
  .site-nav__head{height:56px;flex:0 0 56px}
  .site-nav__close{top:20px}
  .site-nav .item>a{height:56px}
  .site-nav__cta-wrap{margin-top:26px;padding-bottom:26px}
}

/* ---------- mobile ------------------------------------------------------ */
@media (max-width:767px){
  .site-header__inner{min-height:60px;flex-direction:row-reverse}
}
@media (max-width:360px){
  .site-nav .item>a{height:60px;font-size:17px}
  .site-nav__cta{height:50px;font-size:18px}
}