/* ============================================
   MAZINGIRA SUSTAINABILITY VILLAGE — STYLE.CSS
   ============================================ */

:root {
        --green-dark: #16341f;
    --green-darker: #0d2213;
    --green: #2f7d32;
    --green-mid: #3f9142;
    --green-light: #8bc34a;
    --green-pale-bg: #e6f3d4;
    --blue: #1f7fa6;
    --blue-dark: #124f68;
   
    --marathon-teal-start: #1f7ea4;
    --marathon-teal-end: #17607e;
    --yellow: #f2c230;
    --red: #e6393f;
    --orange: #f2994a;
    --ink: #1c2b1f;
    --ink-soft: #33403a;
    --gray: #62726a;
    --white: #ffffff;

    --font-heading: 'Poppins', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;

    --container-width: 1200px;
}

* { box-sizing: border-box; }

html, body { overflow-x: hidden; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

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

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 10% ;
    padding: 0 24px;
}

.container1 {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0 0 ;
    padding: 0 0;
}

.container2 {
    width: 100%;
    max-width: 80%;
    margin: 0 10% ;
    padding: 0 24px;
}


h1, h2, h3 {
    font-family: var(--font-heading);
    margin: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================
   SCROLL REVEAL — fade-up / fade-in on scroll
   Add class "reveal" (fade-up, default) plus an
   optional direction/style modifier below. JS
   (script.js) adds "is-visible" via
   IntersectionObserver when it enters view.
   Wrap a set of cards in "reveal-group" to have
   their direct .reveal children auto-stagger.
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal.reveal-fade   { transform: none; }
.reveal.reveal-left   { transform: translateX(-40px); }
.reveal.reveal-right  { transform: translateX(40px); }
.reveal.reveal-zoom   { transform: scale(0.92); }
.reveal.reveal-down   { transform: translateY(-28px); }
.reveal.reveal-flip   { transform: perspective(800px) rotateX(12deg) translateY(18px); }
.reveal.reveal-blur   { transform: none; filter: blur(6px); }
.reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* If JS never runs (disabled, blocked, error) content must still show */
.no-js .reveal { opacity: 1; transform: none; filter: none; }

/* ============================================
   HERO ENTRANCE — plays once on page load, not
   scroll-triggered (content is above the fold).
   Elements with "hero-in" animate in with a
   staggered delay driven by --hero-delay.
   ============================================ */
@keyframes heroRise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroPop {
    0%   { opacity: 0; transform: scale(0.85); }
    70%  { opacity: 1; transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}
.hero-in {
    opacity: 0;
    animation: heroRise 1.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--hero-delay, 0s);
}
.hero-in.hero-in-pop {
    animation-name: heroPop;
}
@media (prefers-reduced-motion: reduce) {
    .hero-in { animation: none; opacity: 1; transform: none; }
}

/* ============================================
   AMBIENT / CONTINUOUS MOTION — used sparingly
   on a handful of decorative elements only.
   ============================================ */
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.float-anim {
    animation: floatY 4.5s ease-in-out infinite;
}
@keyframes pulseSoft {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
.pulse-anim {
    animation: pulseSoft 3.2s ease-in-out infinite;
}
.pulse-anim:hover {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .float-anim, .pulse-anim { animation: none; }
}

/* ============================================
   HOVER MICRO-INTERACTIONS — CSS-only, applied
   to cards, buttons, icons across the site.
   ============================================ */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(13,34,19,0.16);
}
.hover-grow {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-grow:hover { transform: scale(1.05); }
.hover-icon-nudge svg,
.hover-icon-nudge img {
    transition: transform 0.25s ease;
}
.hover-icon-nudge:hover svg,
.hover-icon-nudge:hover img {
    transform: translateX(4px);
}

/* ============================================
   COUNTER — number counts up when revealed.
   JS drives the number via data-count-to; CSS
   just makes sure it doesn't jump/flash.
   ============================================ */
.counter-value {
    font-variant-numeric: tabular-nums;
}

/* ============================================
   MARQUEE — continuous horizontal auto-scroll,
   used for the sponsors strip. Pauses on hover
   and on reduced-motion.
   ============================================ */
.marquee {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
    display: flex;
    width: max-content;
    animation: marqueeScroll 28s linear infinite;
}
@media (hover: hover) and (pointer: fine) {
    .marquee:hover .marquee-track { animation-play-state: paused; }
}
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 2px;
}

/* ============ BUTTONS / SHARED PIECES ============ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.p {
    font-size: 28px;
    font-weight: 400;

}
.btn-pill { display: inline-flex; border-radius: 999px; padding: 8px 18px; font-size: 18px; }

.btn-outline-green {
    background: transparent;
    border: 1.5px solid var(--green);
    color: var(--green-dark);
    transition: background 0.2s ease, color 0.2s ease;
}
.btn-outline-green:hover { background: var(--green); color: var(--white); }

.btn-register {
    background: var(--red);
    color: var(--white);
    border-radius: 999px;
    padding: 12px 30px;
    font-size: 13px;
    letter-spacing: 0.03em;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    margin-top: 18px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-register:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }

.btn-learn-more {
    background: var(--yellow);
    color: var(--green-darker);
    border-radius: 999px;
    padding: 12px 26px;
    font-size: 13px;
    margin-top: 44px;
    transition: transform 0.15s ease;
}
.btn-learn-more:hover { transform: translateY(-2px); }

.arrow-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1.5px solid var(--green);
    color: var(--green);
    flex-shrink: 0;
}
.arrow-circle.small { width: 18px; height: 18px; border-color: rgba(255,255,255,0.8); color: var(--white); }
.arrow-circle.dark { border-color: var(--green-darker); color: var(--green-darker); }

.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 50px;
    font-weight: 800;
    color: var(--green-dark);
    font-size: 22px;
    justify-content: center ;
}

.learn-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.9);
    font-size: 22px;
    font-weight: 800;
    margin-top: 14px;
    margin-left: 0;
}

.badge-pill {
    display: inline-flex;
    border-radius: 999px;
    overflow: hidden;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.badge-half { padding: 8px 16px; color: var(--white); white-space: nowrap; }
.badge-green { background: var(--green-mid); }
.badge-blue { background: var(--blue); }
.badge-sep { display: none; }

.section-heading {
    font-weight: 700;
    color: var(--green-dark);
    font-size: 30px;
    line-height: 1.25;
    margin-bottom: 18px;
}
.section-heading.align-center { text-align: center; margin-bottom: 40px; }
.section-heading.align-left { text-align: left; }

.section-heading1 {
    font-weight: 900;
    color: var(--green-dark);
    font-size: 35px;
    line-height: 1.25;
    margin-bottom: 18px;
    text-align: center;
}

/* ============ HEADER ============ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 30px;
    /* >>>>>>>>>> AMENDMENT START <<<<<<<<<< */
    /* was: padding-top/bottom: 10px each. Reduced by the same 20px the
       logo grew by below, so the header's total height (padding + logo)
       stays the same: 10+110+10 = 130px before, 0+130+0 = 130px now. */
    padding-top: 0;
    padding-bottom: 0;
    /* >>>>>>>>>> AMENDMENT END <<<<<<<<<< */
    max-width: 80%;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
}
.logo-icon {
    /* >>>>>>>>>> AMENDMENT START <<<<<<<<<< */
    height: 130px; /* was: 110px — grown by the 20px trimmed from header-inner's padding above */
    /* >>>>>>>>>> AMENDMENT END <<<<<<<<<< */
    width: auto;
    flex-shrink: 0;
}
.logo-icon-tall {
    height: 85px;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--ink);
}
.logo-subtitle {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--green);
}

.main-nav {
    display: inline-flex;
    gap: 30px;
}
.main-nav a {
    font-size: 18px;
    font-weight: 900;
    color: var(--green-dark);
    letter-spacing: 0.01em;
    position: relative;
}
.main-nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -4px;
    width: 0; height: 2px;
    background: var(--green);
    transition: width 0.2s ease;
}
.main-nav a:hover::after { width: 100%; }

.nav-dropdown {
    position: relative;
}
.nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 18px;
    font-weight: 900;
    color: var(--green-dark);
    letter-spacing: 0.01em;
    cursor: pointer;
    position: relative;
}
.nav-dropdown-toggle::after {
    content: "";
    position: absolute;
    left: 0; bottom: -4px;
    width: 0; height: 2px;
    background: var(--green);
    transition: width 0.2s ease;
}
.nav-dropdown-toggle:hover::after,
.nav-dropdown.open .nav-dropdown-toggle::after { width: 100%; }
.nav-caret {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }
 
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    min-width: 260px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(13,34,19,0.18);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 150;
}
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--green-dark);
    white-space: nowrap;
}
.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a:hover { background: var(--green-pale-bg); }
 
