/* ============================================================
   DAFNA SAIAS — Design System
   ONE spacing scale · ONE type scale · ONE vertical rhythm.
   Every token maps to an Elementor Global (Site Settings).
   ============================================================ */

:root {
  /* ---- Colour ---- */
  --paper:      #F2F1EC;
  --panel:      #EAE9E5;
  --stone:      #DDD8D5;
  --ink:        #2E2A24;
  --ink-2:      #3D3831;
  --text:       #2E2A24;
  --muted:      #6E675D;
  --muted-2:    #726C62;
  --olive-ink:  #55503E;
  --olive-lt:   #9A9270;   /* the same hue, on ink */
  --line:       #DFDAD1;

  /* ---- Type: FIVE sizes, not eleven ---- */
  --font-he: "Assistant", -apple-system, "Segoe UI", sans-serif;

  --h1: 72px;
  --h2: 44px;
  --h3: 22px;
  --body: 18px;
  --small: 15px;
  --label: 13px;
  --quote: 26px;   /* testimonials only */

  --lh-tight: 1.08; --lh-head: 1.22; --lh-body: 1.72;

  /* ---- Layout ---- */
  --band: 1320px;
  --hero-h: 720px;
  --pad: 40px;

  /* ---- Rhythm: FOUR inner steps + TWO section steps ---- */
  --s1: 8px;    --s2: 16px;   --s3: 24px;   --s4: 32px;
  --s5: 48px;   --s6: 64px;   --s7: 96px;   --s8: 128px;

  /* ---- Radius ----------------------------------------------------------
     ONE value for the whole site: panels, photographs, controls. It was used
     in nine places and defined in none of them, so every border-radius was
     an invalid declaration and the page shipped with square corners.
     The six per-component tokens that used to live here were all 0 except
     --r-btn:4px, which was a second, competing radius. Deleted. */
  --r: 10px;

  /* ---- Motion ----------------------------------------------------------
     One curve. A strong ease-out: fast at the start, settling at the end,
     which is what makes an entrance feel arrived-at rather than dragged in.
     The browser's built-in ease-out is too weak to read at this scale. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

@media (max-width:1360px){ :root{ --h1:60px; --h2:40px; } }
@media (max-width:1120px){ :root{ --h1:52px; --h2:36px; --pad:32px; --s8:96px; --s7:72px; --s6:56px; } }
@media (max-width:1024px){ :root{ --h1:46px; --h2:34px; --h3:21px; --body:17px; --pad:24px;
                                  --s8:88px; --s7:64px; --s6:48px; --s5:40px; } }
@media (max-width:640px) { :root{ --h1:38px; --h2:29px; --h3:20px; --body:17px; --small:14px;
                                  --label:12px; --pad:20px;
                                  --s8:64px; --s7:56px; --s6:44px; --s5:32px; --s4:24px; } }

/* ---- 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); letter-spacing:-0.025em }
h2{ font-size:var(--h2) }
h3{ font-size:var(--h3) }
p{ margin:0 }
strong,.em{ font-weight:600 }

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

/* ---- Atoms ---- */
.eyebrow{
  font-size:var(--label); letter-spacing:.08em; font-weight:600;
  color:var(--olive-ink);
}
.lede{ font-size:var(--body); color:var(--muted); max-width:46ch; line-height:var(--lh-body) }

.btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-size:var(--small); font-weight:600; letter-spacing:.02em;
  padding:15px 32px; border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  border-radius:var(--r); transition:background .35s, color .35s, border-color .35s;
}
.btn:hover{ background:var(--ink-2); border-color:var(--ink-2) }
.btn--ghost{ background:transparent; color:var(--olive-ink); border-color:rgba(85,80,62,.35) }
.btn--ghost:hover{ background:var(--olive-ink); color:var(--paper); border-color:var(--olive-ink) }
.btn--light{ background:var(--paper); color:var(--ink); border-color:var(--paper) }

/* Every link and control was invisible to a keyboard. */
:where(a,button):focus-visible{
  outline:2px solid var(--olive-ink); outline-offset:3px; border-radius:var(--r);
}


/* ============================================================
   HEADER — the pill bar from the mockup
   ============================================================ */
.hdr{ position:sticky; top:0; z-index:60; background:var(--paper) }
.hdr__bar{
  max-width:var(--band); margin-inline:auto; padding:26px var(--pad) 24px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
}
/* the mark is masked so it always takes the surrounding text colour */
.logo{
  display:block; width:96px; height:27px; 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:74px; height:21px }
.logo--lg{ width:104px; height:29px }
.hdr__nav{ display:flex; gap:var(--s4); 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:var(--s3) }
.hdr__link{
  font-size:var(--small); letter-spacing:.02em; padding-bottom:4px;
  border-bottom:1px solid var(--ink); display:inline-flex; align-items:center; gap:var(--s1);
  transition:opacity .25s, border-color .25s;
}
.hdr__link:hover{ opacity:.55 }
.hdr__link .arw{ font-size:var(--label) }
.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:var(--s2) }
  .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:var(--s1); margin-top:var(--s6) }
.drawer__nav a{ font-size:var(--h3); font-weight:300; padding-block:13px; border-bottom:1px solid var(--line) }
.drawer__foot{ margin-top:auto; display:grid; gap:var(--s2); padding-bottom:var(--s4) }

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{ background:var(--ink); color:var(--paper); margin-top:0; padding-block:var(--s6) var(--s5) }
.ftr__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:var(--s5);
  padding-bottom:var(--s6); border-bottom:1px solid rgba(242,241,236,.14);
}
.ftr__logo{ margin-bottom:var(--s3) }
.ftr h4{ font-size:var(--label); letter-spacing:.2em; text-transform:uppercase;
         font-weight:600; opacity:.62; margin:0 0 var(--s3) }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); 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__brands li{ opacity:.62 }
.ftr__base{ display:flex; justify-content:space-between; gap:var(--s3);
            padding-top:var(--s4); font-size:var(--label); opacity:.62; 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:start; margin-bottom:var(--s5) }
.shead h2,.bhead h2{ text-wrap:balance }
.shead h2{ font-weight:300 }
.shead h2 strong{ font-weight:700; color:var(--olive-ink) }
.shead p{ margin-top:var(--s3); color:var(--muted); max-width:46ch;
          margin-inline:0; font-size:var(--body) }
.shead .eyebrow{ display:block; margin-bottom:var(--s2) }

.sec{ padding-block:calc(var(--s8)/2) }
/* one section whose head sits BESIDE its content — the page stops being
   six identical head-above-grid blocks */
.sec--split > .band{ display:grid; grid-template-columns:1fr 2fr;
                     grid-template-rows:auto auto; gap:var(--s5) var(--s7); align-items:start }
.sec--split .shead{ grid-column:1; grid-row:1/3; margin-bottom:0 }
.sec--split .prow { grid-column:2; grid-row:1 }
.sec--split .sec__cta{ grid-column:2; grid-row:2; margin-top:0 }
@media (max-width:1024px){
  .sec--split > .band{ grid-template-columns:1fr; gap:var(--s5) }
  .sec--split .shead,.sec--split .prow,.sec--split .sec__cta{ grid-column:1; grid-row:auto }
}

/* ---- 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 } }