/* ==========================================================================
   dr-shirabm.co.il — גיליון סגנונות מאוחד
   מחליף שמונה עותקים נפרדים שהיו מוטמעים בכל עמוד.
   הבסיס נלקח מ-index.html (הגרסה המעודכנת), כולל תיקוני הרספונסיביות
   שקודם הגיעו רק לדף הבית.
   ========================================================================== */

/* --- 1. יסודות ------------------------------------------------------------ */

:root{
  --bg:#fff;
  --soft:#faf9f7;
  --text:#151515;
  --muted:#666;
  --line:#dedede;
  --max:1240px;
  --fs:1;              /* מקדם הגדלת טקסט — נשלט מתפריט הנגישות */
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  font-size:calc(16px * var(--fs));
  overflow-x:hidden;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Assistant",Arial,sans-serif;
  line-height:1.7;
  text-align:right;
  overflow-wrap:break-word;   /* רשת ביטחון למילים ארוכות בלבד */
}

img,svg,video,canvas,iframe,object,embed,table{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
img{display:block}
button{font:inherit}

.container{width:min(var(--max),calc(100% - 48px));margin-inline:auto}

section{padding:84px 0}

.section-title{
  font-family:"Rubik","Assistant",sans-serif;
  font-size:2rem;
  font-weight:400;
  margin:0 0 40px;
}
.section-title:after{
  content:"";display:block;width:42px;height:1px;background:#222;margin-top:12px;
}

/* --- 2. דילוג לתוכן ------------------------------------------------------- */

.skip{
  position:absolute;top:-100px;right:16px;
  background:#111;color:#fff;padding:10px 16px;z-index:999;
}
.skip:focus{top:16px}

/* --- 3. כותרת עליונה וניווט ---------------------------------------------- */

header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(12px);   /* נדרש ל-Safari */
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,0,0,.06);
}

.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}

