/* ==========================================================================
   OIC Farms — site stylesheet
   Self-contained: no external frameworks, fonts or CDNs.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */
:root {
    --green:        #2e8b3d;
    --green-dark:   #1f6b2b;
    --green-light:  #eaf5ec;
    --yellow:       #f6d64a;
    --ink:          #1c2b21;
    --body:         #5a6b60;
    --line:         #dfe7e1;
    --white:        #fff;

    --shadow-sm: 0 2px 8px rgba(28, 43, 33, .08);
    --shadow-md: 0 10px 30px rgba(28, 43, 33, .12);
    --shadow-lg: 0 24px 60px rgba(28, 43, 33, .18);

    --radius: 10px;
    --header-h: 86px;

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --serif: Georgia, "Times New Roman", serif;
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    color: var(--body);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    margin: 0 0 .6em;
    color: var(--ink);
    font-family: var(--serif);
    font-weight: 700;
    line-height: 1.25;
}

h2 { font-size: 36px; }
h3 { font-size: 20px; }

p { margin: 0 0 1em; }

a { color: var(--green); text-decoration: none; transition: color .25s; }
a:hover { color: var(--green-dark); }

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

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* --- Layout helpers ------------------------------------------------------ */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section { padding: 90px 0; }
.section--tight { padding-bottom: 0; }

.grid {
    display: grid;
    gap: 50px;
    align-items: center;
}

@media (min-width: 992px) {
    .grid--2 { grid-template-columns: 1fr 1fr; }
}

/* Icon defaults (inline SVG sprite) */
.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex: none;
    vertical-align: -.125em;
}

/* --- Section titles ----------------------------------------------------- */
.section-title {
    max-width: 620px;
    margin: 0 auto 55px;
    text-align: center;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--green);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.section-title h2 { margin-bottom: 0; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border: 2px solid transparent;
    border-radius: 50px;
    background: var(--green);
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s;
}

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

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

.btn--ghost:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--green-dark);
}

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.navbar-area {
    position: absolute;
    inset: 0 0 auto;
    z-index: 900;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    transition: box-shadow .3s, background .3s;
}

.navbar-area.is-sticky {
    position: fixed;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    animation: slide-down .4s ease;
}

@keyframes slide-down {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: var(--header-h);
}

.navbar-brand img { width: 130px; }

.nav-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
    font-size: 20px;
    cursor: pointer;
}

.navbar-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 6px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
}

.nav-link:hover,
.nav-link.active { color: var(--green); }

.nav-item { position: relative; }

/* Dropdowns */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s, transform .25s, visibility .25s;
}

.nav-item:hover > .dropdown-menu,
.nav-item.is-open > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu .nav-link {
    padding: 8px 12px;
    font-size: 14.5px;
    font-weight: 500;
}

.dropdown-menu .nav-link:hover { background: var(--green-light); }

.nav-item > .nav-link .icon { transition: transform .25s; }
.nav-item.is-open > .nav-link .icon { transform: rotate(180deg); }

/* Mobile nav */
@media (max-width: 991px) {
    :root { --header-h: 72px; }

    .nav-toggle { display: block; }

    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        max-height: 75vh;
        overflow-y: auto;
        padding: 10px 20px 20px;
        background: var(--white);
        box-shadow: var(--shadow-md);
    }

    .navbar-collapse.is-open { display: block; }

    .navbar-nav { display: block; }

    .nav-link {
        justify-content: space-between;
        padding: 12px 4px;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
    }

    .dropdown-menu {
        position: static;
        display: none;
        min-width: 0;
        padding: 4px 0 4px 16px;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav-item.is-open > .dropdown-menu { display: block; }
    .nav-item:hover > .dropdown-menu { opacity: 1; visibility: visible; }
    .nav-item:not(.is-open):hover > .dropdown-menu { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 90vh;
    padding: calc(var(--header-h) + 70px) 0 90px;
    background: var(--ink) center/cover no-repeat;
    color: var(--white);
    text-align: center;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 40, 25, .72), rgba(20, 40, 25, .55));
}

