/* =============================================================
   STYLES.CSS — Vernon Garde Landscaping
   =============================================================
   
   TABLE OF CONTENTS:
   1.  CSS Custom Properties (Variables)
   2.  CSS Reset & Base Styles
   3.  Utility Classes
   4.  Skip Link (Accessibility)
   5.  Header & Navigation
   6.  Hero Section
   7.  Quick Services Strip
   8.  About Section
   9.  Services Section
   10. Why Choose Us
   11. Gallery
   12. Process
   13. Testimonials
   14. CTA Banner
   15. Contact Section
   16. Footer
   17. WhatsApp Float & Back to Top
   18. Animations
   19. Media Queries (Responsive)
   
   WHY THIS STRUCTURE: 
   We use a single CSS file to reduce HTTP requests (faster load).
   CSS variables at the top mean you can change colours site-wide 
   by editing ONE line. The mobile-first approach means the site 
   works perfectly on phones, which is how 70%+ of South Africans 
   browse the internet.
   ============================================================= */


/* =============================================================
   1. CSS CUSTOM PROPERTIES
   =============================================================
   WHY: Instead of writing the same green colour 50 times, we 
   define it once here. If you want to change the brand colour 
   later, you change it in ONE place and the entire site updates.
   ============================================================= */
:root {
    /* Brand Colours */
    --color-primary: #2D6A4F;        /* Deep forest green — trustworthy, natural */
    --color-primary-dark: #1B4332;   /* Darker green for hover states */
    --color-primary-light: #52B788;  /* Lighter green for accents */
    --color-primary-pale: #D8F3DC;   /* Very light green for backgrounds */
    
    /* Secondary Colours */
    --color-secondary: #C9A227;      /* Refined gold — warmth, quality */
    --color-secondary-light: #E3C567;
    
    /* Neutral Colours */
    --color-white: #FFFFFF;
    --color-off-white: #F8F9FA;
    --color-light-gray: #E9ECEF;
    --color-medium-gray: #ADB5BD;
    --color-dark-gray: #495057;
    --color-charcoal: #212529;
    --color-black: #000000;
    
    /* Feedback Colours */
    --color-success: #28A745;
    --color-error: #DC3545;
    --color-warning: #FFC107;
    
    /* Typography */
    --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Font Sizes — Fluid/Responsive */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --text-base: clamp(1rem, 0.9rem + 0.45vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.55vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
    --text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
    --text-4xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
    --text-5xl: clamp(2.75rem, 1.8rem + 4vw, 4.5rem);
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;
    
    /* Layout */
    --container-max: 1200px;
    --container-padding: 1.25rem;
    --header-height: 80px;
    --announcement-height: 40px;
    
    /* Borders & Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 50%;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --shadow-xl: 0 16px 50px rgba(0,0,0,0.15);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
}


/* =============================================================
   2. CSS RESET & BASE STYLES
   =============================================================
   WHY: Every browser has different default styles. This reset 
   makes everything consistent, so your site looks the same 
   on Chrome, Safari, Firefox, and Samsung Internet (very 
   popular in SA).
   ============================================================= */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + var(--announcement-height) + 20px);
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
}

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

/* Prevent body scroll when mobile menu is open */
body.menu-open {
    overflow: hidden;
}

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

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

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

/* Focus styles for keyboard navigation — ACCESSIBILITY */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-charcoal);
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
}

/* Selection colour */
::selection {
    background-color: var(--color-primary-pale);
    color: var(--color-primary-dark);
}


/* =============================================================
   3. UTILITY CLASSES
   ============================================================= */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.section-label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.section-title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-lg);
}

.section-description {
    font-size: var(--text-lg);
    color: var(--color-dark-gray);
    max-width: 700px;
}

