/*
Theme Name: Stefaniya Pushkar
Description: Theme for Stefaniya Pushkar
Author: Komanda
Version: 1.0
Text Domain: theme
*/

:root {
    --head-family: "Instrument Serif", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
    --font: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
    --bg: #fff;
    --grey: #737373;
    --muted: #5a6478;
    --bg1: linear-gradient(rgb(254, 250, 248) 0%, rgb(237, 242, 250) 100%);
    --card-radius: 20px;
    --container-max: 1280px;
    --heading-font-size: 90px;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*scroll-behavior: smooth;*/
    line-height: 1.7;
    font-size: 16px;
    color: #0a0a0a;
}

.text-center {
    text-align: center;
}

.pt20 {
    padding-top: 20px;
}

.mt50 {
    margin-top: 50px;
}

.m40 {
    margin: 40px;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

img {
    display: block;
    max-width: 100%;
}

/* Page layout */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg);
}

.page > .wrap {
    flex: 1;
}

.wrap {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0 20px;
}

/* Header navigation */
header.nav {
    position: fixed;
    left: 0;
    top: 0;
    /*background: #fff;*/
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px;
}

header.nav.scrolled {
    top: 0;
    background: #fff;
    backdrop-filter: blur(20px);
}

header.nav.scrolled #cssmenu ul a, header.nav.scrolled .brand {
    color: #000;
}

.nav-column {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px 7px;
    max-width: var(--container-max);
    margin: 0 auto;
    position: relative;
}

.brand {
    font-weight: 400;
    font-size: 20px;
    order: 1;
    z-index: 1002;
    color: #fff;
}

.nav-menu {
    order: 2;
}

.mobile-menu-toggle {
    order: 4;
    z-index: 1002;
}

/* Mobile menu overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px) {
    #cssmenu ul a,
    header.nav.scrolled .brand {
        color: #000;
    }
}

/**/

/* ================================
   POPUP MODAL STYLES
=============================== */
.popup-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.popup-modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.popup-modal[aria-hidden="false"] .popup-overlay {
    opacity: 1;
}

.popup-content {
    position: relative;
    background: #1a1a1a;
    border-radius: 20px;
    padding: 0;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.popup-modal[aria-hidden="false"] .popup-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgb(0 0 0 / 10%);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.popup-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.wpcf7-response-output {
    display: none;
}

/* Body scroll lock when popup is open */
body.popup-open {
    overflow: hidden;
}

/* ================================
   HERO SECTION (video background)
================================ */
.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* video container & media */
.hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    background: #000;
}

.hero__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* optional overlay to improve contrast with content */
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.55) 100%);
    z-index: 1;
    pointer-events: none;
}

/* content centered above video */
.hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 60px 20px;
    max-width: 1100px;
    width: 100%;
}

/* Heading styles */
.hero__title {
    font-family: var(--head-family);
    font-size: clamp(41px, 6vw, var(--heading-font-size));
    line-height: 1.05;
    margin: 0 0 18px;
    color: #fff;
    text-shadow: 0 6px 20px rgba(0,0,0,0.6);
    font-weight: 400;
}

.hero__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(16px, 2.2vw, 24px);
    max-width: 42rem;
    margin: 0 auto;
}

/* Scroll arrow */
.hero__scroll {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 36px;
    z-index: 3;
    display: inline-block;
    width: 34px;
    height: 34px;
    text-decoration: none;
    opacity: 0.95;
}

.hero__arrow {
    display: block;
    width: 14px;
    height: 14px;
    margin: 0 auto;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    box-sizing: border-box;
    transition: transform 0.3s ease, opacity 0.3s ease;
    animation: hero-arrow-bob 1.6s ease-in-out infinite;
    will-change: transform;
}

a.hero__scroll:hover {
    transform: translateX(-50%);
}

/* subtle hover for desktop */
.hero__scroll:hover .hero__arrow {
    opacity: 1;
    transform: translateY(-2px) rotate(-45deg);
}

/* Arrow animation: move up and down by 5px (total translation 5px) */
@keyframes hero-arrow-bob {
    0% { transform: translateY(0px) rotate(-45deg); }
    50% { transform: translateY(-5px) rotate(-45deg); }
    100% { transform: translateY(0px) rotate(-45deg); }
}

/* ensure header is above the hero video */
header.nav {
    position: fixed;
    z-index: 1001;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .hero__title {
        font-size: clamp(28px, 8vw, 42px);
    }
    .hero__subtitle {
        font-size: 16px;
    }
}

/* ================================
   FOOTER
   ================================ */
.site-footer {
    background: #0f0f0f;
    color: #d4d4d4;
    padding: 60px 0 30px;
    border-top: 1px solid rgba(255,255,255,0.03);
    font-size: 16px;
}
.site-footer .wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}
.footer-col {
    flex: 1 1 0;
    min-width: 220px;
}
.footer-title {
    font-size: 20px;
    color: #ffffff;
    margin: 0 0 12px;
    font-weight: 400;
}
.footer-about-text {
    color: rgba(255,255,255,0.75);
    max-width: 460px;
    line-height: 1.8;
    margin: 0;
}

/* Contact list */
.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.contact-icon img {
    width: 20px;
    height: 20px;
    display: block;
}
.contact-link, .contact-label {
    color: rgba(255,255,255,0.9);
    line-height: 1.4;
}

/* Follow list */
.footer-follow-list {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 6px;
}
.follow-item {
    display: inline-flex;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #2f2e2f;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease;
    box-shadow: 0 2px 0 rgba(0,0,0,0.2) inset;
}
span.follow-icon.inline-svg {
    display: flex;
}

.follow-item:hover {
    background: oklab(0.999994 0.0000455678 0.0000200868 / 0.2)
}
.follow-icon img {
    width: 18px;
    height: 18px;
    display: block;
    /* если нужно инвертировать цвет SVG, используйте filter. Обычно для чистых SVG это не требуется */
}

