@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   MONTA CHE GREEN INNOVATION HUB — site theme
   Greens are carried over from the existing MontAche site so the brand
   colour stays identical; gold / earth are the Brand Identity accents.
   ========================================================================== */
:root {
  /* MontAche greens — primary */
  --ink:       #0B2114;   /* deepest forest: dark bands, body text */
  --forest:    #1E6B3A;   /* primary green: headings, links, buttons */
  --forest-lt: #2C8449;   /* hover green */
  --leaf:      #3E9C5C;   /* accent green */
  --moss:      #C6DCCB;   /* pale green chips */
  --wash:      #EFF5F0;   /* pale section background */
  --rule:      #D6E4DA;   /* hairline border */
  --paper:     #FFFFFF;

  /* Brand Identity accents — used sparingly */
  --earth:     #8A5A3B;
  --gold:      #D9A441;   /* harvest gold */
  --gold-dk:   #B8862E;

  /* Legacy token names retained so the component CSS keeps resolving */
  --navy:      var(--ink);
  --navy-mid:  #12291A;
  --navy-lt:   var(--forest);
  --sky:       var(--wash);
  --mist:      #F7F5EF;   /* natural white */
  --slate:     #4A6553;
  --border:    var(--rule);
  --green:     var(--leaf);
  --r-sm:      8px;
  --r-md:      14px;
  --r-lg:      22px;
  --sh-sm:     0 2px 12px rgba(11,33,20,.08);
  --sh-md:     0 8px 32px rgba(11,33,20,.14);
  --tr:        .3s cubic-bezier(.4,0,.2,1);
  --display:   'Montserrat', system-ui, sans-serif;
  --body:      'Inter', system-ui, sans-serif;
  --measure:   1180px;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;
  /* PREVENT ALL ZOOM on mobile */
  touch-action:manipulation;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%
}
body{font-family:var(--body);color:var(--navy);background:#fff;overflow-x:hidden;line-height:1.6;-webkit-tap-highlight-color:transparent;padding-top:67px}
@media(max-width:560px){body{padding-top:61px}}
img{max-width:100%;display:block;object-fit:cover}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none;-webkit-tap-highlight-color:transparent}
/* prevent zoom on input focus (iOS) */
input,select,textarea{font-size:16px !important;touch-action:manipulation}
h1,h2,h3,h4,h5{font-family:var(--display);line-height:1.18;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
h1{font-size:clamp(1.7rem,4vw,3rem)}
h2{font-size:clamp(1.5rem,3vw,2.4rem)}
h3{font-size:clamp(1.15rem,2vw,1.55rem)}
h4{font-size:1rem}
p{color:var(--slate);line-height:1.75}

.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:80px 0}
.section-sm{padding:56px 0}
@media(max-width:768px){.section{padding:56px 0}.section-sm{padding:40px 0}}

.tag{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--forest);margin-bottom:12px}
.tag::before{content:'';display:block;width:18px;height:2px;background:var(--forest)}
.tag-white{color:rgba(255,255,255,.8)}
.tag-white::before{background:rgba(255,255,255,.5)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.88rem;border-radius:var(--r-sm);padding:12px 24px;transition:var(--tr);cursor:pointer;border:none;font-family:var(--body);touch-action:manipulation}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 4px 14px rgba(11,33,20,.25)}
.btn-primary:hover{background:var(--navy-lt);transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--navy);font-weight:700;box-shadow:0 4px 14px rgba(217,164,65,.35)}
.btn-gold:hover{background:var(--gold-dk);color:#fff;transform:translateY(-2px)}
.btn-ghost-white{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.btn-ghost-white:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-ghost{border:1.5px solid var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn i{transition:transform .22s}
.btn:hover i.fa-arrow-right{transform:translateX(3px)}
.whatsapp-btn{background:#25D366 !important;color:#fff !important;box-shadow:0 4px 14px rgba(37,211,102,.3) !important}
.whatsapp-btn:hover{background:#1ebe59 !important;transform:translateY(-2px) !important}

/* ── HEADER ── */
/* Solid light header — matches the existing MontAche site */
#site-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:12px 0;transition:box-shadow var(--tr),padding var(--tr);background:#fff;border-bottom:1px solid var(--rule)}
#site-header.scrolled{box-shadow:var(--sh-sm);padding:8px 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.nav-logo img{height:42px;width:42px;object-fit:contain;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-family:var(--display);font-weight:800;font-size:1.06rem;letter-spacing:-.02em;color:var(--ink)}
.brand-sub{font-size:.62rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--forest);margin-top:2px}
@media(max-width:560px){.brand-sub{display:none}.nav-logo img{height:36px;width:36px}.brand-name{font-size:.98rem}}
/* Nav stays on the right as it was. Only the treatment changed: uppercase,
   light weight, letterspaced, with a small even gap between each link. */
.nav-menu{display:flex;align-items:center;gap:8px}
.nav-menu a{
  padding:7px 8px;border-radius:var(--r-sm);
  font-size:.7rem;font-weight:400;letter-spacing:.085em;text-transform:uppercase;
  color:var(--ink);transition:var(--tr);white-space:nowrap
}
.nav-menu a:hover,.nav-menu a.active{color:var(--forest);background:var(--wash)}
.nav-cta{background:var(--forest) !important;color:#fff !important;font-weight:600 !important;padding:9px 17px !important;border-radius:var(--r-sm) !important;font-size:.72rem !important;letter-spacing:.07em !important;box-shadow:0 3px 12px rgba(30,107,58,.28) !important;margin-left:10px}
.nav-cta:hover{background:var(--forest-lt) !important;color:#fff !important}

/* Hamburger - hidden on desktop */
.hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:38px;height:38px;background:var(--wash);border-radius:var(--r-sm);border:none;cursor:pointer;flex-shrink:0;transition:var(--tr)}
.hamburger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:var(--tr)}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── SLIDE-IN MOBILE NAV ── */
.mobile-nav-overlay{display:none;position:fixed;inset:0;background:rgba(11,33,20,.6);z-index:1100;opacity:0;transition:opacity .3s;backdrop-filter:blur(3px)}
.mobile-nav-overlay.open{display:block;opacity:1}
.mobile-nav{position:fixed;top:0;right:-300px;width:270px;max-width:80vw;height:100dvh;background:var(--navy);z-index:1200;display:flex;flex-direction:column;transition:right .32s cubic-bezier(.4,0,.2,1);overflow-y:auto;box-shadow:-4px 0 24px rgba(0,0,0,.3)}
.mobile-nav.open{right:0}
.mobile-nav-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}
/* the same logo as the bar it opens from — no filter, for the same reason as
   the footer: brightness(0) invert(1) throws the whole picture away and paints
   a flat white shape, which is a blank block on anything with its own
   background */
.mobile-nav-header img{height:36px;width:auto;max-width:170px;object-fit:contain}
.mobile-nav-close{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9rem;cursor:pointer;border:none;flex-shrink:0;transition:var(--tr)}
.mobile-nav-close:hover,.mobile-nav-close:active{background:rgba(255,255,255,.2)}
.mobile-nav-links{display:flex;flex-direction:column;padding:8px 0;flex:1}
.mobile-nav-links a{font-size:.95rem;color:rgba(255,255,255,.82);padding:13px 20px;border-bottom:1px solid rgba(255,255,255,.04);font-weight:500;transition:var(--tr);display:flex;align-items:center;justify-content:space-between;gap:10px}
.mobile-nav-links a:hover,.mobile-nav-links a.active{color:var(--gold);background:rgba(217,164,65,.07);padding-left:24px}
.mobile-nav-links a i{font-size:.65rem;opacity:.45}
.mobile-nav-footer{padding:16px 18px;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}
.mobile-nav-footer a{width:100%;justify-content:center;display:flex}

/* ── SHIMMER EFFECT on images ── */
.shimmer-wrap{position:relative;overflow:hidden}
.shimmer-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    110deg,
    transparent 20%,
    rgba(255,255,255,.25) 40%,
    rgba(255,230,180,.18) 50%,
    rgba(255,255,255,.25) 60%,
    transparent 80%
  );
  background-size:200% 100%;
  animation:shimmer-slide 3.5s linear infinite;
  pointer-events:none;
  z-index:1
}
@keyframes shimmer-slide{
  0%  {background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ── HERO SLIDER ── */
.hero-slider{position:relative;overflow:hidden;height:480px}
@media(max-width:900px){.hero-slider{height:380px}}
@media(max-width:600px){.hero-slider{height:300px}}
@media(max-width:400px){.hero-slider{height:270px}}

.slide{position:absolute;inset:0;opacity:0;transition:opacity .85s ease;display:flex;align-items:center;overflow:hidden}
.slide.active{opacity:1;z-index:1}
.slide-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform 6s ease}
.slide.active .slide-bg{transform:scale(1.04)}

/* shimmer on hero slides */
.slide::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    110deg,
    transparent 15%,
    rgba(255,255,255,.12) 35%,
    rgba(255,220,120,.1) 50%,
    rgba(255,255,255,.12) 65%,
    transparent 85%
  );
  background-size:250% 100%;
  animation:shimmer-slide 4s linear infinite;
  pointer-events:none;
  z-index:2
}

.slide-overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,33,20,.82) 0%,rgba(11,33,20,.5) 55%,rgba(11,33,20,.2) 100%);z-index:3}
.slide-content{position:relative;z-index:4;padding:0 0 0 0;max-width:600px}
@media(max-width:600px){.slide-content{max-width:100%}}