.hero .container { position: relative; z-index: 2; }

.hero h1 {
    margin-bottom: 18px;
    color: var(--white);
    font-size: clamp(38px, 7vw, 76px);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hero h1 span { color: var(--yellow); }

.hero-sub {
    max-width: 680px;
    margin: 0 auto 32px;
    color: rgba(255, 255, 255, .92);
    font-size: clamp(16px, 2.2vw, 20px);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* ==========================================================================
   About
   ========================================================================== */
.about-area { position: relative; overflow: hidden; }

.about-image img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.about-content h2 { margin-bottom: 14px; }

.about-list {
    display: grid;
    gap: 12px;
    margin: 26px 0 32px;
}

@media (min-width: 576px) {
    .about-list { grid-template-columns: 1fr 1fr; }
}

.about-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--ink);
    font-size: 15.5px;
    font-weight: 500;
}

.about-list .icon {
    margin-top: .35em;
    color: var(--green);
    font-size: 1.05em;
}

/* Decorative horse line-art watermark */
.horse-box {
    position: absolute;
    right: -70px;
    bottom: -30px;
    width: 420px;
    max-width: 45vw;
    opacity: .07;
    pointer-events: none;
}

@media (max-width: 991px) { .horse-box { display: none; } }

/* ==========================================================================
   Benefits (poster)
   ========================================================================== */
.benefits-area { background: var(--green-light); }

.benefits-poster img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.benefits-list {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.benefits-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    font-weight: 600;
}

.benefits-list .icon { color: var(--green); font-size: 1.15em; }

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 4px;
}

/* Eight tiles fill exactly two rows of four, so no orphan cell is left */
@media (min-width: 992px) {
    .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

.photo-gallery-item {
    position: relative;
    overflow: hidden;
    background: var(--ink);
}

.photo-gallery-item img {
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
    transition: transform .6s ease, opacity .4s;
}

.photo-gallery-item:hover img {
    transform: scale(1.08);
    opacity: .55;
}

.photo-gallery-item .caption {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 2;
    padding: 8px 16px;
    border-radius: 50px;
    background: var(--white);
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    transform: translateY(12px);
    opacity: 0;
    transition: transform .35s, opacity .35s;
}

.photo-gallery-item .zoom {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--green);
    color: var(--white);
    font-size: 18px;
    transform: scale(.4);
    opacity: 0;
    transition: transform .35s, opacity .35s;
}

.photo-gallery-item:hover .caption,
.photo-gallery-item:hover .zoom,
.photo-gallery-item:focus-within .caption,
.photo-gallery-item:focus-within .zoom {
    transform: none;
    opacity: 1;
}

.popup-btn {
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    place-items: center;
    padding: 30px;
    background: rgba(12, 22, 15, .92);
}

.lightbox.is-open { display: grid; }

.lightbox figure {
    margin: 0;
    max-width: 1000px;
    text-align: center;
}

.lightbox img {
    max-height: 78vh;
    width: auto;
    margin: 0 auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.lightbox figcaption {
    margin-top: 16px;
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
}

.lightbox-btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: var(--white);
    font-size: 20px;
    cursor: pointer;
    transition: background .25s;
}

.lightbox-btn:hover { background: var(--green); }

.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev  { top: 50%; left: 24px; transform: translateY(-50%); }
.lightbox-next  { top: 50%; right: 24px; transform: translateY(-50%); }

