/* =========================================================================
   עו״ד שי עובדיה | משרד עורכי דין
   Palette sampled directly from the brand deck (Shay_Ovadia_Playground_D2.pdf)
   ========================================================================= */

/* ------------------------------- TOKENS -------------------------------- */
:root{
  /* brand */
  --teal-900:#131F22;   /* footer floor */
  --teal-800:#1D3237;   /* brand core */
  --teal-700:#24393E;
  --teal-600:#374A4E;   /* lifted surface */
  --gold-400:#C4AE91;   /* brand gold */
  --gold-300:#D8C6AC;
  --gold-700:#7B6246;   /* gold darkened until it clears AA on light backgrounds */
  --paper:#F7F6F3;
  --bone:#EDE7DC;       /* warm second neutral — belongs to the gold family */
  --ink:#1A1F21;
  --ink-2:#4A5558;

  /* hairlines */
  --rule-dark:rgba(26,31,33,.14);   /* on light grounds */
  --rule-light:rgba(196,174,145,.28); /* on teal grounds */

  /* type */
  --f-body:"Heebo","Assistant","Helvetica Neue",Arial,sans-serif;
  --f-latin:"Montserrat","Helvetica Neue",Arial,sans-serif;

  --t-h1:clamp(2.5rem,1.5rem + 4.2vw,4.4rem);
  --t-h2:clamp(1.5rem,1.05rem + 1.6vw,2.15rem);
  --t-h3:clamp(1.15rem,1.05rem + .45vw,1.35rem);
  --t-body:clamp(1rem,.96rem + .2vw,1.125rem);
  --t-lede:clamp(1.08rem,1rem + .55vw,1.4rem);
  --t-small:.875rem;

  /* space */
  --shell:1200px;
  --gut:clamp(1.25rem,.7rem + 2.4vw,2.75rem);
  --sec-y:clamp(4.5rem,3rem + 6vw,8.5rem);

  --header-h:76px;   /* sized to the brand lockup — the only height figure here */
  --radius:4px;
  --arc:clamp(48px,13vw,96px);   /* derived from the logomark's curve */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* -------------------------------- BASE --------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

h1,h2,h3{font-weight:500;line-height:1.2;margin:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
svg{display:block}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}

:where(a,button,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--gold-400);
  outline-offset:3px;
  border-radius:2px;
}
.section--paper :where(a,button,input,textarea):focus-visible,
.section--bone :where(a,button,input,textarea):focus-visible{outline-color:var(--gold-700)}

.skip-link{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:200;
  background:var(--gold-400);color:var(--teal-900);
  padding:.75rem 1.25rem;font-weight:600;
}
.skip-link:focus{inset-inline-start:0}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}

/* ----------------------------- PRIMITIVES ------------------------------ */
.eyebrow{
  font-size:var(--t-small);font-weight:500;letter-spacing:.22em;
  color:var(--gold-400);margin:0 0 .9rem;
}
.eyebrow--dark{color:var(--gold-700)}

.rule{display:block;width:64px;height:1px;background:var(--gold-400);margin-block:1.4rem 1.6rem}
.rule--dark{background:var(--gold-700);opacity:.75}

