/* Explain: Styles for various UI components, page elements, and animations. */
.site-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.75));
    backdrop-filter: blur(18px);
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--sage-dark);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.section-kicker::before {
    display: inline-block;
    width: 2.4rem;
    height: 1px;
    background: var(--accent-color);
    content: "";
}

.section-kicker.no-line::before {
    display: none;
}

.arabic-justify {
    text-align: justify;
    text-align-last: justify;
    text-justify: inter-word;
}

.glass-panel {
    border: 1px solid var(--glass-border);
    background: linear-gradient(145deg, rgba(250, 249, 246, 0.78), rgba(255, 255, 255, 0.48));
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.arch-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(88, 129, 87, 0.38);
    background: var(--surface-color);
    box-shadow: var(--shadow-soft);
}

.arch-frame::after {
    position: absolute;
    inset: 1.1rem;
    border: 1px solid rgba(250, 249, 246, 0.62);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.arch-frame-large {
    height: min(74vh, 720px);
    min-height: 500px;
    border-radius: 999px 999px 2.5rem 2.5rem;
}

.arch-frame-medium {
    height: 620px;
    max-width: 450px;
    border-radius: 999px 999px 2.1rem 2.1rem;
}

/* Disclosure section — halve the framed image + its frame (scoped to this page only) */
.disclosure-lens .arch-frame-medium {
    height: 310px;
    max-width: 225px;
    border-radius: 999px 999px 1.5rem 1.5rem;
}

.floating-note {
    position: absolute;
    right: -1.5rem;
    bottom: 4rem;
    display: flex;
    max-width: 250px;
    align-items: center;
    gap: 0.85rem;
    border-radius: 999px;
    padding: 1rem 1.2rem;
    color: var(--text-color);
    font-size: 0.82rem;
    font-weight: 600;
}

.story-card {
    position: absolute;
    right: 0;
    bottom: 2.5rem;
    max-width: 290px;
    border-radius: 2rem;
    padding: 1.5rem;
}

.quiet-detail,
.amenity-row,
.contact-note {
    border: 1px solid var(--glass-border);
    border-radius: 1.6rem;
    background: rgba(250, 249, 246, 0.58);
    padding: 1.25rem;
}

.quiet-detail span {
    display: inline-flex;
    margin-bottom: 0.9rem;
    color: var(--accent-color);
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 600;
}

.quiet-detail p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.75;
}

.class-card {
    min-height: 360px;
    border-radius: 2.2rem;
    padding: 2rem;
    transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.class-card:hover {
    border-color: rgba(88, 129, 87, 0.58);
    box-shadow: 0 26px 80px rgba(31, 46, 35, 0.11);
    transform: translateY(-6px);
}

.amenity-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
}

.amenity-dot {
    width: 0.8rem;
    height: 0.8rem;
    margin-top: 0.4rem;
    border-radius: 999px;
    background: var(--accent-color);
    box-shadow: 0 0 0 0.45rem var(--terracotta-soft);
}

.amenity-image-wrap {
    height: 660px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: 3rem 999px 999px 3rem;
    box-shadow: var(--shadow-soft);
}

.booking-form,
.booking-overlay-panel {
    border-radius: 2.4rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.form-label {
    display: block;
    margin-bottom: 0.55rem;
    color: var(--text-color);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.form-status.success {
    color: #4A6B53;
}

.form-status.error {
    color: #9B4A3D;
}

.mobile-book-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    border-top: 1px solid var(--glass-border);
    background: rgba(250, 249, 246, 0.86);
    padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
    backdrop-filter: blur(18px);
}

.booking-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    overflow-y: auto;
    background: rgba(31, 46, 35, 0.32);
    padding: 1rem;
}

.booking-overlay.is-open {
    display: block;
}

.booking-overlay-panel {
    min-height: calc(100vh - 2rem);
    background: var(--background-color);
    box-shadow: 0 30px 90px rgba(31, 46, 35, 0.22);
}

@media (max-width: 767px) {
    .section-kicker::before {
        width: 1.6rem;
    }

    .arch-frame-large,
    .arch-frame-medium,
    .amenity-image-wrap {
        height: 510px;
        min-height: 0;
    }

    .arch-frame-large {
        margin-right: auto;
        margin-left: auto;
        width: min(100%, 450px);
    }

    .floating-note,
    .story-card {
        position: relative;
        right: auto;
        bottom: auto;
        margin: -2.5rem auto 0;
    }

    .amenity-image-wrap {
        border-radius: 999px 999px 2rem 2rem;
    }
}

.heroSlider .swiper-pagination-bullet {
    background: var(--primary-color);
    opacity: 0.3;
}

.heroSlider .swiper-pagination-bullet-active {
    width: 1.7rem;
    border-radius: 999px;
    background: var(--logo-subtitle-color);
    opacity: 1;
}

.heroSlider .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hero slider navigation arrows */
.hero-nav {
    position: absolute;
    top: 50%;
    z-index: 20;
    display: inline-flex;
    height: 3rem;
    width: 3rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 81, 50, 0.28);
    transform: translateY(-50%);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.hero-nav:hover,
.hero-nav:focus-visible {
    background: var(--logo-subtitle-color);
    color: var(--primary-color);
    transform: translateY(-50%) scale(1.08);
}

.hero-next {
    left: 1rem;
}

.hero-prev {
    right: 1rem;
}

@media (min-width: 640px) {
    .hero-next {
        left: 1.75rem;
    }

    .hero-prev {
        right: 1.75rem;
    }
}

