/* ===================================================================
 * # BRANCHES / OFFICES MAP SECTION
 * ------------------------------------------------------------------- */
.s-Branchs {
    padding-bottom: var(--vspace-3);
}

/* 2-column grid of office map items */
.offices-map-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 40px;
    margin-top: 48px;
}

/* Each office item: map on top, info below */
.office-map-item {
    display: flex;
    flex-direction: column;
}

/* The embedded map box */
.office-map-frame {
    width: 100%;
    height: 260px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
    position: relative;
}

.office-map-frame iframe {
    width: 100%;
    height: 100%;
    display: block;
    filter: grayscale(20%);
    transition: filter 0.3s ease;
}

.office-map-item:hover .office-map-frame iframe {
    filter: grayscale(0%);
}

/* Info below the map */
.office-map-info {
    padding-top: 18px;
}

.office-map-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
    margin-top: 0;
    letter-spacing: -0.01em;
    border-bottom: 2px solid var(--color-1-500);
    padding-bottom: 10px;
}

.office-map-desc {
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--color-text-light);
    margin-bottom: 14px;
}

.office-map-meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.office-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.35rem;
    color: var(--color-text-light);
}

.office-meta-row a {
    color: var(--color-text-light);
    text-decoration: none;
}

.office-meta-row a:hover {
    color: var(--color-1-500);
}

.office-meta-icon {
    display: flex;
    align-items: center;
    color: var(--color-1-500);
    flex-shrink: 0;
}

.office-map-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-1-500) !important;
    text-decoration: none;
    transition: opacity 0.2s;
}

.office-map-link:hover {
    opacity: 0.75;
}

/* RTL support */
[dir="rtl"] .office-meta-row,
[dir="rtl"] .office-map-link {
    flex-direction: row-reverse;
}

/* Responsive */
@media screen and (max-width: 1000px) {
    .offices-map-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 28px;
    }
    .office-map-frame {
        height: 220px;
    }
}

@media screen and (max-width: 650px) {
    .offices-map-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .office-map-frame {
        height: 240px;
    }
}



/* ===================================================================
 * # COFFE GALLERY
 * ------------------------------------------------------------------- */
.s-coffe__header {
    margin-top: 100px;
}

.coffe-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 0 auto;
    max-width: auto;
    justify-items: center;
}

.coffe-hex {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 0.866;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    transition: all 0.4s var(--ease-smooth-in-out);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--color-bg-neutral);
}

.coffe-hex::before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: var(--color-bg);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 1;
    transition: all 0.4s var(--ease-smooth-in-out);
}

.coffe-hex::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(135deg,
            rgba(199, 62, 29, 0.1) 0%,
            rgba(199, 62, 29, 0.3) 50%,
            rgba(199, 62, 29, 0.1) 100%);
    opacity: 0;
    transition: all 0.4s var(--ease-smooth-in-out);
    z-index: 2;
}

.coffe-hex:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: var(--shadow-high);
    z-index: 10;
}

.coffe-hex:hover::before {
    background: transparent;
}

.coffe-hex:hover::after {
    opacity: 1;
}

.coffe-hex:hover img {
    transform: scale(1.15);
    filter: brightness(1.1) saturate(1.2);
}

.coffe-hex img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s var(--ease-smooth-in-out);
    filter: grayscale(0.2) brightness(0.9);
}