/* wipe text reveal - right to left */
.slide-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--gold);color:var(--navy);
  font-size:.7rem;font-weight:700;padding:5px 12px;
  border-radius:20px;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:12px;
  opacity:0;transform:translateX(30px);transition:opacity .5s .1s,transform .5s .1s
}
.slide-badge i{font-size:.62rem}
.slide h1{
  color:#fff;font-size:clamp(1.4rem,3.2vw,2.5rem);
  line-height:1.2;margin-bottom:10px;
  opacity:0;transform:translateX(40px);transition:opacity .55s .25s,transform .55s .25s
}
.slide p{
  color:rgba(255,255,255,.82);font-size:.9rem;line-height:1.7;margin-bottom:18px;
  opacity:0;transform:translateX(40px);transition:opacity .55s .4s,transform .55s .4s
}
.slide .btn{
  opacity:0;transform:translateX(30px);transition:opacity .5s .55s,transform .5s .55s
}
@media(max-width:480px){
  .slide h1{font-size:1.25rem}
  .slide p{font-size:.8rem;margin-bottom:14px}
}

/* Animate in when active */
.slide.active .slide-badge,
.slide.active h1,
.slide.active p,
.slide.active .btn{opacity:1;transform:translateX(0)}

/* slider controls */
.slider-arrows{position:absolute;bottom:18px;right:22px;display:flex;gap:7px;z-index:10}
@media(max-width:480px){.slider-arrows{bottom:10px;right:12px}}
.slider-arrow{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:rgba(11,33,20,.4);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;cursor:pointer;transition:var(--tr);backdrop-filter:blur(4px)}
.slider-arrow:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.slider-dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10}
@media(max-width:480px){.slider-dots{bottom:12px}}
.slider-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;transition:var(--tr);border:none}
.slider-dot.active{background:var(--gold);width:18px;border-radius:3px}

/* ── PAGE BANNER (inner pages - same style as slider) ── */
.page-banner{position:relative;overflow:hidden;height:340px;display:flex;align-items:center}
@media(max-width:768px){.page-banner{height:260px}}
@media(max-width:480px){.page-banner{height:220px}}
.page-banner-bg{position:absolute;inset:0;background-size:cover;background-position:center}
/* shimmer on page banners */
.page-banner::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    110deg,
    transparent 15%,
    rgba(255,255,255,.12) 38%,
    rgba(255,220,120,.1) 50%,
    rgba(255,255,255,.12) 62%,
    transparent 85%
  );
  background-size:250% 100%;
  animation:shimmer-slide 4s linear infinite;
  pointer-events:none;
  z-index:2
}
.page-banner-overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,33,20,.82) 0%,rgba(11,33,20,.5) 55%,rgba(11,33,20,.2) 100%);z-index:3}
.page-banner-content{position:relative;z-index:4}
/* Entrance uses `backwards` fill, not `forwards`: the element's resting state is
   already visible, so the banner still reads if the animation never runs. */
.page-banner h1{
  color:#fff;margin-bottom:8px;
  font-size:clamp(1.5rem,3.5vw,2.6rem);
  animation:banner-in .55s .2s backwards
}
.page-banner p{
  color:rgba(255,255,255,.75);max-width:560px;font-size:.9rem;
  animation:banner-in .5s .38s backwards
}
.page-banner .tag{animation:banner-in .45s .08s backwards}
.page-banner .breadcrumb{animation:banner-in .4s 0s backwards}
@keyframes banner-in{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:translateX(0)}}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:.75rem;color:rgba(255,255,255,.45);margin-bottom:10px}
.breadcrumb a{color:rgba(255,255,255,.6);transition:var(--tr)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{color:var(--gold)}

/* ── TRUST BAND ── */
.trust-band{background:var(--gold);padding:10px 0;overflow:hidden}
.trust-track{display:flex;gap:36px;align-items:center;animation:scroll-track 26s linear infinite;white-space:nowrap}
.trust-item{display:flex;align-items:center;gap:7px;flex-shrink:0;color:var(--navy);font-weight:600;font-size:.78rem}
.trust-item i{font-size:.65rem;opacity:.7}
.trust-dot{width:4px;height:4px;background:var(--navy);border-radius:50%;opacity:.3;flex-shrink:0}
@keyframes scroll-track{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── SECTION HEADER ── */
.section-header{margin-bottom:40px}
.section-header.centered{text-align:center}
.section-header h2{margin-top:8px}
.section-header p{margin-top:10px;color:var(--slate);line-height:1.75;max-width:560px}
.section-header.centered p{margin:10px auto 0}

/* ── SERVICES GRID ── */
.services-bg{background:var(--mist)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.services-grid{grid-template-columns:1fr}}

.service-card{background:#fff;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);transition:var(--tr);display:flex;flex-direction:column}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:transparent}
.service-card-img{height:170px;overflow:hidden;position:relative}
.service-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.service-card:hover .service-card-img img{transform:scale(1.06)}
/* shimmer on service images */
.service-card-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.2) 40%,rgba(255,220,150,.15) 50%,rgba(255,255,255,.2) 60%,transparent 80%);
  background-size:200% 100%;
  animation:shimmer-slide 3.5s linear infinite;
  pointer-events:none
}
.service-card-body{padding:18px;flex:1;display:flex;flex-direction:column}
.service-card-body h3{font-size:.98rem;margin-bottom:6px;color:var(--navy)}
.service-card-body p{font-size:.82rem;line-height:1.7;margin-bottom:12px;flex:1}
.service-link{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:var(--navy-mid);transition:var(--tr);margin-top:auto}
.service-link:hover{color:var(--gold-dk);gap:8px}

/* ── ABOUT ── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:32px}}
.about-img-wrap{position:relative;border-radius:var(--r-lg);overflow:hidden}
.about-img-wrap img{width:100%;height:400px;object-fit:cover;border-radius:var(--r-lg);display:block}
@media(max-width:560px){.about-img-wrap img{height:240px}}
/* shimmer on about image */
.about-img-wrap::after{
  content:'';position:absolute;inset:0;border-radius:var(--r-lg);
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.18) 40%,rgba(255,220,150,.12) 50%,rgba(255,255,255,.18) 60%,transparent 80%);
  background-size:220% 100%;
  animation:shimmer-slide 4s linear infinite;
  pointer-events:none
}
.about-badge{position:absolute;bottom:16px;right:16px;background:var(--navy);color:#fff;border-radius:var(--r-md);padding:14px 18px;box-shadow:var(--sh-md);text-align:center;z-index:2}
.about-badge-num{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--gold);line-height:1}
.about-badge-text{font-size:.65rem;color:rgba(255,255,255,.5);margin-top:3px}
.trust-logos{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.trust-logos img{height:40px;width:auto;object-fit:contain;filter:grayscale(30%);transition:filter var(--tr)}
.trust-logos img:hover{filter:none}
.about-pillars{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 22px}
.about-pillar{padding:12px;background:var(--mist);border-radius:var(--r-sm);border:1px solid var(--border)}
.about-pillar i{font-size:1rem;color:var(--gold-dk);margin-bottom:5px}
.about-pillar strong{display:block;font-size:.82rem;color:var(--navy);margin-bottom:1px}
.about-pillar span{font-size:.72rem;color:var(--slate)}

/* ── STATS ── */
.stats-section{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);position:relative;overflow:hidden}
.stats-section::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(217,164,65,.08) 0%,transparent 50%)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
@media(max-width:650px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
.stat-card{padding:36px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.08)}
.stat-card:last-child{border-right:none}
@media(max-width:650px){.stat-card:nth-child(2){border-right:none}.stat-card:nth-child(3){border-right:1px solid rgba(255,255,255,.08)}}
.stat-num{font-family:var(--display);font-size:2.6rem;font-weight:700;color:var(--gold);line-height:1;margin-bottom:5px}
.stat-label{font-size:.74rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em}

