/* ============================================================
   luxury-theme.css
   Dark luxury theme override — נטען אחרי כל ה-CSS הקיים.
   Inspired by aluk-firm.com aesthetics.
   ============================================================ */

/* Playfair Display — לספרות ולמספרים גדולים.
   חייב להופיע לפני כל כלל אחר בקובץ, אחרת הדפדפן מתעלם ממנו. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800;900&display=swap');

/* ============================================================
   0. גופן ראשי — Assistant (Google Fonts, רישיון OFL)
   ------------------------------------------------------------
   הוחלף ב-24/09/2026 את Almoni Neue DL 4.0 AAA.
   Almoni הוא גופן מסחרי של AlefAlefAlef (אאא), ואחסונו העצמי
   על שרת האתר חייב רישיון webfont בתשלום, לדומיין אחד.
   Assistant הוא גופן עברי חופשי ברישיון SIL Open Font License,
   המותר לשימוש מסחרי ללא תשלום וללא הגבלת דומיין — והחלופה
   הקרובה ביותר ל-Almoni באופיו. נטען דרך Google Fonts בכל עמוד.
   ============================================================ */
@font-face {
    font-family: 'Linearicons';
    src: url('../../Fonts/Linearicons-Free.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   1. VARIABLES — דריסה מלאה של הפלטה הקיימת
   ============================================================ */
:root {
    /* Brand palette — מעודן לכיוון aluk-firm: נייבי עמוק יותר + זהב נקי יותר */
    --bg-primary:        #08111B;     /* נייבי כהה מאוד */
    --bg-secondary:      #0D1A28;
    --bg-tertiary:       #122438;
    --bg-elevated:       #182f47;

    --accent-gold:        #BF9E5C;    /* זהב מאופק/מינימליסטי */
    --accent-gold-bright: #DFB97A;
    --accent-gold-dark:   #8E7339;
    --accent-gold-glow:   rgba(191, 158, 92, 0.35);

    --brand-teal:        #105675;
    --brand-teal-bright: #177fab;

    --text-primary:      #F5F1E8;
    --text-secondary:    #B8B0A0;
    --text-muted:        #9c9485;   /* היה #7a7468 — 3.4:1 בלבד מול הרקעים הכהים. עכשיו ≥4.55:1 (WCAG AA) */

    --border-subtle:     rgba(191, 158, 92, 0.22);
    --border-strong:     rgba(191, 158, 92, 0.45);

    /* Override existing system tokens so cascade reaches everything */
    --primary:           var(--brand-teal);
    --primary-light:     var(--brand-teal-bright);
    --primary-dark:      var(--bg-primary);

    --accent:            var(--accent-gold);
    --accent-light:      var(--accent-gold-bright);
    --accent-dark:       var(--accent-gold-dark);

    --tertiary:          #8fb4da;
    --tertiary-light:    #b3cbe5;
    --tertiary-dark:     #6d97c2;

    --secondary:         var(--text-secondary);
    --secondary-light:   #c8c0b0;
    --secondary-dark:    #888273;

    /* CRITICAL: every "white background" becomes dark navy */
    --bg-cream:          var(--bg-secondary);
    --bg-cream-dark:     var(--bg-tertiary);
    --surface:           var(--bg-tertiary);
    --bg-dark:           var(--bg-primary);
    --bg-dark-deeper:    #050d15;

    --text:              var(--text-primary);
    --text-light:        var(--text-secondary);

    /* Fonts — Assistant הוא הפונט הראשי (Google Fonts, OFL) */
    --font-primary:   'Assistant', 'Heebo', 'Open Sans Hebrew', -apple-system, sans-serif;
    --font-secondary: 'Assistant', 'Frank Ruhl Libre', 'David Libre', 'Heebo', sans-serif;
    --font-display:   'Playfair Display', 'Assistant', 'Frank Ruhl Libre', serif;

    /* Sharper radii */
    --radius-sm:   4px;
    --radius:      8px;
    --radius-lg:   12px;

    /* Luxury shadows */
    --shadow-sm:      0 2px 8px rgba(0,0,0,0.30);
    --shadow:         0 6px 24px rgba(0,0,0,0.40);
    --shadow-lg:      0 12px 48px rgba(0,0,0,0.55);
    --shadow-accent:  0 8px 28px var(--accent-gold-glow);
}


/* ============================================================
   2. BASE — body, html, links, headings
   ============================================================ */
html, body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

body {
    background:
        radial-gradient(ellipse at top right, rgba(16,86,117,0.18) 0%, transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(191,158,92,0.06) 0%, transparent 50%),
        var(--bg-primary) !important;
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
}

/* Disable the old body::before overlay if present */
body::before { background: none !important; opacity: 0 !important; }

main { background: transparent; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: -0.5px;
}

h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 700; line-height: 1.1; }
h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2vw + 0.5rem, 1.7rem); font-weight: 600; }

p { color: var(--text-secondary); line-height: 1.75; }

a { color: var(--accent-gold); }
a:hover { color: var(--accent-gold-bright); }

::selection { background: var(--accent-gold); color: var(--bg-primary); }

/* ============================================================
   3. HEADER — top bar with thin gold strip
   ============================================================ */
#header,
header#header {
    background: rgba(10, 21, 32, 0.92) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-top: 3px solid var(--accent-gold);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 2px 18px rgba(0,0,0,0.35);
}

#header.header-scrolled {
    background: rgba(10, 21, 32, 0.98) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.55);
}

.logo-name { color: var(--text-primary); font-family: var(--font-secondary); }
.logo-title { color: var(--text-secondary); }
.logo-emblem {
    background: linear-gradient(135deg, var(--accent-gold-dark), var(--accent-gold-bright));
    color: var(--bg-primary);
    font-family: var(--font-display);
    box-shadow: 0 4px 14px rgba(191, 158, 92, 0.40);
}

nav ul a {
    color: var(--text-primary) !important;
    font-weight: 400;
    letter-spacing: 0.2px;
    font-size: 0.95rem;
    transition: color 0.25s ease;
}
nav ul a:hover { color: var(--accent-gold-bright) !important; }
nav ul a::after { background: var(--accent-gold) !important; height: 1px; }

.mobile-toggle span { background: var(--accent-gold) !important; }

/* CTA in header */
.cta-btn {
    background: var(--accent-gold) !important;
    color: var(--bg-primary) !important;
    border-radius: 3px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 0.65rem 1.3rem !important;
}
.cta-btn:hover {
    background: var(--accent-gold-bright) !important;
    box-shadow: var(--shadow-accent);
}

/* ============================================================
   4. SECTIONS — backgrounds replaced (NO WHITE LEFT)
   ============================================================ */
.section-light,
.section-cream {
    background: var(--bg-secondary) !important;
    color: var(--text-primary);
}

.section-cream {
    background: var(--bg-tertiary) !important;
}

.section-dark {
    background: var(--bg-primary) !important;
    color: var(--text-primary);
}

.section-light::before,
.section-cream::before,
.section + .section::before { display: none !important; }

.section-light h2, .section-light h3,
.section-cream h2, .section-cream h3 {
    color: var(--text-primary) !important;
}

.section-light p, .section-cream p {
    color: var(--text-secondary) !important;
}

/* Section eyebrow + gold underline */
.section-header { text-align: center; margin-bottom: 3rem; }

.section-tag {
    background: transparent !important;
    color: var(--accent-gold) !important;
    border: 1px solid var(--border-subtle) !important;
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 0.78rem;
    padding: 0.45rem 1.4rem !important;
    border-radius: 2px !important;
    display: inline-block;
    margin-bottom: 1.25rem;
}

/* .section-title הוא inline-block (כדי שקו הזהב יתמקם לפי רוחב הטקסט).
   בלי הכלל הבא, תגית inline-block שלפניו נדבקת אליו לאותה שורה
   בכל section-header שאין אחריו subtitle שיכפה מעבר שורה. */
.section-header .section-tag {
    display: block;
    width: fit-content;
    margin-inline: auto;
}

/* כותרות מיושרות-ימין: התגית נשארת בתחילת השורה ולא במרכז */
.section-success-stories .section-header .section-tag {
    margin-inline: 0;
}

.section-title {
    color: var(--text-primary) !important;
    font-family: var(--font-secondary);
    position: relative;
    padding-bottom: 1.25rem;
    margin-bottom: 1rem;
    display: inline-block;
}

.section-title::before,
.section-title::after { display: none !important; }

.section-title {
    background: none !important;
}

/* Gold underline below H2 */
.section-header .section-title::after,
.section-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    width: 70px;
    height: 2px;
    background: var(--accent-gold) !important;
    display: block !important;
    left: auto;
    top: auto;
    opacity: 1;
}

.section-subtitle {
    color: var(--text-secondary) !important;
    margin-top: 0.8rem;
}

/* ============================================================
   5. HERO — centered + video background
   ============================================================ */
.hero {
    min-height: 100vh !important;
    padding: calc(var(--header-height) + 5rem) 0 4rem !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary);
    overflow: hidden;
    position: relative;
}

.hero::before, .hero::after { display: none !important; }

.hero-video,
.hero-video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-video { z-index: 1; }
.hero-video-poster { z-index: 0; }

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10,21,32,0.55) 0%,
        rgba(10,21,32,0.75) 50%,
        rgba(10,21,32,0.92) 100%);
    z-index: 2;
}

.hero .container {
    position: relative;
    z-index: 3;
}

/* Centered hero layout */
.hero-center {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.hero-eyebrow {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-gold);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    position: relative;
}

.hero-eyebrow::after {
    content: '';
    display: block;
    width: 80px;
    height: 1px;
    background: var(--accent-gold);
    margin: 1.2rem auto 0;
}

