/* ════════════════════════════════════════════════════════════════════
   THIMAR — FARMIX-INSPIRED PUBLIC THEME
   Yellow/gold accent · green agriculture · bold · mobile-first
   Loaded AFTER thimar-public.css so it overrides the public site.
   ════════════════════════════════════════════════════════════════════ */
:root {
    --fx-yellow:   #F6C915;
    --fx-yellow-d: #E0B400;
    --fx-ink:      #16181d;
    --fx-ink-soft: #3d4451;
    --fx-green:    #0EA371;
    --fx-green-d:  #076B4A;
    --fx-line:     #E7EBF0;
    --fx-bg-soft:  #F6F8F5;
    --fx-container: 1200px;
}

/* kill horizontal overflow everywhere on the public site */
.fx-layout, .fx-layout * { box-sizing: border-box; }
.fx-layout { overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; background: #fff; font-family: var(--font-family, 'Cairo', sans-serif); }
.fx-layout img { max-width: 100%; height: auto; }
.fx-container { width: 100%; max-width: var(--fx-container); margin: 0 auto; padding-inline: 16px; }
.fx-hide-sm { display: none; }
@media (min-width: 768px) { .fx-hide-sm { display: inline-flex; } }

/* ─────────── Top utility bar ─────────── */
.fx-topbar { background: var(--fx-yellow); color: var(--fx-ink); font-size: .82rem; font-weight: 600; }
.fx-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.fx-topbar-info { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.fx-topbar-info > span { display: inline-flex; align-items: center; gap: 6px; }
.fx-topbar-info .bi { font-size: .95rem; }
.fx-topbar-social { display: flex; align-items: center; gap: 6px; }
.fx-topbar-social a { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--fx-ink); border-radius: 50%; transition: all .15s; }
.fx-topbar-social a:hover { background: rgba(0,0,0,.12); }

/* ─────────── Header ─────────── */
.fx-header { position: sticky; top: 0; z-index: 300; background: #fff; border-bottom: 1px solid var(--fx-line); box-shadow: 0 2px 18px rgba(0,0,0,.05); }
.fx-header-inner { display: flex; align-items: center; gap: 16px; min-height: 74px; position: relative; }
.fx-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.fx-brand img { height: 46px; width: auto; }
.fx-brand-name { font-size: 1.7rem; font-weight: 800; color: var(--fx-ink); letter-spacing: -.5px; }

.fx-nav { display: none; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.fx-nav-link { padding: 10px 12px; border-radius: 8px; color: var(--fx-ink); font-size: .95rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: color .15s; position: relative; }
.fx-nav-link:hover { color: var(--fx-green-d); }
.fx-nav-link.active { color: var(--fx-green-d); }
.fx-nav-link.active::after { content: ""; position: absolute; inset-inline: 12px; bottom: 2px; height: 3px; border-radius: 3px; background: var(--fx-yellow); }

.fx-actions { display: none; align-items: center; gap: 8px; flex-shrink: 0; }

/* ─────────── Buttons ─────────── */
.fx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: .9rem; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: all .16s ease; white-space: nowrap; }
.fx-btn-solid { background: var(--fx-yellow); color: var(--fx-ink); border-color: var(--fx-yellow); }
.fx-btn-solid:hover { background: var(--fx-yellow-d); border-color: var(--fx-yellow-d); color: var(--fx-ink); transform: translateY(-1px); }
.fx-btn-outline { background: transparent; color: var(--fx-ink); border-color: var(--fx-line); }
.fx-btn-outline:hover { border-color: var(--fx-ink); background: var(--fx-bg-soft); color: var(--fx-ink); }
.fx-btn.w-100 { width: 100%; }

/* ─────────── Mobile hamburger + drawer (CSS-only) ─────────── */
.fx-nav-cb { display: none; }
.fx-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; margin-inline-start: auto; padding: 11px; border-radius: 12px; background: var(--fx-yellow); cursor: pointer; flex-shrink: 0; }
.fx-burger span { display: block; height: 3px; width: 100%; background: var(--fx-ink); border-radius: 3px; transition: all .25s ease; }
.fx-nav-cb:checked ~ .fx-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.fx-nav-cb:checked ~ .fx-burger span:nth-child(2) { opacity: 0; }
.fx-nav-cb:checked ~ .fx-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.fx-mobile {
    position: fixed; top: 0; inset-inline-end: 0; height: 100dvh; width: min(84vw, 340px);
    background: #fff; z-index: 400; box-shadow: -8px 0 40px rgba(0,0,0,.18);
    transform: translateX(110%); transition: transform .3s cubic-bezier(.4,0,.2,1);
    padding: 84px 18px 24px; overflow-y: auto; display: flex; flex-direction: column;
}
[dir="rtl"] .fx-mobile { transform: translateX(-110%); }
.fx-nav-cb:checked ~ .fx-mobile { transform: translateX(0); }
/* dim backdrop */
.fx-nav-cb:checked ~ .fx-burger::after {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 390;
}
.fx-mobile-nav { display: flex; flex-direction: column; gap: 2px; }
.fx-mobile-link { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 10px; color: var(--fx-ink); font-weight: 700; font-size: 1rem; text-decoration: none; }
.fx-mobile-link .bi { color: var(--fx-green); font-size: 1.15rem; width: 22px; }
.fx-mobile-link:hover { background: var(--fx-bg-soft); }
.fx-mobile-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--fx-line); }

