/* =========================================================
   UNIAGRICO
   Landscape & Outdoor Solutions
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --olive: #35432b;

    --olive-dark: #263321;

    --olive-deep: #1d271a;

    --olive-soft: #46543a;

    --ivory: #f5f3ec;

    --ivory-dark: #ebe8de;

    --stone: #dcd9ce;

    --text: #292c25;

    --text-soft: #66695f;

    --white: #ffffff;

    --line: rgba(53, 67, 43, 0.18);

    --serif: Georgia, "Times New Roman", serif;

    --sans:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    background: var(--ivory);

    color: var(--text);

    font-family: var(--sans);

    line-height: 1.6;

    overflow-x: hidden;

}


img {

    max-width: 100%;

    display: block;

}


a {

    color: inherit;

    text-decoration: none;

}


button,
a {

    -webkit-tap-highlight-color: transparent;

}


::selection {

    background: var(--olive);

    color: var(--white);

}


/* =========================================================
   GENERAL
========================================================= */

.section {

    padding: 130px 8%;

}


.section-label {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 70px;

}


.section-label span {

    font-size: 11px;

    letter-spacing: 2px;

    color: var(--olive);

}


.section-label p {

    font-size: 11px;

    letter-spacing: 3px;

    font-weight: 600;

    color: var(--olive);

}


.section-label::after {

    content: "";

    width: 55px;

    height: 1px;

    background: var(--line);

}


.small-label {

    display: block;

    font-size: 10px;

    letter-spacing: 3px;

    font-weight: 600;

    color: var(--olive);

}


/* =========================================================
   NAVIGATION
========================================================= */

.navbar {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

    background: rgba(245, 243, 236, 0.94);

    backdrop-filter: blur(14px);

    border-bottom: 1px solid rgba(53, 67, 43, 0.08);

}


.nav-container {

    width: 100%;

    max-width: 1500px;

    margin: auto;

    min-height: 86px;

    padding: 0 6%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

}


.logo {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}


.logo img {

    width: 66px;

    height: 66px;

    object-fit: contain;

    transition:
        transform 0.4s ease,
        opacity 0.4s ease;

}


.logo:hover img {

    transform: scale(1.04);

    opacity: 0.86;

}


.nav-links {

    display: flex;

    align-items: center;

    gap: 38px;

}


.nav-links a {

    position: relative;

    font-size: 12px;

    letter-spacing: 1px;

    color: var(--text);

    padding: 8px 0;

}


.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 1px;

    background: var(--olive);

    transition: width 0.3s ease;

}


.nav-links a:hover::after {

    width: 100%;

}


.nav-contact {

    padding: 12px 19px;

    border: 1px solid var(--olive);

    font-size: 11px;

    letter-spacing: 1px;

    color: var(--olive);

    transition:
        background 0.3s ease,
        color 0.3s ease;

}


.nav-contact:hover {

    background: var(--olive);

    color: var(--white);

}


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

.hero {

    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: var(--white);

}


.hero-background {

    position: absolute;

    inset: 0;

    z-index: 0;

}


.hero-background img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    animation: heroZoom 12s ease-out forwards;

}


@keyframes heroZoom {

    from {
        transform: scale(1.06);
    }

    to {
        transform: scale(1);
    }

}


.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(20, 28, 18, 0.84) 0%,
            rgba(20, 28, 18, 0.62) 42%,
            rgba(20, 28, 18, 0.25) 100%
        );

}


.hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1500px;

    margin: auto;

    padding: 150px 8% 100px;

}


.eyebrow {

    margin-bottom: 24px;

    font-size: 11px;

    letter-spacing: 4px;

    font-weight: 600;

}


.hero h1 {

    max-width: 850px;

    font-family: var(--serif);

    font-size: clamp(58px, 7vw, 105px);

    line-height: 0.98;

    font-weight: 400;

    letter-spacing: -3px;

    margin-bottom: 30px;

}


.hero-description {

    max-width: 500px;

    font-size: 16px;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.85);

    margin-bottom: 38px;

}


.hero-buttons {

    display: flex;

    align-items: center;

    gap: 28px;

}