.menu{display:flex;gap:32px;align-items:center;font-size:1rem}
.menu a{padding-block:5px;border-bottom:1px solid transparent}
.menu a:hover,.menu a:focus-visible{border-color:#111}
.menu a[aria-current="page"]{border-color:#111;font-weight:600}

/* כפתור תפריט לנייד — מוסתר בדסקטופ, נחשף מתחת ל-900px */
.nav-toggle{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  background:#fff;border:1px solid #111;cursor:pointer;
  padding:0;
}
.nav-toggle:focus-visible{outline:2px solid #111;outline-offset:3px}
.nav-toggle .bars,
.nav-toggle .bars:before,
.nav-toggle .bars:after{
  display:block;width:20px;height:2px;background:#111;content:"";
}
.nav-toggle .bars{position:relative}
.nav-toggle .bars:before{position:absolute;top:-6px}
.nav-toggle .bars:after{position:absolute;top:6px}
.nav-toggle[aria-expanded="true"] .bars{background:transparent}
.nav-toggle[aria-expanded="true"] .bars:before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars:after{top:0;transform:rotate(-45deg)}

.actions{display:flex;gap:12px;flex-wrap:wrap}

/* --- 4. כפתורים ----------------------------------------------------------- */

.btn{
  min-height:46px;padding:10px 23px;
  border:1px solid #111;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid #111;outline-offset:3px}
.btn-dark{background:#111;color:#fff}
.btn-whatsapp{background:#fff;color:#111;border-color:#9ba99c}
.btn-whatsapp:hover{background:#f4f6f4}

/* --- 5. אזור הפתיחה (דף הבית) -------------------------------------------- */

/* minmax(0,1fr) — ולא minmax(560px,1fr) — כדי שהעמודה תוכל להצטמצם.
   הערך הקודם יצר רוחב מינימלי של 1022px, והטקסט נחתך בין 901 ל-1069 פיקסלים. */
.hero{
  min-height:620px;
  display:grid;
  grid-template-columns:390px minmax(0,1fr);
  grid-template-areas:"photo copy";
  gap:72px;
  align-items:center;
  margin-top:26px;
  padding:34px 0;
  border-top:1px solid #ededed;
  border-bottom:1px solid #ededed;
  direction:ltr;
}
.hero-photo{
  grid-area:photo;width:390px;height:485px;
  align-self:end;justify-self:start;
  overflow:hidden;display:flex;
}
/* <picture> הוא אלמנט inline, ולכן height:100% של התמונה שבתוכו לא היה
   מתייחס לגובה המסגרת — התמונה נמתחה לגובהה המלא והראש נחתך.
   האלמנט חייב להיות block בגודל המסגרת. */
.hero-photo picture,.about-photo picture{display:block;width:100%;height:100%}
.hero-photo img{
  width:100%;height:100%;
  /* יישור לראש: מסגרת התמונה רחבה יותר ביחס לגובהה מהתמונה עצמה,
     ולכן נחתך גובה. עדיף לקצץ מלמטה ולא את הפנים. */
  object-fit:cover;object-position:center top;
  filter:brightness(1.06) contrast(0.92);
}
.hero-copy{
  grid-area:copy;direction:rtl;text-align:right;
  max-width:700px;justify-self:end;align-self:center;
  padding:44px 18px 44px 0;
}
/* מקדם --fs מוכפל גם באיבר ה-vw, אחרת כותרות clamp אינן מגיבות
   להגדלת הטקסט מתפריט הנגישות (יחידות vw אינן תלויות בגודל גופן השורש). */
.hero h1{
  font-family:"Rubik","Assistant",sans-serif;
  font-size:clamp(3rem,calc(4.15vw * var(--fs)),4.35rem);
  line-height:1.08;font-weight:400;margin:0 0 8px;
  letter-spacing:-.035em;
}
.degree{font-size:1.52rem;margin:0;color:#2d2d2d}
.rule{width:48px;height:1px;background:#222;margin:28px 0}
.tagline{font-size:1.06rem;color:var(--muted);letter-spacing:.02em;margin:0 0 24px}
.intro{font-size:1.14rem;max-width:660px;margin:0 0 32px}

/* --- 6. תחומי העיסוק ------------------------------------------------------ */

.services{border-top:1px solid var(--line)}
#services .section-title{text-align:center;margin-right:auto;margin-left:auto}
#services .section-title::after{margin-right:auto;margin-left:auto}

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}

.service{
  min-height:142px;padding:30px;
  border:1px solid #e8e8e8;background:#f5f5f5;
  display:flex;align-items:center;justify-content:center;text-align:center;
  border-radius:18px;
  transition:transform .2s ease,box-shadow .2s ease;
  cursor:pointer;position:relative;
}
.service h3{
  font-size:1.28rem;line-height:1.42;margin:0;font-weight:600;
  text-align:center;width:100%;max-width:260px;
}
.service:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.05)}
.service:focus-visible{outline:2px solid #111;outline-offset:3px}

.service-link{
  flex-direction:column;gap:14px;
  justify-content:flex-start;min-height:190px;
  padding:30px 26px;color:inherit;
}
/* הכותרת נמתחת על הגובה הפנוי וממרכזת את עצמה בתוכו, ולכן "קרא/י עוד"
   יושב תמיד בתחתית הכרטיס — המראה של העיצוב המקורי, בלי מיקום מוחלט. */
.service-link h3{
  margin:0;text-align:center;
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;
}

/* "קרא/י עוד" היה position:absolute עם bottom:22px קבוע, בעוד הריפוד התחתון
   של הכרטיס השתנה לפי רוחב המסך. מתחת ל-600px הכלל .service מאפס את הריפוד
   ל-18px — הוא בא אחרי .service-link ובעל אותה סגוליות — והקישור המרחף כיסה
   את השורה השנייה של הכותרות הארוכות. כעת הוא חלק מזרימת ה-flex,
   ולכן חפיפה אינה אפשרית בשום רוחב ובכל אורך כותרת. */
.service .read-more{
  font-size:.82rem;color:var(--muted);letter-spacing:.02em;
  white-space:nowrap;text-align:center;
  transition:color .2s ease,transform .2s ease;
}
.service-link:hover .read-more,
.service-link:focus-visible .read-more{color:#111;transform:translateX(-4px)}

/* --- 7. אודות ------------------------------------------------------------- */

#about{padding-bottom:64px}
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;   /* ראו הערה ב-.hero */
  grid-template-areas:"copy photo";
  gap:70px;align-items:center;padding:44px 0;
  border-top:1px solid #ededed;border-bottom:1px solid #ededed;
  direction:ltr;
}
.about-photo{
  grid-area:photo;width:360px;height:395px;justify-self:end;
  overflow:hidden;display:flex;
}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.about-copy{
  grid-area:copy;direction:rtl;text-align:right;align-self:center;
  padding:40px 0 40px 18px;
}
.about-copy p{font-size:1.1rem;margin:0 0 18px;max-width:690px}
.about-copy .lead{font-size:1.27rem;font-weight:600}

/* --- 8. טופס יצירת קשר ---------------------------------------------------- */

#contact{border-top:1px solid var(--line);padding-top:56px}
/* הטופס עומד לבדו: תיבת פרטי המרפאות שהייתה כאן שכפלה את הכותרת התחתונה.
   המקטע ממורכז — כמו "תחומי העיסוק" — כדי שלא ייווצר חצי עמוד ריק משמאלו. */
#contact .section-title{text-align:center;margin-inline:auto}
#contact .section-title::after{margin-inline:auto}
.contact-grid{max-width:660px;margin-inline:auto}

/* טופס קומפקטי: "שם מלא" ו"טלפון" חולקים שורה אחת, והמרווחים האנכיים
   הודקו. כך נחסך גובה של שדה שלם ועוד כ-40 פיקסלים של ריווח. */
.contact-form{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.contact-form > *{grid-column:1 / -1}      /* ברירת מחדל: רוחב מלא */
.contact-form > .field-half{grid-column:span 1}
/* פריט ב-grid נמתח לרוחב התא כברירת מחדל, ולכן כפתור השליחה נפרש על כל
   הטופס. justify-self מחזיר אותו לרוחב תוכן, בצד ימין כמו שאר הטופס. */
.contact-form > button[type="submit"]{justify-self:start;min-width:190px}

.contact-form .field{margin-bottom:13px}
.contact-form label{display:block;font-weight:600;margin-bottom:4px;font-size:.94rem}
.contact-form .req{color:#a11}
.contact-form input,
.contact-form textarea{
  width:100%;padding:9px 12px;
  border:1px solid #b9b9b9;background:#fff;
  font:inherit;color:inherit;border-radius:0;
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible{outline:2px solid #111;outline-offset:1px;border-color:#111}
.contact-form textarea{min-height:92px;resize:vertical}
/* בחירת מרפאה: fieldset ללא מסגרת, legend בעיצוב של תווית רגילה,
   והכפתורים עצמם חוזרים לגודל הטבעי (כלל ה-input הכללי מותח אותם). */
.contact-form fieldset{border:0;margin:0;padding:0;min-inline-size:0}
.contact-form legend{
  display:block;float:none;padding:0;
  font-weight:600;margin-bottom:6px;font-size:.94rem;
}
.contact-form .radio-row{display:flex;flex-wrap:wrap;gap:6px 22px}
.contact-form label.radio{
  display:flex;align-items:center;gap:8px;
  margin:0;font-weight:400;cursor:pointer;
}
.contact-form input[type="radio"]{
  width:auto;padding:0;margin:0;border:0;background:none;
  flex:none;accent-color:#111;
}
.contact-form .field.invalid legend{color:#a11}

.contact-form .hint{font-size:.84rem;color:var(--muted);margin:4px 0 0;line-height:1.5}
.contact-form .error{font-size:.86rem;color:#a11;margin:4px 0 0;display:none}
.contact-form .field.invalid .error{display:block}
.contact-form .field.invalid input,
.contact-form .field.invalid textarea{border-color:#a11}
/* שדה מלכודת לבוטים — מוסתר מהמשתמש ומקוראי מסך.
   ללא היסט שלילי: left:-9999px היה מרחיב את רוחב המסמך כולו. */
.contact-form{position:relative}
.contact-form .hp{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.form-status{margin:12px 0 0;padding:11px 14px;border:1px solid var(--line);display:none}
.form-status.show{display:block}
.form-status.ok{border-color:#2f6b3a;background:#f2f8f3}
.form-status.bad{border-color:#a11;background:#fdf3f3}

/* --- 10. עמודי מאמרים ---------------------------------------------------- */

.article-hero{
  padding:76px 0 54px;
  background:var(--soft);
  border-top:1px solid #ededed;
  border-bottom:1px solid #e7e4df;
}
.article-hero h1{
  font-family:"Rubik","Assistant",sans-serif;font-weight:400;
  font-size:clamp(2.35rem,calc(5vw * var(--fs)),4rem);
  line-height:1.15;margin:0 0 18px;letter-spacing:-.025em;max-width:900px;
}
.article-lead{font-size:1.22rem;max-width:820px;margin:0;color:#4c4c4c;line-height:1.75}

.breadcrumbs{font-size:.92rem;color:#747474;margin-bottom:26px}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.breadcrumbs li{display:flex;align-items:center;gap:8px}
.breadcrumbs li+li:before{content:"‹";color:#b3b3b3}
.breadcrumbs a{border-bottom:1px solid #c9c6c1;transition:border-color .18s ease,color .18s ease}
.breadcrumbs a:hover{color:#111;border-color:#111}

.article-layout{
  display:grid;grid-template-columns:minmax(0,800px) 280px;
  gap:76px;align-items:start;padding:68px 0 96px;
}
.article-content{min-width:0}
.article-content h2{
  font-family:"Rubik","Assistant",sans-serif;font-size:1.75rem;font-weight:400;
  margin:52px 0 18px;position:relative;padding-bottom:12px;line-height:1.35;
}
.article-content h2:after{content:"";display:block;width:38px;height:1px;background:#222;margin-top:12px}
.article-content h2:first-child{margin-top:0}
.article-content h3{font-size:1.18rem;margin:30px 0 10px}
.article-content p{margin:0 0 19px;line-height:1.85;font-size:1.06rem}
.article-content ul{margin:8px 0 26px;padding-right:23px}
.article-content li{margin-bottom:10px;line-height:1.75;font-size:1.06rem}
.article-content strong{font-weight:700}
.article-content hr{border:0;border-top:1px solid var(--line);margin:44px 0 24px}
.article-content a{border-bottom:1px solid #bbb}
.article-content a:hover{border-color:#111}

.disclaimer{
  background:var(--soft);border:1px solid #ece9e4;border-radius:14px;
  padding:18px 20px;margin-top:0;font-size:.9rem;line-height:1.7;color:var(--muted);
}

.faq-block{margin-top:18px}
.faq-block details{border-top:1px solid var(--line);padding:17px 0}
.faq-block summary{font-weight:700;cursor:pointer}
.faq-block summary:focus-visible{outline:2px solid #111;outline-offset:3px}
.faq-block details p{color:var(--muted);margin:10px 0 0}

.cta-box{
  background:var(--soft);border:1px solid #dedbd6;border-radius:18px;
  padding:32px;margin-top:48px;
}
.cta-box h2{padding:0;margin:0 0 10px}
.cta-box h2:after{display:none}
.cta-box p{margin-bottom:18px}
.cta-box .btn{min-width:210px;margin-top:8px}

.sidebar{
  position:sticky;top:102px;
  border:1px solid #e5e2dd;border-radius:18px;padding:25px;
  background:var(--soft);box-shadow:0 14px 38px rgba(0,0,0,.035);
}
.sidebar h2{
  font-family:"Rubik","Assistant",sans-serif;font-weight:400;
  font-size:1.18rem;margin:0 0 16px;
}
.sidebar a.topic{
  display:block;padding:12px 2px;border-top:1px solid #e2ded8;
  font-size:.96rem;line-height:1.45;
  transition:padding .18s ease,color .18s ease;
}
.sidebar a.topic:hover{padding-right:7px;color:#000}
.sidebar a.topic:focus-visible{outline:2px solid #111;outline-offset:2px}
.sidebar a.topic[aria-current="page"]{font-weight:700;color:#111}
.sidebar .btn{width:100%;border-radius:0;margin-top:22px}

/* --- 11. עמוד 404 --------------------------------------------------------- */

.notfound{padding:96px 0;text-align:center}
.notfound h1{font-family:"Rubik","Assistant",sans-serif;font-weight:400;font-size:clamp(2rem,5vw,3rem);margin:0 0 16px}
.notfound p{color:var(--muted);margin:0 0 28px}
.notfound .actions{justify-content:center}

/* --- 12. כותרת תחתונה ---------------------------------------------------- */

footer{background:#111;color:#fff;padding:42px 0 22px;margin-top:0}
.footer-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:32px;align-items:start;
}
footer h3{font-size:1.25rem;font-weight:500;margin:0 0 20px}
footer p{margin:6px 0;color:#eee}
footer a{border-bottom:1px solid #555}
/* קישורי Waze ותיאום התור מוצגים ככפתורים עם מסגרת מלאה בעובי 1px,
   באותו טיפול של כפתור ה-WhatsApp שבכותרת התחתונה. הכלל footer a
   נותן מסגרת תחתונה בלבד, ולכן צריך לדרוס אותו כאן. */
.footer-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.footer-links a{
  font-size:.92rem;color:#fff;
  border:1px solid #fff;
  padding:8px 14px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.footer-links a:hover{color:#fff;background:rgba(255,255,255,.12)}
.footer-links a:focus-visible{outline:2px solid #fff;outline-offset:2px}
footer a:hover{border-color:#fff}
footer .btn{border-color:#fff;background:transparent;color:#fff;margin-top:18px;border-bottom-width:1px}
.copyright{
  border-top:1px solid #333;margin-top:40px;padding-top:18px;
  text-align:center;color:#aaa;font-size:.9rem;
}

/* --- 13. כפתורים צפים ---------------------------------------------------- */

.wa-float{
  position:fixed;left:22px;bottom:22px;width:54px;height:54px;border-radius:50%;
  background:#111;color:#fff;display:flex;align-items:center;justify-content:center;
  z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.18);
  transition:background .2s ease;
}
.wa-float:hover{background:#25d366}      /* ירוק WhatsApp במעבר עכבר */
.wa-float:focus-visible{outline:2px solid #111;outline-offset:3px}
.wa-float .wa-icon{width:27px;height:27px;display:block}
body.high-contrast .wa-float{background:#000;border:1px solid #fff}

.access-toggle{
  position:fixed;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;
  border:0;background:#111;color:#fff;z-index:70;cursor:pointer;font-size:1.35rem;
  line-height:1;display:flex;align-items:center;justify-content:center;
}
.access-toggle:focus-visible{outline:2px solid #111;outline-offset:3px}
.access-panel{
  position:fixed;right:18px;bottom:76px;width:230px;
  background:#fff;border:1px solid #ccc;box-shadow:0 12px 35px rgba(0,0,0,.14);
  padding:14px;display:none;z-index:70;
}
.access-panel.open{display:block}
.access-panel h2{font-size:.98rem;margin:0 0 10px}
.access-panel button{
  width:100%;margin:4px 0;padding:9px;
  background:#fff;border:1px solid #bbb;cursor:pointer;color:#111;
}
.access-panel button:hover{background:#f3f3f3}
.access-panel button:focus-visible{outline:2px solid #111;outline-offset:2px}

/* --- 14. מצבי נגישות ----------------------------------------------------- */

/* ניגודיות גבוהה. בגרסה הקודמת שכבת תיקונים עם !important דרסה את הכלל הזה
   והתוצאה הייתה טקסט לבן על רקע לבן. שכבת התיקונים הוסרה. */
body.high-contrast{
  --bg:#000;--soft:#111;--text:#fff;--muted:#eee;--line:#777;
  background:#000;color:#fff;
}
body.high-contrast header{background:#000;border-bottom-color:#555}
body.high-contrast .btn,
body.high-contrast .nav-toggle{background:#000;color:#fff;border-color:#fff}
body.high-contrast .nav-toggle .bars,
body.high-contrast .nav-toggle .bars:before,
body.high-contrast .nav-toggle .bars:after{background:#fff}
body.high-contrast .btn-dark{background:#fff;color:#000}
body.high-contrast .service,
body.high-contrast .sidebar,
body.high-contrast .cta-box,
body.high-contrast .article-hero,
body.high-contrast .disclaimer,
body.high-contrast .access-panel{background:#111;border-color:#777;color:#fff}
body.high-contrast .contact-form input:not([type="radio"]),
body.high-contrast .contact-form textarea,
body.high-contrast .access-panel button{background:#000;color:#fff;border-color:#fff}
body.high-contrast .contact-form input[type="radio"]{accent-color:#fff}
body.high-contrast footer{background:#000;border-top:1px solid #555}
body.high-contrast .service h3,
body.high-contrast .degree,
body.high-contrast .tagline,
body.high-contrast .article-lead,
body.high-contrast .breadcrumbs,
body.high-contrast .disclaimer{color:#fff}

body.links-underlined a{text-decoration:underline}

/* --- 15. העדפת תנועה מופחתת ---------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .btn:hover,.service:hover{transform:none}
}

/* --- 16. נקודות שבירה ---------------------------------------------------- */

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

@media(max-width:900px){
  .container{width:min(100% - 24px,var(--max))}

  .nav{height:auto;padding:12px 0;align-items:center;gap:12px}
  .nav-toggle{display:flex}
  /* התפריט נפתח כלוח אנכי מתחת לכותרת. קודם הוא פשוט הוסתר
     ללא שום כפתור שיחליף אותו, ובעמודי המאמרים גם הכפתורים הוסתרו. */
  .menu{
    display:none;
    position:absolute;top:100%;right:0;left:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 14px 30px rgba(0,0,0,.08);
    padding:8px 24px 16px;
  }
  .menu.open{display:flex}
  .menu a{padding:13px 0;border-bottom:1px solid var(--line)}
  .menu a:last-child{border-bottom:0}
  body.high-contrast .menu{background:#000}

  .actions{gap:8px;justify-content:flex-end}
  .actions .btn{min-height:38px;padding:8px 12px;font-size:.94rem}

  .hero{
    min-height:auto;grid-template-columns:1fr;
    grid-template-areas:"copy" "photo";
    gap:12px;margin-top:12px;padding:12px 0 0;
  }
  .hero-copy{padding:16px 0 8px;max-width:none;justify-self:stretch}
  .hero-photo{height:320px;width:min(100%,300px);justify-self:center}
  .hero h1{font-size:clamp(1.9rem,calc(7.3vw * var(--fs)),2.7rem);line-height:1.14}
  .degree{font-size:1.12rem}
  .tagline{font-size:.95rem}
  .intro{font-size:1rem;margin-bottom:22px}

  section{padding:48px 0}
  #about{padding-bottom:34px}
  #contact{padding-top:40px}

  .services-grid{grid-template-columns:1fr}
  .service{min-height:120px;padding:22px 18px}
  .service-link{min-height:130px;padding:24px 20px;gap:14px}

  .about-grid{grid-template-columns:1fr;grid-template-areas:"copy" "photo";gap:12px;padding:18px 0}
  .about-photo{height:300px;width:min(100%,280px);justify-self:center}
  .about-copy{padding:0 0 18px}


  .article-hero{padding:48px 0 38px}
  .article-lead{font-size:1.1rem}
  .article-layout{grid-template-columns:minmax(0,1fr);gap:34px;padding:44px 0 72px}
  .article-content{order:1;min-width:0}
  .article-content h2{font-size:1.45rem;margin:42px 0 12px}
  .article-content h3{font-size:1.08rem;margin:20px 0 8px}
  .article-content p,.article-content li{font-size:1rem;line-height:1.8}
  .sidebar{position:static;order:2;width:100%;margin-top:8px;padding:18px;border-radius:14px}
  .cta-box{padding:25px 22px}

  .footer-grid{gap:24px}
  .wa-float{left:12px;bottom:12px;width:46px;height:46px;font-size:.8rem}
  .access-toggle{right:12px;bottom:12px;width:44px;height:44px}
}

@media(max-width:600px){
  .container{width:min(100% - 18px,var(--max))}
  .menu{padding-inline:18px}

  .hero{padding-top:8px}
  .hero-copy{padding:12px 0 4px}
  .hero-photo{height:260px}
  .hero h1{font-size:clamp(1.6rem,calc(7vw * var(--fs)),2.2rem)}
  .degree{font-size:1rem}
  .tagline,.intro,.about-copy p{font-size:.95rem;line-height:1.7}

  .service{min-height:108px;padding:18px 14px}
  .service-link{gap:10px}
  .service h3{font-size:1.08rem}
  .section-title{font-size:1.45rem;margin-bottom:24px}


  .article-hero{padding-top:32px}
  .article-layout{gap:18px;padding:20px 0 48px}
  .article-content h2{font-size:1.24rem}
  .article-content h3{font-size:1rem}
  .article-content p,.article-content li{font-size:.95rem}
  .sidebar{padding:14px}
  .sidebar h2{font-size:1.05rem;margin-bottom:10px}
  .sidebar a.topic{font-size:.92rem;padding:10px 2px}

  .footer-grid{grid-template-columns:1fr}
  /* הכפתורים חולקים את השורה שווה בשווה. קודם הרוחב נגזר מאורך הטקסט,
     ו"ניווט ב־Waze" יצא 101px מול 161px של "תיאום תור ב־WhatsApp". */
  .footer-links{gap:10px}
  .footer-links a{flex:1 1 0;min-width:0;padding-inline:8px}

  /* הטופס לעמודה אחת — שתי עמודות צרות מדי במסך צר */
  .contact-form{grid-template-columns:1fr}
  .contact-form > .field-half{grid-column:1 / -1}
  /* כפתורי הכותרת נשארים בשורה אחת. קודם היה כאן width:100%,
     שגרם לכותרת להתפרש על שלוש שורות בנייד. */
  .actions .btn{padding:7px 10px;font-size:.9rem}
  .wa-float{width:42px;height:42px;left:10px;bottom:10px}
  .access-toggle{right:10px;bottom:10px;width:40px;height:40px}
  .access-panel{right:10px;bottom:60px;width:min(230px,calc(100vw - 20px))}
}