/* ==========================================================================
   עו״ד ונוטריון ויוי חביבה ארגמן
   Type:   Rubik (display) + Assistant (UI/body). Both modern Hebrew sans.
   Color:  graphite ground, cool paper surfaces, one brass accent
   Radius: 4px controls, 10px media/cards. No other radii.
   ========================================================================== */

:root{
  /* surfaces */
  --paper:#F7F7F6;
  --surface:#FFFFFF;
  --surface-2:#EFEFEE;

  /* graphite scale */
  --graphite-950:#191A1C;
  --graphite-900:#1F2124;
  --graphite-800:#26282B;
  --graphite-700:#34373B;

  /* ink */
  --ink:#1C1D1F;
  --muted:#5C5F63;
  --on-dark:#E9E9E8;
  --on-dark-mute:#A6A8AB;

  /* single accent. The accent and the button fill carry different contrast
     duties: --brass only ever draws rules and icons (3:1 as a graphic), while
     --brass-btn is a filled surface under white label text and so has to be
     darker to clear 4.5:1. */
  --brass:#9C7C4A;
  --brass-btn:#886C41;        /* white on this: 4.92:1 */
  --brass-btn-hover:#755C37;
  --brass-ink:#6F5628;   /* small text on light */
  --brass-lite:#C4A265;  /* on graphite */

  --line:#E2E2E0;
  --line-dark:#2E3134;

  --r:4px;
  --r-lg:10px;

  --wrap:1240px;
  /* Two curves, each for a different job.
     --ease is the expo-out used for hover and small state changes: it snaps
     away quickly, which reads as responsive on a control you just touched.
     That same snap reads as abrupt on a large element drifting into view, so
     entrances use --ease-in-view, a gentle ease-out-cubic that keeps moving
     through most of its travel and settles rather than braking. */
  --ease:cubic-bezier(.33,1,.68,1);
  --ease-in-view:cubic-bezier(.25,.55,.3,1);

  --shadow:0 1px 2px rgba(20,21,23,.05), 0 12px 32px -12px rgba(20,21,23,.15);
  --shadow-lg:0 2px 4px rgba(20,21,23,.06), 0 28px 60px -20px rgba(20,21,23,.24);
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#131416;
    --surface:#1A1C1E;
    --surface-2:#212326;
    --ink:#EDEDEC;
    --muted:#A3A6A9;
    --brass:#C4A265;
    /* On graphite the brass is light enough to carry dark label text, so the
       button fill brightens here rather than darkening. */
    --brass-btn:#C4A265;
    --brass-btn-hover:#D4B67F;
    --brass-ink:#D4B67F;
    --line:#2E3134;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.5);
    --shadow-lg:0 2px 4px rgba(0,0,0,.35), 0 28px 60px -20px rgba(0,0,0,.6);
  }
}

/* --------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
/* color-scheme מודיע לדפדפן ששני המצבים נתמכים. בלעדיו רשימת הבחירה
   הנפתחת, פסי הגלילה ותיבת הסימון נשארים בהירים במצב כהה, כי אלה
   פקדי מערכת שה-CSS של העמוד אינו צובע. */
html{color-scheme:light dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.75 Assistant,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
a,button,summary,label,select,[role=button]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-family:Rubik,"Segoe UI",system-ui,sans-serif;font-weight:700;line-height:1.18;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* ה-viewport מוגדר viewport-fit=cover, ולכן העמוד נמשך אל מתחת למגרעת
   ולפינות המעוגלות במכשירי אייפון. הריפוד הזה מרחיק ממנו את התוכן,
   ובעיקר במצב לרוחב שבו המגרעת נמצאת בצד. */
.wrap{
  width:min(100% - 40px,var(--wrap));margin-inline:auto;
  padding-right:max(0px,env(safe-area-inset-right));
  padding-left:max(0px,env(safe-area-inset-left));
}
.ic{width:1.25em;height:1.25em;flex:none;fill:currentColor}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:fixed;inset-block-start:-100px;inset-inline-start:16px;z-index:100;
  padding:12px 20px;background:var(--graphite-950);color:#fff;border-radius:var(--r);
  transition:inset-block-start .2s var(--ease);
}
.skip:focus{inset-block-start:16px}

