:root{
  --paper:#ffffff; --ink:#0d0d0d; --grey:#767676; --rule:#0d0d0d; --faint:#e9e9e9;
  --blue:#1d33e0; /* tekhelet */
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --heb:"Heebo","Arial Hebrew",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--display)}
[lang=he]{font-family:var(--heb)}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* top bar */
.top{display:flex;justify-content:space-between;align-items:center;padding:22px 0;border-bottom:1.5px solid var(--rule)}
.wordmark{font-weight:850;font-size:22px;letter-spacing:-.02em;text-decoration:none;font-variation-settings:"wdth" 125}
.wordmark span{color:var(--blue)}
.top nav{display:flex;gap:22px;font-size:14px;font-weight:600}
.top nav a{text-decoration:none;border-bottom:1.5px solid transparent}
.top nav a:hover{border-color:var(--blue);color:var(--blue)}

/* hero shared */
.hero{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:24px;padding-top:36px}
.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 18px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.kicker::before{content:"";width:10px;height:10px;background:var(--blue)}
.kicker [lang=he]{letter-spacing:0;font-size:15px;font-weight:500;color:var(--grey)}
.kicker .no{color:var(--grey);font-weight:600}
.display{margin:0;font-weight:850;text-transform:uppercase;line-height:.86;letter-spacing:-.015em;font-variation-settings:"wdth" 72;font-size:clamp(64px,12.5vw,170px);overflow-wrap:anywhere}
.display.mid{font-size:clamp(52px,9vw,124px)}
.display.long{font-size:clamp(44px,6.8vw,96px)}
.display-he{margin:14px 0 0;text-align:left;font-weight:800;color:var(--blue);line-height:1;font-size:clamp(40px,6.4vw,86px)}
.byline{margin:26px 0 40px;color:var(--grey);font-size:14px}
.hero-photo{margin:0;align-self:end}
.hero-photo img{display:block;width:100%;height:auto;max-height:680px;object-fit:contain;object-position:bottom right;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 72% 68% at 55% 52%,#000 58%,transparent 100%);
          mask-image:radial-gradient(ellipse 72% 68% at 55% 52%,#000 58%,transparent 100%)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:58px;padding:0 22px;font-weight:700;font-size:16px;text-decoration:none;border:1.5px solid var(--ink);transition:background .15s,color .15s,border-color .15s}
.btn .arr{font-size:20px;line-height:1}
.btn.solid{background:var(--ink);color:#fff}
.btn.solid:hover{background:var(--blue);border-color:var(--blue)}
.btn.line:hover{border-color:var(--blue);color:var(--blue)}
.btn[lang=he]{font-size:18px}
.btn.off{opacity:.3;pointer-events:none}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:32px 0 48px;font-size:14px;color:var(--grey)}
footer a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--blue)}
.demo{position:fixed;right:14px;bottom:14px;background:var(--ink);color:#fff;font-size:12px;padding:8px 14px;letter-spacing:.04em}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;padding-top:12px;gap:0}
  .hero-photo{order:-1;width:78%;margin-left:auto;margin-bottom:-8px}
  .btn{width:100%}
}