.section-header--center {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.section-header--center .section-description {
    margin-left: auto;
    margin-right: auto;
}

.text-accent {
    color: var(--color-primary);
}

.text-link {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

/* Inline SVG icons — sized relative to surrounding text */
.icon {
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
    vertical-align: -0.28em;
    flex-shrink: 0;
}

.icon--sm {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
}

.icon--lg {
    width: 2.5rem;
    height: 2.5rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-weight: 600;
    text-align: center;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}

.btn--sm {
    padding: 0.5rem 1.25rem;
    font-size: var(--text-sm);
}

.btn--lg {
    padding: 0.875rem 2rem;
    font-size: var(--text-base);
}

.btn--full {
    width: 100%;
}

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

.btn--primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn--secondary {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

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

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

.btn--white:hover {
    background-color: var(--color-off-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: var(--color-primary);
}

.btn--outline-white {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.btn--outline-white:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
}


/* =============================================================
   4. SKIP LINK — ACCESSIBILITY
   =============================================================
   WHY: Hidden off-screen until a keyboard user presses Tab.
   Then it appears at the top so they can skip the navigation.
   ============================================================= */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-sm) var(--space-lg);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    z-index: 10000;
    font-weight: 600;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
    color: var(--color-white);
}


/* =============================================================
   5. HEADER & NAVIGATION
   =============================================================
   WHY: Sticky header keeps the phone number and CTA visible at 
   all times. On mobile, it collapses into a hamburger menu.
   ============================================================= */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;  /* CHANGED: Must be higher than overlay */
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base);
}

.header.scrolled {
    box-shadow: var(--shadow-md);
}

/* Announcement Bar */
.header__announcement {
    background-color: var(--color-primary);
    color: var(--color-white);
    text-align: center;
    padding: var(--space-sm) 0;
    font-size: var(--text-xs);
}

.header__announcement p {
    margin: 0;
}

/* Main Header */
.header__main {
    height: var(--header-height);
    display: flex;
    align-items: center;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
}

/* Logo */
.header__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

/* =============================================================
   LOGO IMAGES
   =============================================================
   WHY these specific styles:
   - max-height keeps the logo from being too tall in the header
   - width: auto maintains the correct proportions
   - The header logo is smaller than the footer logo because 
     the header has limited vertical space
   ============================================================= */

/* Header Logo */
.header__logo-img {
    height: 45px;
    width: auto;
    max-width: 200px;
    display: block;
    transition: opacity var(--transition-fast);
}

.header__logo:hover .header__logo-img {
    opacity: 0.85;
}

/* Footer Logo */
.footer__logo-img {
    height: 56px;
    width: auto;
    max-width: 220px;
    display: block;
    margin-bottom: var(--space-md);
    transition: opacity var(--transition-fast);
}

.footer__about a:hover .footer__logo-img {
    opacity: 0.85;
}

/* Responsive: slightly smaller on mobile */
@media (max-width: 768px) {
    .header__logo-img {
        height: 38px;
        max-width: 170px;
    }

    .footer__logo-img {
        height: 42px;
        max-width: 180px;
    }
}

/* Navigation */
.nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.nav__link {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-dark-gray);
    padding: var(--space-sm) 0;
    position: relative;
    transition: color var(--transition-fast);
}

.nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-base);
}

.nav__link:hover,
.nav__link.active {
    color: var(--color-primary);
}

.nav__link:hover::after,
.nav__link.active::after {
    width: 100%;
}

/* Header Actions */
.header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
}

.header__phone {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-primary);
}

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

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 30px;
    padding: 0;
}

.hamburger__line {
    width: 100%;
    height: 3px;
    background-color: var(--color-charcoal);
    border-radius: 2px;
    transition: all var(--transition-base);
    transform-origin: center;
}

.hamburger.active .hamburger__line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.hamburger.active .hamburger__line:nth-child(2) {
    opacity: 0;
}

.hamburger.active .hamburger__line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}