.hero h1,
.hero-title {
    color: var(--text-primary) !important;
    font-family: var(--font-secondary) !important;
    font-weight: 700;
    font-size: clamp(2.8rem, 5.5vw, 5rem);   /* גדול וחד יותר */
    line-height: 1.08;
    letter-spacing: -1.2px;
    margin-bottom: 1.75rem;
    text-shadow: 0 2px 28px rgba(0,0,0,0.65), 0 0 1px rgba(255,255,255,0.04);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.hero h1 span,
.hero-title span,
.hero-title .accent {
    color: var(--accent-gold-bright) !important;
    font-weight: 700;
}

.hero-sub {
    font-family: var(--font-primary);
    font-size: clamp(1.05rem, 1.2vw + 0.5rem, 1.35rem);
    color: var(--text-primary);
    opacity: 0.92;
    max-width: 720px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
    font-weight: 300;
}

.hero-buttons,
.hero-buttons-centered {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 4rem;
}

/* Hero stats at bottom */
.hero-stats,
.hero-stats-inline {
    display: inline-flex;
    gap: 3rem;
    align-items: center;
    background: rgba(20, 40, 56, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 1.5rem 2.5rem;
    margin: 0 auto;
    position: relative;
    bottom: auto !important;
    left: auto !important;
}

.hero-stats .stat-item { text-align: center; }

.hero-stats .stat-number,
.stat-number {
    font-family: var(--font-display) !important;
    font-size: clamp(1.8rem, 2vw + 1rem, 2.5rem);
    font-weight: 700;
    color: var(--accent-gold) !important;
    line-height: 1;
    display: block;
    /* בהקשר RTL הסימן הנייטרלי נזרק לצד השני: "30+" הוצג כ-"+30".
       בידוד כרצף LTR שומר על הסדר הנכון גם ל-%‎ ול-+. */
    direction: ltr;
    unicode-bidi: isolate;
}

.stat-label {
    color: var(--text-secondary) !important;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 0.5rem;
    display: block;
}

.stat-divider {
    width: 1px;
    height: 36px;
    background: var(--accent-gold);
    opacity: 0.35;
}

/* ============================================================
   6. EXPERTISE STRIP — 4 main areas (moved out of hero)
   ============================================================ */
.expertise-strip {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0 !important;
    position: relative;
    z-index: 5;
}

.expertise-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.expertise-strip-item {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--text-primary);
    border-left: 1px solid var(--border-subtle);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    display: block;
}

.expertise-strip-item:last-child { border-left: 0; }

.expertise-strip-item::before {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 0;
    background: linear-gradient(to top, var(--accent-gold-glow), transparent);
    transition: height 0.4s ease;
    z-index: 0;
}

.expertise-strip-item:hover::before { height: 100%; }

.expertise-strip-item > * { position: relative; z-index: 1; }

.expertise-strip-item i {
    font-size: 2rem;
    color: var(--accent-gold);
    margin-bottom: 0.85rem;
    display: block;
    transition: transform 0.4s ease;
}

.expertise-strip-item:hover i {
    transform: translateY(-4px);
    color: var(--accent-gold-bright);
}

.expertise-strip-item strong {
    font-family: var(--font-secondary);
    font-size: 1.15rem;
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
}

.expertise-strip-item small {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.expertise-strip-item.flagship {
    background: linear-gradient(135deg, rgba(191,158,92,0.10), transparent);
}
.expertise-strip-item.flagship i { color: var(--accent-gold-bright); }

/* ============================================================
   7. INTRO SECTION — dark
   ============================================================ */
.section-intro {
    background: var(--bg-secondary) !important;
    padding: 5rem 0 !important;
}

.section-intro::before, .section-intro::after { display: none !important; }

.intro-block { max-width: 800px; margin: 0 auto; text-align: center; }

.intro-title {
    color: var(--text-primary) !important;
    font-family: var(--font-secondary);
    font-size: clamp(1.6rem, 2vw + 0.7rem, 2.4rem);
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: 1.25rem;
}

.intro-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 2px;
    background: var(--accent-gold);
}

.intro-title::before { display: none !important; }

.intro-paragraph {
    color: var(--text-secondary) !important;
    font-family: var(--font-primary) !important;
    font-size: 1.1rem !important;
    line-height: 1.85 !important;
    font-weight: 300;
}

.intro-paragraph strong { color: var(--accent-gold-bright) !important; font-weight: 600; }

/* ============================================================
   8. PUBLIC HOUSING FLAG — dramatic dark
   ============================================================ */
.section-housing {
    background:
        linear-gradient(135deg, rgba(10,21,32,0.92), rgba(15,30,46,0.85)),
        var(--bg-primary) !important;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
    padding: 5rem 0 !important;
}

.section-housing::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}

.housing-badge {
    background: var(--accent-gold) !important;
    color: var(--bg-primary) !important;
    font-family: var(--font-primary);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 0.5rem 1.4rem;
    border-radius: 3px;
}

.section-housing h2 {
    color: var(--text-primary) !important;
    font-family: var(--font-secondary);
}

.section-housing h2 span { color: var(--accent-gold-bright); }

.housing-lead {
    color: var(--text-primary) !important;
    font-family: var(--font-secondary) !important;
    font-style: normal;
}

.housing-lead strong { color: var(--accent-gold-bright); }

.housing-body { color: var(--text-secondary) !important; }

.housing-item {
    background: rgba(191, 158, 92, 0.06) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 3px !important;
    color: var(--text-primary) !important;
    font-family: var(--font-primary);
}

.housing-item i { color: var(--accent-gold) !important; }

.section-housing .btn-primary {
    background: var(--accent-gold) !important;
    color: var(--bg-primary) !important;
    border-color: var(--accent-gold) !important;
}
.section-housing .btn-primary:hover {
    background: var(--accent-gold-bright) !important;
    color: var(--bg-primary) !important;
}

.icon-burst {
    background: radial-gradient(circle, rgba(191,158,92,0.25), rgba(16,86,117,0.10) 60%, transparent) !important;
    color: var(--accent-gold-bright) !important;
}

/* ============================================================
   9. SERVICES GRID — numbered cards with video on hover
   ============================================================ */
#services { padding: 6rem 0; }

.services-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
    margin-top: 2rem;
}

.service-card {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 6px !important;
    padding: 0 !important;
    min-height: 360px;
    position: relative;
    overflow: hidden;
    text-align: right !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-sm);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end;
}

.service-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-gold) !important;
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-gold-glow);
}

/* Video & overlay layers */
.service-card-video,
.service-card-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: opacity 0.5s ease;
}

.service-card-video {
    opacity: 0;
}

.service-card:hover .service-card-video,
.service-card.is-mobile .service-card-video {
    opacity: 1;
}

.service-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10,21,32,0.30) 0%,
        rgba(10,21,32,0.70) 60%,
        rgba(10,21,32,0.95) 100%);
    z-index: 1;
    transition: background 0.5s ease;
}

.service-card:hover .service-card-overlay {
    background: linear-gradient(180deg,
        rgba(10,21,32,0.10) 0%,
        rgba(10,21,32,0.55) 60%,
        rgba(10,21,32,0.92) 100%);
}

/* Card content */
.service-card > .service-icon,
.service-card > h3,
.service-card > p,
.service-card > .service-link {
    position: relative;
    z-index: 2;
}

.service-card .service-icon {
    background: transparent !important;
    color: var(--accent-gold) !important;
    font-size: 1.5rem !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    position: absolute !important;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 3;
}

/* Big number in corner — Playfair Display */
.service-card .service-number {
    position: absolute;
    top: 1rem;
    left: 1.25rem;
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent-gold);
    opacity: 0.35;
    line-height: 1;
    z-index: 3;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.service-card:hover .service-number {
    opacity: 0.85;
    transform: translateY(-3px);
}

.service-card h3 {
    font-family: var(--font-secondary) !important;
    color: var(--text-primary) !important;
    font-size: 1.35rem !important;
    margin: 0 1.5rem 0.5rem !important;
    line-height: 1.3;
    font-weight: 600;
}

.service-card p {
    color: var(--text-secondary) !important;
    margin: 0 1.5rem 1rem !important;
    font-size: 0.93rem;
    line-height: 1.65;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease, margin 0.5s ease;
}

.service-card:hover p {
    max-height: 200px;
    opacity: 1;
    margin-bottom: 1rem !important;
}

.service-card .service-link {
    color: var(--accent-gold) !important;
    font-weight: 600;
    margin: 0 1.5rem 1.5rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
    align-self: flex-start;
}

.service-card .service-link:hover { color: var(--accent-gold-bright) !important; }

.service-card::before { display: none !important; }

/* Gold corner accent on card */
.service-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 1px;
    background: var(--accent-gold);
    transition: width 0.5s ease;
    z-index: 3;
}
.service-card:hover::after { width: 100%; }

/* ============================================================
   10. CREDENTIALS — gold value chips
   ============================================================ */
#credentials .section-tag,
.credentials .section-tag {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 3px !important;
    font-family: var(--font-primary);
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: none;
}

#credentials .section-tag i,
.credentials .section-tag i { color: var(--accent-gold); }

/* ============================================================
   11. ABOUT TEASER
   ============================================================ */
.about-teaser p, .about-teaser-text p {
    color: var(--text-secondary) !important;
}

.about-teaser-text strong { color: var(--accent-gold-bright) !important; }

/* ============================================================
   12. OFFICE TOUR — video card
   ============================================================ */
#office-tour {
    background: var(--bg-secondary) !important;
}

.video-frame {
    background:
        linear-gradient(135deg, rgba(10,21,32,0.60), rgba(20,40,56,0.50)),
        url('../../images/video-poster.jpg') center/cover no-repeat !important;
    border: 1px solid var(--border-subtle) !important;
    border-color: var(--accent-gold) !important;
    border-radius: 4px !important;
}

.video-frame .play-btn {
    background: var(--accent-gold) !important;
    color: var(--bg-primary) !important;
    box-shadow: 0 0 0 0 rgba(191,158,92,0.7);
    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(191,158,92,0.7); }
    70%  { box-shadow: 0 0 0 24px rgba(191,158,92,0); }
    100% { box-shadow: 0 0 0 0 rgba(191,158,92,0); }
}

.video-frame:hover .play-btn { background: var(--accent-gold-bright) !important; }

/* ============================================================
   13. FAQ — dark cards with gold accent
   ============================================================ */
#faq, .faq-section {
    background: var(--bg-primary) !important;
}

.faq-container { max-width: 860px; margin: 0 auto; }

.faq-item {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 4px !important;
    margin-bottom: 0.85rem;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.faq-item:hover { border-color: var(--accent-gold) !important; }

.faq-question {
    color: var(--text-primary) !important;
    font-family: var(--font-secondary) !important;
    font-weight: 600 !important;
    padding: 1.35rem 1.5rem !important;
    background: transparent !important;
    width: 100%;
    text-align: right;
    transition: background 0.3s ease;
}

.faq-question:hover { background: rgba(191,158,92,0.05) !important; }

.faq-question i {
    color: var(--accent-gold) !important;
    transition: transform 0.4s ease;
}

.faq-item.is-open .faq-question i { transform: rotate(180deg); }

.faq-answer-content {
    color: var(--text-secondary) !important;
    padding: 0 1.5rem 1.5rem !important;
    border-top: 1px solid var(--border-subtle);
    padding-top: 1rem !important;
    font-size: 0.98rem;
    line-height: 1.75;
}

/* ============================================================
   14. TESTIMONIALS — bold prominent
   ============================================================ */
.section-testimonial-hero {
    background:
        linear-gradient(135deg, rgba(10,21,32,0.94), rgba(15,30,46,0.88)),
        url('../../images/about.jpg') center 30%/cover no-repeat !important;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.section-testimonial-hero::before,
.section-testimonial-hero::after {
    color: var(--accent-gold) !important;
    opacity: 0.10;
}

.testimonial-hero-eyebrow {
    background: transparent;
    color: var(--accent-gold) !important;
    border-color: var(--border-strong) !important;
}

.testimonial-hero-quote {
    color: var(--text-primary) !important;
    font-family: var(--font-secondary) !important;
    font-style: italic;
}

.testimonial-hero-quote strong { color: var(--accent-gold-bright) !important; }

.testimonial-hero-author {
    border-top-color: var(--accent-gold) !important;
}

.testimonial-hero-author strong { color: var(--text-primary) !important; }
.testimonial-hero-author span { color: var(--text-secondary) !important; }

.testimonial-mini {
    background: rgba(20, 40, 56, 0.55) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 3px !important;
}

.testimonial-mini:hover {
    background: rgba(191, 158, 92, 0.10) !important;
    border-color: var(--accent-gold) !important;
}

.testimonial-mini strong { color: var(--accent-gold-bright) !important; }
.testimonial-mini span { color: var(--text-primary) !important; opacity: 0.85; }

/* ============================================================
   15. CONTACT — dark form
   ============================================================ */
#contact {
    background:
        linear-gradient(135deg, var(--bg-primary), var(--bg-secondary)) !important;
}

#contact h2, .contact-info h2 { color: var(--text-primary) !important; }
.contact-info p { color: var(--text-secondary) !important; }

.contact-item-icon {
    background: rgba(191, 158, 92, 0.10) !important;
    color: var(--accent-gold) !important;
    border-radius: 3px;
    border: 1px solid var(--border-subtle);
}

.contact-item-text h4 {
    color: var(--accent-gold) !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.78rem !important;
    font-weight: 700;
}

.contact-item-text p,
.contact-item-text a { color: var(--text-primary) !important; }
.contact-item-text a:hover { color: var(--accent-gold-bright) !important; }

.social-link {
    background: rgba(191, 158, 92, 0.10) !important;
    border: 1px solid var(--border-subtle);
    color: var(--accent-gold) !important;
}

.social-link:hover {
    background: var(--accent-gold) !important;
    color: var(--bg-primary) !important;
    border-color: var(--accent-gold);
}

/* Branch cards */
.branch-card {
    background: rgba(20, 40, 56, 0.55) !important;
    border: 1px solid var(--border-subtle) !important;
}

.branch-card:hover {
    background: rgba(191, 158, 92, 0.08) !important;
    border-color: var(--accent-gold) !important;
}

.branch-card h4 { color: var(--accent-gold) !important; }
.branch-card p { color: var(--text-primary) !important; }

.btn-waze {
    background: var(--accent-gold) !important;
    color: var(--bg-primary) !important;
    border-radius: 3px !important;
}
.btn-waze:hover { background: var(--accent-gold-bright) !important; }

/* Form */
.contact-form {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 4px !important;
    padding: 2.5rem !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow);
}