@media (min-width: 992px) {
    .fx-nav, .fx-actions { display: flex; }
    .fx-burger { display: none; }
    .fx-mobile { display: none; }
}

/* ─────────── Footer ─────────── */
.fx-main { flex: 1; }
.fx-footer { background: var(--fx-ink); color: #cfd4dc; margin-top: 60px; }
.fx-footer .fx-container { padding-block: 54px 20px; }
.fx-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 34px; }
.fx-footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.fx-footer-brand img { height: 46px; }
.fx-footer-brand span { font-size: 1.5rem; font-weight: 800; color: #fff; }
.fx-footer-about p { line-height: 1.9; font-size: .92rem; margin-bottom: 16px; }
.fx-footer-social { display: flex; gap: 8px; }
.fx-footer-social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; transition: all .15s; }
.fx-footer-social a:hover { background: var(--fx-yellow); color: var(--fx-ink); }
.fx-footer-col h5 { color: #fff; font-weight: 700; font-size: 1.05rem; margin-bottom: 16px; }
.fx-footer-col ul { list-style: none; padding: 0; margin: 0; }
.fx-footer-col li { margin-bottom: 10px; }
.fx-footer-col a { color: #cfd4dc; text-decoration: none; font-size: .92rem; transition: color .15s; }
.fx-footer-col a:hover { color: var(--fx-yellow); }
.fx-footer-contact li { display: flex; align-items: center; gap: 8px; }
.fx-footer-contact .bi { color: var(--fx-yellow); }
.fx-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; }
.fx-footer-bottom strong { color: #fff; }
.fx-footer-meta a { color: #cfd4dc; text-decoration: none; }
.fx-footer-meta a:hover { color: var(--fx-yellow); }
@media (max-width: 860px) { .fx-footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; } }
@media (max-width: 520px) { .fx-footer-grid { grid-template-columns: 1fr; } .fx-footer-bottom { flex-direction: column; text-align: center; } }

/* ════════════════════════════════════════════════════════════════════
   FARMIX THEMING OF PAGE CONTENT (hero, cards, cta, buttons)
   ════════════════════════════════════════════════════════════════════ */

/* Hero — bold green field vibe + yellow CTA (Farmix) */
.thimar-hero-rich {
    background-image:
        linear-gradient(180deg, rgba(8,50,35,.72), rgba(8,50,35,.82)),
        linear-gradient(135deg, #0b5a3e 0%, #0EA371 60%, #14c08a 100%) !important;
    background-size: cover; background-position: center;
    padding-block: clamp(48px, 8vw, 96px) !important;
}
.thimar-hero-rich h1 {
    font-size: clamp(2rem, 7vw, 3.6rem) !important; font-weight: 900 !important; line-height: 1.18 !important;
    color: #fff !important; letter-spacing: -.5px; overflow-wrap: anywhere;
}
.thimar-hero-rich h1 .hl { color: var(--fx-yellow) !important; box-shadow: none !important; padding: 0 !important; }
.thimar-hero-rich p { color: rgba(255,255,255,.92) !important; }
.thimar-hero-eyebrow { background: var(--fx-yellow) !important; color: var(--fx-ink) !important; border: none !important; font-weight: 700; }
/* hero buttons → Farmix (solid yellow + white outline), stack on mobile */
.btn-hero { border-radius: 999px !important; padding: 13px 28px !important; }
.btn-hero-primary { background: var(--fx-yellow) !important; color: var(--fx-ink) !important; box-shadow: 0 12px 28px rgba(246,201,21,.35) !important; }
.btn-hero-primary:hover { background: var(--fx-yellow-d) !important; color: var(--fx-ink) !important; }
.btn-hero-ghost { background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,.7) !important; }

/* Feature cards — yellow icon tile + hover pop */
.thimar-feature-card-icon-wrapper { background: linear-gradient(135deg, var(--fx-yellow), #ffd84d) !important; box-shadow: 0 10px 22px rgba(246,201,21,.35) !important; }
.thimar-feature-card:hover { border-color: var(--fx-yellow) !important; box-shadow: 0 18px 44px rgba(246,201,21,.18) !important; }
.thimar-section-badge { background: rgba(246,201,21,.16) !important; color: #8a6d00 !important; border: 1px solid rgba(246,201,21,.4) !important; }
.thimar-section-title { color: var(--fx-ink) !important; font-weight: 900 !important; }

/* CTA section — dark with yellow accents (Farmix) */
.thimar-section-cta { background: var(--fx-ink) !important; }
.thimar-section-cta .thimar-section-title, .thimar-section-cta .thimar-section-subtitle { color: #fff !important; }
.thimar-btn-cta-primary { background: var(--fx-yellow) !important; color: var(--fx-ink) !important; border: none !important; border-radius: 999px !important; }
.thimar-btn-cta-primary:hover { background: var(--fx-yellow-d) !important; }
.thimar-btn-cta-secondary { border: 2px solid rgba(255,255,255,.6) !important; color: #fff !important; border-radius: 999px !important; }

/* generic public button re-theme (thimar-btn-primary → yellow) */
.thimar-btn-primary { background: var(--fx-yellow) !important; color: var(--fx-ink) !important; border-color: var(--fx-yellow) !important; }
.thimar-btn-primary:hover { background: var(--fx-yellow-d) !important; }

/* section spacing safety on mobile */
@media (max-width: 640px) {
    .thimar-section { padding-block: 40px !important; }
    .thimar-hero-rich div[style*="display:flex"] { flex-direction: column; }
    .btn-hero { width: 100%; }
}

/* ─────────── Hard overflow guards (mobile) ─────────── */
html, body { overflow-x: hidden !important; max-width: 100%; }
.fx-topbar-inner, .fx-header-inner { max-width: 100%; }
.thimar-section > .container, .thimar-hero-rich > .container { max-width: 100% !important; }
.thimar-hero-rich .thimar-section-wrapper { max-width: 100% !important; }
/* hero CTA row: robust wrap + stack on small screens */
.thimar-hero-rich .thimar-section-wrapper > div:last-of-type { display: flex !important; flex-wrap: wrap !important; justify-content: center; gap: 12px; }
.thimar-hero-rich .btn-hero { max-width: 100%; }
@media (max-width: 640px) {
    .thimar-hero-rich .thimar-section-wrapper > div:last-of-type { flex-direction: column !important; align-items: stretch; }
    .thimar-hero-rich .btn-hero { width: 100%; }
    .fx-topbar-info { gap: 10px; font-size: .74rem; }
    .fx-brand-name { font-size: 1.4rem; }
    .fx-brand img { height: 40px; }
}

/* ─────────── Stronger mobile fixes (v2) ─────────── */
/* fix: hide-sm was overridden by .fx-topbar-info > span (higher specificity) */
.fx-topbar-info > span.fx-hide-sm { display: none !important; }
@media (min-width: 768px) { .fx-topbar-info > span.fx-hide-sm { display: inline-flex !important; } }
/* clip overflow at section level, not just body */
html { overflow-x: clip; }
.thimar-main, .thimar-hero-rich, .thimar-section, .fx-topbar, .fx-header { overflow-x: clip; }
.thimar-hero-rich .thimar-section-wrapper { max-width: 100% !important; width: 100%; }
/* force hero CTA buttons to stack full-width on phones */
@media (max-width: 640px) {
    .thimar-hero-rich .thimar-section-wrapper > div { flex-direction: column !important; align-items: stretch !important; width: 100% !important; }
    .thimar-hero-rich .btn-hero { width: 100% !important; justify-content: center; }
    .thimar-hero-eyebrow { max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   FX-ABOUT — "مرحبًا بك في ثمار" welcome/about section (Farmix layout, RTL)
   Copy column (grid col 1 → RIGHT in RTL) · tall inline-SVG Syrian farm
   panel (grid col 2 → LEFT) with a straddling watch card · light feature
   band with a dotted divider (vertical desktop / horizontal mobile) ·
   floating decorative leaf. Pure markup + CSS, no JS, logical properties.
   ════════════════════════════════════════════════════════════════════ */
.fx-about { position: relative; }
.fx-about, .fx-about *, .fx-about *::before, .fx-about *::after { box-sizing: border-box; }
.fx-about img { max-width: 100%; height: auto; }

/* re-center content: farmix.css forces .thimar-section>.container to 100%,
   so mirror the sibling .thimar-section-wrapper (max-width 1200 / auto) */
.fx-about-inner { position: relative; width: 100%; max-width: var(--fx-container); margin-inline: auto; }

/* ── grid: mobile-first single column (copy → media) ── */
.fx-about-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); align-items: center; }
.fx-about-copy, .fx-about-media { min-width: 0; max-width: 100%; }

/* ── copy column ── */
.fx-about-eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding-block: .4rem; padding-inline: .95rem; border-radius: var(--radius-full); background: rgba(14,163,113,.1); color: var(--fx-green-d); font-weight: 800; font-size: .9rem; margin-bottom: var(--spacing-md); }
.fx-about-eyebrow .bi { color: var(--fx-green); font-size: 1rem; }

.fx-about-title { margin: 0 0 var(--spacing-md); font-size: clamp(1.65rem, 4.6vw, 2.7rem); line-height: 1.34; font-weight: 900; color: var(--fx-ink); letter-spacing: -.3px; overflow-wrap: break-word; }
.fx-about-hl { background-image: linear-gradient(transparent 58%, rgba(246,201,21,.6) 0); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .1em; border-radius: 2px; }

.fx-about-text { margin: 0 0 var(--spacing-lg); max-inline-size: 52ch; font-size: clamp(1rem, 2.4vw, 1.1rem); line-height: 2; color: var(--fx-ink-soft); }

/* founder + signature block */
.fx-about-founder { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-md); padding-block-start: var(--spacing-md); border-block-start: 1px solid var(--fx-line); }
.fx-about-avatar { flex: 0 0 auto; inline-size: 58px; block-size: 58px; border-radius: var(--radius-full); background: #fff; border: 2px solid var(--fx-line); box-shadow: 0 6px 16px rgba(14,163,113,.14); display: grid; place-items: center; overflow: hidden; }
.fx-about-avatar img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 8px; }
.fx-about-founder-meta { display: flex; flex-direction: column; line-height: 1.35; }
.fx-about-founder-name { font-weight: 800; color: var(--fx-ink); font-size: 1.05rem; }
.fx-about-founder-role { font-weight: 600; color: var(--fx-ink-soft); font-size: .88rem; }
/* handwritten-style wordmark (CSS + inline swoosh, no image) */
.fx-about-sign { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin-inline-start: auto; color: var(--fx-green-d); -webkit-user-select: none; user-select: none; }
.fx-about-sign-word { font-weight: 800; font-style: italic; font-size: 1.9rem; line-height: 1; letter-spacing: .02em; transform: rotate(-5deg); }
.fx-about-sign-swoosh { inline-size: 78px; block-size: 14px; color: var(--fx-yellow-d); }

/* ── media column: tall SVG panel ── */
.fx-about-media { position: relative; inline-size: 100%; max-inline-size: 460px; margin-inline: auto; margin-block-end: 28px; }
.fx-about-scene-frame { position: relative; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: 0 30px 60px -22px rgba(7,107,74,.45), 0 0 0 1px rgba(22,24,29,.05) inset; line-height: 0; }
.fx-about-scene { display: block; inline-size: 100%; block-size: auto; }

/* overlapping "watch how it works" card (inner bottom corner) */
.fx-about-play { position: absolute; inset-block-end: -24px; inset-inline-start: 18px; max-inline-size: calc(100% - 36px); display: inline-flex; align-items: center; gap: .75rem; padding-block: .55rem; padding-inline: .6rem 1.1rem; background: #fff; border-radius: var(--radius-full); box-shadow: 0 18px 40px -12px rgba(16,24,40,.32); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.fx-about-play:hover, .fx-about-play:focus-visible { transform: translateY(-3px); box-shadow: 0 24px 48px -12px rgba(16,24,40,.4); outline: none; }
.fx-about-play:focus-visible { box-shadow: 0 0 0 3px rgba(14,163,113,.45), 0 18px 40px -12px rgba(16,24,40,.32); }
.fx-about-play-btn { position: relative; flex: 0 0 auto; inline-size: 48px; block-size: 48px; border-radius: var(--radius-full); background: var(--fx-yellow); color: var(--fx-ink); display: grid; place-items: center; font-size: 1.2rem; }
.fx-about-play-btn .bi { transform: translateX(1px); }
.fx-about-play-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--fx-yellow); animation: fxAboutPulse 2.6s ease-out infinite; }
.fx-about-play-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.fx-about-play-eyebrow { font-size: .72rem; font-weight: 700; color: var(--fx-green); white-space: nowrap; }
.fx-about-play-title { font-size: .95rem; font-weight: 800; color: var(--fx-ink); white-space: nowrap; }
@keyframes fxAboutPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }

/* ── feature band (light panel, dotted divider) ── */
.fx-about-features { position: relative; z-index: 1; margin-block-start: var(--spacing-2xl); background: var(--fx-bg-soft); border: 1px solid var(--fx-line); border-radius: var(--radius-2xl); padding: var(--spacing-lg); display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); }
.fx-about-feature { display: flex; align-items: flex-start; gap: var(--spacing-md); min-width: 0; }
/* mobile divider: horizontal dotted */
.fx-about-feature + .fx-about-feature { border-block-start: 2px dotted rgba(11,113,80,.28); padding-block-start: var(--spacing-lg); }
.fx-about-feature-icon { flex: 0 0 auto; inline-size: 56px; block-size: 56px; border-radius: var(--radius-lg); display: grid; place-items: center; font-size: 1.5rem; background: linear-gradient(135deg, var(--fx-yellow), #ffd84d); color: var(--fx-ink); box-shadow: 0 10px 22px rgba(246,201,21,.32); }
.fx-about-feature-icon--green { background: linear-gradient(135deg, var(--fx-green), var(--fx-green-d)); color: #fff; box-shadow: 0 10px 22px rgba(14,163,113,.32); }
.fx-about-feature-body { min-width: 0; }
.fx-about-feature-title { margin: 0 0 .3rem; font-size: 1.12rem; font-weight: 800; color: var(--fx-ink); }
.fx-about-feature-text { margin: 0; font-size: .96rem; line-height: 1.75; color: var(--fx-ink-soft); overflow-wrap: break-word; }

/* decorative floating leaf (desktop only) */
.fx-about-leaf { display: none; }

/* ── desktop (>=992px): two columns, side-by-side features ── */
@media (min-width: 992px) {
    .fx-about-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: var(--spacing-2xl); }
    .fx-about-media { max-inline-size: none; margin-inline: 0; }
    .fx-about-play { inset-block-end: -28px; }

    .fx-about-features { grid-template-columns: 1fr 1fr; gap: 0; padding: var(--spacing-xl); }
    .fx-about-feature { padding-inline: var(--spacing-xl); }
    .fx-about-feature:first-child { padding-inline-start: 0; }
    .fx-about-feature:last-child { padding-inline-end: 0; }
    .fx-about-feature + .fx-about-feature { border-block-start: 0; padding-block-start: 0; border-inline-start: 2px dotted rgba(11,113,80,.28); }

    .fx-about-leaf { display: block; position: absolute; inset-block-start: 10px; inset-inline-end: -8px; inline-size: 150px; color: var(--fx-green); opacity: .1; z-index: 0; pointer-events: none; transform: rotate(16deg); animation: fxAboutFloat 7s ease-in-out infinite; }
    .fx-about-leaf svg { display: block; inline-size: 100%; block-size: auto; }
}
@keyframes fxAboutFloat { 0%, 100% { transform: rotate(16deg) translateY(0); } 50% { transform: rotate(20deg) translateY(-12px); } }

/* ── very small phones: keep the watch card inside the frame ── */
@media (max-width: 360px) {
    .fx-about-play { inset-inline-start: 12px; padding-inline: .5rem .85rem; }
    .fx-about-play-btn { inline-size: 44px; block-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-about-play-btn::before, .fx-about-leaf { animation: none; }
    .fx-about-play { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   FX-HERO — Farmix-style top hero (RTL, no photos)
   ───────────────────────────────────────────────────────────────────
   Full-bleed inline-SVG golden-hour farm panorama + dark-green overlay,
   decorative edge carousel arrows, centered white heading/subtitle/CTAs,
   and FOUR feature cards straddling the hero/white seam (yellow icon on
   the seam). Overlap uses an IN-FLOW technique: the cards are the last
   flex child, so the hero AUTO-hosts their top halves; a fixed negative
   block-end margin (120px) makes exactly 120px spill below the hero, and
   the following section reserves 120px + gap. Nothing depends on the
   cards' computed height, so collision is impossible. Overlap + arrows
   are desktop-only (>=992px) and fully absent on mobile.
   All selectors prefixed .fx-hero. Appended to farmix.css.
   ════════════════════════════════════════════════════════════════════ */
.fx-hero {
    position: relative;
    z-index: 2;                 /* whole hero (incl. spilled cards) paints above the following .fx-about (position:relative, z-auto) */
    display: flex;
    flex-direction: column;
    min-block-size: clamp(560px, 82vh, 760px);
    padding-block-start: clamp(2rem, 6vw, 4rem);
    padding-block-end: var(--spacing-2xl);   /* green breathing room under the cards on mobile */
    color: #fff;
    font-family: var(--font-family, 'Cairo', sans-serif);
}
.fx-hero, .fx-hero *, .fx-hero *::before, .fx-hero *::after { box-sizing: border-box; }

/* width container inside the hero (override Bootstrap .container to the brand cap) */
.fx-hero .container { width: 100%; max-width: var(--fx-container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 28px); }

/* ── full-bleed SVG panorama + dark overlay (decorative) ── */
.fx-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; line-height: 0; }
.fx-hero-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fx-hero-overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(8,50,35,.55), rgba(8,50,35,.78)),
        radial-gradient(90% 72% at 50% 36%, rgba(8,50,35,0), rgba(6,38,26,.30));
}

/* ── decorative edge carousel arrows (no slider → aria-hidden, inert, hidden < 992px) ── */
.fx-hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    inline-size: 56px; block-size: 56px; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    border: 1.5px solid rgba(255,255,255,.55);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.92); font-size: 1.4rem;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    pointer-events: none;                    /* never a dead click target */
}
.fx-hero-arrow--start { inset-inline-start: clamp(14px, 2.5vw, 34px); }   /* physical RIGHT in RTL */
.fx-hero-arrow--end   { inset-inline-end:   clamp(14px, 2.5vw, 34px); }   /* physical LEFT in RTL */

/* ── centered content ── */
.fx-hero-inner {
    position: relative; z-index: 2;
    flex: 1 1 auto;                          /* grows to vertically center the text above the cards */
    display: flex; align-items: center; justify-content: center;
    text-align: center;
}
.fx-hero-inner .container { display: flex; flex-direction: column; align-items: center; }

.fx-hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    padding-block: .45rem; padding-inline: 1.05rem;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.32);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    color: #fff; font-weight: 700; font-size: clamp(.8rem, 2.2vw, .9rem); line-height: 1.2;
    max-inline-size: 100%; margin-block-end: var(--spacing-md);
}
.fx-hero-eyebrow .bi { color: var(--fx-yellow); font-size: 1em; }