/* Hero slider — continuous motion + creative text entrance */
.heroSlider .swiper-slide .slide-anim {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.heroSlider .swiper-slide-active .slide-anim {
    opacity: 1;
    transform: translateY(0);
}

.heroSlider .swiper-slide-active .slide-anim-1 {
    transition-delay: 0.12s;
}

.heroSlider .swiper-slide-active .slide-anim-2 {
    transition-delay: 0.28s;
}

.heroSlider .swiper-slide-active .slide-anim-3 {
    transition-delay: 0.46s;
}

.heroSlider .swiper-slide .slide-line {
    width: 0;
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}

.heroSlider .swiper-slide-active .slide-line {
    width: 6.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .heroSlider .swiper-slide .slide-anim {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .heroSlider .swiper-slide .slide-line {
        width: 6.5rem;
        transition: none;
    }
}

/* Organic Blob Shapes */
.organic-blob {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: blob-morph 8s ease-in-out infinite alternate;
    overflow: hidden;
    transform: translateZ(0);
}

.organic-blob-reverse {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: blob-morph-reverse 10s ease-in-out infinite alternate;
    overflow: hidden;
    transform: translateZ(0);
}

@keyframes blob-morph {
    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    100% { border-radius: 70% 30% 40% 60% / 30% 40% 60% 70%; }
}

@keyframes blob-morph-reverse {
    0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    50% { border-radius: 70% 30% 40% 60% / 60% 40% 50% 50%; }
    100% { border-radius: 30% 70% 50% 50% / 50% 30% 70% 50%; }
}

/* Stable organic blob shape for framed content (no animation) */
.organic-blob-static {
    border-radius: 58% 42% 47% 53% / 53% 47% 55% 45%;
    overflow: hidden;
    transform: translateZ(0);
}

.organic-blob-static-reverse {
    border-radius: 45% 55% 60% 40% / 42% 52% 48% 58%;
    overflow: hidden;
    transform: translateZ(0);
}

/* Marquee animations for right-to-left UI */
.marquee-wrapper {
    display: flex;
    overflow: hidden;
    width: 100%;
    direction: ltr;
}
.marquee-track {
    display: flex;
    gap: 3rem;
    padding-inline-start: 3rem;
    flex-shrink: 0;
    align-items: center;
    animation: scroll-right 25s linear infinite;
}

.marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}
@keyframes scroll-right {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.partners-marquee .marquee-track {
    gap: 2.75rem;
    padding-inline-start: 2.75rem;
    animation-duration: 22s;
}

.media-marquee .marquee-track {
    gap: 1.5rem;
    padding-inline-start: 1.5rem;
}

/* Partners — organic shape cards that echo each logo, with elegant gold accents */
.partner-card {
    position: relative;
    display: flex;
    height: 6.5rem;
    width: 6.5rem;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    background: linear-gradient(150deg, #ffffff 0%, var(--surface-color) 100%);
    box-shadow: var(--shadow-soft);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.45s ease;
}

.partner-card::after {
    position: absolute;
    inset: -0.5rem;
    border: 1px solid var(--logo-subtitle-color);
    border-radius: inherit;
    opacity: 0.28;
    content: "";
    pointer-events: none;
    transition: opacity 0.45s ease, inset 0.45s ease;
}

.partner-card:hover {
    transform: translateY(-6px) scale(1.05);
    border-color: var(--logo-subtitle-color);
    box-shadow: 0 20px 45px rgba(15, 81, 50, 0.16), 0 0 0 4px rgba(212, 175, 55, 0.14);
}

.partner-card:hover::after {
    inset: -0.7rem;
    opacity: 0.6;
}

.partner-logo {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/* Animated flowing lines weaving around the partner badges */
.partners-marquee::before {
    content: "";
    position: absolute;
    inset: -25% -8%;
    z-index: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(115deg, transparent 0 38px, rgba(212, 175, 55, 0.28) 38px 39px, transparent 39px 76px),
        repeating-linear-gradient(65deg, transparent 0 54px, rgba(15, 81, 50, 0.14) 54px 55px, transparent 55px 108px);
    background-size: 152px 152px, 220px 220px;
    background-position: 0 0, 0 0;
    animation: partners-lines-move 16s linear infinite;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

@keyframes partners-lines-move {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 152px 0, -220px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .partners-marquee::before {
        animation: none;
    }
}

.partner-blob-a {
    border-radius: 52% 48% 50% 50% / 50% 48% 52% 50%;
}

.partner-blob-b {
    border-radius: 48% 52% 47% 53% / 52% 50% 50% 48%;
}

.partner-blob-c {
    border-radius: 50% 50% 53% 47% / 47% 52% 48% 53%;
}

@media (prefers-reduced-motion: reduce) {
    .partner-card {
        transition: none;
    }
}

/* Strategic goals page — dark, modern surface with a heritage pattern */
.strategic-dark {
    background:
        radial-gradient(circle at 14% 10%, rgba(212, 175, 55, 0.14), transparent 30rem),
        radial-gradient(circle at 88% 16%, rgba(25, 135, 84, 0.28), transparent 30rem),
        radial-gradient(circle at 50% 118%, rgba(212, 175, 55, 0.1), transparent 34rem),
        linear-gradient(160deg, #10583a 0%, #0a3a24 48%, #05170f 100%);
}

.strategic-pattern {
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1'%3E%3Cpath d='M40 8 72 40 40 72 8 40Z'/%3E%3Cpath d='M17 17 63 17 63 63 17 63Z'/%3E%3Cpath d='M40 30 50 40 40 50 30 40Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px 80px;
    background-position: center;
    -webkit-mask-image: radial-gradient(circle at 50% 34%, #000 0%, transparent 82%);
    mask-image: radial-gradient(circle at 50% 34%, #000 0%, transparent 82%);
}

/* Footer creative touches */
.footer-shimmer-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--logo-subtitle-color) 25%, var(--accent-color) 50%, var(--logo-subtitle-color) 75%, transparent 100%);
    background-size: 200% 100%;
    animation: footer-shimmer 6s linear infinite;
    pointer-events: none;
}

@keyframes footer-shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.footer-pin-ping {
    animation: footer-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes footer-ping {
    0% { transform: scale(1); opacity: 0.55; }
    80%, 100% { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .footer-shimmer-line,
    .footer-pin-ping {
        animation: none;
    }
}

/* Professional divider between hero slides */
.slide-divider {
    position: absolute;
    inset-block: 3.5rem;
    inset-inline-start: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, var(--border-color) 15%, var(--logo-subtitle-color) 50%, var(--border-color) 85%, transparent 100%);
    pointer-events: none;
    z-index: 5;
}

.slide-divider-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    background: var(--logo-subtitle-color);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.16);
    transform: translate(-50%, -50%) rotate(45deg);
}

@media (max-width: 639px) {
    .slide-divider {
        inset-block: 2rem;
    }
}

/* Navigation dropdown hover bridge — keeps the submenu open while the pointer
   moves from the trigger down to the panel, so the sub-links stay selectable */
.dropdown.dropdown-hover > .dropdown-content::before {
    position: absolute;
    top: -0.55rem;
    right: 0;
    left: 0;
    height: 0.7rem;
    content: "";
}

/* Upgraded, professional dropdown panel */
.dropdown.dropdown-hover > .dropdown-content {
    --entry-translate: -6px;
    transform-origin: top;
    animation: dropdown-panel-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dropdown.dropdown-hover > .dropdown-content::after {
    position: absolute;
    top: 0;
    right: 1.5rem;
    left: 1.5rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--logo-subtitle-color), var(--accent-color), transparent);
    content: "";
    pointer-events: none;
}

@keyframes dropdown-panel-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dropdown.dropdown-hover > .dropdown-content {
        animation: none;
    }
}

/* Dropdowns — compact spacing + premium polish */
.dropdown.dropdown-hover > .dropdown-content {
    margin-top: 0.3rem;
    padding: 0.2rem;
    border: 1px solid var(--glass-border);
    border-radius: 1.1rem;
    background-image: linear-gradient(180deg, #ffffff 0%, var(--surface-color) 100%);
    background-clip: padding-box;
    box-shadow: 0 20px 55px rgba(15, 81, 50, 0.18), 0 0 0 1px rgba(212, 175, 55, 0.08);
}

.dropdown.dropdown-hover > .dropdown-content li + li {
    margin-top: 0;
}

.dropdown.dropdown-hover > .dropdown-content a {
    gap: 0.5rem;
    padding: 0.35rem 0.45rem;
    border-radius: 0.75rem;
    transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.dropdown.dropdown-hover > .dropdown-content a:hover,
.dropdown.dropdown-hover > .dropdown-content a:focus-visible {
    background: linear-gradient(90deg, var(--sage-soft) 0%, rgba(212, 175, 55, 0.16) 100%);
    transform: translateX(-4px);
}

.dropdown.dropdown-hover > .dropdown-content a:hover span:first-child,
.dropdown.dropdown-hover > .dropdown-content a:focus-visible span:first-child {
    box-shadow: 0 6px 16px rgba(15, 81, 50, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .dropdown.dropdown-hover > .dropdown-content a,
    .dropdown.dropdown-hover > .dropdown-content a:hover,
    .dropdown.dropdown-hover > .dropdown-content a:focus-visible {
        transform: none;
    }
}

/* News media — creative, glowing and shining image treatment */
.news-frame {
    position: relative;
}

.news-frame-line {
    position: absolute;
    inset: -0.55rem;
    z-index: 0;
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 2.5rem;
    pointer-events: none;
    transition: inset 0.5s ease, border-color 0.5s ease;
}

.group:hover .news-frame-line {
    inset: -0.85rem;
    border-color: rgba(212, 175, 55, 0.9);
}

.news-media {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    box-shadow: 0 18px 50px rgba(15, 81, 50, 0.28);
    transition: box-shadow 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Gold corner brackets for a framed, geometric feel */
.news-corner {
    position: absolute;
    z-index: 6;
    width: 1.7rem;
    height: 1.7rem;
    pointer-events: none;
    border-color: var(--logo-subtitle-color);
}

.news-corner-tl {
    top: 0.8rem;
    left: 0.8rem;
    border-top: 2px solid;
    border-left: 2px solid;
    border-top-left-radius: 0.7rem;
}

.news-corner-br {
    bottom: 0.8rem;
    right: 0.8rem;
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-bottom-right-radius: 0.7rem;
}

.news-media::before {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.38),
                inset 0 0 34px rgba(212, 175, 55, 0.3);
    content: "";
    pointer-events: none;
}

.news-media::after {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.2) 0%, transparent 46%);
    content: "";
    pointer-events: none;
}

.news-media-img {
    filter: saturate(1.06) contrast(1.03);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s ease;
}

.group:hover .news-media {
    box-shadow: 0 26px 64px rgba(15, 81, 50, 0.42), 0 0 0 3px rgba(212, 175, 55, 0.38);
    transform: translateY(-4px);
}

.group:hover .news-media-img {
    filter: saturate(1.2) contrast(1.08) brightness(1.05);
    transform: scale(1.09);
}

/* Twinkling golden sparkles */
.news-sparkle {
    position: absolute;
    z-index: 6;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: radial-gradient(circle, #ffffff 0%, rgba(212, 175, 55, 0.95) 45%, transparent 72%);
    box-shadow: 0 0 10px 2px rgba(212, 175, 55, 0.7);
    opacity: 0;
    animation: news-sparkle 3.6s ease-in-out infinite;
    pointer-events: none;
}

.news-sparkle-1 { top: 16%; left: 22%; animation-delay: 0s; }
.news-sparkle-2 { top: 62%; left: 74%; width: 0.8rem; height: 0.8rem; animation-delay: 1.1s; }
.news-sparkle-3 { top: 82%; left: 32%; width: 0.4rem; height: 0.4rem; animation-delay: 2.2s; }

@keyframes news-sparkle {
    0%, 100% { opacity: 0; transform: scale(0.4); }
    50% { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .news-sparkle {
        animation: none;
    }
}

/* Projects — animated organic frame with a soft golden ring accent */
.project-blob-ring {
    position: absolute;
    inset: -0.75rem;
    z-index: -1;
    border: 1.5px solid rgba(212, 175, 55, 0.5);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: blob-morph 8s ease-in-out infinite alternate;
    pointer-events: none;
    transition: inset 0.5s ease, border-color 0.5s ease;
}

.group:hover .project-blob-ring {
    inset: -1.15rem;
    border-color: rgba(212, 175, 55, 0.9);
}

@media (prefers-reduced-motion: reduce) {
    .project-blob-ring {
        animation: none;
    }
}

/* Careers page — dark, passionate modern hero */
.careers-dark {
    background:
        radial-gradient(circle at 14% 12%, rgba(212, 175, 55, 0.16), transparent 32rem),
        radial-gradient(circle at 88% 18%, rgba(25, 135, 84, 0.3), transparent 30rem),
        radial-gradient(circle at 50% 112%, rgba(212, 175, 55, 0.12), transparent 34rem),
        linear-gradient(160deg, #10583a 0%, #0a3a24 48%, #05170f 100%);
}

.careers-dark select option {
    color: #1F2937;
    background: #ffffff;
}

.careers-dark .form-status.success {
    color: #8fe3ad;
}

.careers-dark .form-status.error {
    color: #ff9f9f;
}

.careers-pattern {
    background-image:
        repeating-linear-gradient(115deg, transparent 0 42px, rgba(212, 175, 55, 0.1) 42px 43px, transparent 43px 86px),
        repeating-linear-gradient(65deg, transparent 0 58px, rgba(255, 255, 255, 0.05) 58px 59px, transparent 59px 118px);
    background-size: 168px 168px, 236px 236px;
    animation: careers-pattern-drift 22s linear infinite;
    -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 86%);
    mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 86%);
}

@keyframes careers-pattern-drift {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 168px 0, -236px 0; }
}

.careers-heartbeat {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10%;
    z-index: 5;
    width: 100%;
    height: 120px;
    pointer-events: none;
    opacity: 0.55;
}

.careers-heartbeat-path {
    fill: none;
    stroke: var(--logo-subtitle-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 220 1600;
    animation: careers-heartbeat 4s linear infinite;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.8));
}

@keyframes careers-heartbeat {
    0% { stroke-dashoffset: 1820; }
    100% { stroke-dashoffset: -220; }
}

@media (prefers-reduced-motion: reduce) {
    .careers-pattern,
    .careers-heartbeat-path {
        animation: none;
    }
}

/* Media center — auto-playing album carousels + lightbox preview */
.mediaSwiper {
    padding-block: 0.75rem;
}

.mediaSwiper .swiper-wrapper {
    align-items: stretch;
}

/* Graceful fallback: if the slider library is unavailable, show a tidy grid instead of a broken empty area */
.mediaSwiper:not(.swiper-initialized) .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 640px) {
    .mediaSwiper:not(.swiper-initialized) .swiper-wrapper {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.15rem;
    }
}

@media (min-width: 1024px) {
    .mediaSwiper:not(.swiper-initialized) .swiper-wrapper {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

.mediaSwiper:not(.swiper-initialized) .swiper-pagination,
.mediaSwiper:not(.swiper-initialized) ~ .media-nav {
    display: none;
}

.mediaSwiper .swiper-pagination {
    bottom: 0.25rem;
}

.mediaSwiper .swiper-pagination-bullet {
    background: var(--primary-color);
    opacity: 0.25;
    transition: width 0.3s ease, opacity 0.3s ease;
}

.mediaSwiper .swiper-pagination-bullet-active {
    width: 1.6rem;
    border-radius: 999px;
    background: var(--logo-subtitle-color);
    opacity: 1;
}

.media-nav {
    position: absolute;
    top: 42%;
    z-index: 5;
    display: none;
    height: 2.85rem;
    width: 2.85rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: var(--glass-bg);
    color: var(--primary-color);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.media-nav:hover,
.media-nav:focus-visible {
    background: var(--logo-subtitle-color);
    color: var(--primary-color);
    transform: translateY(-2px) scale(1.06);
}

.media-nav-right {
    right: -0.5rem;
}

.media-nav-left {
    left: -0.5rem;
}

@media (min-width: 640px) {
    .media-nav {
        display: inline-flex;
    }
}

.media-slide {
    position: relative;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: 1.75rem;
    background: var(--background-color);
    box-shadow: var(--shadow-soft);
    transition: box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.media-slide:hover {
    box-shadow: 0 24px 60px rgba(15, 81, 50, 0.22), 0 0 0 3px rgba(212, 175, 55, 0.3);
    transform: translateY(-5px);
}

.media-slide-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    overflow: hidden;
}

.media-slide-trigger {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}

.media-slide-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    filter: saturate(1.05);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s ease;
}

.media-slide:hover .media-slide-img {
    filter: saturate(1.16) contrast(1.05);
    transform: scale(1.08);
}

.media-slide-glow {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(5, 23, 15, 0) 46%, rgba(5, 23, 15, 0.66) 100%);
    pointer-events: none;
}

.media-slide-caption {
    position: absolute;
    inset-inline: 1rem;
    bottom: 0.95rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #ffffff;
    pointer-events: none;
}

.media-slide-index {
    display: inline-flex;
    min-width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--logo-subtitle-color);
    color: var(--primary-color);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
}

.media-slide-title {
    font-size: 0.95rem;
    font-weight: 700;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(5, 23, 15, 0.88);
    backdrop-filter: blur(6px);
}

.media-lightbox.is-open {
    display: flex;
    animation: media-lightbox-in 0.3s ease both;
}

@keyframes media-lightbox-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.media-lightbox-figure {
    position: relative;
    margin: 0;
    max-width: min(92vw, 62rem);
}

.media-lightbox-figure img {
    max-height: 78vh;
    width: auto;
    max-width: 100%;
    border-radius: 1.5rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.media-lightbox-caption {
    margin-top: 0.9rem;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.media-lightbox-close {
    position: absolute;
    top: 1.25rem;
    inset-inline-end: 1.25rem;
    z-index: 95;
    display: inline-flex;
    height: 2.75rem;
    width: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    transition: background 0.3s ease, transform 0.3s ease;
}

.media-lightbox-close:hover,
.media-lightbox-close:focus-visible {
    background: var(--logo-subtitle-color);
    color: var(--primary-color);
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .media-lightbox.is-open {
        animation: none;
    }

    .media-slide:hover .media-slide-img {
        transform: none;
    }
}

/* Media center — continuous, direction-controlled image marquee */
.media-marquee-shell {
    position: relative;
}

.media-marquee {
    direction: ltr;
    width: 100%;
    overflow: hidden;
    padding-block: 4rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.media-marquee-track {
    display: flex;
    gap: 2.5rem;
    width: max-content;
    will-change: transform;
}

.media-card {
    position: relative;
    flex: 0 0 auto;
    width: clamp(6rem, 16vw, 9.5rem);
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: 1.1rem;
    background: var(--background-color);
    box-shadow: var(--shadow-soft);
    pointer-events: none;
    transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}



/* The slide currently on display is enlarged slightly compared to its neighbours */
.media-card.is-current,
.media-card.is-current:hover {
    z-index: 3;
    transform: scale(2);
    box-shadow: 0 30px 70px rgba(15, 81, 50, 0.35), 0 0 0 3px rgba(212, 175, 55, 0.6);
}

.media-card .media-slide-trigger {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
    line-height: 0;
}

.media-card-img {
    display: block;
    height: 100%;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: saturate(1.05);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s ease;
}



.media-arrow {
    position: absolute;
    top: 50%;
    z-index: 6;
    display: inline-flex;
    height: 2.75rem;
    width: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: var(--glass-bg);
    color: var(--primary-color);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
    transform: translateY(-50%);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.media-arrow:hover,
.media-arrow:focus-visible {
    background: var(--logo-subtitle-color);
    color: var(--primary-color);
    transform: translateY(-50%) scale(1.06);
}

.media-arrow-right {
    right: -0.35rem;
}

.media-arrow-left {
    left: -0.35rem;
}

@media (min-width: 640px) {
    .media-arrow-right {
        right: -0.85rem;
    }

    .media-arrow-left {
        left: -0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .media-card,
    .media-card-img {
        transition: none;
    }
}

/* Media center — enchanting artistic ornamentation */
.media-page {
    position: relative;
}

.media-bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%230F5132' stroke-width='1'%3E%3Cpath d='M48 10 86 48 48 86 10 48Z'/%3E%3Cpath d='M20 20 76 20 76 76 20 76Z'/%3E%3Cpath d='M48 36 60 48 48 60 36 48Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 96px 96px;
    background-position: center;
    opacity: 0.05;
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
    mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
}

.media-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(40px);
    pointer-events: none;
}

.media-glow-a {
    top: -6rem;
    inset-inline-end: -4rem;
    width: 26rem;
    height: 26rem;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.22), transparent 70%);
}

.media-glow-b {
    bottom: 2rem;
    inset-inline-start: -6rem;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle, rgba(25, 135, 84, 0.18), transparent 70%);
}

/* Ornamental page header */
.media-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: 2.75rem;
    padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 3rem);
    background: linear-gradient(155deg, #ffffff 0%, var(--surface-color) 58%, var(--sage-soft) 100%);
    box-shadow: var(--shadow-soft);
}