.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

    padding: 15px 22px;

    border: 1px solid;

    font-size: 11px;

    letter-spacing: 1.5px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;

}


.button span {

    font-size: 18px;

    line-height: 0;

    transition: transform 0.3s ease;

}


.button:hover span {

    transform: translateX(4px);

}


.button-light {

    border-color: rgba(255, 255, 255, 0.75);

    color: var(--white);

}


.button-light:hover {

    background: var(--white);

    color: var(--olive-dark);

    transform: translateY(-2px);

}


.text-link {

    display: inline-flex;

    align-items: center;

    gap: 13px;

    font-size: 11px;

    letter-spacing: 1.5px;

    color: rgba(255, 255, 255, 0.85);

}


.text-link span {

    font-size: 15px;

    transition: transform 0.3s ease;

}


.text-link:hover span {

    transform: translateY(4px);

}


.hero-bottom {

    position: absolute;

    z-index: 2;

    bottom: 32px;

    left: 8%;

    right: 8%;

    display: flex;

    justify-content: space-between;

    font-size: 9px;

    letter-spacing: 2.5px;

    color: rgba(255, 255, 255, 0.65);

}


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

.about {

    background: var(--ivory);

}


.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    max-width: 1250px;

    margin: auto;

}


.about-title h2 {

    font-family: var(--serif);

    font-size: clamp(44px, 5vw, 70px);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -2px;

    color: var(--olive-dark);

}


.about-content {

    padding-top: 8px;

    max-width: 600px;

}


.large-text {

    font-family: var(--serif);

    font-size: 24px;

    line-height: 1.55;

    color: var(--olive-dark);

    margin-bottom: 30px;

}


.about-content > p:not(.large-text) {

    color: var(--text-soft);

    font-size: 15px;

    line-height: 1.9;

}


.underlined-link {

    display: inline-flex;

    gap: 16px;

    align-items: center;

    margin-top: 38px;

    padding-bottom: 8px;

    border-bottom: 1px solid var(--olive);

    color: var(--olive);

    font-size: 11px;

    letter-spacing: 1.5px;

}


.underlined-link span {

    transition: transform 0.3s ease;

}


.underlined-link:hover span {

    transform: translateX(5px);

}


/* =========================================================
   MISSION / VISION
========================================================= */

.mission-section {

    position: relative;

    padding: 120px 8%;

    background: var(--olive-dark);

    color: var(--white);

    overflow: hidden;

}


.botanical-mark {

    position: absolute;

    font-family: var(--serif);

    font-size: 300px;

    line-height: 1;

    color: rgba(255, 255, 255, 0.025);

    pointer-events: none;

}


.botanical-one {

    right: -60px;

    top: 20px;

}


.mission-grid {

    position: relative;

    z-index: 2;

    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1px 1fr;

    gap: 80px;

}


.mission-item {

    max-width: 500px;

}


.mission-item .small-label {

    color: rgba(255, 255, 255, 0.55);

    margin-bottom: 25px;

}


.mission-item h3 {

    font-family: var(--serif);

    font-weight: 400;

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1.1;

    margin-bottom: 25px;

}


.mission-item p {

    color: rgba(255, 255, 255, 0.67);

    font-size: 14px;

    line-height: 1.9;

}


.mission-divider {

    width: 1px;

    background: rgba(255, 255, 255, 0.15);

}


/* =========================================================
   SERVICES
========================================================= */

.services {

    background: var(--ivory-dark);

}


.services-intro {

    max-width: 850px;

    margin-bottom: 75px;

}


.services-intro h2 {

    font-family: var(--serif);

    font-weight: 400;

    font-size: clamp(46px, 5vw, 72px);

    line-height: 1;

    letter-spacing: -2px;

    color: var(--olive-dark);

    margin-bottom: 25px;

}


.services-intro p {

    max-width: 570px;

    color: var(--text-soft);

    font-size: 15px;

    line-height: 1.9;

}


.services-list {

    border-top: 1px solid var(--line);

}


