/* ============================================================
   DAFNA SAIAS — Design System
   Values measured directly from the approved 1920px mockup.
   Every token maps to an Elementor Global (Site Settings).
   ============================================================ */

:root {
  /* ---- Colour (sampled from the mockup) ---- */
  --paper:      #F2F1EC;   /* page background          */
  --panel:      #EAE9E5;   /* block band background    */
  --card:       #EFEDE7;   /* pinterest card body      */
  --stone:      #DDD8D5;
  --ink:        #2E2A24;   /* warm near-black          */
  --ink-2:      #3D3831;   /* dark panel, 2nd level    */
  --text:       #2E2A24;
  --muted:      #6E675D;
  --muted-2:    #A19D9A;
  --hairline:   #A6A699;   /* olive card border        */
  --olive-ink:  #5E5E47;   /* pinterest card title     */
  --line:       #D8D3CB;

  /* ---- Type ---- */
  --font-he: "Assistant", -apple-system, "Segoe UI", sans-serif;
  --font-la: "Assistant", -apple-system, "Segoe UI", sans-serif;

  --h1: 50px;  --h2: 34px;  --h3: 24px;
  --body: 17px; --small: 14px; --label: 12px;
  --lh-tight: 1.14; --lh-head: 1.24; --lh-body: 1.75;

  /* ---- Layout ---- */
  --maxw: 1880px;     /* full-bleed panels, matches the mockup */
  --band: 1550px;     /* inner content band                    */
  --pad: 20px;

  /* ---- Rhythm ---- */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:128px; --s9:170px;

  /* squared off — Dafna's call: every corner is a right angle */
  --r-card: 0; --r-img: 0; --r-panel: 0;
}

@media (max-width:1440px){ :root{ --h1:44px; --h2:31px; --h3:23px; --s9:120px; --s8:96px; } }
@media (max-width:1024px){ :root{ --h1:38px; --h2:28px; --h3:21px; --body:17px; --pad:24px;
                                  --s9:88px; --s8:72px; --s7:64px; } }
@media (max-width:640px) { :root{ --h1:31px; --h2:24px; --h3:19px; --body:16px; --small:14px;
                                  --pad:18px; --s9:72px; --s8:60px; --s7:56px; --s6:44px; } }

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--font-he); font-size:var(--body); line-height:var(--lh-body);
  font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
h1,h2,h3{ margin:0; font-weight:300; line-height:var(--lh-head); letter-spacing:-0.015em }
h1{ font-size:var(--h1); line-height:var(--lh-tight) }
h2{ font-size:var(--h2) }
h3{ font-size:var(--h3) }
p{ margin:0 }
strong,.em{ font-weight:700 }

/* ---- Containers ---- */
.shell{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.band { max-width:var(--band); margin-inline:auto; padding-inline:var(--pad) }

/* ---- Atoms ---- */
.eyebrow{
  font-size:var(--label); letter-spacing:.2em; font-weight:600;
  color:var(--muted); text-transform:uppercase;
}
.lede{ font-size:var(--body); color:var(--muted); max-width:52ch }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--small); font-weight:600; letter-spacing:.01em;
  padding:13px 26px; border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  border-radius:0; transition:background .25s, color .25s, border-color .25s;
}
.btn:hover{ background:var(--ink-2); border-color:var(--ink-2) }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink) }
.btn--ghost:hover{ background:var(--ink); color:var(--paper) }
.btn--light{ background:var(--paper); color:var(--ink); border-color:var(--paper) }
.btn .arw{ font-size:12px; transform:translateY(1px) }

/* ============================================================
   HEADER — the pill bar from the mockup
   ============================================================ */
