:root{
    --green:#163f27;
    --green2:#245a35;
    --black:#11110e;
    --cream:#f3ead8;
    --paper:#fff7e8;
    --gold:#b98636;
    --shadow:0 18px 36px rgba(0,0,0,.14);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:'Source Sans 3',sans-serif;
    background:var(--cream);
    color:var(--black);
    line-height:1.75;
    font-weight:400;
}

h1,h2,h3,h4{
    font-family:'Cormorant Garamond',serif;
    font-weight:600;
    letter-spacing:.02em;
    margin-top:0;
}

.small-label,
.button,
nav a,
.brand span,
.crew button{
    font-family:'Montserrat',sans-serif;
}

.announcement{
    background:var(--green);
    color:white;
    padding:.7rem 1rem;
    text-align:center;
    font-size:.82rem;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.site-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1rem 5vw;
    background:#11110e;
    border-bottom:2px solid var(--gold);
    position:sticky;
    top:0;
    z-index:1000;
}

.brand{
    display:flex;
    align-items:center;
    gap:1rem;
    color:white;
    text-decoration:none;
    font-weight:800;
    letter-spacing:.08em;
}

.brand img{
    width:68px;
    height:68px;
    object-fit:contain;
}

nav{
    display:flex;
    gap:1.2rem;
    align-items:center;
}

nav a{
    color:white;
    text-decoration:none;
    font-size:.82rem;
    font-weight:700;
    text-transform:uppercase;
}

.shop-link{
    border:1px solid var(--gold);
    padding:.8rem 1rem;
}

.hero{
    min-height:760px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2.5rem;
    align-items:center;
    padding:4.5rem 7vw;
    background:
        radial-gradient(circle at 82% 18%,rgba(184,134,54,.20),transparent 25%),
        linear-gradient(
            135deg,
            #11110e 0%,
            #1b3027 62%,
            #f3ead8 62%,
            #e6d6b8 100%
        );
    color:white;
}

.hero-copy{
    max-width:540px;
}

.hero h1{
    font-size:clamp(3.5rem,6vw,5.5rem);
    line-height:.92;
    margin-bottom:.5rem;
}

.hero h2{
    font-size:clamp(1.8rem,3vw,2.5rem);
    color:#f5d89a;
    margin-bottom:2rem;
}

.lead{
    font-size:1.22rem;
    line-height:1.9;
    margin-bottom:1.5rem;
}

.button{
    display:inline-block;
    padding:1rem 1.5rem;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:700;
    margin-right:1rem;
    margin-top:1rem;
}

.primary{
    background:var(--green2);
    border:2px solid var(--gold);
    color:white;
}

.secondary{
    border:2px solid white;
    color:white;
}

.hero-art{
    display:flex;
    justify-content:center;
}

.hero-main{
    max-width:85%;
    max-height:540px;
}

.small-label{
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:.22em;
    font-size:1rem;
    letter-spacing:.35em;
    font-weight:800;
    margin-bottom:1.5rem;
}

h2{
    font-size:clamp(1.9rem,3.2vw,3rem);
    line-height:1.05;
}

.values,
.featured,
.story-strip,
.crew,
.why-slainte{
    padding:5rem 7vw;
}

.why-slainte{
    text-align:center;
    background:#e5d7bd;
}

.why-copy{
    max-width:900px;
    margin:auto;
}

.why-copy p{
    font-size:1.15rem;
    line-height:2;
}

.why-copy strong{
    color:var(--green);
    font-size:1.4rem;
}

.values{
    background:var(--paper);
    text-align:center;
}

.value-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2rem;
    margin-top:3rem;
}

.value-grid article{
    background:white;
    padding:2rem;
    box-shadow:var(--shadow);
}

.editorial-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
    align-items:center;
    padding:4.5rem 7vw;
}

.editorial-split.reverse{
    direction:rtl;
}

.editorial-split.reverse > *{
    direction:ltr;
}

.editorial-copy{
    max-width:560px;
}

.editorial-copy h2{
    font-size:clamp(1.9rem,3vw,3rem);
    margin:.5rem 0 1.5rem;
}