.media-hero::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1'%3E%3Cpath d='M35 4 66 35 35 66 4 35Z'/%3E%3Cpath d='M14 14 56 14 56 56 14 56Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 70px 70px;
    background-position: center;
    opacity: 0.07;
    pointer-events: none;
}

.media-hero-glare {
    position: absolute;
    top: -55%;
    inset-inline-start: -15%;
    z-index: 1;
    width: 30rem;
    height: 30rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.28), transparent 70%);
    filter: blur(24px);
    pointer-events: none;
}

.media-crest {
    position: relative;
    z-index: 10;
    display: inline-flex;
    height: 4.5rem;
    width: 4.5rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: linear-gradient(150deg, #ffffff, var(--surface-color));
    color: var(--logo-subtitle-color);
    font-size: 1.6rem;
    box-shadow: 0 16px 40px rgba(15, 81, 50, 0.14), 0 0 0 6px rgba(212, 175, 55, 0.12);
}

.media-crest::after {
    position: absolute;
    inset: -0.55rem;
    border: 1px dashed rgba(212, 175, 55, 0.55);
    border-radius: inherit;
    content: "";
    animation: media-crest-spin 22s linear infinite;
}

@keyframes media-crest-spin {
    to { transform: rotate(360deg); }
}

.media-eyebrow {
    position: relative;
    z-index: 10;
    margin-top: 1.1rem;
    color: var(--sage-dark);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

.media-title {
    position: relative;
    z-index: 10;
    margin-top: 0.5rem;
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 800;
    line-height: 1.25;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 40%, var(--logo-subtitle-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.media-divider {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.15rem;
}

.media-divider-line {
    height: 1px;
    width: clamp(2.5rem, 12vw, 7rem);
    background: linear-gradient(90deg, transparent, var(--logo-subtitle-color));
}

.media-divider-line.end {
    background: linear-gradient(90deg, var(--logo-subtitle-color), transparent);
}

.media-divider-gem {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    background: var(--logo-subtitle-color);
    box-shadow: 0 0 0 5px rgba(212, 175, 55, 0.16);
    transform: rotate(45deg);
    animation: media-gem-pulse 2.6s ease-in-out infinite;
}

@keyframes media-gem-pulse {
    0%, 100% { transform: rotate(45deg) scale(1); opacity: 0.85; }
    50% { transform: rotate(45deg) scale(1.25); opacity: 1; }
}

.media-lead {
    position: relative;
    z-index: 10;
    margin: 1.1rem auto 0;
    max-width: 38rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 2;
}

/* Twinkling golden sparkles */
.media-sparkle {
    position: absolute;
    z-index: 6;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: radial-gradient(circle, #ffffff 0%, rgba(212, 175, 55, 0.95) 45%, transparent 72%);
    box-shadow: 0 0 10px 2px rgba(212, 175, 55, 0.7);
    opacity: 0;
    animation: media-sparkle 4s ease-in-out infinite;
    pointer-events: none;
}

.media-sparkle-1 { top: 18%; inset-inline-start: 12%; animation-delay: 0s; }
.media-sparkle-2 { top: 66%; inset-inline-end: 14%; width: 0.75rem; height: 0.75rem; animation-delay: 1.3s; }
.media-sparkle-3 { bottom: 16%; inset-inline-start: 30%; width: 0.4rem; height: 0.4rem; animation-delay: 2.4s; }

@keyframes media-sparkle {
    0%, 100% { opacity: 0; transform: scale(0.4); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Album blocks — framed, elegant, with gold accents */
.media-album {
    position: relative;
    overflow: hidden;
    margin-top: 3.25rem;
    border: 1px solid var(--glass-border);
    border-radius: 2.5rem;
    padding: clamp(1.25rem, 3.5vw, 2.5rem);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.94) 0%, var(--surface-color) 100%);
    box-shadow: var(--shadow-soft);
}

.media-album::before {
    position: absolute;
    top: 0;
    inset-inline: 2rem;
    z-index: 2;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--logo-subtitle-color), var(--accent-color), transparent);
    content: "";
}

.media-album-corner {
    position: absolute;
    width: 2.2rem;
    height: 2.2rem;
    border-color: var(--logo-subtitle-color);
    opacity: 0.75;
    pointer-events: none;
}

.media-album-corner-tl {
    top: 1rem;
    left: 1rem;
    border-top: 2px solid;
    border-left: 2px solid;
    border-top-left-radius: 0.9rem;
}

.media-album-corner-br {
    bottom: 1rem;
    right: 1rem;
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-bottom-right-radius: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
    .media-crest::after,
    .media-divider-gem,
    .media-sparkle {
        animation: none;
    }
}

/* Service request page — light lattice pattern + refined glass panels */
.service-lattice {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1'%3E%3Cpath d='M40 6 74 40 40 74 6 40Z'/%3E%3Cpath d='M24 24 56 24 56 56 24 56Z'/%3E%3Cpath d='M40 32 48 40 40 48 32 40Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 80px 80px;
    background-position: center;
    opacity: 0.05;
    -webkit-mask-image: radial-gradient(circle at 50% 26%, #000 0%, transparent 82%);
    mask-image: radial-gradient(circle at 50% 26%, #000 0%, transparent 82%);
}

.service-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2rem;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px);
    padding: clamp(1.4rem, 3vw, 2rem);
}

.service-panel::before {
    position: absolute;
    top: 0;
    inset-inline: 2rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.7), transparent);
    content: "";
    pointer-events: none;
}

.service-step {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
}

.service-step:not(:last-child)::after {
    position: absolute;
    inset-inline-start: 1.35rem;
    top: 3.1rem;
    bottom: -1.15rem;
    width: 1px;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.45), transparent);
    content: "";
    pointer-events: none;
}

