/* =========================================================
   01. ROOT VARIABLES
   ========================================================= */

:root {
    --green:#07572f;
    --green-2:#0b7a43;
    --green-dark:#032817;
    --yellow:#f2db00;
    --yellow-soft:#fff37a;
    --ink:#0c1510;
    --muted:#66736b;
    --cream:#fbfaf0;
    --white:#ffffff;
    --line:rgba(7,87,47,.14);
    --shadow:0 22px 60px rgba(1,27,13,.14);
    --header-h:96px;

}

/* =========================================================
   02. BASE / RESET / TYPOGRAPHY / BUTTONS
   ========================================================= */

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    color:var(--ink);
    background:#fff;
    line-height:1.65;
    overflow-x:hidden
}

a {
    color:inherit;
    text-decoration:none
}

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

.container {
    width:min(1180px,calc(100% - 40px));
    margin-inline:auto
}

.eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--green);
    margin-bottom:14px
}

.eyebrow:before {
    content:"";
    width:34px;
    height:2px;
    background:var(--yellow)
}

.eyebrow.light {
    color:var(--yellow-soft)
}

h1,h2,h3 {
    line-height:1.06;
    margin:0;
    color:var(--green-dark)
}

h1 {
    font-size:clamp(2.65rem,7vw,5.8rem);
    letter-spacing:-.07em
}

h2 {
    font-size:clamp(2rem,4vw,3.55rem);
    letter-spacing:-.055em
}

h3 {
    font-size:1.28rem;
    letter-spacing:-.02em
}

p {
    margin:0;
    color:var(--muted)
}

.btn {
    border:0;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    padding:13px 22px;
    font-weight:850;
    transition:.28s ease;
    white-space:nowrap
}

.btn-primary {
    background:var(--green);
    color:#fff;
    box-shadow:0 14px 30px rgba(7,87,47,.24)
}

.btn-primary:hover {
    background:var(--green-2);
    transform:translateY(-2px)
}

.btn-light {
    background:#fff;
    color:var(--green-dark)
}

.btn-light:hover {
    transform:translateY(-2px);
    box-shadow:0 16px 35px rgba(0,0,0,.16)
}

.btn-ghost {
    background:rgba(255,255,255,.08);
    color:#fff;
    border:1px solid rgba(255,255,255,.24)
}

.btn-outline {
    border:1px solid rgba(7,87,47,.24);
    color:var(--green);
    background:#fff
}

.btn-outline:hover {
    background:var(--cream)
}

/* =========================================================
   03. HEADER / TOPBAR / NAVIGATION / LANGUAGE SELECTOR
   ========================================================= */

.site-header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    transition:.32s ease;
    color:#fff
}

.topbar {
    height:38px;
    font-size:.84rem;
    transition:transform .36s ease,opacity .3s ease,background .3s ease;
    background:rgba(0,0,0,.28);
    border-bottom:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(12px)
}

.site-header.scrolled .topbar {
    background:var(--green-dark);
    border-color:rgba(255,255,255,.08)
}

.topbar.mobile-hide {
    transform:translateY(-110%);
    opacity:0
}

.topbar-inner {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px
}

.topbar-left,.topbar-right {
    display:flex;
    align-items:center;
    gap:15px
}

.topbar-dot {
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--yellow)
}

.topbar a:hover {
    color:var(--yellow)
}

.topbar-socials {
    display:flex;
    gap:8px
}

.topbar-socials a {
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.2)
}

.topbar-socials svg {
    width:17px;
    height:17px;
    fill:currentColor
}

.language-switcher {
    position:relative;
    z-index:1004
}

.language-current {
    height:28px;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.08);
    color:inherit;
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 10px;
    font-weight:800;
    cursor:pointer
}

.language-menu {
    position:absolute;
    right:0;
    top:34px;
    min-width:160px;
    background:#fff;
    color:var(--ink);
    box-shadow:var(--shadow);
    padding:8px;
    display:none
}

.language-menu.open {
    display:block
}

.language-menu button {
    width:100%;
    border:0;
    background:transparent;
    text-align:left;
    padding:9px 10px;
    font-weight:700;
    cursor:pointer
}

.language-menu button:hover {
    background:var(--cream);
    color:var(--green)
}

#google_translate_element,.goog-te-banner-frame,.goog-te-balloon-frame,.skiptranslate {
    position:absolute!important;
    left:-9999px!important;
    opacity:0!important;
    pointer-events:none!important
}

body {
    top:0!important
}

.navbar {
    height:68px;
    transition:.32s ease;
    background:transparent;
    border-bottom:1px solid rgba(255,255,255,.12)
}

.site-header.scrolled .navbar,.site-header.menu-open .navbar {
    background:#fff;
    border-bottom-color:var(--line);
    box-shadow:0 14px 34px rgba(1,27,13,.08);
    color:var(--green)
}

.navbar-inner {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}

.brand {
    display:flex;
    align-items:center;
    position:relative;
    z-index:1005
}

.brand-logo {
    width:210px;
    height:auto;
    transition:.25s ease
}

.brand-logo-dark {
    display:none
}

.site-header.scrolled .brand-logo-light,.site-header.menu-open .brand-logo-light {
    display:none
}

.site-header.scrolled .brand-logo-dark,.site-header.menu-open .brand-logo-dark {
    display:block
}