.editorial-copy p{
    font-size:1.15rem;
    line-height:2;
}

.editorial-image{
    display:flex;
    justify-content:center;
}

.editorial-image img{
    width:100%;
    max-width:520px;
    height:auto;
    border:8px solid white;
    box-shadow:var(--shadow);
}

.featured{
    background:#11110e;
    color:white;
}

.section-head{
    text-align:center;
    margin-bottom:3rem;
}

.collection-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
}

.collection-card{
    background:#f3ead8;
    color:black;
    box-shadow:var(--shadow);
}

.collection-card img{
    width:100%;
    height:320px;
    object-fit:contain;
    background:#171510;
    padding:1rem;
}

.collection-card div{
    padding:1.5rem;
}

.collection-card a{
    color:var(--green);
    font-weight:700;
}

.story-strip{
    background:var(--green);
    color:white;
    text-align:center;
}

.story-strip p{
    max-width:800px;
    margin:auto;
    font-size:1.2rem;
}

.crew{
    text-align:center;
}

.crew input{
    padding:1rem;
    min-width:320px;
}

.crew button{
    padding:1rem 1.5rem;
    border:none;
    background:var(--green);
    color:white;
}

footer{
    background:#11110e;
    color:white;
    text-align:center;
    padding:4rem 1rem;
    border-top:2px solid var(--gold);
}