/* Divider and bottom */
.footer-divider {
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin: 30px 0;
}
.footer-bottom {
    padding: 18px 20px 40px;
    color: rgba(255,255,255,0.6);
    text-align: center;
}

span.contact-icon.inline-svg {
    float: left;
    margin-right: 10px;
}

/* Small screens */
@media (max-width: 768px) {
    .footer-inner.wrap {
        flex-direction: column;
        gap: 28px;
        align-items: stretch;
    }
    .footer-col {
        min-width: unset;
    }
    .footer-about-text {
        max-width: 100%;
    }
    .footer-follow-list {
        justify-content: flex-start;
    }
}

/* ================================
   Instagram / Follow Section
   ================================ */
.instagram-section {
    padding: 120px 0px;
}

.instagram-header-inner {
    margin: 0 auto 28px;
}

/* Header row: logo + title on single line */
.instagram-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.instagram-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111;
    font-size: 20px;
    margin-bottom: 0;
    margin-right: 12px;
}

.instagram-title {
    font-family: var(--font);
    font-size: clamp(20px, 4.5vw, 48px);
    margin: 8px 0 8px;
    color: #111;
    font-weight: 400;
}

.instagram-subtitle {
    margin: 0 0 14px;
    font-size: 18px;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.instagram-cta-wrap {
    margin-top: 10px;
}

.instagram-cta {
    display: inline-block;
    background: #111;
    color: #fff;
    padding: 8px 16px;
    border-radius: 10px;
    text-decoration: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.instagram-cta:hover,
.instagram-cta:focus {
    opacity: 0.8;
}

/* Grid */
.instagram-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    padding: 48px 0 0;
    margin: 0;
}

/* Item */
.instagram-item {
    border-radius: var(--card-radius);
    overflow: hidden;
    position: relative;
}

.instagram-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* Thumb */
.instagram-thumb {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    background: #f2f2f2;
}

.instagram-thumb img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.45s cubic-bezier(.2,.9,.2,1);
    will-change: transform;
}

/* overlay with icon (hidden by default) */
.instagram-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.24) 100%);
}

/* make overlay icon accessible on focus too */
.instagram-item:focus .instagram-overlay,
.instagram-link:focus .instagram-overlay,
.instagram-item:hover .instagram-overlay,
.instagram-link:hover .instagram-overlay {
    opacity: 1;
}

/* scale image on hover/focus */
.instagram-item:focus img,
.instagram-link:focus img,
.instagram-item:hover img,
.instagram-link:hover img {
    transform: translate(-50%, -50%) scale(1.06);
}

/* center the svg icon and give it a subtle backdrop */
.instagram-overlay svg {
    width: 48px;
    height: 48px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    stroke: #fff;
}

/* Adjust grid on medium screens */
@media (max-width: 992px) {
    .instagram-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 480px) {
    .instagram-section {
        padding: 36px 14px;
    }
    .instagram-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .instagram-title {
        font-size: 26px;
    }

    /* Stack logo + title on small screens */
    .instagram-header-row {
        flex-direction: column;
        gap: 8px;
    }
    .instagram-logo {
        margin-right: 0;
        margin-bottom: 8px;
    }
}

/* ================================
   SUPPORT / GOALS SECTION
   ================================ */
/* Background uses theme variable --bg1 */
.support-section {
    padding: 88px 0 30px;
    background: var(--bg1);
}

/* Support — Contact split (form left, info right) */
.support-contact .support-wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* Two-column layout: form and info */
.support-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
    margin-top: 24px;
    align-items: stretch;
}

/* Form column */
.support-contact-form {
    background: var(--bg);
    border-radius: var(--card-radius);
    padding: 14px 24px 2px;
    border: 1px solid rgba(0, 0, 0, 0.04);
        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px;
}

/* Titles inside contact block */
.contact-title,
.info-title {
    font-size: 24px;
    margin: 0 0 12px;
    font-weight: 400;
    color: #0a0a0a;
    display: flex;
    align-items: center;
}

.contact-title svg {
    margin-right: 10px;
}

.wpcf7 label {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--grey);
    font-size: 14px;
}

/* CF7 output wrapper adjust — keep default markup but make inputs look consistent */
.support-contact-form .wpcf7-form input[type="text"],
.support-contact-form .wpcf7-form input[type="email"],
.support-contact-form .wpcf7-form input[type="tel"],
.support-contact-form .wpcf7-form input[type="number"],
.support-contact-form .wpcf7-form textarea,
.support-contact-form .wpcf7-form select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.06);
    background: #fff;
    font-size: 15px;
    color: rgba(10,10,10,0.9);
    margin-bottom: 12px;
    box-shadow: rgba(0,0,0,0.02) 0 1px 3px 0px;
    resize: vertical;
    min-height: 44px;
}

.support-contact-form .wpcf7-form textarea {
    font-size: var(--font-size-base);
}

/* Submit button */
.support-contact-form .wpcf7-form input[type="submit"],
.support-contact-form .wpcf7-form button[type="submit"] {
    display: inline-block;
    background: #0a0a0a;
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    font-size: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    width: 100%;
}

span.wpcf7-spinner {
    position: absolute;
}

/* Info column */
.support-contact-info {
    background: var(--bg);
    border-radius: var(--card-radius);
    padding: 10px 35px;
    border: 1px solid rgba(0,0,0,0.04);
    color: rgba(10,10,10,0.8);
    line-height: 1.7;
}

.info-text {
    margin-bottom: 14px;
    font-size: 26px;
}

.info-text ul {
    font-weight: normal;
    font-size: 17px;
    line-height: 2;
}

.info-text ul li::marker {
    font-size: 24px;
}