/* =============================================================
   6. HERO SECTION
   ============================================================= */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('../images/lush-garden-landscaping-howick.webp') center/cover no-repeat;
    background-color: var(--color-primary-dark); /* Fallback while loading */
    padding-top: calc(var(--header-height) + var(--announcement-height));
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(20, 46, 36, 0.82) 0%,
        rgba(27, 67, 50, 0.6) 50%,
        rgba(20, 46, 36, 0.78) 100%
    );
}

.hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: var(--space-3xl) 0;
    max-width: 900px;
    margin: 0 auto;
}

.hero__badge {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-xl);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 500;
}

.hero__title {
    font-size: var(--text-5xl);
    color: var(--color-white);
    margin-bottom: var(--space-lg);
    line-height: 1.1;
}

.hero__title--accent {
    color: var(--color-primary-light);
    display: block;
}

.hero__subtitle {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.9);
    margin-bottom: var(--space-2xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
    margin-bottom: var(--space-3xl);
}

.hero__trust {
    display: flex;
    justify-content: center;
    gap: var(--space-2xl);
    flex-wrap: wrap;
}

.hero__trust-item {
    text-align: center;
    color: var(--color-white);
}

.hero__trust-item strong {
    display: block;
    font-size: var(--text-3xl);
    font-family: var(--font-heading);
}

.hero__trust-item span {
    font-size: var(--text-sm);
    opacity: 0.8;
}

.hero__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.6);
    font-size: var(--text-xs);
    text-align: center;
}

.hero__scroll-line {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.3);
    margin: var(--space-sm) auto 0;
    animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
    0%, 100% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    51% { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}


/* =============================================================
   8. ABOUT SECTION
   ============================================================= */
.about {
    padding: var(--space-5xl) 0;
}

.about__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.about__images {
    position: relative;
}

.about__img {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.about__img img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
}

.about__experience-badge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.about__experience-number {
    display: block;
    font-size: var(--text-3xl);
    font-family: var(--font-heading);
    font-weight: 700;
}

.about__content p {
    margin-bottom: var(--space-md);
    color: var(--color-dark-gray);
}

.about__values {
    margin: var(--space-xl) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.about__values li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-weight: 500;
}

.about__values .icon {
    color: var(--color-primary);
    margin-top: 0.2em;
}


/* =============================================================
   9. SERVICES SECTION (Detailed)
   ============================================================= */
.services {
    padding: var(--space-5xl) 0;
    background-color: var(--color-off-white);
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-xl);
}

.service-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    border: 1px solid var(--color-light-gray);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-light);
}

.service-card__content {
    padding: var(--space-2xl);
}

.service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    background: var(--color-primary-pale);
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.service-card__content h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-md);
}

.service-card__content p {
    color: var(--color-dark-gray);
    margin-bottom: var(--space-lg);
}

.service-card__content ul {
    margin-bottom: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.service-card__content ul li {
    padding-left: var(--space-lg);
    position: relative;
    font-size: var(--text-sm);
    color: var(--color-dark-gray);
}

.service-card__content ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

/* =============================================================
   10. WHY CHOOSE US
   ============================================================= */
.why-us {
    padding: var(--space-5xl) 0;
}

.why-us__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
}

.why-us__card {
    text-align: center;
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    background: var(--color-off-white);
    transition: all var(--transition-base);
}

.why-us__card:hover {
    background: var(--color-primary-pale);
    transform: translateY(-3px);
}

.why-us__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-md);
}

.why-us__card:hover .why-us__icon {
    background: var(--color-primary);
    color: var(--color-white);
}