.fx-hero-title {
    margin: 0 0 var(--spacing-md);
    font-size: clamp(2rem, 6.5vw, 3.6rem);
    font-weight: 900; line-height: 1.15; color: #fff;
    letter-spacing: -.01em; max-inline-size: 18ch; overflow-wrap: break-word; text-wrap: balance;
    text-shadow: 0 2px 22px rgba(0,0,0,.28);
}
.fx-hero-hl { color: var(--fx-yellow); }

.fx-hero-subtitle {
    margin: 0 auto var(--spacing-lg); max-inline-size: 60ch;
    font-size: clamp(1rem, 2.3vw, 1.22rem); line-height: 1.85;
    color: rgba(255,255,255,.92); font-weight: 500;
    text-shadow: 0 1px 14px rgba(0,0,0,.24);
}

.fx-hero-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: center; }
.fx-hero-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding-block: .85rem; padding-inline: 1.75rem; border-radius: var(--radius-full);
    font-weight: 800; font-size: 1rem; text-decoration: none; border: 2px solid transparent;
    transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
    white-space: nowrap; max-inline-size: 100%;
}
.fx-hero-btn .bi { font-size: 1.05rem; transition: transform .16s ease; }
.fx-hero-btn--primary { background: var(--fx-yellow); color: var(--fx-ink); border-color: var(--fx-yellow); box-shadow: 0 14px 30px rgba(246,201,21,.35); }
.fx-hero-btn--primary:hover { background: var(--fx-yellow-d); border-color: var(--fx-yellow-d); color: var(--fx-ink); transform: translateY(-2px); }
.fx-hero-btn--primary:hover .bi { transform: translateX(-4px); }   /* nudge forward = leftward in RTL */
.fx-hero-btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.75); }
.fx-hero-btn--ghost:hover { background: #fff; color: var(--fx-green-d); border-color: #fff; transform: translateY(-2px); }
.fx-hero-btn:focus-visible { outline: 3px solid rgba(255,255,255,.9); outline-offset: 3px; }

/* ── straddling feature cards (base = MOBILE: normal flow, NO overlap) ── */
.fx-hero-cards-wrap { position: relative; z-index: 4; flex: 0 0 auto; margin-block-start: var(--spacing-2xl); }
.fx-hero-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-md); }