/* On the transparent/dark header pages, the toggle needs the same
   white/yellow treatment as the other nav links */
body.page-dark-header .site-header .nav-dropdown-toggle { color: var(--white); }
body.page-dark-header .site-header .nav-dropdown-toggle::after { background: var(--yellow); }


.newsletter-btn { display: inline-flex; justify-content: flex-end; flex-shrink: 0; }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    padding: 0;
}
.nav-toggle span {
    display: block;
    width: 100%;
    height: 2.5px;
    background: var(--green-dark);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============ HERO ============ */

.hero {
    position: relative;
    min-height: 78vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-start;
    color: var(--white);
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,20,12,0.15) 0%, rgba(8,18,10,0.55) 65%, rgba(6,14,8,0.75) 100%);
}
.hero-inner {
    position: relative;
    padding-bottom: 64px;
    padding-top: 10px;
    margin-top: 10%;
}
.hero-badge-img {
    display: block;
    width: 50%;
    max-width: 80vw;
    height: 30%;
    margin-bottom: 22px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
}
.hero-heading {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.22;
    max-width: 620px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

/* ============ ABOUT ============ */

.about { padding: 8px 0; background: var(--white); }
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
}

.about-photo-card {
    position: relative;
    aspect-ratio: 678 / 775;        /* ⬅ matches your actual photo's real ratio */
    min-height: unset;
    border-radius: 0px;
    background-size: cover;
    background-position: top center;
    overflow: hidden;
}
.about-photo-tag {
    position: absolute;
    top: 22px;
    left: 22px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--green-light);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: 0.01em;
}
.about-photo-tag svg { margin-top: 2px; flex-shrink: 0; }

.about-content { 
    
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 800px;
    
 }

.about-text {
    color: var(--ink-soft);
    font-size: 22px;
    line-height: 1.75;
    margin-bottom: 34px;
}

/* >>>>>>>>>> AMENDMENT START <<<<<<<<<< */
/* Focus cards live in the text column on plain white — no photo behind
   them, so this is a light frosted-glass treatment rather than the dark
   glass used on .impact-row / .volunteer-form / .value-card: a pale
   tinted, blurred panel with a soft border that still reads as "glass"
   even without an image to reveal, plus the same yellow-on-hover accent
   used everywhere else on the site. */
.focus-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 100%;
    margin-top: 8px;
    margin-bottom: 34px;
}
.focus-card {
    background: rgba(139, 195, 74, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(22, 52, 31, 0.14);
    box-shadow: 0 8px 22px rgba(13, 34, 19, 0.08);
    border-radius: 14px;
    padding: 26px 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 14px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.focus-card:hover,
.focus-card:focus-within {
    background: rgba(242, 194, 48, 0.12);
    border-color: var(--yellow);
    box-shadow: 0 14px 30px rgba(13, 34, 19, 0.14);
    transform: translateY(-4px);
}
/* >>>>>>>>>> AMENDMENT END <<<<<<<<<< */

.focus-icon {
    width: 64px;
    height: 64px;
    color: var(--ink);
    flex-shrink: 0;
}
.focus-icon img {            /* ⬅ CHANGED selector (was svg) */
    width: 100%;
    height: 100%;
    object-fit: contain;     /* ⬅ ADDED */
}
.focus-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35;
}

/* ============ CORE VALUES ============ */

/* >>>>>>>>>> AMENDMENT START <<<<<<<<<< */
/* Photo backdrop behind the whole section, same construction as
   .impact-glass-wrap: dark overlay + glass cards floating on top. */
.values {
    position: relative;
    padding: 88px 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.values-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8,18,10,0.6) 0%, rgba(8,18,10,0.78) 100%);
    pointer-events: none;
}
.values-inner { position: relative; }
.values-inner .section-heading1 { color: var(--white); }

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 80%;
    margin: 0 auto ;
}
.value-card {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 12px 30px rgba(8, 18, 10, 0.3);
    border-radius: 14px;
    padding: 26px 28px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.value-card:hover,
.value-card:focus-within {
    border-color: var(--yellow);
    box-shadow: 0 18px 40px rgba(8, 18, 10, 0.4), 0 0 0 1px rgba(242, 194, 48, 0.2);
    transform: translateY(-4px);
}
/* >>>>>>>>>> AMENDMENT END <<<<<<<<<< */

.value-card h3 {
    color: var(--yellow);
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 10px;
}
.value-card p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    line-height: 1.7;
    margin: 0;
}

/* ============ MARATHON BANNER ============ */
 
.marathon {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    min-height: 560px;

}
.marathon-photo {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;

    
}
.marathon-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(28,82,164,0) 0%,
        var(--marathon-blue-start) 30%,
        var(--marathon-blue-mid) 100%);
    pointer-events: none;
}
.marathon-content {
    position: relative;
    background: linear-gradient(90deg, var(--marathon-teal-start) 0%, var(--marathon-teal-end) 100%);
    display: flex;
    align-items: center;
    color: var(--white);
    padding: 48px;
    overflow: hidden;
   
}
.marathon-inner { 
    position: relative;
    width:100%; 
    max-width: 100%;
    flex-direction: column;     /* ADDED */
    align-items: center;        /* ADDED — centers every child block horizontally */
    text-align: center;

}
 
.marathon-logo {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    justify-content: center;
    gap: 14px;
}
.marathon-logo-icon { height: 100px; width: auto; flex-shrink: 0; }
.marathon-logo-icon.partner-logo { height: 90px; }
 
.marathon-eyebrow {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin: 0 0 4px;
    color: rgba(255,255,255,0.9);
    
}
.marathon-heading {
    font-weight: 900;
    font-size: 80px;
    line-height: 1;
    margin-bottom: 10px;
     width: 100%;
}
.marathon-heading .line-white { display: block; color: var(--white); }
.marathon-heading .line-green { display: block; color: var(--green-light); font-size: 0.85em; }
.marathon-sub {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 40px;
    color: var(--orange);
    margin: 0 0 6px;
    letter-spacing: 0.02em;
    width:100%
}
 
.badge-pill-link { 
    display: inline-block; 
    margin: 0px 0 20px; }
.badge-pill-img { width: 620px; max-width: 100%; height: auto; }
 
.marathon-cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.marathon-cta-row .btn-register {
    margin-top: 0;   /* keeps it vertically level with the countdown, from your earlier fix */
}
 
.countdown {
    display: flex;
    gap: 10px;
}
.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 8px 10px;
    min-width: 48px;
}
.countdown-value {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    color: var(--white);
}
.countdown-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-top: 4px;
}
 
.marathon-runner-icon {
    position: absolute;
    right: 36px;
    bottom: 30px;
    width: 54px;
    height: 82px;
    color: rgba(255,255,255,0.9);
    display: none;
}
@media (min-width: 900px) {
    .marathon-runner-icon { display: block; }
}


/* ============ IMPACT ============ */

.impact {
    position: relative;
    background-color: var(--green-darker);
    background-size: cover;
    background-position: center;
    padding: 96px 0 80px;
    color: var(--white);
    overflow: hidden;
}
.impact-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8,20,12,0.55), rgba(8,20,12,0.82));
}
.impact-inner { position: relative; text-align: center; }

.impact-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: rgba(230,243,212,0.75);
    margin: 0 0 6px;
}
.impact-heading {
    font-weight: 800;
    font-size: 40px;
    letter-spacing: 0.04em;
    color: var(--green-pale-bg);
    margin-bottom: 60px;
}

.timeline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 90px;
    max-width: 1140px;
    margin: 0 auto;
    text-align: left;
}

.timeline-item {
    display: flex;
    flex-direction: column;
}
.timeline-item.item-2 {
    margin-top: 150px;
}

.timeline-target {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--yellow);
}
.timeline-item.item-2 .timeline-target {
    justify-content: flex-end;
}
.timeline-target svg { width: 38px; height: 38px; flex-shrink: 0; }

.timeline-target-label {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.15;
    color: var(--white);
    white-space: nowrap;
}
.timeline-target-label span {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--yellow);
    margin-top: 2px;
}

