/* ============================================================
   HADAS & ADAR — תבנית דף מדריך
   כל המשתנים העיצוביים מרוכזים כאן. לשכפול לדף מדריך חדש,
   מספיק להעתיק את התיקייה, להחליף תמונות וטקסטים ב-index.html
   ולא לגעת בקובץ הזה.
   ============================================================ */

:root{
  --bg:        #FFFFFF;   /* לבן */
  --bg-2:      #FFFFFF;   /* לבן */
  --ink:       #292824;   /* פחם כהה */
  --ink-soft:  #77736D;   /* אפור חם */
  --accent:    #77735F;   /* זית מעושן */
  --line:      #E4E0D8;   /* בז' אפרפר */

  --display: 'Heebo', system-ui, sans-serif;
  --body:    'Assistant', system-ui, sans-serif;

  --gutter: 24px;
  --max:    1380px;
  --measure: 62ch;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:20px;
  font-weight:400;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; width:100%; height:auto; }

h1,h2{
  font-family:var(--display);
  font-weight:300;
  line-height:1.2;
  letter-spacing:-0.01em;
  margin:0;
}

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.measure{ max-width:var(--measure); }

.eyebrow{
  font-family:var(--display);
  font-size:14px;
  font-weight:400;
  letter-spacing:.22em;
  color:var(--accent);
  margin:0 0 20px;
  line-height:1.6;
}

/* ---------- כפתורים ---------- */
.btn{
  display:inline-block;
  font-family:var(--display);
  font-size:16px;
  font-weight:400;
  letter-spacing:.09em;
  color:var(--ink);
  text-decoration:none;
  padding:18px 42px;
  border:1px solid var(--ink);
  background:transparent;
  cursor:pointer;
  transition:background .4s ease, color .4s ease;
}
.btn:hover{ background:var(--ink); color:var(--bg); }

.btn--ghost{ border-color:var(--line); color:var(--ink-soft); }
.btn--ghost:hover{ background:var(--accent); border-color:var(--accent); color:var(--bg-2); }

/* ---------- כותרת עליונה ---------- */
.topbar{
  padding:40px var(--gutter);
  text-align:center;
  border-bottom:1px solid var(--line);
}
.topbar__logo{ width:215px; margin:0 auto; mix-blend-mode:multiply; }

/* ---------- HERO ---------- */
.hero__media img{
  width:100%;
  height:58vh;
  min-height:340px;
  object-fit:cover;
  object-position:center 62%;
}
.hero__text{
  padding:48px var(--gutter) 60px;
  background:var(--bg);
}
.hero h1{
  font-size:clamp(42px, 10.5vw, 62px);
  margin-bottom:24px;
}
.hero__sub{
  font-size:23px;
  font-weight:300;
  color:var(--ink-soft);
  max-width:38ch;
  margin-bottom:36px;
  line-height:1.7;
}

/* ---------- פתיחה ---------- */
.intro{
  padding:60px var(--gutter);
  border-bottom:1px solid var(--line);
}
.intro p{
  font-size:22px;
  font-weight:300;
  color:var(--ink);
}

/* ---------- פתרונות ---------- */
.solutions{ background:var(--bg); }

.solution{
  padding:56px var(--gutter) 60px;
  border-bottom:1px solid var(--line);
}
.solution__media{ margin:0 0 34px; }
/* התמונות נשמרות בפרופורציה המקורית שלהן, בלי חיתוך */
.solution__media img{ height:auto; }

.num{
  display:block;
  font-family:var(--display);
  font-size:62px;
  font-weight:200;
  letter-spacing:.04em;
  color:var(--accent);
  line-height:1;
  margin-bottom:16px;
}
.solution h2{
  font-size:clamp(30px, 7.6vw, 38px);
  margin-bottom:22px;
}
.solution p{ color:var(--ink); font-weight:300; }

.note{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:18px;
  color:var(--ink-soft);
  line-height:1.75;
}
.note span{
  display:block;
  font-family:var(--display);
  font-size:13px;
  letter-spacing:.2em;
  color:var(--accent);
  margin-bottom:7px;
}

/* ---------- טיפ מהסטודיו ---------- */
.studio-tip{
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
}
.studio-tip__media img{ height:auto; }
.studio-tip__body{
  padding:48px var(--gutter) 60px;
  max-width:var(--measure);
}
.studio-tip h2{
  font-size:clamp(32px, 8vw, 44px);
  margin-bottom:26px;
}
.studio-tip p{ font-weight:300; color:var(--ink); }