/* ── WHY US ── */
.why-us{background:var(--mist)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
@media(max-width:860px){.why-grid{grid-template-columns:1fr;gap:32px}}
.why-features{display:flex;flex-direction:column;gap:12px}
.why-feature{display:flex;gap:14px;padding:16px 18px;background:#fff;border-radius:var(--r-md);border:1px solid var(--border);transition:var(--tr);align-items:flex-start}
.why-feature:hover{border-color:var(--gold);box-shadow:var(--sh-sm)}
.why-icon{width:38px;height:38px;border-radius:10px;background:var(--sky);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--navy-mid);font-size:.88rem}
.why-feature h4{font-size:.88rem;margin-bottom:3px;color:var(--navy)}
.why-feature p{font-size:.8rem}
.testimonial-card{background:var(--navy);border-radius:var(--r-lg);padding:30px;position:relative;overflow:hidden}
.testimonial-card::before{content:'\201C';position:absolute;top:-10px;right:16px;font-size:6rem;opacity:.07;font-family:Georgia,serif;color:#fff;line-height:1}
/* shimmer on testimonial card */
.testimonial-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.06) 40%,rgba(255,220,150,.04) 50%,rgba(255,255,255,.06) 60%,transparent 80%);
  background-size:220% 100%;
  animation:shimmer-slide 4s linear infinite;
  pointer-events:none
}
.quote-img{width:50px;height:50px;border-radius:var(--r-sm);object-fit:cover;margin-bottom:14px;border:2px solid rgba(255,255,255,.12);position:relative;z-index:1}
.testimonial-text{font-family:var(--display);font-size:1rem;line-height:1.65;color:rgba(255,255,255,.9);font-style:italic;margin-bottom:16px;position:relative;z-index:1}
.testimonial-author{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.author-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.author-name{font-weight:700;font-size:.84rem;color:#fff}
.author-role{font-size:.72rem;color:rgba(255,255,255,.5)}
.stars{display:flex;gap:2px;margin-bottom:12px;position:relative;z-index:1}
.stars i{color:var(--gold);font-size:.78rem}
.cert-tag{display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:var(--navy);border-radius:var(--r-sm);padding:7px 12px;font-size:.75rem;font-weight:700;margin-top:16px;position:relative;z-index:1}

/* ── CTA BANNER ── */
.cta-banner{background:linear-gradient(135deg,var(--gold) 0%,#E8B85C 100%);position:relative;overflow:hidden}
.cta-banner::before{content:'';position:absolute;width:300px;height:300px;border-radius:50%;border:44px solid rgba(255,255,255,.15);top:-80px;right:-60px;pointer-events:none}
.cta-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px}
@media(max-width:680px){.cta-inner{flex-direction:column;text-align:center}}
.cta-text h2{color:var(--navy);margin-bottom:6px}
.cta-text p{color:rgba(11,33,20,.65);max-width:440px}
.cta-actions{display:flex;gap:10px;flex-shrink:0;flex-wrap:wrap}
@media(max-width:680px){.cta-actions{justify-content:center}}

/* ── BLOG ── */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.blog-grid{grid-template-columns:1fr}}
.blog-card{border-radius:var(--r-md);overflow:hidden;background:#fff;border:1px solid var(--border);transition:var(--tr);cursor:pointer}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:transparent}
.blog-thumb{aspect-ratio:16/9;overflow:hidden;position:relative}
.blog-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s;display:block}
.blog-card:hover .blog-thumb img{transform:scale(1.05)}
/* shimmer on blog images */
.blog-thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.2) 40%,rgba(255,220,150,.14) 50%,rgba(255,255,255,.2) 60%,transparent 80%);
  background-size:200% 100%;
  animation:shimmer-slide 3.5s linear infinite;
  pointer-events:none
}
.blog-cat{position:absolute;top:10px;left:10px;background:var(--navy);color:#fff;font-size:.65rem;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.06em;text-transform:uppercase;z-index:1}
.blog-body{padding:18px}
.blog-meta{font-size:.72rem;color:var(--slate);margin-bottom:7px;display:flex;align-items:center;gap:5px}
.blog-body h3{font-size:.93rem;color:var(--navy);margin-bottom:7px;line-height:1.4}
.blog-body p{font-size:.8rem;line-height:1.7;margin-bottom:12px}
.blog-link{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:var(--navy-mid);transition:var(--tr)}
.blog-link:hover{color:var(--gold-dk);gap:8px}

/* ── BLOG MODAL ── */
.blog-modal-overlay{display:none;position:fixed;inset:0;background:rgba(11,33,20,.7);z-index:2000;backdrop-filter:blur(6px);padding:16px;overflow-y:auto;align-items:flex-start;justify-content:center}
.blog-modal-overlay.active{display:flex}
.blog-modal-box{background:#fff;border-radius:var(--r-lg);width:100%;max-width:680px;margin:auto;position:relative;overflow:hidden;animation:modal-in .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes modal-in{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.blog-modal-hero{width:100%;height:220px;object-fit:cover;display:block}
@media(max-width:480px){.blog-modal-hero{height:160px}}
.blog-modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:rgba(11,33,20,.6);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:.82rem;transition:var(--tr);border:none;z-index:10}
.blog-modal-close:hover{background:var(--navy)}
.blog-modal-body{padding:28px}
@media(max-width:480px){.blog-modal-body{padding:20px 16px}}
.blog-modal-cat{display:inline-block;background:var(--navy);color:#fff;font-size:.65rem;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.blog-modal-body h2{font-size:1.3rem;color:var(--navy);margin-bottom:8px;line-height:1.3}
@media(max-width:480px){.blog-modal-body h2{font-size:1.1rem}}
.blog-modal-meta{font-size:.74rem;color:var(--slate);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.blog-modal-body p{font-size:.86rem;line-height:1.8;color:var(--slate);margin-bottom:12px}

/* ── CONTACT / FORMS ── */
.contact-section{background:var(--mist)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:32px}}
.contact-items{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.contact-item{display:flex;gap:12px;align-items:flex-start}
.contact-icon{width:38px;height:38px;border-radius:var(--r-sm);background:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold);font-size:.85rem}
.contact-item-content strong{display:block;font-size:.82rem;color:var(--navy);margin-bottom:1px}
.contact-item-content span,.contact-item-content a{font-size:.8rem;color:var(--slate)}
.whatsapp-link{color:#25D366 !important;font-weight:600;display:flex;align-items:center;gap:4px}
.form-box{background:#fff;border-radius:var(--r-lg);padding:32px;box-shadow:var(--sh-sm);border:1px solid var(--border)}
@media(max-width:480px){.form-box{padding:20px 16px}}
.form-box h3{font-size:1.1rem;margin-bottom:5px}
.form-note{font-size:.75rem;color:var(--slate);margin-bottom:18px;display:flex;align-items:center;gap:5px}
.form-note i{color:#25D366}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.form-row{grid-template-columns:1fr}}
.form-group{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.form-group label{font-size:.75rem;font-weight:600;color:var(--navy)}
.form-group input,.form-group select,.form-group textarea{
  padding:11px 13px;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-family:var(--body);color:var(--navy);background:var(--mist);
  transition:border-color var(--tr);outline:none;width:100%;
  font-size:16px !important; /* prevent zoom on iOS */
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--navy);background:#fff}
.form-group textarea{resize:vertical;min-height:100px}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(104,116,122,.4);font-size:14px}
.form-submit .btn{width:100%;justify-content:center;padding:13px}

/* ── FAQs ── */
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;transition:var(--tr)}
.faq-item.open{border-color:var(--navy)}
.faq-question{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;cursor:pointer;gap:14px}
.faq-question h4{font-size:.88rem;color:var(--navy);font-family:var(--body);font-weight:600}
.faq-toggle{width:26px;height:26px;border-radius:50%;background:var(--mist);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--tr);color:var(--slate);font-size:.7rem}
.faq-item.open .faq-toggle{background:var(--navy);color:#fff;transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .38s ease}
.faq-item.open .faq-answer{max-height:220px}
.faq-answer p{padding:0 20px 16px;font-size:.83rem;line-height:1.8;border-top:1px solid var(--border);padding-top:12px}

/* ── FOOTER ── */
#site-footer{background:linear-gradient(145deg,var(--navy) 0%,#061108 100%);padding:64px 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:36px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.07)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;gap:24px}}
/* THE FOOTER LOGO IS THE NAVIGATION BAR'S LOGO — the same file, drawn the same
   way. It used to carry `filter:brightness(0) invert(1)`, which throws away
   every colour in the picture and paints whatever is left flat white. On a logo
   with a see-through background that left a tidy white silhouette; on one with
   its own background — or on a mark that is already white — it turned the whole
   rectangle into a solid white block. That is the blank white box that was
   showing where the logo should be. There is no filter now, so what the
   navigation bar shows is exactly what the footer shows. */
.footer-logo img{height:42px;width:auto;max-width:190px;object-fit:contain;display:block;margin-bottom:12px}
.footer-brand p{color:rgba(255,255,255,.4);font-size:.8rem;line-height:1.8;margin-bottom:16px;max-width:240px}
.footer-socials{display:flex;gap:7px;flex-wrap:wrap}
.social-btn{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-size:.78rem;transition:var(--tr)}
.social-btn:hover{background:var(--gold);color:var(--navy)}
.footer-col h5{font-family:var(--body);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.28);margin-bottom:14px}
.footer-links{display:flex;flex-direction:column;gap:13px}
.footer-links a{font-size:.82rem;color:rgba(255,255,255,.5);transition:var(--tr);display:flex;align-items:center;gap:7px;letter-spacing:.01em}
.footer-links a i{font-size:.55rem;opacity:.45}
.footer-links a:hover{color:var(--gold);padding-left:3px}
.newsletter-form{display:flex;gap:5px;margin-top:10px}
.newsletter-form input{flex:1;padding:8px 11px;border-radius:var(--r-sm);border:1.5px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#fff;font-family:var(--body);font-size:16px !important;outline:none}
.newsletter-form input::placeholder{color:rgba(255,255,255,.25)}
.newsletter-form input:focus{border-color:var(--gold)}
.newsletter-form button{background:var(--gold);color:var(--navy);border:none;border-radius:var(--r-sm);padding:8px 12px;font-size:.78rem;font-weight:700;cursor:pointer;transition:var(--tr);white-space:nowrap}
.newsletter-form button:hover{background:#fff}
.footer-bottom{padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer-bottom p{font-size:.72rem;color:rgba(255,255,255,.26)}
.footer-bottom-links{display:flex;gap:16px;flex-wrap:wrap}
.footer-bottom-links a{font-size:.72rem;color:rgba(255,255,255,.26);transition:var(--tr)}
.footer-bottom-links a:hover{color:#fff}

/* ── MODAL (quote) ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(11,33,20,.65);z-index:3000;backdrop-filter:blur(6px);padding:16px;overflow-y:auto;align-items:center;justify-content:center}
.modal-overlay.active{display:flex}
.modal-box{background:#fff;border-radius:var(--r-lg);padding:36px;max-width:480px;width:100%;position:relative;animation:modal-in .3s cubic-bezier(.34,1.56,.64,1);margin:auto}
@media(max-width:480px){.modal-box{padding:24px 16px}}
.modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:var(--mist);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--slate);font-size:.78rem;transition:var(--tr);border:none}
.modal-close:hover{background:var(--border)}

/* ══════════════════════════════════════════════════════════════════════════
   SCROLL ANIMATION SYSTEM
   Content is fully visible by default. The "hidden" start state only applies
   while .js-enabled is on <html>, so nothing can ever be trapped off-screen.
   Put ONE direction class on an element; it animates when scrolled into view:
       .anim-left  .anim-right  .anim-up  .anim-down  .anim-zoom  .anim-pop
   `.reveal` on its own behaves like .anim-up.
   Add .d1 … .d6 to stagger siblings, or wrap a grid in .stagger.
   ══════════════════════════════════════════════════════════════════════════ */
.js-enabled .reveal,
.js-enabled .anim-left,
.js-enabled .anim-right,
.js-enabled .anim-up,
.js-enabled .anim-down,
.js-enabled .anim-zoom,
.js-enabled .anim-pop{
  opacity:0;
  will-change:transform,opacity;
  transition-property:opacity,transform;
  transition-duration:1s;
  transition-timing-function:cubic-bezier(.19,.85,.25,1)
}
.js-enabled .reveal,
.js-enabled .anim-up{transform:translateY(80px) scale(.97)}
.js-enabled .anim-down{transform:translateY(-80px) scale(.97)}
.js-enabled .anim-left{transform:translateX(-120px)}
.js-enabled .anim-right{transform:translateX(120px)}
.js-enabled .anim-zoom{transform:scale(.8)}
.js-enabled .anim-pop{transform:scale(.55) rotate(-9deg)}

.js-enabled .reveal.in-view,
.js-enabled .anim-left.in-view,
.js-enabled .anim-right.in-view,
.js-enabled .anim-up.in-view,
.js-enabled .anim-down.in-view,
.js-enabled .anim-zoom.in-view,
.js-enabled .anim-pop.in-view{opacity:1;transform:none}

.reveal-delay-1,.d1{transition-delay:.08s}
.reveal-delay-2,.d2{transition-delay:.16s}
.reveal-delay-3,.d3{transition-delay:.24s}
.reveal-delay-4,.d4{transition-delay:.32s}
.d5{transition-delay:.4s}
.d6{transition-delay:.48s}
.d7{transition-delay:.56s}
.d8{transition-delay:.64s}

/* Cascade: children animate one after another when the parent enters view */
.js-enabled .stagger > *{
  opacity:0;transform:translateY(64px);
  transition:opacity .85s cubic-bezier(.19,.85,.25,1),transform .85s cubic-bezier(.19,.85,.25,1)
}
.js-enabled .stagger.in-view > *{opacity:1;transform:none}
.js-enabled .stagger.in-view > *:nth-child(1){transition-delay:.04s}
.js-enabled .stagger.in-view > *:nth-child(2){transition-delay:.11s}
.js-enabled .stagger.in-view > *:nth-child(3){transition-delay:.18s}
.js-enabled .stagger.in-view > *:nth-child(4){transition-delay:.25s}
.js-enabled .stagger.in-view > *:nth-child(5){transition-delay:.32s}
.js-enabled .stagger.in-view > *:nth-child(6){transition-delay:.39s}
.js-enabled .stagger.in-view > *:nth-child(7){transition-delay:.46s}
.js-enabled .stagger.in-view > *:nth-child(8){transition-delay:.53s}
.js-enabled .stagger.in-view > *:nth-child(9){transition-delay:.6s}
.js-enabled .stagger.in-view > *:nth-child(10){transition-delay:.67s}
.js-enabled .stagger.in-view > *:nth-child(11){transition-delay:.74s}
.js-enabled .stagger.in-view > *:nth-child(12){transition-delay:.81s}
.js-enabled .stagger.in-view > *:nth-child(n+13){transition-delay:.88s}

/* ── RESPONSIVE SHOW/HIDE ── */
@media(max-width:1180px){
  .nav-menu{display:none}
  .hamburger{display:flex}
}
@media(min-width:1181px){
  .hamburger{display:none}
  .mobile-nav,.mobile-nav-overlay{display:none !important}
}

/* ==========================================================================
   MONTA CHE — component layer
   Built on top of the Empower Life base so every page shares one vocabulary.
   ========================================================================== */

/* ── PLACEHOLDER CHIP (content the client still has to supply) ── */
.ph{
  display:inline-block;background:#FFF4D6;color:#8A6410;
  border:1px dashed #B8860B;border-radius:4px;
  padding:0 6px;font-size:.85em;font-weight:700
}

/* ── TYPE HELPERS ── */
.lead{font-size:1.02rem;line-height:1.8;color:var(--slate);max-width:640px}
.lead-strong{color:var(--forest);font-weight:600}
.text-center{text-align:center}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}
.mb-0{margin-bottom:0}
.eyebrow-row{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.eyebrow-row::after{content:'';flex:1;height:1px;background:var(--rule);max-width:180px}

/* ── LAYOUT ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:32px}}
.split-wide{grid-template-columns:1.15fr .85fr}
.split-img{border-radius:var(--r-lg);overflow:hidden;position:relative}
.split-img img{width:100%;height:420px;object-fit:cover;display:block}
@media(max-width:560px){.split-img img{height:250px}}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ── DARK BAND ── */
.dark-band{background:linear-gradient(135deg,var(--ink) 0%,#12291A 100%);color:#fff;position:relative;overflow:hidden}
.dark-band::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 15% 40%,rgba(217,164,65,.10) 0%,transparent 55%)}
.dark-band .container{position:relative}
.dark-band h2,.dark-band h3,.dark-band h4{color:#fff}
.dark-band p{color:rgba(255,255,255,.72)}

/* ── PULL QUOTE BAND ── */
.quote-band{background:var(--wash);padding:64px 0}
.quote-band blockquote{
  font-family:var(--display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.1rem,2.6vw,1.9rem);line-height:1.35;color:var(--forest);
  max-width:820px;margin:0 auto;text-align:center
}
.quote-band .quote-src{display:block;margin-top:16px;font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}

/* ── CHECK LIST ── */
.check-list{display:grid;grid-template-columns:1fr 1fr;gap:11px 22px}
@media(max-width:640px){.check-list{grid-template-columns:1fr}}
.check-list li{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;line-height:1.65;color:var(--slate)}
.check-list li i{color:var(--forest);font-size:.72rem;margin-top:5px;flex-shrink:0}
.check-list.dark li{color:rgba(255,255,255,.75)}
.check-list.dark li i{color:var(--moss)}

/* ── PILLS ── */
.pill-list{display:flex;flex-wrap:wrap;gap:8px}
.pill{background:var(--wash);border:1px solid var(--rule);color:var(--ink);border-radius:30px;padding:7px 15px;font-size:.76rem;font-weight:600}
.pill-dark{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.85)}

/* ── VALUE CHAIN BAR DIAGRAM ── */
.chain-figure{margin-top:36px}
.chain-row{display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:center;margin-bottom:20px}
@media(max-width:700px){.chain-row{grid-template-columns:1fr;gap:8px}}
.chain-label{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--forest)}
.chain-label span{display:block;text-transform:none;letter-spacing:0;font-weight:400;font-size:.76rem;color:var(--slate);margin-top:4px}
.chain-bar{display:flex;height:54px;border-radius:6px;overflow:hidden;border:1px solid var(--rule)}
.chain-seg{
  display:flex;align-items:center;justify-content:center;
  font-size:.76rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;
  transition:background var(--tr)
}
.chain-seg.muted{background:#E7EAE7;color:var(--slate)}
.chain-cap{font-size:.78rem;color:var(--slate);margin:2px 0 26px;padding-left:190px}
@media(max-width:700px){.chain-cap{padding-left:0}}

/* ── SDG GRID ── */
.sdg-grid{display:flex;flex-wrap:wrap;gap:10px}
.sdg-pill{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--paper);border:1px solid var(--rule);border-radius:40px;
  padding:7px 17px 7px 7px;font-size:.8rem;font-weight:600;color:var(--ink);
  cursor:pointer;transition:var(--tr);text-align:left
}
.sdg-pill:hover{border-color:var(--forest);box-shadow:var(--sh-sm);transform:translateY(-2px)}
.sdg-num{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:var(--forest);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;font-family:var(--display)
}
.sdg-pill.support .sdg-num{background:var(--moss);color:var(--ink)}

/* ── VALUE / FEATURE CARDS ── */
.value-card{background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);padding:24px;transition:var(--tr);height:100%}
.value-card:hover{border-color:var(--moss);box-shadow:var(--sh-sm);transform:translateY(-3px)}
.value-card i{font-size:1.1rem;color:var(--forest);margin-bottom:12px;display:block}
.value-card h3{font-size:.98rem;margin-bottom:8px}
.value-card p{font-size:.82rem;line-height:1.7}

/* ── ICON BADGE ── */
.icon-badge{
  width:52px;height:52px;border-radius:14px;background:var(--wash);
  display:flex;align-items:center;justify-content:center;
  color:var(--forest);font-size:1.15rem;margin-bottom:16px
}
.icon-badge.gold{background:rgba(217,164,65,.15);color:var(--gold-dk)}

/* ── NUMBERED STEPS ── */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}
.step{border-top:3px solid var(--forest);padding-top:16px}
.step-num{font-family:var(--display);font-size:1.7rem;font-weight:800;color:var(--moss);line-height:1;margin-bottom:8px}
.step h3{font-size:.95rem;margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;font-weight:700;color:var(--forest)}
.step p{font-size:.8rem;line-height:1.7}

/* ── TEAM ── */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.team-grid{grid-template-columns:1fr}}
.team-card{background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;transition:var(--tr)}
.team-card:hover{box-shadow:var(--sh-md);transform:translateY(-4px)}
.team-photo{aspect-ratio:1;overflow:hidden;background:var(--wash)}
.team-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.team-card:hover .team-photo img{transform:scale(1.05)}
.team-body{padding:20px}
.team-body h3{font-size:1rem;margin-bottom:3px}
.team-role{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--forest);margin-bottom:10px}
.team-body p{font-size:.8rem;line-height:1.7}

/* ── GALLERY ── */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.gallery-grid{grid-template-columns:1fr}}
.gallery-item{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;background:var(--wash)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .55s;display:block}
.gallery-item:hover img{transform:scale(1.06)}
.gallery-cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
  background:linear-gradient(transparent,rgba(11,33,20,.82));
  color:#fff;font-size:.78rem;font-weight:600
}
.gallery-item.tall{aspect-ratio:3/4}