.why-us__card h3 {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.why-us__card p {
    color: var(--color-dark-gray);
    font-size: var(--text-sm);
}


/* =============================================================
   11. GALLERY
   ============================================================= */
/* =============================================================
   11. GALLERY — PINTEREST MASONRY LAYOUT
   =============================================================
   WHY MASONRY: Traditional grids force all images to the same 
   height, which means portrait photos get cropped or squashed.
   Masonry layout lets each image keep its natural proportions, 
   just like Pinterest. This looks much more professional and 
   lets you use any photo regardless of orientation.
   ============================================================= */
.gallery {
    padding: var(--space-5xl) 0;
    background-color: var(--color-off-white);
}

/* ---- MASONRY GRID ---- */
.gallery__masonry {
    columns: 3;
    column-gap: var(--space-lg);
}

/* Each gallery item */
.gallery__item {
    break-inside: avoid;
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.gallery__item-inner {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-light-gray);
}

/* Images fill their container naturally */
.gallery__item-inner img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--transition-slow);
    object-fit: cover;
}

/* Zoom effect on hover */
.gallery__item:hover .gallery__item-inner img {
    transform: scale(1.05);
}

/* Overlay that appears on hover */
.gallery__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-2xl) var(--space-lg) var(--space-lg);
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 60%,
        transparent 100%
    );
    color: var(--color-white);
    transform: translateY(100%);
    transition: transform var(--transition-base);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.gallery__item:hover .gallery__overlay {
    transform: translateY(0);
}

/* Category tag */
.gallery__overlay-category {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-xl);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-sm);
}

.gallery__overlay h4 {
    color: var(--color-white);
    font-size: var(--text-base);
    font-family: var(--font-body);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.gallery__overlay p {
    font-size: var(--text-sm);
    opacity: 0.8;
    margin: 0;
}

/* ---- LIGHTBOX (Click to enlarge) ---- */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    cursor: zoom-out;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox__img {
    max-width: 90%;
    max-height: 90vh;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    object-fit: contain;
    transform: scale(0.9);
    transition: transform var(--transition-base);
}

.lightbox.active .lightbox__img {
    transform: scale(1);
}

.lightbox__close {
    position: absolute;
    top: var(--space-xl);
    right: var(--space-xl);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    color: var(--color-white);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 2001;
}

.lightbox__close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.lightbox__caption {
    position: absolute;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-white);
    text-align: center;
    font-size: var(--text-sm);
    opacity: 0.8;
}


/* ---- RESPONSIVE MASONRY ---- */

/* Tablets: 2 columns */
@media (max-width: 1024px) {
    .gallery__masonry {
        columns: 2;
    }
}

/* Mobile: 1 column with 2-column mini grid */
@media (max-width: 768px) {
    .gallery__masonry {
        columns: 2;
        column-gap: var(--space-md);
    }

    .gallery__item {
        margin-bottom: var(--space-md);
    }

    /* On mobile, show overlay by default (no hover on touch) */
    .gallery__overlay {
        transform: translateY(0);
        padding: var(--space-md) var(--space-sm);
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.75) 0%,
            rgba(0, 0, 0, 0.2) 80%,
            transparent 100%
        );
    }

    .gallery__overlay h4 {
        font-size: var(--text-sm);
    }

    .gallery__overlay p {
        font-size: var(--text-xs);
    }

    .gallery__overlay-category {
        font-size: 0.6rem;
        padding: 0.15rem 0.5rem;
    }
}

/* Small phones: still 2 columns but tighter */
@media (max-width: 480px) {
    .gallery__masonry {
        columns: 2;
        column-gap: var(--space-sm);
    }

    .gallery__item {
        margin-bottom: var(--space-sm);
    }
}


/* =============================================================
   12. PROCESS
   ============================================================= */
.process {
    padding: var(--space-5xl) 0;
}

.process__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    text-align: center;
}

.process__step {
    position: relative;
    padding: var(--space-xl);
}

.process__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--text-xl);
    font-weight: 700;
    font-family: var(--font-heading);
    margin-bottom: var(--space-lg);
}