.h2{font-size:var(--t-h2);color:var(--teal-800);letter-spacing:-.005em}
.h2--light{color:#fff}

.i{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.6;
   stroke-linecap:round;stroke-linejoin:round;flex:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.9rem;border:1px solid transparent;border-radius:var(--radius);
  font-family:var(--f-body);font-size:1rem;font-weight:500;letter-spacing:.02em;
  cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:var(--gold-400);color:var(--teal-900);border-color:var(--gold-400)}
.btn--gold:hover{background:var(--gold-300);border-color:var(--gold-300)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(196,174,145,.55)}
.btn--ghost:hover{border-color:var(--gold-400);background:rgba(196,174,145,.12)}
.btn--block{width:100%}
.btn[disabled]{opacity:.6;pointer-events:none;transform:none}

/* Section padding is owned here and nowhere else — no modifier or co-class
   redeclares it, so the cascade can't produce a section with doubled or
   cancelled vertical rhythm. */
.section{position:relative;padding-block:var(--sec-y)}
.section--paper{background:var(--paper)}
.section--bone{background:var(--bone)}
.section--teal{background:var(--teal-800);color:#fff;overflow:hidden}
.section--teal p{color:rgba(255,255,255,.82)}
/* sized in rem, not ch: ch resolves against this element's body font-size, so
   a ch cap wraps the much larger h2 inside it far earlier than intended */
.section__head{max-width:min(100%,46rem);margin-bottom:clamp(2.5rem,1.5rem + 3vw,4rem)}

.watermark{
  position:absolute;inset-block-start:-6%;inset-inline-end:-8%;
  width:min(46vw,520px);aspect-ratio:1;color:var(--gold-400);
  opacity:.05;pointer-events:none;
}
.watermark--start{inset-inline:auto auto;inset-inline-start:-10%;inset-block-start:auto;inset-block-end:-12%}
.watermark svg{width:100%;height:100%}

/* -------------------------------- BRAND -------------------------------- */
.brand{display:inline-flex;align-items:center;gap:.7rem}
.brand__mark{width:44px;height:44px;color:var(--gold-400);flex:none}
.brand__mark svg{width:100%;height:100%}
.brand__mark--lg{width:60px;height:60px}
.brand__text{display:flex;flex-direction:column;line-height:1.15}
/* nowrap on both lines: a logotype that breaks across two lines is a broken
   logotype, and at the enlarged sizes "SHAY OVADIA" does wrap on a 320px phone
   if allowed to. The 359px block at the end of the file steps the whole lockup
   down instead, which is the only width where it does not otherwise fit. */
.brand__latin{
  font-family:var(--f-latin);font-weight:300;font-size:1.05rem;
  letter-spacing:.28em;color:var(--gold-400);white-space:nowrap;
}
/* the Hebrew line takes the largest bump of the three: on a Hebrew site it was
   the most undersized part of the lockup at .66rem. Shared with the footer. */
.brand__he{font-size:.82rem;font-weight:400;letter-spacing:.02em;color:rgba(255,255,255,.82);margin-top:.28rem;white-space:nowrap}
.brand__he i{font-style:normal;color:var(--gold-400);padding-inline:.15rem}

/* ------------------------------- HEADER -------------------------------- */
.site-header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  background:transparent;
  transition:background .35s var(--ease),box-shadow .35s var(--ease);
}
/* Seats the lockup over the hero photo, and reaches 28px past the header since
   the lockup grew. Stepped up again for the round-3 photo: the blurred back rank
   sits directly behind the logotype on a phone, and its specular highlights
   measure up to (228,220,223) raw — under the previous .9→.62 ramp the brightest
   of them left the gold logotype at 3.41:1, below AA. The governing case is a
   599px phone, where that crop is scaled up the most: .95→.80 measures 4.89:1
   there, and 5.38:1 on a 390px phone.
   Only ever visible over the hero — is-stuck fades it out. */
.site-header::before{
  content:"";position:absolute;inset:0 0 -28px;z-index:-1;
  background:linear-gradient(to bottom,
    rgba(19,31,34,.95) 0%,
    rgba(19,31,34,.8) 50%,
    rgba(19,31,34,0) 100%);
  transition:opacity .35s var(--ease);
}
/* inset shadow rather than a border, so becoming stuck cannot change the
   header's height and shift every scroll-margin anchor on the page */
.site-header.is-stuck{
  background:var(--teal-800);
  box-shadow:0 10px 34px rgba(11,22,25,.34),inset 0 -1px 0 rgba(196,174,145,.22);
}
.site-header.is-stuck::before{opacity:0}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:var(--header-h);
}