/* ── PHASE / TIMELINE CARDS ── */
.phase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.phase-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.phase-grid{grid-template-columns:1fr}}
.phase-card{background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);padding:22px;transition:var(--tr)}
.phase-card:hover{border-color:var(--moss);box-shadow:var(--sh-sm)}
.phase-tag{display:inline-block;background:var(--forest);color:#fff;border-radius:20px;padding:4px 12px;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.phase-card h3{font-size:.95rem;margin-bottom:8px}
.phase-card p{font-size:.8rem;line-height:1.7}

/* ── STAT TILES (dark) ── */
.stat-tile{text-align:center;padding:8px 12px}
.stat-tile .n{font-family:var(--display);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;color:var(--gold);line-height:1;letter-spacing:-.02em}
.stat-tile .l{font-size:.76rem;color:rgba(255,255,255,.62);margin-top:8px;line-height:1.5}

/* ── BADGE ON IMAGE ── */
.img-badge{
  position:absolute;left:0;bottom:0;background:#fff;border-left:3px solid var(--forest);
  padding:14px 20px;border-radius:0 var(--r-md) 0 0;max-width:75%
}
.img-badge .n{font-family:var(--display);font-size:1.35rem;font-weight:800;color:var(--forest);line-height:1}
.img-badge .t{font-size:.72rem;color:var(--slate);margin-top:4px;line-height:1.5}

/* ── ROUND WHATSAPP BUTTON — on every page ── */
.wa-fab{
  position:fixed;right:22px;bottom:22px;z-index:1500;
  width:60px;height:60px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.85rem;line-height:1;
  box-shadow:0 10px 28px rgba(37,211,102,.42);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s
}
.wa-fab i{position:relative;z-index:2}
.wa-fab::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(37,211,102,.75);
  animation:wa-pulse 2.6s ease-out infinite;pointer-events:none
}
@keyframes wa-pulse{
  0%{transform:scale(1);opacity:.85}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}
