/* ===== _tokens.css — generated; role tokens measured on soft, >=4.5. DO NOT hand-edit. ===== */
:root{
  --font:"Heebo",sans-serif;
  --fs-h1:clamp(2rem,5vw,3.2rem); --fs-h2:clamp(1.5rem,3.5vw,2.2rem); --fs-h3:1.25rem;
  --fs-sub:clamp(1.05rem,2.2vw,1.3rem); --fs-body:1.05rem; --lh-tight:1.3; --lh-body:1.75;
  --maxw:1120px; --gutter:clamp(16px,4vw,40px); --section-y:clamp(48px,8vw,96px);
  --radius:16px; --btn-radius:999px; --shadow:0 10px 30px rgba(0,0,0,.08);
}
:root[data-palette="brand"]{
  --bg:linear-gradient(160deg,#0C3054,#002448); --hero-text:#FFFFFF; --hero-sub:rgba(255,255,255,.8);
  --surface:#EAF4FB; --surface-2:#FFFFFF; --on-surface:#26221F;
  --accent-bg:#5BB6E0; --on-accent-bg:#03263F;
  --emph:#3A738D;
  --hero-scrim:rgba(6,8,18,.66); --hero-em:#5BB6E0; --mono-bg:#3D7994; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,var(--hero-text) 18%,transparent);
}
:root[data-palette="emerald"]{
  --bg:linear-gradient(160deg,#123B30,#0C2C24); --hero-text:#FFFFFF; --hero-sub:rgba(255,255,255,.8);
  --surface:#EEF4EF; --surface-2:#FFFFFF; --on-surface:#26221F;
  --accent-bg:#C9A24B; --on-accent-bg:#18331C;
  --emph:#7E662F;
  --hero-scrim:rgba(6,8,18,.66); --hero-em:#C9A24B; --mono-bg:#8C7134; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,var(--hero-text) 18%,transparent);
}
:root[data-palette="aurora"]{
  --bg:linear-gradient(150deg,#5B2A86,#B23A9A 55%,#FF6F91); --hero-text:#FFFFFF; --hero-sub:rgba(255,255,255,.85);
  --surface:#F7EEFB; --surface-2:#FFFFFF; --on-surface:#26221F;
  --accent-bg:#FFE08A; --on-accent-bg:#4A1A52;
  --emph:#776840;
  --hero-scrim:rgba(6,8,18,.66); --hero-em:#FFE08A; --mono-bg:#847346; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,var(--hero-text) 18%,transparent);
}
:root[data-palette="teal"]{
  --bg:linear-gradient(150deg,#0E5566,#15938F 52%,#FF8A6B); --hero-text:#FFFFFF; --hero-sub:rgba(255,255,255,.85);
  --surface:#EDF7F5; --surface-2:#FFFFFF; --on-surface:#26221F;
  --accent-bg:#FFD56B; --on-accent-bg:#0C4A56;
  --emph:#846D37;
  --hero-scrim:rgba(6,8,18,.66); --hero-em:#FFD56B; --mono-bg:#8B733A; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,var(--hero-text) 18%,transparent);
}
:root[data-palette="indigo"]{
  --bg:linear-gradient(150deg,#1B1E6B,#5B2BC9 50%,#C13AC1); --hero-text:#FFFFFF; --hero-sub:rgba(255,255,255,.85);
  --surface:#EEEDF7; --surface-2:#FFFFFF; --on-surface:#26221F;
  --accent-bg:#7DECF0; --on-accent-bg:#2A1A6B;
  --emph:#3D7376;
  --hero-scrim:rgba(6,8,18,.66); --hero-em:#7DECF0; --mono-bg:#437F82; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,var(--hero-text) 18%,transparent);
}
:root[data-palette="fire"]{
  --bg:linear-gradient(150deg,#B5179E,#F2295B 48%,#FF8A3D); --hero-text:#FFFFFF; --hero-sub:rgba(255,255,255,.88);
  --surface:#FFF0F5; --surface-2:#FFFFFF; --on-surface:#26221F;
  --accent-bg:#FFD45B; --on-accent-bg:#8A1A5E;
  --emph:#846C2F;
  --hero-scrim:rgba(6,8,18,.66); --hero-em:#FFD45B; --mono-bg:#8B7231; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,var(--hero-text) 18%,transparent);
}
:root[data-palette="classic"]{
  --bg:linear-gradient(160deg,#FFFFFF,#EAF4FB); --hero-text:#0C3054; --hero-sub:#5B6B7E;
  --surface:#F2F8FC; --surface-2:#FFFFFF; --on-surface:#26221F;
  --accent-bg:#5BB6E0; --on-accent-bg:#06324F;
  --emph:#3A738D;
  --hero-scrim:rgba(255,255,255,.72); --hero-em:#3A738D; --mono-bg:#3D7994; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,var(--hero-text) 18%,transparent);
}
:root[data-palette="corporate"]{
  --bg:linear-gradient(160deg,#1C3A5E,#112844); --hero-text:#FFFFFF; --hero-sub:rgba(255,255,255,.8);
  --surface:#EAF0F7; --surface-2:#FFFFFF; --on-surface:#26221F;
  --accent-bg:#5B8FC9; --on-accent-bg:#0A1B30;
  --emph:#466F9B;
  --hero-scrim:rgba(6,8,18,.66); --hero-em:#5B8FC9; --mono-bg:#4A75A3; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,var(--hero-text) 18%,transparent);
}
:root[data-palette="minimal"]{
  --bg:linear-gradient(160deg,#FAFAF8,#ECEBE6); --hero-text:#33302A; --hero-sub:#6E6A60;
  --surface:#F3F2EC; --surface-2:#FFFFFF; --on-surface:#26221F;
  --accent-bg:#9A8F79; --on-accent-bg:#1A1A1A;
  --emph:#716959;
  --hero-scrim:rgba(255,255,255,.72); --hero-em:#716959; --mono-bg:#7D7563; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,var(--hero-text) 18%,transparent);
}
:root[data-palette="lavender"]{
  --bg:linear-gradient(160deg,#F3EEFB,#E7DEF7); --hero-text:#3E2C5E; --hero-sub:#6E6385;
  --surface:#F6F1FC; --surface-2:#FFFFFF; --on-surface:#26221F;
  --accent-bg:#7D64B4; --on-accent-bg:#FFFFFF;
  --emph:#775FAB;
  --hero-scrim:rgba(255,255,255,.72); --hero-em:#775FAB; --mono-bg:#7D64B4; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,var(--hero-text) 18%,transparent);
}
:root[data-palette="blush"]{
  --bg:linear-gradient(160deg,#FCF0F2,#F7E1E6); --hero-text:#5E2C3C; --hero-sub:#85636E;
  --surface:#FDF2F4; --surface-2:#FFFFFF; --on-surface:#26221F;
  --accent-bg:#D07E96; --on-accent-bg:#1A1A1A;
  --emph:#BC4668;
  --hero-scrim:rgba(255,255,255,.72); --hero-em:#BC4668; --mono-bg:#A26275; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,var(--hero-text) 18%,transparent);
}
:root[data-palette="cream"]{
  --bg:linear-gradient(160deg,#FBF6EC,#F3E9D6); --hero-text:#4A3F2A; --hero-sub:#746A55;
  --surface:#FBF6EC; --surface-2:#FFFFFF; --on-surface:#26221F;
  --accent-bg:#B8974B; --on-accent-bg:#1A1A1A;
  --emph:#816934;
  --hero-scrim:rgba(255,255,255,.72); --hero-em:#816934; --mono-bg:#886F37; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,var(--hero-text) 18%,transparent);
}
:root[data-palette="sky"]{
  --bg:linear-gradient(160deg,#EAF6FB,#FBF6DE); --hero-text:#1E3A4A; --hero-sub:#556670;
  --surface:#EAF6FB; --surface-2:#FFFFFF; --on-surface:#26221F;
  --accent-bg:#3E9BC4; --on-accent-bg:#1A1A1A;
  --emph:#2E7290;
  --hero-scrim:rgba(255,255,255,.72); --hero-em:#2E7290; --mono-bg:#307898; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,var(--hero-text) 18%,transparent);
}
:root[data-palette="retro"]{
  --bg:linear-gradient(160deg,#F5EFDE,#EFE6CF); --hero-text:#3A2A12; --hero-sub:#6B5B45;
  --surface:#FBF7EC; --surface-2:#FFFFFF; --on-surface:#26221F;
  --accent-bg:#BA512B; --on-accent-bg:#FFFFFF;
  --emph:#BA512B;
  --hero-scrim:rgba(255,255,255,.72); --hero-em:#BA512B; --mono-bg:#BA512B; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,var(--hero-text) 18%,transparent); --gold:#E3A92F;
}
:root[data-palette="night"]{
  --bg:linear-gradient(160deg,#14131A,#0F0E14); --hero-text:#F4F2ED; --hero-sub:rgba(244,242,237,.78);
  --surface:#201F29; --surface-2:#201F29; --on-surface:#F4F2ED;
  --accent-bg:#F2557E; --on-accent-bg:#14131A;
  --emph:#F2557E;
  --hero-scrim:rgba(6,8,18,.66); --hero-em:#F2557E; --mono-bg:#C64567; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,#FFFFFF 20%,transparent); --gold:#F5C544;
}
:root[data-palette="sage"]{
  --bg:linear-gradient(160deg,#F0F4EC,#E3EBDE); --hero-text:#2C4034; --hero-sub:#5A6E62;
  --surface:#F0F5EC; --surface-2:#FFFFFF; --on-surface:#26221F;
  --accent-bg:#4E7360; --on-accent-bg:#FFFFFF;
  --emph:#4E7360;
  --hero-scrim:rgba(255,255,255,.72); --hero-em:#4E7360; --mono-bg:#4E7360; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,var(--hero-text) 18%,transparent);
}
:root[data-palette="goldcream"]{
  --bg:linear-gradient(160deg,#FAF6EF,#F0E7D4); --hero-text:#47381F; --hero-sub:#736144;
  --surface:#FAF6EF; --surface-2:#FFFFFF; --on-surface:#26221F;
  --accent-bg:#B0863C; --on-accent-bg:#1A1A1A;
  --emph:#88682E;
  --hero-scrim:rgba(255,255,255,.72); --hero-em:#88682E; --mono-bg:#8F6D30; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,var(--hero-text) 18%,transparent);
}
:root[data-palette="ocean"]{
  --bg:linear-gradient(150deg,#0A3D5C,#0F6E92 50%,#2AA6B2); --hero-text:#FFFFFF; --hero-sub:rgba(255,255,255,.82);
  --surface:#EAF5F7; --surface-2:#FFFFFF; --on-surface:#26221F;
  --accent-bg:#1CA5BE; --on-accent-bg:#053038;
  --emph:#157485;
  --hero-scrim:rgba(6,8,18,.66); --hero-em:#1CA5BE; --mono-bg:#178093; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,var(--hero-text) 18%,transparent);
}
:root[data-palette="sunny"]{
  --bg:linear-gradient(150deg,#0C5A66,#15A39A 48%,#FF8C42); --hero-text:#FFFFFF; --hero-sub:rgba(255,255,255,.85);
  --surface:#FFF4E8; --surface-2:#FFFFFF; --on-surface:#26221F;
  --accent-bg:#FF8C42; --on-accent-bg:#3A1A00;
  --emph:#A2582A;
  --hero-scrim:rgba(6,8,18,.66); --hero-em:#FF8C42; --mono-bg:#AA5D2C; --mono-text:#FFFFFF;
  --nav-line:color-mix(in srgb,var(--hero-text) 18%,transparent);
}
:root[data-palette="night"]{ color-scheme:dark; }
:root[data-font="heebo"]{ --font:"Heebo",sans-serif; }
:root[data-font="assistant"]{ --font:"Assistant",sans-serif; }
:root[data-font="rubik"]{ --font:"Rubik",sans-serif; }
:root[data-font="frank"]{ --font:"Frank Ruhl Libre",serif; }
:root[data-font="varela"]{ --font:"Varela Round",sans-serif; }
/* ===== _components.css — section library. Tokens only, no direct colors, no !important. ===== */

/* --- base --- */
:root{--head-font:var(--font); --head-weight:700}
*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--font);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--on-surface);font-size:var(--fs-body);line-height:var(--lh-body)}
/* height:auto חובה: לתמונות יש width/height כתכונות (למניעת קפיצת-פריסה), ובלי זה
   התכונה קובעת את הגובה ו-aspect-ratio מהגיליון מתעלמים ממנו — התיבה יוצאת בפרופורציה
   שגויה ו-object-fit:cover חותך את התמונה (נמדד: 77% נחתך בגיבור הנייד). */
img{max-width:100%;display:block;height:auto}
h1,h2,h3{line-height:var(--lh-tight);margin:0 0 .5em;color:var(--on-surface);font-family:var(--head-font);font-weight:var(--head-weight)}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
p{margin:0 0 1rem}
a{color:var(--emph)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.kicker{color:var(--emph);font-weight:700;font-size:.92rem;margin:0 0 .4rem}
.skip-link{position:absolute;right:-999px} .skip-link:focus{right:1rem;top:1rem;background:var(--surface);padding:.5rem 1rem;border-radius:8px;z-index:100}
:focus-visible{outline:3px solid var(--emph);outline-offset:2px}

/* --- buttons --- */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.7em;border-radius:var(--btn-radius);font-weight:700;font-family:inherit;font-size:1rem;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.btn--primary{background:var(--accent-bg);color:var(--on-accent-bg)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn--ghost{background:transparent;color:var(--emph);border-color:var(--emph)}
.btn--ghost:hover{background:color-mix(in srgb,var(--emph) 10%,transparent)}

/* --- nav (inside hero) --- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem;position:relative}
.nav__logo{font-weight:800;font-size:1.25rem;color:var(--hero-text);text-decoration:none;white-space:nowrap}
.nav__logo img{max-height:44px;width:auto}
/* לוגו כהה על גיבור כהה נעלם (הרקע הוסר לשקיפות). משטח-ניגוד בהיר מטוקן הגיבור —
   חריג ממוקד שנקבע ע"י מדידת בהירות הלוגו, לא כרטיס קבוע (§16ב/16ו). */
.nav__logo--plate{display:inline-flex;align-items:center;padding:6px 10px;border-radius:10px;background:color-mix(in srgb,var(--hero-text) 92%,transparent)}
.nav__logo small{display:block;font-size:.72rem;font-weight:400;opacity:.85}
/* ניווט: 16px + רווח 28px = יחס רווח/גופן 1.75 (נמדד מול המערכת הישנה: 15px/28px = 1.87).
   גופן קטן מגוף הדף בכוונה — שורת ניווט צפופה נקראת שבורה גם בלי חריגה. */
.nav__links{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav__links a{color:var(--hero-text);text-decoration:none;opacity:.9;white-space:nowrap;font-size:16px}
.nav__links a:hover{opacity:1}
.nav__toggle{display:none;background:transparent;border:0;color:var(--hero-text);font-size:1.7rem;line-height:1;cursor:pointer;padding:.2rem}
.nav--centered{flex-direction:column;gap:.6rem;justify-content:center;text-align:center}

/* --- hero (3 variants) --- */
.hero{background:var(--bg);color:var(--hero-text);position:relative;overflow:hidden}
.hero__inner{display:grid;gap:1.3rem;padding-block:clamp(36px,7vw,84px)}
.hero__title{color:var(--hero-text);margin:0}
.hero__sub{color:var(--hero-sub);font-size:var(--fs-sub);max-width:44ch;margin:0}
.hero__cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:.6rem}
.hero--classic .hero__inner{text-align:center;justify-items:center}
.hero--classic .hero__cta{justify-content:center}
.hero--split .hero__inner{grid-template-columns:1.05fr .95fr;align-items:center;gap:2.4rem}
.hero--split .hero__media img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;aspect-ratio:4/3;object-fit:cover}
/* heroBg=photo בפריסה ממורכזת (hero--photorow):
   דסקטופ = טקסט בעמודה אחת, תמונה בעמודה שנייה, **שורה אחת**.
   נייד = עמודה אחת בסדר: ניווט (למעלה, מחוץ לגריד), כותרת, ואז תמונה.
   הטקסט לעולם לא יושב על התמונה (design-rules 4-9). */
.hero__band{margin:0 0 clamp(28px,5vw,56px);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.hero__band img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 30%}
.hero--classic .hero__inner{padding-bottom:clamp(24px,4vw,44px)}
@media (min-width:761px){
  .hero--photorow .hero__grid{display:grid;grid-template-columns:1fr minmax(300px,40%);grid-template-rows:auto;column-gap:clamp(28px,4vw,56px);align-items:center}
  .hero--photorow .hero__inner{text-align:right;justify-items:start;padding-bottom:0}
  .hero--photorow .hero__sub{margin-inline:0}
  .hero--photorow .hero__cta{justify-content:flex-start}
  .hero--photorow .hero__band{margin:0}
  .hero--photorow .hero__band img{aspect-ratio:4/5;max-height:64vh}
}
.hero--fullImage{color:#fff}
.hero--fullImage .hero__media{position:absolute;inset:0;z-index:0}
.hero--fullImage .hero__media img{width:100%;height:100%;object-fit:cover}
.hero--fullImage .hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.62))}
.hero--fullImage .hero__inner{position:relative;z-index:2;text-align:center;justify-items:center;min-height:60vh;align-content:center}
.hero--fullImage .hero__title{color:#fff} .hero--fullImage .hero__sub{color:rgba(255,255,255,.9)}
.hero--fullImage .nav__logo,.hero--fullImage .nav__links a,.hero--fullImage .nav__toggle{color:#fff}

/* --- section shell --- */
.sec{padding-block:var(--section-y);background:var(--surface)}
.sec.alt{background:var(--surface-2)}
.sec__head{max-width:720px;margin:0 auto 2.2rem;text-align:center}
.sec__title{margin:0 0 .4rem}
.sec__lead{color:var(--on-surface);opacity:.82;margin:0}

/* --- about --- */
.about{display:grid;gap:2rem;align-items:center}
.about__media img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;aspect-ratio:1/1;object-fit:cover}
.about__body p{color:var(--on-surface)}
.about__creds{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.55rem}
.about__creds li{position:relative;padding-inline-start:1.6rem;color:var(--on-surface)}
.about__creds li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--emph);font-weight:700}
.sec--about[data-variant="portrait"] .about{grid-template-columns:.85fr 1.15fr}
.sec--about[data-variant="portraitReverse"] .about{grid-template-columns:1.15fr .85fr}
.sec--about[data-variant="portraitReverse"] .about__media{order:2}
/* אודות בטקסט בלבד: טקסט ארוך לא ממורכז ולא במלוא הרוחב — מידה קריאה (~68 תווים),
   יישור טבעי, ופסקה ראשונה כ"ליד" מודגש. קיר של 5 פסקאות זהות = טקסט שנשפך. */
.sec--about[data-variant="text"] .about{max-width:68ch;margin-inline:auto;text-align:start}
.about__body p:first-of-type{font-size:var(--fs-sub);line-height:1.6;font-weight:500}
.about__body p{margin:0 0 1.15rem;max-width:68ch}
.about__body p:last-of-type{margin-bottom:0}

/* --- services --- */
.services__grid{display:grid;gap:1.2rem}
.sec--services[data-variant="cards"] .services__grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.service-card{background:var(--surface-2);border:1px solid color-mix(in srgb,var(--on-surface) 9%,transparent);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow)}
.sec.alt .service-card{background:var(--surface)}
.service-card__icon,.service__mark{color:var(--emph);font-size:1.7rem;line-height:1}
.service-card h3{margin:.6rem 0 .4rem}
.sec--services[data-variant="rows"] .service-row{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;padding-block:1.3rem;border-bottom:1px solid color-mix(in srgb,var(--on-surface) 12%,transparent)}
.sec--services[data-variant="list"] .service-li{display:flex;gap:.8rem;align-items:baseline;padding:.55rem 0}
.sec--services[data-variant="numbered"] .services__grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem}
.sec--services[data-variant="numbered"] .service-num{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.sec--services[data-variant="numbered"] .service-num__n{font-family:var(--head-font);font-weight:var(--head-weight);font-size:2.9rem;line-height:.9;color:var(--emph)}
.sec--services[data-variant="numbered"] .service-num h3{margin:.1rem 0 .3rem}

/* --- gallery (figure + figcaption: הכיתוב שהלקוחה כתבה מוצג, לא רק ב-alt) --- */
.gallery__item{margin:0}
.gallery__wrap img{border-radius:var(--radius);width:100%;object-fit:cover}
.gallery__item figcaption{color:var(--on-surface);opacity:.85;font-size:.95rem;line-height:1.5;padding:.6rem .2rem 0}
.sec--gallery[data-variant="grid"] .gallery__wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.sec--gallery[data-variant="grid"] .gallery__wrap img{aspect-ratio:4/3}
.sec--gallery[data-variant="masonry"] .gallery__wrap{columns:3;column-gap:1.1rem}
.sec--gallery[data-variant="masonry"] .gallery__item{break-inside:avoid;margin-bottom:1.1rem}
.sec--gallery[data-variant="strip"] .gallery__wrap{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem}
.sec--gallery[data-variant="strip"] .gallery__item{flex:0 0 70%;scroll-snap-align:center}
.sec--gallery[data-variant="strip"] .gallery__wrap img{aspect-ratio:4/3}

/* --- audience: "למי זה מתאים" — קהל היעד כרכיב, לא כפסקה --- */
.aud__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.1rem}
.aud-card{background:var(--surface-2);border:1px solid color-mix(in srgb,var(--on-surface) 10%,transparent);border-radius:var(--radius);padding:1.5rem 1.2rem;text-align:center}
.sec.alt .aud-card{background:var(--surface)}
.aud-card__icon{font-size:1.9rem;line-height:1;color:var(--emph)}
.aud-card b{display:block;margin-top:.6rem;font-size:1.05rem}
.aud-card p{margin:.4rem 0 0;opacity:.85;font-size:.96rem}
.aud__check{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.8rem 2rem;max-width:920px;margin-inline:auto}
.aud__check li{position:relative;padding-inline-start:1.9rem;line-height:1.6}
.aud__check li::before{content:"✓";position:absolute;inset-inline-start:0;top:0;color:var(--emph);font-weight:700}

/* --- process: "איך זה עובד" — שלבים ממוספרים --- */
.proc{display:grid;gap:1.5rem}
.sec--process[data-variant="steps"] .proc{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.proc__n{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:var(--accent-bg);color:var(--on-accent-bg);font-family:var(--head-font);font-weight:var(--head-weight);font-size:1.2rem;flex:0 0 auto}
.proc__item h3{margin:.7rem 0 .35rem}
.proc__item p{margin:0;opacity:.88}
.sec--process[data-variant="timeline"] .proc{max-width:720px;margin-inline:auto;gap:0}
.sec--process[data-variant="timeline"] .proc__item{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;padding-bottom:1.7rem}
.sec--process[data-variant="timeline"] .proc__item h3{margin:.55rem 0 .3rem}

/* --- values: "למה אנחנו" — היתרון ככרטיסים --- */
.val__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem}
.val-card{background:var(--surface-2);border:1px solid color-mix(in srgb,var(--on-surface) 10%,transparent);border-radius:var(--radius);padding:1.5rem}
.sec.alt .val-card{background:var(--surface)}
.val-card__icon{font-size:1.7rem;line-height:1;color:var(--emph);font-family:var(--head-font);font-weight:var(--head-weight)}
.val-card h3{margin:.55rem 0 .35rem}
.val-card p{margin:0;opacity:.88}

/* --- testimonials --- */
.quote{max-width:760px;margin-inline:auto;text-align:center}
.quote__stars{color:var(--emph);font-size:1.3rem;letter-spacing:.1em}
.quote__text{font-size:var(--fs-sub);margin:.6rem 0}
.quote__who{font-weight:700;color:var(--emph)}
.testi__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem}
.testi-card{background:var(--surface-2);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}
.sec.alt .testi-card{background:var(--surface)}
.testi-card__who{font-weight:700;color:var(--emph);margin-top:.6rem}
.sec--testimonials[data-variant="carousel"] .testi__grid{display:flex;overflow-x:auto;gap:1.1rem;scroll-snap-type:x mandatory;padding-bottom:.6rem}
.sec--testimonials[data-variant="carousel"] .testi-card{flex:0 0 min(340px,82%);scroll-snap-align:center}

/* --- faq --- */
.faq__list{max-width:820px;margin-inline:auto}
.faq__item{border-bottom:1px solid color-mix(in srgb,var(--on-surface) 13%,transparent)}
.faq__q{width:100%;text-align:right;background:transparent;border:0;font:inherit;font-weight:700;color:var(--on-surface);padding:1.05rem 0;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq__q::after{content:"+";color:var(--emph);font-size:1.3rem;flex:0 0 auto}
.faq__a{color:var(--on-surface);opacity:.85;padding-bottom:1.1rem;margin:0}
.sec--faq[data-variant="accordion"] .faq__a{display:none}
.sec--faq[data-variant="accordion"] .faq__item[data-open] .faq__a{display:block}
.sec--faq[data-variant="accordion"] .faq__item[data-open] .faq__q::after{content:"\2212"}
.sec--faq[data-variant="open"] .faq__list{max-width:var(--maxw);columns:2;column-gap:2.4rem}
.sec--faq[data-variant="open"] .faq__item{break-inside:avoid}
.sec--faq[data-variant="open"] .faq__q,.sec--faq[data-variant="list"] .faq__q{cursor:default}
.sec--faq[data-variant="open"] .faq__q::after,.sec--faq[data-variant="list"] .faq__q::after{content:""}

/* --- contact --- */
.contact{max-width:660px;margin-inline:auto;text-align:center}
.contact__cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.3rem}
.contact__meta{margin-top:1.2rem;color:var(--on-surface);opacity:.85;display:grid;gap:.3rem}
.contact__meta b{color:var(--emph)}

/* --- footer --- */
.footer{background:var(--bg);color:var(--hero-text);padding-block:2.2rem;text-align:center}
.footer a{color:var(--hero-text);opacity:.9;text-decoration:none;margin-inline:.7rem}
.footer__brand{font-weight:800;font-size:1.1rem;margin-bottom:.5rem}
.footer__social{display:flex;gap:1rem;justify-content:center;margin:.8rem 0}
.footer__rights{opacity:.7;font-size:.85rem;margin-top:.6rem}
/* קרדיט מערכת — מודגש, בכל דף */
.footer__credit{margin:.9rem 0 0;font-weight:700;font-size:.9rem}
.footer__credit a{color:var(--hero-text);text-decoration:underline;text-underline-offset:3px;margin:0}

/* --- responsive --- */
@media (max-width:760px){
  .nav__toggle{display:block}
  .nav__links{display:none;position:absolute;inset-inline:0;top:100%;flex-direction:column;gap:0;background:var(--bg);padding:.6rem var(--gutter);border-top:1px solid var(--nav-line)}
  .nav[data-open] .nav__links{display:flex}
  .nav__links li{padding:.5rem 0;border-bottom:1px solid var(--nav-line)}
  .hero--split .hero__inner{grid-template-columns:1fr}
  .hero--split .hero__media{order:-1}
  .sec--about[data-variant="portrait"] .about,.sec--about[data-variant="portraitReverse"] .about{grid-template-columns:1fr}
  .sec--about[data-variant="portraitReverse"] .about__media{order:-1}
  .sec--gallery[data-variant="grid"] .gallery__wrap{grid-template-columns:repeat(2,1fr)}
  .sec--gallery[data-variant="masonry"] .gallery__wrap{columns:2}
  .sec--faq[data-variant="open"] .faq__list{columns:1}
}
/* ===== _rich.css — richness layers (8). Tokens only, no direct colors, no !important. ===== */

/* --- (7) mood engine: data-mood drives head font/weight, body font, radius, poster scale --- */
:root[data-mood="warm"]   { --head-font:"Frank Ruhl Libre",serif; --head-weight:700; --font:"Assistant",sans-serif; --radius:18px }
:root[data-mood="lux"]    { --head-font:"Frank Ruhl Libre",serif; --head-weight:500; --font:"Heebo",sans-serif;     --radius:6px;  --fs-h1:clamp(2.4rem,6.5vw,4.2rem) }
:root[data-mood="modern"] { --head-font:"Heebo",sans-serif;       --head-weight:900; --font:"Assistant",sans-serif; --radius:12px }
:root[data-mood="bold"]   { --head-font:"Secular One",sans-serif; --head-weight:400; --font:"Heebo",sans-serif;     --radius:4px;  --fs-h1:clamp(2.8rem,9vw,4.8rem); --lh-tight:1.06 }
:root[data-mood="festive"]{ --head-font:"Secular One",sans-serif; --head-weight:400; --font:"Assistant",sans-serif; --radius:20px; --fs-h1:clamp(2.8rem,9vw,5rem);   --lh-tight:1.06 }
/* explicit font choice overrides mood for headings too (present only when user picked a specific font) */
:root[data-font="heebo"]    { --head-font:"Heebo",sans-serif }
:root[data-font="assistant"]{ --head-font:"Assistant",sans-serif }
:root[data-font="rubik"]    { --head-font:"Rubik",sans-serif }
:root[data-font="frank"]    { --head-font:"Frank Ruhl Libre",serif }
:root[data-font="varela"]   { --head-font:"Varela Round",sans-serif }

/* --- hero stacking: art behind, decor above art, content on top --- */
.hero__art{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero__decor{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero__frame{position:absolute;inset:14px;z-index:1;pointer-events:none}
.hero .wrap,.hero__inner{position:relative;z-index:2}
/* עוטף הניווט מעל עוטף התוכן: שניהם z-index:2, ולכן המאוחר ב-DOM (הכותרת) נצבע מעל
   התפריט הנייד הפתוח והוא נראה שקוף (נמדד בנייד). הניווט חייב שכבה גבוהה משלו. */
.hero > .wrap:first-of-type{z-index:20}
.nav__links{z-index:20}

/* --- (2) stacked two-color title --- */
.hero__title .line{display:block}
.hero__title .line--em{color:var(--hero-em)}
.hero--fullImage .hero__title .line--em{color:#fff}

/* --- (1) hero backgrounds --- */
/* sunburst: conic rays (two hues) + scrim behind the text for guaranteed contrast */
.hero--sunburst .hero__art::before{content:"";position:absolute;inset:-25%;
  background:repeating-conic-gradient(from 0deg at 50% 40%, var(--hero-em) 0deg 3.2deg, transparent 3.2deg 9deg, var(--accent2) 9deg 12.2deg, transparent 12.2deg 18deg);opacity:.4}
.hero--sunburst .hero__art::after{content:"";position:absolute;inset:0;
  background:radial-gradient(44% 48% at 50% 40%, var(--hero-scrim) 0%, var(--hero-scrim) 34%, transparent 76%)}
/* layers: soft overlapping hills at the foot (landscape depth) */
.hero--layers .hero__art{background:
  radial-gradient(150% 62% at 50% 130%, color-mix(in srgb,var(--hero-em) 55%, transparent), transparent 68%),
  radial-gradient(130% 56% at 15% 140%, color-mix(in srgb,var(--accent2) 48%, transparent), transparent 66%),
  radial-gradient(130% 52% at 88% 142%, color-mix(in srgb,var(--accent-bg) 42%, transparent), transparent 64%)}
/* mono: solid darkened accent block + thin horizon line; inverted button */
.hero--mono{background:var(--mono-bg);color:var(--mono-text)}
.hero--mono .hero__title,.hero--mono .hero__sub,.hero--mono .nav__logo,.hero--mono .nav__links a,.hero--mono .nav__toggle{color:var(--mono-text)}
.hero--mono .hero__sub{opacity:.9}
.hero--mono .hero__inner::after{content:"";display:block;height:1.5px;max-width:340px;margin-top:1.8rem;background:color-mix(in srgb,var(--mono-text) 60%, transparent)}
.hero--mono .btn--primary{background:var(--mono-text);color:var(--mono-bg)}
.hero--mono .btn--ghost{color:var(--mono-text);border-color:color-mix(in srgb,var(--mono-text) 55%, transparent)}
/* wave: surface-colored wave at hero foot, flows into first section */
.hero--wave .hero__wave{position:absolute;left:0;right:0;bottom:-1px;z-index:2;line-height:0;color:var(--surface)}
.hero--wave .hero__wave svg{display:block;width:100%;height:70px}

/* --- (4) decor: scattered shapes, corners only, never behind text --- */
.hero__decor i{position:absolute;display:block;border-radius:50%}
.hero__decor i:nth-child(1){width:64px;height:64px;background:var(--hero-em);top:15%;right:7%;opacity:.22}
.hero__decor i:nth-child(2){width:26px;height:26px;border:3px solid var(--hero-em);top:24%;left:11%;opacity:.5}
.hero__decor i:nth-child(3){width:14px;height:14px;background:var(--accent2);bottom:28%;right:15%;opacity:.6}
.hero__decor i:nth-child(4){width:42px;height:42px;border:2px solid var(--accent2);bottom:15%;left:9%;opacity:.35}
.hero__decor i:nth-child(5){width:10px;height:10px;background:var(--hero-em);top:42%;right:24%;opacity:.55}
.hero__decor i:nth-child(6){width:18px;height:18px;background:var(--accent2);border-radius:3px;transform:rotate(45deg);bottom:36%;left:20%;opacity:.4}

/* --- (4) texture: subtle print noise on section backgrounds --- */
.texture{position:relative;isolation:isolate}
.texture::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* --- (4) frame: double outline on hero --- */
.hero.frame .hero__frame{border:1px solid color-mix(in srgb,var(--hero-em) 55%, transparent);border-radius:calc(var(--radius) + 6px)}
.hero.frame .hero__frame::after{content:"";position:absolute;inset:6px;border:1px solid color-mix(in srgb,var(--hero-em) 30%, transparent);border-radius:inherit}

/* --- (4) giant quote glyph on testimonials --- */
.sec--testimonials .quote{position:relative}
.sec--testimonials .quote::before{content:"\201D";position:absolute;top:-.45em;right:-.05em;font-family:Georgia,serif;font-size:4rem;line-height:1;color:color-mix(in srgb,var(--emph) 25%, transparent);z-index:0}
.sec--testimonials .quote>*{position:relative;z-index:1}

/* --- (6) featureMoment band: full accent-colored section --- */
.sec--band{background:var(--accent-bg);color:var(--on-accent-bg)}
.sec--band .sec__title,.sec--band .sec__lead,.sec--band .kicker,.sec--band p,.sec--band .contact{color:var(--on-accent-bg)}
.sec--band .btn--primary{background:var(--surface);color:var(--emph)}
.sec--band .btn--ghost{color:var(--on-accent-bg);border-color:var(--on-accent-bg)}
.sec--band .contact__meta b{color:var(--on-accent-bg)}
/* כרטיס בתוך פס = משטח בפני עצמו → חוזר לצמד (--surface / --on-surface) שמוכח ≥4.5 בכל 19 הפלטות.
   בלי זה, טקסט הפס (--on-accent-bg, כהה) יושב על כרטיס כהה = שחור-על-שחור (נמדד, פלטת night). */
.sec--band .testi-card,.sec--band .service-card,.sec--band .aud-card,.sec--band .val-card{background:var(--surface);color:var(--on-surface);box-shadow:none;border:1px solid color-mix(in srgb,var(--on-surface) 12%,transparent)}
.sec--band .testi-card p,.sec--band .service-card p,.sec--band .aud-card p,.sec--band .val-card p,.sec--band .testi-card h3,.sec--band .service-card h3,.sec--band .val-card h3,.sec--band .testi-card b,.sec--band .service-card b,.sec--band .aud-card b{color:var(--on-surface)}
.sec--band .testi-card .quote__stars,.sec--band .service-card__icon,.sec--band .aud-card__icon,.sec--band .val-card__icon,.sec--band .testi-card__who{color:var(--emph)}
.sec--band .aud__check li{color:var(--on-accent-bg)}
.sec--band .aud__check li::before,.sec--band .proc__n{color:var(--on-accent-bg)}
.sec--band .proc__n{background:color-mix(in srgb,var(--on-accent-bg) 16%,transparent)}
/* כוכבים/גרש ישירות על הפס (וריאנט ציטוט בודד) — על צבע המבטא, לא --emph שעלול להיבלע בו */
.sec--band .quote>.quote__stars{color:var(--on-accent-bg)}
.sec--band .quote::before{color:color-mix(in srgb,var(--on-accent-bg) 30%,transparent)}
.sec--band .quote__who{color:var(--on-accent-bg)}

/* --- (8) handwritten signature --- */
.signature{font-family:"Playpen Sans Hebrew","Frank Ruhl Libre",cursive;font-size:1.7rem;color:var(--emph);margin-top:1rem}

/* --- (5) entrance animations — only when JS present AND motion allowed --- */
@media (prefers-reduced-motion: no-preference){
  .js-anim .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .js-anim .reveal.in{opacity:1;transform:none}
  .js-anim .hero__body .reveal:nth-child(2){transition-delay:.08s}
  .js-anim .hero__body .reveal:nth-child(3){transition-delay:.16s}
  .js-anim .hero__body .reveal:nth-child(4){transition-delay:.24s}
}