.timeline-connector {
    width: 210px;
    height: 60px;
    align-self: flex-end;
    margin: 0 -6px -6px 0;
    display: block;
}
.timeline-item.item-2 .timeline-connector {
    align-self: flex-start;
    margin: 0 0 -6px -6px;
}

.timeline-body {
    display: flex;
    align-items: center;
    gap: 22px;
}
.timeline-item.item-2 .timeline-body {
    flex-direction: row-reverse;
    text-align: right;
}

.timeline-trees {
    width: 90px;
    height: auto;
    flex-shrink: 0;
    color: var(--white);
}

.timeline-text { min-width: 0; }

.timeline-headline {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 26px;
    color: var(--yellow);
    margin: 0 0 10px;
    letter-spacing: 0.02em;
}
.timeline-desc {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255,255,255,0.8);
    max-width: 320px;
    margin: 0;
}
.timeline-item.item-2 .timeline-desc { margin-left: auto; }

/* ============ ADOPT A FOREST BLOCK ============ */

.adopt { padding: 80px 0 30px; background: var(--white); }
.adopt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 0 60px;
}
.adopt-photo {
    min-height: 320px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
}
.adopt-content .section-heading { margin-bottom: 26px; }

/* ============ GALLERY ============ */

.gallery { padding: 0 0 0; background: var(--white); }
.gallery-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 24px;
    color: var(--green-dark);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0 24px 40px;
}
.gallery-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.gallery-photo {
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

/* ============ GALLERY SLIDER ============ */

.gallery-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.gallery-track {
    display: flex;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.gallery-slide {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 2px;
}

/* >>>>>>>>>> AMENDMENT START <<<<<<<<<< */
/* These arrows already floated over the photos as semi-transparent dark
   circles — upgraded to real blurred glass (the photo behind them shows
   through) with the yellow hover accent used everywhere else on the
   site, instead of just darkening further on hover. */
.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    background: rgba(13, 34, 19, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--white);
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(8, 18, 10, 0.25);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.gallery-nav:hover,
.gallery-nav:focus-visible {
    border-color: var(--yellow);
    background: rgba(13, 34, 19, 0.5);
    box-shadow: 0 10px 24px rgba(8, 18, 10, 0.35);
}
/* >>>>>>>>>> AMENDMENT END <<<<<<<<<< */
.gallery-nav-prev { left: 14px; }
.gallery-nav-next { right: 14px; }

.gallery-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 18px 0 44px;
}
.gallery-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: none;
    background: #d8dfd5;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}
.gallery-dot:hover { background: var(--yellow); }
.gallery-dot.active { background: var(--green); transform: scale(1.2); }

@media (max-width: 1024px) {
    .gallery-slide { flex: 0 0 33.333%; max-width: 33.333%; }
}
@media (max-width: 720px) {
    .gallery-slide { flex: 0 0 50%; max-width: 50%; }
    .gallery-nav { width: 36px; height: 36px; }
}
@media (max-width: 420px) {
    .gallery-slide { flex: 0 0 100%; max-width: 100%; }
}

/* ============ FOOTER ============ */

.site-footer {
    background: var(--green-darker);
    color: rgba(255,255,255,0.75);
    padding: 56px 0 24px;
}
.site-footer .container {
    max-width: 85%;
    margin: 0 auto;
    padding: 0 60px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr  1fr 1.4fr;
    gap: 48px;
    padding-bottom: 36px;
}
.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}
.footer-logo img { height: 100px; width: auto; flex-shrink: 0; }
.footer-badge-link { display: inline-block; margin-top: 14px; }
.footer-badge-img { width: 500px; max-width: 100%; height: auto; }

.footer-label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    color: var(--yellow);
    margin: 0 0 4px;
}
.footer-value {
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    margin: 0 0 18px;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.social-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 5px;
}
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: var(--white);
    transition: background 0.2s ease;
}
.social-icon svg { width: 15px; height: 15px; }
.social-icon:hover { background: var(--green-light); color: var(--green-darker); }
.social-handle {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    margin-left: 4px;
}
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}
.footer-nav a {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    transition: color 0.2s ease;
}
.footer-nav a:hover { color: var(--white); }
.footer-copy { font-size: 12px; margin: 0; }

/* =====================================================
   RESPONSIVE — TABLET (≤ 1024px)
   ===================================================== */
@media (max-width: 1024px) {
    .container { margin: 0 auto; padding: 0 32px; }
    .container2 { max-width: 100%; margin: 0 auto; padding: 0 32px; }
    .header-inner { max-width: 100%; gap: 14px; }
    .main-nav { gap: 12px; }
    .main-nav a { font-size: 13.5px; }
    .newsletter-btn.btn-pill { padding: 7px 12px; font-size: 12.5px; }

    .about-grid { grid-template-columns: 1fr; }
    .about-photo-card { min-height: 340px; }
    .about-content { margin: 0 auto; }
    .focus-grid { max-width: 100%; margin-left: 0; margin-right: 0; gap: 12px; }

    .values-grid { max-width: 100%; }

    .marathon { grid-template-columns: 1fr; }
    .marathon-photo { min-height: 280px; }
    .marathon-content { padding: 40px 32px; }

    .timeline { grid-template-columns: 1fr; max-width: 480px; column-gap: 0; row-gap: 40px; }
    .timeline-item.item-2 { margin-top: 0; align-items: flex-start; }
    .timeline-item.item-2 .timeline-target { justify-content: flex-start; }
    .timeline-item.item-2 .timeline-connector { align-self: flex-end; }
    .timeline-item.item-2 .timeline-body { flex-direction: row; text-align: left; }
    .timeline-item.item-2 .timeline-desc { margin-left: 0; }

    .adopt-grid { grid-template-columns: 1fr; }
    .adopt-photo { min-height: 260px; }

    .hero-heading { font-size: 34px; }
    .p { font-size: 20px; }
}

/* =====================================================
   RESPONSIVE — MOBILE (≤ 720px)
   ===================================================== */