.service-step-num {
    display: inline-flex;
    height: 2.75rem;
    width: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.14);
    color: var(--logo-subtitle-color);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
}

.service-pill {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.6rem 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 700;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.service-pill:hover {
    border-color: rgba(212, 175, 55, 0.55);
    background: rgba(212, 175, 55, 0.1);
    transform: translateY(-2px);
}

.service-pill i {
    color: var(--logo-subtitle-color);
}

@media (prefers-reduced-motion: reduce) {
    .service-pill {
        transition: none;
    }
}

/* Services — an enchanted palette of giving with a golden, lively character */
.services-charm {
    position: relative;
    background:
        radial-gradient(circle at 14% 18%, rgba(212, 175, 55, 0.14), transparent 30rem),
        radial-gradient(circle at 86% 84%, rgba(25, 135, 84, 0.12), transparent 30rem),
        linear-gradient(180deg, var(--surface-color), var(--background-color));
}

.services-charm-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%230F5132' stroke-width='1'%3E%3Cpath d='M45 8 82 45 45 82 8 45Z'/%3E%3Cpath d='M18 18 72 18 72 72 18 72Z'/%3E%3Cpath d='M45 32 58 45 45 58 32 45Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 90px 90px;
    background-position: center;
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 80%);
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 80%);
}

