/* =============================================================================
   HAGAG OUTLET — public site stylesheet
   1:1 implementation of the Figma "Hagag Outlet" design.
   Design tokens (colors, gold gradient, fonts) are kept as CSS custom
   properties so admins can override per-project via custom_css if needed.
   ============================================================================= */

/* Heebo (closest free substitute for Narkiss Block — both are geometric Hebrew
   sans-serifs), Rubik (alternate Hebrew sans), and Cormorant Garamond
   (substitute for PF Marlet Display, used on the stat numbers + footer phone).
   Variable weights 100-900 covered. */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&family=Rubik:wght@300;400;500;600;700;800;900&family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap');

/* ---------- Tokens ---------- */
:root {
    --color-primary:      #172c1e;
    --color-primary-2:    #1e3b29;
    --color-cream:        #fffcf6;
    --color-navy:         #0f2d45;
    --color-white:        #ffffff;
    --color-gold-from:    #ab884a;
    --color-gold-to:      #e1c36c;
    --color-text:         #172c1e;
    --color-muted:        rgba(15, 45, 69, 0.7);
    --color-rule:         #ab884a;

    /* Heebo is the primary face — substitutes for Narkiss Block (Hebrew),
       Fb Jabutinski (Hebrew display), and the kicker's Latin caps.
       --font-display is for elegant Latin display (stat numbers + footer phone). */
    --font-sans:    'Heebo', 'Rubik', 'Arial Hebrew', system-ui, sans-serif;
    --font-serif:   'Heebo', 'Rubik', 'Arial Hebrew', system-ui, sans-serif;
    --font-display: 'Cormorant Garamond', 'Heebo', serif;

    --max-width:   1846px;
    --gutter:      38px;
    --radius-lg:   35px;
    --radius-pill: 100px;

    --gold-grad:   linear-gradient(180deg, var(--color-gold-from) 0%, var(--color-gold-to) 100%);
    --gold-grad-h: linear-gradient(100deg, var(--color-gold-from) 2%, var(--color-gold-to) 135%);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-cream);
    direction: rtl;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color 0.2s ease, opacity 0.2s ease; }
a:hover { opacity: 0.85; }

button { font-family: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }

ul, ol { list-style: none; margin: 0; padding: 0; }
p, h1, h2, h3, h4, h5 { margin: 0; }
/* `.header.main` is `position: fixed` so it floats over the page; the
   padding here keeps content from sliding under it. The mobile media
   queries below mirror the smaller header height. */
main { display: block; padding-top: 126px; }
@media (max-width: 1024px) { main { padding-top: 80px; } }

.custom-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

@media (max-width: 768px) {
    :root { --gutter: 20px; }
}

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Promo bar (optional) ---------- */
.promo-bar { background: var(--color-gold-from); color: var(--color-white); font-size: 15px; padding: 8px 0; text-align: center; }
.promo-bar-inner { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.promo-bar-link  { border-bottom: 1px solid currentColor; padding-bottom: 1px; }

/* ---------- Header ---------- */
.header.main {
    background: var(--color-cream);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    height: 126px;
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 50;
}

.header .head-wraper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Logo on the LEFT, phone CTA on the RIGHT — flips the default RTL row
       order so the layout reads logo → menu → phone visually L→R. */
    flex-direction: row-reverse;
    height: 126px;
    gap: 20px;
}

.header .logo { display: flex; align-items: center; height: 61px; flex-shrink: 0; }
.header .logo-h img { height: 61px; width: auto; object-fit: contain; }
.header .logo-divider, .header .logo-text { display: none; }

.header nav#nav-mobile { flex: 1; display: flex; justify-content: center; }
.header .menu {
    display: flex;
    gap: 38px;
    align-items: center;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 22px;
    color: #000;
}
.header .menu a { padding: 4px 0; transition: color 0.2s; }
.header .menu a:hover { color: var(--color-gold-from); }

.header-phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
    height: 64px;
    padding: 0 32px;
    border-radius: var(--radius-pill);
    font-size: 30px;
    font-weight: 500;
    flex-shrink: 0;
    /* Phone numbers like *5201 must render LTR so the asterisk stays on the
       left of the digits even inside an RTL document. */
    direction: ltr;
    unicode-bidi: isolate;
}
.header-phone:hover { background: var(--color-primary-2); opacity: 1; }
.header-phone-icon {
    width: 29px;
    height: 29px;
    background: url('/assets/images/figma/icon-phone-header.svg') center/contain no-repeat;
    font-size: 0;
    color: transparent;
    flex-shrink: 0;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 12px;
    background: transparent;
    border: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.nav-toggle span {
    width: 28px;
    height: 2px;
    background: var(--color-primary);
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform-origin: center;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-cream);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    border-top: 1px solid rgba(23, 44, 30, 0.1);
    z-index: 49;
}
.mobile-nav.is-open { display: block; padding: 20px 0; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 16px; padding: 0 var(--gutter); font-size: 20px; }
.mobile-nav a { display: block; padding: 8px 0; color: var(--color-primary); }

@media (max-width: 1024px) {
    .header.main { height: 80px; }
    .header .head-wraper { height: 80px; }
    .header .logo-h img { height: 48px; }
    .header .menu { display: none; }
    /* Empty desktop nav must release its flex grow — otherwise it eats space and
       pushes the burger off-screen on narrow viewports. */
    .header nav#nav-mobile { display: none; }
    .header-phone { height: 48px; padding: 0 16px; font-size: 18px; }
    .header-phone-icon { width: 22px; height: 22px; }
    .nav-toggle { display: inline-flex; }
}

@media (max-width: 480px) {
    .header.main, .header .head-wraper { height: 64px; }
    .header .head-wraper { gap: 12px; }
    .header .logo-h img { height: 40px; }
    /* Collapse phone CTA to an icon-only circle so the burger has room to sit
       inside the viewport. The full label reappears at >480px. */
    .header-phone { height: 40px; width: 40px; padding: 0; font-size: 0; gap: 0; }
    .header-phone-label { display: none; }
    .header-phone-icon { width: 20px; height: 20px; }
    .nav-toggle { padding: 8px; }
}

/* ---------- Hero / Main banner ----------
   Per Figma: the hero is a single composition where the cityscape banner
   slides up UNDER the text — the "לצפיה בפרויקטים" CTA and small chevron
   sit on top of the banner image, with the headline above on the cream area.
   Implemented with a stacked layout: cream top section + banner image with
   negative margin pulling it up, so the lower edge of the hero text overlaps
   the upper edge of the banner. */
.main-banner {
    position: relative;
    background: var(--color-cream);
    padding: 90px 0 0;
    text-align: center;
    overflow: hidden;
}
/* Faint Hagag-H watermark behind the hero text (≈3% opacity per Figma) */
.main-banner::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: min(976px, 80%);
    height: 600px;
    background: url('/assets/images/figma/logo-about.png') center top / contain no-repeat;
    opacity: 0.05;
    pointer-events: none;
    z-index: 1;
}

.main-banner-text {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--gutter);
    z-index: 3;
}

.banner-kicker {
    display: block;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 44px;
    line-height: 1;
    letter-spacing: 5.72px;
    background: var(--gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 24px;
    text-transform: uppercase;
}

/* Gold horizontal rule between kicker and title (Figma "Line 2", 90×4 gold) */
.banner-rule {
    display: block;
    width: 90px;
    height: 4px;
    margin: 0 auto 36px;
    background: var(--gold-grad-h);
    border-radius: 2px;
}

.banner-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 80px;
    line-height: 1.1;
    color: var(--color-primary);
    margin-bottom: 28px;
}

.banner-tagline {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 50px;
    line-height: 1;
    color: var(--color-primary);
    margin-bottom: 76px;
}