.nav-panel {
    display:flex;
    align-items:center;
    gap:6px
}

.nav-link {
    font-size:.9rem;
    font-weight:850;
    padding:22px 12px;
    position:relative
}

.nav-link:after {
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:16px;
    height:2px;
    background:var(--yellow);
    transform:scaleX(0);
    transform-origin:left;
    transition:.25s
}

.nav-link:hover:after,.nav-link.active:after {
    transform:scaleX(1)
}

.nav-cta {
    margin-left:8px;
    background:var(--yellow);
    color:var(--green-dark);
    font-weight:900;
    padding:11px 16px
}

.site-header.scrolled .nav-cta,.site-header.menu-open .nav-cta {
    background:var(--green);
    color:#fff
}

.menu-toggle {
    display:none;
    position:relative;
    z-index:1005;
    background:transparent;
    border:0;
    width:44px;
    height:44px;
    cursor:pointer
}

.menu-toggle span {
    display:block;
    width:26px;
    height:2px;
    background:currentColor;
    margin:6px auto;
    transition:.28s
}

.site-header.menu-open .menu-toggle span:nth-child(1) {
    transform:translateY(8px) rotate(45deg)
}

.site-header.menu-open .menu-toggle span:nth-child(2) {
    opacity:0
}

.site-header.menu-open .menu-toggle span:nth-child(3) {
    transform:translateY(-8px) rotate(-45deg)
}

.mobile-socials {
    display:none
}

/* =========================================================
   04. ORIGINAL PRELOADER / OVERLAY RULES
   ========================================================= */

.site-overlay {
    position:fixed;
    inset:0;
    z-index:3000;
    display:grid;
    place-items:center;
    background:radial-gradient(circle at 50% 30%,#0d6c3e 0,#032817 44%,#010a05 100%);
    overflow:hidden;
    transition:opacity .8s ease,visibility .8s ease
}

.site-overlay.done {
    opacity:0;
    visibility:hidden
}

.overlay-glow {
    position:absolute;
    width:65vw;
    height:65vw;
    border-radius:50%;
    background:radial-gradient(circle,rgba(242,219,0,.22),transparent 62%);
    filter:blur(10px);
    animation:pulseGlow 2.8s ease-in-out infinite
}

.overlay-logo-mark {
    width:170px;
    position:relative;
    z-index:2;
    margin-top:-40px
}

.overlay-logo-mark svg {
    width:100%;
    overflow:visible
}

.map-shape {
    fill:var(--yellow);
    opacity:0;
    transform-origin:center;
    animation:mapPop .9s .45s cubic-bezier(.19,1,.22,1) forwards
}

.ac-stem {
    fill:var(--green-2);
    opacity:0;
    transform-origin:center;
    animation:stemIn .8s .78s ease forwards
}

.ac-curve {
    fill:none;
    stroke:var(--green-2);
    stroke-width:10;
    stroke-linecap:round;
    stroke-dasharray:260;
    stroke-dashoffset:260;
    animation:drawCurve 1.2s 1s ease forwards
}

.overlay-word {
    position:absolute;
    top:calc(50% + 82px);
    display:flex;
    gap:5px;
    font-size:clamp(2.1rem,5vw,4rem);
    font-weight:950;
    letter-spacing:.08em;
    color:#fff
}

.overlay-word span {
    display:inline-block;
    opacity:0;
    transform:rotateY(90deg) translateY(18px);
    animation:letterSpin .72s cubic-bezier(.2,.8,.2,1) forwards
}

.overlay-word span:nth-child(1) {
    animation-delay:1.05s
}

.overlay-word span:nth-child(2) {
    animation-delay:1.13s
}

.overlay-word span:nth-child(3) {
    animation-delay:1.21s
}

.overlay-word span:nth-child(4) {
    animation-delay:1.29s
}

.overlay-word span:nth-child(5) {
    animation-delay:1.37s
}

.overlay-word span:nth-child(6) {
    animation-delay:1.45s
}

.overlay-word span:nth-child(7) {
    animation-delay:1.53s
}

.overlay-word span:nth-child(8) {
    animation-delay:1.61s
}

.overlay-word span:nth-child(9) {
    animation-delay:1.69s
}

.overlay-subword {
    position:absolute;
    top:calc(50% + 145px);
    color:var(--yellow);
    letter-spacing:.65em;
    text-transform:lowercase;
    font-weight:800;
    opacity:0;
    animation:fadeRise .7s 2.05s ease forwards
}

@keyframes pulseGlow {
    50% {
        transform:scale(1.15);
        opacity:.75
    }

}

@keyframes mapPop {
    to {
        opacity:1;
        transform:scale(1)
    }

}

@keyframes stemIn {
    from {
        transform:scaleY(.2)
    }
    to {
        opacity:1;
        transform:scaleY(1)
    }

}

@keyframes drawCurve {
    to {
        stroke-dashoffset:0
    }

}

@keyframes letterSpin {
    to {
        opacity:1;
        transform:rotateY(0) translateY(0)
    }

}

@keyframes fadeRise {
    from {
        transform:translateY(18px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }

}

/* =========================================================
   05. HERO / SECTIONS / CARDS / PAGE CONTENT
   ========================================================= */

.hero {
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    padding:160px 0 90px;
    color:#fff;
    background:linear-gradient(120deg,rgba(0,0,0,.46),rgba(0,0,0,.26)),url('../img/hero-home.jpg');
    background-size:cover;
    overflow:hidden
}

.hero:before {
    content:"";
    position:absolute;
    inset:auto -15% -22% -15%;
    height:44%;
    background:var(--white);
    border-radius:50% 50% 0 0/72% 72% 0 0
}

.hero-grid {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:54px;
    align-items:center
}

.hero h1 {
    color:#fff;
    text-shadow:0 12px 35px rgba(0,0,0,.28)
}

.hero p {
    color:rgba(255,255,255,.84);
    font-size:1.14rem;
    max-width:680px;
    margin-top:20px
}

.hero-actions {
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:32px
}

.hero-card {
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);
    padding:28px;
    backdrop-filter:blur(18px);
    box-shadow:0 30px 70px rgba(0,0,0,.22)
}

.hero-card h3 {
    color:#fff;
    margin-bottom:16px
}

.hero-stats {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}

.stat {
    background:rgba(255,255,255,.12);
    padding:20px;
    border-left:3px solid var(--yellow)
}

.stat strong {
    display:block;
    font-size:1.8rem;
    color:#fff;
    line-height:1
}

.stat span {
    font-size:.82rem;
    color:rgba(255,255,255,.78)
}

.section {
    padding:96px 0
}

.section-alt {
    background:var(--cream)
}

.section-head {
    max-width:760px;
    margin-bottom:42px
}

.section-head.center {
    text-align:center;
    margin-inline:auto
}

.section-head.center .eyebrow {
    justify-content:center
}

.section-head.center .eyebrow:before {
    display:none
}

.grid-3 {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}

.grid-2 {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:32px
}

.card {
    background:#fff;
    border:1px solid var(--line);
    padding:30px;
    box-shadow:0 18px 40px rgba(1,27,13,.06);
    transition:.3s ease
}

.card:hover {
    transform:translateY(-6px);
    box-shadow:var(--shadow)
}

.card-icon {
    width:54px;
    height:54px;
    background:var(--green);
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:950;
    font-size:1.2rem;
    margin-bottom:22px
}

.card h3 {
    margin-bottom:12px
}

.feature-list {
    list-style:none;
    margin:22px 0 0;
    padding:0;
    display:grid;
    gap:13px
}

.feature-list li {
    position:relative;
    padding-left:28px;
    color:#3d4c44
}

.feature-list li:before {
    content:"";
    position:absolute;
    left:0;
    top:.55em;
    width:11px;
    height:11px;
    background:var(--yellow);
    border:3px solid var(--green)
}

.split {
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:54px;
    align-items:center
}

.visual-panel {
    min-height:520px;
    background:linear-gradient(135deg,rgba(7,87,47,.92),rgba(3,40,23,.96)),url('../img/hero-pattern.svg');
    background-size:cover;
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow)
}

