/* ==========================================
   KŪʻONO FARM
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Inter:wght@400;500;600&display=swap');


/* ---------- RESET ---------- */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    font-size:19px;

    line-height:1.7;

    color:#333;

    background:#F7F4ED;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

}

.content{

    width:90%;

    max-width:1200px;

    margin:auto;

}


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

.hero{

    position:relative;

    width:100%;

    height:65vh;

    overflow:hidden;

}

.hero-image{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center 70%;

    display:block;

}

.hero-text{

    position:absolute;

    top:12%;

    right:8%;

    text-align:right;

    color:white;

    max-width:550px;

}

.hero-text h1{

    font-family:'Libre Baskerville',serif;

    font-size:5rem;

    line-height:1;

    margin-bottom:20px;

    text-shadow:2px 2px 10px rgba(0,0,0,.35);

}

.hero-text p{

    font-size:1.6rem;

    margin-bottom:12px;

    text-shadow:1px 1px 6px rgba(0,0,0,.35);

}

.hero-subtitle{

    font-size:1.2rem;

}

.button{

    display:inline-block;

    margin-top:20px;

    padding:16px 36px;

    border:2px solid white;

    color:white;

    font-weight:600;

    transition:.3s;

}

.button:hover{

    background:white;

    color:#2f472f;

}


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

.main-nav{

    background:white;

    display:flex;

    justify-content:center;

    gap:70px;

    padding:22px;

    border-bottom:1px solid #ddd;

}

.main-nav a{

    color:#2f472f;

    font-weight:600;

}

.main-nav a:hover{

    color:#8a6c45;

}


/* ==========================================
   STORY
========================================== */

.story{

    padding:90px 0;

}

.story .content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.story h2{

    font-family:'Libre Baskerville',serif;

    font-size:2.6rem;

    margin-bottom:25px;

    color:#2f472f;

}

.story p{

    margin-bottom:20px;

}

.story-photo img{

    border-radius:8px;

}


/* ==========================================
   OFFERINGS
========================================== */

.offerings{

    padding:90px 0;

    background:white;

}

.offerings h2{

    text-align:center;

    font-family:'Libre Baskerville',serif;

    font-size:2.8rem;

    color:#2f472f;

    margin-bottom:50px;

}

.offer-grid{

    display:grid;

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

    gap:35px;

}

.offer-card{

    text-align:center;

}

.offer-card img{

    width:100%;

    aspect-ratio:4/3;

    object-fit:cover;

    border-radius:8px;

    margin-bottom:20px;

}

.offer-card h3{

    font-family:'Libre Baskerville',serif;

    color:#2f472f;

    margin-bottom:12px;

}


/* ==========================================
   FEATURE SECTIONS
========================================== */

.feature{

    padding:90px 0;

}

.feature-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.feature-grid.reverse{

    direction:rtl;

}

.feature-grid.reverse>*{

    direction:ltr;

}

.feature-image img{

    border-radius:8px;

}

.feature-text h2{

    font-family:'Libre Baskerville',serif;

    color:#2f472f;

    font-size:2.4rem;

    margin-bottom:20px;

}


/* ==========================================
   NEWSLETTER
========================================== */

.newsletter{

    padding:90px 0;

    text-align:center;

    background:white;

}

.newsletter h2{

    font-family:'Libre Baskerville',serif;

    font-size:2.6rem;

    color:#2f472f;

    margin-bottom:20px;

}

.newsletter p{

    margin-bottom:35px;

}

.newsletter-form{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}

.newsletter input{

    width:340px;

    padding:18px;

    font-size:1rem;

    border:1px solid #ccc;

}

.newsletter button{

    padding:18px 34px;

    border:none;

    background:#2f472f;

    color:white;

    cursor:pointer;

    font-size:1rem;

}

.newsletter-logo{

    width:180px;

    margin:50px auto 0;

}


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

footer{

    background:#2f472f;

    color:white;

    text-align:center;

    padding:40px 20px;

}

footer p{

    margin:8px 0;

}


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

@media (max-width:900px){

.hero{

    height:65vh;

}

.hero-text{

    top:12%;

    right:6%;

    left:6%;

    text-align:center;

}

.hero-text h1{

    font-size:3rem;

}

.hero-text p{

    font-size:1.2rem;

}

.main-nav{

    flex-direction:column;

    gap:15px;

}

.story .content,
.feature-grid,
.offer-grid{

    grid-template-columns:1fr;

}
.feature-grid.reverse{

    display:flex;

    flex-direction:column;

}

.feature-grid.reverse .feature-image{

    order:1;

}

.feature-grid.reverse .feature-text{

    order:2;

}
.story,
.offerings,
.feature,
.newsletter{

    padding:60px 0;

}

.newsletter input{

    width:100%;

}

}

/* ==========================================
   MEET THE TEAM
========================================== */

.team{

    padding:90px 0;

}

.team h2{

    text-align:center;

    font-family:'Libre Baskerville', serif;

    font-size:2.8rem;

    color:#2f472f;

    margin-bottom:70px;

}

.team-member{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:60px;

    align-items:start;

    margin-bottom:90px;

    padding-bottom:50px;

    border-bottom:1px solid #ddd;

}

.team-member:last-child{

    border-bottom:none;

    margin-bottom:0;

}

.team-info h3{

    font-family:'Libre Baskerville', serif;

    font-size:2rem;

    color:#2f472f;

    margin-bottom:8px;

}

.team-info h4{

    font-size:1.15rem;

    color:#8a6c45;

    margin-bottom:22px;

    font-weight:600;

}

.team-info p{

    margin-bottom:18px;

}

.team-photo{

    display:flex;

    justify-content:flex-end;

    align-items:flex-start;

}

.team-photo img{

    width:100%;

    max-width:350px;

    border-radius:8px;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

}


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

@media (max-width:900px){

    .team-member{

        grid-template-columns:1fr;

        gap:30px;

    }

    .team-photo{

        justify-content:center;

    }

    .team-photo img{

        max-width:320px;

    }

}