/* --------------------------------------------------------------- type */
.h2{
  font-size:clamp(1.75rem,1.2rem + 2.1vw,2.6rem);
  letter-spacing:-.015em;
}
.lead{font-size:1.185rem;line-height:1.7;color:var(--ink);font-weight:600}
.sec-head{max-width:60ch;margin-bottom:clamp(36px,5vw,60px)}
.sec-head p{margin-top:14px;color:var(--muted);font-size:1.06rem}
.sec-head--c{margin-inline:auto;text-align:center}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border:1px solid transparent;border-radius:var(--r);
  font-weight:600;font-size:1rem;white-space:nowrap;cursor:pointer;
  transition:background-color .22s var(--ease),border-color .22s var(--ease),
             color .22s var(--ease),transform .12s var(--ease),box-shadow .22s var(--ease);
}
.btn--sm{padding:10px 18px;font-size:.94rem}
.btn--full{width:100%}
.btn:active{transform:translateY(1px)}

.btn--brass{background:var(--brass-btn);color:#fff;box-shadow:0 8px 22px -12px rgba(136,108,65,.85)}
.btn--brass:hover{background:var(--brass-btn-hover);box-shadow:0 12px 26px -12px rgba(136,108,65,.9)}
@media (prefers-color-scheme:dark){ .btn--brass{color:#17140E} }

.btn--ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.btn--onDark{border-color:rgba(255,255,255,.28);color:#fff}
.btn--onDark:hover{border-color:#fff;background:rgba(255,255,255,.09)}

/* --------------------------------------------------------------- header */
.hdr{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.hdr[data-stuck]{border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:28px;height:72px}

.brand{display:flex;flex-direction:column;line-height:1.2;margin-inline-end:auto}
.brand__name{font-family:Rubik,"Segoe UI",system-ui,sans-serif;font-weight:700;font-size:1.14rem;letter-spacing:-.01em}
.brand__role{font-size:.88rem;color:var(--brass-ink);font-weight:600;letter-spacing:.02em}

.nav{display:flex;gap:23px;font-size:.97rem;font-weight:600}
.nav a{position:relative;padding-block:6px;color:var(--muted);transition:color .2s var(--ease)}
.nav a::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1.5px;
  background:var(--brass);transform:scaleX(0);transform-origin:inline-end;
  transition:transform .3s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1);transform-origin:inline-start}

.burger{
  display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:6px;
}
.burger span{width:22px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

.mnav{display:none;flex-direction:column;padding:8px 20px 22px;border-top:1px solid var(--line)}
.mnav a{padding:14px 0;font-weight:600;border-bottom:1px solid var(--line)}
.mnav a:last-child{border-bottom:0}

/* התפריט מתקפל ב־1000 ולא ב־940: לאחר הוספת ״שאלות נפוצות״ שש הכותרות
   נצמדות לכפתור ההנעה לפעולה ברוחבים הצרים של דסקטופ. */
@media (max-width:1000px){
  .nav,.hdr__cta{display:none}
  .burger{display:flex}
  .mnav:not([hidden]){display:flex}
}

/* --------------------------------------------------------------- hero */
.hero{position:relative;background:var(--graphite-950);color:var(--on-dark);overflow:hidden}
.hero__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(90% 65% at 22% 8%, rgba(52,55,59,.60), transparent 62%),
    radial-gradient(60% 55% at 88% 100%, rgba(156,124,74,.15), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 1px, transparent 1px 74px);
}
.hero__in{
  position:relative;
  display:grid;grid-template-columns:1.15fr .85fr;
  align-items:center;gap:clamp(32px,5vw,72px);
  padding-block:clamp(56px,8vw,88px) clamp(64px,9vw,104px);
  min-height:min(88vh,760px);
}
.hero__h1{margin-bottom:22px}
/* The professional title carries real weight next to the name, so it is set
   as a subtitle rather than a micro label. Tracking eases off as the size
   grows: the wide spacing that suits a small caption looks loose at this
   scale. */
.hero__pre{
  display:block;font-family:Assistant,sans-serif;font-weight:600;
  font-size:clamp(1.1rem,.95rem + .62vw,1.5rem);
  letter-spacing:.06em;color:var(--brass-lite);margin-bottom:14px;
}
.hero__name{
  display:block;color:#fff;
  font-size:clamp(2.5rem,1.5rem + 4.4vw,4.35rem);
  line-height:1.06;letter-spacing:-.025em;
}
/* 34ch broke this sentence over three short lines that each ended mid-phrase.
   42ch holds it to two and lets them break where the meaning does. */
.hero__sub{
  max-width:42ch;font-size:clamp(1.06rem,1rem + .35vw,1.28rem);
  line-height:1.65;color:var(--on-dark-mute);text-wrap:pretty;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* Fades in on load with opacity only. Transform is left free for the scroll
   parallax further down, so the two never compete for the same property. */
.hero__fig{
  position:relative;margin:0;justify-self:center;
}
.hero__fig::before{
  content:"";position:absolute;inset:-14px;border:1px solid rgba(196,162,101,.42);
  border-radius:var(--r-lg);
}
.hero__fig img{
  width:min(100%,500px);aspect-ratio:1/1;object-fit:cover;object-position:50% 22%;
  border-radius:var(--r-lg);
  box-shadow:0 40px 80px -32px rgba(0,0,0,.7);
}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;text-align:center;min-height:0;padding-block:44px 60px}
  .hero__fig{order:-1;margin-bottom:8px}
  .hero__fig img{width:min(80vw,340px)}
  .hero__sub{margin-inline:auto}
  .hero__cta{justify-content:center}
}

/* --------------------------------------------------------------- trust */
.trust{background:var(--graphite-900);color:var(--on-dark);border-top:1px solid var(--line-dark)}
/* Only one of these four is a number. Giving the years their own wider cell
   sets them up as the band's anchor and lets the other three read as what they
   are, which is labels. Sized as near-equals they only looked like statistics
   whose figures had gone missing. */
.trust__grid{display:grid;grid-template-columns:.85fr 1fr 1fr 1fr}
.trust__it{
  padding:clamp(28px,3.6vw,42px) clamp(16px,2vw,30px);
  border-inline-start:1px solid var(--line-dark);
}
.trust__it:first-child{border-inline-start:0}
.trust__k{
  display:block;font-family:Rubik,"Segoe UI",system-ui,sans-serif;font-weight:700;
  font-size:clamp(2.1rem,1.4rem + 2.6vw,3.1rem);line-height:1;color:#fff;letter-spacing:-.02em;
}
.trust__k em{font-style:normal;color:var(--brass-lite)}
.trust__k--w{
  font-size:clamp(1.08rem,.98rem + .42vw,1.28rem);line-height:1.35;
  font-family:Assistant,"Segoe UI",system-ui,sans-serif;font-weight:600;
  letter-spacing:0;color:var(--brass-lite);
}
.trust__v{display:block;margin-top:12px;font-size:.97rem;color:var(--on-dark-mute);line-height:1.5}
.trust__k--w + .trust__v{margin-top:9px}

@media (max-width:860px){
  .trust__grid{grid-template-columns:repeat(2,1fr)}
  .trust__it:nth-child(-n+2){border-block-end:1px solid var(--line-dark)}
  .trust__it:nth-child(odd){border-inline-start:0}
}
@media (max-width:480px){
  .trust__grid{grid-template-columns:1fr}
  .trust__it{border-inline-start:0;border-block-end:1px solid var(--line-dark)}
  .trust__it:last-child{border-block-end:0}
}

/* --------------------------------------------------------------- about */
.about{padding-block:clamp(64px,8.5vw,112px)}
.about__in{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,5vw,76px);align-items:start}

.about__photo{margin:0}
.about__photo img{border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}

.cert{
  display:flex;gap:16px;align-items:center;width:100%;margin-top:22px;padding:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  text-align:start;cursor:pointer;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.cert:hover{border-color:var(--brass);box-shadow:var(--shadow);transform:translateY(-2px)}
.cert img{width:86px;height:115px;object-fit:contain;background:var(--surface-2);border-radius:var(--r);flex:none}
.cert__cap{font-size:.95rem;font-weight:600;line-height:1.45}
.cert__cap em{display:block;margin-top:4px;font-style:normal;font-weight:400;font-size:.86rem;color:var(--muted)}

.about__copy p + p{margin-top:18px}
.about__copy .h2{margin-bottom:22px}
.about__copy .lead + p{margin-top:20px}
.about__copy p:not(.lead){color:var(--muted)}

.ticks{margin-top:30px;display:grid;gap:13px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-weight:600;font-size:1.01rem}
.ticks .ic{color:var(--brass);margin-top:.28em}

@media (max-width:900px){ .about__in{grid-template-columns:1fr} }

/* --------------------------------------------------------------- areas */
.areas{padding-block:clamp(64px,8.5vw,112px);background:var(--surface-2)}
.areas__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.9vw,24px)}

.area{
  position:relative;padding:clamp(24px,2.6vw,34px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease),transform .28s var(--ease);
}
.area::before{
  content:"";position:absolute;inset-block-start:-1px;inset-inline:24px;height:2px;
  background:var(--brass);border-radius:0 0 2px 2px;
  transform:scaleX(0);transform-origin:inline-end;transition:transform .35s var(--ease);
}
.area:hover{border-color:color-mix(in srgb,var(--brass) 45%,var(--line));box-shadow:var(--shadow);transform:translateY(-3px)}
.area:hover::before{transform:scaleX(1);transform-origin:inline-start}
.area__ic{width:30px;height:30px;color:var(--brass);margin-bottom:18px}
.area h3{font-size:1.32rem;margin-bottom:10px}
.area > p{color:var(--muted);font-size:1rem;line-height:1.68}

.area details{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.area summary{
  display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  font-weight:600;font-size:.95rem;color:var(--brass-ink);
}
.area summary::-webkit-details-marker{display:none}
.area summary::after{
  content:"";width:7px;height:7px;border-inline-start:1.6px solid currentColor;
  border-block-end:1.6px solid currentColor;transform:rotate(-45deg);
  transition:transform .3s var(--ease);margin-block-start:-3px;
}
.area details[open] summary::after{transform:rotate(135deg);margin-block-start:2px}
.area details p{margin-top:12px;color:var(--muted);font-size:.96rem;line-height:1.7}

@media (max-width:920px){ .areas__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .areas__grid{grid-template-columns:1fr} }

/* --------------------------------------------------------------- why */
.why{padding-block:clamp(64px,8.5vw,112px)}
.why__in{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(36px,5vw,80px);align-items:start}
.why__head{position:sticky;top:104px}
.why__head .h2{font-size:clamp(1.55rem,1.05rem + 1.9vw,2.25rem);line-height:1.3;margin-bottom:28px}

.why__list{counter-reset:w}
.why__list li{
  counter-increment:w;position:relative;
  padding:26px 0 26px 0;padding-inline-start:66px;
  border-block-end:1px solid var(--line);
}
.why__list li:first-child{padding-top:0}
.why__list li:last-child{border-block-end:0;padding-bottom:0}
.why__list li::before{
  content:counter(w,decimal-leading-zero);
  position:absolute;inset-inline-start:0;inset-block-start:26px;
  font-family:Rubik,"Segoe UI",system-ui,sans-serif;font-size:1.6rem;font-weight:700;
  color:var(--brass);opacity:.5;line-height:1;
}
.why__list li:first-child::before{inset-block-start:0}
.why__list h3{font-size:1.24rem;margin-bottom:7px}
.why__list p{color:var(--muted);font-size:1.01rem}

@media (max-width:900px){
  .why__in{grid-template-columns:1fr}
  .why__head{position:static}
}

/* --------------------------------------------------------------- press */
.press{padding-block:clamp(64px,8.5vw,112px);background:var(--surface-2)}
.press__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.9vw,24px)}

