:root{
    --brand-green: #35B32A;
    --bg-muted: #F7F7F7;
    --text: #111827;
    --muted: #4B5563;
    --card-shadow: 0 4px 12px rgba(0,0,0,0.05);
    --big-radius: 20px;
    --radius: 8px;
    --container-max: 1200px;
}

/* layout / reset */
*{box-sizing: border-box}
body{
    margin:0;
    font-family: 'Inter', sans-serif;
    background:#FFFFFF;
    color:var(--text);
    -webkit-font-smoothing:antialiased;
}
.container{
    max-width: var(--container-max);
    margin:0 auto;
    padding:0 20px;
}

/* header / hero */
header.site-hero{
    background-image: linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0.3)), url('images/header.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    padding: 25px 20px;
    text-align: center;
}
.hero-inner{
    margin-top: 20px;
    padding: 160px 0;
}
.site-nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom: 40px;
    align-items:center;
}
.logo img{ display:block; max-width:130px; height:auto; padding:5px; }
.nav-links{
    display:flex;
    gap:24px;
    align-items:center;
    font-size:1rem;
}
.nav-links a{ color:#fff; text-decoration:none; }
.nav-cta{
    color:#fff;
    border:1px solid #fff;
    padding:10px 18px;
    font-weight:500;
}

.hero-title{ font-size:3.2rem; font-weight:700; margin:0 0 12px 0; line-height:1.05; }
.hero-sub{ font-size:1.125rem; color: #E5E7EB; margin:0 0 28px 0; }
.hero-btn{
    display:inline-block;
    background: var(--brand-green);
    color:#fff;
    padding:12px 24px;
    border-radius:6px;
    font-weight:500;
    text-decoration:none;
}

/* sections */
section{ padding: 60px 0; }
.section--gray{ background-color: var(--bg-muted); }
.section-subtitle{
    color:#65B168;
    font-weight:700;
    font-size:0.875rem;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:8px;
}
.section-title{
    font-size:2rem;
    font-weight:700;
    margin:0 0 24px 0;
}

/* two-column layout used in first section */
.two-col{
    display:flex;
    gap:40px;
    align-items:center;
}
.two-col .col{ flex:1; }

/* images */
.responsive-img{
    width:100%;
    height:auto;
    display:block;
    border-radius:8px;
    object-fit:cover;
}
.cards{
    display:flex;
    gap:30px;
    margin-top:50px;
}
.card{
    background:#fff;
    padding: 0;                 /* remove padding so image touches card frame */
    border-radius: 0;          /* remove rounded corners on card */
    box-shadow: var(--card-shadow);
    text-align:left;
    flex:1;
    display:flex;
    flex-direction:column;
    overflow:hidden;           /* ensure image doesn't overflow card */
}
.card-img{
    width:100%;
    height:auto;              /* allow full image height, avoid cropping */
    object-fit:cover;
    display:block;
    border-radius:0;
    margin:0;
}
/* content inside card gets its own padding */
.card-content{
    padding:20px 24px 28px;
}

/* contact section overrides / layout */
.contact-section{
    background: #ffffff; /* make background white */
    padding: 60px 0;
}
.contact-grid{
    display:flex;
    flex-direction:column;
    gap:24px;
    align-items:center;
}

/* stacked images — same width (now match contact-columns width) */
.contact-images{
    width:100%;
    max-width:900px;
    display:flex;
    flex-direction:column;
    gap:12px; /* small gap so images don't visually collide */
    align-items:stretch;
    margin:0 auto;
}
.contact-images img{
    width:100%;
    height:auto;               /* preserve natural aspect ratio */         /* cap height so very tall images don't dominate */
    display:block;
    object-fit:cover;
    object-position:center;
    border-radius:0;
    margin:0;
}
/* defensive rule to avoid overlap if any positioning is present */
.contact-images img { position:relative; z-index:0; }

/* two columns immediately below images */
.contact-columns{
    width:100%;
    max-width:900px;
    display:flex;
    gap:40px;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    margin-top:6px;
}
.contact-column{
    flex:1;
    min-width:220px;
}
.contact-column h3{
    font-weight:700;
    font-size:1.125rem;
    margin:0 0 12px 0;
}
.contact-column a, .contact-column p{
    color:var(--muted);
    text-decoration:none;
    display:block;
    margin:0 0 8px 0;
}

/* footer: updated color and styling */
footer.site-footer{
    background: #162415; /* updated color */
    color: #C7D7C9;
    padding:28px 0;
}
footer.site-footer .container{ display:flex; justify-content:space-between; gap:20px; align-items:center; flex-wrap:wrap; }
footer.site-footer a{ color:inherit; text-decoration:underline; text-underline-offset:4px; }

/* small sticky topbar (same color as footer) */
.topbar{
    background:#162415;
    color:#C7D7C9;
    position:sticky;
    top:0;
    z-index:999;
    width:100%;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
    transition: transform .25s ease, opacity .25s ease;
}
.topbar.hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; height: 0px; }
.topbar.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }

.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:30px 20px; }
.topbar .nav-links{ display:flex; gap:18px; align-items:center; }
.topbar a{ color:inherit; text-decoration:none; font-weight:500; font-size:0.95rem; }
.topbar a:hover{ text-decoration:underline; opacity:0.95; }

/* footer FAQ wrapper (keeps FAQ visually separated inside footer) */
.footer-faq{
    color:#ffffff;
    padding:28px;
    border-radius:8px;
    max-width:1200px;
    margin:0 auto 18px auto;
}
.footer-faq .section-title{ margin-top:0; }
.footer-faq .faq-list{ max-width:100%; }
.footer-faq .faq-item p{ color:var(--muted); }

@media (max-width: 768px){
    .contact-columns{ gap:18px; }
    .contact-columns{ flex-direction:column; align-items:center; }
    .contact-column{ width:100%; max-width:420px; text-align:center; }
}

@media (max-width: 992px){
    .cards{ flex-direction:column; }
    .card-img{ height:auto; }
    .logo{ height: 0; display: none;}
}
@media (max-width: 480px){
    .card-img{ height:auto; }
}

/* utilities */
.text-left{ text-align:left; }

/* responsive */
@media (max-width: 992px){
    .two-col{ flex-direction:column; }
    .site-nav{ flex-direction:column; gap:16px; align-items:center; margin-bottom:20px; }
    .hero-title{ font-size:2.4rem; }
    .cards{ flex-direction:column; }
    .hero-inner{ max-width:900px; margin:0 auto; }
}
@media (max-width: 480px){
    .hero-title{ font-size:1.8rem; }
    .contact-card{ flex-direction:column; align-items:center; text-align:center; }
    .contact-card .text-left{ text-align:center; }
    .site-nav{ gap:10px; }
    header.site-hero{ padding:48px 16px; }
}