/* ============================================
   METDEECOLOGICA PAGE STYLES
   Only loaded on metdeecologica.html
   Works on top of style.css for fonts,
   colours, nav and base layout
============================================ */


/* ============================================
   SHARED LABEL STYLE
   Used for: freelance ecological consultancy,
   who?, what I offer, get in touch
   All four labels look identical
============================================ */
.mde-label,
.mde-who h2,
.mde-section-label-top,
.mde-contact-label {
    font-size: 0.85em;
    letter-spacing: 0.15em;
    text-transform: lowercase;
    color: var(--primary-color);
    margin-bottom: 0.8em;
    opacity: 0.8;
    font-weight: 600;
}


/* ============================================
   HERO SECTION
   Large company name centered with tagline
============================================ */
.mde-hero {
    width: min(75em, 100%);
    margin: 2em auto;
    padding: min(4em, 10%) min(3em, 8%);
    background-color: var(--background-color);
    border-radius: 1.5em;
    text-align: center;
}

/* Large editorial company name */
.mde-title {
    font-size: clamp(3.5em, 8vw, 6.5em);
    color: var(--color-3);
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: 0.6em;
}

/* Tagline below the title */
.mde-tagline {
    font-size: clamp(1em, 2vw, 1.3em);
    color: var(--text-color);
    max-width: 600px;
    line-height: 1.7;
    opacity: 0.85;
    margin: 0 auto;
}


/* ============================================
   DIVIDER LINE
   Fine line between sections
   To change length: edit width values
============================================ */
.mde-divider {
    width: min(40em, 60%);
    margin: 0 auto;
    border: none;
    border-top: 1px solid rgba(5, 76, 47, 0.15);
}


/* ============================================
   WHO SECTION
   Same centred layout as contact section
============================================ */
.mde-who {
    width: min(75em, 100%);
    margin: 2em auto;
    padding: min(4em, 10%);
    background-color: var(--background-color);
    border-radius: 1.5em;
    text-align: center;
}

.mde-who .mde-split-grid {
    max-width: 600px;
    margin: 0 auto;
    display: block;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.mde-who .mde-split-grid.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Main who statement - same as "Let's work together" */
.mde-who .mde-about-intro {
    font-size: 1.5em;
    color: var(--color-3);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.6em;
}

/* Supporting paragraphs */
.mde-who .mde-about-body {
    font-size: 1em;
    color: var(--text-color);
    line-height: 1.8;
    opacity: 0.75;
    margin-bottom: 1em;
}


/* ============================================
   WHAT SECTION
   Split grid with label left, services right
============================================ */
.mde-what {
    width: min(75em, 100%);
    margin: 2em auto;
    padding: min(3em, 8%);
    background-color: var(--background-color);
    border-radius: 1.5em;
}

.mde-split-grid {
    display: grid;
    grid-template-columns: 0.35fr 1fr;
    gap: 3em;
    align-items: start;
}

.mde-big-label h2 {
    font-size: clamp(3em, 6vw, 5em);
    color: var(--color-3);
    font-weight: 700;
    line-height: 1;
}


/* ============================================
   SERVICES SECTION
   Dark green cards same as project cards
============================================ */
.mde-services {
    width: min(75em, 100%);
    margin: 2em auto;
    padding: min(3em, 8%);
    background-color: transparent;
    border-radius: 1.5em;
}

.mde-section-header {
    margin-bottom: 2.5em;
}

/* Section title above grid */
.mde-section-title {
    font-size: 2.5em;
    color: var(--color-3);
    font-weight: 700;
}

/* 3 column grid */
.mde-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5em;
}

/* Individual card - dark green same as project cards */
.mde-service-card {
    background-color: var(--color-3);
    border-radius: 1.2em;
    padding: 2em 1.8em;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.mde-service-card:nth-child(1) { transition-delay: 0.1s; }
.mde-service-card:nth-child(2) { transition-delay: 0.2s; }
.mde-service-card:nth-child(3) { transition-delay: 0.3s; }
.mde-service-card:nth-child(4) { transition-delay: 0.4s; }
.mde-service-card:nth-child(5) { transition-delay: 0.5s; }
.mde-service-card:nth-child(6) { transition-delay: 0.6s; }

.mde-service-card.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Glow border on hover instead of lift */
.mde-service-card:hover {
    background-color: var(--color-3);
    transform: translateY(0);
    box-shadow: 0 0 0 2px var(--color-2);
}

.mde-service-icon {
    font-size: 2em;
    display: block;
    margin-bottom: 0.6em;
}

.mde-service-card h3 {
    color: white;
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 0.5em;
}

.mde-service-card p {
    color: var(--background-color);
    font-size: 0.9em;
    line-height: 1.7;
    opacity: 0.8;
}


/* ============================================
   HOW SECTION
   Numbered steps in a vertical list
============================================ */
.mde-how {
    width: min(75em, 100%);
    margin: 2em auto;
    padding: min(3em, 8%);
    background-color: var(--background-color);
    border-radius: 1.5em;
}

.mde-steps {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.mde-step {
    display: flex;
    gap: 1.5em;
    align-items: flex-start;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.mde-step:nth-child(1) { transition-delay: 0.1s; }
.mde-step:nth-child(2) { transition-delay: 0.25s; }
.mde-step:nth-child(3) { transition-delay: 0.4s; }

.mde-step.fade-in {
    opacity: 1;
    transform: translateX(0);
}

.mde-step-number {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
    min-width: 1.5em;
    opacity: 0.4;
}

.mde-step-text h3 {
    color: var(--color-3);
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 0.4em;
}

.mde-step-text p {
    color: var(--text-color);
    font-size: 0.95em;
    line-height: 1.8;
    opacity: 0.85;
}


/* ============================================
   CONTACT SECTION
   Centred warm invitation to get in touch
============================================ */
.mde-contact {
    width: min(75em, 100%);
    margin: 2em auto;
    padding: min(4em, 10%);
    background-color: var(--background-color);
    border-radius: 1.5em;
    text-align: center;
}

.mde-contact-inner {
    max-width: 600px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.mde-contact-inner.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* "get in touch" label - same as all other labels */
.mde-contact-label {
    display: block;
    margin-bottom: 0.5em;
}

/* "Let's work together" heading */
.mde-contact-title {
    font-size: 2.5em;
    color: var(--color-3);
    font-weight: 700;
    margin-bottom: 0.6em;
}

.mde-contact-body {
    font-size: 1.05em;
    color: var(--text-color);
    line-height: 1.8;
    opacity: 0.85;
    margin-bottom: 2em;
}

.mde-email-link {
    display: inline-block;
    text-decoration: none;
    color: white;
    background-color: var(--primary-color);
    padding: 0.9em 2em;
    border-radius: 50px;
    font-size: 1em;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.mde-email-link:hover {
    background-color: var(--color-3);
    transform: translateY(-3px);
}


/* ============================================
   MOBILE RESPONSIVE
   768px and below
============================================ */
@media (max-width: 768px) {

    .mde-split-grid {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }

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

    .mde-title {
        font-size: clamp(2.5em, 10vw, 4em);
    }

    .mde-contact-title {
        font-size: 2em;
    }
}


/* ============================================
   SMALL MOBILE
   480px and below
============================================ */
@media (max-width: 480px) {
    .mde-services-grid {
        grid-template-columns: 1fr;
    }
}