/* כרטיסי הכתבות הם טקסט בלבד. התמונות שהיו כאן היו עותקים של צילומי
   mako, שרכשה אותם ברישיון לשימושה שלה; העברת רישיון כזה אינה קורית
   מעצמה, ולכן הן הוסרו. הכותרת של הכתבה עושה את העבודה גם בלעדיהן, ובלי
   התמונה גם ברור יותר שהמשרד מפנה לכתבה ולא מארח אותה. הקו העליון בפליז
   מחליף את התמונה כעוגן חזותי, באותו ניב של כרטיסי תחומי העיסוק. */
.pcard__lk{
  position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease),transform .28s var(--ease);
}
.pcard__lk::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:22px;height:2px;
  background:var(--brass);border-radius:0 0 2px 2px;
  transform:scaleX(0);transform-origin:inline-end;transition:transform .35s var(--ease);
}
.pcard__lk:hover{border-color:color-mix(in srgb,var(--brass) 45%,var(--line));box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.pcard__lk:hover::before{transform:scaleX(1);transform-origin:inline-start}

.pcard__body{display:flex;flex-direction:column;flex:1;padding:clamp(24px,2.6vw,32px);gap:11px}
.pcard__meta{display:flex;align-items:center;gap:9px;font-size:.8rem;font-weight:600;letter-spacing:.05em;color:var(--brass-ink)}
.pcard__meta i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55}
.pcard__h{font-family:Rubik,"Segoe UI",system-ui,sans-serif;font-weight:700;font-size:1.19rem;line-height:1.35}
.pcard__d{color:var(--muted);font-size:.97rem;line-height:1.62;flex:1}
.pcard__go{display:flex;align-items:center;gap:7px;font-weight:600;font-size:.95rem;color:var(--brass-ink);margin-top:4px}
.pcard__go .ic{width:1.05em;height:1.05em;transition:transform .3s var(--ease)}
.pcard__lk:hover .pcard__go .ic{transform:translateX(-4px)}

