/* ============================================================
   MAGABAGABE HOLDINGS - Professional Agricultural Enterprise
   Style System: Earth Tones + Modern Professional
   ============================================================ */

/* --- CSS Variables --- */
:root {
    --primary: #2D6A4F;
    --primary-dark: #1B4332;
    --primary-light: #40916C;
    --primary-lighter: #95D5B2;
    --primary-lightest: #D8F3DC;
    --accent: #B7791F;
    --accent-light: #D69E2E;
    --accent-lighter: #F6E05E;
    --text-dark: #1A202C;
    --text: #2D3748;
    --text-light: #718096;
    --text-lighter: #A0AEC0;
    --bg: #FFFFFF;
    --bg-alt: #F7FAFC;
    --bg-dark: #1A202C;
    --bg-darker: #0F1419;
    --border: #E2E8F0;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 40px -10px rgba(0,0,0,0.15);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --- Scroll Progress Bar --- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary-light));
    z-index: 1001;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(45, 106, 79, 0.4);
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-padding-top: 80px;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--primary-dark);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Section Headers --- */
.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header.left {
    text-align: left;
}

.section-tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary);
    background: var(--primary-lightest);
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.section-tag.light {
    color: var(--primary-lightest);
    background: rgba(255,255,255,0.15);
}

.section-header h2 {
    font-family: var(--font-heading);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 16px;
    line-height: 1.2;
}

.section-desc {
    font-size: 18px;
    color: var(--text-light);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    border-radius: 50px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    line-height: 1;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(45, 106, 79, 0.3);
}

.btn-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.6);
}

.btn-outline:hover {
    background: #fff;
    color: var(--primary-dark);
    border-color: #fff;
    transform: translateY(-2px);
}

.btn-full {
    width: 100%;
    justify-content: center;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    transition: all var(--transition);
    padding: 16px 0;
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
    padding: 8px 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    z-index: 1001;
}

.logo-svg {
    height: 36px;
    width: auto;
    transition: all var(--transition);
}

.logo-svg g,
.logo-svg path {
    fill: #fff;
    transition: fill var(--transition);
}
.logo-svg {
    color: #fff;
}

.navbar.scrolled .logo-svg g,
.navbar.scrolled .logo-svg path {
    fill: var(--primary-dark);
}
.navbar.scrolled .logo-svg {
    color: var(--primary-dark);
}

.footer .logo-svg,
.footer-logo-svg {
    height: 45px;
}

.footer .logo-svg g,
.footer .logo-svg path,
.footer-logo-svg g,
.footer-logo-svg path {
    fill: #ffffff !important;
}
.footer .logo-svg,
.footer-logo-svg {
    color: #ffffff !important;
}

.logo-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    letter-spacing: 1px;
    transition: color var(--transition);
}

.logo-text span {
    font-weight: 400;
    display: block;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: -2px;
}

.navbar.scrolled .logo-text {
    color: var(--text-dark);
}

.footer .logo-text {
    color: #fff;
}

.nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 8px;
    position: relative;
}

.nav-link {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    padding: 8px 16px;
    border-radius: 8px;
    transition: all var(--transition);
    text-decoration: none;
}

.nav-link:hover,
.nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.navbar.scrolled .nav-link {
    color: var(--text);
}

.navbar.scrolled .nav-link:hover,
.navbar.scrolled .nav-link.active {
    color: var(--primary);
    background: var(--primary-lightest);
}

.nav-cta {
    background: var(--primary) !important;
    color: #fff !important;
    border-radius: 50px;
    padding: 8px 24px !important;
}

.nav-cta:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-1px);
}

.navbar.scrolled .nav-cta {
    background: var(--primary) !important;
    color: #fff !important;
}

/* Mobile toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all var(--transition);
}

.navbar.scrolled .nav-toggle span {
    background: var(--text-dark);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
    position: relative;
    min-height: 100vh;
    /* svh = the SMALL viewport height, so a mobile browser's collapsing
       address bar can't push the hero content out of view. */
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-dark);
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(27, 67, 50, 0.88) 0%,
        rgba(45, 106, 79, 0.75) 50%,
        rgba(27, 67, 50, 0.85) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: 0 24px;
    animation: fadeInUp 1s ease-out;
}

.hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--primary-lighter);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 24px;
    border-radius: 50px;
    margin-bottom: 32px;
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(48px, 8vw, 80px);
    font-weight: 700;
    color: #fff;
    line-height: 1.05;
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.hero h1 span {
    font-weight: 400;
    font-size: 0.6em;
    letter-spacing: 8px;
    display: block;
    color: var(--primary-lighter);
}

.hero-subtitle {
    font-size: 20px;
    color: var(--primary-lighter);
    font-weight: 500;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.hero-desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    max-width: 640px;
    margin: 0 auto 40px;
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-scroll {
    position: absolute;
    /* clears the 60px wave divider that rides up over the hero */
    bottom: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.scroll-indicator {
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    margin: 10px auto 0;
    position: relative;
}

.scroll-indicator::after {
    content: '';
    width: 4px;
    height: 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollBounce 2s infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
    50% { transform: translateX(-50%) translateY(12px); opacity: 0.3; }
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about {
    padding: 70px 0;
    background: var(--bg);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.about-text p {
    margin-bottom: 20px;
    font-size: 16px;
    color: var(--text);
    line-height: 1.8;
}

.about-text strong {
    color: var(--text-dark);
}

.about-image {
    position: relative;
}

.about-stats {
    display: flex;
    gap: 24px;
    margin-top: 24px;
    padding: 24px;
    background: var(--bg-alt);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.stat {
    flex: 1;
    text-align: center;
}

.stat-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.stat-label {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 4px;
    display: block;
}

/* ============================================================
   SERVICES SECTION
   ============================================================ */
.services {
    padding: 70px 0;
    background: var(--bg-alt);
}

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

.service-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary);
    transform: scaleX(0);
    transition: transform var(--transition);
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-lighter);
}

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

.service-card.featured {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.service-card.featured::before {
    background: var(--accent);
}

.service-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-lightest);
    border-radius: var(--radius);
    margin-bottom: 24px;
    color: var(--primary);
}

.service-card.featured .service-icon {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.service-icon svg {
    width: 28px;
    height: 28px;
}

.service-card h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.service-card.featured h3 {
    color: #fff;
}

.service-card p {
    font-size: 15px;
    color: var(--text-light);
    line-height: 1.7;
}

.service-card.featured p {
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================================
   VISION SECTION
   ============================================================ */
.vision {
    position: relative;
    padding: 70px 0;
    background: var(--primary-dark);
    overflow: hidden;
}

.vision-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(64, 145, 108, 0.2) 0%, transparent 60%),
                radial-gradient(circle at 70% 50%, rgba(183, 121, 31, 0.1) 0%, transparent 60%);
}

.vision-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.vision h2 {
    font-family: var(--font-heading);
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.2;
}

.vision > .container > .vision-content > p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.75);
    max-width: 700px;
    margin: 0 auto 60px;
    line-height: 1.8;
}

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

.pillar {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    transition: all var(--transition);
}

.pillar:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
}

.pillar-icon {
    font-size: 36px;
    margin-bottom: 16px;
}

.pillar h4 {
    color: var(--primary-lighter);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.pillar p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

/* ============================================================
   PARTNERS SECTION
   ============================================================ */
.partners {
    padding: 60px 0;
    background: var(--bg);
}

.partners-grid {
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}

.partner-card {
    width: 220px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    transition: all var(--transition);
}

.partner-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-lighter);
}

.partner-card img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin: 0 auto 16px;
    filter: grayscale(20%);
    transition: filter var(--transition);
}

.partner-card:hover img {
    filter: grayscale(0%);
}

.partner-card p {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 14px;
}

/* ============================================================
   TEAM SECTION
   ============================================================ */
.team {
    padding: 70px 0;
    background: var(--bg-alt);
}

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

.team-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    text-align: center;
    transition: all var(--transition);
}

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

.team-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    color: #fff;
}

.team-card h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.team-role {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 20px;
}

.team-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.team-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-light);
    transition: color var(--transition);
    justify-content: center;
}

.team-link:hover {
    color: var(--primary);
}