.contact-form h3 {
    color: var(--text-primary) !important;
    font-family: var(--font-secondary);
}

.contact-form > p {
    color: var(--text-secondary) !important;
}

.form-group label {
    color: var(--accent-gold) !important;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
}

.form-group input,
.form-group textarea,
.form-group select {
    background: rgba(10, 21, 32, 0.55) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    border-radius: 3px !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted) !important;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--accent-gold-bright) !important;
    box-shadow: 0 0 0 3px rgba(191,158,92,0.15) !important;
    background: rgba(10, 21, 32, 0.85) !important;
}

.submit-btn {
    background: var(--accent-gold) !important;
    color: var(--bg-primary) !important;
    border-radius: 3px !important;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.submit-btn:hover {
    background: var(--accent-gold-bright) !important;
    box-shadow: var(--shadow-accent);
}

.form-note { color: var(--text-secondary) !important; }
.form-note i { color: var(--accent-gold); }

/* ============================================================
   16. FOOTER — deepest dark
   ============================================================ */
footer {
    background: var(--bg-dark-deeper) !important;
    color: var(--text-secondary);
    border-top: 1px solid var(--accent-gold);
    padding: 4rem 0 1rem !important;
}

.footer-brand p { color: var(--text-secondary) !important; }

.footer-links h4,
.footer-contact h4 {
    color: var(--accent-gold) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: var(--font-primary);
}

.footer-links a { color: var(--text-primary) !important; opacity: 0.85; }
.footer-links a:hover { color: var(--accent-gold-bright) !important; opacity: 1; }

.footer-contact p { color: var(--text-secondary) !important; }
.footer-contact p i { color: var(--accent-gold); }

.footer-bottom {
    border-top: 1px solid var(--border-subtle) !important;
    color: var(--text-muted) !important;
}

.footer-legal-links a { color: var(--text-secondary) !important; }
.footer-legal-links a:hover { color: var(--accent-gold-bright) !important; }

/* ============================================================
   17. SIDE ACTIONS — luxury floating bar
   ============================================================ */
.side-actions {
    box-shadow: 4px 0 24px rgba(0,0,0,0.55);
    border-radius: 0 4px 4px 0;
}

.side-action-btn.whatsapp { background: #1f8c4a !important; }
.side-action-btn.whatsapp:hover { background: #25a258 !important; }

.side-action-btn.phone { background: var(--accent-gold) !important; color: var(--bg-primary) !important; }
.side-action-btn.phone:hover { background: var(--accent-gold-bright) !important; }

.side-action-btn:not(.whatsapp):not(.phone) {
    background: var(--brand-teal) !important;
}
.side-action-btn:not(.whatsapp):not(.phone):hover {
    background: var(--brand-teal-bright) !important;
}

.side-action-btn .label {
    background: var(--bg-primary) !important;
    color: var(--accent-gold-bright) !important;
    border: 1px solid var(--border-subtle);
}

/* WhatsApp pulse */
.side-action-btn.whatsapp {
    animation: wa-pulse 3s ease-in-out infinite;
}
@keyframes wa-pulse {
    0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
    50% { box-shadow: inset 0 0 22px rgba(255,255,255,0.18); }
}

/* ============================================================
   18. BUTTONS — refined luxury
   ============================================================ */
.btn,
.btn-primary,
.btn-secondary {
    border-radius: 3px !important;
    font-family: var(--font-primary);
    text-transform: none;
    letter-spacing: 0.3px;
}

.btn-primary {
    background: var(--accent-gold) !important;
    color: var(--bg-primary) !important;
    border-color: var(--accent-gold) !important;
    font-weight: 700;
}

.btn-primary:hover {
    background: var(--accent-gold-bright) !important;
    border-color: var(--accent-gold-bright) !important;
    color: var(--bg-primary) !important;
    box-shadow: var(--shadow-accent);
}

.btn-secondary {
    background: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--accent-gold) !important;
    font-weight: 600;
}

.btn-secondary:hover {
    background: var(--accent-gold) !important;
    color: var(--bg-primary) !important;
    border-color: var(--accent-gold) !important;
}

/* ============================================================
   19. PAGE HEADER (inner pages)
   ============================================================ */
.page-header {
    background:
        linear-gradient(135deg, rgba(10,21,32,0.92), rgba(15,30,46,0.85)),
        url('../../images/page-header-bg.jpg') center/cover no-repeat !important;
    color: var(--text-primary);
    border-bottom: 1px solid var(--accent-gold);
}

.page-header h1 {
    color: var(--text-primary) !important;
    font-family: var(--font-secondary) !important;
}

.breadcrumb a { color: var(--accent-gold) !important; }
.breadcrumb { color: var(--text-secondary) !important; }

.page-about .page-header {
    background:
        linear-gradient(135deg, rgba(10,21,32,0.90), rgba(15,30,46,0.82)),
        url('../../images/about.jpg') center 25%/cover no-repeat !important;
}

/* About page article content */
.article-content { color: var(--text-primary); }
.article-content h2, .article-content h3 { color: var(--accent-gold) !important; }
.article-content p, .article-content li { color: var(--text-secondary) !important; }
.article-content strong { color: var(--text-primary); }
.article-content a { color: var(--accent-gold-bright); }

/* Bio grid */
.bio-text p { color: var(--text-secondary) !important; }
.bio-text strong { color: var(--accent-gold-bright) !important; }
.bio-text h4 { color: var(--accent-gold) !important; }

/* Credentials list */
.credential-item {
    background: rgba(20, 40, 56, 0.55) !important;
    border-right-color: var(--accent-gold) !important;
}

.credential-item strong { color: var(--text-primary) !important; }
.credential-item span { color: var(--text-secondary) !important; }
.credential-item i { color: var(--accent-gold) !important; }

/* Certificate cards */
.cert-card {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-subtle) !important;
    border-inline-start-color: var(--accent-gold) !important;
}

.cert-card strong { color: var(--text-primary) !important; }
.cert-card span { color: var(--text-secondary) !important; }
.cert-card i { color: var(--accent-gold) !important; }

.cert-card:hover { background: rgba(191,158,92,0.06) !important; }

/* Certificate gallery */
.cert-image-card {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-subtle) !important;
}

.cert-image-card:hover { border-color: var(--accent-gold) !important; }

.cert-icon-badge {
    background: var(--accent-gold) !important;
    color: var(--bg-primary) !important;
}

/* Endorsements */
.endorsement-card {
    background: var(--bg-tertiary) !important;
    border-top-color: var(--accent-gold) !important;
    border: 1px solid var(--border-subtle);
}

.endorsement-card::before { color: var(--accent-gold) !important; opacity: 0.30; }

.endorsement-quote {
    color: var(--text-primary) !important;
    font-family: var(--font-secondary) !important;
}

.endorsement-author strong { color: var(--accent-gold-bright) !important; }
.endorsement-author span { color: var(--text-secondary) !important; }
.endorsement-author { border-top-color: var(--border-subtle) !important; }

/* Article cards */
.article-card {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-subtle) !important;
    border-top-color: var(--accent-gold) !important;
}

.article-card h3 { color: var(--text-primary) !important; }
.article-card p { color: var(--text-secondary) !important; }
.article-card .article-card-meta { color: var(--accent-gold) !important; }
.article-card .read-more { color: var(--accent-gold-bright) !important; }

/* ============================================================
   20. CURSOR GLOW — refined
   ============================================================ */
.cursor-glow {
    background: radial-gradient(circle,
        rgba(191,158,92,0.18) 0%,
        rgba(223,185,122,0.10) 30%,
        transparent 70%) !important;
}

/* ============================================================
   21. RESPONSIVE — mobile
   ============================================================ */
@media (max-width: 968px) {
    .services-grid { grid-template-columns: 1fr 1fr !important; }
    .expertise-strip-grid { grid-template-columns: 1fr 1fr !important; }
    .expertise-strip-item { border-bottom: 1px solid var(--border-subtle); }
    .expertise-strip-item:nth-child(2) { border-left: 0; }
}