.visual-panel:before {
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border:36px solid rgba(242,219,0,.4);
    right:-70px;
    top:-70px
}

.visual-panel:after {
    content:"AC";
    position:absolute;
    left:34px;
    bottom:18px;
    font-size:10rem;
    line-height:1;
    font-weight:950;
    color:rgba(255,255,255,.08);
    letter-spacing:-.12em
}

.impact-strip {
    background:var(--green-dark);
    color:#fff;
    padding:56px 0
}

.impact-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px
}

.impact-item strong {
    display:block;
    font-size:2rem;
    color:var(--yellow)
}

.impact-item span {
    color:rgba(255,255,255,.76)
}

.page-hero {
    min-height:58vh;
    padding:170px 0 90px;
    background:linear-gradient(120deg,rgba(0,0,0,.48),rgba(0,0,0,.28)),url('../img/hero-inner.jpg');
    background-size:cover;
    color:#fff
}

.page-hero h1 {
    color:#fff;
    max-width:900px
}

.page-hero p {
    color:rgba(255,255,255,.82);
    font-size:1.12rem;
    margin-top:18px;
    max-width:760px
}


/* Page-specific hero background images
   Replace these files in assets/img/:
   - hero-home.jpg
   - hero-about.jpg
   - hero-programmes.jpg
   - hero-contact.jpg
   - hero-privacy.jpg
   - hero-inner.jpg is the fallback for any page-hero without a page-specific class.
*/
.hero,
.page-hero {
    background-position:center;
    background-repeat:no-repeat;
}

.hero.hero-home {
    background:linear-gradient(120deg,rgba(0,0,0,.46),rgba(0,0,0,.26)),url('../img/hero-home.jpg');
    background-size:cover;
    background-position:center;
}

.page-hero.hero-about {
    background:linear-gradient(120deg,rgba(0,0,0,.48),rgba(0,0,0,.28)),url('../img/hero-about.jpg');
    background-size:cover;
    background-position:center;
}

.page-hero.hero-programmes {
    background:linear-gradient(120deg,rgba(0,0,0,.48),rgba(0,0,0,.28)),url('../img/hero-programmes.jpg');
    background-size:cover;
    background-position:center;
}

.page-hero.hero-contact {
    background:linear-gradient(120deg,rgba(0,0,0,.48),rgba(0,0,0,.28)),url('../img/hero-contact.jpg');
    background-size:cover;
    background-position:center;
}