.hdr{ position:sticky; top:0; z-index:60; background:var(--paper) }
.hdr__bar{
  max-width:var(--maxw); margin-inline:auto; padding:18px var(--pad) 16px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  border-bottom:1px solid var(--line);
}
/* the mark is masked so it always takes the surrounding text colour */
.logo{
  display:block; width:104px; height:29px; background:currentColor; flex:none;
  -webkit-mask:url(../img/logo.svg) no-repeat center/contain;
          mask:url(../img/logo.svg) no-repeat center/contain;
}
.logo--sm{ width:88px; height:25px }
.logo--lg{ width:132px; height:37px }
.hdr__nav{ display:flex; gap:34px; font-size:var(--small); color:var(--text) }
.hdr__nav a{ position:relative; padding-block:4px }
.hdr__nav a::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0; height:1px; width:0;
  background:var(--ink); transition:width .3s ease;
}
.hdr__nav a:hover::after, .hdr__nav a[aria-current]::after{ width:100% }
.hdr__cta{ display:flex; align-items:center; gap:22px }
.hdr__link{
  font-size:var(--small); letter-spacing:.02em; padding-bottom:5px;
  border-bottom:1px solid var(--ink); display:inline-flex; align-items:center; gap:9px;
  transition:opacity .25s, border-color .25s;
}
.hdr__link:hover{ opacity:.55 }
.hdr__link .arw{ font-size:11px }
.hdr__burger{ display:none; width:26px; height:16px; position:relative }
.hdr__burger i{ position:absolute; inset-inline:0; height:1.5px; background:var(--ink); transition:.3s }
.hdr__burger i:nth-child(1){ top:0 } .hdr__burger i:nth-child(2){ top:7px } .hdr__burger i:nth-child(3){ top:14px }

@media (max-width:1024px){
  .hdr__nav{ display:none }
  .hdr__burger{ display:block }
  .hdr__bar{ padding:16px var(--pad) 14px }
}
@media (max-width:640px){
  .hdr__cta{ gap:16px }
  .hdr__link{ font-size:13px }
  .logo{ width:86px; height:24px }
}

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:80; background:var(--paper);
  transform:translateX(100%); transition:transform .4s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; padding:var(--pad);
}
.drawer[data-open]{ transform:translateX(0) }
.drawer__top{ display:flex; justify-content:space-between; align-items:center; padding-block:14px }
.drawer__nav{ display:grid; gap:6px; margin-top:var(--s6) }
.drawer__nav a{ font-size:26px; font-weight:300; padding-block:14px; border-bottom:1px solid var(--line) }
.drawer__foot{ margin-top:auto; display:grid; gap:14px; padding-bottom:var(--s4) }

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{ background:var(--ink); color:var(--paper); margin-top:var(--s7); padding-block:var(--s7) var(--s5) }
.ftr__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:var(--s6);
  padding-bottom:var(--s7); border-bottom:1px solid rgba(242,241,236,.16);
}
.ftr__logo{ margin-bottom:var(--s3) }
.ftr h4{ font-size:var(--label); letter-spacing:.2em; text-transform:uppercase;
         font-weight:600; opacity:.55; margin:0 0 var(--s3) }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; font-size:var(--small) }
.ftr a:hover{ opacity:.65 }
.ftr__note{ font-size:var(--small); opacity:.62; max-width:34ch; line-height:1.7 }
.ftr__base{ display:flex; justify-content:space-between; gap:var(--s3);
            padding-top:var(--s4); font-size:var(--label); opacity:.5; flex-wrap:wrap }
@media (max-width:1024px){ .ftr__grid{ grid-template-columns:1fr 1fr; gap:var(--s5) } }
@media (max-width:640px) { .ftr__grid{ grid-template-columns:1fr } }

/* ============================================================
   SECTION HEADS
   ============================================================ */
.shead{ text-align:center; margin-bottom:var(--s6) }
.shead h2{ font-weight:300 }
.shead h2 strong{ font-weight:700 }
.shead p{ margin-top:var(--s3); color:var(--muted); max-width:56ch;
          margin-inline:auto; font-size:var(--body) }
.shead--start{ text-align:start }
.shead--start p{ margin-inline:0 }

.sec{ padding-block:var(--s7) }
.sec--tight{ padding-block:var(--s6) }

/* ---- reveal on scroll ---- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1) }
.rv.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none } }