/* support points list */
.support-points {
    list-style: disc;
    padding-left: 1.2rem;
    margin: 8px 0 0;
}
.support-points li {
    margin-bottom: 8px;
    color: rgba(10,10,10,0.7);
    font-size: 16px;
}

/* Responsive: stack on mobile */
@media (max-width: 680px) {
    .contact-quote {
        padding: 0!important;
    }
    .support-contact {
        padding: 0 12px 0;
    }
    .support-contact-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .support-contact .support-wrap { padding: 0 12px; }
    .contact-title,
    .info-title {
        font-size: 22px;
    }
    .support-contact-form,
    .support-contact-info {
        padding: 18px;
    }
    .support-points { padding-left: 1rem; }
}

/* Small phones */
@media (max-width: 480px) {
    .support-contact-form .wpcf7-form input[type="submit"],
    .support-contact-form .wpcf7-form button[type="submit"] {
        width: 100%;
    }
    .contact-title { font-size: 20px; }
}

div#altEmail_container {
    display: none;
}

.contact-quote {
    border-radius: var(--card-radius);
    padding: 0 36px;
    color: #404040;
    font-style: italic;
    font-size: 30px;
    line-height: 1.7;
    text-align: center;
    font-family: var(--head-family);
}

p.h15 {
    font-size: 22px;
    text-align: justify;
}

.support-wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.support-header {
    max-width: 900px;
    margin: 0 auto 20px;
}
.support-title {
    font-family: var(--head-family);
    font-size: clamp(28px, 6vw, 72px);
    margin: 0 0 12px;
    font-weight: 400;
}
.support-subtitle {
    margin: 0 auto;
    max-width: 64rem;
    color: rgba(10,10,10,0.7);
    font-size: clamp(14px, 2.4vw, 18px);
    line-height: 1.7;
}

/* Grid of cards */
.support-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 34px;
}

/* Individual card */
.support-card {
    background: var(--bg);
    border-radius: var(--card-radius);
    padding: 26px;
    border: 1px solid rgba(0,0,0,0.04);
    transition: box-shadow 0.28s ease, transform 0.28s ease;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
    will-change: transform, box-shadow;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Title inside card */
.support-card .card-title {
    font-family: var(--head-family);
    font-size: 30px;
    margin: 0 0 8px;
    font-weight: 400;
}

/* Body text */
.support-card .card-body {
    color: rgba(10,10,10,0.65);
    line-height: 1.6;
    font-size: 18px;
}

/* Hover / focus effect: subtle lift + layered shadow as requested */
.support-card:hover,
.support-card:focus-within,
.support-card:focus {
    box-shadow:
        rgba(0, 0, 0, 0) 0px 0px 0px 0px,
        rgba(0, 0, 0, 0) 0px 0px 0px 0px,
        rgba(0, 0, 0, 0) 0px 0px 0px 0px,
        rgba(0, 0, 0, 0) 0px 0px 0px 0px,
        rgba(0, 0, 0, 0.1) 0px 20px 25px -5px;
}

/* Quote block under cards */
.support-quote {
    margin: 48px auto 0;
    max-width: 900px;
    background: var(--bg);
    border-radius: var(--card-radius);
    padding: 28px 36px;
    border: 1px solid rgba(0,0,0,0.04);
    color: #404040;
    font-style: italic;
    font-size: 30px;
    line-height: 1.7;
    text-align: center;
    font-family: var(--head-family);
}

/* Quote author */
.quote-author {
    display: block;
    margin-top: 14px;
    font-style: normal;
    font-size: 20px;
    color: rgba(10, 10, 10, 0.6);
    font-family: var(--font);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .support-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .support-wrap {
        padding: 0 18px;
    }
}

@media (max-width: 680px) {
    .support-section {
        padding: 48px 0;
    }
    .support-grid {
        grid-template-columns: 1fr;
    }
    .support-title {
        font-size: 48px;
        line-height: 1;
    }
    .support-subtitle {
        font-size: 18px;
        padding: 0 6px;
    }
    .support-card {
        padding: 18px;
    }
    .support-quote {
        padding: 20px;
        margin-top: 28px;
    }
}
/* About section styles (added for ACF about_section) */
.about-header {
    max-width: 670px;
    margin: 0px auto 90px;
}

.about-wrap {
  padding: 90px 20px;
}

.about-header .about-title {
  font-size: 32px;
  margin: 0 0 8px;
  font-weight: 600;
}

.about-subtitle {
  color: #6b6b6b;
  max-width: 820px;
  margin: 0 auto 28px;
  font-size: 14px;
}

/* Two-column layout: left = media, right = content */
.about-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(.25rem * 24);
    align-items: start;
}

.about__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  object-fit: cover;
}

/* Optional gallery under main image */
.about-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 15px;
}

.about-thumb {
  overflow: hidden;
  border-radius: 8px;
}