@media screen and (min-width: 1400px) {
    .coffe-gallery {
        grid-template-columns: repeat(13, 1fr);
        grid-template-rows: auto auto auto;
        max-width: 1400px;
        gap: 10px;
    }

    .coffe-hex:nth-child(1) {
        grid-column: 3 / span 2;
    }

    .coffe-hex:nth-child(2) {
        grid-column: 5 / span 2;
    }

    .coffe-hex:nth-child(3) {
        grid-column: 7 / span 2;
    }

    .coffe-hex:nth-child(4) {
        grid-column: 9 / span 2;
    }

    .coffe-hex:nth-child(5) {
        grid-column: 2 / span 2;
    }

    .coffe-hex:nth-child(6) {
        grid-column: 4 / span 2;
    }

    .coffe-hex:nth-child(7) {
        grid-column: 6 / span 2;
    }

    .coffe-hex:nth-child(8) {
        grid-column: 8 / span 2;
    }

    .coffe-hex:nth-child(9) {
        grid-column: 10 / span 2;
    }

    .coffe-hex:nth-child(10) {
        grid-column: 3 / span 2;
    }

    .coffe-hex:nth-child(11) {
        grid-column: 5 / span 2;
    }

    .coffe-hex:nth-child(12) {
        grid-column: 7 / span 2;
    }

    .coffe-hex:nth-child(13) {
        grid-column: 9 / span 2;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {
    .coffe-gallery {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1100px;
        gap: 20px;
    }

    .coffe-hex {
        max-width: 240px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .coffe-gallery {
        grid-template-columns: repeat(4, 1fr);
        max-width: 900px;
        gap: 15px;
    }

    .coffe-hex {
        max-width: 200px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .coffe-gallery {
        grid-template-columns: repeat(3, 1fr);
        max-width: 700px;
        gap: 15px;
    }

    .coffe-hex {
        max-width: 200px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .coffe-gallery {
        grid-template-columns: repeat(2, 1fr);
        max-width: 500px;
        gap: 20px;
    }

    .coffe-hex {
        max-width: 220px;
    }
}

@media screen and (max-width: 575px) {
    .coffe-gallery {
        grid-template-columns: repeat(2, 1fr);
        max-width: 400px;
        gap: 15px;
        padding: var(--vspace-2) 15px;
    }

    .coffe-hex {
        max-width: 160px;
    }
}

@media screen and (max-width: 400px) {
    .coffe-gallery {
        grid-template-columns: repeat(2, 1fr);
        max-width: 350px;
        gap: 12px;
    }

    .coffe-hex {
        max-width: 140px;
    }
}

@keyframes coffeHexagonReveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.coffe-hex {
    animation: coffeHexagonReveal 0.6s var(--ease-smooth-out) both;
}

.coffe-hex:nth-child(1) {
    animation-delay: 0.1s;
}

.coffe-hex:nth-child(2) {
    animation-delay: 0.2s;
}

.coffe-hex:nth-child(3) {
    animation-delay: 0.3s;
}

.coffe-hex:nth-child(4) {
    animation-delay: 0.4s;
}

.coffe-hex:nth-child(5) {
    animation-delay: 0.5s;
}

.coffe-hex:nth-child(6) {
    animation-delay: 0.6s;
}

.coffe-hex:nth-child(7) {
    animation-delay: 0.7s;
}

.coffe-hex:nth-child(8) {
    animation-delay: 0.8s;
}

.coffe-hex:nth-child(9) {
    animation-delay: 0.9s;
}

.coffe-hex:nth-child(10) {
    animation-delay: 1.0s;
}

.coffe-hex:nth-child(11) {
    animation-delay: 1.1s;
}

.coffe-hex:nth-child(12) {
    animation-delay: 1.2s;
}

.coffe-hex:nth-child(13) {
    animation-delay: 1.3s;
}

.language-dropdown-v3 {
    margin-top: 12px;
    position: relative;
    font-size: 12px;
    display: inline-block;
}

.lang-trigger:hover {
    background: var(--dropdown-hover);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.lang-current {
    font-weight: 500;
}

.lang-flag {
    width: 18px;
    height: 18px;
    object-fit: cover;
}

.lang-chevron {
    display: flex;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.language-dropdown-v3.active .lang-chevron {
    transform: rotate(180deg);
}

.lang-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--dropdown-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 6px;
    min-width: 140px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10105;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

[dir="rtl"] .lang-menu {
    right: auto;
    left: 0;
}

.language-dropdown-v3.active .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(8px);
}

.lang-option {
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.lang-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--dropdown-hover), transparent);
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-option:hover::before {
    left: 100%;
}

.lang-option:hover {
    background: var(--dropdown-hover);
    transform: translateX(2px);
}

[dir="rtl"] .lang-option:hover {
    transform: translateX(-2px);
}

.lang-text {
    font-family: var(--type-body);
    font-size: 14px;
    margin-inline-start: 5px;
    font-weight: 500;
    object-fit: cover;
    color: var(--color-text);
    transition: color 0.2s ease;
}

.lang-option:hover .lang-text {
    color: var(--color-white);
}

.lang-option.active .lang-text {
    color: var(--color-1-400);
    font-weight: 600;
}

@media screen and (min-width: 901px) {
    .header-language {
        margin-left: var(--vspace-0_75);
        display: flex;
        align-items: center;
    }

    [dir="rtl"] .header-language {
        margin-left: 0;
        margin-right: var(--vspace-0_75);
    }

    .header-nav__links {
        display: flex;
        align-items: center;
        gap: var(--vspace-0_5);
    }

    .header-nav__links .current a {
        color: var(--color-text-bold);
    }

    .lang-menu {
        right: 0;
        left: auto;
    }

    [dir="rtl"] .lang-menu {
        right: auto;
        left: 0;
    }

    .lang-trigger {
        padding: 6px 14px;
        font-size: 14px;
    }
}

@media screen and (max-width: 900px) {
    .header-nav {
        z-index: 10050 !important;
    }

    .header-nav__links {
        z-index: 10060 !important;
        position: relative;
    }

    .header-language {
        order: -1;
        margin-bottom: var(--vspace-1);
        padding: 12px 0;
        z-index: 10070 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        transform: translateY(-2rem);
        opacity: 0;
        visibility: hidden;
        position: relative;
    }

    .menu-is-open .header-language {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        transition: all 0.6s var(--ease-quick-out);
        transition-delay: 0.4s;
        z-index: 10070 !important;
    }

    .language-dropdown-v3 {
        width: 100%;
        z-index: 10080 !important;
        position: relative;
    }

    .lang-trigger {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
        font-size: 15px;
        z-index: 10090 !important;
        position: relative;
    }

    .lang-menu {
        width: 100%;
        right: 0;
        left: 0;
        min-width: auto;
        z-index: 10100 !important;
        margin-top: 8px;
    }

    .lang-option {
        padding: 10px 16px;
        z-index: 10110 !important;
    }

    .lang-text {
        font-size: 15px;
    }

    .header-contact {
        z-index: 1000 !important;
        position: relative;
    }

    .menu-is-open .header-nav__links .header-language {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@keyframes optionSelect {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

.lang-option.selecting {
    animation: optionSelect 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media screen and (max-width: 360px) {
    .lang-trigger {
        padding: 8px 12px;
        font-size: 13px;
    }

    .lang-menu {
        min-width: 120px;
    }

    .lang-option {
        padding: 8px 12px;
    }

    .lang-text {
        font-size: 13px;
    }
}

@media (prefers-contrast: high) {
    .lang-trigger {
        border: 2px solid currentColor;
    }

    .lang-menu {
        border: 2px solid currentColor;
    }

    .lang-option:hover {
        background: rgba(255, 255, 255, 0.2);
    }
}

@media (prefers-reduced-motion: reduce) {

    .lang-trigger,
    .lang-option,
    .lang-menu {
        transition: none;
    }

    .lang-option::before {
        display: none;
    }

    .lang-option.selecting {
        animation: none;
    }
}

.lang-trigger:focus {
    outline: 2px solid var(--color-1-400);
    outline-offset: 2px;
}

.lang-option:focus {
    outline: 2px solid var(--color-1-400);
    outline-offset: -2px;
}

/* ===================================================================
 * # Language dropdown li fix
 * ------------------------------------------------------------------- */
.lang-dropdown-li {
    list-style: none;
    display: inline-flex;
    align-items: center;
}

/* ===================================================================
 * # Branch map frame: image→map flip every 3s
 * ------------------------------------------------------------------- */
.office-map-frame {
    position: relative;
    overflow: hidden;
}

.map-frame-image,
.map-frame-embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.7s ease;
}

.map-frame-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Default: image visible, map hidden */
.map-frame-image { opacity: 1; z-index: 2; }
.map-frame-embed { opacity: 0; z-index: 1; }

/* When .show-map is toggled: map visible, image hidden */
.office-map-frame.show-map .map-frame-image { opacity: 0; }
.office-map-frame.show-map .map-frame-embed { opacity: 1; z-index: 2; }

/* ===================================================================
 * # WhatsApp icon in header btn – green tint on hover
 * ------------------------------------------------------------------- */
.header-contact__num:hover svg path {
    fill: #25D366;
}

/* ===================================================================
 * # Header contact: date + phone on same line
 * ------------------------------------------------------------------- */
.header-contact {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.header-contact__date {
    display: inline-flex;
    align-items: center;
    font-size: 1.3rem;
    color: var(--color-text);
    opacity: 0.75;
    letter-spacing: .04em;
    padding: 0 8px;
}

.header-contact__divider {
    color: var(--color-border, rgba(255,255,255,0.2));
    font-size: 1.4rem;
    margin: 0 4px;
    opacity: 0.5;
}

.header-contact__num {
    display: inline-flex;
    align-items: center;
    font-size: 1.3rem;
}


/* ===================================================================
 * # Header contact: date + time + phone + WhatsApp on same line
 * ------------------------------------------------------------------- */
.header-contact {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.header-contact__divider {
    color: var(--color-border, rgba(255,255,255,0.25));
    font-size: 1.4rem;
    opacity: 0.45;
    margin: 0 2px;
}
.header-contact__num {
    display: inline-flex;
    align-items: center;
    font-size: 1.25rem;
    padding: 6px 10px;
}
.header-contact__wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(37,211,102,0.12);
    color: #25D366;
    transition: background 0.2s ease, transform 0.2s ease;
    margin-left: 2px;
    flex-shrink: 0;
}
.header-contact__wa:hover {
    background: #25D366;
    color: #fff;
    transform: scale(1.1);
}
@media screen and (max-width: 800px) {
    
    .header-contact__divider  { display: none; }
}

/* Branch card: phone + WhatsApp on same line */
.office-meta-row--phone { display: flex; align-items: center; gap: 8px; }
.office-phone-num { flex: none; color: inherit; text-decoration: none; }
.office-phone-num:hover { text-decoration: underline; }
.office-wa-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(37,211,102,0.13); color: #25D366; flex-shrink: 0; transition: background 0.2s, transform 0.2s; }
.office-wa-btn:hover { background: #25D366; color: #fff; transform: scale(1.12); }

/* Branch card: hours + phone + WA all on one line */
.office-meta-row--inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
}
.office-hours-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.office-phone-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.office-hours {
    white-space: nowrap;
}
.office-meta-sep {
    display: none;
}
.office-phone-num {
    flex: none;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}
.office-phone-num:hover { text-decoration: underline; }

/* Clickable overlay on map/image frame */
.office-map-frame { cursor: pointer; display: block; text-decoration: none; }
.office-map-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(0,0,0,0);
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.office-map-overlay svg { opacity: 0; transform: scale(0.7); transition: opacity 0.2s, transform 0.2s; }
.office-map-frame:hover .office-map-overlay { background: rgba(0,0,0,0.35); }
.office-map-frame:hover .office-map-overlay svg { opacity: 1; transform: scale(1); }
.office-map-frame iframe { pointer-events: none; }

/* ── Closed branch styling ─────────────────────────────────────────── */
.branch--closed .office-map-frame { filter: grayscale(60%); }
.branch--closed .office-map-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 5;
    pointer-events: none;
}

.branch-closed-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(220,38,38,0.1);
    border: 1px solid rgba(220,38,38,0.25);
    color: #dc2626;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
}

/* ══════════════════════════════════════════════════════════════
   Hero animated background (shown when no banner image is set)
   ══════════════════════════════════════════════════════════════ */
.intro-hero-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1200/1650;
    border-radius: 24px;
    overflow: hidden;
    background: radial-gradient(ellipse at 60% 40%, #1a0a00 0%, #0d0000 60%, #000 100%);
}

/* Rotating rings */
.hero-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(200, 30, 10, 0.18);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: heroRingSpin linear infinite;
}
.hero-ring--1 { width: 55%;  height: 55%;  animation-duration: 18s; border-color: rgba(200,30,10,0.22); }
.hero-ring--2 { width: 78%;  height: 78%;  animation-duration: 28s; animation-direction: reverse; border-color: rgba(200,30,10,0.13); }
.hero-ring--3 { width: 100%; height: 100%; animation-duration: 40s; border-color: rgba(200,30,10,0.07); }

@keyframes heroRingSpin {
    from { transform: translate(-50%,-50%) rotate(0deg); }
    to   { transform: translate(-50%,-50%) rotate(360deg); }
}

/* Floating orbs */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    animation: heroOrbPulse ease-in-out infinite alternate;
}
.hero-orb--1 { width: 45%; height: 45%; top: 10%;  left: 15%;  background: radial-gradient(circle, rgba(180,20,5,0.55), transparent 70%); animation-duration: 6s; }
.hero-orb--2 { width: 35%; height: 35%; top: 50%;  right: 10%; background: radial-gradient(circle, rgba(160,10,0,0.40), transparent 70%); animation-duration: 8s; animation-delay: 1s; }
.hero-orb--3 { width: 28%; height: 28%; bottom: 15%; left: 25%; background: radial-gradient(circle, rgba(200,60,0,0.35), transparent 70%); animation-duration: 10s; animation-delay: 2s; }
.hero-orb--4 { width: 20%; height: 20%; top: 30%;   left: 50%; background: radial-gradient(circle, rgba(255,120,0,0.20), transparent 70%); animation-duration: 7s; animation-delay: 0.5s; }
.hero-orb--5 { width: 50%; height: 50%; bottom: -10%; right: -10%; background: radial-gradient(circle, rgba(100,5,0,0.30), transparent 70%); animation-duration: 12s; animation-delay: 3s; }

@keyframes heroOrbPulse {
    from { opacity: 0.6; transform: scale(1); }
    to   { opacity: 1;   transform: scale(1.15); }
}

/* Floating particles */
.hero-particles { position: absolute; inset: 0; pointer-events: none; }
.hp {
    position: absolute;
    left: var(--x);
    bottom: -10px;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: rgba(220, 60, 10, var(--o));
    animation: heroParticleRise var(--d) linear var(--del) infinite;
}
@keyframes heroParticleRise {
    0%   { transform: translateY(0)   scale(1);    opacity: var(--o); }
    80%  { opacity: var(--o); }
    100% { transform: translateY(-110%) scale(0.3); opacity: 0; }
}

/* Center logo */
.hero-logo-glow {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-logo-float {
    width: 38%;
    filter: drop-shadow(0 0 30px rgba(200,30,5,0.7)) drop-shadow(0 0 80px rgba(200,30,5,0.35));
    animation: heroLogoFloat 5s ease-in-out infinite alternate;
}
@keyframes heroLogoFloat {
    from { transform: translateY(-6px) scale(1); }
    to   { transform: translateY( 6px) scale(1.04); }
}

/* ══════════════════════════════════════════════════════════════
   FULL-SECTION HERO BACKGROUND
   ══════════════════════════════════════════════════════════════ */

/* Layer 1 – base gradient behind everything */
.s-intro::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 60% at 55% 40%, rgba(120,8,0,0.28) 0%, transparent 70%),
        radial-gradient(ellipse 50% 80% at 80% 80%, rgba(80,4,0,0.18) 0%, transparent 65%),
        radial-gradient(ellipse 60% 40% at 20% 20%, rgba(60,2,0,0.15) 0%, transparent 60%);
    pointer-events: none;
}

/* Layer 2 – animated SVG grain/texture overlay */
.s-intro::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    animation: heroBgShift 12s linear infinite alternate;
    pointer-events: none;
}
@keyframes heroBgShift {
    from { background-position: 0 0; }
    to   { background-position: 80px 80px; }
}

/* Floating geometric shapes in background */
.s-intro .s-intro__content { position: relative; z-index: 2; }

/* Inject decorative shapes via a wrapper we add to HTML */
.hero-bg-shapes { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-bg-shapes span {
    position: absolute;
    border-radius: 50%;
    background: rgba(180, 15, 5, 0.06);
    animation: heroShapeFloat ease-in-out infinite alternate;
}
.hero-bg-shapes span:nth-child(1) { width: 600px; height: 600px; top: -200px; right: -150px; animation-duration: 14s; }
.hero-bg-shapes span:nth-child(2) { width: 400px; height: 400px; bottom: -100px; left: -100px; animation-duration: 18s; animation-delay: 2s; background: rgba(180,15,5,0.05); }
.hero-bg-shapes span:nth-child(3) { width: 250px; height: 250px; top: 30%; left: 40%; animation-duration: 10s; animation-delay: 1s; background: rgba(255,60,0,0.04); }
.hero-bg-shapes span:nth-child(4) { width: 150px; height: 150px; bottom: 20%; right: 30%; animation-duration: 8s;  animation-delay: 3s; background: rgba(200,30,0,0.07); }
@keyframes heroShapeFloat {
    from { transform: translateY(0px)  scale(1); }
    to   { transform: translateY(30px) scale(1.05); }
}

/* ══════════════════════════════════════════════════════════════
   KURDISH / ARABIC FONTS FOR ALL HEADINGS
   ══════════════════════════════════════════════════════════════ */

/* Apply Noto Kufi Arabic to all main headings */
.intro-header__big-type,
.intro-header__overline,
.text-display-title,
.office-map-name,
.office-map-desc,
.s-about h2,
.s-about h3,
.s-about h4,
.s-branches h2,
.s-branches h3,
.section-header h2,
.section-header h3,
h1, h2, h3, h4 {
    font-family: 'Noto Kufi Arabic', 'Cairo', sans-serif !important;
}

/* Overline subtitle */
.intro-header__overline {
    font-family: 'Cairo', 'Noto Kufi Arabic', sans-serif !important;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* Hero title — heavier weight for impact */
.intro-header__big-type {
    font-family: 'Noto Kufi Arabic', sans-serif !important;
    font-weight: 900;
    letter-spacing: -0.01em;
}

/* Section display titles */
.text-display-title {
    font-family: 'Noto Kufi Arabic', sans-serif !important;
    font-weight: 800;
}

/* Branch card names */
.office-map-name {
    font-family: 'Cairo', 'Noto Kufi Arabic', sans-serif !important;
    font-weight: 700;
}

/* Nav links */
.s-header__nav a,
.header-nav a {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 600;
}

/* About section headings */
.s-about__intro h2,
.s-about__intro h3 {
    font-family: 'Noto Kufi Arabic', sans-serif !important;
    font-weight: 800;
}

/* Testimonials */
blockquote,
.s-testimonials h3,
.s-testimonials p {
    font-family: 'Cairo', sans-serif !important;
}

/* ══════════════════════════════════════════════════════════════
   HERO LAYOUT FIX + FONT SIZE TUNING
   ══════════════════════════════════════════════════════════════ */

/* Big title — scale down so it doesn't overflow onto image */
.intro-header__big-type {
    font-size: clamp(5rem, 8vw + 2rem, 12rem) !important;
    line-height: 1.05 !important;
    z-index: 3 !important;
    position: relative;
}

/* Overline subtitle */
.intro-header__overline {
    font-size: clamp(1.1rem, 1.5vw, 1.6rem) !important;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

/* Keep center image BELOW the header text */
.intro-pic-primary {
    z-index: 1 !important;
}

/* Make image slightly smaller + add a dark edge fade so text isn't hidden */
.intro-pic-primary img,
.intro-hero-canvas {
    border-radius: 20px;
    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
                linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
                        linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* Section-title display text (e.g. "چیرۆکی ئێمە") */
.text-display-title {
    font-size: clamp(2.8rem, 4vw, 5.5rem) !important;
    line-height: 1.1 !important;
}

/* Branch card name */
.office-map-name {
    font-size: 1rem !important;
    line-height: 1.3 !important;
}

/* Quote text */
.intro-block-content__text {
    font-family: 'Cairo', 'Noto Kufi Arabic', sans-serif !important;
    font-size: clamp(0.85rem, 1.2vw, 1.05rem) !important;
    line-height: 1.8 !important;
    font-style: normal !important;
}

/* Product list items */
.intro-block-content__social a {
    font-family: 'Cairo', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════
   HERO CANVAS v2 — complete redesign
   ══════════════════════════════════════════════════════════════ */

/* Remove old canvas styles, replace completely */
.intro-hero-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1200/1650;
    border-radius: 28px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 55% at 50% 45%, #2a0500 0%, #150100 50%, #050000 100%);
    box-shadow: 0 0 80px rgba(180,10,0,0.25), inset 0 0 120px rgba(0,0,0,0.6);
}

/* ── Bokeh circles ── */
.hv-bokeh { position: absolute; inset: 0; }
.hv-b {
    position: absolute;
    border-radius: 50%;
    filter: blur(55px);
    animation: hvBokehPulse ease-in-out infinite alternate;
}
.hv-b1 { width: 65%; height: 65%; top: -15%; left: -15%; background: radial-gradient(circle, rgba(200,15,0,0.45) 0%, transparent 70%); animation-duration: 7s; }
.hv-b2 { width: 50%; height: 50%; bottom: -10%; right: -10%; background: radial-gradient(circle, rgba(160,8,0,0.35) 0%, transparent 70%); animation-duration: 9s; animation-delay: 1s; }
.hv-b3 { width: 40%; height: 40%; top: 30%; right: 0%;   background: radial-gradient(circle, rgba(255,50,0,0.20) 0%, transparent 70%); animation-duration: 11s; animation-delay: 2s; }
.hv-b4 { width: 30%; height: 30%; bottom: 20%; left: 10%; background: radial-gradient(circle, rgba(220,30,0,0.25) 0%, transparent 70%); animation-duration: 8s;  animation-delay: 0.5s; }
.hv-b5 { width: 80%; height: 35%; top: 50%; left: 10%;   background: radial-gradient(circle, rgba(100,5,0,0.20) 0%, transparent 70%); animation-duration: 13s; animation-delay: 3s; filter: blur(80px); }
@keyframes hvBokehPulse {
    from { opacity: 0.5; transform: scale(0.92); }
    to   { opacity: 1;   transform: scale(1.08); }
}

/* ── Diamond frame ── */
.hv-frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hv-diamond {
    position: absolute;
    border: 1px solid rgba(200,20,5,0.22);
    transform: rotate(45deg);
    animation: hvDiamondSpin linear infinite;
}
.hv-diamond--outer { width: 75%; padding-bottom: 75%; animation-duration: 32s; border-color: rgba(200,20,5,0.15); }
.hv-diamond--mid   { width: 55%; padding-bottom: 55%; animation-duration: 20s; animation-direction: reverse; border-color: rgba(200,20,5,0.22); }
.hv-diamond--inner { width: 38%; padding-bottom: 38%; animation-duration: 14s; border-color: rgba(255,50,10,0.30); }
@keyframes hvDiamondSpin {
    from { transform: rotate(45deg); }
    to   { transform: rotate(405deg); }
}

/* ── Arc rings ── */
.hv-arcs { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hv-arc {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color: rgba(220,30,5,0.5);
    border-right-color: rgba(220,30,5,0.15);
    animation: hvArcSpin linear infinite;
}
.hv-arc1 { width: 62%; padding-bottom: 62%; animation-duration: 8s; }
.hv-arc2 { width: 47%; padding-bottom: 47%; animation-duration: 5s; animation-direction: reverse; border-top-color: rgba(255,80,10,0.4); }
.hv-arc3 { width: 30%; padding-bottom: 30%; animation-duration: 3s; border-top-color: rgba(255,100,20,0.6); }
@keyframes hvArcSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Center logo ── */
.hv-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hv-glow-ring {
    position: absolute;
    border-radius: 50%;
    animation: hvGlowPulse ease-in-out 3s infinite alternate;
}
.hv-glow-ring--1 {
    width: 36%;
    height: 36%;
    background: radial-gradient(circle, rgba(220,20,0,0.45) 0%, transparent 70%);
    filter: blur(20px);
}
.hv-glow-ring--2 {
    width: 22%;
    height: 22%;
    background: radial-gradient(circle, rgba(255,80,20,0.55) 0%, transparent 70%);
    filter: blur(10px);
    animation-delay: 1.5s;
}
@keyframes hvGlowPulse {
    from { transform: scale(0.9); opacity: 0.6; }
    to   { transform: scale(1.2); opacity: 1; }
}
.hv-logo {
    width: 36%;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 25px rgba(200,15,0,0.8)) drop-shadow(0 0 60px rgba(200,15,0,0.4));
    animation: hvLogoFloat 4s ease-in-out infinite alternate;
}
@keyframes hvLogoFloat {
    from { transform: translateY(-8px) scale(1); }
    to   { transform: translateY( 8px) scale(1.05); }
}

/* ── Floating nut glyphs ── */
.hv-nuts { position: absolute; inset: 0; pointer-events: none; }
.hv-nut {
    position: absolute;
    color: rgba(220,50,10, var(--op, 0.25));
    animation: hvNutFloat var(--dur,8s) ease-in-out var(--del,0s) infinite alternate;
    filter: blur(0.5px);
    user-select: none;
}
@keyframes hvNutFloat {
    from { transform: translateY(-6px) rotate(-8deg); opacity: var(--op, 0.2); }
    to   { transform: translateY( 6px) rotate( 8deg); opacity: calc(var(--op, 0.2) * 2); }
}

/* ── Scanline overlay ── */
.hv-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(0,0,0,0.08) 3px,
        rgba(0,0,0,0.08) 4px
    );
    pointer-events: none;
    opacity: 0.4;
}

/* ══════════════════════════════════════════════════════════════
   RIGHT COLUMN (quote + products) — bigger, bolder
   ══════════════════════════════════════════════════════════════ */
.intro-block-content {
    padding-top: 2rem !important;
    padding-bottom: 3rem !important;
}

.intro-block-content__text-wrap {
    width: 100%;
}

/* Quote text — bigger, styled */
.intro-block-content__text {
    font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
    line-height: 2 !important;
    color: rgba(255,255,255,0.75) !important;
    font-family: 'Cairo', 'Noto Kufi Arabic', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    border-top: 1px solid rgba(200,20,0,0.3) !important;
    padding-top: 1.2rem !important;
    letter-spacing: 0.01em;
}

/* Product list — bigger pill tags */
.intro-block-content__social {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
    margin-top: 1.2rem !important;
    margin-left: 0 !important;
    list-style: none !important;
}
.intro-block-content__social li {
    margin: 0 !important;
    padding: 0 !important;
}
.intro-block-content__social a {
    display: inline-block !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    color: rgba(255,255,255,0.85) !important;
    background: rgba(200,15,0,0.18) !important;
    border: 1px solid rgba(200,15,0,0.35) !important;
    border-radius: 100px !important;
    padding: 0.45rem 1.1rem !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
}
.intro-block-content__social a:hover {
    background: rgba(200,15,0,0.5) !important;
    color: #fff !important;
    border-color: rgba(255,50,10,0.7) !important;
    transform: translateY(-2px) !important;
}

/* Small pic above quote — add a decorative border frame */
.intro-block-content__pic {
    width: 100% !important;
    margin-bottom: 1.5rem !important;
}
.intro-block-content__pic img {
    width: 100% !important;
    border-radius: 16px !important;
    border: 1px solid rgba(200,20,0,0.3) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5) !important;
}

/* ══════════════════════════════════════════════════════════════
   HERO CANVAS v3 — nut store warm & earthy
   ══════════════════════════════════════════════════════════════ */

/* Remove all old hv- styles and start fresh */
.hv-bokeh, .hv-frame, .hv-diamond, .hv-arcs, .hv-arc,
.hv-center, .hv-glow-ring, .hv-logo, .hv-scanlines { display: none !important; }

.intro-hero-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1200/1650;
    border-radius: 28px;
    overflow: hidden;
    /* Deep warm brown-black with amber center */
    background:
        radial-gradient(ellipse 65% 50% at 52% 48%, #2b1400 0%, #150800 45%, #0a0300 100%);
    box-shadow: inset 0 0 100px rgba(0,0,0,0.7);
}

/* ── Warm background blobs ── */
.hv-bg { position: absolute; inset: 0; }
.hv-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    animation: hvBlobDrift ease-in-out infinite alternate;
}
/* Warm amber top-center */
.hv-blob1 {
    width: 70%; height: 55%;
    top: -10%; left: 15%;
    background: radial-gradient(circle, rgba(180,90,10,0.38) 0%, transparent 70%);
    animation-duration: 9s;
}
/* Deep red bottom-left */
.hv-blob2 {
    width: 55%; height: 55%;
    bottom: -15%; left: -10%;
    background: radial-gradient(circle, rgba(160,30,0,0.30) 0%, transparent 70%);
    animation-duration: 11s; animation-delay: 1s;
}
/* Golden right side */
.hv-blob3 {
    width: 45%; height: 45%;
    top: 20%; right: -5%;
    background: radial-gradient(circle, rgba(200,110,10,0.22) 0%, transparent 70%);
    animation-duration: 8s; animation-delay: 2s;
}
/* Dark shadow mid */
.hv-blob4 {
    width: 80%; height: 35%;
    bottom: 30%; left: 10%;
    background: radial-gradient(circle, rgba(80,20,0,0.25) 0%, transparent 70%);
    animation-duration: 14s; animation-delay: 0s; filter: blur(90px);
}
@keyframes hvBlobDrift {
    from { transform: scale(0.90) translateY(-10px); opacity: 0.7; }
    to   { transform: scale(1.10) translateY( 10px); opacity: 1;   }
}

/* ── CSS-drawn nut shapes ── */
.hv-nuts-field { position: absolute; inset: 0; pointer-events: none; }
.hv-nut {
    position: absolute;
    border-radius: 50%;
    animation: hvNutBob ease-in-out infinite alternate;
    animation-duration: var(--dur, 8s);
    animation-delay: var(--del, 0s);
    opacity: 0;
    animation-fill-mode: both;
}
@keyframes hvNutBob {
    0%   { opacity: 0.12; transform: translateY(-5px) rotate(calc(var(--r,0deg) - 4deg)); }
    100% { opacity: 0.32; transform: translateY( 5px) rotate(calc(var(--r,0deg) + 4deg)); }
}

/* Almond — elongated oval, warm tan */
.hv-nut--almond {
    border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
    background: radial-gradient(ellipse at 35% 35%, #c8904a 0%, #7a4a18 60%, #4a2808 100%);
    box-shadow: inset -3px -3px 8px rgba(0,0,0,0.4), inset 2px 2px 6px rgba(255,200,100,0.2),
                0 4px 20px rgba(0,0,0,0.5);
    aspect-ratio: 0.55 / 1;
    height: auto;
}

/* Walnut — round, bumpy feel with dark grooves */
.hv-nut--walnut {
    border-radius: 46% 54% 44% 56% / 52% 48% 52% 48%;
    background: radial-gradient(ellipse at 38% 32%, #8a5a28 0%, #5c3510 55%, #2e1a06 100%);
    box-shadow: inset -4px -4px 10px rgba(0,0,0,0.5), inset 3px 3px 8px rgba(180,120,50,0.15),
                0 4px 22px rgba(0,0,0,0.5);
}

/* Cashew — kidney bean shape */
.hv-nut--cashew {
    border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
    background: radial-gradient(ellipse at 35% 30%, #d4a055 0%, #9a6520 60%, #5c3a0a 100%);
    box-shadow: inset -3px -3px 9px rgba(0,0,0,0.4), inset 2px 2px 6px rgba(255,210,120,0.18),
                0 4px 20px rgba(0,0,0,0.5);
    aspect-ratio: 1.2 / 1;
    height: auto;
}

/* Pistachio — small, slightly flat, bright green-brown */
.hv-nut--pistachio {
    border-radius: 52% 48% 55% 45% / 48% 52% 48% 52%;
    background: radial-gradient(ellipse at 38% 30%, #7a9a3a 0%, #4a6a1a 50%, #2a4008 100%);
    box-shadow: inset -2px -2px 7px rgba(0,0,0,0.45), inset 1px 2px 5px rgba(160,220,80,0.15),
                0 4px 18px rgba(0,0,0,0.5);
}

/* ── Warm center ambient glow ── */
.hv-center-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 55%;
    height: 40%;
    background: radial-gradient(ellipse, rgba(200,110,20,0.22) 0%, transparent 70%);
    filter: blur(30px);
    animation: hvCenterPulse 5s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes hvCenterPulse {
    from { opacity: 0.5; transform: translate(-50%,-50%) scale(0.85); }
    to   { opacity: 1;   transform: translate(-50%,-50%) scale(1.15); }
}

/* ── Faint radial rays ── */
.hv-rays {
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(180,90,10,0.04) 10deg,
        transparent 20deg,
        transparent 30deg,
        rgba(180,90,10,0.03) 40deg,
        transparent 50deg,
        transparent 60deg,
        rgba(180,90,10,0.04) 70deg,
        transparent 80deg,
        transparent 180deg,
        rgba(180,90,10,0.03) 190deg,
        transparent 200deg,
        transparent 250deg,
        rgba(180,90,10,0.04) 260deg,
        transparent 270deg,
        transparent 340deg,
        rgba(180,90,10,0.03) 350deg,
        transparent 360deg
    );
    animation: hvRaysSpin 40s linear infinite;
    pointer-events: none;
}
@keyframes hvRaysSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════
   INTRO LAYOUT — no center image, right column expanded
   ══════════════════════════════════════════════════════════════ */

/* Hide the now-removed primary figure space */
.intro-pic-primary { display: none !important; }

/* Right column (quote+tags) takes up more of the grid */
.intro-block-content {
    grid-column: 1 / span 5 !important;  /* left side, wider */
    grid-row: 1 / 3 !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding-top: max(14rem, 26vh) !important;
    padding-bottom: 4rem !important;
    padding-left: 2rem;
    padding-right: 1rem;
}

/* Quote text — bigger, warmer */
.intro-block-content__text {
    font-size: 1.2rem !important;       /* default; overridden inline by admin */
    line-height: 2 !important;
    color: rgba(255,255,255,0.80) !important;
    font-family: 'Cairo', 'Noto Kufi Arabic', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    border-top: 1px solid rgba(200,100,20,0.35) !important;
    padding-top: 1.4rem !important;
    margin-bottom: 1.5rem !important;
    letter-spacing: 0.02em;
    max-width: 38ch;
}

/* Product pill tags */
.intro-block-content__social {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.65rem !important;
    margin: 0 !important;
    list-style: none !important;
}
.intro-block-content__social li { margin: 0 !important; padding: 0 !important; }
.intro-block-content__social a {
    display: inline-block !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    color: rgba(255,220,160,0.9) !important;
    background: rgba(160,70,10,0.22) !important;
    border: 1px solid rgba(200,110,20,0.40) !important;
    border-radius: 100px !important;
    padding: 0.5rem 1.3rem !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
}
.intro-block-content__social a:hover {
    background: rgba(200,90,10,0.55) !important;
    color: #fff !important;
    border-color: rgba(255,150,30,0.75) !important;
    transform: translateY(-2px) !important;
}

/* Hero header — push right, bigger area */
.intro-header {
    grid-column: 6 / span 7 !important;
    grid-row: 1 !important;
    text-align: right;
}

/* Scroll indicator */
.intro-scroll {
    grid-column: 6 / span 7 !important;
}

/* ══════════════════════════════════════════════════════════════
   GALLERY — inline auto-playing video embed
   ══════════════════════════════════════════════════════════════ */
.gallery-video-embed {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    display: block;
}

/* Make iframe fill the entire grid cell */
.gallery-video-embed iframe,
.gallery-video-embed video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180%;   /* oversized so the video fills without black bars */
    height: 180%;
    transform: translate(-50%, -50%);
    pointer-events: none;  /* clicks go to overlay */
    border: none;
}

/* Transparent overlay — click = open fullscreen */
.gallery-video-embed__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.gallery-video-embed:hover .gallery-video-embed__overlay {
    opacity: 1;
}

/* Expand icon in the corner */
.gallery-video-embed__expand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.55);
    border-radius: 8px;
    backdrop-filter: blur(4px);
}
.gallery-video-embed__expand svg {
    width: 18px;
    height: 18px;
}

/* Make sure the parent grid cell has height so iframe fills it */
.gallery-item.center-large .gallery-video-embed,
.gallery-item .gallery-video-embed {
    position: absolute;
    inset: 0;
}
.gallery-item {
    position: relative;
}

/* ══════════════════════════════════════════════════════════════
   HERO v2 — clean, centered, mobile-first
   ══════════════════════════════════════════════════════════════ */
.s-intro-v2 {
    position: relative;
    min-height: 100svh;        /* safe area aware */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6rem 1.5rem 4rem;
    text-align: center;
}

/* ── warm ambient blobs ── */
.hv2-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hv2-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: hv2BlobDrift ease-in-out infinite alternate;
}
.hv2-blob1 {
    width: min(600px,70vw); height: min(600px,70vw);
    top: -15%; left: -10%;
    background: radial-gradient(circle, rgba(200,70,10,0.18) 0%, transparent 70%);
    animation-duration: 10s;
}
.hv2-blob2 {
    width: min(500px,60vw); height: min(500px,60vw);
    bottom: -10%; right: -10%;
    background: radial-gradient(circle, rgba(180,50,0,0.14) 0%, transparent 70%);
    animation-duration: 13s; animation-delay: 1.5s;
}
.hv2-blob3 {
    width: min(350px,45vw); height: min(350px,45vw);
    top: 40%; left: 55%;
    background: radial-gradient(circle, rgba(220,120,10,0.10) 0%, transparent 70%);
    animation-duration: 9s; animation-delay: 3s;
}
@keyframes hv2BlobDrift {
    from { transform: scale(0.88) translate(0, 0); }
    to   { transform: scale(1.12) translate(15px, 20px); }
}

/* ── inner content ── */
.hv2-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
}

/* Welcome tag */
.hv2-tag {
    font-family: 'Cairo', 'Noto Kufi Arabic', sans-serif;
    font-size: clamp(0.8rem, 2.5vw, 1rem);
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--color-accent-yellow, #c8a96e);
    opacity: 0.85;
    text-transform: uppercase;
}

/* Main brand title */
.hv2-title {
    font-family: 'Noto Kufi Arabic', sans-serif !important;
    font-weight: 900 !important;
    font-size: clamp(3.2rem, 10vw, 8rem) !important;
    line-height: 1.05 !important;
    color: #c8180a !important;
    margin: 0 !important;
    text-shadow: 0 2px 40px rgba(200,24,10,0.15);
    letter-spacing: -0.01em;
}

/* Divider */
.hv2-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(200,24,10,0.5), transparent);
    border-radius: 2px;
    margin: 0.2rem 0;
}