/* Floating golden sparkles */
.services-sparkle {
    position: absolute;
    z-index: 6;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: radial-gradient(circle, #ffffff 0%, rgba(212, 175, 55, 0.95) 45%, transparent 72%);
    box-shadow: 0 0 10px 2px rgba(212, 175, 55, 0.7);
    opacity: 0;
    animation: services-sparkle 4s ease-in-out infinite;
    pointer-events: none;
}

.services-sparkle-1 { top: 14%; inset-inline-start: 10%; animation-delay: 0s; }
.services-sparkle-2 { top: 62%; inset-inline-end: 8%; width: 0.72rem; height: 0.72rem; animation-delay: 1.4s; }
.services-sparkle-3 { bottom: 12%; inset-inline-start: 46%; width: 0.4rem; height: 0.4rem; animation-delay: 2.6s; }

@keyframes services-sparkle {
    0%, 100% { opacity: 0; transform: scale(0.4); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Service cards — framed, glowing and alive on hover */
.service-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease, border-color 0.5s ease;
}

.service-card::before {
    position: absolute;
    top: 0;
    inset-inline: 1.5rem;
    z-index: 2;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--logo-subtitle-color), var(--accent-color), transparent);
    content: "";
    opacity: 0;
    transform: scaleX(0.35);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.service-card::after {
    position: absolute;
    top: -60%;
    inset-inline-start: -40%;
    z-index: 1;
    width: 34%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    content: "";
    transform: rotate(18deg) translateX(-140%);
    transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.service-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

.service-card:hover::after {
    transform: rotate(18deg) translateX(520%);
}

/* Icon orb — soft pulsing golden bloom behind every icon */
.service-orb {
    position: relative;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-orb::before {
    position: absolute;
    inset: -0.7rem;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.55), transparent 70%);
    content: "";
    filter: blur(12px);
    opacity: 0.45;
    animation: service-bloom 4.5s ease-in-out infinite;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.service-card:hover .service-orb {
    transform: translateY(-4px) scale(1.09);
}

.service-card:hover .service-orb::before {
    opacity: 1;
    animation: none;
}

@keyframes service-bloom {
    0%, 100% { opacity: 0.32; transform: scale(0.94); }
    50% { opacity: 0.6; transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .services-sparkle,
    .service-orb::before {
        animation: none;
    }

    .service-card,
    .service-card::after,
    .service-orb {
        transition: none;
    }
}

/* "خدماتنا" badge — golden, glowing and enchanting */
.services-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    overflow: hidden;
    border-radius: 999px;
    padding: 0.55rem 1.5rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.3em;
    color: #ffffff;
    background: linear-gradient(120deg, var(--primary-color) 0%, var(--accent-color) 52%, var(--logo-subtitle-color) 100%);
    box-shadow:
        0 12px 30px rgba(15, 81, 50, 0.3),
        0 0 0 1px rgba(212, 175, 55, 0.5),
        0 0 0 6px rgba(212, 175, 55, 0.1);
    animation: services-badge-glow 4s ease-in-out infinite;
}

.services-badge i {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.9);
    animation: services-badge-twinkle 2.6s ease-in-out infinite;
}

.services-badge i:last-child {
    animation-delay: 1.3s;
}

.services-badge-label {
    position: relative;
    z-index: 1;
}

.services-badge-shine {
    position: absolute;
    top: -60%;
    inset-inline-start: -40%;
    width: 34%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: rotate(18deg) translateX(-160%);
    animation: services-badge-shine 3.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes services-badge-glow {
    0%, 100% { box-shadow: 0 12px 30px rgba(15, 81, 50, 0.3), 0 0 0 1px rgba(212, 175, 55, 0.5), 0 0 0 6px rgba(212, 175, 55, 0.1); }
    50% { box-shadow: 0 16px 40px rgba(15, 81, 50, 0.4), 0 0 0 1px rgba(212, 175, 55, 0.85), 0 0 0 9px rgba(212, 175, 55, 0.16); }
}

@keyframes services-badge-shine {
    0% { transform: rotate(18deg) translateX(-160%); }
    60%, 100% { transform: rotate(18deg) translateX(520%); }
}

@keyframes services-badge-twinkle {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
    .services-badge,
    .services-badge i,
    .services-badge-shine {
        animation: none;
    }
}

/* General Assembly document viewer — premium dossier frame */
.assembly-dossier {
    position: relative;
}

.assembly-dossier-glow {
    position: absolute;
    inset: -0.9rem;
    z-index: 0;
    border-radius: 2.6rem;
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.2), rgba(212, 175, 55, 0.16) 55%, transparent);
    filter: blur(26px);
    pointer-events: none;
}