@media (max-width: 720px) {
    .container { padding: 0 20px; }
    .container2 { padding: 0 20px; }

    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        box-shadow: 0 8px 16px rgba(0,0,0,0.08);
        transition: max-height 0.25s ease;
    }
    .main-nav.open { max-height: 560px; }
    .main-nav a {
        padding: 14px 24px;
        border-top: 1px solid rgba(0,0,0,0.06);
    }

    .nav-dropdown { width: 100%; }
    .nav-dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        padding: 14px 24px;
        border-top: 1px solid rgba(0,0,0,0.06);
    }
        .nav-dropdown-menu {
        position: static;
        /* FIX: the desktop rule sets left: 50% + transform: translateX(-50%)
           to center a floating, auto-width panel. transform was already
           reset to none on mobile, but `left: 50%` was left in place — with
           min-width: 260px also still inherited from desktop, the panel was
           being sized/nudged wider than its parent and clipped by
           .main-nav's overflow: hidden (line ~1063), which is what sliced
           the row text off at the edge in on-device testing. */
        left: 0;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        box-shadow: none;
        border-radius: 0;
        background: var(--green-pale-bg);
        padding: 0;
        gap: 0;
        min-width: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }
    /* FIX: raised from 240px. With labels now wrapping (white-space: normal
       above) instead of overflowing, some rows take two lines, so the open
       panel needs more room to show all four items without clipping the
       last one. 320px comfortably fits 4 rows even if 2 of them wrap. */
    .nav-dropdown.open .nav-dropdown-menu {
        max-height: 320px;
        /* FIX: the real root cause of the sideways-clipped text. The base
           desktop rule .nav-dropdown-menu (line ~311) sets
           left: 50% + transform: translateX(-50%) to center a floating,
           auto-width panel, and .nav-dropdown.open .nav-dropdown-menu
           (line ~330) re-asserts that same transform for the open state.
           That second rule has higher specificity (.nav-dropdown.open
           .nav-dropdown-menu = 3 class selectors) than the plain
           .nav-dropdown-menu { transform: none } reset below, which only
           has 1 class selector — media queries don't add specificity, so
           the desktop "open" rule was winning and shifting the whole
           panel left by half its own width (verified via computed style:
           translateX(-196.5px) on a 393px-wide panel). Overriding it here,
           at matching specificity, is what actually removes the shift. */
        transform: none;
    }
    .nav-dropdown-menu a {
        padding: 12px 24px 12px 36px;
        border-radius: 0;
        font-size: 14px;
        /* FIX: the desktop rule (line ~342) sets white-space: nowrap so the
           floating dropdown can size itself to its longest label. On mobile
           the panel is position: static and locked to the header's width,
           so nowrap made long labels ("Ndakaini Mazingira Half Marathon",
           "Ndakaini Source Treck") overflow sideways past the visible
           panel edge instead of wrapping — which is what made those rows
           look blank in on-device testing. Resetting to normal lets long
           labels wrap onto a second line within their row instead of
           running off-screen. */
        white-space: normal;
        line-height: 1.35;
    }




    .newsletter-btn { display: none; }
    .nav-toggle { display: flex; }

    .hero {
    min-height: 68vh;
    align-items: center;   /* ⬅ vertically centers hero-inner on mobile */
    }

    .hero-inner {
        margin-top: 0;         /* ⬅ cancel desktop's 10% top margin */
        padding-top: 0;
        padding-bottom: 0;
    }
    .hero-heading { font-size: 27px; }
    .p { font-size: 17px; }
    .hero-badge-img { width: 300px; }

    .logo-icon { height: 90px; }
    .logo-icon-tall { height: 60px; }

    .badge-half { padding: 7px 12px; font-size: 10.5px; }

    .section-heading { font-size: 24px; }
    .about, .values { padding: 56px 0; }

    .about-content { padding: 24px 20px 0; }        
    .about-text {
    color: var(--ink-soft);
    font-size: 19px;
    
}
    .about-photo-card { min-height: 280px; }
    .focus-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 100%; margin-left: 0; margin-right: 0; }  /* ⬅ FIX: reset desktop margin-left: 50px so grid centers on mobile */
    .focus-card { padding: 12px; gap: 10px; border-radius: 12px; }    /* ⬅ ADDED */
    .focus-icon { width: 48px; height: 48px; }   /* ⬅ ADDED */
    .focus-title { font-size: 14.5px; } 
    .focus-card:hover,
    .focus-card:focus-within { transform: translateY(-2px); } /* smaller lift, more finger-friendly */

    .values { background-attachment: scroll; } /* iOS Safari doesn't parallax fixed backgrounds and it can jank on some Android browsers */
    .values-inner { padding: 0 20px; } 
    .values-grid { grid-template-columns: 1fr; }
    .value-card { border-radius: 12px; }
    .value-card:hover,
    .value-card:focus-within { transform: translateY(-2px); }

    .marathon-eyebrow { font-size: 15px; }
    .marathon-heading { font-size: 42px; }
    .marathon-sub { font-size: 21px; }
    .marathon-content { padding: 32px 22px; }
    .marathon-logo-icon{height: 80px; width: 140px}

    .impact { padding: 64px 0 56px; }
    .impact-heading { font-size: 30px; margin-bottom: 44px; }
    .timeline { gap: 32px; max-width: 100%; }
    .timeline-body { gap: 12px; }
    .timeline-trees { width: 56px; }
    .timeline-target-label { font-size: 18px; }
    .timeline-headline { font-size: 17px; }
    .timeline-desc { font-size: 12.5px; max-width: 100%; }

    .adopt { padding: 48px 0; }
    .adopt-grid { gap: 24px; padding: 0 20px; }
    .adopt-photo { min-height: 220px; }

    .gallery-heading { font-size: 19px; padding-bottom: 24px; }
    .gallery-strip { gap: 2px; }

    .footer-grid { grid-template-columns: 1fr !important; gap: 30px; text-align: center; }
    .footer-newsletter-col { max-width: 100%; }
    .newsletter-field-row { flex-direction: column; }
    .newsletter-input { width: 100%; }
    .newsletter-submit { width: 100%; justify-content: center; }
    .footer-logo { justify-content: center; }
    .footer-badge-link { margin: 14px auto 0; }
    .footer-bottom { flex-direction: column; text-align: center; padding-top: 32px; gap: 18px; }
    .social-icons { justify-content: center; flex-wrap: wrap; }
    .footer-nav { justify-content: center; }
   
    .site-footer .container { max-width: 100%; padding: 0 20px; }
}

@media (max-width: 420px) {
    .header-inner { gap: 10px; }
    .logo-title { font-size: 11px; }
    .logo-subtitle { font-size: 7px; }
    .hero-heading { font-size: 23px; }
    .p { font-size: 15.5px; }
    .focus-card { flex-direction: column; text-align: center; padding: 14px 10px; gap: 8px; }
    .focus-title { font-size: 11px; }
    .value-card { padding: 20px 18px; }
    .value-card h3 { font-size: 19px; }
    .value-card p { font-size: 15.5px; }
}
/* =====================================================
   TRANSPARENT / DARK HEADER VARIANT
   (used on pages whose hero is a full-bleed photo/graphic:
   Green Drive, Impact, Marathon)
   ===================================================== */
body.page-dark-header .site-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: transparent;
    box-shadow: none;
}
body.page-dark-header .site-header .logo-title,
body.page-dark-header .site-header .logo-subtitle { color: var(--white); }
body.page-dark-header .site-header .main-nav a { color: var(--white); }
body.page-dark-header .site-header .main-nav a::after { background: var(--yellow); }

body.page-dark-header .site-header .nav-dropdown-menu a { color: var(--green-dark); }
body.page-dark-header .site-header .nav-dropdown-menu a:hover { background: var(--green-pale-bg); }
body.page-dark-header .site-header .btn-outline-green {
    border-color: rgba(255,255,255,0.75);
    color: var(--white);
}
body.page-dark-header .site-header .btn-outline-green:hover {
    background: var(--white);
    color: var(--green-dark);
}
body.page-dark-header .site-header .nav-toggle span { background: var(--white); }


@media (max-width: 720px) {
    /* the dropdown panel itself stays on a white surface for legibility,
       so its own links/toggle revert to the dark, non-transparent styling */
    body.page-dark-header .site-header .main-nav { background: var(--white); }
    body.page-dark-header .site-header .main-nav a { color: var(--green-dark); }
    body.page-dark-header .site-header .main-nav a::after { background: var(--green); }
    body.page-dark-header .site-header .nav-dropdown-toggle { color: var(--green-dark); }
    body.page-dark-header .site-header .nav-toggle.open span { background: var(--white); }
}

/* =====================================================
   PLACEHOLDER IMAGE BLOCKS
   Combine a real (possibly not-yet-uploaded) static path with a
   gradient fallback + label, so swapping in real photography later
   needs no markup changes — just replace the file at that static path.
   ===================================================== */
.ph-block {
    position: relative;
    background-size: cover;
    background-position: center;
    
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.ph-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 14px;
    padding: 6px 12px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--green-dark);
    background: rgba(255,255,255,0.88);
    border: 1px dashed var(--green);
    border-radius: 999px;
}

/* =====================================================
   IMPACT PAGE
   ===================================================== */
.impact-page-hero {
    min-height: 60vh;
}
.impact-page-hero .ph-block {
    min-height: 60vh;
    background-image:
        
        linear-gradient(160deg, var(--green-darker) 0%, var(--green-dark) 55%, var(--green) 100%);
}

.impact-list-section {
    background: var(--white);
    padding: 60px 0 80px;
}
.impact-page-heading {
    text-align: center;
    font-family: var(--font-heading);
    color: var(--green-dark);
    font-weight: 800;
    font-size: 32px;
    line-height: 1.2;
    margin: 0 0 40px;
}
.impact-page-heading .ipl-year {
    display: block;
    font-size: 2.3em;
    font-weight: 900;
}

.impact-list {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(13,34,19,0.15);
}
.impact-list-row {
    display: grid;
    grid-template-columns: 74px 230px 1fr;
    align-items: center;
    column-gap: 24px;
    padding: 20px 30px;
    background: var(--green-dark);
    color: var(--white);
}
.impact-list-row:nth-child(even) { background: var(--green); }
.impact-list-icon {
    width: 46px;
    height: 46px;
    color: var(--white);
    flex-shrink: 0;
}
.impact-list-icon svg { width: 100%; height: 100%; }
.impact-list-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.03em;
    color: var(--yellow);
}
.impact-list-desc {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255,255,255,0.88);
    margin: 0;
}

/* =====================================================
   MARATHON PAGE (detail sections below the hero banner)
   ===================================================== */

/* ============ HERO QR CODE ============ */
.hero-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--white);
    text-align: center;
}
.hero-qr img {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    background: var(--white);
    padding: 6px;
}
.hero-qr-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
}