.nav{display:flex;align-items:center;gap:clamp(1rem,-.5rem + 2.2vw,2.4rem)}
.nav__list{display:flex;align-items:center;gap:clamp(.9rem,-.4rem + 1.9vw,1.9rem)}
.nav__list a{
  position:relative;font-size:.95rem;color:rgba(255,255,255,.86);
  padding-block:.4rem;transition:color .22s var(--ease);
}
.nav__list a::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  width:100%;height:1px;background:var(--gold-400);
  transform:scaleX(0);transform-origin:right center;
  transition:transform .3s var(--ease);
}
.nav__list a:hover,.nav__list a.is-active{color:#fff}
.nav__list a:hover::after,.nav__list a.is-active::after{transform:scaleX(1)}
.nav__cta{padding:.6rem 1.25rem;font-size:.9rem}

/* positioned above .nav.is-open (z-index 99) so the close X stays visible and
   tappable once the overlay is up — otherwise the only way out is Esc or
   navigating away */
.burger{
  display:none;position:relative;z-index:100;
  width:44px;height:44px;background:none;border:0;cursor:pointer;
  padding:10px;flex-direction:column;justify-content:space-between;
}
.burger span{display:block;height:1.5px;width:100%;background:#fff;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger.is-open span:nth-child(1){transform:translateY(10.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-10.5px) rotate(-45deg)}

/* --------------------------------- HERO --------------------------------
   Mobile is the base case: a portrait band cut to the same 3:4 ratio as the
   asset it holds, so object-fit has nothing to crop and the king cannot
   drift off-frame at any phone width. Desktop splits into two columns.
   ----------------------------------------------------------------------- */
.hero{
  position:relative;display:flex;flex-direction:column;
  background:var(--teal-800);color:#fff;overflow:hidden;
}
.hero__media{
  position:relative;z-index:0;flex:none;
  width:100%;aspect-ratio:3/4;max-height:46svh;
  overflow:hidden;
  border-end-end-radius:var(--arc);   /* bottom-left in RTL — the logomark curve */
}
.hero__media picture{display:block;width:100%;height:100%}
/* the 46svh cap below keeps the headline above the fold, which means the band
   is shorter than the 3:4 asset on a typical phone and object-fit does crop.
   This frame is bottom-weighted, not top-weighted like the portrait that used
   to be here: the top third of the photo is empty black, so biasing downwards
   is what keeps the king and the lit squares in the band. */
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
/* the chess frame is already near-black, so the scrim only has to seat the
   image against the panel — the delivered values were tuned for a brightly
   lit portrait and crush this one */
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(19,31,34,.35) 0%,
    rgba(19,31,34,0) 24%,
    rgba(19,31,34,0) 74%,
    rgba(29,50,55,.42) 100%);
}
.hero__panel{position:relative;z-index:1;background:var(--teal-800)}
.hero__inner{position:relative;z-index:1;padding-block:clamp(1.9rem,1rem + 4vw,2.6rem) clamp(2.6rem,1.5rem + 5vw,3.6rem)}
.hero__title{font-size:var(--t-h1);font-weight:400;letter-spacing:-.015em}
.hero__lede{font-size:var(--t-lede);font-weight:300;color:rgba(255,255,255,.9);line-height:1.6;max-width:34ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.1rem}

.hero__cue{
  position:absolute;inset-block-end:2rem;inset-inline-start:50%;
  transform:translateX(50%);z-index:2;width:22px;height:38px;
  border:1px solid rgba(196,174,145,.5);border-radius:12px;
}
.hero__cue span{
  position:absolute;inset-block-start:7px;inset-inline-start:50%;
  width:3px;height:7px;border-radius:2px;background:var(--gold-400);
  transform:translateX(50%);
}

/* -------------------------------- ABOUT -------------------------------- */
.about{display:grid;gap:clamp(2.2rem,1rem + 4vw,4rem);grid-template-columns:1fr}
.about__body{max-width:62ch;color:var(--ink-2)}
.about__body .h2{margin-bottom:0}