.page-hero.hero-privacy {
    background:linear-gradient(120deg,rgba(0,0,0,.48),rgba(0,0,0,.28)),url('../img/hero-privacy.jpg');
    background-size:cover;
    background-position:center;
}

.values-grid {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px
}

.value-card {
    background:#fff;
    border:1px solid var(--line);
    padding:22px
}

.value-card strong {
    display:block;
    color:var(--green);
    font-size:1.8rem
}

.program-card {
    display:grid;
    grid-template-columns:100px 1fr;
    gap:24px;
    align-items:start;
    background:#fff;
    border:1px solid var(--line);
    padding:28px;
    margin-bottom:22px;
    box-shadow:0 16px 40px rgba(1,27,13,.05)
}

.program-number {
    height:100px;
    background:var(--green);
    color:var(--yellow);
    display:grid;
    place-items:center;
    font-size:2.2rem;
    font-weight:950
}

.contact-layout {
    display:grid;
    grid-template-columns:.92fr 1.08fr;
    gap:34px;
    align-items:start
}

.contact-card {
    background:var(--green-dark);
    color:#fff;
    padding:34px
}

.contact-card h3 {
    color:#fff;
    margin-bottom:18px
}

.contact-card p,.contact-card a {
    color:rgba(255,255,255,.8);
    display:block;
    margin-bottom:10px
}

.contact-form {
    background:#fff;
    border:1px solid var(--line);
    padding:34px;
    box-shadow:var(--shadow)
}

.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}

.form-field {
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-bottom:18px
}

.form-field.full {
    grid-column:1/-1
}

.form-field label {
    font-weight:850;
    color:var(--green-dark)
}

input,textarea,select {
    width:100%;
    border:1px solid rgba(7,87,47,.18);
    padding:14px 15px;
    font:inherit;
    color:var(--ink);
    background:#fff;
    outline:none
}

textarea {
    min-height:150px;
    resize:vertical
}

input:focus,textarea:focus {
    border-color:var(--green);
    box-shadow:0 0 0 4px rgba(7,87,47,.08)
}

.checkbox-row {
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:12px 0 20px
}

.checkbox-row input {
    width:auto;
    margin-top:6px
}

.form-message {
    padding:14px 16px;
    margin-bottom:18px;
    font-weight:750
}

.form-message.success {
    background:#eaf8ef;
    color:#0b5a31
}

.form-message.error {
    background:#fff0ee;
    color:#9b2c1c
}

.map-frame {
    margin-top:24px;
    min-height:300px;
    border:0;
    width:100%;
    filter:saturate(.9)
}

.privacy-content {
    max-width:900px
}

.privacy-content h2 {
    font-size:2rem;
    margin:34px 0 12px
}

.privacy-content p,.privacy-content li {
    color:#45534b
}

.privacy-content ul {
    padding-left:22px
}

.reveal {
    opacity:0;
    transform:translateY(26px);
    transition:opacity .7s ease,transform .7s ease
}

.reveal.in-view {
    opacity:1;
    transform:translateY(0)
}

/* =========================================================
   06. FOOTER / PRIVACY BANNER / FLOATING BUTTONS
   ========================================================= */

.site-footer {
    background:#020b06;
    color:#fff;
    position:relative;
    z-index:3
}

.footer-cta {
    background:linear-gradient(110deg,var(--green),var(--green-dark));
    padding:54px 0;
    border-bottom:1px solid rgba(255,255,255,.1)
}

.footer-cta-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}

.footer-cta h2 {
    color:#fff;
    font-size:clamp(1.8rem,3vw,3rem);
    max-width:760px
}

.footer-main {
    display:grid;
    grid-template-columns:1.3fr .75fr 1fr .75fr;
    gap:34px;
    padding:60px 0
}

.footer-main h3 {
    color:var(--yellow);
    font-size:1rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    margin-bottom:14px
}

.footer-main a,.footer-main p {
    display:block;
    color:rgba(255,255,255,.72);
    margin:0 0 9px
}

.footer-main a:hover {
    color:#fff
}

.footer-brand img {
    width:230px;
    margin-bottom:16px
}

.footer-small {
    font-size:.86rem
}

.privacy-settings {
    background:transparent;
    border:0;
    color:rgba(255,255,255,.72);
    padding:0;
    margin:0 0 9px;
    cursor:pointer;
    font:inherit;
    text-align:left
}

.privacy-settings:hover {
    color:#fff
}

.footer-bottom {
    border-top:1px solid rgba(255,255,255,.1);
    padding:18px 0;
    font-size:.85rem;
    color:rgba(255,255,255,.62)
}

.footer-bottom-inner {
    display:flex;
    justify-content:space-between;
    gap:18px
}

.privacy-banner {
    position:fixed;
    left:24px;
    right:24px;
    bottom:24px;
    z-index:1600;
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    background:var(--green-dark);
    color:#fff;
    padding:18px 20px;
    box-shadow:0 22px 60px rgba(0,0,0,.3)
}

.privacy-banner.show {
    display:flex
}

.privacy-banner p {
    color:rgba(255,255,255,.75);
    font-size:.92rem
}

.privacy-actions {
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0
}

.privacy-actions a {
    color:var(--yellow);
    font-weight:850
}

.whatsapp-float,.back-to-top {
    position:fixed;
    right:22px;
    z-index:1200;
    width:54px;
    height:54px;
    border:0;
    display:grid;
    place-items:center;
    box-shadow:0 16px 35px rgba(0,0,0,.18);
    transition:.28s ease;
    opacity:0;
    visibility:hidden;
    cursor:pointer
}