@media(max-width:1000px){

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

    .collection-grid{
        grid-template-columns:1fr;
    }

    .editorial-split{
        grid-template-columns:1fr;
        gap:3rem;
    }

    .editorial-split.reverse{
        direction:ltr;
    }

    .hero{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-copy{
        max-width:100%;
        margin:auto;
    }

}

@media(max-width:700px){

    .value-grid{
        grid-template-columns:1fr;
    }

    nav{
        flex-wrap:wrap;
        justify-content:center;
    }

    .hero h1{
        font-size:4rem;
    }

    .editorial-copy h2{
        font-size:2.5rem;
    }

}

/* ==========================================
   Collection and Story Page Repairs
========================================== */

.page-hero{
    padding:6rem 7vw;
    text-align:center;
    background:linear-gradient(135deg,#11110e 0%,#1b3027 100%);
    color:white;
}

.page-hero h1{
    font-size:clamp(3.5rem,7vw,6rem);
    margin-bottom:.5rem;
}

.page-hero h2{
    color:#f5d89a;
    margin-bottom:1.5rem;
}

.story-page{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:2.5rem;
    align-items:center;
    padding:4.5rem 7vw;
    background:var(--paper);
}

.story-copy p{
    font-size:1.15rem;
    line-height:2;
}

.story-image-card{
    display:flex;
    justify-content:center;
}

.story-image-card img{
    width:100%;
    max-width:550px;
    height:auto;
    object-fit:contain;
    border:8px solid white;
    box-shadow:var(--shadow);
    background:#171510;
    padding:1rem;
}

.collection-showcase{
    padding:4.5rem 7vw;
    text-align:center;
    background:#11110e;
    color:white;
}

.showcase-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:2rem;
    margin-top:3rem;
}

.product-card-link,
.collection-link{
    text-decoration:none;
    color:inherit;
}

.product-card-link article{
    background:var(--cream);
    color:var(--black);
    box-shadow:var(--shadow);
    overflow:hidden;
}

.product-card-link img{
    width:100%;
    height:360px;
    object-fit:contain;
    background:#171510;
    padding:1rem;
}

.product-card-link h3,
.product-card-link p{
    padding-left:1.5rem;
    padding-right:1.5rem;
}

.product-card-link p{
    padding-bottom:1.5rem;
}

.founder-note{
    padding:4.5rem 7vw;
    text-align:center;
    background:#e5d7bd;
}

.founder-note div{
    max-width:900px;
    margin:auto;
}

@media(max-width:1000px){
    .story-page{
        grid-template-columns:1fr;
    }
}


/* ==========================================
   Sláinte Editorial Refinement
========================================== */

.story-copy,
.editorial-copy,
.contact-copy,
.founder-note div{
    max-width:700px;
}

.shamrock-divider{
    text-align:center;
    color:var(--gold);
    font-size:1.5rem;
    letter-spacing:1rem;
    margin:4rem auto;
    opacity:.85;
}

.parchment-panel{
    background:
        linear-gradient(
            rgba(255,250,240,.96),
            rgba(247,239,223,.96)
        );
    border:1px solid rgba(185,134,54,.25);
    box-shadow:var(--shadow);
    padding:4rem;
    border-radius:2px;
}

.contact-page{
    max-width:1400px;
    margin:0 auto;
}

.contact-copy{
    padding-right:2rem;
}

@media(max-width:1000px){
    .contact-copy{
        padding-right:0;
    }
}


/* ==========================================
   Contact Page — Carrier Pidgeon Layout Repair
========================================== */

.contact-page{
    width:min(1400px, 100%);
    margin:0 auto;
    padding:5rem 6vw;
    display:grid;
    grid-template-columns:minmax(0, 1.05fr) minmax(340px, .95fr);
    gap:4rem;
    align-items:start;
    overflow:hidden;
}

.contact-copy{
    max-width:720px;
    padding-right:0;
}

.carrier-pidgeon-plate{
    width:100%;
    max-width:760px;
    margin:2.5rem auto 3rem;
    padding:1rem;
    background:#fff7e8;
    border:1px solid rgba(185,134,54,.28);
    box-shadow:var(--shadow);
}

.carrier-pidgeon-plate img{
    width:100%;
    max-width:100%;
    height:auto;
    display:block;
    margin:0 auto;
}

.contact-details{
    display:grid;
    grid-template-columns:1fr;
    gap:1.25rem;
    margin-top:2.5rem;
}

.contact-details article{
    background:#fff7e8;
    border-left:5px solid var(--green);
    padding:1.25rem 1.5rem;
    box-shadow:0 10px 22px rgba(0,0,0,.08);
}

.contact-details h3{
    margin-bottom:.25rem;
}

.contact-details p{
    margin:0;
}

.contact-card{
    width:100%;
    max-width:600px;
    justify-self:center;
}

.contact-form{
    display:grid;
    gap:1.15rem;
}

.contact-form label{
    display:grid;
    gap:.45rem;
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    text-transform:uppercase;
    font-size:.82rem;
    letter-spacing:.08em;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
    width:100%;
    padding:1rem;
    border:1px solid rgba(185,134,54,.35);
    background:white;
    color:var(--black);
    font-family:'Source Sans 3',sans-serif;
    font-size:1rem;
}

.contact-form textarea{
    min-height:170px;
    resize:vertical;
}

.contact-form button{
    width:fit-content;
    padding:1rem 1.5rem;
    background:var(--green2);
    color:white;
    border:2px solid var(--gold);
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    text-transform:uppercase;
    cursor:pointer;
}

.form-note{
    margin-top:1.25rem;
    font-size:1rem;
    line-height:1.7;
    color:#4a3b25;
}

@media(max-width:1100px){
    .contact-page{
        grid-template-columns:1fr;
        gap:3rem;
    }

    .contact-copy,
    .contact-card{
        max-width:820px;
        margin:0 auto;
    }
}

@media(max-width:700px){
    .contact-page{
        padding:3.5rem 5vw;
    }

    .carrier-pidgeon-plate{
        padding:.65rem;
        margin:2rem auto;
    }

    .parchment-panel{
        padding:2rem;
    }
}


/* ==========================================
   Fluid Motion & Interaction Layer
   (site-wide transitions, hover states,
   nav dropdown, floating social bar,
   scroll-reveal animation)
========================================== */

/* --- Smooth, consistent motion on anything interactive --- */
a, .button, .shop-link, nav a, .crew button,
.contact-form button, .contact-form input,
.contact-form select, .contact-form textarea,
.crew input {
    transition: color .25s ease, background-color .25s ease,
                border-color .25s ease, box-shadow .25s ease,
                transform .25s ease;
}

/* --- Nav link hover: soft gold underline sweep --- */
nav a{
    position:relative;
    padding-bottom:.3rem;
}

nav a:hover{
    color:var(--gold);
}

nav a:not(.shop-link)::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:2px;
    background:var(--gold);
    transition:width .25s ease;
}