.fx-hero-card {
    position: relative; display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--fx-line); border-radius: var(--radius-xl);
    overflow: hidden; text-decoration: none; color: var(--fx-ink);
    box-shadow: 0 18px 40px -20px rgba(7,60,42,.40);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fx-hero-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px -20px rgba(7,60,42,.50); border-color: rgba(246,201,21,.60); }
.fx-hero-card:focus-visible { outline: 3px solid var(--fx-yellow); outline-offset: 3px; }

.fx-hero-card-media { position: relative; display: block; block-size: 96px; overflow: hidden; background: linear-gradient(135deg, var(--fx-green) 0%, var(--fx-green-d) 100%); }
.fx-hero-card:nth-child(2) .fx-hero-card-media { background: linear-gradient(135deg, #14b07c 0%, #0a6a49 100%); }
.fx-hero-card:nth-child(3) .fx-hero-card-media { background: linear-gradient(135deg, #0c9268 0%, #075c40 100%); }
.fx-hero-card:nth-child(4) .fx-hero-card-media { background: linear-gradient(135deg, #17a074 0%, #0b573c 100%); }
.fx-hero-card-media svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform .4s ease; }
.fx-hero-card:hover .fx-hero-card-media svg { transform: scale(1.06); }

.fx-hero-card-icon {
    position: absolute; top: 96px; inset-inline-start: 22px; transform: translateY(-50%); z-index: 2;  /* straddles the media/body seam, anchored to the start (RIGHT in RTL) */
    inline-size: 56px; block-size: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--fx-yellow), #ffd84d); color: var(--fx-ink);
    display: grid; place-items: center; font-size: 1.4rem;
    box-shadow: 0 8px 18px rgba(246,201,21,.40), 0 0 0 4px #fff;
    transition: transform .2s ease;
}
.fx-hero-card:hover .fx-hero-card-icon { transform: translateY(-50%) rotate(-6deg); }

.fx-hero-card-body { padding: 34px var(--spacing-md) var(--spacing-lg); display: flex; flex-direction: column; gap: .4rem; text-align: start; }
.fx-hero-card-title { font-size: 1.18rem; font-weight: 800; color: var(--fx-ink); }
.fx-hero-card-text { font-size: .92rem; line-height: 1.7; color: var(--fx-ink-soft); overflow-wrap: break-word; }

/* ── small tablets: 2-up cards (still normal flow, no overlap) ── */
@media (min-width: 576px) {
    .fx-hero-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-lg); }
}

/* ── desktop (>=992px): 4-up cards + straddle the hero/white seam ── */
@media (min-width: 992px) {
    .fx-hero { padding-block-start: clamp(3rem, 6vw, 4.5rem); padding-block-end: 0; }
    .fx-hero-arrow { display: inline-flex; }

    /* pull the hero's bottom up 120px → the cards spill EXACTLY 120px below it (height-independent) */
    .fx-hero-cards-wrap { margin-block-start: var(--spacing-xl); margin-block-end: -120px; }
    .fx-hero-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-md); }

    /* clear the overhang: the following section's content starts below the 120px spill + a gap */
    .fx-hero + .thimar-section { position: relative; z-index: 1; padding-block-start: calc(120px + var(--spacing-2xl)); }
}