.whatsapp-float {
    bottom:92px;
    background:#25D366;
    color:#fff;
    opacity:1;
    visibility:visible
}

.whatsapp-float svg {
    width:30px;
    height:30px;
    fill:currentColor
}

.back-to-top {
    bottom:24px;
    background:var(--green);
    color:#fff;
    font-size:1.4rem
}

.back-to-top.show {
    opacity:1;
    visibility:visible
}

.floating-lift .whatsapp-float {
    bottom:132px
}

.floating-lift .back-to-top {
    bottom:64px
}

/* =========================================================
   07. ORIGINAL RESPONSIVE RULES
   ========================================================= */

@media (max-width:1200px) {
    .brand-logo {
        width:185px
    }
    .menu-toggle {
        display:block
    }
    .navbar-inner {
        position:relative
    }
    .brand {
        position:absolute;
        left:50%;
        transform:translateX(-50%)
    }
    .nav-panel {
        position:fixed;
        left:16px;
        right:16px;
        top:94px;
        background:#fff;
        color:var(--green-dark);
        display:grid;
        gap:0;
        padding:18px;
        box-shadow:var(--shadow);
        transform:translateY(-18px);
        opacity:0;
        visibility:hidden;
        transition:.28s ease
    }
    .site-header.menu-open .nav-panel {
        transform:translateY(0);
        opacity:1;
        visibility:visible
    }
    .nav-link {
        padding:14px 8px;
        border-bottom:1px solid var(--line)
    }
    .nav-link:after {
        display:none
    }
    .nav-cta {
        margin:16px 0 4px;
        text-align:center
    }
    .mobile-socials {
        display:flex;
        gap:14px;
        margin-top:10px;
        color:var(--green);
        font-weight:800
    }
    .grid-3 {
        grid-template-columns:1fr 1fr
    }
    .values-grid {
        grid-template-columns:repeat(3,1fr)
    }

}

@media (max-width:860px) {
    .container {
        width:min(100% - 28px,1180px)
    }
    .topbar {
        height:auto;
        min-height:42px
    }
    .topbar-inner {
        justify-content:center;
        text-align:center
    }
    .topbar-left {
        font-size:.78rem;
        gap:8px
    }
    .topbar-right {
        position:absolute;
        right:14px;
        top:7px
    }
    .language-current span:not(.flag):not(.chevron) {
        display:none
    }
    .topbar-socials {
        display:none
    }
    .navbar {
        height:64px
    }
    .brand-logo {
        width:160px
    }
    .nav-panel {
        top:76px
    }
    .hero {
        min-height:88vh;
        padding:126px 0 62px
    }
    .hero:before {
        height:28%
    }
    .hero-grid,.split,.grid-2,.contact-layout {
        grid-template-columns:1fr;
        gap:30px
    }
    .hero-card {
        display:none
    }
    .hero p {
        font-size:1rem;
        max-width:96%;
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden
    }
    .hero-actions .btn {
        width:100%
    }
    .section {
        padding:68px 0
    }
    .grid-3 {
        grid-template-columns:1fr
    }
    .impact-grid {
        grid-template-columns:1fr 1fr
    }
    .values-grid {
        grid-template-columns:1fr
    }
    .program-card {
        grid-template-columns:1fr
    }
    .program-number {
        width:82px;
        height:82px
    }
    .form-grid {
        grid-template-columns:1fr
    }
    .footer-cta-inner,.footer-bottom-inner {
        flex-direction:column;
        align-items:flex-start
    }
    .footer-main {
        grid-template-columns:1fr;
        padding:46px 0
    }
    .privacy-banner {
        left:12px;
        right:12px;
        bottom:12px;
        display:none;
        flex-direction:column;
        align-items:flex-start
    }
    .privacy-actions {
        width:100%;
        flex-wrap:wrap
    }
    .privacy-actions .btn {
        flex:1
    }
    .whatsapp-float,.back-to-top {
        right:14px;
        width:50px;
        height:50px
    }
    .whatsapp-float {
        bottom:82px
    }
    .back-to-top {
        bottom:20px
    }
    .floating-lift .whatsapp-float {
        bottom:122px
    }
    .floating-lift .back-to-top {
        bottom:60px
    }
    .page-hero {
        min-height:44vh;
        padding:130px 0 62px
    }
    .page-hero p {
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden
    }
    .visual-panel {
        min-height:360px
    }
    .overlay-logo-mark {
        width:130px
    }
    .overlay-subword {
        letter-spacing:.35em
    }

}

@media (max-width:520px) {
    h1 {
        font-size:2.45rem
    }
    .hero {
        min-height:82vh
    }
    .topbar-left a:first-child {
        display:none
    }
    .topbar-dot {
        display:none
    }
    .impact-grid {
        grid-template-columns:1fr
    }
    .footer-brand img {
        width:200px
    }
    .overlay-word {
        font-size:2rem;
        gap:2px
    }
    .overlay-subword {
        font-size:.8rem
    }
    .btn {
        width:100%
    }

}

/* =========================================================
   08. UPDATED RESPONSIVE HEADER / MEDIA SECTIONS / PRELOADER
   ========================================================= */