.wa-fab:hover{transform:scale(1.1);box-shadow:0 14px 34px rgba(37,211,102,.55)}
@media(max-width:560px){
  .wa-fab{right:14px;bottom:14px;width:52px;height:52px;font-size:1.55rem}
}

/* ── DEVELOPER CREDIT ── */
.dev-credit{color:rgba(255,255,255,.62);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22);transition:var(--tr)}
.dev-credit:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* ── WHATSAPP / CONTACT OVERRIDES ── */
.contact-icon.green{background:var(--forest)}
.contact-icon.green i{color:#fff}

/* ── TABLE (impact / governance) ── */
.data-table{width:100%;border-collapse:collapse;font-size:.84rem}
.data-table th{text-align:left;font-family:var(--body);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);padding:10px 14px;border-bottom:2px solid var(--forest)}
.data-table td{padding:13px 14px;border-bottom:1px solid var(--rule);color:var(--slate);vertical-align:top}
.data-table tr:last-child td{border-bottom:none}

/* ── 404 / EMPTY ── */
.center-box{max-width:620px;margin:0 auto;text-align:center;padding:80px 24px}

/* ── NAV: tighten on smaller laptops so all ten links fit on one line ── */
@media(min-width:1181px) and (max-width:1520px){
  .nav-menu{gap:4px}
  .nav-menu a{padding:7px 5px;font-size:.645rem;letter-spacing:.045em}
  .nav-logo img{height:34px;width:34px}
  .brand-sub{display:none}
  .nav-cta{padding:8px 11px !important;font-size:.665rem !important}
}

/* ── ACCESSIBILITY: respect reduced-motion ──
   Everything becomes immediately visible and all movement stops. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js-enabled .reveal,
  .js-enabled .reveal.in-view,
  .js-enabled .anim-left,.js-enabled .anim-left.in-view,
  .js-enabled .anim-right,.js-enabled .anim-right.in-view,
  .js-enabled .anim-up,.js-enabled .anim-up.in-view,
  .js-enabled .anim-down,.js-enabled .anim-down.in-view,
  .js-enabled .anim-zoom,.js-enabled .anim-zoom.in-view,
  .js-enabled .anim-pop,.js-enabled .anim-pop.in-view,
  .js-enabled .stagger > *{opacity:1 !important;transform:none !important;transition:none !important}
  .page-banner h1,.page-banner p,.page-banner .tag,.page-banner .breadcrumb,
  .slide h1,.slide p,.slide-badge,.slide .btn{opacity:1 !important;transform:none !important}
  .slide.active .slide-bg{transform:none !important}
  .trust-track{animation:none !important}
  .stat-num[data-count]{opacity:1}
  /* tree is drawn fully; rings stop pulsing */
  .tree{--grow:1 !important}
  .tree-trunk{stroke-dashoffset:0 !important}
  .tree-tip{opacity:0 !important}
  .story-img,.ring,.tree-node-dot{animation:none !important}
  .wa-fab::after{animation:none !important}
}

/* ==========================================================================
   MONTA CHE — component layer 2
   Counters · static-background bands · approach cards · ringed portrait
   growing tree · journey timeline · tabbed gallery · team cards · hovers
   ========================================================================== */

/* ── 1. COUNTER CARDS (sits directly under the hero + credential band) ── */
.counter-sec{background:var(--wash);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.counter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:980px){.counter-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:400px){.counter-grid{gap:12px}}
.counter-card{
  position:relative;overflow:hidden;text-align:center;
  background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);
  padding:28px 18px;box-shadow:var(--sh-sm);
  transition:transform .35s cubic-bezier(.19,.85,.25,1),box-shadow .35s,border-color .35s
}
.counter-card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--forest),var(--leaf),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.19,.85,.25,1)
}
.counter-card:hover{transform:translateY(-8px);box-shadow:var(--sh-md);border-color:var(--moss)}
.counter-card:hover::before{transform:scaleX(1)}
.counter-ico{
  width:44px;height:44px;border-radius:13px;background:var(--wash);color:var(--forest);
  display:flex;align-items:center;justify-content:center;margin:0 auto 15px;font-size:1rem;
  transition:background .35s,color .35s,transform .35s
}
.counter-card:hover .counter-ico{background:var(--forest);color:#fff;transform:rotate(-6deg) scale(1.06)}
.counter-num{
  font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1;
  font-size:clamp(1.55rem,3.1vw,2.15rem);color:var(--forest);
  font-variant-numeric:tabular-nums
}
.counter-label{font-size:.78rem;line-height:1.55;color:var(--slate);margin-top:11px}
@media(max-width:400px){
  .counter-card{padding:22px 12px}
  .counter-num{font-size:1.4rem}
  .counter-label{font-size:.7rem}
}

/* ── 2. STATIC BACKGROUND BANDS (content scrolls over the image) ── */
.bg-fixed{position:relative;background:var(--ink)}
.bg-fixed-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-attachment:fixed
}
@media(max-width:1024px),(hover:none){.bg-fixed-bg{background-attachment:scroll}}
.bg-fixed-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,33,20,.86) 0%,rgba(11,33,20,.74) 45%,rgba(11,33,20,.90) 100%)
}
.bg-fixed > .container{position:relative;z-index:2}
.bg-fixed h2,.bg-fixed h3,.bg-fixed h4{color:#fff}
.bg-fixed p{color:rgba(255,255,255,.74)}

/* ── 3. APPROACH (Learn. Innovate. Produce. Scale.) ── */
.approach{padding:86px 0}
.approach .section-header p{color:rgba(255,255,255,.7)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:560px){.steps{grid-template-columns:1fr;gap:14px}}
.step{
  position:relative;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);
  padding:28px 22px 30px;
  box-shadow:0 14px 40px rgba(0,0,0,.28);
  backdrop-filter:blur(6px);
  transition:transform .4s cubic-bezier(.19,.85,.25,1),background .4s,border-color .4s,box-shadow .4s;
  overflow:hidden
}
.step::after{
  content:'';position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--gold),var(--leaf));
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.19,.85,.25,1)
}
.step:hover{
  transform:translateY(-12px) scale(1.02);
  background:rgba(255,255,255,.1);
  border-color:rgba(197,220,203,.5);
  box-shadow:0 26px 60px rgba(0,0,0,.42)
}
.step:hover::after{transform:scaleX(1)}
.step-num{
  font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1;
  color:rgba(197,220,203,.42);margin-bottom:14px;letter-spacing:-.03em;
  transition:color .4s,transform .4s
}
.step:hover .step-num{color:var(--gold);transform:translateY(-3px)}
.step h3{
  font-family:var(--body);font-size:.8rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--moss);margin-bottom:10px
}
.step p{font-size:.82rem;line-height:1.7;color:rgba(255,255,255,.72)}