.about__thumb {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Content column */
.about-content {
    color: #404040;
    line-height: 1.75;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

p.text-lg {
    margin: 0px;
    font-size: 18px;
}

/* Responsive: switch to single column on smaller screens */
@media (max-width: 900px) {
    .about-header {
        margin: 0px auto 30px;   
    }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  p.text-lg {
    margin: 12px 0;
  }

  .about-media {
    max-width: 100%;
    margin: 0 auto 20px;
  }

  .about-gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-header .about-title {
    font-size: 26px;
  }
}

/* Mobile optimizations */
@media (max-width: 480px) {
  .about-wrap {
    padding: 40px 16px;
  }

  .about-header .about-title {
    font-size: 22px;
  }

  .about-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .about-content {
    font-size: 15px;
    line-height: 1.6;
  }
}

/* ================================
   GOALS / MISSION SECTION
   ================================ */
.goals-section {
    padding: 88px 0;
    background: var(--bg1);
}
.goals-wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}
.goals-subtitle,
.support-subtitle {
    margin: 0 auto;
    max-width: 64rem;
    color: rgba(10,10,10,0.7);
    font-size: clamp(14px, 2.4vw, 18px);
    line-height: 1.7;
}

/* layout: left = cards, right = image */
.goals-grid {
    display: grid;
    grid-template-columns: 1fr 494px;
    gap: 170px;
    margin-top: 34px;
}

/* cards column */
.goals-cards {
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: space-between;
    margin: 0 30px;
}
.goal-card {
    background: var(--bg);
    border-radius: var(--card-radius);
    padding: 20px 30px;
    border: 1px solid rgba(0,0,0,0.04);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -5px;
}
.card-year {
    font-size: 14px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}
.goal-card .card-title {
    font-family: var(--head-family);
    font-size: 36px;
    margin: 0;
    font-weight: 400;
}
.card-body {
    color: rgba(10,10,10,0.65);
    line-height: 1.6;
    font-size: 18px;
}

/* hover / focus lift */
.goal-card:hover,
.goal-card:focus-within,
.goal-card:focus {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px;
}

/* media / image column */
.goals-media {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
.goals__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    object-fit: cover;
}
.goals-image-caption {
    font-size: 14px;
    color: rgba(10,10,10,0.6);
    margin-top: 8px;
    text-align: center;
    max-width: 360px;
}

/* responsive adjustments */
@media (max-width: 1100px) {
    .goals-grid {
        grid-template-columns: 1fr 420px;
    }
}

@media (max-width: 900px) {
    .goals-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    /* show image above cards on narrower screens to match mobile design */
    .goals-media {
        order: -1;
        width: 100%;
    }
    .goals-wrap {
        padding: 0 18px;
    }
    .goal-card {
        padding: 18px;
    }
    .goals-image-caption {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .goals-section {
        padding: 48px 12px;
    }
    .goal-card .card-title {
        font-size: 22px;
    }
    .card-body {
        font-size: 15px;
    }
}

/* ================================
   ACHIEVEMENTS SECTION
   ================================ */
.achievements-section {
    padding: 88px 0 50px;
}
.achievements-wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}
.achievements-header {
    max-width: 900px;
    margin: 0 auto 20px;
    text-align: center;
}
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 34px;
    align-items: stretch;
}
.achievement-card {
    background: var(--bg);
    border-radius: var(--card-radius);
    padding: 36px 26px;
    border: 2px solid rgba(0,0,0,0.04);
    text-align: center;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 170px;
}
.achievement-number {
    font-family: var(--head-family);
    font-size: clamp(34px, 6vw, 93px);
    line-height: 1;
    margin: 0 0 12px;
    color: #0a0a0a;
    font-weight: 400;
}
.achievement-label {
    font-size: 16px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}
.achievement-desc {
    margin-top: 10px;
    color: rgba(10,10,10,0.65);
    font-size: 16px;
    line-height: 1.6;
}

/* subtle lift on hover */
.achievement-card:hover,
.achievement-card:focus-within,
.achievement-card:focus {
    box-shadow: rgba(0,0,0,0.08) 0px 18px 30px -8px;
}

/* media / image block uses existing .goals__img styling; center and constrain width */
.achievements-media .goals__img {
    border-radius: 12px;
    width: 100%;
    max-width: 980px;
    height: auto;
    display: block;
    object-fit: cover;
}

/* quote (similar to support-quote but slightly smaller on mobile) */
.achievements-quote {
    margin: 48px auto 0;
    max-width: 900px;
    background: var(--bg);
    border-radius: var(--card-radius);
    padding: 24px 28px;
    border: 1px solid rgba(0,0,0,0.04);
    color: #404040;
    font-style: italic;
    font-size: 28px;
    line-height: 1.7;
    text-align: center;
    font-family: var(--head-family);
}

/* responsive */
@media (max-width: 992px) {
    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .achievement-number {
        font-size: clamp(32px, 6vw, 56px);
    }
}

@media (max-width: 680px) {
    .achievements-section {
        padding: 48px 0;
    }
    .tournaments-caption {
        font-size: 30px;
        margin-bottom: 20px;
    }
    .achievements-grid {
        grid-template-columns: 1fr;
    }
    .achievements-media {
        /*order: -1;*/
        width: 100%;
        margin-top: 0!important;
    }
    .achievements-quote {
        padding: 18px 16px;
        font-size: 20px;
    }
    .achievement-number {
        font-size: 42px;
    }
    .achievement-card {
        padding: 18px 16px;
    }
}

@media (max-width: 480px) {
    .achievement-number {
        font-size: 34px;
    }
    .achievement-label {
        font-size: 12px;
        letter-spacing: 3px;
    }
    .achievement-desc {
        font-size: 15px;
    }
    .achievements-wrap {
        padding: 0 14px;
    }
}

/* ================================
   ACHIEVEMENTS — BACKGROUND IMAGE + OVERLAY TEXT
   Overrides/extra rules to render the image as a responsive background
   with the quote text anchored to the bottom of the image.
   ================================ */
.achievements-media {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Background container: height determined by content, not fixed aspect ratio */
.achievements-media-bg {
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: rgba(0,0,0,0.06) 0px 10px 30px -8px;
    margin: 0;
    /* height will be determined by .achievements-media-caption content */
    min-height: 0;
}

/* decorative gradient to improve text contrast at the bottom */
.achievements-media-bg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.55) 90%);
    pointer-events: none;
}

/* red overlay above the background image (as in design) */
.achievements-media-bg .achievements-red-overlay {
    position: absolute;
    inset: 0;
    /*background: rgba(204, 36, 54, 0.55); /* red tint */
    background: rgba(0, 0, 0, 0.20);
    mix-blend-mode: normal;
    pointer-events: none;
}