/* Quote */
.hv2-quote {
    font-family: 'Cairo', 'Noto Kufi Arabic', sans-serif;
    font-size: clamp(0.95rem, 2.8vw, 1.15rem) !important;
    line-height: 1.9;
    color: var(--color-text, rgba(0,0,0,0.65));
    max-width: 52ch;
    margin: 0;
}

/* Product chips */
.hv2-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
}
.hv2-tag-item {
    font-family: 'Cairo', sans-serif;
    font-size: clamp(0.78rem, 2vw, 0.9rem);
    font-weight: 700;
    color: rgba(180,40,10,0.85);
    background: rgba(200,40,10,0.08);
    border: 1px solid rgba(200,40,10,0.2);
    border-radius: 100px;
    padding: 0.35rem 1rem;
    letter-spacing: 0.02em;
}

/* CTA buttons */
.hv2-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 0.5rem;
}
.hv2-btn {
    font-family: 'Cairo', sans-serif;
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 100px;
    padding: 0.75rem 2rem;
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.hv2-btn--primary {
    background: #c8180a;
    color: #fff;
    box-shadow: 0 4px 20px rgba(200,24,10,0.3);
}
.hv2-btn--primary:hover {
    background: #a81208;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(200,24,10,0.4);
    color: #fff;
}
.hv2-btn--outline {
    background: transparent;
    color: #c8180a;
    border: 2px solid rgba(200,24,10,0.35);
}
.hv2-btn--outline:hover {
    background: rgba(200,24,10,0.07);
    border-color: #c8180a;
    transform: translateY(-2px);
    color: #c8180a;
}

/* Scroll indicator */
.hv2-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 1.5rem;
    color: rgba(0,0,0,0.3);
    text-decoration: none;
    transition: color 0.2s;
}
.hv2-scroll:hover { color: rgba(200,24,10,0.5); }
.hv2-scroll__line {
    display: block;
    width: 1px;
    height: 32px;
    background: currentColor;
    animation: hv2ScrollBob 1.5s ease-in-out infinite;
}
.hv2-scroll svg { width: 16px; height: 24px; }
@keyframes hv2ScrollBob {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}