@media (max-width: 768px) {
    .hero { padding: calc(var(--header-height) + 2rem) 0 3rem !important; min-height: 92vh !important; }
    .hero-video { display: none; }  /* save bandwidth on mobile */
    .hero-video-poster { display: block; }
    .hero-stats, .hero-stats-inline {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    .stat-divider { width: 40px; height: 1px; }

    .services-grid { grid-template-columns: 1fr !important; }
    .service-card { min-height: 280px; }
    /* on mobile show description always */
    .service-card p {
        max-height: 200px !important;
        opacity: 1 !important;
        margin-bottom: 1rem !important;
    }
    /* Mobile videos play always (handled by JS adding .is-mobile class) */
    .service-card .service-card-video { opacity: 0.5; }
    .service-card-overlay {
        background: linear-gradient(180deg,
            rgba(10,21,32,0.55) 0%,
            rgba(10,21,32,0.85) 60%,
            rgba(10,21,32,0.97) 100%) !important;
    }

    .expertise-strip-grid { grid-template-columns: 1fr !important; }
    .expertise-strip-item {
        border-left: 0 !important;
        border-bottom: 1px solid var(--border-subtle);
    }
}

@media (max-width: 480px) {
    .hero h1, .hero-title { font-size: clamp(1.8rem, 8vw, 2.6rem) !important; }
}

/* ============================================================
   22. ACCESSIBILITY — prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .hero-video,
    .service-card-video { display: none !important; }
    .icon-burst,
    .icon-burst::after,
    .video-frame .play-btn { animation: none !important; }
    .side-action-btn.whatsapp { animation: none !important; }
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   23. FIXES (round 2) — based on client feedback
   ============================================================ */

/* (4) Service card video — poster visible dimmed until video plays */
.service-card-video {
    opacity: 0.45 !important;
    transition: opacity 0.5s ease !important;
    filter: brightness(0.75) saturate(0.85);
}
.service-card:hover .service-card-video,
.service-card.is-mobile .service-card-video {
    opacity: 1 !important;
    filter: brightness(1) saturate(1);
}

/* (2) FAQ — חזק ובולט, נשאר גלוי גם בסגור */
#faq, .faq-section {
    background: var(--bg-primary) !important;
    padding: 5rem 0;
}

.faq-item {
    background: var(--bg-elevated) !important;     /* יותר בהיר מהרקע */
    border: 1px solid var(--accent-gold-dark) !important;
    border-right: 4px solid var(--accent-gold) !important;
    border-radius: 4px !important;
    margin-bottom: 0.85rem;
    overflow: hidden;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.faq-item:hover {
    border-color: var(--accent-gold-bright) !important;
    box-shadow: 0 6px 24px rgba(191,158,92,0.20);
}
.faq-item.is-open {
    border-right-color: var(--accent-gold-bright) !important;
    box-shadow: 0 6px 28px rgba(191,158,92,0.28);
}

.faq-question {
    color: var(--text-primary) !important;
    font-family: var(--font-secondary) !important;
    font-weight: 600 !important;
    padding: 1.4rem 1.5rem !important;
    background: transparent !important;
    width: 100%;
    text-align: right;
    transition: background 0.3s ease;
    font-size: 1.05rem;
}

.faq-question:hover { background: rgba(191,158,92,0.08) !important; }

.faq-question i {
    color: var(--accent-gold) !important;
    transition: transform 0.4s ease;
    font-size: 0.85rem;
}

.faq-item.is-open .faq-question {
    background: rgba(191,158,92,0.06) !important;
    color: var(--accent-gold-bright) !important;
}

.faq-item.is-open .faq-question i { transform: rotate(180deg); }

.faq-answer {
    max-height: 0 !important;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.faq-item.is-open .faq-answer {
    max-height: 800px !important;
}

.faq-answer-content {
    padding: 1rem 1.5rem 1.5rem !important;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-secondary) !important;
    line-height: 1.75;
    font-size: 0.98rem;
}

/* (3) TRUE 2-column split sections — image fills one side, content the other */
.section-split {
    display: flex;
    align-items: stretch;
    min-height: 60vh;
    padding: 0 !important;
    overflow: hidden;
    position: relative;
}

.section-split .section-split-content {
    flex: 1 1 50%;
    padding: 5rem 4rem 5rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg-secondary);
    position: relative;
    z-index: 1;
}

.section-split .section-split-visual {
    flex: 1 1 50%;
    background-color: var(--bg-primary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 400px;
}

/* dark overlay on visual half */
.section-split .section-split-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,21,32,0.55) 0%, rgba(10,21,32,0.20) 100%);
}

/* mirror variant — content on LEFT, visual on RIGHT */
.section-split.section-split-mirror {
    flex-direction: row-reverse;
}
.section-split.section-split-mirror .section-split-content {
    padding: 5rem 3rem 5rem 4rem;
}

/* Content inside split — typography */
.section-split-content .section-tag { margin-bottom: 1.25rem; }
.section-split-content .section-title { display: inline-block; padding-bottom: 1rem; }
.section-split-content .section-title::after { right: 0; transform: none; left: auto; }
.section-split-content p {
    color: var(--text-secondary) !important;
    font-size: 1.05rem;
    line-height: 1.85;
    margin-bottom: 1.1rem;
}
.section-split-content p strong { color: var(--accent-gold-bright); }

/* mobile — stack visual on top, content below */
@media (max-width: 900px) {
    .section-split, .section-split.section-split-mirror {
        flex-direction: column;
    }
    .section-split .section-split-visual {
        min-height: 240px;
        flex: 0 0 240px;
    }
    .section-split .section-split-content,
    .section-split.section-split-mirror .section-split-content {
        padding: 3rem 1.5rem;
        flex: 1 1 auto;
    }
}

/* (7) Hero title — clean separator between names */
.hero-title-sep {
    color: var(--accent-gold) !important;
    font-weight: 300;
    margin: 0 1.2rem;
    font-size: 0.7em;
    vertical-align: middle;
    opacity: 0.8;
    display: inline-block;
}
.hero h1 span:not(.hero-title-sep),
.hero-title span:not(.hero-title-sep) {
    color: var(--text-primary) !important;  /* both names same color */
    font-weight: 700;
}

/* (5) Back to top button */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    background: var(--accent-gold);
    color: var(--bg-primary);
    border: 0;
    border-radius: 4px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.45), 0 0 0 1px var(--accent-gold-bright) inset;
    cursor: pointer;
    z-index: 9990;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}
.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.back-to-top:hover {
    background: var(--accent-gold-bright);
    transform: translateY(-3px);
}

/* mobile: don't conflict with bottom side-actions */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 76px;   /* leave room for side-actions bar (64px) + margin */
        right: 16px;
        width: 44px;
        height: 44px;
    }
}

/* (6) MOBILE FIX — top header bar polish */
@media (max-width: 768px) {
    #header {
        background: rgba(10, 21, 32, 0.97) !important;
        border-top-width: 2px;
    }
    #header .logo-name {
        color: var(--text-primary) !important;
        font-size: 0.92rem;
    }
    #header .logo-title {
        color: var(--accent-gold) !important;
        font-size: 0.7rem;
        letter-spacing: 1.5px;
    }
    .mobile-toggle span { background: var(--accent-gold) !important; }

    /* (6) Mobile bottom side-actions — clean: no extra label background */
    .side-action-btn .label {
        background: transparent !important;
        border: 0 !important;
        color: var(--surface) !important;
        padding: 0 !important;
        font-size: 0.72rem !important;
        font-weight: 700;
        letter-spacing: 0.3px;
        line-height: 1.1;
    }
    /* Each colored button has white-on-color label — clear contrast */
    .side-action-btn.whatsapp .label,
    .side-action-btn.phone .label,
    .side-action-btn:not(.whatsapp):not(.phone) .label {
        color: var(--surface) !important;
    }
    .side-action-btn.phone .label {
        color: var(--bg-primary) !important;   /* gold bg → dark text */
    }
}

/* (8) Success stories — גרפי, מגוון ויזואלית */
.section-success-stories {
    background:
        linear-gradient(135deg, rgba(10,21,32,0.94) 0%, rgba(15,30,46,0.90) 100%),
        url('../../images/page-header-bg.jpg') center/cover no-repeat;
    background-attachment: fixed;
    padding: 6rem 0;
    border-top: 1px solid var(--accent-gold);
    border-bottom: 1px solid var(--accent-gold);
    position: relative;
}

.section-success-stories::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 35%; height: 100%;
    background: radial-gradient(circle at top right, rgba(191,158,92,0.10), transparent 60%);
    pointer-events: none;
}

.section-success-stories .section-header {
    text-align: right;
    max-width: 600px;
    margin-right: 0;
    margin-left: auto;
    position: relative;
    z-index: 1;
}
.section-success-stories .section-title::after { right: 0; transform: none; left: auto; }

.success-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
    position: relative;
    z-index: 1;
}

.success-card {
    background: linear-gradient(165deg, rgba(20,40,56,0.95) 0%, rgba(15,30,46,0.95) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 2rem 1.75rem 1.75rem;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: right;
}

/* גוון אקסנט שונה לכל כרטיס */
.success-card:nth-child(1) { border-top: 3px solid var(--accent-gold); }
.success-card:nth-child(2) { border-top: 3px solid var(--accent-gold-bright); transform: translateY(2rem); }
.success-card:nth-child(3) { border-top: 3px solid var(--brand-teal-bright); }

.success-card:hover {
    transform: translateY(-8px) !important;
    border-color: var(--accent-gold) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.60), 0 0 0 1px var(--accent-gold-glow);
}

.success-card:nth-child(2):hover {
    transform: translateY(calc(2rem - 8px)) !important;
}

/* גרשיים זהובות גדולות בפינה */
.success-card::before {
    content: '"';
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    font-family: var(--font-display);
    font-size: 7rem;
    line-height: 1;
    color: var(--accent-gold);
    opacity: 0.22;
    font-weight: 700;
}

/* רקע גרפי דקורטיבי בכל כרטיס — שונה */
.success-card::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.5s ease;
}

.success-card:nth-child(1)::after {
    background: radial-gradient(circle, rgba(191,158,92,0.12), transparent 70%);
}
.success-card:nth-child(2)::after {
    background: radial-gradient(circle, rgba(223,185,122,0.14), transparent 70%);
    width: 160px; height: 160px;
}
.success-card:nth-child(3)::after {
    background: radial-gradient(circle, rgba(23,127,171,0.18), transparent 70%);
}

.success-card:hover::after {
    transform: scale(1.4);
}

.success-card > * { position: relative; z-index: 1; }

.success-eyebrow {
    color: var(--accent-gold);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

.success-eyebrow i { color: var(--accent-gold); }

.success-card h3 {
    font-family: var(--font-secondary) !important;
    color: var(--text-primary) !important;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    line-height: 1.4;
    font-weight: 700;
}

.success-card p {
    color: var(--text-secondary) !important;
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

.success-card-author {
    border-top: 1px solid var(--border-subtle);
    padding-top: 1rem;
    margin-top: auto;
}
.success-card-author strong { color: var(--accent-gold-bright); font-size: 0.95rem; display: block; margin-bottom: 0.15rem; }
.success-card-author span { color: var(--text-secondary); font-size: 0.82rem; }

.success-cta-row {
    margin-top: 3rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

@media (max-width: 968px) {
    .success-grid { grid-template-columns: 1fr 1fr; }
    .success-card:nth-child(2) { transform: none; }
    .success-card:nth-child(2):hover { transform: translateY(-8px) !important; }
}
@media (max-width: 640px) {
    .success-grid { grid-template-columns: 1fr; }
    .section-success-stories { background-attachment: scroll; }
}

/* (3) Container max widths for asymmetric sections to feel less centered */
.section-intro .container,
#about-teaser .container,
#office-tour .container { max-width: 1200px; }

/* ============================================================
   23B. LOGO IMAGE — header & footer (replaces text emblem)
   ============================================================ */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
}
/* ============ LOGO IMAGE — חד, גדול, עם רוחב מובהק ============ */
.logo {
    display: inline-flex !important;
    align-items: center;
    flex-shrink: 0;
    padding: 4px 0;
}
.logo-image {
    height: 82px;                /* הוגדל ל-82 לחדות מקסימלית */
    width: auto;
    display: block;
    border-radius: 5px;
    box-shadow:
        0 4px 16px rgba(0,0,0,0.55),
        0 0 0 1px rgba(191,158,92,0.28),
        0 0 18px rgba(191,158,92,0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    object-fit: contain;
    /* חידוד התמונה */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);    /* מעורר GPU rendering מדויק יותר */
    filter: contrast(1.08) saturate(1.05);
}
.logo:hover .logo-image {
    transform: translateZ(0) scale(1.03);
    box-shadow:
        0 6px 22px rgba(191,158,92,0.45),
        0 0 0 1px rgba(223,185,122,0.55),
        0 0 22px rgba(223,185,122,0.20);
    filter: contrast(1.12) saturate(1.10);
}

/* ============ HEADER — רוחב מורחב + מרווחים חזקים ============ */
#header {
    padding: 0.65rem 0 !important;
    height: auto !important;
}
#header .container {
    max-width: 1500px !important;        /* רחב משמעותית מה-1200 הסטנדרטי */
    padding: 0 2rem !important;
    min-height: 100px;
    display: flex;
    align-items: center;
}
#header .nav-wrapper {
    height: auto !important;
    gap: 2.5rem;                          /* רווח אחיד בין הלוגו, ניווט, CTA */
    width: 100%;
    align-items: center;
}