/* A fixed 3:4 crop rather than a column-height stretch: the bio runs four
   paragraphs, and matching that height would slice the frame into a sliver.
   Capped below 900px so the stacked phone layout doesn't turn it into a slab. */
.portrait{
  margin:0;align-self:start;
  max-width:min(100%,24rem);
}
.portrait img{
  display:block;width:100%;aspect-ratio:3/4;object-fit:cover;
  border-radius:var(--radius);background:var(--teal-800);
}
/* gold-700, not gold-400: this caption used to sit on teal, and the light gold
   is 1.98:1 on paper */
.portrait figcaption{
  margin-top:1.1rem;padding-top:.9rem;border-top:1px solid rgba(123,98,70,.3);
  font-size:var(--t-small);letter-spacing:.12em;color:var(--gold-700);
}

/* --------------------------- PRACTICE INDEX ----------------------------
   A firm's practice list is an index, not ten identical cards. The row
   marker is the brand logomark itself, so the mismatched stroke icons
   (an envelope for tenders, a document for inheritance) are gone. Every row
   is a single line of type, so the marker and the title share one grid row.
   ----------------------------------------------------------------------- */
.index{
  display:grid;grid-template-columns:1fr;
  column-gap:clamp(2rem,1rem + 4vw,4.5rem);
  border-bottom:1px solid var(--rule-dark);
}
.index__row{
  display:grid;grid-template-columns:auto 1fr;
  column-gap:1rem;align-items:center;
  padding-block:clamp(1.05rem,.85rem + .6vw,1.35rem);
  border-top:1px solid var(--rule-dark);
  transition:border-top-color .3s var(--ease);
}
.index__row:hover{border-top-color:var(--gold-700)}
.index__mark{
  width:15px;height:15px;
  color:var(--gold-700);opacity:.4;
  transition:opacity .3s var(--ease);
}
.index__mark svg{width:100%;height:100%;display:block}
.index__row:hover .index__mark{opacity:1}
.index__row h3{font-size:var(--t-h3);color:var(--teal-800)}

/* ------------------------------- CONTACT ------------------------------- */
.contact__grid{display:grid;gap:clamp(2.5rem,1rem + 5vw,4.5rem);align-items:start}
.contact__lede{max-width:44ch}

/* Calling is the primary path for this audience, so the number is the largest
   thing in the column — but the card it used to sit in came off in the client's
   revision, along with the label above it. The line of copy over it now does
   that label's job, so size and the gold glyph are all that mark it. */
.contact__phone{
  display:inline-flex;align-items:center;gap:.85rem;
  margin-top:1.7rem;
  font-size:1.55rem;line-height:1.15;color:#fff;
  transition:color .22s var(--ease);
}
.contact__phone:hover{color:var(--gold-300)}
.contact__phone .i{width:1.5rem;height:1.5rem;color:var(--gold-400);stroke-width:1.4}

.contact__list{margin-top:1.5rem;display:grid;gap:1.05rem}
.contact__list li{display:flex;align-items:center;gap:.85rem}
.contact__list .i{width:1.35rem;height:1.35rem;color:var(--gold-400);stroke-width:1.4}
.contact__list a{
  color:rgba(255,255,255,.9);border-bottom:1px solid transparent;
  transition:color .22s var(--ease),border-color .22s var(--ease);
}
.contact__list a:hover{color:var(--gold-300);border-bottom-color:var(--gold-400)}

.form{
  background:var(--teal-700);border:1px solid rgba(196,174,145,.16);
  border-radius:var(--radius);padding:clamp(1.5rem,1rem + 2vw,2.4rem);
}
.form__row{display:grid;gap:1.1rem;grid-template-columns:1fr}
.field{margin-bottom:1.3rem}
.field label{display:block;font-size:var(--t-small);font-weight:500;letter-spacing:.04em;
  color:rgba(255,255,255,.8);margin-bottom:.35rem}