.marathon-detail { background: var(--white); padding: 72px 0; }
.marathon-detail + .marathon-detail { padding-top: 0; }

.md-heading {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 32px;
    color: var(--blue-dark);
    margin: 0 0 18px;
}
.md-subheading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--ink);
    margin: 0 0 16px;
}
.md-text {
    color: var(--ink-soft);
    font-size: 20px;
    line-height: 1.75;
    min-width: 800px;
    margin: 0 0 30px;
    font-weight: 450;
}
.md-text strong { color: var(--ink); }

/* --- About / info card --- */
.md-info-card {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    min-width: 800px;
    border: 5px solid var(--green-light);
    border-radius: 22px;
    overflow: hidden;
}
.md-info-list {
    background: linear-gradient(160deg, var(--blue-dark) 0%, var(--blue) 100%);
    padding: 30px 34px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.md-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.md-info-item:last-child { border-bottom: none; padding-bottom: 0; }
.md-info-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}
.md-info-icon svg { width: 17px; height: 17px; }
.md-info-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.65);
    margin: 0 0 3px;
}
.md-info-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--white);
    margin: 0;
}
.md-info-photo { 
    min-height: 260px;
    
}
.md-info-photo .ph-block {
    height: 100%;
    background-size: contain ;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-image:
        
        linear-gradient(160deg, var(--blue) 0%, var(--blue-dark) 100%);
}

 
/* --- Venue Map --- */
.md-map-card {
    border: 5px solid var(--green-light);
    border-radius: 22px;
    overflow: hidden;
    background: var(--white);
    min-width: 820px;
}
.md-map-frame {
    display: block;
    width: 100%;
    height: 420px;
    border: none;
}
.md-map-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 30px;
    background: linear-gradient(90deg, var(--blue-dark), var(--blue));
}
.md-map-venue-name {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 18px;
    color: var(--white);
    margin: 0 0 4px;
}
.md-map-venue-sub {
    font-size: 13.5px;
    color: rgba(255,255,255,0.75);
    margin: 0;
}
.md-map-directions-btn {
    flex-shrink: 0;
    margin-top: 0;
}


/* --- Races and Fees --- */
.md-races-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 40px;
    align-items: start;
    min-width: 820px;
    width: 100%;

}
.md-races-icon {
    width: 100%;
    min-height: 500px;
    margin-top: 0;
    padding-top: 0;
    border-radius: 14px;
}
.md-races-icon.ph-block {
    background-color: transparent;
    background-size: auto 105%;
    background-position: top center;
    background-repeat: no-repeat;
    margin-top: -100px;
}



/* after */
/* ============ RACES AND FEES — shared wash + transparent table ============ */
#races-fees.marathon-detail {
    padding: 72px 0;
}

.md-race-table {
    width: 100%;
    
}
.md-race-table-header {
    display: grid;
    grid-template-columns: 28px 1.8fr 0.8fr 2.7fr;
    column-gap: 18px;
    padding: 0 26px 14px;
    border-bottom: 2.5px solid var(--green-darker);
}

.md-race-table-header-meta {
    display: grid;
    grid-template-columns: 100px 100px 1fr;
    column-gap: 18px;
    text-align: left;
}
.md-race-table-header-meta .col-fee { text-align: center; }

.md-race-table-header span {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray);
}
.md-race-table-header .col-fee { color: var(--green); }
.md-race-table-header .col-assembly { color: var(--blue); }
.md-race-table-header .col-start { color: var(--orange); }

.md-race-table-body { display: flex; flex-direction: column; gap: 10px; }
/* after */
/* after */
@keyframes raceRowWipe {
    from { clip-path: inset(0 100% 0 0); opacity: 0; }
    to   { clip-path: inset(0 0 0 0); opacity: 1; }
}
/* >>>>>>>>>> AMENDMENT START <<<<<<<<<< */
/* Light frosted-glass treatment (no photo backdrop on this section, so
   this uses the pale-tint recipe from .focus-card rather than the dark
   glass used on .impact-row): translucent tinted fill + blur, soft
   border, yellow border + lift on hover — the row's own wipe-reveal
   animation and per-race accent colours below are untouched. */
.md-race-table-row {
    display: grid;
    grid-template-columns: 28px 1.8fr 0.8fr 2.7fr;
    column-gap: 18px;
    align-items: center;
    padding: 18px 26px;
    border-radius: 14px;
    background: rgba(139, 195, 74, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(22, 52, 31, 0.12);
    box-shadow: 0 6px 16px rgba(13, 34, 19, 0.06);
    position: relative;
    /* was: animation: ... forwards — a plain CSS animation runs once on
       page load regardless of scroll position, so if this section starts
       below the fold, it's already finished by the time you scroll to it.
       Starting from the pre-animation state and only running the
       animation once JS adds .is-visible (matching the .reveal pattern
       used elsewhere on the site) makes it trigger on scroll instead. */
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.md-race-table-row.is-visible {
    animation: raceRowWipe 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--row-index, 0) * 110ms);
}

@media (prefers-reduced-motion: reduce) {
    .md-race-table-row { animation: none; opacity: 1; clip-path: none; }
}

.md-race-table-row:hover,
.md-race-table-row:focus-within {
    background: rgba(242, 194, 48, 0.1);
    border-color: var(--yellow);
    box-shadow: 0 12px 26px rgba(13, 34, 19, 0.12);
    transform: translateY(-3px);
}
/* >>>>>>>>>> AMENDMENT END <<<<<<<<<< */
.md-race-table-row:hover .md-race-name,
.md-race-table-row:hover .md-race-distance { color: var(--ink); }
.md-race-table-row:hover .md-race-dot { box-shadow: 0 0 0 4px rgba(22,52,31,0.12); }
.md-race-table-row:nth-child(4n+1):hover .md-race-fee { color: var(--blue-dark); }
.md-race-table-row:nth-child(4n+2):hover .md-race-fee { color: var(--red); }
.md-race-table-row:nth-child(4n+3):hover .md-race-fee { color: var(--green-dark); }
.md-race-table-row:nth-child(4n+4):hover .md-race-fee { color: var(--orange); }

.md-race-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(22,52,31,0.06);
}
.md-race-table-row:nth-child(4n+1) .md-race-dot { background: var(--blue); }
.md-race-table-row:nth-child(4n+2) .md-race-dot { background: var(--red); }
.md-race-table-row:nth-child(4n+3) .md-race-dot { background: var(--green-mid); }
.md-race-table-row:nth-child(4n+4) .md-race-dot { background: var(--orange); }

.md-race-name { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--ink); }
.md-race-distance { font-size: 15px; font-weight: 600; color: var(--gray); }
.md-race-meta-row {
    display: grid;
    grid-template-columns: 100px 100px 1fr;
    column-gap: 18px;
    align-items: center;
}
.md-race-meta-row .md-race-fee { text-align: center; }
.md-race-assembly,
.md-race-start {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.md-race-assembly { background-image: linear-gradient(90deg, var(--blue-dark), var(--blue)); }
.md-race-start { background-image: linear-gradient(90deg, var(--orange), var(--yellow)); }
.md-race-fee { font-family: var(--font-heading); font-weight: 700; font-size: 15px; white-space: nowrap; }
.md-race-table-row:nth-child(4n+1) .md-race-fee { color: var(--blue-dark); }
.md-race-table-row:nth-child(4n+2) .md-race-fee { color: var(--red); }
.md-race-table-row:nth-child(4n+3) .md-race-fee { color: var(--green-dark); }
.md-race-table-row:nth-child(4n+4) .md-race-fee { color: var(--orange); }

@media (prefers-reduced-motion: reduce) {
    .md-race-table-row { clip-path: none; opacity: 1; transition: none; }
}

/* --- Transport & Tree Donation --- */
.md-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: center;
    width: 100%;
    min-width: 0;
}
.md-price-pill {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-width: 460px;
    padding: 10px 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue-dark), var(--blue));
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 22px;
}
.md-price-pill .fee { color: var(--yellow); }
.md-schedule-label {
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: 0.08em;
    color: var(--ink);
    margin: 0 0 10px;
}
.md-schedule-rows { display: flex; flex-direction: column; gap: 8px; }
.md-schedule-row {
    display: flex;
    justify-content: space-between;
    min-width: 400px;
    font-size: 18px;
    color: var(--ink-soft);
    padding-bottom: 6px;
    border-bottom: 1px dashed #d8e0da;
}
.md-schedule-row span:last-child { font-weight: 700; color: var(--ink); }
.md-two-col .ph-block {
    border-radius: 14px;
    min-height: 300px;
   
        
}