/* ניווט — דחיפה לכיוון המרכז עם מרווחים נדיבים */
#header nav { flex: 1; min-width: 0; }
#header nav ul {
    display: flex;
    justify-content: center;
    gap: 1.4rem !important;               /* רווח נראה בין הפריטים */
    flex-wrap: nowrap;
    height: auto !important;
}
#header nav ul li { white-space: nowrap; }
#header nav ul a {
    font-size: 0.92rem !important;
    padding: 0.4rem 0.2rem;
    letter-spacing: 0.15px;
    line-height: 1.2;
}

/* CTA — מרווח ברור משאר ההדר */
#header .cta-btn {
    flex-shrink: 0;
    padding: 0.7rem 1.4rem !important;
    font-size: 0.92rem !important;
    white-space: nowrap;
}

/* Footer logo — גדול יותר */
.logo-footer .logo-image {
    height: 100px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.55);
}

/* Hide legacy emblem/fallback if any markup remains */
.logo .logo-emblem,
.logo .logo-fallback { display: none !important; }

/* Breakpoints — צמצום הדרגתי כדי שלא יקרסו */
@media (max-width: 1280px) {
    #header .container { padding: 0 1.5rem !important; }
    #header .nav-wrapper { gap: 1.5rem; }
    #header nav ul { gap: 1.1rem !important; }
    #header nav ul a { font-size: 0.88rem !important; }
    .logo-image { height: 72px; }
}
@media (max-width: 1100px) {
    #header nav ul { gap: 0.85rem !important; }
    #header nav ul a { font-size: 0.85rem !important; }
    #header .cta-btn { padding: 0.6rem 1rem !important; font-size: 0.86rem !important; }
    .logo-image { height: 66px; }
}
@media (max-width: 968px) {
    .logo-image { height: 60px; }
}
@media (max-width: 768px) {
    .logo-image { height: 56px; }
    .logo-footer .logo-image { height: 80px; }
    #header { padding: 0.5rem 0 !important; }
    #header .container { min-height: 76px; padding: 0 1rem !important; }
    #header .nav-wrapper { gap: 0.75rem; }
}
@media (max-width: 380px) {
    .logo-image { height: 48px; }
}

/* ============================================================
   24. ROUND 4 — FAQ visibility fix + mobile polish
   ============================================================ */

/* FAQ — pulse the chevron on closed so it's obvious the item is interactive */
.faq-item:not(.is-open) .faq-question {
    /* visible even when closed — extra contrast */
    background: rgba(191,158,92,0.03) !important;
}
.faq-item:not(.is-open):hover .faq-question {
    background: rgba(191,158,92,0.10) !important;
}
.faq-item:not(.is-open) .faq-question i {
    opacity: 0.85;
}

/* Make sure faq items inside .reveal scroll-animation stay visible regardless of open state.
   The bug: .reveal toggled visibility via .active; FAQ used .active too. Now FAQ uses .is-open. */
.faq-item.reveal { /* opacity controlled only by .reveal.active */ }

/* === MOBILE POLISH === */
@media (max-width: 768px) {
    /* Hero — tighter, more readable */
    .hero-eyebrow {
        font-size: 0.72rem !important;
        letter-spacing: 2.5px !important;
        margin-bottom: 1rem !important;
    }
    .hero-eyebrow::after { width: 56px; margin-top: 0.85rem; }

    .hero h1, .hero-title {
        font-size: clamp(1.9rem, 7.5vw, 2.6rem) !important;
        letter-spacing: -0.5px !important;
        line-height: 1.15 !important;
        margin-bottom: 1.1rem !important;
    }
    .hero-title-sep { margin: 0 0.6rem !important; }

    .hero-sub {
        font-size: 1rem !important;
        line-height: 1.65 !important;
        margin-bottom: 1.75rem !important;
        padding: 0 0.25rem;
    }

    .hero-buttons, .hero-buttons-centered {
        gap: 0.75rem !important;
        margin-bottom: 2.5rem !important;
        width: 100%;
    }
    .hero-buttons .btn, .hero-buttons-centered .btn {
        width: 100%;
        max-width: 360px;
        justify-content: center;
        padding: 0.95rem 1.25rem !important;
        font-size: 0.98rem !important;
    }

    .hero-stats, .hero-stats-inline {
        gap: 0.85rem !important;
        padding: 1.1rem 1.25rem !important;
        flex-direction: row !important;
        flex-wrap: nowrap;
        justify-content: space-around;
        width: 100%;
        max-width: 420px;
    }
    .hero-stats .stat-divider, .stat-divider {
        width: 1px !important; height: 32px !important;
        background: var(--accent-gold) !important;
        opacity: 0.4;
    }
    .hero-stats .stat-number, .stat-number {
        font-size: 1.45rem !important;
    }
    .stat-label {
        font-size: 0.68rem !important;
        letter-spacing: 0.8px !important;
        margin-top: 0.25rem !important;
    }

    /* Expertise strip — 2x2 grid on mobile (more impactful than single column) */
    .expertise-strip-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .expertise-strip-item {
        padding: 1.35rem 0.9rem !important;
        border-bottom: 1px solid var(--border-subtle);
        border-left: 1px solid var(--border-subtle) !important;
    }
    .expertise-strip-item:nth-child(2n) { border-left: 0 !important; }
    .expertise-strip-item:nth-last-child(-n+2) { border-bottom: 0; }
    .expertise-strip-item i { font-size: 1.55rem !important; margin-bottom: 0.6rem !important; }
    .expertise-strip-item strong { font-size: 0.95rem; display:block; }
    .expertise-strip-item small { font-size: 0.75rem; opacity: 0.85; }

    /* Section split — better proportions on mobile */
    .section-split .section-split-visual {
        min-height: 200px !important;
        flex: 0 0 200px !important;
    }
    .section-split .section-split-content,
    .section-split.section-split-mirror .section-split-content {
        padding: 2.5rem 1.25rem !important;
    }
    .section-split-content p {
        font-size: 0.98rem !important;
        line-height: 1.7 !important;
    }

    /* Section titles — better hierarchy */
    .section-title {
        font-size: 1.6rem !important;
        line-height: 1.25;
    }
    .section-subtitle, .section-header p {
        font-size: 0.98rem;
        line-height: 1.6;
    }
    .section-tag {
        font-size: 0.7rem !important;
        letter-spacing: 2px !important;
    }

    /* FAQ — bigger tap targets and clearer text on mobile */
    #faq { padding: 3rem 0 !important; }
    .faq-item {
        margin-bottom: 0.7rem !important;
        border-right-width: 3px !important;
    }
    .faq-question {
        padding: 1.1rem 1.1rem !important;
        font-size: 1rem !important;
        line-height: 1.45 !important;
        gap: 0.75rem;
        min-height: 56px;
    }
    .faq-question i {
        font-size: 0.95rem !important;
        flex-shrink: 0;
    }
    .faq-answer-content {
        padding: 0.85rem 1.1rem 1.25rem !important;
        font-size: 0.94rem !important;
        line-height: 1.7 !important;
    }

    /* Success cards — better single column flow */
    .success-card {
        padding: 1.75rem 1.35rem 1.5rem !important;
    }
    .success-card h3 { font-size: 1.15rem !important; }
    .success-card p { font-size: 0.93rem !important; line-height: 1.7 !important; }
    .success-eyebrow { font-size: 0.7rem !important; letter-spacing: 1.5px !important; }

    /* Services — clearer cards */
    .service-card { min-height: 240px !important; padding: 1.75rem 1.25rem !important; }
    .service-card h3 { font-size: 1.15rem !important; line-height: 1.35; }
    .service-card p { font-size: 0.93rem !important; line-height: 1.65 !important; }

    /* Side actions bar — reduce visual weight */
    .side-actions { padding: 0.5rem !important; }

    /* Section padding */
    .section { padding: 3rem 0 !important; }
    .section-header { margin-bottom: 1.75rem !important; }
}

/* Very small phones — Galaxy Fold etc */
@media (max-width: 380px) {
    .hero h1, .hero-title { font-size: 1.7rem !important; }
    .hero-sub { font-size: 0.95rem !important; }
    .expertise-strip-grid { grid-template-columns: 1fr !important; }
    .expertise-strip-item { border-left: 0 !important; }
    .hero-stats, .hero-stats-inline { gap: 0.5rem !important; padding: 0.9rem 0.85rem !important; }
    .hero-stats .stat-number, .stat-number { font-size: 1.25rem !important; }
    .stat-label { font-size: 0.62rem !important; }
    .faq-question { font-size: 0.95rem !important; padding: 1rem 0.95rem !important; }
}

/* ============================================================
   25. ROUND 5 — Partner photos + pull-quote + aluk-style updates
   ============================================================ */

/* Partner photo frame — golden border, soft shadow */
.partner-photo-frame {
    position: relative;
    margin: 0;
    padding: 8px;
    background: linear-gradient(135deg, var(--accent-gold-dark), var(--accent-gold), var(--accent-gold-bright));
    border-radius: 4px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(191,158,92,0.30);
    overflow: hidden;
}
.partner-photo-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
    transition: transform 0.6s ease;
}
.partner-photo-frame:hover img { transform: scale(1.02); }
.partner-photo-frame figcaption {
    margin-top: 0.85rem;
    padding: 0 0.5rem 0.25rem;
    text-align: center;
    font-family: var(--font-secondary);
    font-size: 0.95rem;
    color: var(--accent-gold-bright);
    letter-spacing: 0.6px;
    background: transparent;
}

.partner-photo-portrait {
    aspect-ratio: auto;
}
.partner-photo-portrait img {
    aspect-ratio: 4/5;
    object-fit: cover;
    object-position: center top;
}

/* In bio-grid, Gil's photo fills its column nicely */
.bio-grid .partner-photo-frame {
    align-self: start;
}
.bio-grid .partner-photo-frame img {
    aspect-ratio: 4/5;
    object-fit: cover;
}