/* Tournaments two-column list placed over the background image */
.tournaments-two-col {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    max-width: 1000px;
}
.tournaments-two-col .tournaments-col {
    flex: 1 1 0;
}
.tournaments-two-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tournaments-caption {
    display: flex;
    font-size: 40px;
    color: #fff;
    align-items: center;
    gap: 18px;
}
/* Clean, white italic list items with simple numeric index that restarts per column */
.tournaments-two-col li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #ffffff;
    margin-bottom: 12px;
    background: transparent;
    padding: 0;
}
.tournaments-two-col li em.tourn-label {
    font-style: italic;
    font-family: var(--head-family);
    color: #ffffff;
    font-size: clamp(20px, 1.6vw, 22px);
    font-weight: bold;
    text-shadow: none;
    display: block;
    margin-bottom: 4px;
    letter-spacing: 2px;
}
.tournaments-two-col svg {
    color: gold;
}
.tourn-icon.tourn-icon-left, .tourn-icon.tourn-icon-right {
    display: flex;
    align-items: center;
}

.tournaments-two-col .tourn-index {
    display: inline-block;
    min-width: 22px;
    text-align: center;
    color: #ffffff;
    font-family: var(--font);
    font-weight: 600;
    opacity: 0.95;
    margin-top: 2px;
}
.tourn-details {
    flex: 1;
}
.tourn-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--font);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
}
.tourn-meta span {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Title inside the achievements caption (left column heading) */
.tournaments-title {
    color: #fff;
    font-family: var(--head-family);
    font-size: clamp(32px, 4.8vw, 56px);
    margin: 0 0 18px;
    font-weight: 400;
}

/* Responsive: stack columns on narrow viewports and reduce padding */
@media (max-width: 900px) {
    .tournaments-caption {
        flex-direction: column;
    }
    .tournaments-two-col { flex-direction: column; gap: 18px; }
    .tournaments-two-col li { font-size: 16px; }
    .tournaments-title { font-size: 32px; }
}

@media (max-width: 480px) {
    .achievements-caption-inner { padding: 12px 12px; }
    .tournaments-two-col li { font-size: 15px; margin-bottom: 10px; }
    .tournaments-title { font-size: 24px; }
}

/* caption area sits inside the background, allowing container to expand with content */
.achievements-media-caption {
    position: relative;
    z-index: 2;
    pointer-events: none;
    padding: 40px 100px;
    box-sizing: border-box;
    font-family: var(--head-family);
}

/* Inner wrapper for the caption text; text is white and large italic */
.achievements-caption-inner {
    width: 100%;
}

.achievements-quote-on-image p {
    margin: 0;
    pointer-events: none;
    color: #404040;
    font-style: italic;
    font-size: 30px;
    line-height: 1.7;
    text-align: center;
    font-family: var(--head-family);
}

/* author on image */
.achievements-quote-on-image .quote-author {
    display: block;
    margin-top: 10px;
    color: rgba(255,255,255,0.9);
    font-style: normal;
    font-size: 16px;
    pointer-events: none;
}

/* fallback: if an <img> is present inside .achievements-media, hide it (we use background) */
.achievements-media img.goals__img {
    display: none !important;
}

/* Responsive tweaks */
@media (max-width: 992px) {
    .achievements-media-caption {
        padding: 10px 4px;
    }
    .achievements-quote-on-image p {
        font-size: clamp(18px, 3.8vw, 26px);
    }
    .achievements-quote-on-image .quote-author {
        font-size: 14px;
    }
}

/* Collapsible / toggle styles for Achievements block */
.achievements-collapsible {
    border-top: 1px solid rgba(0,0,0,0.06);
    padding: 28px 0;
    position: relative;
}
.achievements-toggle {
    width: 100%;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0;
    cursor: pointer;
    font-family: var(--font);
}
.achievements-toggle-icon {
    margin-right: 6px;
    margin-top: 5px;
}
.achievements-toggle-title {
    flex: 1;
    text-align: left;
    font-size: 30px;
}
.achievements-toggle-chevron {
    font-size: 20px;
    color: rgba(0,0,0,0.5);
    transition: transform 220ms ease;
}
.achievements-toggle.is-open .achievements-toggle-chevron,
.achievements-toggle.is-open .achievements-toggle-chevron[aria-hidden="true"],
.achievements-toggle[aria-expanded="true"] .achievements-toggle-chevron {
    transform: rotate(180deg);
}
.achievements-collapsible-body {
    margin-top: 18px;
    opacity: 0;
    max-height: 0;
}
.achievements-collapsible.is-open .achievements-collapsible-body {
    opacity: 1;
}

/* ================================
   CAREER HIGHLIGHTS TABLE STYLES
   ================================ */
.career-highlights-section {
    padding: 30px 0 48px;
}

.career-table-wrap {
    margin-top: 18px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.04);
    background: #fff;
}

.career-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
    table-layout: fixed;
    font-family: var(--font);
    color: rgba(10,10,10,0.85);
}

/* Columns: index, year, event (flexible), location (small), category, result */
.career-table thead th {
    padding: 18px 22px;
    font-weight: 400;
    text-align: left;
    color: rgba(10,10,10,0.6);
    font-size: 14px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.career-table tbody tr {
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.career-table td {
    padding: 20px 22px;
    vertical-align: middle;
    font-size: 16px;
}

.career-idx {
    width: 56px;
    font-size: 15px;
    color: rgba(10,10,10,0.65);
}

.career-year {
    width: 86px;
    color: rgba(10,10,10,0.7);
}

.career-event {
    /* primary column grows */
    width: 100%;
}

.career-event strong {
    display: block;
    font-weight: 400;
    font-size: 16px;
    color: #0a0a0a;
}

.career-location {
    font-size: 13px;
    color: rgba(10,10,10,0.45);
    margin-top: 6px;
}

/* category column */
.career-category {
    width: 140px;
    color: rgba(10,10,10,0.65);
    text-align: left;
}

/* result badge */
.career-result {
    width: 140px;
    text-align: right;
}

.career-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
    color: #fff;
    background: #111;
    border: 1px solid rgba(0,0,0,0.05);
    text-transform: capitalize;
}

/* variant styles */
.career-badge--runner-up {
    background: transparent;
    color: #111;
    border: 1px solid #111;
}

/* hovered row highlight (desktop) */
.career-table tbody tr:hover {
    background: rgba(0,0,0,0.02);
}

/* Small screens: make table scroll horizontally and stack cells visually */
@media (max-width: 900px) {
    .career-table-wrap {
        overflow-x: auto;
    }
    .career-table {
        min-width: 720px;
    }
    .career-table td, .career-table thead th {
        padding: 14px 12px;
        font-size: 15px;
    }
}

/* Toggle styles (chevron rotate when open) */
.achievements-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 12px 0;
    cursor: pointer;
    text-align: left;
}
.achievements-toggle-chevron {
    transition: transform 220ms ease;
}
.achievements-toggle.is-open .achievements-toggle-chevron,
.achievements-toggle.is-open .achievements-toggle-chevron[aria-hidden="true"] {
    transform: rotate(180deg);
}