/* ============ TRANSPORT SCHEDULE TABLE ============ */
.md-transport-table {
    width: 100%;
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(13,34,19,0.08);
}
.md-transport-table-header {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    column-gap: 18px;
    padding: 0 22px 12px;
    border-bottom: 2.5px solid var(--green-darker);
}
.md-transport-table-header span {
    font-family: var(--font-heading);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray);
}
.md-transport-table-body { display: flex; flex-direction: column; }
.md-transport-table-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    column-gap: 18px;
    align-items: center;
    padding: 14px 22px;
    border-bottom: 1.5px solid rgba(22,52,31,0.12);
}
.md-transport-table-row:last-child { border-bottom: none; }
.md-transport-stop {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
}
.md-transport-time {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-soft);
}


/* --- CTA band --- */
/* >>>>>>>>>> AMENDMENT START <<<<<<<<<< */
/* Dark glass treatment: the backdrop photo is set inline in marathon.html
   via {% static %} (plain CSS can't resolve Django static paths), tinted
   here with the band's existing blue identity instead of switching to
   green, with the yellow hover accent used everywhere else on the site. */
.md-cta-band {
    position: relative;
    display: grid;
    grid-template-columns: 380px minmax(0, 360px) 160px;
    justify-content: center;
    column-gap: 100px;
    align-items: center;
    width: 100%;
    padding: 5px 20px;
    border-radius: 999px;
    overflow: hidden;
    color: var(--white);

    background-size: cover;
    background-position: center;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 16px 40px rgba(8, 18, 10, 0.3);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.md-cta-band::before {
    /* Blue tint over the inline photo, so the glass keeps its established
       blue CTA identity rather than reading as plain green glass. */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18,79,104,0.82), rgba(31,127,166,0.72));
    pointer-events: none;
}
.md-cta-band > * { position: relative; z-index: 1; }
.md-cta-band:hover,
.md-cta-band:focus-within {
    border-color: var(--yellow);
    box-shadow: 0 20px 48px rgba(8, 18, 10, 0.4), 0 0 0 1px rgba(242, 194, 48, 0.25);
}
/* >>>>>>>>>> AMENDMENT END <<<<<<<<<< */

.md-cta-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--white);
    text-align: center;
    justify-self: center;
}
.md-cta-qr img {
    width: 130px;
    height: 130px;
    border-radius: 12px;
    background: var(--white);
    padding: 6px;
}
.md-cta-qr span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
}
/* Real <img> now, so its own aspect ratio is used automatically —
   just set the height and let width follow. No more guessed
   aspect-ratio values that squash or stretch the logo. */
.md-cta-lockup {
    height: 280px;
    width: auto;
    max-width: 500px;
    align-self: center;
    justify-self: center;
    margin-left: 0;
}
/* Groups the copy + button as a single flex child so they can never
   split apart into their own separate wrapped rows (that was what
   produced the tall, overlapping "blob" layout). */
.md-cta-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}
.md-cta-sub {
    font-size: 24px;
    color: rgba(255,255,255,0.85);
    max-width: 340px;
    font-weight: 600;
    margin: 0;
}
.md-cta-band .btn-register {
    margin-top: 0px;
}

/* The row layout (logo beside text) needs real horizontal room to fit
   without wrapping. Below ~1150px there isn't enough space, so switch
   to the same stacked layout used on mobile before it has a chance to
   overflow and wrap into the tall, circular "blob" shape. */
@media (max-width: 1280px) {
    .md-cta-band {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 32px 28px;
        border-radius: 32px;
        gap: 10px
    }

    .md-cta-qr {
        justify-self: center;
        margin-top: 4px;
    }
    .md-cta-lockup {
        height: auto;
        width: 100%;
        max-width: 320px;
        margin: 0 auto 20px;
    }
    .md-cta-text {
        align-items: center;
    }
}


/* --- Sponsors --- */

/* >>>>>>>>>> AMENDMENT START <<<<<<<<<< */
/* .container2 (used site-wide on this page) caps out at max-width:80% on
   desktop, which is what was keeping the sponsors graphic narrow. Scoping
   the override to #sponsors only, so races/transport/tree-donation
   sections elsewhere on this page keep their current, already-tuned width. */
#sponsors.marathon-detail .container2 {
    max-width: 100%;
    margin: 0 auto;
}
/* --- Sponsors --- */
.sponsors-marquee-wrap {
    margin: 0 0 44px;
}
.sponsor-card {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 380px;
    height: 250px;
    margin: 0 14px;
    padding: 18px 22px;
    background: transparent;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sponsor-card:hover {
    transform: translateY(-4px) scale(1.05);
}
.sponsor-card img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.md-final-badge { display: flex; justify-content: center; }

/* ============ VIRTUAL RACE / CERTIFICATE CTA CARDS ============ */
/* Deliberately its own class rather than reusing .md-info-card, which
   carries a min-width: 800px meant for that card's internal two-column
   layout - two of those side by side in a grid overflowed the viewport. */
.vr-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}
.vr-cta-card {
    border-radius: 22px;
    border: 5px solid var(--green-light);
    padding: 36px 40px;
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.vr-cta-card-blue { background: linear-gradient(160deg, var(--blue-dark) 0%, var(--blue) 100%); }
.vr-cta-card-green { background: linear-gradient(160deg, var(--green-dark) 0%, var(--green) 100%); }
.vr-cta-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.vr-cta-icon svg { width: 20px; height: 20px; }
.vr-cta-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.65);
    margin: 0 0 4px;
}
.vr-cta-heading {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 19px;
    margin: 0 0 10px;
}
.vr-cta-text {
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(255,255,255,0.8);
    margin: 0 0 20px;
}
.vr-cta-card .btn-learn-more { margin-top: 0; }

@media (max-width: 1024px) {
    .vr-cta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .vr-cta-card { padding: 28px 24px; }
    .vr-cta-heading { font-size: 17px; }
}

.program-hero {
    width: 100%;
    line-height: 0; /* removes the small gap under inline images */
    background: var(--green-darker); /* shows briefly while the image loads */
}
.program-hero-img {
    width: 100%;
    height: auto;
    display: block;
}
.program-intro {
    background: var(--white);
    padding: 56px 24px 72px;
    text-align: left;
}
.program-heading {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 60px;
    color: var(--green-dark);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.program-subheading {
    font-size: 22px;
    color: var(--ink-soft);
    max-width: 600px;
    margin: 0 0 40px;
    line-height: 1.6;
}
.program-icon {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    justify-content: center;
}
.program-icon img {
    width: 100%;
    height: auto;
    display: block;
    justify-content: center;
}
 
@media (max-width: 720px) {
    .program-heading { font-size: 26px; }
    .program-subheading { font-size: 15px; }
    .program-icon { max-width: 280px; }
}
/* =====================================================
   GREEN DRIVE PAGE
   ===================================================== */
.gd-hero { min-height: 68vh; }
.gd-hero .ph-block {
    min-height: 68vh;
    background-image:
        
        linear-gradient(120deg, var(--green-darker) 0%, var(--green) 100%);
}

.gd-intro { 
    background: var(--white); 
    padding: 72px 0 40px;
    min-width: 100%;
}
.gd-intro-heading {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 30px;
    line-height: 1.3;
    color: var(--green);
    min-width: 100%;
    margin: 0 0 26px;
}
.gd-intro p {
    color: var(--ink-soft);
    font-size: 20.5px;
    line-height: 1.8;
    max-width: 100%;
    margin: 0 0 20px;
    font-weight: 400;
}

.gd-intro .container {
    max-width: 90%;
    margin: 0 auto;
    padding: 0 60px;
}

.gd-achievement { 
    background: var(--white); 
    padding: 20px 0 60px; 
    text-align: center; 
    
}

.gd-achievement .container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 60px;
}
.gd-achievement-box {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    padding: 44px 52px 56px;
    border: 2px solid var(--green);
    border-radius: 8px;
    text-align: left;
}
.gd-achievement-box svg.gd-tree-icon {
    position: absolute;
    top: -40px;
    left: 40px;
    width: 54px;
    height: 54px;
    color: var(--green);
    background: var(--white);
}
.gd-achievement-box p {
    font-size: 24px;
    line-height: 1.75;
    font-weight: 500;
}
.gd-achievement-connector {
    display: block;
    width: 40px;
    height: 40px;
    margin-left: 30px;
}