/* Pull-quote — used for TheMarker citation */
.pull-quote {
    margin: 2rem 0;
    padding: 1.5rem 1.75rem 1.5rem 1.5rem;
    border-right: 4px solid var(--accent-gold);
    background: linear-gradient(90deg, rgba(191,158,92,0.10) 0%, rgba(191,158,92,0.02) 100%);
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--text-primary);
    font-style: italic;
    border-radius: 2px;
    position: relative;
}
.pull-quote::before {
    content: '"';
    position: absolute;
    top: -10px;
    right: 12px;
    font-size: 4rem;
    color: var(--accent-gold);
    opacity: 0.25;
    font-family: var(--font-display);
    line-height: 1;
}
.pull-quote cite {
    display: block;
    margin-top: 0.85rem;
    font-style: normal;
    font-size: 0.85rem;
    color: var(--accent-gold-bright);
    font-family: var(--font-primary);
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .partner-photo-frame { padding: 6px; }
    .partner-photo-frame figcaption { font-size: 0.85rem; }
    .pull-quote {
        margin: 1.5rem 0;
        padding: 1.1rem 1.2rem;
        font-size: 1.05rem;
    }
    .pull-quote::before { font-size: 2.8rem; top: -4px; }
}

/* === Partners showcase grid (home page) === */
.partners-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-top: 2.5rem;
}
.partner-card {
    background: var(--bg-elevated, var(--bg-tertiary));
    border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--accent-gold);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.partner-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-gold-bright);
    box-shadow: 0 18px 45px rgba(0,0,0,0.55), 0 0 0 1px var(--accent-gold-glow);
}
.partner-card .partner-photo-frame {
    aspect-ratio: 16/10;
    padding: 0;
    background: var(--bg-primary);
    border-radius: 0;
    box-shadow: none;
}
.partner-card .partner-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.partner-card-body {
    padding: 1.75rem 1.5rem 1.75rem;
    text-align: right;
}
.partner-eyebrow {
    display: inline-block;
    color: var(--accent-gold);
    font-size: 0.72rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    font-weight: 700;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-subtle);
}
.partner-card h3 {
    font-family: var(--font-secondary) !important;
    color: var(--text-primary) !important;
    font-size: 1.4rem !important;
    margin: 0.5rem 0 1rem !important;
    line-height: 1.3;
}
.partner-card p {
    color: var(--text-secondary) !important;
    line-height: 1.75;
    font-size: 0.96rem;
    margin-bottom: 1.25rem;
}
.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-gold-bright) !important;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: gap 0.3s ease, color 0.3s ease;
}
.btn-link:hover { gap: 0.85rem; color: var(--text-primary) !important; }

@media (max-width: 900px) {
    .partners-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .partner-card .partner-photo-frame { aspect-ratio: 16/9; }
    .partner-card-body { padding: 1.4rem 1.2rem; }
    .partner-card h3 { font-size: 1.2rem !important; }
}

/* === Testimonials grid — aluk-firm style with large decorative quote === */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 2.5rem;
    position: relative;
    z-index: 1;
}
.testimonial-card {
    position: relative;
    background: linear-gradient(165deg, rgba(20,40,56,0.96) 0%, rgba(15,30,46,0.96) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 3rem 2rem 1.75rem;
    transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
    text-align: right;
    overflow: hidden;
}
.testimonial-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-gold) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.60), 0 0 0 1px var(--accent-gold-glow);
}
.testimonial-card-featured {
    background: linear-gradient(165deg, rgba(40,50,40,0.92) 0%, rgba(30,40,30,0.96) 100%);
    border-top: 3px solid var(--accent-gold-bright);
}

/* Decorative giant gold quote mark — aluk-style */
.testimonial-mark {
    position: absolute;
    top: -0.5rem;
    right: 1.2rem;
    font-family: var(--font-display);
    font-size: 8rem;
    line-height: 1;
    color: var(--accent-gold);
    opacity: 0.28;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
}

.testimonial-quote {
    color: var(--text-primary) !important;
    font-family: var(--font-primary);
    font-size: 1.05rem !important;
    line-height: 1.85 !important;
    margin-bottom: 1.5rem !important;
    position: relative;
    z-index: 1;
    font-style: italic;
    font-weight: 300;
}
.testimonial-author {
    border-top: 1px solid var(--border-subtle);
    padding-top: 1rem;
    margin-top: auto;
    position: relative;
    z-index: 1;
}
.testimonial-author strong {
    color: var(--accent-gold-bright);
    font-size: 1rem;
    display: block;
    margin-bottom: 0.2rem;
    font-family: var(--font-secondary);
}
.testimonial-author span {
    color: var(--text-secondary);
    font-size: 0.82rem;
    letter-spacing: 0.2px;
}

@media (max-width: 900px) {
    .testimonial-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .testimonial-card { padding: 2.5rem 1.4rem 1.4rem; }
    .testimonial-mark { font-size: 6rem; top: -0.3rem; }
    .testimonial-quote { font-size: 1rem !important; line-height: 1.75 !important; }
}

/* ============================================================
   26. ROUND 6 — Hero split layout (תמונה משמאל, טקסט מימין)
   ============================================================ */
.hero-with-portrait {
    overflow: hidden;
    position: relative;
}

/* תמונת השותפים — חצי הרוחב השמאלי, צמודה לתחתית */
.hero-portrait-cutout {
    position: absolute;
    inset: 0 50% 0 0;          /* תופסת רק את החצי השמאלי (RTL: ימין=50%, שמאל=0) */
    z-index: 1;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 1rem;
}
.hero-portrait-cutout img {
    width: auto;
    height: 92%;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom center;
    filter:
        contrast(1.04)
        drop-shadow(0 22px 34px rgba(0,0,0,0.55))
        drop-shadow(0 4px 10px rgba(0,0,0,0.40));
}

/* overlay — כהה רק מעל החצי הימני (התוכן) כדי לא לעמעם את התמונה */
.hero-with-portrait .hero-overlay {
    background:
        linear-gradient(270deg,
            rgba(8,17,27,0.62) 0%,
            rgba(8,17,27,0.55) 45%,
            rgba(8,17,27,0.25) 55%,
            rgba(8,17,27,0.10) 70%,
            rgba(8,17,27,0.00) 100%) !important;
    z-index: 2;
}

/* תוכן ה-hero — בצד ימין בלבד (החצי הימני), עם כתב ממורכז בעמודה */
.hero-with-portrait .container {
    position: relative;
    z-index: 3;
}
.hero-with-portrait .hero-center {
    margin: 0 0 0 auto;         /* RTL: דחיפה לכיוון ימין */
    max-width: 50%;             /* רק חצי הרוחב — לא חודר לאזור התמונה */
    padding-right: 1.5rem;
    padding-left: 2rem;
    text-align: center;          /* כתב ממורכז בתוך העמודה הימנית */
}
.hero-with-portrait .hero-eyebrow::after { margin: 1.2rem auto 0; }
.hero-with-portrait .hero-buttons,
.hero-with-portrait .hero-buttons-centered {
    justify-content: center;
}
.hero-with-portrait .hero-stats,
.hero-with-portrait .hero-stats-inline {
    margin: 0 auto;
}

/* התאמה לכותרת — לא חופף לתמונה */
.hero-with-portrait .hero-title { font-size: clamp(2rem, 4vw, 3.5rem) !important; }
.hero-with-portrait .hero-sub { font-size: clamp(0.98rem, 1vw + 0.5rem, 1.15rem) !important; }

/* טאבלט — צמצום פרופורציות */
@media (max-width: 1100px) {
    .hero-portrait-cutout { inset: 0 48% 0 0; }
    .hero-with-portrait .hero-center { max-width: 52%; padding-right: 1rem; padding-left: 1rem; }
    .hero-portrait-cutout img { height: 82%; }
}

/* מובייל — סטאק אנכי נקי: טקסט למעלה (45% גובה), תמונה למטה (45%), הכל ברור */
@media (max-width: 768px) {
    /* hero בגובה דינמי שמכיל את שני האלמנטים בלי חיתוך */
    .hero-with-portrait {
        min-height: auto !important;
        padding: calc(var(--header-height) + 1.25rem) 0 0 !important;
        display: flex !important;
        flex-direction: column;
    }

    /* תמונה — נצמדת לתחתית, נראית במלואה, ללא שקיפות */
    .hero-portrait-cutout {
        position: relative !important;       /* יוצא מ-absolute לזרימה הטבעית */
        inset: auto !important;
        opacity: 1;                          /* מלא — בלי רוח רפאים */
        margin-top: 1.5rem;
        padding: 0;
        order: 2;                            /* מובטח שמופיע אחרי הטקסט */
        flex-shrink: 0;
        height: auto;
    }
    .hero-portrait-cutout img {
        height: auto;
        width: 100%;
        max-width: 480px;                    /* גודל סביר במובייל */
        margin: 0 auto;
        display: block;
        max-height: 42vh;
        object-fit: contain;
        object-position: bottom center;
        filter:
            contrast(1.04)
            drop-shadow(0 14px 24px rgba(0,0,0,0.55))
            drop-shadow(0 4px 8px rgba(0,0,0,0.35));
    }

    /* overlay נכבה במובייל — אין צורך, התמונה למטה והטקסט למעלה ויש הפרדה ויזואלית */
    .hero-with-portrait .hero-overlay {
        background:
            linear-gradient(180deg,
                rgba(8,17,27,0.45) 0%,
                rgba(8,17,27,0.20) 50%,
                rgba(8,17,27,0.05) 100%) !important;
        pointer-events: none;
    }

    /* תוכן ה-hero — בחלק העליון בלבד */
    .hero-with-portrait .container {
        order: 1;
        position: relative;
    }
    .hero-with-portrait .hero-center {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 1rem;
        text-align: center;
    }
    .hero-with-portrait .hero-title {
        font-size: clamp(1.85rem, 7vw, 2.5rem) !important;
        margin-bottom: 0.85rem !important;
    }
    .hero-with-portrait .hero-sub {
        margin-bottom: 1.25rem !important;
    }
    .hero-with-portrait .hero-buttons {
        margin-bottom: 1.5rem !important;
    }

    /* סטטיסטיקות — קומפקטיות יותר כדי שיהיה מקום לתמונה */
    .hero-with-portrait .hero-stats,
    .hero-with-portrait .hero-stats-inline {
        padding: 0.85rem 1.1rem !important;
    }
}

/* מסכים זעירים — תמונה מעט קטנה יותר כדי לא לדחוף את ה-fold */
@media (max-width: 480px) {
    .hero-portrait-cutout img {
        max-height: 36vh;
        max-width: 380px;
    }
    .hero-with-portrait {
        padding-top: calc(var(--header-height) + 0.85rem) !important;
    }
}

/* ============================================================
   30. MOBILE UX — יעדי מגע וגדלי טקסט
   נוסף אחרי ביקורת UI/UX: נמדד ב-Chromium ברוחב 390px.
   הבלוק בסוף הקובץ בכוונה — כדי לגבור על כללי המובייל שקדמו לו
   בלי להוסיף עוד שכבת !important מיותרת.
   ============================================================ */