.feature{
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(20px,2.6vw,34px);align-items:center;
  width:100%;max-width:900px;margin:clamp(20px,2.6vw,28px) auto 0;padding:clamp(20px,2.4vw,28px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  text-align:start;cursor:pointer;
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease);
}
.feature:hover{border-color:color-mix(in srgb,var(--brass) 45%,var(--line));box-shadow:var(--shadow)}
.feature__media img{width:100%;border-radius:var(--r);box-shadow:var(--shadow)}
.feature__body{display:flex;flex-direction:column;gap:11px}
.feature__h{font-family:Rubik,"Segoe UI",system-ui,sans-serif;font-weight:700;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
.feature__d{color:var(--muted);font-size:1.01rem;line-height:1.66;max-width:56ch}
.feature__go{display:flex;align-items:center;gap:7px;font-weight:600;font-size:.95rem;color:var(--brass-ink)}
.feature__go .ic{width:1.05em;height:1.05em;transition:transform .3s var(--ease)}
.feature:hover .feature__go .ic{transform:translateX(-4px)}

@media (max-width:920px){ .press__grid{grid-template-columns:1fr} }
@media (max-width:620px){ .feature{grid-template-columns:1fr}.feature__media img{max-width:220px} }

/* --------------------------------------------------------------- voices */
.voices{padding-block:clamp(64px,8.5vw,112px)}
.voices__kicker{
  font-family:Rubik,"Segoe UI",system-ui,sans-serif;font-size:clamp(1.1rem,.95rem + .7vw,1.4rem);
  color:var(--ink);font-weight:500;line-height:1.55;
}
/* Four cards, one shape: the letter, the line pulled from it, the source.
   The previous version paired two quote cards against two image tiles, which
   put two different components in one grid and shrank the letters in the top
   row to a 104px strip nobody could read. */
.voices__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.9vw,22px);align-items:stretch}