.team-link svg {
    flex-shrink: 0;
    color: var(--primary-light);
}

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.contact {
    padding: 70px 0;
    background: var(--bg);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.contact-intro {
    font-size: 16px;
    color: var(--text-light);
    margin-bottom: 40px;
    line-height: 1.7;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.contact-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-lightest);
    color: var(--primary);
    border-radius: var(--radius);
}

.contact-item h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.contact-item p,
.contact-item a {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
}

.contact-item a:hover {
    color: var(--primary);
}

.contact-item .separator {
    display: inline;
    margin: 0 8px;
    color: var(--text-lighter);
}

/* Contact Form */
.contact-form-wrap {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
}

.contact-form h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 24px;
}

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

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-lighter);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    background: var(--bg-dark);
    padding: 50px 0 0;
    color: rgba(255, 255, 255, 0.7);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand p {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.5);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-links h4,
.footer-contact h4 {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    transition: color var(--transition);
}

.footer-links a:hover {
    color: var(--primary-lighter);
}

.footer-contact p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 12px;
}

.footer-contact a {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 6px;
}

.footer-contact a:hover {
    color: var(--primary-lighter);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
}

.footer-bottom p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
}

.back-to-top {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.5);
    transition: all var(--transition);
}

.back-to-top:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
}

/* ============================================================
   HERO PARALLAX & FLOATING ELEMENTS
   ============================================================ */
/* Hero Slideshow */
.hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
    will-change: transform;
}

.hero-slide {
    position: absolute;
    inset: -20% 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    z-index: 0;
    transition: opacity 1.8s ease-in-out;
}

/* The outgoing slide stays fully opaque UNDERNEATH the incoming one while it
   fades in. Cross-fading both at once leaves them each ~50% transparent
   mid-way, which lets the dark backdrop show through as a visible dip. */
.hero-slide.prev {
    opacity: 1;
    z-index: 1;
    transition: none;
}

.hero-slide.active {
    opacity: 1;
    z-index: 2;
}

.hero-float {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    pointer-events: none;
    z-index: 1;
}

.hero-float-1 {
    width: 300px;
    height: 300px;
    top: 10%;
    left: -5%;
    animation: float1 8s ease-in-out infinite;
}

.hero-float-2 {
    width: 200px;
    height: 200px;
    top: 60%;
    right: -3%;
    animation: float2 10s ease-in-out infinite;
}

.hero-float-3 {
    width: 150px;
    height: 150px;
    bottom: 20%;
    left: 15%;
    animation: float3 12s ease-in-out infinite;
}

@keyframes float1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-15px, 15px) scale(0.95); }
}

@keyframes float2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-25px, 20px); }
}

@keyframes float3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(20px, -30px) rotate(5deg); }
}

/* ============================================================
   SECTION DIVIDERS
   ============================================================ */
/* Each divider is a 60px band whose wave is filled with ONE of the two
   section colours it sits between; the rest of the band is transparent.
   Left alone the band is the same colour as its surroundings and reads as
   60px of dead space, so each one has to supply the OTHER colour itself --
   via .divider-bg-* below, which paints the far-side section's colour as the
   band's own background. The band then sits in normal flow and can never
   cover the next section's content. */
.section-divider {
    position: relative;
    z-index: 2;
    margin-top: -1px;
    line-height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* The one exception: the hero is a PHOTO, not a flat colour, so this band
   has to ride up over it for the transparent half to reveal the image. */
.hero + .section-divider {
    margin-top: -60px;
}

.divider-bg-alt {
    background: var(--bg-alt);
}

.divider-bg-dark {
    background: var(--primary-dark);
}

.divider-bg-light {
    background: var(--bg);
}

.section-divider svg {
    display: block;
    width: 100%;
    height: 60px;
}

.section-divider.divider-dark {
    background: var(--primary-dark);
}

.section-divider.divider-alt {
    background: var(--bg-alt);
}

/* ============================================================
   IMAGE REVEAL EFFECT
   ============================================================ */
.image-reveal {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.image-reveal img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.image-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary);
    transform: translateX(-101%);
    z-index: 1;
}