.process__step h3 {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.process__step p {
    font-size: var(--text-sm);
    color: var(--color-dark-gray);
}

.process__connector {
    display: none; /* Shown only in HTML structure, managed by grid */
}


/* =============================================================
   13. TESTIMONIALS
   ============================================================= */
.testimonials {
    padding: var(--space-5xl) 0;
    background-color: var(--color-off-white);
}

.testimonials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.testimonial-card {
    background: var(--color-white);
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-light-gray);
    transition: all var(--transition-base);
}

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

.testimonial-card__stars {
    color: var(--color-secondary-light);
    font-size: var(--text-lg);
    margin-bottom: var(--space-md);
    letter-spacing: 2px;
}

.testimonial-card p {
    font-style: italic;
    color: var(--color-dark-gray);
    margin-bottom: var(--space-xl);
    line-height: 1.8;
}

.testimonial-card footer {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.testimonial-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--color-primary-pale);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.testimonial-card footer cite {
    display: block;
    font-style: normal;
    font-weight: 600;
    color: var(--color-charcoal);
}

.testimonial-card footer span {
    font-size: var(--text-sm);
    color: var(--color-medium-gray);
}


/* =============================================================
   14. CTA BANNER
   ============================================================= */
.cta-banner {
    padding: var(--space-4xl) 0;
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: var(--color-white);
}

.cta-banner__content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cta-banner__content h2 {
    color: var(--color-white);
    font-size: var(--text-3xl);
    margin-bottom: var(--space-md);
}

.cta-banner__content p {
    font-size: var(--text-lg);
    opacity: 0.9;
    margin-bottom: var(--space-2xl);
}

.cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
}


/* =============================================================
   15. CONTACT SECTION
   ============================================================= */
.contact {
    padding: var(--space-5xl) 0;
}

.contact__grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-3xl);
    align-items: start;
}

/* Form Styles */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-label {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-charcoal);
}

.required {
    color: var(--color-error);
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--color-light-gray);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-charcoal);
    background: var(--color-white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-pale);
    outline: none;
}

.form-input::placeholder {
    color: var(--color-medium-gray);
}

.form-input.error {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.form-input.success {
    border-color: var(--color-success);
}

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

.form-textarea-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-counter {
    font-size: var(--text-xs);
    color: var(--color-medium-gray);
}

.form-error {
    font-size: var(--text-xs);
    color: var(--color-error);
    min-height: 1.2em;
}

/* Honeypot — hidden from humans, visible to bots */
.form-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* Checkbox */
.form-group--checkbox {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-sm);
}

.form-group--checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

.form-label--checkbox {
    font-weight: 400;
    font-size: var(--text-sm);
    flex: 1;
}

/* Submit Button Loading State */
.btn__loading {
    display: none;
    align-items: center;
    gap: var(--space-sm);
}

.btn.loading .btn__text {
    display: none;
}

.btn.loading .btn__loading {
    display: inline-flex;
}

.spinner {
    animation: spin 1s linear infinite;
}

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

/* Success Message */
.form-success {
    text-align: center;
    padding: var(--space-3xl);
    background: var(--color-primary-pale);
    border-radius: var(--radius-lg);
}

.form-success__icon {
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.form-success__icon .icon--lg {
    width: 3.5rem;
    height: 3.5rem;
}

.form-success h3 {
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

/* Contact Info Sidebar */
.contact__info-card {
    background: var(--color-off-white);
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
}

.contact__info-card h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-xl);
}

.contact__info-card ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contact__info-card li {
    font-size: var(--text-sm);
    color: var(--color-dark-gray);
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.contact__info-card li > .icon {
    color: var(--color-primary);
    margin-top: 0.2em;
}

.contact__info-card li strong {
    color: var(--color-charcoal);
}

.contact__info-card a {
    color: var(--color-primary);
    font-weight: 500;
}

.contact__map {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.contact__map iframe {
    display: block;
}

/* =============================================================
   16. FOOTER
   ============================================================= */
.footer {
    background-color: var(--color-charcoal);
    color: rgba(255,255,255,0.7);
    padding: var(--space-4xl) 0 var(--space-xl);
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-3xl);
}

.footer__about .logo-text__name,
.footer__about .logo-text__tagline {
    color: var(--color-white);
}

.footer__about p {
    margin-top: var(--space-md);
    font-size: var(--text-sm);
    line-height: 1.8;
}

.footer h4 {
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-lg);
}