/* ---------- צ'קליסט ---------- */
.checklist{
  background:var(--bg);
  border-top:1px solid var(--line);
}
.checklist__inner{
  padding:64px var(--gutter) 70px;
  max-width:720px;
  margin:0 auto;
}
.checklist h2{
  font-size:clamp(31px, 7.6vw, 40px);
  color:var(--ink);
  margin-bottom:14px;
}
.checklist__sub{
  color:var(--ink-soft);
  font-weight:300;
  font-size:19px;
  margin-bottom:38px;
}

.checklist__list{ list-style:none; margin:0; padding:0; }
.checklist__list li{ border-top:1px solid var(--line); }
.checklist__list li:last-child{ border-bottom:1px solid var(--line); }

.checklist__list label{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:19px 0;
  cursor:pointer;
}
.checklist__list input{
  position:absolute;
  opacity:0;
  width:1px; height:1px;
}
.box{
  flex:0 0 auto;
  width:24px; height:24px;
  margin-top:7px;
  border:1px solid #BDB8AE;
  position:relative;
  transition:border-color .3s ease, background .3s ease;
}
.box::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:10px; height:5px;
  border-right:1.5px solid var(--bg);
  border-bottom:1.5px solid var(--bg);
  transform:rotate(-50deg) scale(.6);
  transform-origin:center;
  opacity:0;
  transition:opacity .25s ease, transform .25s ease;
}
.checklist__list .txt{
  font-size:19.5px;
  font-weight:300;
  color:var(--ink);
  line-height:1.65;
  transition:color .3s ease;
}
input:checked ~ .box{ background:var(--accent); border-color:var(--accent); }
input:checked ~ .box::after{ opacity:1; transform:rotate(-50deg) scale(1); }
input:checked ~ .txt{ color:var(--ink-soft); }
input:focus-visible ~ .box{ outline:2px solid var(--accent); outline-offset:3px; }

.checklist__score{
  font-family:var(--display);
  font-size:16px;
  letter-spacing:.06em;
  color:var(--accent);
  margin:30px 0 34px;
  min-height:1.6em;
}
.checklist .btn--ghost{ color:var(--ink-soft); border-color:var(--line); }
.checklist .btn--ghost:hover{ background:var(--accent); border-color:var(--accent); color:var(--bg); }

/* ---------- סיום ---------- */
.outro{ background:var(--bg-2); }
.outro__media img{
  width:100%;
  height:50vh;
  min-height:300px;
  object-fit:cover;
  object-position:center 28%;
}
.outro__body{
  padding:52px var(--gutter) 76px;
  max-width:var(--measure);
}
.outro h2{
  font-size:clamp(29px, 7.2vw, 38px);
  margin-bottom:26px;
}
.outro p{ font-weight:300; color:var(--ink-soft); }

.sign{
  margin:40px 0 34px;
  padding-top:30px;
  border-top:1px solid var(--line);
}
.sign__name{
  display:block;
  font-family:var(--display);
  font-size:20px;
  font-weight:400;
  letter-spacing:.3em;
  color:var(--ink);
}
.sign__role{
  display:block;
  font-size:16px;
  letter-spacing:.06em;
  color:var(--ink-soft);
  margin-top:7px;
}

/* ---------- תג התאמה ---------- */
.fit{
  font-family:var(--display);
  font-size:13px;
  font-weight:400;
  letter-spacing:.14em;
  color:var(--accent);
  margin:0 0 14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  display:inline-block;
  line-height:1.6;
}
.fit--center{ display:block; margin-inline:auto; }

/* ---------- שאלון התאמה ---------- */
.quiz{
  background:var(--bg-2);
  border-top:1px solid var(--line);
}
.quiz__inner{
  padding:68px var(--gutter) 80px;
  max-width:var(--measure);
}
.quiz h2{
  font-size:clamp(28px, 7vw, 36px);
  margin-bottom:16px;
}
.quiz__sub{
  color:var(--ink-soft);
  font-weight:300;
  margin-bottom:34px;
}
.quiz__list{ list-style:none; margin:0 0 30px; padding:0; }
.quiz__list li{ border:1px solid var(--line); }
.quiz__list li + li{ margin-top:12px; }

.quiz__list button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
  text-align:start;
  font-family:var(--body);
  font-size:18px;
  font-weight:300;
  line-height:1.6;
  color:var(--ink);
  background:transparent;
  border:0;
  padding:19px 22px;
  cursor:pointer;
  transition:background .35s ease;
}
.quiz__list button:hover{ background:#F6F4F0; }

/* סימן הפתיחה: פלוס שמסתובב לקו אחד כשפתוח */
.quiz__mark{
  position:relative;
  flex:0 0 auto;
  width:16px; height:16px;
}
.quiz__mark::before,
.quiz__mark::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  background:var(--accent);
  transition:transform .35s ease, opacity .35s ease;
}
.quiz__mark::before{ width:16px; height:1px; }
.quiz__mark::after{ width:1px; height:16px; }
button[aria-expanded="true"] .quiz__mark::after{ transform:rotate(90deg); opacity:0; }