@media (min-width: 1200px) {
    .fx-hero-cards { gap: var(--spacing-lg); }
}

@media (prefers-reduced-motion: reduce) {
    .fx-hero-card, .fx-hero-card-media svg, .fx-hero-card-icon, .fx-hero-btn, .fx-hero-btn .bi { transition: none; }
    .fx-hero-card:hover { transform: none; }
    .fx-hero-card:hover .fx-hero-card-media svg { transform: none; }
    .fx-hero-card:hover .fx-hero-card-icon { transform: translateY(-50%); }
    .fx-hero-btn--primary:hover, .fx-hero-btn--ghost:hover { transform: none; }
    .fx-hero-btn--primary:hover .bi { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   FX-WORK — Featured offers, styled after Farmix "Latest From Our Work"
   RTL · no photos (green gradient tiles + subtle inline-SVG silhouettes)
   · Cairo. Top row: green eyebrow + bold heading (inline-start) with a
   pair of decorative « » arrows (inline-end, inert, hidden < 768px).
   A 3-up grid of tall tiles, each with a yellow price pill; the MIDDLE
   tile is the featured/active one under a solid green overlay (title +
   location + "عرض التفاصيل"), the two side tiles carry a block-end dark
   scrim + title + a small map-pin location line. Centered CTA below.
   All selectors prefixed .fx-work; logical properties throughout.
   Re-centers via .fx-work-inner because farmix.css forces
   .thimar-section > .container to max-width:100% (mirrors sibling
   .thimar-section-wrapper). Appended to farmix.css.
   ════════════════════════════════════════════════════════════════════ */
.fx-work, .fx-work *, .fx-work *::before, .fx-work *::after { box-sizing: border-box; }
.fx-work img { max-inline-size: 100%; block-size: auto; }
.fx-work-inner { position: relative; inline-size: 100%; max-inline-size: var(--fx-container); margin-inline: auto; }

/* ─── top row: eyebrow + heading (start) · arrows (end) ─── */
.fx-work-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-lg); margin-block-end: var(--spacing-xl); }
.fx-work-heading { min-inline-size: 0; }
.fx-work-eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin-block-end: .7rem; color: var(--fx-green-d); font-weight: 800; font-size: .95rem; letter-spacing: .01em; }
.fx-work-eyebrow::before { content: ""; inline-size: 26px; block-size: 3px; border-radius: var(--radius-full); background: var(--fx-yellow); }
.fx-work-eyebrow .bi { color: var(--fx-green); font-size: 1.05em; }
.fx-work-title { margin: 0; font-size: clamp(1.6rem, 4.6vw, 2.6rem); line-height: 1.25; font-weight: 900; color: var(--fx-ink); letter-spacing: -.3px; overflow-wrap: break-word; }