@media (max-width: 768px) {
    /* היה 30x30 — קטן מדי לכפתור הניווט הראשי במובייל.
       הפסים מוגדרים ב-04-sections.css ללא רוחב, ומקבלים אותו רק
       ממתיחה (align-items: stretch) בעמודת flex. align-items: center
       ביטל את המתיחה והפסים התכווצו ל-0px — הכפתור נשאר לחיץ אך
       הפך לבלתי נראה, ולמשתמש לא היה שום סימן שקיים תפריט.
       רוחב מפורש לפסים מבטל את התלות הזו. */
    .mobile-toggle {
        width: 48px !important;
        height: 48px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px;
        margin-inline-start: -6px;   /* משמר את היישור האופטי לקצה */
    }
    .mobile-toggle span {
        display: block;
        width: 26px;
        height: 3px;
        flex-shrink: 0;
    }

    /* קישורי טקסט צפופים — הגדלת אזור המגע בלי לשנות את המראה */
    .footer-legal-links a,
    .footer-links a,
    .footer-contact a,
    .contact-item-text a,
    .breadcrumb a {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
    }
    .footer-legal-links { display: flex; flex-wrap: wrap; gap: 0 1.1rem; justify-content: center; }

    /* טקסט מתחת ל-12px נקרא גרוע בעברית במסך קטן */
    .stat-label            { font-size: 0.78rem !important; }
    .section-tag           { font-size: 0.75rem !important; letter-spacing: 1.5px !important; }
    .hero-eyebrow          { font-size: 0.78rem !important; }
    .expertise-strip-item small { font-size: 0.8rem !important; }
    .side-action-btn .label     { font-size: 0.78rem !important; }
}

@media (max-width: 380px) {
    .stat-label  { font-size: 0.72rem !important; }
    .section-tag { font-size: 0.72rem !important; }
}

/* הכיתוב מעל כותרת ה-Hero נקרא בקושי מול הרקע הבהיר של התצלום.
   הצללה + הבהרה מחזירות אותו לקריאוּת בלי לשנות את העיצוב. */
.hero-eyebrow {
    color: var(--accent-gold-bright) !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85), 0 0 4px rgba(0, 0, 0, 0.9);
}

/* הודעת כשל שליחה בטופס — נוצרת ב-form-handler.js */
.form-failure {
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--error);
    border-radius: 3px;
    background: rgba(220, 53, 69, 0.12);
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.7;
}
.form-failure a { color: var(--accent-gold-bright); text-decoration: underline; }

/* שאריות מסבב האימות: eyebrow של כרטיס שותף ב-11.5px, וקישורי
   "לפרופיל המלא" בגובה 24px בלבד. */
.partner-eyebrow { font-size: 0.8rem !important; letter-spacing: 2px !important; }

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
}

/* פרופיל יחיד: הרשת נבנתה לשני שותפים זה לצד זה.
   עם כרטיס אחד הוא היה נמתח על כל הרוחב ונראה ריק. */
.partners-grid-single {
    grid-template-columns: minmax(0, 34rem);
    justify-content: center;
}

/* ============================================================
   31. CONTACT — ללא טופס
   הלקוח ביקש להסיר את רובריקת השארת הפרטים. הרשת נבנתה לשתי
   עמודות (פרטים + טופס); עם עמודה אחת היא נשארה חצי ריקה.
   עמודה אחת ממורכזת מחזיקה את ארבעת הפריטים בלי חורים.
   ============================================================ */
.contact-grid {
    grid-template-columns: minmax(0, 38rem);
    justify-content: center;
    gap: 0;
}
.contact-info > h2,
.contact-info > p { text-align: center; }
.contact-info > p { max-width: 44ch; margin-inline: auto; }

.contact-info .contact-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--border-subtle);
}
.contact-info .contact-item:has(+ .contact-social) { border-bottom: none; }

.contact-info .branch-cards { margin-top: .75rem; }
.contact-social { justify-content: center; display: flex; margin-top: 1.75rem; }

/* ============================================================
   32. HERO PORTRAIT — כיולים אחרי החלפת הדיוקן
   הדיוקן החדש צר וגבוה (507×1100) מהקודם, ולכן
   max-height קודם הקטין אותו במובייל לכ-140px רוחב בלבד.
   ============================================================ */
@media (max-width: 768px) {
    /* פס הפעולות הצף (64px) חתך את תחתית הדמות */
    .hero-with-portrait { padding-bottom: 72px !important; }

    /* דמות מלאה ברוחב 124px לא נקראת. במקום להקטין, חותכים לראש
       וכתפיים מאותו קובץ — נוכחות גדולה באותו שטח מסך.
       הגובה מוגבל כך שה-hero נכנס למסך מעל פס הפעולות הצף. */
    .hero-portrait-cutout {
        margin-top: 0.75rem !important;
        width: 100%;
    }
    .hero-portrait-cutout img {
        width: 260px;
        height: 260px;
        max-width: none;
        max-height: none;
        object-fit: cover;
        object-position: top center;   /* ראש וכתפיים מתוך הדמות המלאה */
    }

    /* ה-overlay במובייל חלש יותר, והכיתוב העליון נפל על אזור שמיים בהיר */
    .hero-with-portrait .hero-overlay {
        background:
            linear-gradient(180deg,
                rgba(8,17,27,0.72) 0%,
                rgba(8,17,27,0.45) 42%,
                rgba(8,17,27,0.12) 100%) !important;
    }
}

/* קישורי "המשך קריאה" בכרטיסים נמדדו בגובה 18–26px במובייל */
@media (max-width: 768px) {
    .read-more,
    .service-link,
    .book-feature-cta,
    .article-card a {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        min-height: 44px;
    }
}

/* בדסקטופ ראש הדמות נגע בשולי ההדר */
@media (min-width: 769px) {
    .hero-portrait-cutout img { height: 86%; }
}

/* ============================================================
   33. לוגו טקסטואלי + השלמות נגישות — ספטמבר 2026
   images/LOGO.png נושא את הכיתוב "גיל בר-זהר · אריאל טל" צרוב
   בתמונה עצמה, ולכן הוצא משימוש. עד להזמנת לוגו חדש —
   נעילת טקסט בזהב על הרקע הכהה.
   ============================================================ */

.logo-text {
    display: flex !important;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
}
.logo-text .logo-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid var(--accent-gold-dark);
    border-radius: 3px;
    color: var(--accent-gold);
    font-size: 1.15rem;
    background: rgba(191, 158, 92, 0.08);
}
.logo-text .logo-lines {
    display: flex;
    flex-direction: column;
    line-height: 1.18;
}
.logo-text .logo-name {
    font-family: var(--font-secondary), serif;
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.logo-text .logo-sub {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--accent-gold);
    letter-spacing: 0.16em;
}
@media (max-width: 480px) {
    .logo-text .logo-mark { width: 36px; height: 36px; flex-basis: 36px; font-size: 1rem; }
    .logo-text .logo-name { font-size: 0.95rem; }
    .logo-text .logo-sub  { font-size: 0.62rem; letter-spacing: 0.12em; }
}

/* הבהרה משפטית בתחתית העמוד */
.footer-disclaimer {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
}

/* כיבוד העדפת ניגודיות מוגברת של מערכת ההפעלה */
@media (prefers-contrast: more) {
    :root {
        --text-secondary: #d8d2c6;
        --text-muted: #b3ac9d;
        --border-subtle: rgba(191, 158, 92, 0.5);
    }
}

/* ============================================================
   34. תיקוני נגישות — WCAG 2.1 AA / ת"י 5568
   כל היחסים להלן נמדדו בדפדפן מול הרקע האפקטיבי (כולל
   שכבות שקופות), לא מול צבע מוצהר.
   ============================================================ */

/* --- 1.4.3 ניגודיות טקסט ---
   השורש: css/02-base.css מניח ש---surface הוא לבן, אך ערכת
   הנושא הכהה מגדירה אותו כ-#122438. התוצאה: טקסט כהה על רקע כהה. */

/* "דלג לתוכן הראשי" — היה 1.95:1. עכשיו 7.1:1 */
.skip-link {
    color: var(--text-primary) !important;
    background: var(--brand-teal) !important;
    font-weight: 600;
    text-decoration: underline;
}
.skip-link:focus {
    top: 1rem !important;
    outline: 3px solid var(--accent-gold-bright) !important;
    outline-offset: 2px !important;
}

/* תווית "צפו בסרטון המשרד" — הייתה 1.12:1 (כמעט בלתי נראית). עכשיו 7.5:1 */
.video-label {
    color: var(--accent-gold) !important;
    font-weight: 600;
}

/* כפתור "ניווט בוויז" — טקסט בהיר על זהב, 2.24:1. עכשיו 7.5:1 */
.btn-waze,
.btn-waze:hover {
    color: var(--bg-primary) !important;
    font-weight: 700;
}

/* --- 1.4.11 ניגודיות סימון הפוקוס ---
   טבעת כפולה: טבעת כהה צמודה לאלמנט + טבעת זהב מחוצה לה.
   כך הסימון נשאר נראה גם על רקע כהה וגם על כפתור זהב בהיר
   (היה 1:1 על .back-to-top ו-2.26:1 על .btn-waze). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--accent-gold-bright) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 3px var(--bg-primary) !important;
    border-radius: 3px;
}

/* --- 2.4.7 הפוקוס לא ייחתך בקצוות --- */
main, section, .container { scroll-margin-top: 90px; }

/* --- 1.4.10 ללא גלילה אופקית ב-320px --- */
@media (max-width: 360px) {
    html, body { overflow-x: hidden; }
}

/* --- 1.4.3 המשך: תוויות פס הפעולות הצף ---
   תווית "שיחה ב-WhatsApp" הייתה טקסט כהה על ירוק #1F8C4A = 3.68:1.
   הכהיית הירוק ל-#146C36 עם טקסט בהיר נותנת 6.5:1 ושומרת על
   זיהוי המותג. */
.side-action-btn .label {
    color: var(--text-primary) !important;
    font-weight: 600;
}
.side-action-btn.whatsapp {
    background: #146C36 !important;
}
.side-action-btn.whatsapp:hover,
.side-action-btn.whatsapp:focus-visible {
    background: #10592C !important;
}

/* --- 1.4.3 המשך: התנגשויות specificity ---
   שני כללים קודמים ניצחו את התיקון למרות !important, כי
   הספציפיות שלהם גבוהה יותר. הכללים הבאים ממוקדים דיים. */

/* .contact-item-text a (0,2,0) גבר על .btn-waze (0,1,0):
   טקסט קרם על כפתור זהב = 2.26:1. */
a.btn-waze,
.contact-item-text a.btn-waze,
.branch-card a.btn-waze {
    color: var(--bg-primary) !important;
}

/* מתחת ל-768px תוויות פס הפעולות קיבלו --surface (כהה)
   על רקע צבעוני. כל תווית מקבלת כעת את הצבע הנכון לרקע שלה. */