/*= Investment section*/

/* ================================
   INVESTMENT SECTION
   ================================ */
.investment_section {
    padding: 88px 0;
}
.investment_section .wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Cards grid */
.investment-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 28px;
}

/* Individual card */
.investment-cards .card {
    background: var(--bg);
    border-radius: var(--card-radius);
    padding: 42px 28px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: rgba(0,0,0,0.04) 0px 8px 20px -8px;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
}

/* Keyboard focus accessible style */
.investment-cards .card:focus,
.investment-cards .card:focus-visible {
    outline: 3px solid rgba(0,0,0,0.06);
    outline-offset: 6px;
}

/* Amount & currency */
.investment-cards .amount {
    font-family: var(--head-family);
    font-size: clamp(34px, 6vw, 72px);
    margin: 0;
    line-height: 1;
    font-weight: 400;
    color: #0a0a0a;
}

.investment-cards .currency {
    margin-top: 8px;
    color: var(--muted);
    font-size: 14px;
    letter-spacing: 2px;
}

/* Card title / subtitle */
.investment-cards .card-title {
    font-size: 20px;
    margin: 16px 0 8px;
    font-family: var(--font);
    color: #111;
    font-weight: 400;
}

.investment-cards .card-subtitle {
    margin: 0;
    color: rgba(10,10,10,0.6);
    font-size: 15px;
    line-height: 1.6;
}

/* Hover lift */
.investment-cards .card:hover,
.investment-cards .card:focus-within {
    box-shadow: rgba(0,0,0,0.08) 0px 22px 40px -18px;
}

/* Total investment block */
.total-investment {
    margin-top: 28px;
    background: var(--bg);
    border-radius: calc(var(--card-radius) * 0.9);
    padding: 28px 36px;
    border: 1px solid rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.total-investment .total-label {
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}

.total-investment .total-amount {
    font-family: var(--head-family);
    font-size: clamp(34px, 6vw, 72px);
    margin: 0;
    color: #0a0a0a;
    font-weight: 400;
}

.total-investment .total-currency {
    font-size: 20px;
    margin-left: 8px;
    color: var(--muted);
    font-weight: 400;
}

/* Bottom explanatory text */
.investment_section .bottom-text {
    margin-top: 24px;
    color: rgba(10,10,10,0.65);
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 18px;
    line-height: 1.7;
}

/* Responsive: medium screens */
@media (max-width: 992px) {
    .investment-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .investment-cards .card {
        min-height: 200px;
        padding: 34px 22px;
    }
}

/* Responsive: mobile */
@media (max-width: 680px) {
    .investment_section {
        padding: 48px 12px;
    }
    .investment-cards {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .investment-cards .card {
        padding: 24px 18px;
        min-height: unset;
        text-align: left;
    }
    .investment-cards .amount {
        font-size: 40px;
    }
    .investment-cards .currency {
        margin-top: 6px;
    }
    .investment-cards .card-title {
        font-size: 18px;
        margin-top: 10px;
    }
    .total-investment {
        padding: 22px 18px;
    }
    .total-investment .total-amount {
        font-size: 36px;
    }
    .investment_section .bottom-text {
        font-size: 16px;
        padding: 0 6px;
    }
}

/* Contribute / Ways to Contribute section
   Desktop + mobile styles
*/
.contribute-wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}
.contribute-header {
    max-width: 900px;
    margin: 0 auto 18px;
}
.contribute-grid {
    display: grid;
    /*grid-template-columns: 1fr 400px;*/
    gap: 28px;
    align-items: start;
}

.contribute-title {
    font-family: var(--head-family);
    font-size: 58px;
    margin: 0 0 12px;
    font-weight: 400;
}

/* Cards column: responsive grid of contribution options */
.contribute-cards {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(6, 1fr);
}
.contrib-card {
    background: var(--bg);
    border-radius: var(--card-radius);
    padding: 16px;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: rgba(0,0,0,0.02) 0 6px 12px -6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100px;
}

/* inner wrapper to separate content from footer (keeps spacing consistent like the mockup) */
.contrib-card-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* card footer (button area) pinned to the bottom of the card */
.contrib-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.btn-contribute {
    background: #0a0a0a;
    color: #fff;
    padding: 4px 12px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    width: 140px;
    text-align: center;
    font-size: 13px;
}

/* full-width variant (used inside custom amount card) */
.btn-contribute.full {
    width: 100%;
    padding: 8px;
}

/* button hover / focus */
.btn-contribute:hover,
.btn-contribute:focus {
    opacity: 0.8;
    transition: opacity 180ms ease;
}

/* Custom amount form */
.contrib-custom-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

/* numeric input styling to match site inputs (rounded, light background) */
.contrib-custom-form input[type="number"],
.contrib-custom-form input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.06);
    background: #fff;
    font-size: 15px;
    color: rgba(10,10,10,0.9);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
        rgba(0, 0, 0, 0) 0px 0px 0px 0px,
        rgba(0, 0, 0, 0) 0px 0px 0px 0px,
        rgba(0, 0, 0, 0) 0px 0px 0px 0px,
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px;
    -webkit-appearance: none;
    appearance: none;
}