.image-reveal.revealed::after {
    animation: imageSlideReveal 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes imageSlideReveal {
    0% { transform: translateX(-101%); }
    50% { transform: translateX(0); }
    100% { transform: translateX(101%); }
}

/* ============================================================
   ENHANCED SCROLL ANIMATIONS
   ============================================================ */
/* Base animation states — premium timing with blur reveal */
[data-anim] {
    opacity: 0;
    filter: blur(4px);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter;
}

[data-anim="fade-up"] {
    transform: translateY(60px);
}

[data-anim="fade-down"] {
    transform: translateY(-60px);
}

[data-anim="fade-left"] {
    transform: translateX(70px);
}

[data-anim="fade-right"] {
    transform: translateX(-70px);
}

[data-anim="scale"] {
    transform: scale(0.85);
}

[data-anim].anim-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: blur(0);
}

/* Hero-specific animations — handled by premium keyframes below */

.anim-fade-up {
    opacity: 0;
    transform: translateY(25px);
    filter: blur(4px);
}

/* Stagger hero elements via data-delay */
.hero-content .anim-fade-up[data-delay="400"] {
    animation-delay: 0.4s;
}
.hero-content .anim-fade-up[data-delay="600"] {
    animation-delay: 0.6s;
}
.hero-content .anim-fade-up[data-delay="800"] {
    animation-delay: 0.8s;
}

/* Enhanced hover micro-interactions */
.service-card {
    will-change: transform, box-shadow;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(45, 106, 79, 0.15);
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(-3deg);
    transition: transform 0.3s ease;
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.team-card:hover .avatar-placeholder {
    transform: scale(1.08);
    box-shadow: 0 8px 25px rgba(45, 106, 79, 0.3);
    transition: all 0.3s ease;
}

.partner-card:hover {
    transform: translateY(-6px) scale(1.02);
}

.partner-card:hover img {
    transform: scale(1.05);
}

.pillar:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.pillar:hover .pillar-icon {
    transform: scale(1.15);
    transition: transform 0.3s ease;
}

/* Button hover animations */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.btn:hover::after {
    width: 300px;
    height: 300px;
}

.btn-primary:hover {
    box-shadow: 0 8px 25px rgba(45, 106, 79, 0.4);
    transform: translateY(-3px);
}

.btn-outline:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

/* Counter number glow effect when animated */
.stat-number.counted {
    color: var(--primary);
    text-shadow: 0 0 20px rgba(45, 106, 79, 0.2);
}

/* Form input focus animations */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(45, 106, 79, 0.12);
}

/* Contact icon hover */
.contact-icon {
    transition: all var(--transition);
}

.contact-item:hover .contact-icon {
    background: var(--primary);
    color: #fff;
    transform: scale(1.05);
}

/* Back to top enhanced */
.back-to-top {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.back-to-top:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 8px 20px rgba(45, 106, 79, 0.3);
}

/* Footer link hover animations */
.footer-links a {
    position: relative;
    display: inline-block;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--primary-lighter);
    transition: width 0.3s ease;
}

.footer-links a:hover::after {
    width: 100%;
}

/* ============================================================
   PREMIUM ANIMATION UPGRADES — FreshLife-level polish
   ============================================================ */

/* --- Page Loader --- */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.6s;
}

.page-loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: var(--primary-lighter);
    border-radius: 50%;
    animation: loaderSpin 0.8s linear infinite;
}

@keyframes loaderSpin {
    to { transform: rotate(360deg); }
}

/* --- Page Transition Overlay --- */
.page-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
}

.page-transition-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary), var(--primary-light));
    opacity: 0;
}