@media (max-width: 768px) {
    .side-action-btn .label,
    .side-action-btn.whatsapp .label,
    .side-action-btn:not(.whatsapp):not(.phone) .label {
        color: var(--text-primary) !important;
    }
    /* כפתור הטלפון על רקע זהב בהיר — טקסט כהה */
    .side-action-btn.phone .label {
        color: var(--bg-primary) !important;
    }
}

/* ============================================================
   34. טקסט בלתי נראה — המשך השורש שתועד בסעיף הנגישות
   css/*.css נכתבו כאשר --surface היה #ffffff, ולכן 41 כללים
   כותבים color: var(--surface) בכוונה של "טקסט בהיר".
   ערכת הנושא הכהה מגדירה --surface כ-#122438, ובכל מקום שאין
   דריסה הטקסט נצבע בדיוק בצבע הרקע שמאחוריו (יחס 1.00:1).
   הסבב הקודם תיקן חמישה מקרים; אלה שנמדדו כבלתי נראים כעת:
   ============================================================ */

/* כותרות בסקציות כהות — "מעוניינים בייעוץ משפטי?" נמדד 1.21:1 */
.section-dark h2,
.section-dark h3 { color: var(--text-primary) !important; }

/* כיתובי התעודות בעמוד אודות — 1.00:1 מול הגרדיאנט שמאחוריהם */
.cert-image-card .cert-caption { color: var(--text-primary) !important; }

/* תיקון סדר הכותרות שינה h4 ל-h3 בסקציית יצירת הקשר, אך כלל
   הזהב היה מוגדר ל-h4 בלבד — ה-h3 נפל ל-.section-dark h3. */
.contact-item-text h3,
.contact-item-text h4 { color: var(--accent-gold) !important; }

/* קישורי טלפון/מייל בכרטיסי הקשר — 1.00:1 בעמוד הספר */
.contact-item-text a { color: var(--text-primary) !important; }
.contact-item-text a:hover,
.contact-item-text a:focus-visible { color: var(--accent-gold-bright) !important; }

/* קישור "צרו קשר" בעמוד המאמרים נמדד 3.49:1 */
.articles-cta a,
.article-cta a { color: var(--accent-gold-bright) !important; }

/* קישורים בתוך פסקאות טקסט שירשו --surface או --accent-dark */
.book-note a,
.inline-link {
    color: var(--accent-gold-bright) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.book-note a:hover,
.inline-link:hover { color: var(--text-primary) !important; }

/* --- נגישות: תמלול טקסטואלי לסריקות (1.1.1 / 1.4.5) ---
   התעודות והמכתבים הם תמונות סרוקות. התמלול מספק את תוכנם
   בטקסט אמיתי, לקוראי מסך ולמי שמעדיף לקרוא ולא להגדיל תמונה. */
.cert-transcript {
    margin: 2rem auto 0;
    max-width: 780px;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    background: rgba(191, 158, 92, 0.04);
}
.cert-transcript > summary {
    cursor: pointer;
    padding: 0.9rem 1.2rem;
    font-weight: 600;
    color: var(--accent-gold);
    list-style-position: inside;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.cert-transcript > summary:focus-visible {
    outline: 3px solid var(--accent-gold-bright);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--bg-primary);
}
.cert-transcript[open] > summary {
    border-bottom: 1px solid var(--border-subtle);
}
.cert-transcript dl { margin: 0; padding: 1rem 1.4rem 1.3rem; }
.cert-transcript dt {
    font-weight: 700;
    color: var(--accent-gold-bright);
    margin-top: 1.1rem;
    font-size: 0.95rem;
}
.cert-transcript dt:first-child { margin-top: 0; }
.cert-transcript dd {
    margin: 0.35rem 0 0;
    color: var(--text-secondary);
    font-size: 0.93rem;
    line-height: 1.7;
}

/* ============================================================
   35. MOBILE UX — ניווט, צפיפות ונראות
   תקלה מדווחת: "במובייל אין תפריט ואי אפשר לנווט בין העמודים".
   נמדד ב-Chromium ברוחב 390px. השורשים:
   (א) פסי ההמבורגר ברוחב 0px — תוקן בסעיף 30.
   (ב) .logo-text — שם המחלקה שנבחר ללוגו הטקסטואלי מתנגש עם
       כלל ישן בתבנית (04-sections.css:95) שקובע flex-direction:
       column. הסמל נערם מעל השם בכל הרזולוציות וההדר במובייל
       תפס 105px במקום 64.
   (ג) #header nav ul { height: auto !important } (סעיף 23) דרס
       את גובה המגירה, כך שהתפריט נפתח כפאנל צף בגובה הקישורים,
       חופף את תחתית ההדר ומשאיר פס של העמוד גלוי משמאלו.
   ============================================================ */

/* (ב) — לכל הרזולוציות */
.logo.logo-text { flex-direction: row !important; }

/* תגיות "ערכי המשרד" — הוצאו מ-style מוטבע */
.credential-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

/* פס הפעולות הצף: שלושה צבעים מתנגשים (טורקיז / זהב / ירוק).
   פלטה אחת; החיוג — הפעולה העיקרית — מודגש בזהב. */
.side-actions .side-action-btn,
.side-actions .side-action-btn.whatsapp,
.side-actions .side-action-btn:not(.whatsapp):not(.phone) {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
.side-actions .side-action-btn:hover,
.side-actions .side-action-btn.whatsapp:hover,
.side-actions .side-action-btn:not(.whatsapp):not(.phone):hover {
    background: var(--bg-elevated) !important;
}
.side-actions .side-action-btn.phone {
    background: var(--accent-gold) !important;
    color: var(--bg-primary) !important;
}
.side-actions .side-action-btn.phone:hover { background: var(--accent-gold-bright) !important; }
.side-actions .side-action-btn .label { color: inherit !important; }
.side-actions .side-action-btn.whatsapp i { color: #25d366; }

/* כרטיס "מי עומד מאחורי המשרד" — הדיוקן השקוף על רקע המותג */
#about-teaser .partner-photo-frame {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(191,158,92,.22) 0%, transparent 62%),
        linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-primary) 100%) !important;
}
/* contain הציג דמות מלאה קטנה, והראש נגע בשולי המסגרת.
   cover עם 20px מרווח עליון נותן חיתוך ראש-עד-מותניים — הדיוקן
   שקוף, כך שהמרווח מעליו מתמלא ברקע המותג. */
#about-teaser .partner-photo-frame img {
    object-fit: cover !important;
    object-position: 50% 20px !important;
}

/* הדר בדסקטופ: 125px — גובה שנקבע ללוגו התמונתי (124px) ולא
   הותאם כשהוחלף בלוגו טקסטואלי. */
#header .container { min-height: 0 !important; }

@media (max-width: 768px) {

    /* ---------- הדר ----------
       .container נשא min-height: 76px מתקופת הלוגו התמונתי, וההדר
       הגיע ל-96px. המגירה נפתחת ב-var(--header-height)=64px, כך
       שכ-30px מתחתית ההדר (כולל שם המשרד) הוסתרו מתחתיה.
       48 (כפתור) + 2×6 (ריפוד) + 4 (גבולות) = 64. */
    #header { padding: 6px 0 !important; }
    #header .container { min-height: 0 !important; }
    #header .nav-wrapper { min-height: 48px; }

    /* ---------- (ג) מגירת התפריט ---------- */
    /* ל-#header יש backdrop-filter, ולכן הוא ה-containing block של
       המגירה (position: fixed) — top נמדד מתוכו ולא מהחלון.
       top: 64px הותיר רווח של 3px (גבול הזהב העליון) שבו העמוד נראה. */
    #header nav #nav-menu {
        top: 100% !important;
        right: -100% !important;
        width: 100% !important;
        max-width: none !important;
        height: calc(100vh - var(--header-height) - 64px) !important;
        height: calc(100dvh - var(--header-height) - 64px) !important;
        padding: 0.25rem 1.5rem 1.5rem !important;
        gap: 0 !important;
        /* #header nav ul { justify-content: center } נכתב לניווט האופקי
           בדסקטופ; בעמודה הוא מרכז את הקישורים אנכית באמצע המגירה. */
        justify-content: flex-start !important;
        background: var(--bg-primary) !important;
        border-top: 1px solid var(--border-subtle);
        box-shadow: none !important;
        visibility: hidden;          /* סגור = לא נגיש גם למקלדת */
        transition: right 0.3s ease, visibility 0s linear 0.3s !important;
    }
    #header nav #nav-menu.active {
        right: 0 !important;
        visibility: visible;
        transition: right 0.3s ease, visibility 0s !important;
    }
    #header nav #nav-menu li { border-bottom: 1px solid var(--border-subtle); }
    #header nav #nav-menu a {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        min-height: 58px;
        padding: 0 0.25rem !important;
        font-size: 1.12rem !important;
        font-weight: 500;
        border-bottom: none !important;
    }
    #header nav #nav-menu a::before {
        content: '‹';
        content: '‹' / '';
        order: 2;
        color: var(--accent-gold);
        font-size: 1.4rem;
        line-height: 1;
    }
    #header nav #nav-menu a:active { background: rgba(191,158,92,.08); }

    /* המגירה ממלאת את המסך — השכבה הכהה מתחתיה מיותרת,
       והיא עמעמה את פס הפעולות שנשאר גלוי מתחת למגירה. */
    body.menu-open::before { display: none !important; }
    body.menu-open { overflow: hidden; }

    /* פס הפעולות: מיכל שקוף עם ריפוד 8px — תוכן העמוד נראה סביב
       הכפתורים, גם כשהתפריט פתוח. */
    .side-actions {
        background: var(--bg-primary) !important;
        border-top: 1px solid var(--border-subtle);
    }

    /* ---------- צפיפות ---------- */
    /* 14 כרטיסי שירות תפסו 4,422px — 32% מהעמוד. כל כרטיס נשא
       כ-53px ריקים בתחתיתו בגלל min-height. */
    .service-card {
        min-height: 0 !important;
        padding: 1.4rem 1.25rem 1.2rem !important;
    }
    .service-card p { margin-bottom: 0.6rem !important; }
    .service-card .service-link { margin-bottom: 0 !important; }
    .service-card .service-number { font-size: 2.1rem !important; }

    /* דיור ציבורי — שישה תיבות ברוחב מלא זו מתחת לזו */
    .housing-visual { display: none !important; }
    .housing-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.6rem !important;
    }
    .housing-item {
        padding: 0.8rem 0.7rem !important;
        font-size: 0.88rem !important;
        line-height: 1.4;
    }

    /* תמונת מדף הספרים — קישוט בלבד, 200px של גלילה */
    .section-split-visual { display: none !important; }

    /* תגיות "ערכי המשרד" נשברו בשורות לא אחידות (1,1,2,1) */
    .credential-chips {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }
    .credential-chips .section-tag {
        width: 100%;
        margin: 0 !important;
        text-align: center;
        padding: 0.7rem 0.5rem !important;
        letter-spacing: 1px !important;
        line-height: 1.4;
    }

    /* פרופיל — דיוקן בגובה שמראה פנים וכתפיים */
    #about-teaser .partner-photo-frame { height: 300px !important; }

    /* פוטר — קישורים מהירים בשתי עמודות */
    .footer-links ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 1rem;
    }
}