/* ── 4. RINGED ROUND PORTRAIT (Our Story) ── */
.story-media{
  position:relative;width:100%;max-width:470px;aspect-ratio:1;
  margin:0 auto;display:flex;align-items:center;justify-content:center
}
.story-media .ring{
  position:absolute;border-radius:50%;border:2px solid var(--moss);
  animation:ring-pulse 5s ease-in-out infinite
}
.story-media .ring-1{width:84%;height:84%;opacity:.7}
.story-media .ring-2{width:100%;height:100%;animation-delay:1.1s;opacity:.45}
@keyframes ring-pulse{
  0%,100%{transform:scale(.93);opacity:.4}
  50%{transform:scale(1.05);opacity:.85}
}
.story-media .story-img{
  position:relative;z-index:2;width:74%;height:74%;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 10px #fff,0 18px 40px rgba(11,33,20,.22);
  animation:portrait-shadow 5s ease-in-out infinite
}
@keyframes portrait-shadow{
  0%,100%{box-shadow:0 0 0 10px #fff,0 14px 34px rgba(11,33,20,.18)}
  50%{box-shadow:0 0 0 10px #fff,0 30px 70px rgba(30,107,58,.42)}
}
@media(max-width:860px){.story-media{max-width:360px}}
@media(max-width:520px){.story-media{max-width:280px}.story-media .story-img{box-shadow:0 0 0 7px #fff}}

/* ── 5. GROWING TREE (Our Commitment / SDGs) ── */
.tree{--tree-rail:64px;--tree-arm:32px;--grow:1;display:grid;grid-template-columns:var(--tree-rail) 1fr}
.tree-rail{position:relative}
.tree-rail::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;
  background:var(--rule);border-radius:3px
}
.tree-rail::after{
  content:'';position:absolute;left:50%;top:0;width:3px;margin-left:-1.5px;
  height:calc(var(--grow) * 100%);
  background:linear-gradient(180deg,var(--forest),var(--leaf));
  border-radius:3px;transition:height .12s linear
}
.tree-tip{
  position:absolute;left:50%;top:calc(var(--grow) * 100%);margin-left:-9px;
  width:18px;height:18px;border-radius:50%;
  transform:translateY(-50%);z-index:4;
  background:radial-gradient(circle,#7BE0A0 0%,var(--forest) 70%);
  box-shadow:0 0 0 7px rgba(30,107,58,.16),0 0 26px rgba(62,156,92,.85);
  transition:top .12s linear
}
.tree-items{display:flex;flex-direction:column;gap:14px}
.sdg-card{
  position:relative;display:flex;align-items:center;gap:15px;width:100%;text-align:left;
  background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);
  padding:15px 20px;cursor:pointer;font-family:var(--body);
  box-shadow:0 2px 10px rgba(11,33,20,.05);
  transition:transform .38s cubic-bezier(.19,.85,.25,1),box-shadow .38s,border-color .38s,background .38s
}
.sdg-card::before{
  content:'';position:absolute;left:calc(-1 * var(--tree-arm));top:50%;
  width:var(--tree-arm);height:2px;background:var(--moss);transition:background .4s
}
.sdg-card .node{
  position:absolute;left:calc(-1 * var(--tree-arm));top:50%;
  width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;
  background:#fff;border:3px solid var(--forest);
  transition:border-color .4s,box-shadow .4s,background .4s
}
.sdg-card:hover{
  transform:translateX(10px);border-color:var(--forest);background:var(--forest);
  box-shadow:0 18px 42px rgba(30,107,58,.3)
}
.sdg-card:hover::before{background:var(--forest)}
.sdg-card:hover .node{border-color:var(--forest);background:var(--gold);box-shadow:0 0 0 6px rgba(217,164,65,.28)}
.sdg-card:hover .sdg-num{background:rgba(255,255,255,.18);color:#fff}
.sdg-card:hover .sdg-title{color:#fff}
.sdg-card:hover .sdg-tag{color:rgba(255,255,255,.82)}
.sdg-card:hover .sdg-go{opacity:1;transform:translateX(0);color:#fff}
.sdg-num{
  width:38px;height:38px;flex-shrink:0;border-radius:50%;
  background:var(--forest);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:.82rem;font-weight:700;
  transition:background .38s,color .38s
}
.sdg-card.support .sdg-num{background:var(--moss);color:var(--ink)}
.sdg-body{flex:1;min-width:0}
.sdg-title{display:block;font-size:.92rem;font-weight:700;color:var(--ink);transition:color .38s}
.sdg-tag{display:block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--forest);margin-top:3px;transition:color .38s}
.sdg-card.support .sdg-tag{color:var(--slate)}
.sdg-go{opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s,color .35s;font-size:.8rem;flex-shrink:0}
@media(max-width:620px){
  .tree{--tree-rail:54px;--tree-arm:27px}
  .sdg-card{padding:13px 14px;gap:11px}
  .sdg-card .sdg-num{width:32px;height:32px;font-size:.74rem}
  .sdg-title{font-size:.84rem}
  .sdg-card:hover{transform:translateX(5px)}
}

/* ── 6. JOURNEY TIMELINE ── */
.timeline{--grow:1;position:relative;padding:8px 0}
.tl-line{
  position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;
  background:var(--rule);border-radius:3px
}
.tl-fill{
  display:block;width:100%;height:calc(var(--grow,0) * 100%);
  background:linear-gradient(180deg,var(--forest),var(--leaf));
  border-radius:3px;transition:height .12s linear
}
.tl-item{position:relative;width:calc(50% - 52px);margin-bottom:24px}
.tl-item.left{margin-right:auto}
.tl-item.right{margin-left:auto}
.tl-node{
  position:absolute;top:30px;width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid var(--moss);z-index:3;
  transition:border-color .45s,box-shadow .45s,transform .45s
}
.tl-item.left .tl-node{right:-61px}
.tl-item.right .tl-node{left:-61px}
.tl-item.in-view .tl-node{border-color:var(--forest);box-shadow:0 0 0 7px rgba(30,107,58,.14)}
.tl-card{
  background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:26px 28px;box-shadow:var(--sh-sm);position:relative;overflow:hidden;
  transition:transform .4s cubic-bezier(.19,.85,.25,1),box-shadow .4s,border-color .4s,background .4s
}
.tl-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--forest),var(--leaf));
  transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.19,.85,.25,1)
}
.tl-card:hover{transform:translateY(-9px);box-shadow:var(--sh-md);border-color:var(--moss)}
.tl-card:hover::before{transform:scaleY(1)}
.tl-year{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1;
  color:var(--forest);letter-spacing:-.03em;margin-bottom:6px
}
.tl-card h3{font-size:1.05rem;margin-bottom:9px}
.tl-card p{font-size:.84rem;line-height:1.75}
.tl-step{
  display:inline-block;background:var(--wash);border:1px solid var(--rule);
  border-radius:30px;padding:4px 13px;font-size:.66rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--forest);margin-bottom:14px
}
@media(max-width:820px){
  .tl-line{left:11px}
  .tl-fill{height:calc(var(--grow,0) * 100%)}
  .tl-item,.tl-item.left,.tl-item.right{width:auto;margin-left:48px;margin-right:0}
  .tl-item.left .tl-node,.tl-item.right .tl-node{left:-46px;right:auto;top:26px}
  .tl-card{padding:20px}
  .tl-year{font-size:1.4rem}
}

/* ── 7. TABBED GALLERY ── */
.gtabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:30px}
.gtab{
  font-family:var(--body);font-size:.78rem;font-weight:700;letter-spacing:.06em;
  padding:9px 19px;border-radius:30px;cursor:pointer;
  background:#fff;border:1px solid var(--rule);color:var(--ink);
  transition:var(--tr)
}
.gtab:hover{border-color:var(--forest);color:var(--forest);transform:translateY(-2px)}
.gtab.active{background:var(--forest);border-color:var(--forest);color:#fff;box-shadow:0 8px 20px rgba(30,107,58,.28)}
.gallery-item{display:none}
.gallery-item.show{display:block;animation:g-in .62s cubic-bezier(.19,.85,.25,1) both}
@keyframes g-in{from{opacity:0;transform:scale(.9) translateY(26px)}to{opacity:1;transform:none}}
.gcount{font-size:.8rem;color:var(--slate)}
.gmore{display:flex;justify-content:center;margin-top:30px}

/* ── 8. TEAM CARDS + MODAL ── */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:980px){.team-grid{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:480px){.team-grid{grid-template-columns:1fr}}
.team-card{
  background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-sm);display:flex;flex-direction:column;
  transition:transform .4s cubic-bezier(.19,.85,.25,1),box-shadow .4s,border-color .4s
}
.team-card:hover{transform:translateY(-10px);box-shadow:0 26px 56px rgba(11,33,20,.2);border-color:var(--moss)}
.team-photo{position:relative;aspect-ratio:1;overflow:hidden;background:var(--wash)}
.team-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.19,.85,.25,1)}
.team-card:hover .team-photo img{transform:scale(1.07)}
/* Only the very bottom edge of the photo fades into the white card —
   light blur, short gradient, so the face stays sharp. */
.team-photo .fade{
  position:absolute;left:0;right:0;bottom:0;height:24%;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.28) 62%,#fff 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 70%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 70%)
}
.team-body{padding:4px 20px 22px;text-align:center;display:flex;flex-direction:column}
.team-body h3{font-size:1.02rem;margin-bottom:4px}
.team-role{font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--forest);margin-bottom:18px}
.btn-read{
  align-self:center;margin-top:0;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--body);font-size:.78rem;font-weight:700;
  padding:10px 20px;border-radius:30px;cursor:pointer;
  background:var(--wash);border:1px solid var(--rule);color:var(--forest);
  transition:var(--tr)
}
.btn-read:hover{background:var(--forest);border-color:var(--forest);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,107,58,.3)}
.btn-read i{transition:transform .3s}
.btn-read:hover i{transform:translateX(4px)}

.team-modal-box{max-width:820px!important;padding:0!important;overflow:hidden}
.tm-grid{display:grid;grid-template-columns:1fr 1.35fr}
@media(max-width:700px){.tm-grid{grid-template-columns:1fr}}
.tm-img{position:relative;background:var(--wash);min-height:100%}
.tm-img img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:700px){.tm-img img{height:280px}}
.tm-body{padding:38px 34px}
@media(max-width:520px){.tm-body{padding:26px 20px}}
.tm-body h3{font-size:1.5rem;margin-bottom:6px}
.tm-body .team-role{margin-bottom:18px}
.tm-body p{font-size:.87rem;line-height:1.85;color:var(--slate);margin-bottom:12px}