.page-transition-overlay.active::before {
    animation: sweepTransition 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes sweepTransition {
    0% {
        left: -100%;
        opacity: 0.85;
    }
    45% {
        left: 0;
        opacity: 0.6;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

/* --- Floating Leaf Decorations --- */
.floating-leaf {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    color: var(--primary-lighter);
    opacity: 0.12;
    will-change: transform;
}

.floating-leaf-1 { width: 36px; top: 8%;  left: 5%;  opacity: 0.10; animation: leafFloat1 8s ease-in-out infinite; }
.floating-leaf-2 { width: 28px; top: 22%; right: 8%; opacity: 0.08; animation: leafFloat2 10s ease-in-out infinite; }
.floating-leaf-3 { width: 44px; top: 38%; left: 3%;  opacity: 0.06; animation: leafFloat3 12s ease-in-out infinite; }
.floating-leaf-4 { width: 32px; top: 52%; right: 4%; opacity: 0.10; animation: leafFloat1 9s ease-in-out infinite 1s; }
.floating-leaf-5 { width: 24px; top: 65%; left: 7%;  opacity: 0.08; animation: leafFloat2 11s ease-in-out infinite 2s; }
.floating-leaf-6 { width: 40px; top: 78%; right: 6%; opacity: 0.07; animation: leafFloat3 10s ease-in-out infinite 0.5s; }
.floating-leaf-7 { width: 30px; top: 88%; left: 2%;  opacity: 0.09; animation: leafFloat1 13s ease-in-out infinite 3s; }
.floating-leaf-8 { width: 34px; top: 45%; right: 2%; opacity: 0.06; animation: leafFloat2 14s ease-in-out infinite 1.5s; }

@keyframes leafFloat1 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-18px) rotate(8deg); }
    50%      { transform: translateY(-6px) rotate(-4deg); }
    75%      { transform: translateY(-22px) rotate(5deg); }
}

@keyframes leafFloat2 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30%      { transform: translateY(-14px) rotate(-10deg); }
    60%      { transform: translateY(-24px) rotate(6deg); }
}

@keyframes leafFloat3 {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    33%      { transform: translateY(-20px) rotate(12deg) scale(1.04); }
    66%      { transform: translateY(-8px) rotate(-8deg) scale(0.97); }
}

/* --- Nav Indicator (Sliding Underline) --- */
.nav-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

.nav-indicator.visible {
    opacity: 1;
}

.navbar.scrolled .nav-indicator {
    background: var(--primary);
}