/* ── MOBILE overrides ── */
@media (max-width: 600px) {
    .s-intro-v2 { padding: 7rem 1.2rem 3.5rem; }
    .hv2-ctas   { gap: 0.65rem; }
    .hv2-btn    { padding: 0.7rem 1.5rem; width: 100%; max-width: 280px; justify-content: center; display: flex; }
    .hv2-scroll { margin-top: 1rem; }
}

/* Dark mode */
.dark-mode .hv2-quote { color: rgba(255,255,255,0.65); }
.dark-mode .hv2-title { text-shadow: 0 2px 60px rgba(200,24,10,0.3); }

/* ══════════════════════════════════════════════════════════════
   HERO SECTION — video bg, dark overlay, full-viewport
   ══════════════════════════════════════════════════════════════ */

/* Reset any old hero styles */
.s-intro-v2, .hv2-inner, .hv2-blob, .hv2-bg { display: none !important; }

/* ── Base layout ── */
.hero-section {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    color: #fff;
}

/* ── Background layer ── */
.hero-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Shared fill style for video/iframe/image */
.hero-bg-video,
.hero-bg-iframe {
    position: absolute;
    top: 50%; left: 50%;
    width: 177.78vh;  /* 16:9 at full height */
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    pointer-events: none;
    border: none;
}
.hero-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.hero-bg-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 120% 80% at 20% 40%, rgba(180,30,10,0.55) 0%, transparent 60%),
        radial-gradient(ellipse 100% 70% at 80% 70%, rgba(120,15,0,0.45) 0%, transparent 65%),
        #1a0800;
}