.service {

    display: grid;

    grid-template-columns: 80px 1.2fr 1fr 50px;

    gap: 40px;

    align-items: center;

    padding: 36px 10px;

    border-bottom: 1px solid var(--line);

    transition:
        padding-left 0.35s ease,
        background 0.35s ease;

}


.service:hover {

    padding-left: 20px;

    background: rgba(255, 255, 255, 0.3);

}


.service-number {

    font-size: 11px;

    letter-spacing: 2px;

    color: var(--olive);

}


.service-main h3 {

    font-family: var(--serif);

    font-size: 31px;

    font-weight: 400;

    color: var(--olive-dark);

    margin-bottom: 8px;

}


.service-main p {

    max-width: 470px;

    color: var(--text-soft);

    font-size: 13px;

    line-height: 1.7;

}


.service-details p {

    color: var(--text-soft);

    font-size: 12px;

    line-height: 1.8;

}


.service-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border: 1px solid var(--line);

    color: var(--olive);

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;

}


.service:hover .service-arrow {

    background: var(--olive);

    color: var(--white);

    transform: rotate(4deg);

}


/* =========================================================
   PROJECTS
========================================================= */

.projects {

    background: var(--ivory);

}


.projects-heading {

    display: grid;

    grid-template-columns: 1fr 0.7fr;

    gap: 100px;

    align-items: end;

    max-width: 1200px;

    margin: 0 auto 100px;

}


.projects-heading h2 {

    font-family: var(--serif);

    font-size: clamp(50px, 6vw, 80px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -2px;

    color: var(--olive-dark);

}


.projects-heading > p {

    max-width: 430px;

    color: var(--text-soft);

    font-size: 14px;

    line-height: 1.9;

}


/* PROJECT */

.project {

    max-width: 1250px;

    margin: 0 auto 130px;

}


.project-image {

    width: 100%;

    height: 620px;

    overflow: hidden;

    background: var(--stone);

}


.project-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.9s ease,
        filter 0.9s ease;

}


.project:hover .project-image img {

    transform: scale(1.025);

    filter: brightness(0.94);

}


.project-info {

    display: grid;

    grid-template-columns: 1fr 0.5fr;

    gap: 80px;

    padding: 28px 5px 0;

}


.project-info span {

    display: block;

    font-size: 10px;

    letter-spacing: 2.5px;

    color: var(--olive);

    margin-bottom: 12px;

}


.project-info h3 {

    font-family: var(--serif);

    font-size: 34px;

    font-weight: 400;

    line-height: 1.1;

    color: var(--olive-dark);

}


.project-info > p {

    color: var(--text-soft);

    font-size: 13px;

    line-height: 1.8;

}


.project-reverse {

    max-width: 1050px;

}


.project-reverse .project-image {

    height: 560px;

}


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

.gallery-section {

    padding: 110px 8% 140px;

    background: var(--ivory-dark);

}


.gallery-header {

    max-width: 1250px;

    margin: 0 auto 55px;

}


.gallery-header h2 {

    font-family: var(--serif);

    font-size: clamp(42px, 5vw, 65px);

    font-weight: 400;

    color: var(--olive-dark);

    margin-top: 15px;

}


.gallery-grid {

    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-auto-rows: 260px;

    gap: 15px;

}


.gallery-item {

    overflow: hidden;

    background: var(--stone);

}


.gallery-item.tall {

    grid-row: span 2;

}


.gallery-item.wide {

    grid-column: span 2;

}


.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.8s ease;

}


.gallery-item:hover img {

    transform: scale(1.04);

}


/* =========================================================
   CONTACT
========================================================= */

.contact {

    padding-top: 0;

    padding-bottom: 0;

    background: var(--olive-dark);

    color: var(--white);

}


.contact-inner {

    padding: 120px 8%;

    max-width: 1500px;

    margin: auto;

}


.light-label span,
.light-label p {

    color: rgba(255, 255, 255, 0.6);

}


.contact-content {

    display: grid;

    grid-template-columns: 1fr 0.65fr;

    gap: 100px;

    max-width: 1200px;

    margin: auto;

}