/* --- Ken Burns effect for images in viewport --- */
.ken-burns-target {
    transition: transform 4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.ken-burns-active {
    transform: scale(1.05);
}

/* --- Button Ripple (Material-style from click point) --- */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: rippleExpand 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes rippleExpand {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* --- Section divider subtle scroll animation --- */
.section-divider svg {
    transition: transform 0.3s ease-out;
    will-change: transform;
}

/* --- Enhanced hero animation stagger --- */
.hero-title-reveal {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(6px);
    animation: heroTitleInPremium 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

@keyframes heroTitleInPremium {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.anim-fade-down {
    opacity: 0;
    transform: translateY(-25px);
    filter: blur(4px);
    animation: fadeDownPremium 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

@keyframes fadeDownPremium {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.hero-content .anim-fade-up {
    filter: blur(4px);
    animation: fadeUpPremium 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fadeUpPremium {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* JS adds .anim-ready only after observer is set up, so content is never hidden without JS */
.anim-ready {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.anim-ready.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   MOBILE DRAWER CHROME
   The header row + close button only exist in the drawer, and the
   scrim only appears with it. Both are inert on desktop.
   ============================================================ */
.nav-drawer-head {
    display: none;
}

.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(15, 20, 25, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}

.nav-scrim.open {
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   VIDEO SECTION
   Click-to-load facade: the YouTube player is only fetched once
   the visitor asks for it, so the page stays fast and cookie-free.
   ============================================================ */
.video-section {
    padding: 0 0 70px;
    background: var(--bg);
}

.video-wrap {
    max-width: 960px;
    margin: 0 auto;
}

.video-facade {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    background: var(--primary-dark);
    box-shadow: var(--shadow-xl);
    transition: transform var(--transition), box-shadow var(--transition);
}

/* aspect-ratio fallback for older browsers */
@supports not (aspect-ratio: 16 / 9) {
    .video-facade {
        height: 0;
        padding-bottom: 56.25%;
    }
}

.video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter var(--transition);
}

/* A light, neutral scrim only -- the thumbnail already carries the video's
   own title card, so it must stay legible and un-tinted. */
.video-facade::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 20, 25, 0) 0%, rgba(15, 20, 25, 0.18) 100%);
    transition: opacity var(--transition);
}

.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: transform var(--transition), background var(--transition), color var(--transition);
}

/* pulse ring */
.video-play::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    animation: videoPulse 2.4s ease-out infinite;
}

.video-caption {
    margin-top: 14px;
    text-align: center;
    font-size: 13px;
    color: var(--text-light);
}

.video-caption span {
    color: var(--text-lighter);
}

@keyframes videoPulse {
    0%   { transform: scale(0.9); opacity: 0.8; }
    70%  { transform: scale(1.25); opacity: 0; }
    100% { transform: scale(1.25); opacity: 0; }
}

.video-play svg {
    /* nudge the triangle to optical centre */
    margin-left: 4px;
}

/* hover / focus */
.video-facade:hover,
.video-facade:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 28px 55px -12px rgba(0, 0, 0, 0.35);
}

.video-facade:hover .video-poster,
.video-facade:focus-visible .video-poster {
    transform: scale(1.04);
}

.video-facade:hover .video-play,
.video-facade:focus-visible .video-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: var(--primary);
    color: #fff;
}

.video-facade:focus-visible {
    outline: 3px solid var(--accent-light);
    outline-offset: 4px;
}

/* the real player, swapped in on click */
.video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    background: #000;
}

@supports not (aspect-ratio: 16 / 9) {
    .video-embed {
        height: 0;
        padding-bottom: 56.25%;
    }
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-noscript {
    margin-top: 16px;
    text-align: center;
}

/* ============================================================
   RESPONSIVE DESIGN
   ============================================================ */
@media (max-width: 1024px) {
    /* Navigation - hamburger on medium screens */
    .nav-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        z-index: 1001;
        width: min(320px, 86vw);
        height: 100vh;
        /* dvh tracks the browser chrome as it collapses, so the last menu
           item can't end up underneath it */
        height: 100dvh;
        background: var(--bg-dark);
        flex-direction: column;
        align-items: stretch;
        padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
        gap: 2px;
        overflow-y: auto;
        overscroll-behavior: contain;
        transition: right var(--transition);
        box-shadow: -14px 0 40px rgba(0, 0, 0, 0.35);
    }

    .nav-menu.open {
        right: 0;
    }

    /* drawer header: label + close button.
       Sticky so the X stays reachable even if the drawer itself scrolls. */
    .nav-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 4px 4px 12px 12px;
        margin-bottom: 8px;
        background: var(--bg-dark);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-drawer-title {
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.45);
    }

    .nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        cursor: pointer;
        transition: background var(--transition), transform var(--transition);
    }

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

    /* focus must not rotate: the drawer focuses this button on open, and a
       mid-transition X reads as a star */
    .nav-close:focus-visible {
        background: rgba(255, 255, 255, 0.18);
        outline: 2px solid var(--primary-lighter);
        outline-offset: 2px;
    }

    .nav-link {
        color: rgba(255, 255, 255, 0.72) !important;
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 48px;
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 16px;
    }

    .nav-link:hover,
    .nav-link.active {
        color: #fff !important;
        background: rgba(255, 255, 255, 0.08) !important;
    }

    /* the active row gets a leading accent so it reads at a glance */
    .nav-link.active {
        box-shadow: inset 3px 0 0 var(--primary-lighter);
    }

    .nav-cta {
        justify-content: center;
        margin-top: 16px;
        border-radius: 50px;
        font-weight: 600;
    }

    .nav-cta.active {
        box-shadow: none;
    }

    /* keep the hamburger above the drawer so it is never trapped underneath */
    .nav-toggle {
        position: relative;
        z-index: 1002;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        transition: opacity var(--transition);
    }

    /* while the drawer is open its own X is the close control -- showing the
       hamburger's X too puts two crosses on top of each other */
    .nav-toggle.open {
        opacity: 0;
        pointer-events: none;
    }

    .nav-toggle.open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nav-toggle.open span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.open span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

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

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vision-pillars {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 768px) {
    /* Sections */
    .hero-content {
        padding: 0 16px;
    }

    .hero-desc {
        font-size: 14px;
    }

    .hero-scroll {
        display: none;
    }

    .about, .services, .vision, .team, .contact {
        padding: 50px 0;
    }

    .video-section {
        padding: 0 0 50px;
    }

    .video-play {
        width: 64px;
        height: 64px;
    }

    .video-play svg {
        width: 26px;
        height: 26px;
    }

    .video-caption {
        font-size: 12px;
    }

    /* Comfortable tap targets. Phone numbers and email addresses are the
       primary actions on a phone and were only ~17-24px tall. */
    .team-link,
    .contact-item a,
    .footer-contact a,
    .footer-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .team-link {
        justify-content: center;
    }

    .team-contact {
        gap: 0;
    }

    .footer-links li,
    .footer-contact a {
        margin-bottom: 0;
    }

    .back-to-top {
        width: 44px;
        height: 44px;
    }

    .partners {
        padding: 40px 0;
    }

    .section-header {
        margin-bottom: 30px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .vision-pillars {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .contact-form-wrap {
        padding: 24px;
    }

    .about-stats {
        flex-direction: column;
        gap: 16px;
    }

    .stat {
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 40px;
    }

    .hero h1 span {
        letter-spacing: 4px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .partner-card {
        width: 100%;
    }

    .partners-grid {
        gap: 16px;
    }

    .video-facade,
    .video-embed {
        border-radius: var(--radius);
    }

    .video-play {
        width: 56px;
        height: 56px;
    }

    .video-play svg {
        width: 22px;
        height: 22px;
    }

    /* the caption competes with the play button on a narrow screen */
}

/* Accessibility - reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    [data-anim] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .hero-title-reveal,
    .anim-fade-down,
    .anim-fade-up {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }

    .hero-float,
    .floating-leaf {
        animation: none !important;
    }

    .page-transition-overlay,
    .page-transition-overlay::before {
        display: none !important;
    }

    .page-loader {
        display: none !important;
    }

    .hero-slideshow {
        inset: 0;
    }

    .hero-slide {
        inset: 0;
        transition: none !important;
    }

    .scroll-progress {
        display: none;
    }

    .nav-indicator {
        transition: none !important;
    }

    .ken-burns-target {
        transition: none !important;
        transform: none !important;
    }

    .btn-ripple {
        display: none !important;
    }
}


/* ============================================================
   ENHANCED RESPONSIVE - Small Screens
   ============================================================ */

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Container padding on small screens */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
    
    .section-header h2 {
        font-size: clamp(24px, 6vw, 36px);
    }
    
    .section-desc {
        font-size: 15px;
    }
    
    .logo-text {
        font-size: 14px;
    }
    
    .logo-text span {
        font-size: 10px;
        letter-spacing: 2px;
    }
    
    .logo-svg {
        height: 28px;
    }
    
    .nav-container {
        padding: 0 16px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }
    
    .section-header h2 {
        font-size: clamp(22px, 7vw, 32px);
    }
    
    .section-desc {
        font-size: 14px;
    }
    
    .about-text p {
        font-size: 14px;
        line-height: 1.6;
    }
    
    .service-card {
        padding: 24px 16px;
    }
    
    .service-card h3 {
        font-size: 18px;
    }
    
    .service-card p {
        font-size: 13px;
    }
    
    .logo-text {
        font-size: 13px;
    }
    
    .logo-text span {
        font-size: 9px;
        letter-spacing: 1.5px;
    }
    
    .logo-svg {
        height: 24px;
    }
    
    .nav-logo {
        gap: 6px;
    }
    
    .contact-form-wrap {
        padding: 16px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* Prevent iOS zoom on focus */
    }
    
    .team-card {
        padding: 20px;
    }
    
    .pillar {
        padding: 16px;
    }
    
    .footer {
        padding: 40px 0 20px;
    }
    
    .footer-about p {
        font-size: 13px;
    }
    
    .image-reveal img {
        border-radius: 8px;
    }
}

@media (max-width: 360px) {
    .hero h1 {
        font-size: 32px;
    }
    
    .hero h1 span {
        letter-spacing: 2px;
        font-size: 14px;
    }
    
    .btn {
        padding: 12px 20px;
        font-size: 13px;
    }
    
    .logo-text {
        font-size: 12px;
    }
    
    .logo-svg {
        height: 22px;
    }
}

/* Ensure no horizontal overflow */
html, body {
    overflow-x: hidden;
}

.hero-bg {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Fix table/grid overflow on mobile */
.about-grid,
.services-grid,
.vision-pillars,
.team-grid,
.contact-grid,
.footer-grid,
.partners-grid {
    overflow: hidden;
}