.banner-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 61px;
    padding: 0 64px;
    min-width: 287px;
    border-radius: var(--radius-pill);
    background: var(--gold-grad-h);
    color: var(--color-white);
    border: 2px solid var(--color-gold-from);
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 30px;
    line-height: 35.444px;
    letter-spacing: 0.5px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.banner-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(171, 136, 74, 0.3); opacity: 1; }

/* Down-chevron scroll indicator below the CTA (Figma "Group 260").
   display: flex + width: fit-content + margin auto = block-level centered
   element, so it drops to its own line UNDER the CTA pill rather than
   sitting inline beside it. */
.banner-scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 36px auto 0;
    color: var(--color-gold-from);
    transition: transform 0.3s ease;
    animation: hero-bob 1.8s ease-in-out infinite;
}
.banner-scroll:hover { transform: translateY(2px); opacity: 1; }
.banner-scroll-icon {
    width: 16px;
    height: 24px;
    background: url('/assets/images/figma/icon-arrow-down.svg') center/contain no-repeat;
}
@keyframes hero-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

/* The cityscape banner — composed of two layered images per the Figma design:
     1. ::before — sunset cityscape rectangle (banner-2.png) anchored to the
        bottom 275px with rounded corners (this is the visible "rectangle").
     2. ::after — silhouette buildings (banner-1.png, transparent BG) zoomed
        up so the building tops rise ABOVE the sunset rectangle into the
        cream area, anchored to the rectangle bottom.
   The outer .main-banner-photo div is a positioning context only (no bg).
   Pulled up via negative margin so the CTA sits over the silhouette. */
/* Hero cityscape banner — ONE single PNG asset (`hero-banner.png`, 1846×449)
   that has the full composition baked in: cityscape with rounded corners,
   building silhouettes extending above, and transparent alpha around them.
   No border-radius on the container — the rounded corners are part of the
   image. aspect-ratio sizes the container to the image's natural proportions
   so it scales cleanly across viewports. */
.main-banner-photo {
    position: relative;
    margin: 30px var(--gutter) 0;
    width: auto;
    aspect-ratio: 1846 / 449;
    background-image: var(--hero-bg, url('/assets/images/figma/hero-banner.png'));
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
}

@media (max-width: 1024px) {
    .main-banner { padding-top: 40px; }
    .banner-kicker { font-size: 28px; letter-spacing: 4px; margin-bottom: 14px; }
    .banner-rule { width: 70px; height: 3px; margin-bottom: 18px; }
    .banner-title { font-size: 48px; }
    .banner-tagline { font-size: 28px; margin-bottom: 32px; }
    .banner-cta { font-size: 22px; height: 52px; padding: 0 40px; min-width: 0; }
    .main-banner-photo { margin: 16px var(--gutter) 0; }
}

@media (max-width: 640px) {
    .banner-kicker { font-size: 22px; letter-spacing: 3px; }
    .banner-title { font-size: 32px; }
    .banner-tagline { font-size: 22px; margin-bottom: 24px; }
    .banner-cta { font-size: 18px; height: 46px; padding: 0 28px; }
    .main-banner-photo { margin: 12px var(--gutter) 0; }
}

/* ---------- Section title (LIMITED EDITION) ---------- */
.section-title { text-align: center; padding: 90px 0 50px; }

.section-title-inner { display: inline-block; }

.section-title-en {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 60px;
    line-height: 1;
    color: var(--color-primary);
    letter-spacing: 0.5px;
}

.section-title-he {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 40px;
    line-height: 1;
    color: var(--color-primary);
    margin-top: 20px;
}

.section-title-rule {
    display: block;
    width: 90px;
    height: 4px;
    margin: 30px auto 0;
    background: var(--gold-grad-h);
    border-radius: 2px;
}

@media (max-width: 1024px) {
    .section-title { padding: 60px 0 30px; }
    .section-title-en { font-size: 36px; }
    .section-title-he { font-size: 24px; }
}

/* ---------- Project filter ---------- */
.project-filter {
    max-width: var(--max-width);
    margin: 30px auto 30px;
    padding: 0 var(--gutter);
}

.project-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.pf-label-text {
    order: 1;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 30px;
    color: var(--color-primary);
    margin: 0;
    margin-left: auto;
}

.pf-chips { order: 2; display: flex; gap: 12px; flex-wrap: wrap; }

.pf-chip {
    position: relative;
    display: inline-block;
}
.pf-chip-trigger {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    height: 42px;
    padding: 0 26px 0 22px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 20px;
    color: var(--color-primary);
    cursor: pointer;
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease;
}
.pf-chip-trigger:hover { background: rgba(23, 44, 30, 0.06); }
.pf-chip-label { white-space: nowrap; }
.pf-chip-arrow {
    width: 13px;
    height: 13px;
    background: url('/assets/images/figma/icon-chev-down.svg') center/contain no-repeat;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.pf-chip[aria-expanded="true"] .pf-chip-arrow,
.pf-chip-trigger[aria-expanded="true"] .pf-chip-arrow { transform: rotate(180deg); }

/* Active filter (selected) */
.pf-chip.is-active .pf-chip-trigger {
    background: var(--color-primary);
    color: var(--color-white);
}
.pf-chip.is-active .pf-chip-arrow { filter: brightness(0) invert(1); }

/* Custom dropdown menu (replaces native select popup) */
.pf-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 100%;
    width: max-content;
    max-width: 320px;
    list-style: none;
    margin: 0;
    padding: 8px;
    background: var(--color-cream);
    border: 1px solid var(--color-gold-from);
    border-radius: 18px;
    box-shadow: 0 18px 40px -12px rgba(23, 44, 30, 0.25);
    z-index: 50;
    direction: rtl;
    text-align: right;
    font-family: var(--font-sans);
    font-size: 18px;
    color: var(--color-primary);
    max-height: 320px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.pf-menu[hidden] { display: none !important; }
.pf-chip.is-open .pf-menu { opacity: 1; transform: translateY(0); }
.pf-menu li {
    list-style: none;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    user-select: none;
}
.pf-menu li:hover {
    background: rgba(171, 136, 74, 0.12);
    color: var(--color-primary);
}
.pf-menu li[aria-selected="true"] {
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 500;
}
.pf-menu li[data-clear="1"] {
    color: rgba(23, 44, 30, 0.6);
    font-style: italic;
}
.pf-menu li[data-clear="1"][aria-selected="true"] {
    background: rgba(23, 44, 30, 0.08);
    color: var(--color-primary);
    font-style: normal;
}

.pf-clear {
    order: 3;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 30px;
    color: var(--color-primary);
    background: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.pf-clear::after {
    content: '';
    width: 16px; height: 16px;
    background: url('/assets/images/figma/icon-x.svg') center/contain no-repeat;
}
.pf-clear:hover { color: var(--color-gold-from); }

.pf-empty {
    margin: 24px 0;
    padding: 16px 24px;
    background: rgba(171, 136, 74, 0.08);
    border: 1px dashed var(--color-gold-from);
    border-radius: 12px;
    font-size: 18px;
    color: var(--color-primary);
    text-align: center;
}
.pf-empty-clear { text-decoration: underline; color: var(--color-gold-from); margin-right: 8px; }

@media (max-width: 1024px) {
    .pf-label-text { font-size: 22px; }
    .pf-chip-trigger { font-size: 16px; height: 36px; padding: 0 18px; }
    .pf-clear { font-size: 22px; }
}
@media (max-width: 640px) {
    .project-filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .pf-label-text { display: none; }
    /* Three chips in one row, equal width, fill the gutter — keeps RTL reading
       order (חדרים → טווח מחירים → עיר) without stacking each on its own line. */
    .pf-chips {
        order: 1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        width: 100%;
    }
    .pf-chip { display: block; min-width: 0; }
    .pf-chip-trigger {
        width: 100%;
        gap: 8px;
        padding: 0 14px;
        font-size: 14px;
        justify-content: space-between;
    }
    .pf-chip-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .pf-menu {
        right: 0;
        left: 0;
        min-width: 0;
        width: 100%;
        max-width: none;
    }
    .pf-clear {
        order: 2;
        font-size: 18px;
        align-self: flex-end;
    }
    .pf-clear::after { width: 14px; height: 14px; }
}

/* ---------- Project grid (homepage cards) ----------
   Per Figma: each card is a 603x546 photo with a dark gradient at the bottom,
   the project-name graphic centered just above the gradient bottom, and the
   "לעמוד פרויקט" pill straddling the bottom edge. Below the photo, on the
   cream page background, sits the description + location + availability text.
*/
.grid-boxes {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter) 90px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px 18px;
}

.grid-boxes .box {
    position: relative;
    color: var(--color-navy);
    padding-bottom: 0;
}
.grid-boxes .box > .card-info-cta,
.grid-boxes .box .card-info > .card-info-cta { /* per existing markup, the CTA lives inside .card-info — but we anchor it visually to the image bottom */ }

.grid-boxes .box .img {
    position: relative;
    height: 546px;
    border-radius: var(--radius-lg);
    overflow: visible; /* allow .card-info-cta and .card-tag to extend beyond */
    background: transparent;
    isolation: isolate;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.grid-boxes .box:hover .img {
    transform: translateY(-4px);
    box-shadow: 0 22px 40px -16px rgba(15, 45, 69, 0.32);
}
.grid-boxes .box .card-imge,
.grid-boxes .box .img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-lg);
}