.footer ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer a {
    color: rgba(255,255,255,0.7);
    font-size: var(--text-sm);
    transition: color var(--transition-fast);
}

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

.footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    font-size: var(--text-sm);
}

.footer__legal {
    display: flex;
    gap: var(--space-lg);
}


/* =============================================================
   17. WHATSAPP FLOAT & BACK TO TOP
   ============================================================= */
.whatsapp-float {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    z-index: 999;
    transition: all var(--transition-base);
    animation: pulse 2s ease-in-out infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-xl);
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
    50% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
}

.back-to-top {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: var(--shadow-md);
    z-index: 999;
    transition: all var(--transition-base);
    opacity: 0;
    visibility: hidden;
}

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

.back-to-top:hover {
    background: var(--color-primary-dark);
    transform: translateY(-3px);
}


/* =============================================================
   18. SCROLL ANIMATIONS
   ============================================================= */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}


/* =============================================================
   19. MEDIA QUERIES — RESPONSIVE DESIGN
   =============================================================
   WHY: These rules adapt the layout for different screen sizes.
   We design mobile-first (most SA users are on phones), then 
   enhance for larger screens.
   ============================================================= */

/* Tablets and below (1024px) */
@media (max-width: 1024px) {
    .about__grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .about__experience-badge {
        right: 20px;
        bottom: -15px;
    }

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

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }

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

/* Mobile (768px) */
@media (max-width: 768px) {
    :root {
        --header-height: 70px;
    }

    /* Show hamburger, hide desktop nav */
    .hamburger {
        display: flex;
    }

    .nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 350px;
        height: 100vh;
        background: var(--color-white);
        box-shadow: var(--shadow-xl);
        transition: right var(--transition-base);
        z-index: 1003;  /* CHANGED: Highest — above everything */
        padding: var(--space-4xl) var(--space-xl);
        overflow-y: auto;
    }

    .nav.open {
        right: 0;
    }

    .nav__list {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xl);
    }

    .nav__link {
        font-size: var(--text-lg);
    }

    .header__cta {
        display: none;
    }

    .header__phone span {
        display: none;
    }

    /* Mobile nav overlay */
    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1001;  /* CHANGED: Between header (1002) and content */
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-base);
        pointer-events: none;  /* ADDED: Don't block clicks when hidden */
    }

    .nav-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;  /* ADDED: Allow clicks to close menu */
    }

    /* Hero */
    .hero__title {
        font-size: var(--text-3xl);
    }

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

    .hero__trust {
        gap: var(--space-lg);
    }

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

    /* Services grid */
    .services__grid {
        grid-template-columns: 1fr;
    }

    /* Process */
    .process__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    /* Testimonials */
    .testimonials__grid {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr;
    }

    .footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    /* CTA Banner */
    .cta-banner__actions {
        flex-direction: column;
        align-items: center;
    }
}

/* Small phones (480px) */
@media (max-width: 480px) {
    .hero__trust {
        flex-direction: column;
        gap: var(--space-md);
    }
}

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

    .whatsapp-float {
        animation: none;
    }
}

/* Print styles — for customers who print quotes/info */
@media print {
    .header,
    .whatsapp-float,
    .back-to-top,
    .hero__actions,
    .cta-banner,
    .contact-form {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
        font-size: 12pt;
    }

    .hero {
        min-height: auto;
        padding: 2rem 0;
        background: none;
    }

    .hero__overlay {
        display: none;
    }

    .hero__title,
    .hero__subtitle {
        color: #000;
    }

    section {
        break-inside: avoid;
        padding: 1rem 0;
    }
}