/* Dark overlay on top of video/image */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgba(10,4,2,0.72) 0%,
        rgba(20,8,4,0.58) 50%,
        rgba(5,2,1,0.75) 100%
    );
    backdrop-filter: blur(0px);
}

/* ── Inner content ── */
.hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.1rem;
    width: 100%;
    max-width: 820px;
    padding: 6rem 1.8rem 4rem;
}

/* RTL alignment */
.hero-section.rtl .hero-inner { align-items: center; }

/* Tag / overline */
.hero-tag {
    font-family: 'Cairo', 'Noto Kufi Arabic', sans-serif;
    font-size: clamp(0.75rem, 2vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(220,170,100,0.9);
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(220,170,100,0.25);
    border-radius: 100px;
    padding: 0.35rem 1.1rem;
    backdrop-filter: blur(8px);
}

/* Title */
.hero-title {
    font-family: 'Noto Kufi Arabic', sans-serif !important;
    font-weight: 900 !important;
    font-size: clamp(3rem, 9vw + 1rem, 9rem) !important;
    line-height: 1.05 !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-shadow: 0 4px 60px rgba(200,24,10,0.5), 0 2px 12px rgba(0,0,0,0.6) !important;
    letter-spacing: -0.015em;
}

/* Description */
.hero-desc {
    font-family: 'Cairo', 'Noto Kufi Arabic', sans-serif;
    line-height: 1.85;
    color: rgba(255,255,255,0.75);
    max-width: 52ch;
    margin: 0;
}

/* Product chips */
.hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
}
.hero-chip {
    font-family: 'Cairo', sans-serif;
    font-size: clamp(0.75rem, 1.8vw, 0.9rem);
    font-weight: 700;
    color: rgba(255,220,150,0.92);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,200,100,0.22);
    border-radius: 100px;
    padding: 0.3rem 1rem;
    backdrop-filter: blur(6px);
}