nav a:not(.shop-link):hover::after{
    width:100%;
}

.shop-link:hover{
    background:var(--gold);
    color:var(--black);
    transform:translateY(-2px);
}

/* --- Buttons: lift + shadow on hover instead of a hard snap --- */
.button{
    border-radius:4px;
}

.button:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 24px rgba(0,0,0,.25);
}

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

.secondary:hover{
    background:rgba(255,255,255,.12);
}

/* --- Cards: gentle lift + image zoom on hover --- */
.collection-card,
.value-grid article,
.product-card-link article,
.contact-details article{
    border-radius:6px;
    overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;
}

.collection-card:hover,
.value-grid article:hover,
.product-card-link article:hover{
    transform:translateY(-6px);
    box-shadow:0 26px 44px rgba(0,0,0,.2);
}

.collection-card img,
.product-card-link img{
    transition:transform .45s ease;
}

.collection-card:hover img,
.product-card-link:hover img{
    transform:scale(1.045);
}

/* --- Form fields: visible, smooth focus state instead of the default hard outline --- */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.crew input:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(185,134,54,.2);
}

.contact-form input,
.contact-form select,
.contact-form textarea,
.crew input{
    border-radius:4px;
}

.contact-form button:hover,
.crew button:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(0,0,0,.22);
}

/* --- Scroll-reveal: sections ease in as they enter view --- */
.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s ease, transform .7s ease;
}

.reveal-visible{
    opacity:1;
    transform:translateY(0);
}

@media(prefers-reduced-motion: reduce){
    .reveal{
        opacity:1;
        transform:none;
        transition:none;
    }
    .button:hover,
    .collection-card:hover,
    .value-grid article:hover,
    .product-card-link article:hover{
        transform:none;
    }
}

/* ==========================================
   Collections Nav Dropdown
========================================== */

.nav-dropdown{
    position:relative;
}

.nav-dropdown summary{
    list-style:none;
    cursor:pointer;
    color:white;
    font-size:.82rem;
    font-weight:700;
    text-transform:uppercase;
    font-family:'Montserrat',sans-serif;
    display:flex;
    align-items:center;
    gap:.4rem;
}

.nav-dropdown summary::-webkit-details-marker{
    display:none;
}

.nav-dropdown summary::after{
    content:'▾';
    font-size:.65rem;
    color:var(--gold);
    transition:transform .25s ease;
}

.nav-dropdown[open] summary::after{
    transform:rotate(180deg);
}

.nav-dropdown summary:hover{
    color:var(--gold);
}

.nav-dropdown-menu{
    position:absolute;
    top:calc(100% + 1.1rem);
    left:50%;
    transform:translateX(-50%);
    background:#11110e;
    border:1px solid var(--gold);
    box-shadow:var(--shadow);
    padding:1.4rem;
    display:grid;
    grid-template-columns:repeat(2,minmax(170px,1fr));
    gap:.5rem 2rem;
    min-width:440px;
    border-radius:6px;
    z-index:1001;
    animation:dropdownFadeIn .22s ease forwards;
}

@keyframes dropdownFadeIn{
    from{ opacity:0; transform:translateX(-50%) translateY(-8px); }
    to{ opacity:1; transform:translateX(-50%) translateY(0); }
}