/* ================= UPDATED RESPONSIVE HEADER, MEDIA SECTIONS & PRELOADER ================= */

@media (min-width:861px) {
    .hero:before {
        display:none
    }

}

.header-socials {
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:4px
}

.header-socials a {
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid currentColor;
    color:inherit;
    position:relative;
    overflow:hidden;
    transition:.25s ease
}

.header-socials a:before {
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:0;
    background:var(--yellow);
    transition:.25s ease;
    z-index:-1
}

.header-socials a:hover:before,.header-socials a:focus-visible:before {
    height:100%
}

.header-socials svg {
    width:18px;
    height:18px;
    fill:currentColor
}

.site-header.scrolled .header-socials a,.site-header.menu-open .header-socials a {
    color:var(--green);
    border-color:rgba(7,87,47,.25)
}

.site-header.scrolled .header-socials a:hover,.site-header.menu-open .header-socials a:hover {
    color:var(--green-dark)
}

.nav-link {
    overflow:hidden
}

.nav-link:before {
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:12px;
    height:3px;
    background:linear-gradient(90deg,var(--yellow),var(--green-2));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .28s cubic-bezier(.2,.8,.2,1)
}

.nav-link:hover:before,.nav-link:focus-visible:before,.nav-link.active:before {
    transform:scaleX(1)
}

.nav-link:after {
    display:none
}

.nav-cta {
    position:relative;
    overflow:hidden
}

.nav-cta:before {
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    height:4px;
    width:0;
    background:#fff;
    transition:.28s ease
}

.nav-cta:hover:before,.nav-cta:focus-visible:before {
    width:100%
}

.card,.value-card,.program-card,.contact-card,.media-card {
    position:relative;
    overflow:hidden
}

.card:before,.value-card:before,.program-card:before,.contact-card:before,.media-card:before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    height:4px;
    width:0;
    background:linear-gradient(90deg,var(--yellow),var(--green));
    transition:width .45s ease
}

.card:hover:before,.card:focus-within:before,.card.in-view:before,.value-card:hover:before,.value-card.in-view:before,.program-card:hover:before,.program-card.in-view:before,.contact-card:hover:before,.contact-card.in-view:before,.media-card:hover:before,.media-card.in-view:before {
    width:100%
}

.reveal {
    transform:translate3d(0,34px,0);
    filter:blur(5px);
    transition:opacity .75s ease var(--delay,0ms),transform .75s cubic-bezier(.2,.8,.2,1) var(--delay,0ms),filter .75s ease var(--delay,0ms)
}

.reveal.in-view {
    filter:blur(0)
}

.reveal.from-left {
    transform:translate3d(-46px,0,0)
}

.reveal.from-right {
    transform:translate3d(46px,0,0)
}

.reveal.from-scale {
    transform:scale(.94)
}

.reveal.from-left.in-view,.reveal.from-right.in-view,.reveal.from-scale.in-view {
    transform:translate3d(0,0,0) scale(1)
}

.media-split {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:54px;
    align-items:center
}

.media-split.reverse .media-copy {
    order:2
}

.media-split.reverse .media-card {
    order:1
}

.media-card {
    background:#fff;
    border:1px solid var(--line);
    box-shadow:var(--shadow)
}

.media-card img {
    display:block;
    width:100%;
    height:clamp(360px,48vw,610px);
    object-fit:cover
}

.media-caption {
    padding:18px 20px;
    border-top:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px
}

.media-caption strong {
    color:var(--green-dark);
    font-size:1.02rem
}

.media-caption .mini-cta {
    font-weight:900;
    color:var(--green);
    white-space:nowrap
}

.media-copy p + p {
    margin-top:14px
}

.mini-cta:hover {
    text-decoration:underline
}

.image-band {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-top:30px
}

.image-band .media-card img {
    height:280px
}

.image-band .media-caption {
    display:block
}

.image-band .media-caption p {
    font-size:.92rem;
    margin-top:5px;
    color:#536158
}

.site-overlay {
    background:#02160c;
    transition:opacity .6s ease,visibility .6s ease
}

.site-overlay.done {
    opacity:0;
    visibility:hidden;
    pointer-events:none
}

.site-overlay.is-leaving .overlay-stage {
    opacity:0;
    transform:translateY(-30px);
    filter:blur(5px)
}

.site-overlay.is-leaving .overlay-curtain-path {
    animation:afcCurtainLift .7s cubic-bezier(.65,0,.35,1) forwards
}

.overlay-curtain {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0
}

.overlay-line-group {
    animation:afcLineMove 2.2s linear infinite
}

.overlay-stage {
    position:relative;
    z-index:2;
    display:grid;
    place-items:center;
    transition:.48s ease
}

.overlay-logo-wrap {
    display:grid;
    place-items:center;
    gap:16px
}

.overlay-real-logo {
    width:min(620px,82vw);
    height:auto;
    opacity:0;
    transform:translateY(20px) scale(.96);
    filter:drop-shadow(0 26px 45px rgba(0,0,0,.35)) blur(4px);
    animation:afcLogoIntro .6s cubic-bezier(.22,1,.36,1) .12s forwards
}

.overlay-word {
    position:static;
    display:flex;
    gap:4px;
    font-size:clamp(1.65rem,4.4vw,3.6rem);
    font-weight:950;
    letter-spacing:.18em;
    color:#fff
}