.assembly-corner {
    position: absolute;
    z-index: 5;
    width: 2.4rem;
    height: 2.4rem;
    border-color: var(--logo-subtitle-color);
    opacity: 0.85;
    pointer-events: none;
}

.assembly-corner-tl {
    top: -0.6rem;
    left: -0.6rem;
    border-top: 2px solid;
    border-left: 2px solid;
    border-top-left-radius: 1rem;
}

.assembly-corner-tr {
    top: -0.6rem;
    right: -0.6rem;
    border-top: 2px solid;
    border-right: 2px solid;
    border-top-right-radius: 1rem;
}

.assembly-corner-bl {
    bottom: -0.6rem;
    left: -0.6rem;
    border-bottom: 2px solid;
    border-left: 2px solid;
    border-bottom-left-radius: 1rem;
}

.assembly-corner-br {
    bottom: -0.6rem;
    right: -0.6rem;
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-bottom-right-radius: 1rem;
}

@media (max-width: 639px) {
    .assembly-corner {
        width: 1.7rem;
        height: 1.7rem;
    }
}

/* Board of Directors — ornamental animated rings around each circular avatar */
.board-avatar-ring-dash {
    border: 1.5px dashed rgba(212, 175, 55, 0.65);
    animation: board-ring-spin 26s linear infinite;
}

.board-avatar-ring-glow {
    background: radial-gradient(circle, rgba(212, 175, 55, 0.28), transparent 68%);
    filter: blur(10px);
    animation: board-ring-pulse 4.5s ease-in-out infinite;
}

.board-avatar-ring-spin {
    border: 3px solid transparent;
    border-top-color: var(--accent-color);
    border-inline-end-color: var(--logo-subtitle-color);
    animation: board-ring-spin-rev 12s linear infinite;
}

.group:hover .board-avatar-ring-dash {
    border-color: rgba(212, 175, 55, 1);
    animation-duration: 9s;
}

.group:hover .board-avatar-ring-spin {
    animation-duration: 5s;
}

@keyframes board-ring-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes board-ring-spin-rev {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes board-ring-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.96); }
    50% { opacity: 0.85; transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .board-avatar-ring-dash,
    .board-avatar-ring-glow,
    .board-avatar-ring-spin {
        animation: none;
    }
}

/* Assembly document viewer — hide the embedded PDF toolbar (print / download icons) */
.assembly-viewer {
    position: relative;
    overflow: hidden;
    height: clamp(240px, 34vh, 360px);
}

/* The embedded PDF viewer paints its own toolbar (print / download / menu icons)
   which cannot be styled away, so the frame is shifted up past the viewer's top
   edge and clipped — the toolbar strip disappears while the page stays readable. */
.assembly-viewer iframe {
    display: block;
    width: 100%;
    height: calc(100% + 3.6rem);
    margin-top: -3.6rem;
    border: 0;
}