/* ensure input has sufficient height on mobile */
@media (max-width: 480px) {
    .btn-contribute { width: 140px; padding: 10px 14px; margin: auto;}
    .btn-contribute.full { width: 100%; }
    .contrib-card { padding: 18px; text-align: center;}
    .contrib-custom-form input[type="number"] { padding: 10px 12px; }
}
.contrib-amount {
    font-family: var(--head-family);
    font-size: 28px;
    color: #0a0a0a;
    margin: 0 0 4px;
    line-height: 1;
}
.contrib-card--custom .contrib-card-inner {
    display: flex;
    justify-content: center;
}
button {
    cursor: pointer;
}
label.screen-reader-text {
    font-size: 26px;
    font-family: var(--head-family);
}
article.contrib-card.contrib-card--custom {
    padding: 8px 16px 16px;
}
.contrib-card .card-title {
    margin: 0 0 6px;
    color: var(--grey);
    font-size: 14px;
}
.contrib-card .card-body {
    color: rgba(10,10,10,0.65);
    font-size: 13px;
    line-height: 1.5;
}

/* Payment sidebar */
.contribute-payment {
    background: var(--bg);
    border-radius: calc(var(--card-radius) * 0.9);
    padding: 24px;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
            rgba(0, 0, 0, 0) 0px 0px 0px 0px,
            rgba(0, 0, 0, 0) 0px 0px 0px 0px,
            rgba(0, 0, 0, 0) 0px 0px 0px 0px,
            rgba(0, 0, 0, 0.1) 0px 1px 3px 0px;
}
.payment-title {
    font-family: var(--head-family);
    font-size: 22px;
    margin: 0 0 10px;
}
.payment-section-title {
    padding: 12px 0;
    color: var(--grey);
}
.payment-block {
    padding: 12px;
    border-radius: 12px;
    background: #fafafa;
    border: 1px solid rgba(0,0,0,0.03);
}
.payment-block:first-of-type { margin-top: 0; }
.payment-block .payment-block-title {
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.payment-field {
    font-size: 15px;
    color: rgba(10,10,10,0.75);
}

/* Desktop hover focus */
.contrib-card:hover,
.contrib-card:focus-within {
    transition: transform 220ms ease, box-shadow 220ms ease;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
            rgba(0, 0, 0, 0) 0px 0px 0px 0px,
            rgba(0, 0, 0, 0) 0px 0px 0px 0px,
            rgba(0, 0, 0, 0) 0px 0px 0px 0px,
            rgba(0, 0, 0, 0.1) 0px 1px 3px 0px;
}

/* Responsive: medium screens */
@media (max-width: 1100px) {
    .contribute-grid {
        grid-template-columns: 1fr 415px;
        gap: 28px;
    }
    .contribute-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Contribute below block */
.contribute-below {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
    align-items: stretch;
}

/* Mobile: stack and tighten spacing */
@media (max-width: 680px) {
    .contribute-title {
        font-size: 40px;
    }
    .contribute-section {
        padding: 5px 12px;
    }
    .contribute-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    /* show payment above cards on narrow screens */
    .contribute-payment {
        order: -1;
        margin-bottom: 8px;
        width: 100%;
    }
    .contribute-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .contrib-amount { font-size: 20px; }
    .contribute-header { margin-bottom: 12px; }
    /* Stack contribute-below on mobile */
    .contribute-below {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 30px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .contribute-wrap { padding: 0 14px; }
    .contrib-card { padding: 16px; }
    .payment-block { padding: 10px; }
}

/* Media Gallery styles (desktop + mobile). Implemented to expand item width on hover
   while keeping a constant item height. Images are positioned absolutely and behave
   like background-size: cover; on hover the containing .result grows horizontally. */
.media-gallery-section {
    padding: 30px 0 88px;
    background: transparent;
}
.media-gallery-section .goals-header {
    margin-bottom: 24px;
}

/* Container */
.results {
    display: flex;
    gap: 18px;
    width: 100%;
    max-width: calc(var(--container-max) - 40px);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    align-items: stretch; /* all items same height */
    overflow: visible;
}

/* Frame for each item: fixed height, base flex so items share available width */
.result {
    position: relative;
    flex: 1 1 0;                /* items share row; grow/shrink enabled */
    min-width: 160px;
    height: 400px; /* fixed height; tweak via variable */
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: rgba(0,0,0,0.04) 0 6px 18px -6px;
    transition: flex 320ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms ease;
}

/* On hover/focus make the item grow horizontally (width increases) — height unchanged */
.result:is(:hover, :focus-within) {
    flex: 3 1 0; /* grow to ~3x the width of siblings */
    z-index: 7;
}

/* Make anchor the visible frame */
.result > a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
    color: inherit;
}

/* absolutely positioned image behaves like background-cover */
.result img {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100%;      /* fill frame's height */
    width: auto;       /* maintain aspect ratio */
    transform: translate(-50%, -50%) scaleX(1);
    transform-origin: center center;
    transition: transform 420ms cubic-bezier(.2,.9,.2,1), filter 280ms ease, opacity 280ms ease;
    will-change: transform;
    pointer-events: none;
    object-fit: cover;
}

/* Expand image horizontally a bit for visual emphasis (keeps height same) */
.result:is(:hover, :focus-within) img,
.result:is(:hover, :focus-within) picture img {
    transform: translate(-50%, -50%) scaleX(1.12);
}

/* reuse lerp variables */
:root {
    --lerp-0: 1;
    --lerp-1: 0.5787037;
    --lerp-2: 0.2962963;
    --lerp-3: 0.125;
    --lerp-4: 0.037037;
    --lerp-5: 0.0046296;
    --lerp-6: 0;
}

/* progressive emphasis (keeps same semantics for neighbors) */
.result:has( + .result:is(:hover, :focus-within)),
.result:is(:hover, :focus-within) + .result {
    --active-lerp: var(--lerp-1);
    z-index: 6;
}
.result:has( + .result + .result:is(:hover, :focus-within)),
.result:is(:hover, :focus-within) + .result + .result {
    --active-lerp: var(--lerp-2);
    z-index: 5;
}
.result:has( + .result + .result + .result:is(:hover, :focus-within)),
.result:is(:hover, :focus-within) + .result + .result + .result {
    --active-lerp: var(--lerp-3);
    z-index: 4;
}
.result:has( + .result + .result + .result + .result:is(:hover, :focus-within)),
.result:is(:hover, :focus-within) + .result + .result + .result + .result {
    --active-lerp: var(--lerp-4);
    z-index: 3;
}
.result:has( + .result + .result + .result + .result + .result:is(:hover, :focus-within)),
.result:is(:hover, :focus-within) + .result + .result + .result + .result + .result {
    --active-lerp: var(--lerp-5);
    z-index: 2;
}
.result:has( + .result + .result + .result + .result + .result + .result:is(:hover, :focus-within)),
.result:is(:hover, :focus-within) + .result + .result + .result + .result + .result + .result {
    --active-lerp: var(--lerp-6);
    z-index: 1;
}

.media-gallery {
    height: 400px;
    overflow: hidden;
}

/* Accessibility: visible focus ring on anchors inside items */
.results a:focus-visible {
    outline: 3px solid rgba(0,0,0,0.12);
    outline-offset: 6px;
    border-radius: 8px;
}

/* Mobile: convert to horizontally scrollable list with snap and smaller heights.
   On touch, grow factor is reduced (user expects swipe, not large growth). */
@media (max-width: 680px) {
    .media-gallery-section {
        padding: 48px 12px;
    }
    :root { --mg-item-height: 220px; }
    .results {
        gap: 12px;
        padding: 8px 6px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .result {
        flex: 0 0 76%;
        min-width: 200px;
        height: var(--mg-item-height);
        border-radius: 10px;
        box-shadow: rgba(0,0,0,0.06) 0 6px 18px -8px;
        scroll-snap-align: center;
        transition: transform 520ms ease;
    }
    .result img {
        transition: transform 520ms ease;
    }
    .result:is(:hover, :focus-within) img,
    .result:is(:active, :focus-within) img {
        transform: translate(-50%, -50%) scale(1.06);
    }
    .result:is(:hover, :focus-within) {
        flex: 1 1 76%;
    }
    .media-gallery-section {
        padding: 40px 0;
    }
    .support-title { font-size: 40px; }
    .support-subtitle { font-size: 15px; }
    .media-gallery {
        height: 250px;
    }
}

@media (min-width: 681px) and (max-width: 1100px) {
    :root { --mg-item-height: 260px; }
    .results { gap: 14px; }
    .result { min-width: 180px; }
}

.results {
    align-items: stretch;
}

.results .result {
    min-width: 0;
    flex: 1 1 0;
    transition: flex 520ms cubic-bezier(.2,.9,.2,1), box-shadow 520ms ease;
}

.results .result:is(:hover, :focus-within) {
    flex: 6 1 0;
    z-index: 10;
}

.results .result:not(:is(:hover, :focus-within)) {
    transition: flex 520ms cubic-bezier(.2,.9,.2,1);
}

.results .result a:focus-visible {
    outline-offset: 6px;
}

.results .result img {
    transition: transform 520ms cubic-bezier(.2,.9,.2,1), opacity 580ms ease;
}

.results .result:is(:hover, :focus-within) img {
    transform: translate(-50%, -50%) scale(2.5);
}

/* ================================
   REVEALATOR FADEINUP ANIMATIONS
   ================================ */
.revealator-fadeinup {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}
.revealator-fadeinup.animate__animated {
    opacity: 1;
    transform: translateY(0);
}

/* ================================
   LANGUAGE SWITCHER DROPDOWN
   ================================ */
.lang-switcher {
    order: 3;
    position: relative;
    z-index: 1002;
}

.lang-switcher .lang-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 10px;
}

.lang-switcher .lang-menu > li {
    position: relative;
}

.lang-switcher .lang-menu a {
    display: block;
    padding: 8px 12px;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s ease;
    font-size: 14px;
    white-space: nowrap;
}

header.nav.scrolled .lang-switcher .lang-menu a {
    color: #000;
}

.lang-switcher .lang-menu a:hover,
.lang-switcher .lang-menu a:focus,
.lang-switcher .current-menu-item a {
    background: rgba(255, 255, 255, 0.1);
}

header.nav.scrolled .lang-switcher .lang-menu a:hover,
header.nav.scrolled .lang-switcher .lang-menu a:focus,
header.nav.scrolled .lang-switcher .current-menu-item a {
    background: #f4f4f4;
}

/* Dropdown variant (if you want a dropdown instead of inline) */
.lang-switcher.dropdown .lang-menu {
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    min-width: 120px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.lang-switcher.dropdown:hover .lang-menu,
.lang-switcher.dropdown:focus-within .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-switcher.dropdown .lang-menu a {
    color: #333;
    padding: 10px 16px;
}

.lang-switcher.dropdown .lang-menu a:hover {
    background: #f5f5f5;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .lang-switcher {
        order: 3;
        margin-left: auto;
        margin-right: 10px;
    }
    .lang-switcher .lang-menu {
        gap: 5px;
    }
    .lang-switcher .lang-menu a {
        padding: 6px 10px;
        font-size: 13px;
    }
}