.gd-photo-section { padding: 0 0 0; background: var(--white); }
.gd-photo-section .ph-block {
    min-height: 100vh;
    background-image:
        
        linear-gradient(120deg, var(--green-light), var(--green));
}

.gd-vision { 
    background: var(--white); 
    padding: 60px 0 80px;
    min-width: 100%; 
}
.gd-vision-heading {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 30px;
    color: var(--green-dark);
    margin: 0 0 18px;
    min-width: 800px;
}
.gd-vision p {
    color: var(--ink-soft);
    font-size: 20px;
    line-height: 1.8;
    margin: 0 0 16px;
    min-width:800px;
    font-weight: 500;
}
.gd-vision p strong { color: var(--ink); }

.gd-cta { 
    padding: 40px 0;              /* ⬅ a bit more room now there's a real photo to show */
      /* fallback while the image loads */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gd-cta .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 60px;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.gd-cta-inner {
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: 1fr;
    align-items: stretch;
    gap: 80px;
    width: 100%;
    max-width: 900px;
    min-height: 350px;   /* ≈ 260px × (577/408) to roughly match the cropped aspect ratio */
    margin: 50px 0 10px;
    border-radius: 18px;
    overflow: hidden;
    background: transparent;
}
.gd-cta-poster {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    margin-left: 10px;
    background-color: var(--green-darker);
    background-repeat: no-repeat;

}

.gd-cta-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 30px 34px 30px 0;
}
.gd-cta-text p {
    font-family: var(--font-heading);
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 26px;
    color: var(--white);
    line-height: 1.35;
    margin: 10px 0 18px;
}

/* ============ TREE DONATION (Green Drive page) ============ */
.tree-donate { padding: 20px 0 80px; background: var(--white); }
.tree-donate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 0 60px;
}
.tree-donate-content { 
    align-self: center; 
    justify-self: center;

}
.tree-donate-content .section-heading { margin-bottom: 20px; }
.tree-donate-content p {
    color: var(--ink-soft);
    font-size: 20px;
    line-height: 1.8;
    margin: 0 0 30px;
    max-width: 700px;
}
.tree-donate-photo {
    min-height: 320px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.tree-donate-photo:hover {
    box-shadow: 0 20px 40px rgba(13,34,19,0.2);
}

/* =====================================================
   RESPONSIVE ADDITIONS — TABLET / MOBILE for new pages
   ===================================================== */
@media (max-width: 1024px) {
    .impact-list-row { grid-template-columns: 54px 190px 1fr; padding: 16px 22px; }
    .md-info-card { grid-template-columns: 1fr; }
    .md-info-photo { min-height: 220px; }
    .md-races-grid { grid-template-columns: 1fr; }
    .md-two-col { grid-template-columns: 1fr; }
    .md-two-col .ph-block { min-height: 200px; }
    .gd-cta-inner { grid-template-columns: 160px 1fr; }
    .adopt-content { padding: 0 20px; }
    .adopt-grid { padding: 0 32px; }
    .md-map-card { min-width: 0; }
    .md-map-frame { height: 340px; }
    .tree-donate-grid { grid-template-columns: 1fr; padding: 0 32px; }
    .tree-donate-photo { min-height: 260px; }

}

@media (max-width: 720px) {
    .impact-page-hero, .impact-page-hero .ph-block { min-height: 42vh; }
    .impact-page-heading { font-size: 26px; }
    .impact-list-row {
        grid-template-columns: 40px 1fr;
        grid-template-areas: "icon title" "desc desc";
        row-gap: 8px;
        padding: 16px 18px;
    }
    .impact-list-icon { grid-area: icon; width: 34px; height: 34px; }
    .impact-list-title { grid-area: title; }
    .impact-list-desc { grid-area: desc; }

    .marathon-detail { padding: 48px 0; }
    .hero-qr img { width: 60px; height: 60px; }
    .md-cta-qr img { width: 76px; height: 76px; }
    .md-heading { font-size: 21px; }
    .md-races-icon {
        max-width: 100%;      /* ⬅ override the 160px cap inherited from tablet */
        width: 100%;
        min-height: 320px;    /* ⬅ smaller than desktop's 380px so it doesn't dominate the page */
        background-size: auto 100%;  /* ⬅ image fits fully; gradient layer still covers as backdrop */
        background-position: top center;
    }
    .md-info-list { padding: 22px 22px; }

    .md-cta-band {
        grid-template-columns: 1fr;   /* ⬅ stack lockup / text-block instead of left-justified row */
        justify-items: center;       /* ⬅ centers everything horizontally */
        text-align: center;
        padding: 32px 24px;
        border-radius: 24px;
        min-width: 0;
        width: 100%;
        gap: 10px;
    
    }
    .md-cta-lockup {
        height: auto;
        width: 100%;
        max-width: 260px;         /* ⬅ caps it so it doesn't touch the card edges */
        margin: 0 auto 20px;      /* ⬅ centers the logo + adds space before the text */
    }
    .md-cta-text {
        align-items: center;      /* ⬅ centers copy + button under the stacked logo */
    }
    .sponsor-card { width: 280px; height: 200px; margin: 0 10px; padding: 12px 14px; }

    .md-race-table-header { display: none; }
    .md-race-table-row {
        display: grid;
        grid-template-columns: 16px 1fr 1fr;
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: 8px;
        padding: 14px 16px;
        border-radius: 12px;
    }
    .md-race-dot {
        grid-column: 1;
        grid-row: 1;
        margin-top: 4px;
    }
    .md-race-name {
        grid-column: 2;
        grid-row: 1;
        font-size: 13px;
    }
    .md-race-distance {
        grid-column: 3;
        grid-row: 1;
        font-size: 14px;
        text-align: right;
    }
    .md-race-meta-row {
        grid-column: 2 / 4;
        grid-row: 2;
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        column-gap: 8px;
        align-items: baseline;
    }
    .md-race-assembly,
    .md-race-start {
        font-size: 12.5px;
        white-space: nowrap;
    }
    .md-race-fee {
        font-size: 13px;
        text-align: right;
        white-space: nowrap;
    }
    .md-race-assembly::before { content: "Assembly "; font-weight: 700; }
    .md-race-start::before { content: "Start "; font-weight: 700; }
    #races-fees.marathon-detail { padding: 44px 0; }

    .md-transport-table-header,
    .md-transport-table-row {
        grid-template-columns: 1.2fr 0.9fr 0.9fr;
        column-gap: 10px;
        padding: 12px 16px;
    }
    .md-transport-table-header span { font-size: 9.5px; }
    .md-transport-stop { font-size: 13px; }
    .md-transport-time { font-size: 12.5px; }

    .gd-hero { min-height: 46vh; }
    .gd-hero .ph-block {
        min-height: 46vh;
        background-size: contain, cover;   /* ⬅ image fits fully; gradient layer still covers as backdrop */
        background-repeat: no-repeat, no-repeat;
        background-position: center;
        background-color: var(--green-darker);  /* ⬅ fills any letterbox gaps with a matching color */
    }
    .gd-intro-heading { font-size: 24px; }
    .gd-intro p { font-size: 18px; line-height: 1.7; }
    .gd-intro .container,
    .gd-achievement .container,
    .gd-cta .container { max-width: 100%; padding: 0 20px; }
    .gd-achievement-box { padding: 34px 22px 30px; }
    .gd-achievement-box svg.gd-tree-icon { left: 24px; width: 42px; height: 42px; top: -32px; }
    .gd-achievement-box p { font-size: 18px; }

    .gd-photo-section .ph-block { min-height: 50vh; }
    .gd-cta-inner { 
        grid-template-columns: 1fr; 
        min-height: 0; 
        text-align: center; 
        gap:34px}
    .gd-cta-poster { 
        width: 100%;
        max-width: 280px;      /* keeps the portrait flyer from stretching too wide */
        aspect-ratio: 3 / 4;   /* adjust to match nwsl.png's real ratio if you know it */
        height: auto;
        margin: 0 auto;        /* centers it, matching the screenshot */
        background-size: contain;
        background-position: center;
        background-color: transparent;
    }
    .gd-cta-text { align-items: center; padding: 24px 24px 30px; }

    /* ---- FIX: kill fixed desktop min-widths that force horizontal
       overflow on phones. These selectors set min-width: 760–820px
       at the base/desktop level (see .md-text, .md-info-card, etc.)
       so a phone viewport had no way to shrink below that, which is
       what was clipping the KES prices / bus times off-screen. ---- */
    .md-text,
    .md-info-card,
    .md-races-grid,
    .md-two-col,
    .md-price-pill,
    .md-schedule-row,
    .md-transport-table,
    .gd-intro-heading,
    .gd-intro p,
    .gd-vision-heading,
    .gd-vision p,
    .md-map-card {
        min-width: 0;
        width: 100%;
    }

    .md-text { font-size: 16px; }
    .gd-intro p,
    .gd-vision p { font-size: 16px; }
    .gd-vision-heading { font-size: 22px; }

    

        /* Venue map: shorter frame on phones, and the footer (venue name +
       Get Directions button) stacks instead of squeezing into one row. */
    .md-map-card { border-width: 3px; border-radius: 16px; }
    .md-map-frame { height: 260px; }
    .md-map-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 18px 20px;
    }
    .md-map-directions-btn { width: 100%; justify-content: center; }

    .volunteer-hero { padding: 96px 20px 56px; min-height: 100svh; }
    .volunteer-form { padding: 32px 24px; gap: 15px; }
    .volunteer-form-heading { font-size: 24px; }
    .volunteer-form-lead { font-size: 13.5px; }
    .volunteer-field input { padding: 11px 14px; font-size: 14px; }
    .tree-donate { padding: 48px 0; }
    .tree-donate-grid { gap: 24px; padding: 0 20px; }
    .tree-donate-content p { font-size: 18px; max-width: 100%; }
    .tree-donate-photo { min-height: 220px; }
}