/* Bottom-of-image dark gradient — mirrors Figma "Rectangle 40" */
.grid-boxes .box .img::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 205px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.486) 57%, rgba(0,0,0,0.95) 100%);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    pointer-events: none;
    transition: opacity 0.25s ease;
}
/* Hover dim layer — makes the cream CTA pill pop on hover */
.grid-boxes .box .img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(23, 44, 30, 0.4);
    border-radius: var(--radius-lg);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 1;
}
.grid-boxes .box:hover .img::before { opacity: 1; }

/* Project name overlay — gold/cream "EPSTEIN 7" style graphic above gradient */
.grid-boxes .box .card-logo {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 105px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    pointer-events: none;
    color: var(--color-cream);
    text-align: center;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}
.grid-boxes .box .card-logo .logo-en {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 56px;
    line-height: 1;
    letter-spacing: 6px;
    text-transform: uppercase;
}
.grid-boxes .box .card-logo .logo-he {
    display: block;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 24px;
    margin-top: 6px;
    opacity: 0.92;
}

/* "לעמוד פרויקט" pill — only visible on hover (or focus for keyboard users).
   Anchored to the BOTTOM of the image (per Figma) with a small inset, fading
   in with a slight rise from below. */
.grid-boxes .box .card-info-cta {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 24px;
    height: 61px;
    padding: 0 36px;
    background: var(--color-cream);
    border: 1px solid var(--color-gold-from);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 24px;
    color: var(--color-primary);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, color 0.2s ease;
    z-index: 4;
    box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.45);
}
.grid-boxes .box:hover .card-info-cta,
.grid-boxes .box:focus-within .card-info-cta {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.grid-boxes .box .card-info-cta::before,
.grid-boxes .box .card-info-cta::after {
    content: '';
    width: 13px; height: 13px;
    background: url('/assets/images/figma/icon-chev-left.svg') center/contain no-repeat;
}
.grid-boxes .box .card-info-cta::after { transform: scaleX(-1); }
.grid-boxes .box .card-info-cta:hover {
    background: var(--color-primary);
    color: var(--color-white);
    opacity: 1;
}
.grid-boxes .box .card-info-cta:hover::before,
.grid-boxes .box .card-info-cta:hover::after { filter: brightness(0) invert(1); }
.card-info-cta-arrow { display: none; }

/* Text content below the card image, on the cream page bg, right-aligned RTL */
.grid-boxes .box .card-info {
    padding: 50px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: right;
    direction: rtl;
}

.grid-boxes .box .card-info-desc {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.18;
    color: var(--color-navy);
    margin: 0 0 6px;
}

.grid-boxes .box .card-info-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-sans);
    font-size: 22px;
    line-height: 1.35;
    color: var(--color-navy);
}
.grid-boxes .box .card-info-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
}
.grid-boxes .box .card-info-meta-icon {
    width: 18px; height: 22px;
    color: transparent;
    font-size: 0;
    flex-shrink: 0;
}
.grid-boxes .box .card-icon-pin {
    background: url('/assets/images/figma/icon-pin.svg') center/contain no-repeat;
}
.grid-boxes .box .card-icon-doors {
    background: url('/assets/images/figma/icon-doors.svg') center/contain no-repeat;
    width: 21px; height: 19px;
}

.grid-boxes .box .card-tag {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    background: var(--gold-grad-h);
    color: var(--color-white);
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.4px;
}
.grid-boxes .box .card-tag.tag-sold_out { background: rgba(15, 45, 69, 0.85); }
.grid-boxes .box .card-tag.tag-upcoming { background: rgba(23, 44, 30, 0.85); }

.grid-boxes .box[data-filter-hidden="1"] { display: none; }

/* The CTA lives inside .card-info in the markup, but absolute positioning
   anchors it to the image bottom edge of .box. */

@media (max-width: 1280px) {
    .grid-boxes { grid-template-columns: repeat(2, 1fr); }
    .grid-boxes .box .img { height: 480px; }
    .grid-boxes .box .card-logo .logo-en { font-size: 48px; }
}

@media (max-width: 720px) {
    .grid-boxes { grid-template-columns: 1fr; gap: 80px 32px; padding-bottom: 50px; }
    .grid-boxes .box .img { height: 380px; }
    .grid-boxes .box .card-logo .logo-en { font-size: 36px; letter-spacing: 4px; }
    .grid-boxes .box .card-logo .logo-he { font-size: 20px; }
    .grid-boxes .box .card-info-desc,
    .grid-boxes .box .card-info-meta { font-size: 18px; }
    .grid-boxes .box .card-info-cta { font-size: 22px; height: 52px; }
}

/* ---------- Project page hero ---------- */
.project-page { background: var(--color-cream); }

.project-hero {
    position: relative;
    height: 720px;
    margin: 0 var(--gutter);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    color: var(--color-white);
}