/* decorative nav arrows (no slider → inert; revealed ≥768px) */
.fx-work-arrows { display: none; align-items: center; gap: .6rem; flex-shrink: 0; pointer-events: none; }
.fx-work-arrow { inline-size: 52px; block-size: 52px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; background: #fff; border: 1.6px solid var(--fx-line); color: var(--fx-ink); }
.fx-work-arrow--next { background: var(--fx-green); border-color: var(--fx-green); color: #fff; box-shadow: 0 10px 22px -8px rgba(14,163,113,.6); }
@media (min-width: 768px) { .fx-work-arrows { display: inline-flex; } }

/* ─── showcase grid ─── */
.fx-work-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-lg); }
@media (min-width: 600px) {
    .fx-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fx-work-card:nth-child(3) { grid-column: 1 / -1; } /* lone 3rd card spans the row → no gap */
}
@media (min-width: 992px) {
    .fx-work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
    .fx-work-card:nth-child(3) { grid-column: auto; }
}

/* ─── card (real link, tall tile) ─── */
.fx-work-card { position: relative; display: block; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; min-block-size: 400px; border-radius: var(--radius-2xl); background: var(--fx-green-d); text-decoration: none; box-shadow: 0 20px 44px -24px rgba(7,60,40,.55); transition: transform .2s ease, box-shadow .2s ease; isolation: isolate; }
.fx-work-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(7,60,40,.6); }
.fx-work-card:focus-visible { outline: 3px solid var(--fx-yellow); outline-offset: 3px; }
@media (min-width: 992px) { .fx-work-card { min-block-size: 440px; } }