@media (max-width: 575px) {
    .lightbox-prev { left: 12px; }
    .lightbox-next { right: 12px; }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.feedback-area { background: var(--green-light); }

.feedback-track {
    display: grid;
    gap: 30px;
}

@media (min-width: 768px) { .feedback-track { grid-template-columns: repeat(3, 1fr); } }

.single-feedback {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 34px 30px;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.single-feedback .quote-mark {
    color: var(--green);
    font-size: 26px;
    opacity: .3;
}

.single-feedback p {
    margin: 10px 0 24px;
    color: var(--ink);
    font-size: 17px;
    font-style: italic;
}

/* margin-top:auto keeps the attribution flush to the card bottom, so the
   three cards line up even though the quotes differ in length */
.client-info {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

/* Initials stand in for the customer photos, which are not available */
.avatar {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: none;
    border-radius: 50%;
    background: var(--green);
    color: var(--white);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .04em;
}

.client-info h3 { margin: 0; font-size: 17px; }
.client-info span { font-size: 14px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.contact-card {
    padding: 34px 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: center;
    transition: transform .3s, box-shadow .3s, border-color .3s;
}

.contact-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

.contact-card .contact-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--green-light);
    color: var(--green);
    font-size: 24px;
}

.contact-card h3 { margin-bottom: 8px; font-size: 19px; }
.contact-card p { margin: 0; }
.contact-card a { font-weight: 600; }

/* ==========================================================================
   Subscribe
   ========================================================================== */
.subscribe-area {
    position: relative;
    overflow: hidden;
    padding: 70px 0;
    background: var(--green);
    color: var(--white);
}

.subscribe-content { position: relative; z-index: 2; text-align: center; }

.subscribe-content h2 {
    margin-bottom: 26px;
    color: var(--white);
    font-size: 32px;
}

.newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
}

.input-newsletter {
    flex: 1 1 200px;
    min-width: 0;
    padding: 14px 18px;
    border: 2px solid transparent;
    border-radius: 50px;
    background: var(--white);
    color: var(--ink);
    font-size: 15px;
}

.input-newsletter::placeholder { color: #93a399; }
.input-newsletter:focus { border-color: var(--yellow); outline: none; }

.newsletter-form .btn {
    flex: none;
    background: var(--ink);
}

.newsletter-form .btn:hover { background: #0f1a13; }

.form-result {
    flex: 1 0 100%;
    min-height: 1.6em;
    font-size: 15px;
    font-weight: 600;
}

.validation-success { color: var(--yellow); }
.validation-danger  { color: #ffd9d4; }

.shake { animation: shake .5s; }

@keyframes shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-7px); }
    40%, 60% { transform: translateX(7px); }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer-area {
    background: var(--ink);
    color: rgba(255, 255, 255, .72);
}

/* The subscribe band is the footer's first child, so the dark footer padding
   starts below it rather than on .footer-area itself. */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 40px;
    padding: 80px 0 60px;
}

.single-footer-widget h3 {
    margin-bottom: 20px;
    color: var(--white);
    font-size: 19px;
}

.single-footer-widget .logo img {
    width: 130px;
    margin-bottom: 18px;
    padding: 8px;
    border-radius: 8px;
    background: var(--white);
}

.single-footer-widget a { color: rgba(255, 255, 255, .72); }
.single-footer-widget a:hover { color: var(--yellow); }

.services-list li,
.contact-info li,
.working-hours li {
    padding: 7px 0;
    font-size: 15px;
}

.contact-info span {
    display: block;
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.social {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: var(--white);
    font-size: 17px;
    transition: background .25s, transform .25s;
}

.social a:hover {
    background: var(--green);
    color: var(--white);
    transform: translateY(-3px);
}

.copyright-area {
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.copyright-area .inner {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 30px;
    align-items: center;
    justify-content: space-between;
}

.copyright-area p { margin: 0; font-size: 14.5px; }

.copyright-area ul {
    display: flex;
    gap: 22px;
    font-size: 14.5px;
}

/* ==========================================================================
   Go to top
   ========================================================================== */
.go-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 800;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: var(--green);
    color: var(--white);
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .3s, transform .3s, visibility .3s, background .25s;
}

.go-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.go-top:hover { background: var(--ink); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
/* Scoped to html.js so content stays visible if JS never runs */
.js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}

.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .001s !important;
        transition-duration: .001s !important;
    }

    .js .reveal { opacity: 1; transform: none; }
}

/* --- Utilities ----------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}