.project-hero-overlay {
    position: absolute;
    inset: 0;
    /* Mirrors Figma project-page (node 9:482): the dark overlay starts fading
       in around 70% of the hero height and resolves to solid black at the
       bottom. */
    background: linear-gradient(180deg, rgba(23,44,30,0) 0%, rgba(23,44,30,0) 70%, #000 100%);
    pointer-events: none;
}

.project-hero-inner {
    position: absolute;
    inset: auto 0 60px 0;
    text-align: center;
    z-index: 2;
    padding: 0 24px;
}

.project-hero-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--color-cream);
    text-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.project-hero-logo .logo-he {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 60px;
    line-height: 1;
    letter-spacing: 0.5px;
}
.project-hero-logo .logo-en {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 88px;
    line-height: 1;
    letter-spacing: 8px;
    text-transform: uppercase;
    background: var(--gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.project-hero-address {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 29px;
    color: var(--color-white);
}
.project-hero-pin {
    width: 18px; height: 24px;
    background: url('/assets/images/figma/icon-pin.svg') center/contain no-repeat;
    color: transparent; font-size: 0;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

@media (max-width: 1024px) {
    .project-hero { height: 480px; margin: 0 20px; }
    .project-hero-logo .logo-en { font-size: 56px; letter-spacing: 4px; }
    .project-hero-logo .logo-he { font-size: 36px; }
    .project-hero-address { font-size: 20px; }
}

@media (max-width: 640px) {
    .project-hero { height: 360px; }
    .project-hero-inner { bottom: 32px; }
    .project-hero-logo .logo-en { font-size: 40px; }
    .project-hero-logo .logo-he { font-size: 24px; }
}

/* ---------- Project details ---------- */
.project-details {
    padding: 90px var(--gutter) 30px;
    max-width: var(--max-width);
    margin: 0 auto;
}

.project-details-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: start;
}

.project-block-heading {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 60px;
    color: var(--color-primary);
    margin-bottom: 50px;
    text-align: center;
}

.project-details-col-points { order: 2; text-align: center; }
.project-details-col-about  { order: 1; text-align: right;  }

.project-icons-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 16px;
    max-width: 760px;
    margin: 0 auto;
}

.project-icons-row li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.project-icon {
    width: 72px; height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}
/* Admin-picked Figma SVG renders inline as <img>; legacy text glyphs render
   via .project-icon-glyph. */
.project-icon img { width: 100%; height: 100%; object-fit: contain; }
.project-icon-glyph { font-size: 40px; line-height: 1; }

.project-icon-label {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 23px;
    line-height: 1.2;
    color: var(--color-primary);
    text-align: center;
}
.project-icon-sub { display: block; font-weight: 300; }

.project-description {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 25px;
    line-height: 1.13;
    color: var(--color-navy);
    margin-bottom: 40px;
}
.project-description p:first-child { font-weight: 500; }

.project-apartments {
    display: grid;
    /* `minmax(0, 1fr)` (vs plain `1fr`) lets the columns SHRINK below their
       intrinsic min-content width — essential for RTL Hebrew headings whose
       `white-space: nowrap` was forcing the grid to overflow the about col. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    border-top: 1px solid rgba(15, 45, 69, 0.15);
    padding-top: 30px;
}

/* Apartments heading + list live in column 1 → visual RIGHT in RTL.
   Price card in column 3 → visual LEFT. (Matches Figma 9:294: apartments
   on the reading-start edge, price card on the reading-end edge.) */
.project-apartments-heading {
    grid-column: 1 / 2;
    grid-row: 1;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 60px;
    line-height: 0.987;
    color: var(--color-primary);
    margin-bottom: 30px;
    text-align: right;
}

.project-apartments-list {
    grid-column: 1 / 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.project-apartments-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 27px;
    line-height: 1.35;
    color: var(--color-navy);
}
.project-apartments-meta { font-weight: 300; }
.project-apartments-icon {
    width: 27px; height: 25px;
    background: url('/assets/images/figma/icon-doors.svg') center/contain no-repeat;
    color: transparent; font-size: 0;
    flex-shrink: 0;
}

.project-apartments::before {
    content: '';
    grid-column: 2 / 3;
    grid-row: 1 / span 2;
    width: 1px;
    background: rgba(15, 45, 69, 0.25);
    justify-self: center;
    align-self: stretch;
    margin: 8px 0;
}

.project-price-card {
    grid-column: 3 / 4;
    grid-row: 1 / span 2;
    align-self: start;
    text-align: right;
}

/* When there's no price set on any apartment, the price card doesn't render
   (see details.php). Without this override, the heading + list stay pinned
   to `grid-column: 3` which — in `direction: rtl` — is the visual LEFT, so
   "סוגי דירות שנותרו" appears stranded on the left half with empty space
   on the right. Collapse to single-column instead. */
.project-apartments.has-no-price {
    grid-template-columns: 1fr;
}
.project-apartments.has-no-price::before { display: none; }
.project-apartments.has-no-price .project-apartments-heading,
.project-apartments.has-no-price .project-apartments-list {
    grid-column: 1 / -1;
    text-align: right;
}
.project-price-heading {
    display: block;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 60px;
    line-height: 0.987;
    color: var(--color-primary);
    margin: 0 0 30px;
}
.project-price-from {
    display: block;
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 27px;
    line-height: 1.13;
    color: var(--color-navy);
    margin-bottom: 4px;
}
.project-price-value {
    display: block;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 39px;
    line-height: 1.13;
    color: var(--color-navy);
}

@media (max-width: 1024px) {
    .project-details { padding: 60px var(--gutter) 30px; }
    .project-details-grid { grid-template-columns: 1fr; gap: 50px; }
    .project-details-col-points { order: 2; }
    .project-details-col-about  { order: 1; }
    .project-block-heading { font-size: 36px; margin-bottom: 30px; }
    .project-icons-row { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
    .project-description { font-size: 18px; }

    /* Drop the desktop 3-column (price | sep | apartments) split. Mobile gets
       a vertical stack with a balanced typographic scale and a horizontal rule
       between the apartments list and the price card so the two read as
       separate facts even though they share a column. */
    .project-apartments {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .project-apartments::before { display: none; }
    .project-apartments-heading,
    .project-apartments-list,
    .project-price-card {
        grid-column: auto;
        grid-row: auto;
    }
    .project-apartments-heading {
        font-size: 26px;
        line-height: 1.15;
        margin: 0 0 4px;
        white-space: normal;
    }
    .project-apartments-list { gap: 8px; }
    .project-apartments-list li { font-size: 18px; line-height: 1.4; }

    /* Inline price card: heading + "from" + value all baseline-aligned on one
       line so it reads naturally as "מחיר · החל מ- · 4,830,000 ₪" instead of
       three stacked headings competing for attention. */
    .project-price-card {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px 10px;
        text-align: right;
        margin: 8px 0 0;
        padding-top: 16px;
        border-top: 1px solid rgba(15, 45, 69, 0.15);
    }
    .project-price-heading {
        font-size: 24px;
        line-height: 1.15;
        margin: 0;
    }
    .project-price-heading::after {
        content: '·';
        margin-inline-start: 6px;
        opacity: 0.5;
        font-weight: 400;
    }
    .project-price-from { font-size: 16px; margin: 0; }
    .project-price-value {
        font-size: 24px;
        font-weight: 600;
        margin: 0;
    }
}

@media (max-width: 640px) {
    .project-details { padding: 40px var(--gutter) 20px; }
    .project-block-heading { font-size: 30px; margin-bottom: 24px; }
    .project-description { font-size: 17px; line-height: 1.5; }
    .project-icons-row { grid-template-columns: repeat(2, 1fr); gap: 20px 10px; }
    .project-icons-row li { gap: 10px; }
    .project-icon { width: 56px; height: 56px; }
    .project-icon-glyph { font-size: 30px; }
    .project-icon-label { font-size: 17px; line-height: 1.3; }
    .project-apartments-heading { font-size: 22px; }
    .project-apartments-list li { font-size: 16px; }
    .project-price-heading  { font-size: 20px; }
    .project-price-from     { font-size: 14px; }
    .project-price-value    { font-size: 20px; }
}

/* ---------- Project gallery ---------- */
.project-gallery {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 90px var(--gutter);
    margin-top: 60px;
}

.project-gallery-title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 60px;
    color: var(--color-white);
    margin-bottom: 30px;
    text-align: right;
    max-width: var(--max-width);
    margin-inline: auto;
}

.project-gallery-tabs {
    display: flex;
    justify-content: flex-end;
    gap: 30px;
    max-width: var(--max-width);
    margin: 0 auto 30px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    padding-bottom: 12px;
}
.project-gallery-tab {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 27px;
    line-height: 1.13;
    color: var(--color-white);
    opacity: 0.53;
    background: none;
    border: 0;
    padding: 8px 0;
    position: relative;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.project-gallery-tab.is-active { opacity: 1; font-weight: 500; }
.project-gallery-tab.is-active::after {
    content: '';
    position: absolute;
    inset: auto 0 -13px 0;
    height: 4px;
    background: var(--gold-grad-h);
    border-radius: 2px;
}
/* (`.is-empty` is no longer emitted — gallery.php filters empty categories
   out of the tab strip entirely so the bar only carries clickable tabs.
   Kept around as a no-op in case any cached HTML still has the class.) */
.project-gallery-tab.is-empty { display: none; }

.project-gallery-pane { display: none; max-width: var(--max-width); margin: 0 auto; position: relative; }
.project-gallery-pane.is-active { display: block; }

.project-gallery-stage {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1562 / 669;
    background: rgba(0,0,0,0.3);
}

.project-gallery-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    display: block;
}
.project-gallery-slide.is-active { opacity: 1; z-index: 2; }
.project-gallery-slide img { width: 100%; height: 100%; object-fit: cover; }
.project-gallery-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 16px 24px;
    background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
    color: var(--color-white);
    font-size: 18px;
}

/* Gallery nav buttons — siblings of .project-gallery-stage (NOT children),
   because the stage has overflow:hidden to round its corners and would
   otherwise clip absolutely-positioned arrows. The pane is the relative
   parent; we position the nav 50% vertically against it.
   Style: gold arrow heads on a translucent dark backdrop circle, sitting
   just inside the image edges. We keep this consistent on every viewport
   — the Figma design wanted them OUTSIDE the image but on real screens
   the gallery section's gutter (38px) is too narrow to fit a 24px arrow
   at right:-50px. Inside-edge with backdrop is more robust and reads
   well over both light and dark photos. */
.project-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: 0;
    padding: 0;
    color: transparent;
    font-size: 0;
    cursor: pointer;
    z-index: 3;
    transition: background 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.project-gallery-nav:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-50%) scale(1.05);
    opacity: 1;
}
.project-gallery-nav-icon {
    display: block;
    width: 18px;
    height: 18px;
    background: url('/assets/images/figma/gallery-arrow-l.svg') center/contain no-repeat;
    /* Force the SVG strokes to white so the arrow reads against the dark
       circle backdrop regardless of the gold gradient in the source. */
    filter: brightness(0) invert(1);
}
/* SVG (`gallery-arrow-l.svg`) is a `Γ` glyph — top + left edges of a square
   meeting at a top-left corner. Rotated CCW it becomes a chevron with the
   point in the direction we want the user to navigate to:
   • prev (visual right edge): rotate 135° → `>` (point right, opens left)
   • next (visual left edge) : rotate −45° → `<` (point left, opens right)
   Putting them the other way around produces `> <` (arrows pointing INWARD
   at the photo) which the user reports as "rotated 180°". */