.nav-dropdown-menu a{
    color:#f3ead8;
    font-size:.82rem;
    text-transform:none;
    font-weight:500;
    letter-spacing:normal;
    padding:.4rem 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.nav-dropdown-menu a::after{
    display:none;
}

.nav-dropdown-menu a:hover{
    color:var(--gold);
    padding-left:.3rem;
}

.nav-dropdown-viewall{
    grid-column:1 / -1;
    color:var(--gold) !important;
    font-weight:700 !important;
    text-transform:uppercase !important;
    font-size:.76rem !important;
    border-bottom:none !important;
    margin-top:.4rem;
    padding-top:.75rem !important;
    border-top:1px solid rgba(185,134,54,.3);
}

@media(max-width:700px){
    .nav-dropdown-menu{
        position:static;
        transform:none;
        min-width:0;
        width:100%;
        grid-template-columns:1fr;
        margin-top:.75rem;
        animation:none;
    }
}

/* ==========================================
   Persistent Social Icons (all pages, no scrolling needed)
========================================== */

.social-float{
    position:fixed;
    right:1.25rem;
    bottom:1.5rem;
    display:flex;
    flex-direction:column;
    gap:.65rem;
    z-index:950;
}

.social-float a{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#11110e;
    border:1.5px solid var(--gold);
    border-radius:50%;
    color:var(--cream);
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    font-size:.7rem;
    letter-spacing:.02em;
    text-decoration:none;
    box-shadow:var(--shadow);
}

.social-float a:hover{
    background:var(--gold);
    color:var(--black);
    transform:translateY(-3px) scale(1.07);
}

@media(max-width:700px){
    .social-float{
        right:.75rem;
        bottom:.75rem;
        gap:.5rem;
    }
    .social-float a{
        width:40px;
        height:40px;
        font-size:.62rem;
    }
}


/* ==========================================
   Fix: Collections dropdown should also open on hover
   (desktop/mouse only — tap-to-open on touch devices
   is preserved via the native <details> behavior)
========================================== */

@media (hover: hover) and (pointer: fine){
    .nav-dropdown:hover > .nav-dropdown-menu{
        display:grid !important;
        animation:dropdownFadeIn .22s ease forwards;
    }
}

/* ==========================================
   Social icons: real brand colors + icon marks
   instead of plain text initials
========================================== */

.social-float a{
    background:#11110e;
    border:none;
}

.social-float a svg{
    width:20px;
    height:20px;
}

.social-float a.social-fb{ background:#1877F2; }
.social-float a.social-ig{ background:linear-gradient(135deg,#f58529,#dd2a7b 45%,#8134af,#515bd4); }
.social-float a.social-pin{ background:#E60023; }
.social-float a.social-yt{ background:#FF0000; }

.social-float a.social-fb:hover,
.social-float a.social-ig:hover,
.social-float a.social-pin:hover,
.social-float a.social-yt:hover{
    color:inherit;
    filter:brightness(1.12);
}


/* ==========================================
   River Blend — softens the hard seam between
   high-contrast sections (cream/black/green) so
   one flows into the next instead of stacking
   like separate blocks.
========================================== */

.blend-seam{
    position:relative;
}

.blend-seam::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:190px;
    transform:translateY(48%);
    background:linear-gradient(to bottom, transparent 0%, var(--blend-to) 72%);
    pointer-events:none;
    z-index:2;
}

.blend-to-black{ --blend-to:#11110e; }
.blend-to-green{ --blend-to:#163f27; }
.blend-to-cream{ --blend-to:#f3ead8; }
.blend-to-paper{ --blend-to:#fff7e8; }

@media(max-width:700px){
    .blend-seam::after{
        height:120px;
    }
}


/* ==========================================
   Farm Photo Band — real photography breaking
   up the flat color sections
========================================== */

.farm-photo-band{
    position:relative;
    min-height:520px;
    background-size:cover;
    background-position:center 65%;
    display:flex;
    align-items:flex-end;
    padding:4rem 7vw;
}

.farm-photo-band::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(17,17,14,.88) 0%, rgba(17,17,14,.4) 42%, rgba(22,63,39,.12) 100%);
}

.farm-photo-quote{
    position:relative;
    z-index:1;
    max-width:640px;
    font-family:'Cormorant Garamond',serif;
    font-style:italic;
    font-weight:500;
    font-size:clamp(1.3rem,2.3vw,1.85rem);
    line-height:1.55;
    color:#f3ead8;
}

@media(max-width:700px){
    .farm-photo-band{
        min-height:400px;
        padding:2.5rem 6vw;
    }
}