.voice{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:0;margin:0;overflow:hidden;
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease),transform .28s var(--ease);
}
.voice:hover{border-color:color-mix(in srgb,var(--brass) 45%,var(--line));box-shadow:var(--shadow);transform:translateY(-3px)}

/* One 4:3 window per card, so a portrait card and a landscape screenshot line
   up across the grid. `contain` because the letters are shown whole: the words
   are the point, and cropping one to fill the frame would cut them. */
.voice__shot{
  display:block;width:100%;padding:0;border:0;cursor:pointer;
  background:var(--surface-2);border-block-end:1px solid var(--line);
  overflow:hidden;
}
.voice__shot img{
  width:100%;aspect-ratio:4/3;object-fit:contain;
  transition:transform .6s var(--ease);
}
.voice:hover .voice__shot img{transform:scale(1.04)}

.voice blockquote{
  margin:0;padding:clamp(20px,2.2vw,26px) clamp(20px,2.2vw,26px) 0;
  font-family:Rubik,"Segoe UI",system-ui,sans-serif;font-weight:500;
  font-size:clamp(1.05rem,.96rem + .5vw,1.26rem);line-height:1.55;letter-spacing:-.01em;
}
.voice blockquote::before{
  content:"„";display:block;font-size:2.4rem;line-height:.6;
  color:var(--brass);opacity:.55;margin-bottom:10px;
}
/* Pushed to the card floor so the source lines agree across a row even when
   one quote runs a line longer than its neighbour. */
.voice figcaption{
  margin-top:auto;padding:14px clamp(20px,2.2vw,26px) clamp(20px,2.2vw,26px);
  font-size:.88rem;color:var(--muted);line-height:1.5;
}

.voices__note{
  margin-top:clamp(26px,3vw,36px);text-align:center;font-size:.88rem;color:var(--muted);
  max-width:62ch;margin-inline:auto;line-height:1.65;
}

@media (max-width:620px){ .voices__grid{grid-template-columns:1fr} }

/* --------------------------------------------------------------- band */
.band{position:relative;background:var(--graphite-950);color:#fff;overflow:hidden}
.band::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 100% at 84% 0%, rgba(52,55,59,.62), transparent 65%),
    radial-gradient(50% 90% at 12% 100%, rgba(156,124,74,.14), transparent 70%);
}
.band__in{position:relative;text-align:center;padding-block:clamp(56px,7.5vw,96px);max-width:840px}
.band__h{font-size:clamp(1.6rem,1.15rem + 2.1vw,2.6rem);line-height:1.3;letter-spacing:-.015em}
.band__p{margin-top:20px;color:var(--on-dark-mute);font-size:1.08rem;line-height:1.7;max-width:56ch;margin-inline:auto}
.band__cta{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:34px}

/* --------------------------------------------------------------- contact */
.contact{padding-block:clamp(64px,8.5vw,112px)}
.contact__in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,72px);align-items:start}
.contact__aside .h2{margin-bottom:18px}
.contact__aside > p{color:var(--muted);max-width:44ch}

.det{margin-top:34px;display:grid;gap:22px}
.det li{display:flex;gap:14px;align-items:flex-start}
.det .ic{color:var(--brass);margin-top:.3em;width:1.3em;height:1.3em}
.det b{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--muted);margin-bottom:3px}
.det span{font-size:1.03rem;line-height:1.55}
.det a{font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--brass) 55%,transparent);transition:border-color .2s}
.det a:hover{border-bottom-color:var(--brass)}