.project-gallery-nav-prev { right: 16px; }
.project-gallery-nav-prev .project-gallery-nav-icon { transform: rotate(135deg); }
.project-gallery-nav-next { left: 16px; }
.project-gallery-nav-next .project-gallery-nav-icon { transform: rotate(-45deg); }

.project-gallery-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 60px;
    flex-wrap: wrap;
}
/* Pagination "dots" — actually rounded rectangles per Figma 9:683-9:687.
   89×55 thumbnail tiles. The button's `style="background-image: url(…)"`
   (set inline by gallery.php) renders the slide thumbnail; the gray bg
   below is the fallback while the image loads or if it fails. The active
   item gets a 2px gold border. */
.project-gallery-dot {
    width: 89px;
    height: 55px;
    border-radius: 10px;
    background-color: #d9d9d9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.project-gallery-dot:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.project-gallery-dot.is-active {
    border-color: var(--color-gold-from);
    box-shadow: 0 0 0 1px rgba(171, 136, 74, 0.3);
}

@media (max-width: 640px) {
    .project-gallery-dots { gap: 6px; margin-top: 24px; }
    .project-gallery-dot { width: 56px; height: 36px; border-radius: 6px; }
}

/* ---------- Lightbox (built dynamically by openLightbox in main.js) ---------- */
.cms-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    animation: cms-lb-in 0.2s ease-out;
}
@keyframes cms-lb-in { from { opacity: 0; } to { opacity: 1; } }

.cms-lightbox-stage {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.cms-lightbox-stage img {
    max-width: 90vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    background: #1a1a1a;
}
.cms-lightbox-caption {
    color: #fff;
    font-family: var(--font-sans);
    font-size: 16px;
    text-align: center;
    max-width: 80vw;
    line-height: 1.4;
}

.cms-lightbox-close {
    position: absolute;
    top: 20px;
    inset-inline-end: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}
.cms-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); transform: rotate(90deg); }

.cms-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 0;
    font-family: var(--font-sans);
    font-size: 32px;
    line-height: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 1;
}
.cms-lightbox-nav:hover { background: rgba(255, 255, 255, 0.24); }
/* In RTL "previous" sits on the right edge, "next" on the left edge —
   matches the inline gallery's orientation. */
.cms-lightbox-prev { inset-inline-end: 30px; }
.cms-lightbox-next { inset-inline-start: 30px; }

.cms-lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 14px;
    letter-spacing: 1px;
}

@media (max-width: 640px) {
    .cms-lightbox       { padding: 20px; }
    .cms-lightbox-nav   { width: 44px; height: 44px; font-size: 24px; }
    .cms-lightbox-prev  { inset-inline-end: 12px; }
    .cms-lightbox-next  { inset-inline-start: 12px; }
    .cms-lightbox-close { top: 12px; inset-inline-end: 12px; width: 38px; height: 38px; font-size: 22px; }
}

@media (max-width: 1024px) {
    .project-gallery { padding: 60px 20px; }
    .project-gallery-title { font-size: 36px; }
    .project-gallery-tabs { gap: 18px; }
    .project-gallery-tab { font-size: 18px; }
    .project-gallery-nav-prev { right: 8px; }
    .project-gallery-nav-next { left: 8px; }
    .project-gallery-dot { width: 56px; height: 36px; border-radius: 7px; }
    .project-gallery-dots { gap: 5px; margin-top: 36px; }
}

/* Plain text / map / video / specs blocks */
.project-text, .project-specs {
    max-width: var(--max-width);
    margin: 60px auto;
    padding: 0 var(--gutter);
    color: var(--color-primary);
}
.project-text h2, .project-specs h2 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 42px;
    margin-bottom: 24px;
}
.project-map, .project-video {
    max-width: var(--max-width);
    margin: 60px auto;
    padding: 0 var(--gutter);
}
.project-map iframe, .project-video iframe, .project-video video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius-lg);
}
.project-block-disabled-flag {
    max-width: var(--max-width);
    margin: 8px auto;
    padding: 8px 16px;
    background: rgba(171, 136, 74, 0.12);
    border: 1px dashed var(--color-gold-from);
    border-radius: 6px;
    color: var(--color-primary);
    font-size: 14px;
    text-align: center;
}

/* ---------- Footer ---------- */
.footer {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 100px 0 0;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/assets/images/figma/logo-about.png') center 80px/min(976px, 70%) no-repeat;
    opacity: 0.03;
    pointer-events: none;
    filter: brightness(0) invert(1);
}

.footer .custom-container { position: relative; z-index: 1; }

.footer .form { padding: 0 var(--gutter); margin-bottom: 90px; }
.footer .form-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 32px;
    text-align: center;
    color: var(--color-white);
    margin-bottom: 24px;
}

.footer .input-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.footer .input-wraper { width: 100%; }