.overlay-word span {
    display:inline-block;
    opacity:0;
    transform:rotateY(90deg) translateY(14px);
    animation:afcLetterSpin .85s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay:calc(var(--i) * .055s + .28s)
}

.overlay-subword {
    position:static;
    color:var(--yellow);
    letter-spacing:.62em;
    text-transform:lowercase;
    font-weight:900;
    opacity:0;
    animation:fadeRise .45s .92s ease forwards
}

@keyframes afcLogoIntro {
    to {
        opacity:1;
        transform:translateY(0) scale(1);
        filter:drop-shadow(0 26px 45px rgba(0,0,0,.35)) blur(0)
    }

}

@keyframes afcLetterSpin {
    to {
        opacity:1;
        transform:rotateY(0) translateY(0)
    }

}

@keyframes afcLineMove {
    from {
        transform:translateX(-38px)
    }
    to {
        transform:translateX(38px)
    }

}

@keyframes afcCurtainLift {
    to {
        d:path('M0,-260 Q500,-460 1000,-260 V0 H0 Z')
    }

}

@media (max-width:1200px) {
    .header-socials {
        margin-top:8px
    }
    .header-socials a {
        color:var(--green);
        border-color:rgba(7,87,47,.22)
    }

}

@media (max-width:860px) {
    .topbar-inner {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:0;
        align-items:center;
        padding:0
    }
    .topbar-left,.topbar-right {
        position:static;
        width:100%;
        justify-content:center
    }
    .topbar-left {
        padding-right:7px;
        border-right:1px solid rgba(255,255,255,.18)
    }
    .topbar-right {
        padding-left:7px
    }
    .topbar-email,.topbar-dot {
        display:none
    }
    .topbar-phone {
        font-size:.82rem;
        font-weight:850;
        white-space:nowrap
    }
    .language-switcher,.language-current {
        width:100%
    }
    .language-current {
        justify-content:center;
        padding:0 8px
    }
    .language-current span:not(.flag):not(.chevron) {
        display:inline
    }
    .language-menu {
        right:0;
        left:auto;
        top:36px;
        min-width:min(92vw,310px);
        max-height:70vh;
        overflow:auto
    }
    .language-menu small {
        display:block;
        padding:9px 10px 4px;
        color:#67736b;
        font-size:.76rem
    }
    .language-menu .stop-translate {
        border-top:1px solid var(--line);
        margin-top:5px;
        color:#9b2c1c
    }
    .site-header.topbar-hidden .navbar {
        transform:translateY(-42px);
        box-shadow:0 14px 34px rgba(1,27,13,.12)
    }
    .site-header.topbar-hidden .nav-panel {
        top:72px
    }
    .hero:before {
        height:26%
    }
    .media-split,.media-split.reverse {
        grid-template-columns:1fr;
        gap:26px
    }
    .media-split.reverse .media-copy,.media-split.reverse .media-card {
        order:initial
    }
    .media-card img {
        height:320px
    }
    .media-caption {
        display:block
    }
    .media-caption .mini-cta {
        display:inline-block;
        margin-top:8px
    }
    .image-band {
        grid-template-columns:1fr
    }
    .image-band .media-card img {
        height:300px
    }
    .header-socials {
        display:flex;
        justify-content:center;
        margin-top:12px
    }
    .header-socials a {
        width:42px;
        height:42px
    }
    .floating-lift .whatsapp-float {
        bottom:150px
    }
    .floating-lift .back-to-top {
        bottom:88px
    }

}

@media (max-width:520px) {
    .topbar-phone {
        font-size:.76rem
    }
    .language-current {
        font-size:.76rem
    }
    .page-hero p,.hero p {
        -webkit-line-clamp:2
    }
    .overlay-real-logo {
        width:88vw
    }
    .overlay-word {
        font-size:1.45rem;
        letter-spacing:.1em
    }
    .overlay-subword {
        letter-spacing:.42em
    }
    .media-card img {
        height:270px
    }

}