/* media: green gradient tile (+ subtle top highlight) with per-card variety */
.fx-work-card-media { position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; background: radial-gradient(120% 88% at 82% 2%, rgba(255,255,255,.16), transparent 58%), var(--fx-work-grad, linear-gradient(150deg, var(--fx-green) 0%, var(--fx-green-d) 82%)); }
.fx-work-card:nth-child(1) { --fx-work-grad: linear-gradient(150deg, #14b481 0%, #0a6a49 82%); }
.fx-work-card:nth-child(2) { --fx-work-grad: linear-gradient(150deg, #0ea371 0%, #076b4a 82%); }
.fx-work-card:nth-child(3) { --fx-work-grad: linear-gradient(150deg, #10a472 0%, #075c40 82%); }
.fx-work-motif { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; color: #fff; opacity: .12; transform-origin: center; transition: transform .3s ease; }
.fx-work-card:hover .fx-work-motif { transform: scale(1.06); }

/* side-card scrim (block-end → legible white title + location) */
.fx-work-scrim { position: absolute; inset: 0; z-index: 1; display: block; background: linear-gradient(to top, rgba(5,38,26,.92) 0%, rgba(5,38,26,.55) 26%, rgba(5,38,26,.05) 55%, transparent 72%); }

/* featured overlay (solid green → active look) */
.fx-work-overlay { position: absolute; inset: 0; z-index: 1; display: block; background: linear-gradient(158deg, rgba(14,163,113,.82) 0%, rgba(7,107,74,.94) 62%, rgba(7,107,74,.97) 100%); }

/* yellow price pill (top inline-start corner = top-right in RTL) */
.fx-work-badge { position: absolute; z-index: 3; inset-block-start: 1rem; inset-inline-start: 1rem; display: inline-flex; align-items: center; gap: .35rem; max-inline-size: calc(100% - 2rem); padding-block: .42rem; padding-inline: .9rem; border-radius: var(--radius-full); background: var(--fx-yellow); color: var(--fx-ink); font-weight: 800; font-size: .9rem; line-height: 1.1; white-space: nowrap; box-shadow: 0 10px 20px -8px rgba(224,180,0,.75); }
.fx-work-badge .bi { font-size: .95em; }

/* card content (block-end) */
.fx-work-card-body { position: absolute; z-index: 2; inset-inline: 0; inset-block-end: 0; display: flex; flex-direction: column; gap: .5rem; padding: var(--spacing-lg); text-align: start; }
.fx-work-card-title { display: block; color: #fff; font-weight: 800; font-size: 1.3rem; line-height: 1.35; text-shadow: 0 2px 14px rgba(0,0,0,.4); overflow-wrap: break-word; }
.fx-work-card-loc { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255,255,255,.92); font-weight: 600; font-size: .95rem; }
.fx-work-card-loc .bi { color: var(--fx-yellow); font-size: 1em; }
.fx-work-card-more { display: inline-flex; align-items: center; gap: .45rem; margin-block-start: .35rem; color: #fff; font-weight: 800; font-size: .98rem; }
.fx-work-card-more .bi { font-size: .95em; transition: transform .2s ease; }
.fx-work-card:hover .fx-work-card-more .bi { transform: translateX(-4px); } /* nudge toward inline-end (left) */

/* featured emphasis: yellow ring, bigger title, desktop lift */
.fx-work-card--featured { box-shadow: 0 0 0 2px rgba(246,201,21,.9), 0 26px 56px -22px rgba(7,60,40,.62); }
.fx-work-card--featured .fx-work-card-title { font-size: 1.46rem; }
.fx-work-card--featured .fx-work-motif { opacity: .16; }
@media (min-width: 992px) {
    .fx-work-card--featured { transform: translateY(-14px); z-index: 2; }
    .fx-work-card--featured:hover { transform: translateY(-20px); }
}

/* ─── centered CTA ─── */
.fx-work-cta { margin-block-start: var(--spacing-xl); text-align: center; font-size: clamp(1rem, 2.6vw, 1.15rem); font-weight: 600; color: var(--fx-ink-soft); }
.fx-work-cta a { display: inline-flex; align-items: center; gap: .4rem; margin-inline-start: .45rem; color: var(--fx-green-d); font-weight: 800; text-decoration: none; border-radius: 6px; transition: color .16s ease; }
.fx-work-cta a .bi { transition: transform .2s ease; }
.fx-work-cta a:hover { color: var(--fx-green); }
.fx-work-cta a:hover .bi { transform: translateX(-4px); }
.fx-work-cta a:focus-visible { outline: 3px solid var(--fx-yellow); outline-offset: 3px; }

/* ─── reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
    .fx-work-card, .fx-work-motif, .fx-work-card-more .bi, .fx-work-cta a, .fx-work-cta a .bi { transition: none; }
    .fx-work-card:hover, .fx-work-card--featured, .fx-work-card--featured:hover { transform: none; }
    .fx-work-card:hover .fx-work-motif { transform: none; }
}