.footer .input {
    width: 100%;
    height: 60px;
    padding: 0 26px;
    border: 1.15px solid var(--color-white);
    background: transparent;
    color: var(--color-white);
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 20px;
    border-radius: var(--radius-lg);
    text-align: right;
    direction: rtl;
    transition: background 0.2s ease;
}
.footer .input::placeholder { color: rgba(255,255,255,0.56); }
.footer .input:focus {
    outline: none;
    background: rgba(255,255,255,0.06);
    border-color: var(--color-gold-from);
}

.footer .submit {
    width: 100%;
    height: 60px;
    background: var(--gold-grad-h);
    color: var(--color-primary);
    border: 0;
    border-radius: var(--radius-lg);
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 1.44px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.footer .submit:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(225, 195, 108, 0.35); }

.footer .info { margin-top: 18px; display: flex; justify-content: center; }
.footer .checkbox {
    max-width: 1070px;
    display: flex;
    /* RTL flow: HTML order is [checkbox, label]; the default `row` direction
       puts the checkbox on the visual right (start of RTL reading), matching
       Figma 9:711. `row-reverse` would move it to the left, which reads as LTR. */
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    color: var(--color-white);
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 11px;
    line-height: 1.18;
}
.footer .checkbox input[type="checkbox"] {
    appearance: none;
    width: 22px; height: 22px;
    border: 1px solid var(--color-white);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
}
.footer .checkbox input[type="checkbox"]:checked {
    background: var(--gold-grad);
    border-color: var(--color-gold-from);
}
.footer .checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset: 4px 6px 7px 5px;
    border-bottom: 2px solid var(--color-primary);
    border-left:   2px solid var(--color-primary);
    transform: rotate(-45deg);
}
.footer .checkbox label { text-align: right; flex: 1; cursor: pointer; }

.form-flash {
    max-width: 800px;
    margin: 0 auto 16px;
    padding: 12px 18px;
    border-radius: 12px;
    text-align: center;
    font-size: 16px;
}
.form-flash-success { background: rgba(225, 195, 108, 0.18); border: 1px solid var(--color-gold-from); color: var(--color-cream); }
.form-flash-error   { background: rgba(220, 80, 80, 0.18);  border: 1px solid #dc5050;            color: #ffd6d6; }

@media (max-width: 1024px) {
    .footer { padding-top: 60px; }
    .footer .input-row { grid-template-columns: 1fr 1fr; }
    .footer .submit, .footer .input { font-size: 18px; height: 52px; }
    .footer .form-title { font-size: 24px; }
}
@media (max-width: 640px) {
    .footer .input-row { grid-template-columns: 1fr; }
}

.footer-about {
    text-align: center;
    padding: 0 var(--gutter);
    margin-bottom: 80px;
}

.footer-logo { display: inline-flex; margin-bottom: 30px; }
.footer-logo .logo-h-light img { height: 73px; width: auto; filter: brightness(0) invert(1); }
.footer-logo .footer-logo-divider, .footer-logo .footer-logo-text { display: none; }

.footer-about-copy {
    max-width: 1494px;
    margin: 0 auto 60px;
    font-family: var(--font-sans);
    font-weight: 200;
    font-size: 23px;
    line-height: 1.13;
    color: var(--color-white);
    text-align: center;
}
.footer-about-copy p { margin-bottom: 0.4em; }
.footer-about-copy p:last-child { margin-bottom: 0; }

.footer-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto 60px;
    text-align: center;
}
.footer-stats li { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.footer-stats .num {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 65px;
    line-height: 1.15;
    background: var(--gold-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.5px;
}
.footer-stats .label {
    display: block;
    font-family: var(--font-sans);
    font-weight: 200;
    font-size: 23px;
    line-height: 1.2;
    color: var(--color-white);
}

@media (max-width: 1024px) {
    .footer-about-copy { font-size: 16px; margin-bottom: 36px; }
    .footer-stats { gap: 16px; }
    .footer-stats .num { font-size: 42px; }
    .footer-stats .label { font-size: 16px; }
}
@media (max-width: 640px) {
    .footer-stats { grid-template-columns: repeat(2, 1fr); }
}

.footer .tel {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 82px;
    line-height: 1.15;
    letter-spacing: 2.46px;
    color: var(--color-white);
    margin: 0 auto;
    /* LTR so the leading * in numbers like *5201 stays at the left. */
    direction: ltr;
    unicode-bidi: isolate;
}
.footer .tel::before {
    content: '';
    width: 30px; height: 37px;
    background: url('/assets/images/figma/icon-phone-footer.svg') center/contain no-repeat;
    flex-shrink: 0;
}

@media (max-width: 1024px) { .footer .tel { font-size: 48px; } }
@media (max-width: 640px)  { .footer .tel { font-size: 38px; } }

.footer-socials {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 24px var(--gutter) 0;
}
.footer-social {
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: 14px;
    transition: background 0.2s ease;
}
.footer-social:hover { background: var(--color-gold-from); }

.footer .by {
    border-top: 1px solid var(--color-gold-from);
    margin: 60px var(--gutter) 0;
    padding: 28px 0 12px;
    text-align: center;
    color: rgba(236, 244, 245, 1);
    font-family: var(--font-sans);
    font-size: 15px;
    letter-spacing: 0.9px;
    text-transform: capitalize;
}
.footer .by a { display: inline-block; padding: 0 12px; }
.footer .by .sep { opacity: 0.5; }

.footer-bottom {
    padding: 12px 0 28px;
    text-align: center;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
}

/* ---------- CMS page ---------- */
.cms-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 80px var(--gutter);
}
.cms-page-title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 56px;
    line-height: 1.1;
    color: var(--color-primary);
    margin-bottom: 30px;
    text-align: right;
}
.cms-page .cms-content,
.cms-page .rich-content {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: 20px;
    line-height: 1.6;
    color: var(--color-navy);
}
.cms-page .rich-content p { margin: 0 0 1em; }
.cms-page .rich-content a { color: var(--color-gold-from); text-decoration: underline; }
.cms-page .rich-content h2 { font-family: var(--font-serif); font-weight: 600; font-size: 36px; color: var(--color-primary); margin: 30px 0 14px; }
.cms-page .rich-content h3 { font-family: var(--font-serif); font-weight: 500; font-size: 28px; color: var(--color-primary); margin: 24px 0 10px; }
.cms-page .rich-content ul, .cms-page .rich-content ol { margin: 0 0 1em; padding-right: 1.4em; }
.cms-page .rich-content li { margin-bottom: 0.4em; }

@media (max-width: 1024px) {
    .cms-page-title { font-size: 36px; }
    .cms-page .rich-content { font-size: 17px; }
}

/* ---------- Floating CTAs ---------- */
.floating-ctas {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.floating-cta {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--gold-grad);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    transition: transform 0.2s ease;
}
.floating-cta:hover { transform: scale(1.1); }

/* ---------- Cookie banner / a11y widget ---------- */
.cookie-banner {
    position: fixed;
    bottom: 16px;
    inset-inline: 16px;
    max-width: 720px;
    margin: 0 auto;
    background: var(--color-cream);
    color: var(--color-primary);
    padding: 18px 22px;
    border-radius: 16px;
    border: 1px solid rgba(23,44,30,0.15);
    box-shadow: 0 14px 30px rgba(0,0,0,0.18);
    z-index: 200;
    font-size: 15px;
    line-height: 1.4;
}
.cookie-banner h3 { font-family: var(--font-serif); font-weight: 600; font-size: 20px; margin-bottom: 8px; }
.cookie-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.cookie-banner-actions button {
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 500;
    font-size: 14px;
}
.cookie-banner-actions button.secondary { background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); }