@media (max-width: 420px) {
    .md-price-pill { min-width: 0; width: 100%; }
    .md-schedule-row { min-width: 0; max-width: 100%; }
    .sponsor-card { width: 250px; height: 160px; }
    .volunteer-form { padding: 26px 20px; }
}


/* ============ BACK TO TOP BUTTON (site-wide) ============ */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 200;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    background: var(--green-dark);
    color: var(--white);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(13,34,19,0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover { background: var(--green); }
.back-to-top:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 2px;
}
 
@media (max-width: 720px) {
    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }
}

/* =====================================================
   LANDSCAPE PHONE (device rotated sideways)
   Targets short, wide viewports specifically — orientation
   + max-height keeps this from also matching landscape
   tablets/laptops, which are wide but much taller.
   ===================================================== */
@media (orientation: landscape) and (max-width: 1024px)  {

    /* ---- HOME: hero centering ---- */
    .hero { align-items: center; }
    .hero-inner { margin-top: 0; padding-top: 24px; padding-bottom: 24px; }

    /* ---- HOME: about section breathing room ---- */
    .about-content { padding: 24px 20px 0; }
    .values { background-attachment: scroll; }

    /* ---- HOME: footer centered + aligned ---- */
    .footer-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
    .footer-logo { justify-content: center; }
    .footer-badge-link { margin: 14px auto 0; }
    .footer-bottom { flex-direction: column; text-align: center; padding-top: 32px; gap: 18px; }
    .social-icons { justify-content: center; flex-wrap: wrap; }
    .footer-nav { justify-content: center; }

    /* ---- MARATHON / GREEN DRIVE: kill overflow-causing min-widths ---- */
    .md-text,
    .md-info-card,
    .md-races-grid,
    .md-two-col,
    
    .md-price-pill,
    .md-schedule-row,
    .gd-intro-heading,
    .gd-intro p,
    .gd-vision-heading,
    .gd-vision p {
        min-width: 0;
        width: 100%;
    }

    .md-two-col .ph-block {
        min-height: 220px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    


    /* ---- MARATHON: races icon fills space instead of shrinking ---- */
    .md-races-icon {
        max-width: 100%;
        width: 100%;
        min-height: 240px;
        background-size: contain;
        background-position: center;
    }

    /* ---- MARATHON: CTA band stacked + no more blob distortion ---- */
    .md-cta-band {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        border-radius: 24px;
        min-width: 0;
        width: 100%;
        padding: 24px 28px;
    }
    .md-cta-lockup {
        height: auto;
        width: 100%;
        max-width: 300px;
        margin: 0 auto 18px;
    }
    .md-cta-text {
        align-items: center;
    }

    /* ---- GREEN DRIVE: poster no longer compressed ---- */
    .gd-cta-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .gd-cta-poster {
        width: 100%;
        max-width: 260px;
        aspect-ratio: 3 / 4;
        height: auto;
        margin: 0 auto;
        background-size: contain;
        background-position: center;
    }
    .gd-cta-text {
        align-items: center;
        padding: 20px 24px 26px;
    }
}

/* ============ FOOTER NEWSLETTER COLUMN ============ */


.footer-newsletter-col .footer-value { margin-bottom: 16px; }

.newsletter-field-row { display: flex; gap: 8px; }
.newsletter-input {
    flex: 1;
    min-width: 0;
    padding: 10px 16px;
    border-radius: 999px;
    border: none;
    font-family: var(--font-body);
    font-size: 13.5px;
    background: rgba(255,255,255,0.95);
    color: var(--ink);
}
.newsletter-input:focus { outline: 2px solid var(--green-light); }
.newsletter-submit {
    flex-shrink: 0;
    background: var(--green-light);
    color: var(--green-darker);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 13px;
    margin-top: 0;
}
.newsletter-submit:hover { background: var(--white); }
.newsletter-honeypot { position: absolute; left: -9999px; }
.newsletter-message { font-size: 12.5px; margin: 10px 0 0; min-height: 16px; }
.newsletter-message.is-success { color: var(--green-light); font-weight: 600; }
.newsletter-message.is-error { color: var(--yellow); font-weight: 600; }


/* ============ VOLUNTEER: photo hero + glass form panel ============ */
.volunteer-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    padding: 120px 0 80px; /* clears the absolutely-positioned dark-header nav */
}
.volunteer-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8,18,10,0.35) 0%, rgba(8,18,10,0.6) 100%);
}
.volunteer-hero-inner {
    position: relative;
    display: flex;
    justify-content: center;
}

.volunteer-form {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 44px 40px;
    border-radius: 20px;

    /* glass */
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1.5px solid rgba(255, 255, 255, 0.55); /* solid-colour border, base state */
    box-shadow: 0 20px 50px rgba(8, 18, 10, 0.35);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.volunteer-form:hover,
.volunteer-form:focus-within {
    border-color: var(--yellow);
    box-shadow: 0 24px 60px rgba(8, 18, 10, 0.45), 0 0 0 1px rgba(242, 194, 48, 0.25);
}

.volunteer-form-heading {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 30px;
    color: var(--white);
    margin: 0 0 8px;
}
.volunteer-form-lead {
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 10px;
}

.volunteer-field { display: flex; flex-direction: column; gap: 6px; }
.volunteer-field label {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
}
.volunteer-field input {
    padding: 12px 16px;
    border-radius: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 15px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.volunteer-field input::placeholder { color: rgba(255, 255, 255, 0.55); }
.volunteer-field input:hover { border-color: rgba(255, 255, 255, 0.65); }
.volunteer-field input:focus {
    outline: none;
    border-color: var(--yellow);
    background: rgba(255, 255, 255, 0.2);
}

.volunteer-field select {
    padding: 12px 16px;
    border-radius: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 15px;
    transition: border-color 0.2s ease, background 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.volunteer-field select:hover { border-color: rgba(255, 255, 255, 0.65); }
.volunteer-field select:focus {
    outline: none;
    border-color: var(--yellow);
    background-color: rgba(255, 255, 255, 0.2);
}
.volunteer-field select option { color: var(--ink); }

.volunteer-form .btn-register { align-self: stretch; justify-content: center; margin-top: 4px; }
.volunteer-message { font-size: 13px; margin: 0; min-height: 16px; }
.volunteer-message.is-success { color: var(--green-light); font-weight: 600; }
.volunteer-message.is-error { color: #ff8080; font-weight: 600; }

/* ============ CERTIFICATE LOOKUP (reuses .volunteer-form glass panel) ============ */

.cert-result-panel { align-items: center; text-align: center; }
.cert-result-badge {
    width: 60px;
    height: 60px;
    border-radius: 999px;
    background: rgba(139, 195, 74, 0.22);
    border: 1.5px solid var(--green-light);
    color: var(--green-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}
.cert-download-btn { align-self: stretch; justify-content: center; }
.cert-search-again {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-top: 2px;
}
.cert-search-again:hover { color: var(--white); }