/* Info bar */
.hero-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 16px;
    padding: 0.9rem 1.4rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    max-width: 680px;
    width: 100%;
}
.hero-info__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.3rem 1.2rem;
    flex: 1;
    min-width: 160px;
}
.hero-info__item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: rgba(220,170,100,0.85);
}
.hero-info__item > div {
    display: flex;
    flex-direction: column;
    text-align: start;
}
.hero-info__label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    font-family: 'Cairo', sans-serif;
    font-weight: 500;
    line-height: 1.3;
}
.hero-info__value {
    font-size: 0.85rem;
    color: #ffffff;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    line-height: 1.3;
}
.hero-info__sep {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
}

/* CTA buttons */
.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 0.3rem;
}
.hero-btn {
    font-family: 'Cairo', 'Noto Kufi Arabic', sans-serif;
    font-size: clamp(0.85rem, 2vw, 0.97rem);
    font-weight: 700;
    border-radius: 100px;
    padding: 0.8rem 2.2rem;
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
    letter-spacing: 0.03em;
}
.hero-btn--primary {
    background: #c8180a;
    color: #fff;
    box-shadow: 0 4px 28px rgba(200,24,10,0.45);
}
.hero-btn--primary:hover {
    background: #a81208;
    transform: translateY(-3px);
    box-shadow: 0 10px 36px rgba(200,24,10,0.55);
    color: #fff;
}
.hero-btn--outline {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(8px);
}
.hero-btn--outline:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.6);
    transform: translateY(-3px);
    color: #fff;
}