.form{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,38px);display:grid;gap:18px;box-shadow:var(--shadow);
}
.f{display:grid;gap:8px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f label,.chk span{font-size:.94rem;font-weight:600}
.f input,.f select,.f textarea{
  width:100%;padding:13px 15px;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);
  font:inherit;font-size:1rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.f textarea{resize:vertical;min-height:110px;line-height:1.6}
.f input:hover,.f select:hover,.f textarea:hover{border-color:color-mix(in srgb,var(--ink) 28%,var(--line))}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--brass);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brass) 22%,transparent);
}
.f input[aria-invalid=true],.f select[aria-invalid=true]{border-color:#B4341F}

.sel{position:relative}
.sel select{appearance:none;padding-inline-end:44px;background-color:var(--surface);color:var(--ink)}
.sel .ic{position:absolute;inset-inline-end:15px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted);width:1.05em;height:1.05em}

.hint{font-size:.85rem;color:var(--muted);line-height:1.5}
.err{font-size:.85rem;font-weight:600;color:#B4341F}
@media (prefers-color-scheme:dark){ .err{color:#F09B8A} }

.chk{display:flex;gap:11px;align-items:flex-start;cursor:pointer;line-height:1.5}
.chk input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--brass);cursor:pointer}
.chk span{font-weight:400;font-size:.95rem;color:var(--muted)}

.btn[data-submit][data-busy]{opacity:.72;pointer-events:none}
.form__status{
  padding:13px 16px;border-radius:var(--r);font-size:.95rem;font-weight:600;line-height:1.55;
  background:color-mix(in srgb,var(--brass) 12%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--brass) 40%,transparent);
}
.form__status[data-tone=err]{
  background:color-mix(in srgb,#B4341F 10%,var(--surface-2));
  border-color:color-mix(in srgb,#B4341F 40%,transparent);
}
.form__link{
  color:var(--brass-ink);white-space:nowrap;
  border-bottom:1px solid color-mix(in srgb,var(--brass) 60%,transparent);
  transition:border-color .2s var(--ease);
}
.form__link:hover{border-bottom-color:var(--brass)}
.form__legal{font-size:.83rem;color:var(--muted);line-height:1.6}

@media (max-width:900px){ .contact__in{grid-template-columns:1fr} }
@media (max-width:520px){ .f-row{grid-template-columns:1fr} }

/* --------------------------------------------------------------- faq
   רשימת שאלות ותשובות. אותה שפה של האקורדיון בכרטיסי תחומי העיסוק, אבל
   ברוחב שורה אחת: השאלות נסרקות בעין אנכית, וכל תשובה נפתחת במקומה.
   הסימון המובנה FAQPage שבתחתית index.html משקף בדיוק את הטקסט כאן.
   אם משנים שאלה או תשובה, יש לעדכן גם שם.                             */
.faq{padding-block:clamp(64px,8.5vw,112px);background:var(--surface-2)}
.faq__list{
  max-width:900px;
  border-block-start:1px solid var(--line);
}

.qa{border-block-end:1px solid var(--line)}
/* Rows are a touch target before they are a list. The extra block padding
   clears 48px comfortably on a phone and gives the eight questions room to
   read as a sequence rather than as a ruled table. */
.qa summary{
  display:flex;align-items:flex-start;gap:16px;cursor:pointer;list-style:none;
  padding-block:clamp(22px,2.4vw,30px);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{
  flex:1;font-size:clamp(1.04rem,.98rem + .3vw,1.18rem);line-height:1.5;
  font-weight:600;letter-spacing:-.005em;
  transition:color .22s var(--ease);
}
.qa summary:hover h3,
.qa[open] summary h3{color:var(--brass-ink)}

/* סימן הפלוס. שני קווים, האנכי נעלם בפתיחה ונשאר מינוס. */
.qa__sign{
  position:relative;flex:none;width:16px;height:16px;margin-block-start:6px;
  color:var(--brass);
}
.qa__sign::before,
.qa__sign::after{
  content:"";position:absolute;inset-block-start:50%;inset-inline-start:0;
  width:100%;height:1.6px;background:currentColor;border-radius:1px;
  transform:translateY(-50%);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.qa__sign::after{transform:translateY(-50%) rotate(90deg)}
.qa[open] .qa__sign::after{transform:translateY(-50%) rotate(0deg);opacity:0}

/* 32px = רוחב סימן הפלוס ועוד המרווח שאחריו. התשובה מתיישרת בדיוק
   מתחת לטקסט השאלה ולא מתחת לסימן. */
.qa__a{padding-block-end:clamp(20px,2.2vw,28px);padding-inline-start:32px;max-width:72ch}
.qa__a p{color:var(--muted);font-size:1rem;line-height:1.78}

/* אנימציית פתיחה, רק היכן שנתמכת. ללא תמיכה התשובה פשוט מופיעה. */
@supports (interpolate-size:allow-keywords){
  .faq__list{interpolate-size:allow-keywords}
  .qa::details-content{
    block-size:0;overflow:hidden;opacity:0;
    transition:block-size .34s var(--ease-in-view),opacity .26s var(--ease),content-visibility .34s allow-discrete;
  }
  .qa[open]::details-content{block-size:auto;opacity:1}
}

@media (max-width:620px){
  .qa__a{padding-inline-start:0}
}

@media (prefers-reduced-motion:reduce){
  .qa summary h3,.qa__sign::before,.qa__sign::after{transition:none}
  @supports (interpolate-size:allow-keywords){
    .qa::details-content{transition:none}
  }
}

/* --------------------------------------------------------------- footer */
.ftr{background:var(--graphite-950);color:var(--on-dark);padding-block:clamp(48px,6vw,72px) 0}
.ftr__in{
  display:grid;grid-template-columns:1.4fr .8fr 1fr;
  gap:clamp(28px,4vw,56px);align-items:start;
}
.ftr__name{font-family:Rubik,"Segoe UI",system-ui,sans-serif;font-weight:700;font-size:1.28rem;color:#fff}
.ftr__areas{margin-top:14px;color:var(--on-dark-mute);font-size:.94rem;line-height:1.9}
.ftr__areas i{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--brass-lite);margin-inline:10px;vertical-align:middle}
.ftr__served{margin-top:12px;color:var(--on-dark-mute);font-size:.88rem;line-height:1.7;max-width:44ch;opacity:.82}

.ftr__nav{display:grid;gap:11px;font-size:.97rem}
.ftr__nav a{color:var(--on-dark-mute);transition:color .2s var(--ease)}
.ftr__nav a:hover{color:#fff}

.ftr__det{display:grid;gap:11px;font-size:.97rem;color:var(--on-dark-mute)}
.ftr__det a{transition:color .2s var(--ease)}
.ftr__det a:hover{color:var(--brass-lite)}

.ftr__base{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px 28px;
  justify-content:space-between;align-items:center;
  margin-top:clamp(34px,4vw,52px);padding-block:24px;
  border-top:1px solid var(--line-dark);font-size:.88rem;color:var(--on-dark-mute);
}
.ftr__legal{display:flex;gap:22px}
.ftr__legal a{border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.ftr__legal a:hover{color:#fff;border-bottom-color:var(--brass-lite)}

@media (max-width:820px){ .ftr__in{grid-template-columns:1fr} }

/* --------------------------------------------------------------- fab */
.fab{
  position:fixed;z-index:45;
  /* פס הבית של האייפון עובר בדיוק כאן, ולכן המרחק מהתחתית נמדד ממנו. */
  bottom:calc(22px + env(safe-area-inset-bottom));
  inset-inline-start:calc(22px + max(0px,env(safe-area-inset-left)));
  width:56px;height:56px;display:grid;place-items:center;
  background:#1E6E52;color:#fff;border-radius:50%;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.5);
  transition:transform .25s var(--ease),background-color .25s var(--ease);
}
.fab .ic{width:27px;height:27px}
.fab:hover{transform:translateY(-3px) scale(1.04);background:#248262}
@media (max-width:520px){
  .fab{
    width:52px;height:52px;
    bottom:calc(16px + env(safe-area-inset-bottom));
    inset-inline-start:calc(16px + max(0px,env(safe-area-inset-left)));
  }
}

/* --------------------------------------------------------------- lightbox */
.lb{
  width:min(94vw,1000px);max-width:none;max-height:92vh;
  overscroll-behavior:contain;
  padding:0;border:0;border-radius:var(--r-lg);background:var(--surface);
  color:var(--ink);overflow:hidden;box-shadow:0 40px 100px -30px rgba(0,0,0,.6);
}
.lb::backdrop{background:rgba(12,13,14,.85);backdrop-filter:blur(4px)}
.lb__img{width:100%;max-height:calc(92vh - 78px);object-fit:contain;background:var(--surface-2)}
.lb__cap{padding:16px 22px;font-size:.94rem;color:var(--muted);line-height:1.55;text-align:center}
.lb__x{
  position:absolute;inset-block-start:12px;inset-inline-end:12px;
  width:40px;height:40px;display:grid;place-items:center;
  background:rgba(25,26,28,.75);color:#fff;border:0;border-radius:50%;cursor:pointer;
  transition:background-color .2s var(--ease);
}
.lb__x:hover{background:rgba(25,26,28,.95)}

/* --------------------------------------------------------------- motion */
.stagger{animation:up 1s var(--ease-in-view) both;animation-delay:var(--d,0ms)}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* The hero headline and portrait are the LCP candidates. A fully transparent
   element is disqualified from LCP, so an opacity fade on them pushes the
   measured LCP onto whatever is already opaque (it was the header logo).
   These animate on transform only. */
.stagger--solid{animation-name:upSolid}
@keyframes upSolid{from{transform:translateY(14px)}to{transform:none}}

/* Shorter travel over a longer duration reads as calmer than the reverse.
   Opacity finishes ahead of the movement so the element is already legible
   while it settles, which removes the "sliding text" feel.

   The stagger is a CSS delay driven by --i rather than a JS timer: the browser
   schedules every sibling off the same frame, so a row of cards steps evenly
   instead of drifting by whatever the timer queue happened to do. */
.reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .75s var(--ease-in-view), transform 1.05s var(--ease-in-view);
  transition-delay:calc(var(--i,0) * 90ms);
}
.reveal[data-in]{opacity:1;transform:none}

/* Opacity only. No travel, no wipe: the element simply resolves in place. */
.reveal--fade{transform:none;transition:opacity 1.1s var(--ease-in-view)}

/* Photography arrives as a wipe rather than a fade. Transform stays free so
   the hero parallax below can own it without the two fighting.

   The clip sits on the children, never on the observed element itself: a
   clip-path of zero area collapses the element's intersection rectangle, so
   IntersectionObserver would never fire and the wipe would never open. */
.reveal--wipe{opacity:1;transform:none}
.reveal--wipe > *{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.25s var(--ease-in-view);
  transition-delay:calc(var(--i,0) * 90ms);
}
.reveal--wipe[data-in] > *{clip-path:inset(0 0 0 0)}

/* A short brass rule draws under each section heading as it arrives, so the
   section reads as a deliberate arrival instead of a scroll accident. */
.sec-head .h2::after{
  content:"";display:block;width:54px;height:2px;margin-top:20px;
  background:var(--brass);
  transform:scaleX(0);transform-origin:right center;
  transition:transform .95s var(--ease-in-view) .2s;
}
.sec-head--c .h2::after{margin-inline:auto;transform-origin:center}
.sec-head[data-in] .h2::after{transform:scaleX(1)}

/* The counted number must not reflow the row while it ticks up. */
.trust__k [data-count]{display:inline-block;min-width:1.9ch;text-align:center;font-variant-numeric:tabular-nums}

/* Reading progress, riding the header's bottom edge. Grows right to left. */
.progress{
  position:absolute;inset-block-end:-1px;inset-inline:0;height:2px;
  background:linear-gradient(to left,var(--brass),var(--brass-lite));
  transform:scaleX(0);transform-origin:right center;
  opacity:0;transition:opacity .4s var(--ease);pointer-events:none;
}
.hdr[data-stuck] .progress{opacity:1}
@keyframes progressGrow{to{transform:scaleX(1)}}

/* ---- native scroll-driven layer -------------------------------------------
   Progressive enhancement. Browsers without scroll timelines simply keep the
   IntersectionObserver reveals above and lose nothing but the parallax.
   These run on the compositor, so they cost no main-thread work.            */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .progress{animation:progressGrow linear both;animation-timeline:scroll(root block)}
  }

  @supports (animation-timeline:scroll()){
    /* Portrait, copy and backdrop drift at three different rates over the
       first screen of scroll, which reads as depth. Driven by page scroll
       rather than view() so the movement starts from the very first pixel.
       The figure keeps its load fade, so both animations are listed together
       with a timeline each: the shorthand alone would drop the first. */
    .hero__fig{animation:driftFar linear both;animation-timeline:scroll(root block);animation-range:0 82vh}
    .hero__copy{animation:driftNear linear both;animation-timeline:scroll(root block);animation-range:0 82vh}
    .hero__bg{animation:bgSettle linear both;animation-timeline:scroll(root block);animation-range:0 82vh}

    /* The about photo is deliberately left un-animated. It sits still. */
  }
}
@keyframes driftFar{to{transform:translateY(-44px)}}
@keyframes driftNear{to{transform:translateY(-13px)}}
@keyframes bgSettle{to{transform:translateY(22px)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  .reveal--wipe > *{clip-path:none}
  .sec-head .h2::after{transform:scaleX(1)}
  .stagger,.hero__fig{animation:none}
  .progress{display:none}
}

@media print{
  .hdr,.fab,.band__cta,.form,.skip{display:none}
  body{background:#fff;color:#000}
}