@media (max-width: 639px) {
    .assembly-viewer {
        height: clamp(220px, 44vh, 320px);
    }

    .assembly-viewer iframe {
        height: calc(100% + 3.2rem);
        margin-top: -3.2rem;
    }
}

/* Disclosure lens — a moving dashed golden frame that traces the image outline */
.disclosure-lens {
    position: relative;
    width: 100%;
    max-width: 225px;
    isolation: isolate;
}

.disclosure-lens::before {
    position: absolute;
    inset: -1.1rem;
    z-index: -1;
    border-radius: 50% 50% 2.6rem 2.6rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.42), rgba(25, 135, 84, 0.32) 58%, transparent);
    filter: blur(18px);
    content: "";
    pointer-events: none;
}

/* Dashed frame that hugs the image and glides continuously like marching ants */
.disclosure-dashed-frame {
    position: absolute;
    inset: -0.9rem;
    z-index: 7;
    pointer-events: none;
}

.disclosure-dashed-path {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 14 14;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 6px rgba(15, 81, 50, 0.55));
    animation: disclosure-dash-march 2.6s linear infinite;
}

@keyframes disclosure-dash-march {
    to { stroke-dashoffset: -28; }
}

@media (prefers-reduced-motion: reduce) {
    .disclosure-dashed-path {
        animation: none;
    }
}

/* Satisfaction results — modern metric cards with circular gauges */
.satisfaction-card {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease, border-color 0.5s ease;
}

.satisfaction-card:hover {
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow: 0 26px 70px rgba(15, 81, 50, 0.15), 0 0 0 1px rgba(212, 175, 55, 0.2);
    transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
    .satisfaction-card {
        transition: none;
    }
}

/* Satisfaction feedback — decorative icon frames for the decisions list */
.decision-icon {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    height: 3.1rem;
    width: 3.1rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    color: #ffffff;
    font-size: 1.15rem;
    box-shadow: var(--shadow-button);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

/* Rotating dashed golden ring tracing a circle around the icon frame */
.decision-icon::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4.2rem;
    height: 4.2rem;
    margin: -2.1rem 0 0 -2.1rem;
    border: 1.5px dashed var(--logo-subtitle-color);
    border-radius: 999px;
    content: "";
    opacity: 0.75;
    pointer-events: none;
    animation: decision-ring-spin 22s linear infinite;
}

/* Soft golden bloom breathing behind the frame */
.decision-icon::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 4.6rem;
    height: 4.6rem;
    margin: -2.3rem 0 0 -2.3rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.45), transparent 70%);
    content: "";
    filter: blur(10px);
    opacity: 0.45;
    pointer-events: none;
    animation: decision-icon-pulse 4.5s ease-in-out infinite;
    transition: opacity 0.4s ease;
}

/* A tiny gold gem perched on the frame for an ornamental touch */
.decision-icon i {
    position: relative;
    z-index: 2;
}

.decision-item:hover .decision-icon {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 14px 34px rgba(15, 81, 50, 0.42);
}

.decision-item:hover .decision-icon::before {
    opacity: 1;
    animation: none;
}

.decision-item:hover .decision-icon::after {
    animation-duration: 7s;
}

@keyframes decision-ring-spin {
    to { transform: rotate(360deg); }
}

@keyframes decision-icon-pulse {
    0%, 100% { opacity: 0.32; transform: scale(0.94); }
    50% { opacity: 0.68; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .decision-icon,
    .decision-icon::before,
    .decision-icon::after {
        animation: none;
        transition: none;
    }
}

/* Members satisfaction survey — dark, elegant surface */
.satisfaction-dark {
    background:
        radial-gradient(circle at 14% 8%, rgba(212, 175, 55, 0.12), transparent 28rem),
        radial-gradient(circle at 88% 82%, rgba(25, 135, 84, 0.22), transparent 30rem),
        linear-gradient(160deg, #10583a 0%, #0a3a24 50%, #05170f 100%);
}

.satisfaction-dark .form-status.success {
    color: #8fe3ad;
}

.satisfaction-dark .form-status.error {
    color: #ff9f9f;
}

/* Mobile nav — collapsible groups with a rotating toggle arrow */
.mobile-group.is-open .mobile-group-toggle i {
    transform: rotate(180deg);
}

/* Policies page — read-only PDF viewer frame.
   The embedded PDF viewer paints its own toolbar (print / download / menu icons)
   which cannot be styled away, so the frame is shifted up past the viewer's top
   edge and clipped — the toolbar strip disappears while the page stays readable. */
.policy-viewer-frame {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.policy-viewer-frame iframe {
    display: block;
    width: 100%;
    height: calc(100% + 3.6rem);
    margin-top: -3.6rem;
    border: 0;
}

/* Admin upload page — drag-and-drop highlight on the drop zone */
.policy-drop.is-dragover {
    border-color: var(--accent-color);
    background: var(--sage-soft);
}

.report-drop.is-dragover {
    border-color: var(--accent-color);
    background: var(--sage-soft);
}

/* Admin upload page — indeterminate progress bar shown while a large PDF uploads */
.policy-progress-bar {
    animation: policy-progress-slide 1.25s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes policy-progress-slide {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(330%); }
}

@media (prefers-reduced-motion: reduce) {
    .policy-progress-bar {
        animation-duration: 2.6s;
    }
}

/* Real-estate page — modern geometric design system */
.re-section {
    position: relative;
    background:
        radial-gradient(circle at 12% 14%, rgba(212, 175, 55, 0.14), transparent 30rem),
        radial-gradient(circle at 88% 82%, rgba(25, 135, 84, 0.12), transparent 30rem),
        linear-gradient(180deg, var(--background-color), var(--surface-color));
}

.re-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%230F5132' stroke-width='1'%3E%3Cpath d='M30 0 60 15 60 45 30 60 0 45 0 15Z'/%3E%3Cpath d='M30 15 45 22.5 45 37.5 30 45 15 37.5 15 22.5Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 60px 60px;
    background-position: center;
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 82%);
    mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 82%);
}

/* Floating geometric ornaments */
.re-geo {
    position: absolute;
    z-index: 0;
    border: 1.5px solid rgba(212, 175, 55, 0.5);
    pointer-events: none;
}

.re-geo-1 {
    top: 7%;
    inset-inline-start: 4%;
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    transform: rotate(45deg);
    animation: re-float 9s ease-in-out infinite;
}

.re-geo-2 {
    bottom: 9%;
    inset-inline-end: 6%;
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 999px;
    border-style: dashed;
    animation: re-float 11s ease-in-out infinite reverse;
}

@keyframes re-float {
    0%, 100% { transform: translateY(0) rotate(45deg); }
    50% { transform: translateY(-14px) rotate(45deg); }
}

/* Service cards — modern, framed and alive on hover */
.re-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 1.6rem;
    background: linear-gradient(160deg, #ffffff 0%, var(--surface-color) 100%);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease, border-color 0.5s ease;
}