/* ── 9. UNIVERSAL HOVER-INTO-GREEN (core values etc.) ── */
.hover-green{transition:transform .4s cubic-bezier(.19,.85,.25,1),background .4s,border-color .4s,box-shadow .4s!important}
.hover-green:hover{
  background:var(--forest)!important;border-color:var(--forest)!important;
  transform:translateY(-10px) scale(1.012);
  box-shadow:0 26px 58px rgba(30,107,58,.34)
}
.hover-green:hover h3,.hover-green:hover h4,.hover-green:hover .sdg-title{color:#fff!important}
.hover-green:hover p,.hover-green:hover span{color:rgba(255,255,255,.86)!important}
.hover-green:hover i{color:#fff!important}
.hover-green:hover .icon-badge{background:rgba(255,255,255,.16)!important;color:#fff!important}
.hover-green:hover .value-card{background:transparent!important}

/* ── 10. SMALL-SCREEN CORRECTIONS ── */
h1,h2,h3,h4,h5,p,a,li,span{overflow-wrap:break-word}
.hero-slider{overflow:hidden}
@media(max-width:560px){
  /* image badges stop being absolutely positioned so they never overlap text */
  .img-badge{position:static;max-width:100%;width:100%;border-radius:0 0 var(--r-md) var(--r-md);border-left-width:3px}
  .split-img{overflow:hidden}
  .section{padding:52px 0}
  .approach{padding:60px 0}
  .counter-sec .section-sm,.counter-sec{padding:38px 0}
}
@media(max-width:420px){
  .container{padding:0 16px}
  .btn{padding:11px 18px;font-size:.82rem}
  .page-banner{height:auto;min-height:230px;padding:40px 0}
}
/* keep the two hero columns from colliding on tablets */
@media(max-width:980px){
  .about-grid{gap:34px}
  .why-grid{gap:34px}
  .contact-grid{gap:34px}
}

/* ==========================================================================
   MONTA CHE — component layer 3 (finishing details)
   ========================================================================== */

/* Support-tier amount */
.tier-amt{
  font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--forest);
  margin-top:16px;transition:color .4s
}
.hover-green:hover .tier-amt{color:#fff}
.hover-green:hover .tier-amt .ph{
  background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55);color:#fff
}

/* Service cards (they carry an image, so only the body turns green) */
.service-card-body{transition:background .45s cubic-bezier(.19,.85,.25,1)}
.service-card-body h3,.service-card-body p,.service-link{transition:color .45s}
.service-card:hover .service-card-body{background:var(--forest)}
.service-card:hover .service-card-body h3{color:#fff}
.service-card:hover .service-card-body p{color:rgba(255,255,255,.86)}
.service-card:hover .service-link{color:var(--gold)}

/* Gallery filtering must not hide anything when JS is unavailable.
   Scoped to .js-enabled so the no-JS state shows every photograph. */
.gallery-item{cursor:pointer}
.js-enabled #galleryGrid .gallery-item{display:none}
.js-enabled #galleryGrid .gallery-item.show{display:block}

/* Team grid: give the JS-rendered cards a min height so the section
   does not jump while the cards are being inserted */
.team-grid{min-height:60px}

/* Timeline + tree need a stacking context for their node dots */
.timeline,.tree{isolation:isolate}

/* ==========================================================================
   MONTA CHE — component layer 4
   Gallery lightbox · donation page (payment tabs + pledge form)
   ========================================================================== */

/* ── GALLERY LIGHTBOX ── */
.lightbox{
  position:fixed;inset:0;z-index:3000;display:none;
  align-items:center;justify-content:center;
  background:rgba(6,17,8,.95);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  padding:24px
}
.lightbox.open{display:flex;animation:lb-in .3s ease both}
@keyframes lb-in{from{opacity:0}to{opacity:1}}

/* The stage is stacked BELOW the controls, otherwise the photo paints over the
   arrows on narrow screens where the image spans the full width. */
.lb-stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(1180px,94vw)}
.lb-img{
  max-width:100%;max-height:74vh;object-fit:contain;border-radius:var(--r-md);
  box-shadow:0 30px 90px rgba(0,0,0,.65);
  animation:lb-pop .45s cubic-bezier(.19,.85,.25,1) both
}
@keyframes lb-pop{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:none}}
.lb-cap{color:rgba(255,255,255,.88);font-size:.88rem;text-align:center;max-width:640px;line-height:1.6}
.lb-count{display:block;color:rgba(255,255,255,.42);font-size:.7rem;margin-top:6px;letter-spacing:.14em;text-transform:uppercase}

.lb-btn{
  position:fixed;top:50%;transform:translateY(-50%);z-index:6;
  width:58px;height:58px;border-radius:50%;
  border:1px solid rgba(255,255,255,.30);background:rgba(11,33,20,.55);
  color:#fff;font-size:1.05rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:var(--tr);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 22px rgba(0,0,0,.45)
}
.lb-btn:hover{background:var(--forest);border-color:var(--forest);transform:translateY(-50%) scale(1.09)}
.lb-btn[disabled]{opacity:.25;pointer-events:none}
.lb-prev{left:28px}
.lb-next{right:28px}
.lb-close{
  position:fixed;top:24px;right:28px;z-index:7;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.30);background:rgba(11,33,20,.55);
  color:#fff;font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:var(--tr);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 6px 22px rgba(0,0,0,.45)
}
.lb-close:hover{background:#c0392b;border-color:#c0392b;transform:rotate(90deg)}

/* On phones the photo is nearly full-width, so the arrows sit ON the image —
   solid dark discs keep them visible and tappable over any photo. */
@media(max-width:760px){
  .lb-stage{max-width:100vw}
  .lb-img{max-height:58vh;border-radius:var(--r-sm)}
  .lb-prev{left:10px}.lb-next{right:10px}
  .lb-btn{
    width:46px;height:46px;font-size:.95rem;
    background:rgba(11,33,20,.78);border-color:rgba(255,255,255,.5)
  }
  .lb-close{top:10px;right:10px;width:42px;height:42px;background:rgba(11,33,20,.78);border-color:rgba(255,255,255,.5)}
  .lb-cap{font-size:.78rem;padding:0 14px}
}
@media(max-width:420px){
  .lb-btn{width:42px;height:42px;font-size:.85rem}
  .lb-prev{left:6px}.lb-next{right:6px}
  .lb-img{max-height:54vh}
}

/* ── CURRENCY CHOOSER ──
   These rules were missing entirely, which is why the three currencies used to
   appear as raw running text. */
.cur-switch{
  max-width:760px;margin:0 auto 30px;padding:24px 26px 26px;
  background:var(--wash);border:1px solid var(--rule);border-radius:var(--r-lg);
}
.cur-title{
  display:flex;align-items:center;gap:16px;justify-content:center;
  font-family:var(--body);font-size:.72rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--forest);margin-bottom:20px;white-space:nowrap;
}
.cur-title::before,.cur-title::after{
  content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--rule),transparent);
}
.cur-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cur{
  position:relative;overflow:hidden;cursor:pointer;font-family:var(--body);text-align:left;
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 13px;align-items:center;
  padding:17px 18px;border-radius:var(--r-md);background:#fff;
  border:1.5px solid var(--rule);transition:var(--tr);
}
.cur:hover{border-color:var(--leaf);transform:translateY(-3px);box-shadow:0 12px 28px rgba(11,33,20,.10)}
.cur:focus-visible{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(62,156,92,.25)}
.cur-sym{
  grid-row:1/3;width:44px;height:44px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1rem;font-weight:800;line-height:1;
  background:var(--wash);color:var(--forest);border:1.5px solid var(--rule);transition:var(--tr);
}
.cur-code{font-family:var(--display);font-size:.95rem;font-weight:800;letter-spacing:.06em;color:var(--ink);align-self:end}
.cur-name{font-size:.76rem;color:var(--slate);align-self:start;line-height:1.3}
.cur-check{position:absolute;top:11px;right:11px;font-size:.95rem;color:var(--gold);opacity:0;transform:scale(.5);transition:var(--tr)}
.cur.active{border-color:var(--forest);background:linear-gradient(155deg,var(--forest),#175330);box-shadow:0 14px 34px rgba(30,107,58,.30)}
.cur.active .cur-sym{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
.cur.active .cur-code,.cur.active .cur-name{color:#fff}
.cur.active .cur-name{color:rgba(255,255,255,.82)}
.cur.active .cur-check{opacity:1;transform:scale(1)}

/* ── DONATION PAGE ── */
.donate-tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.donate-tab{
  font-family:var(--body);font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:12px 24px;border-radius:40px;cursor:pointer;
  background:#fff;border:1px solid var(--rule);color:var(--ink);
  display:inline-flex;align-items:center;gap:9px;transition:var(--tr)
}
.donate-tab:hover{border-color:var(--forest);color:var(--forest);transform:translateY(-2px)}
.donate-tab.active{background:var(--forest);border-color:var(--forest);color:#fff;box-shadow:0 10px 26px rgba(30,107,58,.3)}
.donate-panel{display:none}
.donate-panel.active{display:block;animation:panel-in .55s cubic-bezier(.19,.85,.25,1) both}
@keyframes panel-in{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

.pay-card{
  background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:0 22px 60px rgba(11,33,20,.13);overflow:hidden;max-width:780px;margin:0 auto
}
.pay-head{
  background:linear-gradient(135deg,var(--forest) 0%,var(--leaf) 100%);
  color:#fff;padding:26px 30px;display:flex;align-items:center;gap:16px
}
.pay-head i{font-size:1.6rem;opacity:.9}
.pay-head h3{color:#fff;margin:0;font-size:1.08rem}
.pay-head p{color:rgba(255,255,255,.82);font-size:.78rem;margin:4px 0 0}
.pay-rows{padding:6px 30px 26px}
.pay-row{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:16px 0;border-bottom:1px dashed var(--rule)
}
.pay-row:last-child{border-bottom:none}
.pay-key{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--forest);flex-shrink:0}
.pay-val{
  font-size:.95rem;font-weight:600;color:var(--ink);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;text-align:right
}
.copy-btn{
  border:1px solid var(--rule);background:var(--wash);color:var(--forest);
  border-radius:20px;padding:5px 13px;font-size:.66rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:var(--tr);flex-shrink:0
}
.copy-btn:hover{background:var(--forest);color:#fff;border-color:var(--forest)}
.copy-btn.done{background:var(--gold);border-color:var(--gold);color:#3A2800}
@media(max-width:620px){
  .pay-row{flex-direction:column;align-items:flex-start;gap:7px}
  .pay-val{justify-content:flex-start;text-align:left}
  .pay-head{padding:20px}
   .pay-rows{padding:4px 20px 20px}
   .cur-switch{padding:20px 18px 20px}
   .cur-title{margin-bottom:16px}
   .cur-btns{gap:8px}
   .cur{padding:12px 9px;grid-template-columns:1fr;justify-items:center;text-align:center;gap:6px}
   .cur-sym{grid-row:auto;width:34px;height:34px;font-size:.8rem}
   .cur-code{font-size:.8rem;align-self:auto}
   .cur-name{font-size:.64rem;align-self:auto}
   .cur-check{top:6px;right:6px;font-size:.7rem}
}
@media(max-width:360px){
   .cur-name{display:none}
}

/* Ledger-style pledge panel */
.pledge-box{
  background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:0 22px 60px rgba(11,33,20,.13);padding:34px;max-width:780px;margin:0 auto
}
@media(max-width:620px){.pledge-box{padding:22px}}
.freq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:6px}
@media(max-width:520px){.freq-grid{grid-template-columns:1fr}}
.freq{
  position:relative;border:1px solid var(--rule);border-radius:var(--r-md);
  padding:16px 12px;text-align:center;cursor:pointer;background:#fff;
  transition:transform .3s cubic-bezier(.19,.85,.25,1),border-color .3s,background .3s,box-shadow .3s
}
.freq:hover{transform:translateY(-3px);border-color:var(--moss);box-shadow:var(--sh-sm)}
.freq.selected{border-color:var(--forest);background:var(--wash);box-shadow:0 0 0 2px rgba(30,107,58,.16)}
.freq input{position:absolute;opacity:0;pointer-events:none}
.freq .f-name{display:block;font-weight:800;font-size:.85rem;color:var(--ink)}
.freq .f-sub{display:block;font-size:.7rem;color:var(--slate);margin-top:4px}
.freq.selected .f-name{color:var(--forest)}
.pledge-note{
  display:flex;gap:12px;align-items:flex-start;background:var(--wash);border:1px solid var(--rule);
  border-radius:var(--r-md);padding:16px 18px;margin-top:22px
}
.pledge-note i{color:var(--forest);margin-top:3px}
.pledge-note p{font-size:.8rem;line-height:1.7;color:var(--slate);margin:0}

/* Amount suggester */
.amt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
@media(max-width:520px){.amt-grid{grid-template-columns:1fr}}
.amt{border:1px solid var(--rule);border-radius:var(--r-md);background:#fff;padding:13px;cursor:pointer;text-align:center;font-family:var(--display);font-weight:800;font-size:1.02rem;color:var(--forest);transition:var(--tr)}
.amt:hover{border-color:var(--forest);transform:translateY(-3px)}
.amt.selected{background:var(--forest);border-color:var(--forest);color:#fff}

/* Donation impact strip */
.impact-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
@media(max-width:760px){.impact-strip{grid-template-columns:1fr}}
.impact-strip .value-card{text-align:center;padding:26px 20px}


/* ── SWEETALERT POPUPS ─────────────────────────────────────────────────────
   The brand's confirmation popups on the public pages. */
.ma-swal{border-radius:20px !important;padding:28px 26px 22px !important;
  box-shadow:0 40px 90px rgba(11,33,20,.42) !important;border:1px solid #DCE8DF !important}
.ma-swal .ma-swal-t{font-family:Montserrat,Inter,sans-serif !important;font-size:1.16rem !important;
  font-weight:800 !important;color:#0B2114 !important;line-height:1.35 !important;padding:0 !important}
.ma-swal .ma-swal-x{font-size:.9rem !important;color:#5b6b60 !important;line-height:1.7 !important;margin-top:8px !important}
.ma-swal .ma-swal-b{border-radius:11px !important;font-weight:700 !important;
  padding:11px 24px !important;font-size:.84rem !important;box-shadow:none !important}
.ma-swal .swal2-icon{margin:6px auto 14px !important;transform:scale(.9)}
.ma-swal .swal2-icon.swal2-success .swal2-success-ring{border-color:rgba(30,107,58,.3) !important}
.ma-swal .swal2-icon.swal2-success [class^=swal2-success-line]{background-color:#1E6B3A !important}
.swal2-container.swal2-backdrop-show{backdrop-filter:blur(3px)}
@media(max-width:520px){
  .ma-swal{padding:24px 18px 18px !important;border-radius:17px !important}
  .ma-swal .ma-swal-t{font-size:1.04rem !important}
  .ma-swal .ma-swal-x{font-size:.85rem !important}
}

/* The end of a photograph strip: the way through to the whole gallery. */
.lb-more{display:flex;align-items:center;justify-content:center;width:100%;min-height:46vh;padding:30px}
.lb-more[hidden]{display:none}
.lb-more-inner{max-width:430px;text-align:center;color:#fff}
.lb-more-inner>i{font-size:2.4rem;color:var(--moss);margin-bottom:14px;display:block}
.lb-more-inner h3{margin:0 0 8px;font-size:1.32rem;color:#fff}
.lb-more-inner p{margin:0 0 20px;font-size:.92rem;color:rgba(255,255,255,.72);line-height:1.6}
.lb-more-inner .btn{display:inline-flex;align-items:center;gap:9px}
@media(max-width:640px){.lb-more{min-height:38vh}.lb-more-inner h3{font-size:1.1rem}}

/* `hidden` only sets display:none from the browser's own sheet, so any rule
   that sets display on the same element wins over it. These two need it to
   win, because the photograph and its caption step aside for the panel. */
.lb-stage .lb-img[hidden],
.lb-stage .lb-cap[hidden]{display:none!important}

/* The currency cards are ordinary links now, so that choosing a currency asks
   the server for that currency's page. These two lines keep them looking
   exactly as they did as buttons. */
a.cur{text-decoration:none;color:inherit}

/* ── the ways of paying, on the pledge form ──────────────────────────────────
   One choice each, drawn as chips. Plain radio buttons underneath, so this
   works with scripts switched off, and the box that "Other" leads to is opened
   by the choice itself — again, no script needed.

   A drop-down could not be trusted with this: a browser will put back what was
   chosen on an earlier visit and will add an entry to hold it, which is how
   "Mobile money" kept reappearing under dollars and pounds. A choice that is
   not in the page cannot be put back. */
.method-pick{display:flex;flex-wrap:wrap;gap:9px;margin:2px 0 0}
.method-pick > input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.method-pick > label{
  display:inline-flex;align-items:center;padding:9px 15px;border:1px solid var(--rule);
  border-radius:999px;background:var(--paper);cursor:pointer;user-select:none;
  font-size:.88rem;font-weight:600;color:var(--ink);
  transition:background .18s,border-color .18s,color .18s}
.method-pick > label:hover{border-color:var(--forest);color:var(--forest)}
.method-pick > input:checked + label{background:var(--forest);border-color:var(--forest);color:#fff}
.method-pick > input:focus-visible + label{outline:2px solid var(--gold);outline-offset:2px}
.method-pick .own-way{display:none;flex:1 1 100%;margin-top:10px}
.method-pick > input[data-own]:checked ~ .own-way{display:block}
.own-way label{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.own-way input[type="text"]{width:100%}

/* ══════════════════════════════════════════════════════════════════════════
   THE CLOSED WEBSITE
   What a visitor sees while the maintenance switch on the dashboard is on:
   the navigation bar above, this in place of every page, and nothing else.
   ══════════════════════════════════════════════════════════════════════════ */
.maint-body{background:var(--mist)}
.maint{position:relative;overflow:hidden;padding:92px 0 76px;display:flex;align-items:center;min-height:calc(100vh - 200px)}
.maint::before{content:'';position:absolute;inset:0;z-index:0;background:
  radial-gradient(680px 420px at 10% 0%, rgba(62,156,92,.15), transparent 62%),
  radial-gradient(560px 420px at 94% 10%, rgba(217,164,65,.20), transparent 60%),
  linear-gradient(180deg,#fff 0%, var(--wash) 100%)}
.maint .container{position:relative;z-index:2}
.maint-ring{position:absolute;border-radius:50%;border:1px solid rgba(30,107,58,.13);z-index:1;pointer-events:none}
.maint-ring-1{width:520px;height:520px;top:-200px;right:-130px}
.maint-ring-2{width:340px;height:340px;bottom:-160px;left:-100px;border-color:rgba(217,164,65,.3)}
.maint-card{max-width:680px;margin:0 auto;text-align:center;background:rgba(255,255,255,.88);
  border:1px solid var(--rule);border-radius:26px;padding:54px 46px 44px;box-shadow:0 26px 70px rgba(11,33,20,.12)}
.maint-mark{width:86px;height:86px;border-radius:50%;margin:0 auto 22px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--forest),var(--leaf));color:#fff;font-size:2.05rem;
  box-shadow:0 14px 34px rgba(30,107,58,.34);position:relative}
.maint-mark::after{content:'';position:absolute;inset:-10px;border-radius:50%;
  border:1.5px dashed rgba(30,107,58,.30);animation:maintSpin 24s linear infinite}
@keyframes maintSpin{to{transform:rotate(360deg)}}
.maint-card .tag{margin-bottom:8px}
.maint-card h1{font-size:clamp(1.75rem,3.4vw,2.5rem);letter-spacing:-.03em;margin-bottom:14px;color:var(--ink)}
.maint-note{max-width:50ch;margin:0 auto;color:var(--slate);font-size:.98rem;line-height:1.75}
.maint-status{display:inline-flex;align-items:center;gap:9px;margin:26px 0;padding:9px 18px;border-radius:999px;
  background:var(--wash);border:1px solid var(--rule);font-size:.75rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--forest)}
.maint-dot{width:9px;height:9px;border-radius:50%;background:var(--leaf);
  box-shadow:0 0 0 0 rgba(62,156,92,.55);animation:maintPulse 2.1s infinite}
@keyframes maintPulse{70%{box-shadow:0 0 0 12px rgba(62,156,92,0)}100%{box-shadow:0 0 0 0 rgba(62,156,92,0)}}
.maint-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.maint-actions .btn{border-radius:999px;padding:12px 24px;font-size:.85rem}
.maint-staff{margin:28px 0 0;font-size:.82rem;color:var(--slate)}
.maint-staff a{color:var(--forest);font-weight:600;border-bottom:1px solid rgba(30,107,58,.35)}
.maint-foot{padding:22px 0;border-top:1px solid var(--rule);background:#fff;text-align:center;font-size:.8rem;color:var(--slate)}
@media(max-width:640px){
  .maint{padding:56px 0 46px;min-height:calc(100vh - 170px)}
  .maint-card{padding:38px 22px 32px;border-radius:20px}
  .maint-actions .btn{width:100%;justify-content:center}
  .maint-ring-1{width:340px;height:340px;top:-150px;right:-150px}
}