/* Scroll indicator */
.hero-scroll {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    transition: color 0.2s;
}
.hero-scroll:hover { color: rgba(255,255,255,0.8); }
.hero-scroll__line {
    display: block;
    width: 1px;
    height: 36px;
    background: currentColor;
    animation: heroScrollBob 1.8s ease-in-out infinite;
}
.hero-scroll svg { width: 10px; height: 16px; }
@keyframes heroScrollBob {
    0%, 100% { transform: scaleY(1); opacity: 0.6; }
    50%       { transform: scaleY(0.7); opacity: 1; }
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .hero-inner { padding: 7rem 1.2rem 5rem; gap: 0.95rem; }
    .hero-info { flex-direction: column; gap: 0.5rem; }
    .hero-info__sep { width: 60%; height: 1px; }
    .hero-info__item { justify-content: center; text-align: center; }
    .hero-info__item > div { align-items: center; }
    .hero-ctas { flex-direction: column; align-items: center; }
    .hero-btn { width: 100%; max-width: 300px; text-align: center; justify-content: center; display: flex; }
    .hero-scroll { bottom: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════
   HERO — v32 FIXES
   ══════════════════════════════════════════════════════════════ */

/* ── 1. TRUE FULLSCREEN VIDEO — no black bars ever ── */
.hero-bg-video,
.hero-bg-iframe {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    /* Big enough to cover any screen ratio */
    width: max(100vw, 177.78vh) !important;
    height: max(100vh, 56.25vw) !important;
    min-width: 100% !important;
    min-height: 100% !important;
    transform: translate(-50%, -50%) !important;
    object-fit: cover !important;
    pointer-events: none !important;
    border: none !important;
}

/* Extra wrapper clip so iframe never overflows nav */
.hero-bg-layer {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    z-index: 0 !important;
}

/* ── 2. HIDE ALL YOUTUBE UI (logo, title bar, endscreen, watermark) ── */
/* Push iframe slightly beyond viewport so top chrome is hidden */
.hero-bg-iframe {
    top: calc(50% - 30px) !important; /* shift up to hide top bar */
    height: calc(max(100vh, 56.25vw) + 120px) !important; /* extra height */
}

/* ── 3. STRONGER OVERLAY so text pops ── */
.hero-overlay {
    background: linear-gradient(
        170deg,
        rgba(6, 2, 1, 0.75) 0%,
        rgba(14, 5, 2, 0.60) 45%,
        rgba(4, 1, 0, 0.78) 100%
    ) !important;
}

/* ── 4. BRAND NAME — one row, scales to fit ── */
.hero-title {
    font-size: clamp(2.4rem, 7vw, 7.5rem) !important;
    white-space: nowrap !important;
    line-height: 1.08 !important;
}
/* On very small phones allow wrap */
@media (max-width: 400px) {
    .hero-title { white-space: normal !important; font-size: clamp(2rem, 10vw, 3.5rem) !important; }
}

/* ── 5. INFO BAR — fix colors & separator visibility ── */
.hero-info {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}
.hero-info__item svg {
    color: #e8a84a !important;
    opacity: 1 !important;
}
.hero-info__label {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 0.68rem !important;
}
.hero-info__value {
    color: #fff !important;
    font-weight: 700 !important;
}
.hero-info__sep {
    width: 1px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    display: block !important;
}

/* Mobile: info bar stacked */
@media (max-width: 640px) {
    .hero-info__sep {
        width: 70% !important;
        height: 1px !important;
        margin: 0 auto !important;
    }
    .hero-title { white-space: normal !important; }
}

/* YouTube blocker — sits between iframe and overlay, captures all pointer events */
.hero-yt-wrap {
    position: absolute;
    inset: -60px -20px; /* oversized to hide YouTube chrome */
    overflow: hidden;
}
.hero-yt-blocker {
    position: absolute;
    inset: 0;
    z-index: 1; /* above iframe, below overlay */
    background: transparent;
    pointer-events: all;
}

/* ══════════════════════════════════════════════════════════════
   HEADER / NAV — Light mode fixes + Hero overlay fix
   ══════════════════════════════════════════════════════════════ */

/* Hero is ALWAYS dark — force white text on hero regardless of theme */
.hero-section .s-header,
.hero-section ~ .s-header,
body:not(.scrolled) .s-header:not(.sticky) {
    /* transparent on hero */
    background-color: transparent !important;
}

/* Nav links over hero video = always white */
.s-header:not(.sticky) .header-nav__links a {
    color: rgba(255, 255, 255, 0.82) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.s-header:not(.sticky) .header-nav__links a:hover,
.s-header:not(.sticky) .header-nav__links .current a {
    color: #ffffff !important;
}
.s-header:not(.sticky) .header-contact__num,
.s-header:not(.sticky) .header-contact__num svg path,
.s-header:not(.sticky) .btn {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.4) !important;
}
/* Light theme: keep natural colors for phone/btn over hero */
[data-theme="light"] .s-header:not(.sticky) .header-contact__num,
[data-theme="light"] .s-header:not(.sticky) .header-contact__num svg path,
[data-theme="light"] .s-header:not(.sticky) .btn {
    color: inherit !important;
    border-color: rgba(0,0,0,0.2) !important;
}
.s-header:not(.sticky) #theme-toggle {
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.35) !important;
}