.contact-content h2 {

    font-family: var(--serif);

    font-size: clamp(55px, 6vw, 90px);

    font-weight: 400;

    line-height: 0.98;

    letter-spacing: -3px;

}


.contact-details {

    padding-top: 10px;

}


.contact-intro {

    max-width: 400px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 38px;

}


.contact-list {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 35px;

}


.contact-list a {

    width: fit-content;

    font-family: var(--serif);

    font-size: 22px;

    color: var(--white);

    padding-bottom: 5px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.25);

    transition:
        border-color 0.3s ease,
        color 0.3s ease;

}


.contact-list a:hover {

    border-color: var(--white);

}


.address {

    color: rgba(255, 255, 255, 0.58);

    font-size: 13px;

    line-height: 1.8;

    margin-bottom: 35px;

}


.contact-button {

    width: fit-content;

}


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

.footer {

    padding: 55px 8% 25px;

    background: var(--olive-deep);

    color: rgba(255, 255, 255, 0.7);

}


.footer-top {

    max-width: 1250px;

    margin: auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

    padding-bottom: 45px;

}


.footer-brand {

    display: flex;

    align-items: center;

    gap: 18px;

}


.footer-brand img {

    width: 55px;

    height: 55px;

    object-fit: contain;

}


.footer-brand p {

    font-size: 11px;

    letter-spacing: 1.5px;

}


.footer-links {

    display: flex;

    gap: 28px;

}


.footer-links a {

    font-size: 11px;

    letter-spacing: 1px;

    transition: color 0.3s ease;

}


.footer-links a:hover {

    color: var(--white);

}