.a11y-trigger {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    font-size: 22px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

/* ---------- Admin bar (WordPress-style edit-mode toolbar) ----------
   Full-width dark bar at the very top of the page, pushes content down,
   compact horizontal layout with hover-highlighted nodes. */
.cms-admin-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99999;
    height: 36px;
    background: #1d2327;
    color: #f0f0f1;
    display: flex;
    align-items: stretch;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', var(--font-sans);
    font-size: 13px;
    line-height: 1;
    direction: rtl;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.cms-admin-bar-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 14px;
    background: #101214;
    color: #f0f0f1;
}
.cms-admin-bar-mark {
    width: 20px; height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--gold-grad);
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.cms-admin-bar-mode {
    color: #a7aaad;
    white-space: nowrap;
    font-size: 13px;
}
.cms-admin-bar-mode strong {
    color: #f0f0f1;
    font-weight: 600;
    margin: 0 4px;
}

.cms-admin-bar-form { margin: 0; display: inline-flex; align-items: stretch; }

.cms-admin-bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 14px;
    border-radius: 0;
    background: transparent;
    color: #f0f0f1;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.cms-admin-bar-btn:hover {
    background: #2c3338;
    color: var(--color-gold-to);
}
.cms-admin-bar-btn-toggle {
    color: var(--color-gold-to);
    font-weight: 500;
}

.cms-admin-bar-link {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 14px;
    color: #f0f0f1;
    font-size: 13px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.cms-admin-bar-link:hover {
    background: #2c3338;
    color: var(--color-gold-to);
    opacity: 1;
}
.cms-admin-bar-link-edit {
    color: var(--color-gold-to);
    font-weight: 500;
}
.cms-admin-bar-link-logout {
    color: #f0f0f1;
    margin-right: auto; /* push logout to the far end (left in RTL) */
}
.cms-admin-bar-link-logout:hover { color: #ffd0d0; background: #2c3338; }

/* Push the page content down so the WP-style bar doesn't overlap the header */
body[data-cms-admin-session="1"] { padding-top: 36px; }
@media (max-width: 720px) {
    .cms-admin-bar { height: 46px; flex-wrap: wrap; }
    body[data-cms-admin-session="1"] { padding-top: 46px; }
}

/* CSS / JS modal — used in edit mode for per-page custom code */
.cms-code-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.cms-code-modal[hidden] { display: none; }
.cms-code-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
}
.cms-code-modal-card {
    position: relative;
    width: 100%;
    max-width: 800px;
    max-height: 80vh;
    background: var(--color-cream);
    border-radius: 18px;
    border: 1px solid rgba(23, 44, 30, 0.15);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cms-code-modal-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(23, 44, 30, 0.1);
}
.cms-code-modal-card h2 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 18px;
    color: var(--color-primary);
    margin: 0;
}
.cms-code-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(23, 44, 30, 0.08);
    color: var(--color-primary);
    font-size: 22px;
    line-height: 0;
    cursor: pointer;
    transition: background 0.18s ease;
}
.cms-code-close:hover { background: rgba(23, 44, 30, 0.16); }

.cms-code-tabs { display: flex; gap: 4px; padding: 12px 20px 0; }
.cms-code-tab {
    padding: 8px 18px;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: rgba(23, 44, 30, 0.6);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.cms-code-tab.is-active {
    background: var(--color-primary);
    color: var(--color-cream);
}
.cms-code-tab:not(.is-active):hover { background: rgba(23, 44, 30, 0.08); color: var(--color-primary); }

.cms-code-panel {
    flex: 1;
    overflow: auto;
    padding: 12px 20px;
}
.cms-code-panel textarea {
    width: 100%;
    min-height: 280px;
    padding: 12px 14px;
    border: 1px solid rgba(23, 44, 30, 0.2);
    border-radius: 8px;
    font-family: ui-monospace, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.6);
    resize: vertical;
}
.cms-code-help {
    padding: 0 20px;
    margin: 0 0 8px;
    font-size: 12px;
    color: rgba(23, 44, 30, 0.7);
    line-height: 1.5;
}
.cms-code-modal-card footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid rgba(23, 44, 30, 0.1);
    background: rgba(23, 44, 30, 0.03);
}
.cms-code-modal-card footer .cms-admin-bar-btn {
    background: rgba(23, 44, 30, 0.08);
    color: var(--color-primary);
    border: 1px solid rgba(23, 44, 30, 0.15);
}
.cms-code-modal-card footer .cms-admin-bar-btn:hover {
    background: var(--gold-grad-h);
    color: var(--color-primary);
    border-color: var(--color-gold-from);
}
.cms-code-modal-card footer .cms-admin-bar-btn-save {
    background: var(--gold-grad-h);
    color: var(--color-primary);
    border-color: var(--color-gold-from);
    font-weight: 600;
}
.cms-code-status {
    flex: 1;
    font-size: 12px;
    color: rgba(23, 44, 30, 0.7);
}

@media (max-width: 720px) {
    .cms-admin-bar-link, .cms-admin-bar-btn { font-size: 12px; }
}

/* Legacy alias kept for any old references */
.admin-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: #0c1c12;
    color: var(--color-cream);
    padding: 8px 16px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.admin-bar a, .admin-bar button {
    color: var(--color-cream);
    text-decoration: underline;
    font-size: 13px;
}

[data-cms-key], [data-cms-page-field], [data-cms-edit] {
    transition: outline 0.2s ease;
}
body[data-cms-admin="1"] [data-cms-key]:hover,
body[data-cms-admin="1"] [data-cms-page-field]:hover,
body[data-cms-admin="1"] [data-cms-edit]:hover {
    outline: 2px dashed var(--color-gold-from);
    outline-offset: 4px;
    cursor: text;
}

/* ---------- Errors ---------- */
.error-page {
    max-width: 600px;
    margin: 80px auto;
    padding: 0 var(--gutter);
    text-align: center;
}
.error-page h1 {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 80px;
    color: var(--color-primary);
}
.error-page p { font-size: 20px; color: var(--color-navy); }

/* ---------- Cookie consent banner + a11y widget ----------
   The mount divs (#cms-cookie-banner-mount, #cms-a11y-mount) live in the
   normal document flow; the actual UI inside them must float as overlays so
   they don't push body height and create dead space below the footer. */
.cms-ccb {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 950;
    background: var(--color-white);
    color: var(--color-text);
    border-top: 1px solid rgba(23, 44, 30, 0.15);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
    padding: 18px var(--gutter);
}
.cms-ccb-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}
.cms-ccb-text { flex: 1 1 360px; min-width: 0; }
.cms-ccb-title { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.cms-ccb-body  { font-size: 14px; line-height: 1.5; color: var(--color-muted); }
.cms-ccb-body p { margin: 0; }
.cms-ccb-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cms-ccb-btn {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 22px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--color-primary);
    background: transparent;
    color: var(--color-primary);
}
.cms-ccb-btn-primary   { background: var(--color-primary); color: var(--color-white); }
.cms-ccb-btn-secondary { background: transparent; }
.cms-ccb-btn-link {
    border: 0;
    background: transparent;
    color: var(--color-primary);
    text-decoration: underline;
    padding: 0 8px;
}
.cms-ccb-modal {
    position: fixed;
    inset: 0;
    z-index: 960;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cms-ccb-modal-card {
    background: var(--color-white);
    color: var(--color-text);
    border-radius: 14px;
    padding: 26px 28px;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
}
.cms-ccb-modal-title { font-size: 22px; font-weight: 600; margin: 0 0 10px; }
.cms-ccb-modal-body  { font-size: 14px; line-height: 1.5; color: var(--color-muted); margin-bottom: 16px; }
.cms-ccb-opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.cms-ccb-opt  { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.cms-ccb-opt.is-locked { opacity: 0.7; }

/* Floating "cookie settings" button — appears only after the visitor has
   made an initial consent decision, lets them re-open the settings modal
   any time. Stacked above the a11y button on the same edge. */
.cms-ccb-settings {
    position: fixed;
    bottom: 80px;
    inset-inline-start: 20px;
    z-index: 939;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-cream);
    color: var(--color-primary);
    border: 1.5px solid rgba(15, 45, 69, 0.15);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cms-ccb-settings:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28); }