.overlay-curtain-path {
    fill:url(#afcCurtainPattern)
}

.site-overlay.is-leaving .overlay-curtain {
    animation:afcCurtainSheetLift .7s cubic-bezier(.65,0,.35,1) forwards
}

@keyframes afcCurtainSheetLift {
    to {
        transform:translateY(-118%)
    }

}

.program-card {
    grid-template-columns:180px 100px 1fr
}

.program-media {
    margin:0
}

.program-media img {
    width:180px;
    height:150px;
    object-fit:cover;
    display:block;
    border:1px solid var(--line)
}

@media(max-width:860px) {
    .program-card {
        grid-template-columns:1fr
    }
    .program-media img {
        width:100%;
        height:260px
    }
    .program-number {
        margin-top:-8px
    }

}

@media (max-width:520px) {
    .topbar-left a:first-child {
        display:inline
    }
    .topbar-left {
        gap:0
    }
    .topbar-right {
        top:auto;
        right:auto
    }

}

/* =========================================================
   09. FINAL REFINEMENT PASS
   ========================================================= */

/* Final refinement pass */

@media (max-width:1200px) {
    .navbar-inner {
        justify-content:flex-end;
    }
    .menu-toggle {
        margin-left:auto;
    }
    .brand {
        left:50%;
        transform:translateX(-50%);
    }

}

@media (max-width:860px) {
    .topbar {
        overflow:visible;
        transition:height .24s ease,min-height .24s ease,opacity .18s ease,background .3s ease,border-color .2s ease;
    }
    .topbar.mobile-hide {
        height:0;
        min-height:0;
        opacity:0;
        transform:none;
        border-bottom:0;
        pointer-events:none;
    }
    .topbar.mobile-hide .topbar-inner {
        opacity:0;
        visibility:hidden;
    }
    .site-header.topbar-hidden .navbar {
        transform:none;
        box-shadow:0 14px 34px rgba(1,27,13,.12);
    }
    .nav-panel {
        top:106px;
    }
    .site-header.topbar-hidden .nav-panel {
        top:66px;
    }
    .language-switcher {
        z-index:4005;
    }
    .language-menu {
        z-index:4006;
    }

}

@media (max-width:520px) {
    .topbar-left a:first-child {
        display:inline;
    }
    .menu-toggle {
        right:0;
    }

}

.language-switcher {
    z-index:4005;

}

.language-menu {
    z-index:4006;
    border:1px solid rgba(7,87,47,.12);

}

.card,.value-card,.program-card,.contact-card,.media-card {
    isolation:isolate;

}

.card:before,.value-card:before,.program-card:before,.contact-card:before,.media-card:before {
    top:auto;
    bottom:0;
    left:0;
    width:100%;
    height:3px;
    transform:scaleX(0);
    transform-origin:left;
    background:linear-gradient(90deg,var(--yellow),var(--green));
    transition:transform .34s cubic-bezier(.2,.8,.2,1);
    z-index:2;

}

.card.in-view:before,.value-card.in-view:before,.program-card.in-view:before,.contact-card.in-view:before,.media-card.in-view:before {
    width:100%;
    transform:scaleX(0);

}

.card:hover:before,.card:focus-within:before,
.value-card:hover:before,.value-card:focus-within:before,
.program-card:hover:before,.program-card:focus-within:before,
.contact-card:hover:before,.contact-card:focus-within:before,
.media-card:hover:before,.media-card:focus-within:before {
    width:100%;
    transform:scaleX(1);

}

.card:hover,.value-card:hover,.program-card:hover,.media-card:hover {
    transform:translateY(-5px);

}

.media-caption strong {
    display:block;

}

.overlay-real-logo {
    width:min(660px,84vw);

}

.site-overlay:before,.site-overlay:after {
    content:"";
    position:absolute;
    inset:-20%;
    pointer-events:none;

}

.site-overlay:before {
    background:repeating-linear-gradient(105deg,rgba(242,219,0,.08) 0 1px,transparent 1px 42px);
    animation:afcOverlayLines 2.6s linear infinite;

}

.site-overlay:after {
    background:radial-gradient(circle at 50% 42%,rgba(242,219,0,.18),transparent 34%);
    filter:blur(10px);
    animation:pulseGlow 2s ease-in-out infinite;

}

@keyframes afcOverlayLines {
    from {
        transform:translateX(-45px)
    }
    to {
        transform:translateX(45px)
    }

}

/* =========================================================
   10. LANGUAGE SELECTOR STABILITY FIX
   ========================================================= */

/* Language selector stability fix */

.site-header {
    z-index:9000;

}

.topbar {
    position:relative;
    z-index:9010;
    overflow:visible;

}

.navbar {
    position:relative;
    z-index:5000;

}

.language-switcher {
    position:relative;
    z-index:100000;

}

.language-current {
    position:relative;
    z-index:100001;

}

.language-menu {
    position:fixed!important;
    top:var(--language-menu-top, 42px)!important;
    left:var(--language-menu-left, auto)!important;
    right:auto!important;
    width:var(--language-menu-width, 240px)!important;
    min-width:220px;
    z-index:100002!important;
    border:1px solid rgba(7,87,47,.14);
    box-shadow:0 24px 70px rgba(1,27,13,.24);

}

.language-menu.open {
    display:block!important;

}

@media (max-width:860px) {
    .language-menu {
        max-height:68vh;
        overflow:auto;
    }

}

/* =========================================================
   11. FINAL Z-INDEX / OVERFLOW FIXES
   ========================================================= */

/* Final fix: keep preloader above header, keep language menu above header menu only, prevent mobile side overflow */

html,body {
    max-width:100%;
    overflow-x:hidden;

}

.site-header {
    z-index:1000!important;
    max-width:100vw;

}

.topbar {
    position:relative;
    z-index:1100!important;
    overflow:visible;
    max-width:100vw;

}

.navbar {
    position:relative;
    z-index:1000!important;
    max-width:100vw;

}

.nav-panel {
    z-index:1001!important;
    box-sizing:border-box;
    max-width:calc(100vw - 32px);

}

.language-switcher {
    position:relative;
    z-index:2200!important;

}

.language-current {
    position:relative;
    z-index:2201!important;

}

.language-menu {
    z-index:2202!important;
    max-width:calc(100vw - 20px);
    box-sizing:border-box;

}

.site-overlay {
    z-index:3000!important;

}

.whatsapp-float,.back-to-top {
    box-sizing:border-box;
    right:max(14px,env(safe-area-inset-right));

}

#google_translate_element,.goog-te-banner-frame,.goog-te-balloon-frame,iframe.skiptranslate {
    max-width:0!important;
    width:0!important;
    height:0!important;
    overflow:hidden!important;

}