.re-card::before {
    position: absolute;
    top: 0;
    inset-inline: 1.5rem;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--logo-subtitle-color), var(--accent-color), transparent);
    content: "";
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.re-card:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow: 0 26px 60px rgba(15, 81, 50, 0.16), 0 0 0 1px rgba(212, 175, 55, 0.18);
}

.re-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

/* Amazing icon frames — gradient tile with rotating gold ring + breathing bloom */
.re-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    height: 3.5rem;
    width: 3.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 1.15rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    color: #ffffff;
    font-size: 1.35rem;
    box-shadow: 0 14px 32px rgba(15, 81, 50, 0.28);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

.re-icon::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4.7rem;
    height: 4.7rem;
    margin: -2.35rem 0 0 -2.35rem;
    border: 1.5px dashed var(--logo-subtitle-color);
    border-radius: 999px;
    content: "";
    opacity: 0.75;
    pointer-events: none;
    animation: re-ring-spin 24s linear infinite;
}

.re-icon::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 5rem;
    height: 5rem;
    margin: -2.5rem 0 0 -2.5rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.5), transparent 70%);
    content: "";
    filter: blur(10px);
    opacity: 0.4;
    pointer-events: none;
    animation: re-bloom 5s ease-in-out infinite;
    transition: opacity 0.45s ease;
}

.re-card:hover .re-icon {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 18px 40px rgba(15, 81, 50, 0.4);
}

.re-card:hover .re-icon::after {
    opacity: 1;
    animation: none;
}

.re-card:hover .re-icon::before {
    animation-duration: 8s;
}

@keyframes re-ring-spin {
    to { transform: rotate(360deg); }
}

@keyframes re-bloom {
    0%, 100% { opacity: 0.32; transform: scale(0.94); }
    50% { opacity: 0.66; transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .re-geo-1,
    .re-geo-2,
    .re-icon::before,
    .re-icon::after {
        animation: none;
    }

    .re-card,
    .re-icon {
        transition: none;
    }
}

/* Creative empowerment — an inspired, glowing frame around the hero image */
.creative-frame {
    position: relative;
    isolation: isolate;
}

.creative-frame-glow {
    position: absolute;
    inset: -1.4rem;
    z-index: -1;
    border-radius: 58% 42% 47% 53% / 53% 47% 55% 45%;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.42), rgba(25, 135, 84, 0.32) 58%, transparent);
    filter: blur(26px);
    opacity: 0.6;
    pointer-events: none;
    animation: creative-glow-pulse 6s ease-in-out infinite;
}

.creative-frame-ring {
    position: absolute;
    inset: -0.7rem;
    z-index: 2;
    border: 2px dashed var(--logo-subtitle-color);
    border-radius: 58% 42% 47% 53% / 53% 47% 55% 45%;
    opacity: 0.75;
    pointer-events: none;
    animation: creative-ring-morph 12s ease-in-out infinite alternate;
}

@keyframes creative-glow-pulse {
    0%, 100% { opacity: 0.5; transform: scale(0.98); }
    50% { opacity: 0.92; transform: scale(1.03); }
}

@keyframes creative-ring-morph {
    0% { border-radius: 58% 42% 47% 53% / 53% 47% 55% 45%; }
    50% { border-radius: 45% 55% 60% 40% / 42% 52% 48% 58%; }
    100% { border-radius: 52% 48% 43% 57% / 57% 43% 52% 48%; }
}

.creative-frame-sparkle {
    position: absolute;
    z-index: 4;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: radial-gradient(circle, #ffffff 0%, rgba(212, 175, 55, 0.95) 45%, transparent 72%);
    box-shadow: 0 0 10px 2px rgba(212, 175, 55, 0.7);
    opacity: 0;
    pointer-events: none;
    animation: creative-sparkle 3.8s ease-in-out infinite;
}

.creative-sparkle-1 { top: 14%; inset-inline-start: 16%; animation-delay: 0s; }
.creative-sparkle-2 { top: 60%; inset-inline-end: 12%; width: 0.85rem; height: 0.85rem; animation-delay: 1.3s; }
.creative-sparkle-3 { bottom: 16%; inset-inline-start: 34%; width: 0.42rem; height: 0.42rem; animation-delay: 2.4s; }

@keyframes creative-sparkle {
    0%, 100% { opacity: 0; transform: scale(0.4); }
    50% { opacity: 1; transform: scale(1.2); }
}

.creative-frame-badge {
    position: absolute;
    z-index: 6;
    inset-inline-start: 1.5rem;
    bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 999px;
    padding: 0.55rem 1.15rem;
    background: linear-gradient(120deg, var(--primary-color) 0%, var(--accent-color) 55%, var(--logo-subtitle-color) 100%);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(15, 81, 50, 0.35), 0 0 0 1px rgba(212, 175, 55, 0.5);
}

.creative-frame-badge i {
    color: var(--logo-subtitle-color);
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.9);
}

@media (prefers-reduced-motion: reduce) {
    .creative-frame-glow,
    .creative-frame-ring,
    .creative-frame-sparkle {
        animation: none;
    }
}

/* Initiatives grid — distinctive, ornamental icon frames (display only, no interaction) */
.initiative-card {
    position: relative;
}

.initiative-card::before {
    position: absolute;
    top: 0;
    inset-inline: 2.5rem;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--logo-subtitle-color), var(--accent-color), transparent);
    content: "";
    opacity: 0.55;
    pointer-events: none;
}

.initiative-ico {
    position: relative;
    z-index: 1;
    display: inline-flex;
    height: 4.6rem;
    width: 4.6rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.35rem;
    border-radius: 1.3rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 62%, var(--logo-subtitle-color) 100%);
    color: #ffffff;
    font-size: 1.7rem;
    box-shadow: 0 14px 32px rgba(15, 81, 50, 0.3), 0 0 0 6px rgba(212, 175, 55, 0.1);
    pointer-events: none;
}

.initiative-ico::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5.9rem;
    height: 5.9rem;
    margin: -2.95rem 0 0 -2.95rem;
    border: 1.5px dashed var(--logo-subtitle-color);
    border-radius: 999px;
    content: "";
    opacity: 0.7;
    pointer-events: none;
    animation: initiative-ring-spin 22s linear infinite;
}

.initiative-ico::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 6.2rem;
    height: 6.2rem;
    margin: -3.1rem 0 0 -3.1rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.5), transparent 70%);
    content: "";
    filter: blur(10px);
    opacity: 0.45;
    pointer-events: none;
    animation: initiative-bloom 5s ease-in-out infinite;
}

.initiative-ico i {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 2px 6px rgba(15, 81, 50, 0.35));
}

@keyframes initiative-ring-spin {
    to { transform: rotate(360deg); }
}

@keyframes initiative-bloom {
    0%, 100% { opacity: 0.3; transform: scale(0.94); }
    50% { opacity: 0.68; transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
    .initiative-ico::before,
    .initiative-ico::after {
        animation: none;
    }
}