.footer-bottom {

    max-width: 1250px;

    margin: auto;

    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    display: flex;

    justify-content: space-between;

    gap: 20px;

    font-size: 9px;

    letter-spacing: 1.5px;

    color: rgba(255, 255, 255, 0.38);

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1000px) {

    .nav-links {
        gap: 20px;
    }

    .nav-contact {
        display: none;
    }

    .about-grid {
        gap: 55px;
    }

    .mission-grid {
        gap: 45px;
    }

    .service {
        grid-template-columns: 55px 1fr;
        gap: 20px;
    }

    .service-details {
        grid-column: 2;
    }

    .service-arrow {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .projects-heading {
        gap: 50px;
    }

    .project-image {
        height: 500px;
    }

    .contact-content {
        gap: 60px;
    }
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {

    /* -----------------------------------------
       GENERAL
    ----------------------------------------- */

    .section {
        padding: 90px 6%;
    }


    /* -----------------------------------------
       NAVIGATION
    ----------------------------------------- */

    .nav-container {
        min-height: 74px;
        padding: 0 6%;
    }

    .logo img {
        width: 55px;
        height: 55px;
    }

    /*
       Hide the desktop contact button.
       The mobile menu will contain the navigation.
    */

    .nav-contact {
        display: none;
    }


    /* -----------------------------------------
       MOBILE HAMBURGER BUTTON
    ----------------------------------------- */

    .mobile-menu-button {
        display: flex;

        width: 46px;
        height: 46px;

        padding: 10px;

        border: 1px solid var(--line);
        background: transparent;

        cursor: pointer;

        align-items: center;
        justify-content: center;
        flex-direction: column;

        gap: 5px;

        transition:
            background 0.3s ease,
            border-color 0.3s ease;
    }

    .mobile-menu-button:hover {
        background: rgba(53, 67, 43, 0.06);
        border-color: var(--olive);
    }

    .mobile-menu-button span {
        display: block;

        width: 21px;
        height: 1.5px;

        background: var(--olive-dark);

        transition:
            transform 0.3s ease,
            opacity 0.3s ease;
    }


    /* -----------------------------------------
       HAMBURGER → X
    ----------------------------------------- */

    .mobile-menu-button.menu-open span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
    }

    .mobile-menu-button.menu-open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-button.menu-open span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }


    /* -----------------------------------------
       MOBILE NAVIGATION
    ----------------------------------------- */

    .nav-links {

        position: absolute;

        top: 74px;
        left: 6%;
        right: 6%;

        display: none;

        flex-direction: column;
        align-items: stretch;

        gap: 0;

        margin: 0;
        padding: 8px;

        background: rgba(245, 243, 236, 0.98);

        border: 1px solid var(--line);

        box-shadow:
            0 15px 40px rgba(29, 39, 26, 0.12);

        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);

        z-index: 1001;
    }


    /*
       THIS is what connects your CSS
       to your JavaScript.
    */

    .nav-links.mobile-open {
        display: flex;
    }


    .nav-links a {

        display: block;

        width: 100%;

        min-height: 48px;

        padding: 14px 15px;

        font-size: 11px;

        letter-spacing: 1px;

        border-bottom: 1px solid rgba(53, 67, 43, 0.08);
    }

    .nav-links a:last-child {
        border-bottom: none;
    }


    /*
       Remove desktop underline animation
       from the mobile dropdown.
    */

    .nav-links a::after {
        display: none;
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero {
        min-height: 100svh;
    }

    .hero-content {
        padding: 130px 7% 100px;
    }

    .hero h1 {
        font-size: clamp(50px, 15vw, 76px);
        letter-spacing: -2px;
    }

    .hero-description {
        max-width: 500px;
        font-size: 14px;
    }

    .hero-buttons {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
    }

    .hero-bottom {
        left: 7%;
        right: 7%;

        font-size: 7px;
        letter-spacing: 1.5px;
    }

    .hero-bottom span:last-child {
        display: none;
    }


    /* -----------------------------------------
       SECTION LABEL
    ----------------------------------------- */

    .section-label {
        margin-bottom: 50px;
    }


    /* -----------------------------------------
       ABOUT
    ----------------------------------------- */

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

    .about-title h2 {
        font-size: 48px;
    }

    .large-text {
        font-size: 20px;
    }


    /* -----------------------------------------
       MISSION
    ----------------------------------------- */

    .mission-section {
        padding: 90px 7%;
    }

    .mission-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .mission-divider {
        width: 100%;
        height: 1px;
    }

    .mission-item h3 {
        font-size: 38px;
    }


    /* -----------------------------------------
       SERVICES
    ----------------------------------------- */

    .services-intro h2 {
        font-size: 48px;
    }

    .service {
        padding: 30px 0;
    }

    .service-main h3 {
        font-size: 27px;
    }


    /* -----------------------------------------
       PROJECTS
    ----------------------------------------- */

    .projects-heading {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 65px;
    }

    .projects-heading h2 {
        font-size: 55px;
    }

    .project {
        margin-bottom: 85px;
    }

    .project-image,
    .project-reverse .project-image {
        height: 360px;
    }

    .project-info {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .project-info h3 {
        font-size: 29px;
    }


    /* -----------------------------------------
       GALLERY
    ----------------------------------------- */

    .gallery-section {
        padding: 80px 6% 100px;
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 210px;
    }

    .gallery-item.tall {
        grid-row: span 2;
    }

    .gallery-item.wide {
        grid-column: span 2;
    }


    /* -----------------------------------------
       CONTACT
    ----------------------------------------- */

    .contact-inner {
        padding: 90px 7%;
    }

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

    .contact-content h2 {
        font-size: 58px;
        letter-spacing: -2px;
    }


    /* -----------------------------------------
       FOOTER
    ----------------------------------------- */

    .footer {
        padding: 45px 7% 20px;
    }

    .footer-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-links {
        flex-wrap: wrap;
        gap: 15px 22px;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .nav-container {
        min-height: 70px;
        padding: 0 6%;
    }

    .logo img {
        width: 52px;
        height: 52px;
    }


    /* Mobile dropdown becomes slightly tighter */

    .nav-links {
        top: 70px;

        left: 4%;
        right: 4%;

        padding: 6px;
    }


    .nav-links a {
        min-height: 46px;
        padding: 13px 14px;

        font-size: 10px;
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero h1 {
        font-size: 48px;
    }

    .hero-description {
        max-width: 310px;
    }


    /* -----------------------------------------
       ABOUT
    ----------------------------------------- */

    .about-title h2 {
        font-size: 42px;
    }


    /* -----------------------------------------
       SERVICES
    ----------------------------------------- */

    .services-intro h2 {
        font-size: 42px;
    }


    /* -----------------------------------------
       PROJECTS
    ----------------------------------------- */

    .projects-heading h2 {
        font-size: 46px;
    }

    .project-image,
    .project-reverse .project-image {
        height: 300px;
    }


    /* -----------------------------------------
       GALLERY
    ----------------------------------------- */

    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 250px;
    }

    .gallery-item.tall {
        grid-row: span 1;
    }

    .gallery-item.wide {
        grid-column: span 1;
    }


    /* -----------------------------------------
       CONTACT
    ----------------------------------------- */

    .contact-content h2 {
        font-size: 48px;
    }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

    .section {
        padding-left: 5%;
        padding-right: 5%;
    }

    .nav-container {
        padding-left: 5%;
        padding-right: 5%;
    }

    .hero-content {
        padding-left: 6%;
        padding-right: 6%;
    }

    .hero h1 {
        font-size: 43px;
    }

    .about-title h2 {
        font-size: 38px;
    }

    .services-intro h2 {
        font-size: 38px;
    }

    .projects-heading h2 {
        font-size: 41px;
    }

    .contact-content h2 {
        font-size: 43px;
    }

    .project-image,
    .project-reverse .project-image {
        height: 260px;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--olive);
    outline-offset: 5px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* =========================================================
   ACCESSIBILITY
========================================================= */

a:focus-visible {

    outline: 2px solid var(--olive);

    outline-offset: 5px;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }


    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}

/* =========================================================
   UNIAGRICO FINAL REFINEMENT
========================================================= */
.hero h1 { font-size: clamp(48px, 5.5vw, 78px); letter-spacing: -2px; }
.about-title h2 { font-size: clamp(38px, 4vw, 58px); letter-spacing: -1.5px; }
.mission-item h3 { font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -1px; }
.services-intro h2 { font-size: clamp(40px, 4vw, 58px); letter-spacing: -1.5px; }
.projects-heading h2 { font-size: clamp(42px, 5vw, 64px); letter-spacing: -1.5px; }
.contact-content h2 { font-size: clamp(46px, 5vw, 72px); letter-spacing: -2px; }
.planter-header h2 { font-size: clamp(38px, 4vw, 56px); letter-spacing: -1.5px; }
.section-label span, .section-label p { font-size: 12px; }
.small-label { font-size: 11px; }
.project-info > div > span { font-size: 11px; }
.hero-bottom, .footer-bottom { font-size: 10px; }

.planter-grid { display: block; }
.planter-group { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.planter-group-final { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 50%; margin: 34px auto 0; }
.planter-group-final .planter-item { background: rgba(53, 67, 43, 0.035); }
.planter-item { min-width: 0; }
.planter-item img { width: 100%; height: auto; object-fit: contain; }

.project-image video { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; background: var(--stone); }

@media (max-width: 1000px) {
    .planter-group-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .planter-group-final { max-width: 70%; }
}
@media (max-width: 700px) {
    .hero h1 { font-size: clamp(42px, 12vw, 62px); }
    .about-title h2, .services-intro h2 { font-size: 42px; }
    .projects-heading h2 { font-size: 46px; }
    .contact-content h2 { font-size: 50px; }
    .planter-header h2 { font-size: 42px; }
    .nav-links a { font-size: 12px; }
    .hero-bottom { font-size: 8px; }
    .planter-group-main, .planter-group-final { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
    .planter-group-final { margin-top: 26px; }
}
@media (max-width: 430px) {
    .hero h1 { font-size: 42px; }
    .about-title h2, .services-intro h2 { font-size: 38px; }
    .projects-heading h2 { font-size: 42px; }
    .contact-content h2 { font-size: 44px; }
    .planter-header h2 { font-size: 38px; }
    .nav-links a { font-size: 11px; }
    .planter-group-main, .planter-group-final { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
    .hero h1 { font-size: 38px; }
    .about-title h2, .services-intro h2 { font-size: 35px; }
    .projects-heading h2 { font-size: 38px; }
    .contact-content h2 { font-size: 40px; }
}