/* underline fields — quieter than boxes, and the focus ring from the global
   :focus-visible rule still draws, so keyboard users lose nothing */
.field input,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:#fff;
  background:transparent;
  border:0;border-bottom:1px solid rgba(196,174,145,.32);border-radius:0;
  padding:.6rem .1rem;
  transition:border-color .22s var(--ease);
}
.field textarea{resize:vertical;min-height:104px;line-height:1.6}
.field input:hover,.field textarea:hover{border-bottom-color:rgba(196,174,145,.6)}
.field input:focus,.field textarea:focus{border-bottom-color:var(--gold-400)}
.field.has-error input,.field.has-error textarea{border-bottom-color:#E88E7A}
.form .field__error{margin:.4rem 0 0;font-size:.8rem;color:#F2AD9C;min-height:0}
.form .field__error:empty{display:none}

.field--check{display:grid;grid-template-columns:auto 1fr;gap:.65rem;align-items:start;margin-top:.4rem}
.field--check input{width:18px;height:18px;margin-top:.35rem;accent-color:var(--gold-400);border-bottom:0}
.field--check label{font-size:.85rem;font-weight:400;line-height:1.55;margin:0;
  color:rgba(255,255,255,.75)}
.field--check .field__error{grid-column:1 / -1}

.form .form__status{margin:1rem 0 0;font-size:.9rem;color:rgba(255,255,255,.8);min-height:1.2em}
.form .form__status.is-ok{color:var(--gold-300)}
.form .form__status.is-err{color:#F2AD9C}

/* -------------------------------- FOOTER ------------------------------- */
.site-footer{background:var(--teal-900);color:rgba(255,255,255,.72);padding-block:clamp(3rem,2rem + 3vw,4.5rem) 0}
.site-footer__inner{
  display:grid;gap:2.4rem;padding-bottom:2.8rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-footer__brand{display:flex;align-items:center;gap:.85rem}
.site-footer__nav{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;font-size:.95rem}
.site-footer__nav a:hover{color:var(--gold-300)}
/* justify-items:start shrink-wraps each line to the inline start, so the
   dir="ltr" phone and email don't drift left away from the address */
.site-footer__contact{display:grid;justify-items:start;gap:.45rem;font-style:normal;font-size:.95rem}
.site-footer__contact a:hover{color:var(--gold-300)}
.site-footer__legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 2rem;
  padding-block:1.6rem 2rem;font-size:.8rem;color:rgba(255,255,255,.58);
}
.site-footer__legal p{margin:0}

/* --------------------------------- FAB --------------------------------- */
.fab{
  position:fixed;inset-block-end:1.4rem;inset-inline-start:1.4rem;z-index:90;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--gold-400);color:var(--teal-900);
  box-shadow:0 10px 26px rgba(11,22,25,.34);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,background .22s var(--ease);
}
.fab.is-visible{opacity:1;visibility:visible;transform:none}
.fab:hover{background:var(--gold-300)}
.fab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------ RESPONSIVE ----------------------------- */
@media (min-width:560px){
  .index{grid-template-columns:repeat(2,1fr)}
}

/* tablets: the band goes landscape and takes the 4:3 crop, which needs far less
   zoom here than the phone crop would and keeps the back rank in frame */
@media (min-width:600px) and (max-width:899px){
  .hero__media{aspect-ratio:4/3;max-height:52svh}
  .hero__media img{object-position:50% 45%}
}

@media (min-width:640px){
  .form__row{grid-template-columns:1fr 1fr}
  .site-footer__inner{grid-template-columns:1fr auto;align-items:center}
  .site-footer__contact{grid-column:1 / -1}
}

@media (min-width:900px){
  /* hero splits: type panel at the inline-start (right in RTL, where the eye
     starts), photo bleeding off the inline-end edge */
  .hero{display:grid;grid-template-columns:44% 56%;min-height:100svh}
  .hero__media{
    grid-area:1 / 2;aspect-ratio:auto;max-height:none;height:100%;
    border-end-end-radius:0;
  }
  /* 42% holds the king clear of the arc at every width from 1024 to 1920: the
     curve eats into the inline-end (right) side of the strip, and the piece
     sits just left of centre in the frame. 40% on the block axis keeps the
     empty black top from taking over on short, wide screens, where the strip
     is wider than 4:3 and the crop turns vertical. */
  .hero__media img{object-position:42% 40%}
  .hero__scrim{
    background:
      linear-gradient(to bottom,rgba(19,31,34,.45) 0%,rgba(19,31,34,0) 26%),
      linear-gradient(to left,rgba(29,50,55,.5) 0%,rgba(29,50,55,0) 26%);
  }
  .hero__panel{grid-area:1 / 1;display:flex;align-items:center}
  /* the signature: the panel's inline-end edge is the logomark's arc rather
     than a straight edge or a gradient smear */
  .hero__panel::before{
    content:"";position:absolute;z-index:0;
    inset-block:-10%;inset-inline-end:-10vw;width:20vw;
    background:var(--teal-800);border-radius:50%;
  }
  .hero__inner{padding-block:calc(var(--header-h) + 2rem) 4rem}
  .hero__cue{inset-inline-start:22%}

  /* start, not stretch: the portrait keeps its own 3:4 ratio beside the bio */
  .about{grid-template-columns:1.55fr 1fr;align-items:start}
  .portrait{max-width:none}
  .contact__grid{grid-template-columns:1fr 1.05fr}

  .site-footer__inner{grid-template-columns:auto 1fr auto}
  .site-footer__contact{grid-column:auto;justify-items:end;text-align:end}
  .site-footer__nav{justify-content:center}
}

@media (min-width:1200px){
  /* The client's 2/3 photo . 1/3 type, held back to 1200px on purpose: a third
     of a 900px window is a 234px column — narrower than a phone — and the name,
     the lede and the pair of buttons all break in it. Below this width the
     delivered 44/56 stands. */
  .hero{grid-template-columns:33.34% 66.66%}
  /* the cue is centred on the panel, so it tracks the panel's width */
  .hero__cue{inset-inline-start:16.7%}
  /* The name must not wrap, and the column it lives in is a third of the
     viewport less two gutters — 320px at 1200, 392px at 1440. This ramp stays
     inside both and reaches the delivered 4.4rem again around 1630px, where a
     third of the screen is finally wide enough to hold it. Scoped to this
     block so phone and tablet keep --t-h1 exactly as delivered. */
  .hero__title{font-size:clamp(3.1rem,-.5rem + 4.8vw,4.4rem)}

  .index{column-gap:5rem}
}

/* The pair of hero buttons needs 357px side by side, and a third of the viewport
   only clears that from ~1330px up. Between there and the 1200px split they get
   the phone treatment — one full-width bar each — rather than wrapping into a
   ragged two-row block. */
@media (min-width:1200px) and (max-width:1339px){
  .hero__actions .btn{width:100%}
}

/* ---- mobile navigation ---- */
@media (max-width:899px){
  .burger{display:flex}
  .nav{
    position:fixed;inset:0;z-index:-1;
    flex-direction:column;justify-content:center;gap:2.5rem;
    background:var(--teal-800);
    opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
  }
  .nav.is-open{opacity:1;visibility:visible;z-index:99}
  .nav__list{flex-direction:column;gap:1.6rem;text-align:center}
  .nav__list a{font-size:1.35rem}
  .nav__cta{padding:.85rem 2rem;font-size:1rem}

  .hero__cue{display:none}
  .watermark{width:min(70vw,360px)}
  /* clear the floating WhatsApp button so it never sits on the legal text */
  .site-footer__legal{padding-bottom:5.5rem}
}

@media (max-width:479px){
  .hero__actions .btn{width:100%}
}

/* Below ~331px the enlarged lockup plus the burger no longer fit on one line
   (measured: 291px needed against 280px of content at 320px wide). Step the
   lockup down rather than let either line wrap — but only as far as its
   pre-round size, so nothing here is ever smaller than it used to be: the mark
   still gains 2px, the Hebrew line still gains .08rem, and the logotype returns
   to exactly its old .95rem. Leaves 11px of slack at 320px, measured against
   Montserrat, which is the widest case — the Arial fallback is narrower.
   Scoped to the header on purpose: it is the only place the lockup competes for
   width (with the burger). The footer lockup has the full column to itself and
   fits at full size, and an unscoped .brand__mark here would also outrank
   .brand__mark--lg and shrink the footer mark from 60px to 38px. */
@media (max-width:359px){
  .site-header .brand__mark{width:38px;height:38px}
  .site-header .brand__latin{font-size:.95rem}
  .site-header .brand__he{font-size:.74rem}
}

/* -------------------------------- MOTION -------------------------------
   One orchestrated hero sequence, plus section-level reveals. Everything is
   gated on .js so the page is never hidden if the script fails to load.
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(26px);
    transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .js .reveal.is-in{opacity:1;transform:none}

  /* containers stagger their own children, so one observed element covers a
     whole group instead of one per card */
  .js .stagger{opacity:1;transform:none;transition:none}
  .js .stagger > *{opacity:0;transform:translateY(20px);
    transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .js .stagger.is-in > *{opacity:1;transform:none}
  .js .stagger.is-in > *:nth-child(2){transition-delay:.07s}
  .js .stagger.is-in > *:nth-child(3){transition-delay:.14s}
  .js .stagger.is-in > *:nth-child(4){transition-delay:.21s}
  .js .stagger.is-in > *:nth-child(5){transition-delay:.28s}
  .js .stagger.is-in > *:nth-child(6){transition-delay:.35s}
  .js .stagger.is-in > *:nth-child(7){transition-delay:.42s}
  .js .stagger.is-in > *:nth-child(8){transition-delay:.49s}
  .js .stagger.is-in > *:nth-child(9){transition-delay:.56s}
  .js .stagger.is-in > *:nth-child(10){transition-delay:.63s}

  /* hero page-load sequence */
  .js .hero__content [data-seq]:not(.rule){opacity:0;transform:translateY(16px)}
  .js .hero__content .rule[data-seq]{transform:scaleX(0);transform-origin:right center}
  .js .hero__media img{transform:scale(1.05)}

  .js .hero.is-ready [data-seq]:not(.rule){
    opacity:1;transform:none;
    transition:opacity .65s var(--ease),transform .65s var(--ease);
  }
  .js .hero.is-ready .rule[data-seq]{transform:none;transition:transform .7s var(--ease)}
  .js .hero.is-ready .hero__media img{transform:none;transition:transform 1.5s var(--ease)}

  .js .hero.is-ready [data-seq="1"]{transition-delay:.08s}
  .js .hero.is-ready [data-seq="2"]{transition-delay:.18s}
  .js .hero.is-ready [data-seq="3"]{transition-delay:.34s}
  .js .hero.is-ready [data-seq="4"]{transition-delay:.44s}
  .js .hero.is-ready [data-seq="5"]{transition-delay:.56s}

  .hero__cue span{animation:cue 1.9s var(--ease) infinite}
  @keyframes cue{
    0%{transform:translateX(50%) translateY(0);opacity:1}
    70%{transform:translateX(50%) translateY(14px);opacity:0}
    100%{transform:translateX(50%) translateY(0);opacity:0}
  }
}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* scroll offset so anchors clear the fixed header */
:target,section[id]{scroll-margin-top:calc(var(--header-h) + 12px)}