.cms-ccb-settings:focus-visible { outline: 3px solid var(--color-gold-from); outline-offset: 2px; }

@media print { .cms-ccb-settings { display: none; } }

.cms-a11y-btn {
    position: fixed;
    bottom: 20px;
    inset-inline-start: 20px;   /* RTL-aware: left in RTL, right in LTR */
    z-index: 940;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 22px;
    border: 0;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cms-a11y-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.3); }
.cms-a11y-btn:focus-visible { outline: 3px solid var(--color-gold-from); outline-offset: 2px; }

/* ---------- Accessibility panel (built dynamically by a11y-widget.js) ---------- */
.cms-a11y-panel {
    position: fixed;
    bottom: 80px;
    inset-inline-start: 20px;
    z-index: 941;
    width: min(360px, calc(100vw - 40px));
    max-height: calc(100vh - 120px);
    background: var(--color-cream);
    color: var(--color-primary);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(15, 45, 69, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cms-a11y-pop 0.18s ease-out;
}
@keyframes cms-a11y-pop {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cms-a11y-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--color-primary);
    color: var(--color-white);
}
.cms-a11y-panel-title {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 18px;
    color: var(--color-white);
}
.cms-a11y-close {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--color-white);
    font-size: 22px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease;
}
.cms-a11y-close:hover { background: rgba(255, 255, 255, 0.15); }
.cms-a11y-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 14px;
    overflow-y: auto;
}
.cms-a11y-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 10px;
    min-height: 56px;
    border: 1.5px solid rgba(15, 45, 69, 0.18);
    border-radius: 12px;
    background: #fff;
    color: var(--color-primary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.cms-a11y-opt:hover { border-color: var(--color-gold-from); transform: translateY(-1px); }
.cms-a11y-opt.is-active {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}
.cms-a11y-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px 16px;
    border-top: 1px solid rgba(15, 45, 69, 0.08);
    background: rgba(15, 45, 69, 0.04);
}
.cms-a11y-reset {
    background: var(--gold-grad-h);
    color: var(--color-primary);
    border: 0;
    border-radius: 100px;
    padding: 10px 22px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.cms-a11y-reset:hover { transform: translateY(-1px); }
.cms-a11y-statement {
    color: var(--color-navy);
    font-size: 13px;
    text-decoration: underline;
}

/* ---------- Body-class effects (the actual accessibility behaviors) ----------
   Each body.a11y-* class implements one option. data-a11y-text-level scales
   text from -2 (smaller) to +3 (larger); 0 is the default. */

/* Setting `body { font-size }` does NOT propagate to the rest of the site —
   almost every component uses explicit `px` values so a base-size change goes
   unnoticed. Use the `zoom` property on the page-content roots instead, which
   scales fonts AND layout proportionally. The header / footer / a11y widget
   are intentionally excluded so the panel itself stays at its native size and
   the floating buttons don't jump around when the user toggles the level. */
body[data-a11y-text-level="-2"] :is(main, .header.main, .footer)        { zoom: 0.85; }
body[data-a11y-text-level="-1"] :is(main, .header.main, .footer)        { zoom: 0.92; }
body[data-a11y-text-level="0"]  :is(main, .header.main, .footer)        { zoom: 1; }
body[data-a11y-text-level="1"]  :is(main, .header.main, .footer)        { zoom: 1.1; }
body[data-a11y-text-level="2"]  :is(main, .header.main, .footer)        { zoom: 1.2; }
body[data-a11y-text-level="3"]  :is(main, .header.main, .footer)        { zoom: 1.35; }

/* Firefox <126 doesn't honor `zoom` — fall back to a font-size override on
   common text elements via a media query feature query so newer Firefox
   gets the more reliable `zoom` and older builds at least scale headlines. */
@supports not (zoom: 1.1) {
    body[data-a11y-text-level="1"] :is(p, h1, h2, h3, h4, h5, h6, span, li, button, a, label) { font-size: 1.12em !important; }
    body[data-a11y-text-level="2"] :is(p, h1, h2, h3, h4, h5, h6, span, li, button, a, label) { font-size: 1.25em !important; }
    body[data-a11y-text-level="3"] :is(p, h1, h2, h3, h4, h5, h6, span, li, button, a, label) { font-size: 1.4em !important; }
}

/* High-contrast: black/yellow palette overrides every brand color. !important
   here is intentional — accessibility overrides must beat brand styles. */
body.a11y-high-contrast {
    background: #000 !important;
    color: #ffeb3b !important;
}
body.a11y-high-contrast :is(p, h1, h2, h3, h4, h5, h6, span, li, dd, dt, label, input, textarea, button, .btn) {
    color: #ffeb3b !important;
}
body.a11y-high-contrast :is(a, .footer-stats .num, .banner-headline, .banner-kicker) {
    color: #ffeb3b !important;
    background: none !important;
    -webkit-text-fill-color: #ffeb3b !important;
}
body.a11y-high-contrast :is(.header.main, .footer, .project-gallery, section, header, footer) {
    background: #000 !important;
    color: #ffeb3b !important;
}
body.a11y-high-contrast img,
body.a11y-high-contrast video { filter: grayscale(100%) contrast(1.2); }

/* Negative contrast: invert the page content (images double-inverted so
   they read normally). Filter is scoped to header/main/footer/CTAs so the
   a11y panel itself stays interactable and visible. */
body.a11y-negative { background: #fff; }
body.a11y-negative > .header.main,
body.a11y-negative > main,
body.a11y-negative > .footer,
body.a11y-negative > footer.footer,
body.a11y-negative > .floating-ctas { filter: invert(1) hue-rotate(180deg); }
body.a11y-negative :is(.header.main, main, .footer, .floating-ctas) :is(img, video, iframe) {
    filter: invert(1) hue-rotate(180deg);
}

/* Readable font: switch all type to a high-legibility system stack. */
body.a11y-readable,
body.a11y-readable * {
    font-family: 'Arial Hebrew', Arial, 'Helvetica Neue', Helvetica, sans-serif !important;
    letter-spacing: 0.02em !important;
    line-height: 1.6 !important;
}

/* Highlight links: bold + underline + outlined chip on every <a>. */
body.a11y-highlight-links a {
    text-decoration: underline !important;
    font-weight: 700 !important;
    outline: 2px solid var(--color-gold-from);
    outline-offset: 2px;
    background: rgba(225, 195, 108, 0.12);
}

/* Grayscale: desaturate page content but leave the a11y panel/button alone
   so the user can keep operating the widget while it's enabled. */
body.a11y-grayscale > .header.main,
body.a11y-grayscale > main,
body.a11y-grayscale > .footer,
body.a11y-grayscale > footer.footer,
body.a11y-grayscale > .floating-ctas { filter: grayscale(100%); }

/* No animations: disable transitions, animations, and smooth scroll. */
body.a11y-no-animations,
body.a11y-no-animations *,
body.a11y-no-animations *::before,
body.a11y-no-animations *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}

@media (max-width: 480px) {
    .cms-a11y-panel { inset-inline-start: 10px; bottom: 76px; }
    .cms-a11y-grid  { grid-template-columns: 1fr; }
}

@media print {
    .header, .footer, .floating-ctas, .cookie-banner, .a11y-trigger, .admin-bar,
    .cms-ccb, .cms-a11y-btn { display: none; }
    body { background: white; color: black; }
}