/* ── STICKY HEADER — adapts to light/dark theme ── */
/* Dark mode sticky (default) */
.s-header.sticky {
    background-color: rgba(12, 5, 3, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.s-header.sticky .header-nav__links a {
    color: rgba(255,255,255,0.78) !important;
}
.s-header.sticky .header-nav__links a:hover,
.s-header.sticky .header-nav__links .current a {
    color: #fff !important;
}

/* Light mode sticky */
[data-theme="light"] .s-header.sticky {
    background-color: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .s-header.sticky .header-nav__links a {
    color: #3f3f46 !important;
    text-shadow: none !important;
}
[data-theme="light"] .s-header.sticky .header-nav__links a:hover,
[data-theme="light"] .s-header.sticky .header-nav__links .current a {
    color: #18181b !important;
}
[data-theme="light"] .s-header.sticky .header-contact__num {
    color: #18181b !important;
}
[data-theme="light"] .s-header.sticky .header-contact__num svg path {
    stroke: #18181b !important;
}
[data-theme="light"] .s-header.sticky .btn {
    border-color: rgba(0,0,0,0.2) !important;
    color: #18181b !important;
}
[data-theme="light"] .s-header.sticky #theme-toggle {
    border-color: rgba(0,0,0,0.15) !important;
    color: #18181b !important;
}

/* Language switcher dropdown in light mode */
[data-theme="light"] .s-header.sticky .lang-dropdown,
[data-theme="light"] .s-header.sticky .lang-btn {
    color: #18181b !important;
    border-color: rgba(0,0,0,0.15) !important;
}

/* Mobile menu in light mode */
[data-theme="light"] .mobile-nav {
    background: rgba(255,255,255,0.98) !important;
}
[data-theme="light"] .mobile-nav a {
    color: #27272a !important;
}

/* Smooth transition for theme switching */
.s-header,
.s-header .header-nav__links a,
.s-header .btn {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE NAV — FONT + COLOR FIX
   Problem 1: Roboto Flex has no Kurdish glyphs → use Noto Kufi
   Problem 2: nav links too faint on mobile overlay
═══════════════════════════════════════════════════════════ */

/* Global Kurdish font override for nav & body text */
body,
.header-nav__links a,
.header-nav__links li,
.lang-btn,
.lang-dropdown,
.btn,
h1, h2, h3, h4, h5, h6,
p, span, li, a {
    font-family: 'Noto Kufi Arabic', 'Cairo', system-ui, sans-serif !important;
}

/* Mobile nav overlay — force solid readable background */
@media screen and (max-width: 900px) {
    .header-nav {
        background-color: #0f0a08 !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
    }

    /* Nav link text — crisp white, bold */
    .header-nav__links a {
        color: #ffffff !important;
        font-size: 1.25rem !important;
        font-weight: 700 !important;
        font-family: 'Noto Kufi Arabic', sans-serif !important;
        padding: 0.65rem 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.07) !important;
        display: block !important;
        letter-spacing: 0.01em;
    }

    .header-nav__links a:hover,
    .header-nav__links a:focus {
        color: #e8392e !important;
    }

    .header-nav__links .current a {
        color: #e8392e !important;
    }

    /* Contact buttons in mobile nav */
    .header-contact .btn {
        background: rgba(255,255,255,0.08) !important;
        border-color: rgba(255,255,255,0.2) !important;
        color: #ffffff !important;
        font-family: 'Noto Kufi Arabic', sans-serif !important;
    }

    /* Language switcher text in nav */
    .lang-btn {
        color: #ffffff !important;
        border-color: rgba(255,255,255,0.25) !important;
        font-family: 'Noto Kufi Arabic', sans-serif !important;
        font-weight: 700 !important;
    }

    /* Hamburger lines — ensure visible on dark bg */
    .header-menu-toggle span,
    .header-menu-toggle span::before,
    .header-menu-toggle span::after {
        background-color: #ffffff !important;
    }
}

/* Light theme override — mobile nav stays dark for readability — MOBILE ONLY */
@media screen and (max-width: 900px) {
    [data-theme="light"] .header-nav {
        background-color: #1a0f0d !important;
    }
    [data-theme="light"] .header-nav__links a {
        color: #f5f5f5 !important;
        border-bottom-color: rgba(255,255,255,0.08) !important;
    }
}

/* Hamburger button — always visible against any hero bg */
.header-menu-toggle span,
.header-menu-toggle span::before,
.header-menu-toggle span::after {
    background-color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════
   HEADER BACKGROUND FIX
   s-header__content was opaque (#000) blocking hero on desktop
═══════════════════════════════════════════════════════════ */

/* When header is NOT sticky → fully transparent so hero shows through */
.s-header:not(.sticky) .s-header__content,
.s-header:not(.sticky) .s-header__block {
    background-color: transparent !important;
}

/* When sticky → keep the frosted glass look */
.s-header.sticky .s-header__content {
    background-color: transparent !important; /* parent handles bg */
}