.quiz__list button[aria-expanded="true"]{ background:#F6F4F0; }

.quiz__a{
  padding:4px 22px 22px;
  border-top:1px solid var(--line);
  margin-top:-1px;
}
.quiz__label{
  display:block;
  font-family:var(--display);
  font-size:13px;
  letter-spacing:.2em;
  color:var(--accent);
  margin:18px 0 10px;
}
.quiz__a p{
  font-size:19px;
  font-weight:300;
  line-height:1.65;
  margin:0;
}

.quiz__note{
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.6;
  margin:0;
}

/* ---------- אזור השארת פרטים (שמור) ---------- */
.contact{
  background:var(--bg);
  border-top:1px solid var(--line);
}
.contact__inner{
  padding:72px var(--gutter) 88px;
  max-width:var(--measure);
}
.contact h2{
  font-size:clamp(29px, 7.2vw, 38px);
  margin-bottom:20px;
}
.contact__lead{
  font-weight:300;
  color:var(--ink-soft);
  margin-bottom:40px;
}
/* ---------- טופס ---------- */
.form{ margin-top:4px; }

.form__trap{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.form__row{ display:grid; gap:0; }

.form__field{ margin-bottom:26px; }
.form__field label{
  display:block;
  font-family:var(--display);
  font-size:14px;
  font-weight:400;
  letter-spacing:.08em;
  color:var(--ink);
  margin-bottom:10px;
}
.form__field label span{
  font-size:13px;
  letter-spacing:.04em;
  color:var(--ink-soft);
}

.form__field input,
.form__field textarea{
  display:block;
  width:100%;
  font-family:var(--body);
  font-size:19px;
  font-weight:300;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:0;
  padding:15px 16px;
  transition:border-color .3s ease;
  -webkit-appearance:none;
  appearance:none;
}
.form__field textarea{ resize:vertical; min-height:120px; }
.form__field input:focus,
.form__field textarea:focus{
  outline:none;
  border-color:var(--accent);
}
.form__field input[aria-invalid="true"],
.form__field textarea[aria-invalid="true"]{ border-color:#B2574B; }

.form__error{
  font-size:16px;
  color:#B2574B;
  margin:0 0 20px;
  line-height:1.6;
}

.form__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px 26px;
  margin-top:4px;
}
.form__actions .btn{ cursor:pointer; }
.form__alt{
  font-size:17px;
  font-weight:300;
  color:var(--ink-soft);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:3px;
  transition:color .3s ease, border-color .3s ease;
}
.form__alt:hover{ color:var(--ink); border-color:var(--accent); }

.form__note{
  font-size:15px;
  color:var(--ink-soft);
  line-height:1.6;
  margin:28px 0 0;
}

.form__done{
  border-top:1px solid var(--line);
  padding-top:34px;
}
.form__done-title{
  font-family:var(--display);
  font-size:clamp(24px, 6vw, 30px);
  font-weight:300;
  color:var(--ink);
  margin-bottom:10px;
}
.form__done p{ color:var(--ink-soft); font-weight:300; }

/* ---------- קרדיט צילום ---------- */
.credit{
  background:var(--bg);
  border-top:1px solid var(--line);
  padding:26px var(--gutter) 30px;
  text-align:center;
}
.credit p{
  font-family:var(--display);
  font-size:13px;
  font-weight:300;
  letter-spacing:.1em;
  color:var(--ink-soft);
  margin:0;
}
.credit span{ color:var(--ink); }

/* ---------- אנימציות גלילה עדינות ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   מסכים רחבים
   ============================================================ */
@media (min-width:860px){
  :root{ --gutter:64px; }
  body{ font-size:22px; }

  /* HERO: צילום רוחב מלא, כותרת בפס שמתחתיו */
  .hero__media img{ height:74vh; min-height:480px; }
  .hero__text{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    column-gap:clamp(48px, 6vw, 110px);
    max-width:var(--max);
    margin:0 auto;
    padding:66px var(--gutter) 90px;
  }
  .hero .eyebrow{ grid-column:1 / -1; }
  .hero h1{ grid-column:1; grid-row:2 / 4; align-self:start; font-size:clamp(54px, 5.4vw, 82px); }
  .hero__sub{ grid-column:2; grid-row:2; align-self:start; font-size:26px; max-width:28ch; margin-bottom:34px; }
  .hero .btn{ grid-column:2; grid-row:3; justify-self:start; align-self:start; }

  .intro{ padding:100px var(--gutter); }
  .intro .measure{ margin:0 auto; }
  .intro p{ font-size:26px; line-height:1.85; }

  /* פתרונות: לסירוגין */
  .solution{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(40px, 4.4vw, 76px);
    align-items:center;
    max-width:var(--max);
    margin:0 auto;
    padding:92px var(--gutter) 96px;
  }
  .solution__media{ margin:0; }
  .solution:nth-child(even) .solution__media{ grid-column:2; grid-row:1; }
  .solution__body{ max-width:58ch; }
  .num{ font-size:88px; margin-bottom:22px; }

  /* טיפ מהסטודיו: תמונה וטקסט זה לצד זה */
  .studio-tip{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(48px, 6vw, 96px);
    align-items:center;
    padding:92px clamp(64px, 8vw, 150px) 96px;
  }
  .studio-tip__media{ margin:0; }
  .studio-tip__body{ padding:0; max-width:46ch; }
  .fit--center{ margin-inline:0; }

  .checklist__inner{ padding:110px var(--gutter) 120px; }
  .checklist__list .txt{ font-size:22px; }

  .quiz__inner{
    margin:0 auto;
    padding:110px var(--gutter) 120px;
    max-width:76ch;
  }
  .quiz__list button{ font-size:21px; padding:23px 28px; }
  .quiz__a{ padding:4px 28px 26px; }
  .quiz__a p{ font-size:22px; }

  .contact__inner{
    margin:0 auto;
    padding:110px var(--gutter) 130px;
    max-width:62ch;
  }
  .form__row{ grid-template-columns:1fr 1fr; gap:0 26px; }
  .form__field input,
  .form__field textarea{ font-size:21px; padding:17px 18px; }

  .outro{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
  }
  .outro__media{ grid-column:1; }
  .outro__media img{ height:100%; min-height:600px; }
  .outro__body{
    grid-column:2;
    grid-row:1;
    padding:92px clamp(56px, 6vw, 88px);
  }
}

@media (min-width:1240px){
  .hero__text{ padding-inline:clamp(80px, 9vw, 140px); }
}

/* ============================================================
   הדפסה / שמירה כ-PDF
   ============================================================ */
@media print{
  @page{ margin:14mm; }

  html{ scroll-behavior:auto; }
  body{
    background:#fff;
    font-size:11pt;
    line-height:1.6;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .btn, .checklist__score, .contact, .quiz{ display:none !important; }

  .topbar{ border:0; padding:0 0 10mm; }
  .topbar__logo{ width:46mm; }

  .hero{ display:block; min-height:0; page-break-after:always; }
  .hero__media img{ height:95mm; }
  .hero__text{ padding:9mm 0 0; }
  .hero h1{ font-size:27pt; }
  .hero__sub{ font-size:13pt; max-width:none; }

  .intro{ padding:0 0 8mm; border:0; }
  .intro p{ font-size:11pt; }

  .solution{
    display:grid;
    grid-template-columns:34% 1fr;
    gap:8mm;
    align-items:start;
    padding:7mm 0;
    max-width:none;
    page-break-inside:avoid;
    border-bottom:.3pt solid var(--line);
  }
  .solution:nth-child(even) .solution__media{ grid-column:1; grid-row:1; }
  .solution__media{ margin:0; }
  .num{ font-size:22pt; margin-bottom:3mm; }
  .fit{ font-size:8pt; margin-bottom:2mm; padding-bottom:2mm; }
  .solution h2{ font-size:15pt; margin-bottom:3mm; }

  .studio-tip{ page-break-before:always; border:0; }
  .studio-tip{ display:block; }
  .studio-tip__media img{ height:auto; max-height:120mm; object-fit:contain; }
  .studio-tip__body{ padding:8mm 0 0; max-width:none; text-align:right; }
  .studio-tip h2{ font-size:17pt; }

  .checklist{ page-break-before:always; border:0; }
  .checklist__inner{ padding:0; max-width:none; }
  .checklist h2{ color:var(--ink); font-size:17pt; }
  .checklist__sub{ color:var(--ink-soft); }
  .checklist__list li{ border-color:var(--line); }
  .checklist__list li:last-child{ border-color:var(--line); }
  .checklist__list .txt{ color:var(--ink); font-size:11pt; }
  .box{ border-color:var(--ink-soft); }

  .outro{ display:block; page-break-before:always; }
  .outro__media img{ height:80mm; }
  .outro__body{ padding:8mm 0 0; max-width:none; }
}