/* =========================
   DESIGN TOKENS
   ========================= */
:root {
    --navy:#132839;
    --ink:#17212a;
    --orange:#d95b18;
    --gold:#d3a54a;
    --paper:#f4ead5;
    --lime:#8bcf2f;
    --cream:#fffaf0;
    --max:1280px}

* {
    box-sizing:border-box}

html {
    scroll-behavior:smooth}

body {
    margin:0;
    font-family:Inter,system-ui,sans-serif;
    color:var(--ink);
    background:#efe3ca}

img {
    max-width:100%;
    display:block}

a {
    color:inherit}

.wrap {
    width:min(calc(100% - 40px),var(--max));
    margin:auto}

/* =========================
   HEADER
   ========================= */
.site-header {
    position:fixed;
    z-index:30;
    top:0;
    left:0;
    right:0;
    height:88px;
    display:flex;
    align-items:center;
    padding:8px max(24px,calc((100vw - var(--max))/2));
    background:rgba(0,0,0,.68);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,.14)}

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

.site-header nav {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:28px}

.site-header nav a {
    color:white;
    text-decoration:none;
    font-weight:800;
    font-size:.86rem;
    letter-spacing:.04em;
    text-transform:uppercase}

.site-header nav a:hover {
    color:#ffb061}

.nav-cta {
    padding:13px 18px;
    background:var(--orange);
    border-radius:4px}

.menu-toggle {
    display:none;
    margin-left:auto}

/* =========================
   HERO
   ========================= */
.hero {
    min-height:730px;
    position:relative;
    background:url('images/hero-harbor.jpg') center/cover no-repeat;
    color:white;
    padding-top:38px}

.hero-shade {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(4,13,20,.82) 0%,rgba(4,13,20,.35) 50%,rgba(4,13,20,.16) 100%)}

.hero-content {
    position:relative;
    display:grid;
    grid-template-columns:1fr 1.25fr;
    align-items:end;
    min-height:730px;
    padding-bottom:36px}

.hero-copy {
    align-self:center;
    max-width:590px}

.eyebrow {
    text-transform:uppercase;
    letter-spacing:.15em;
    font-weight:800;
    font-size:.78rem}

.orange {
    color:var(--orange)}

.gold {
    color:#f6c35a}

.hero h1,.section-heading h2,/* =========================
   ABOUT
   ========================= */
.about h2,/* =========================
   RETAILERS
   ========================= */
.retailers h2,/* =========================
   ACTIONS
   ========================= */
.next-actions h2 {
    font-family:Marcellus,serif;
    text-transform:uppercase;
    letter-spacing:.02em}

.hero h1 {
    font-size:clamp(3.7rem,7vw,7rem);
    line-height:.9;
    margin:.15em 0 .28em}

.hero-lead {
    font-size:1.15rem;
    line-height:1.65}

.actions {
    display:flex;
    gap:14px;
    margin-top:28px}

.button {
    display:inline-block;
    text-decoration:none;
    text-transform:uppercase;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.04em;
    padding:15px 22px;
    border-radius:4px;
    transition:.2s}

.button:hover {
    transform:translateY(-3px)}

.primary {
    background:var(--orange);
    color:white}

.ghost {
    border:1px solid white;
    color:white;
    background:rgba(0,0,0,.2)}

.secondary {
    background:var(--navy);
    color:white}

.hero-bottles {
    height:600px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:4px}

.hero-bottles img {
    height:auto;
    max-height: 640px;
    width:auto;
    object-fit:contain;
    filter:drop-shadow(0 15px 18px rgba(0,0,0,.45));
    transition:.25s}

.hero-bottles img:hover {
    transform:translateY(-8px)}

.section-light,.section-paper {
    background:var(--paper)}

.about {
    padding: 40px 0;
    background-image: url("images/parchment.png");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
}

.about-grid {
    display: grid;
    grid-template-columns: 280px 1fr 1.45fr;
    gap: 48px;
    align-items: center;
}

.about h2 {
    font-size:2.2rem;
    margin:.2rem 0}

.about-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-logo img {
    width: 100%;
    max-width: 250px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(33, 22, 10, .18));
}

.about-copy p {
    line-height: 1.65;
}

.script {
    font-family:Georgia,serif;
    font-style:italic;
    color:#a74621}

.feature-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    text-align:center}

.feature-grid article {
    padding:15px;
    border-left:3px solid #DCB97E}

.feature-grid span {
    display:grid;
    place-items:center;
    margin:auto auto 12px;
    width:56px;
    height:56px;
    border:2px solid var(--orange);
    border-radius:50%;
    color:var(--orange);
    font-size:1.6rem;
    font-weight:800}

/* =========================
   MEET THE FLEET
   ========================= */
.fleet {
    padding: 40px 0;
    background: var(--navy);
    color: var(--cream);
}

.section-heading {
    text-align:center;
    margin-bottom:30px}

.section-heading h2 {
    font-size:clamp(2.4rem,4vw,4rem);
    margin:.1em}

.section-heading p {
    margin:.3em}

.drink-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px}

.drink-card {
    position:relative;
    min-height:510px;
    border-radius:12px;
    overflow:hidden;
    background-image:var(--world);
    background-size:cover;
    background-position:center;
    box-shadow:0 18px 36px rgba(32,22,12,.18)}

.card-overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.78))}

.drink-card>img {
    position:absolute;
    height:94%;
    left:12px;
    bottom:12px;
    filter:drop-shadow(0 9px 10px rgba(0,0,0,.45))}

.card-copy {
    position:absolute;
    z-index:2;
    left:42%;
    right:16px;
    top:26px;
    color:white;
    text-shadow:0 2px 4px #000}

.card-copy h3 {
    font-family:Marcellus,serif;
    font-size:2rem;
    margin:0 0 12px}

.card-copy p {
    font-size:.95rem;
    line-height:1.5}

.card-copy a {
    position:absolute;
    top:390px;
    white-space:nowrap;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:800;
    background:var(--orange);
    padding:12px 10px;
    border-radius:3px}



/* =========================
   TIMELINE
   ========================= */
.journey {
    position: relative;
    padding: 40px 0;
    background-image: url("images/parchment.png");
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;

    overflow: hidden;
}
.timeline {
    list-style:none;
    padding:0;
    margin:40px 0 0;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    position:relative}

.timeline:before {
    content:"";
    position:absolute;
    left:7%;
    right:7%;
    top:34px;
    border-top:3px dashed #9b6c34}

.timeline li {
    text-align:center;
    position:relative;
    padding-top:65px}

.timeline li:before {
    content:"";
    position:absolute;
    width:24px;
    height:24px;
    background:var(--orange);
    border:6px solid var(--paper);
    border-radius:50%;
    top:21px;
    left:calc(50% - 18px)}

.timeline strong {
    display:block;
    font-size:1.25rem}

.timeline span {
    font-size:.85rem;
    line-height:1.35;
    display:block;
    margin-top:8px}

.retailers {
    background:#102b3a;
    color:white;
    padding:30px 0}

.retail-grid {
    display:grid;
    grid-template-columns:1.6fr .8fr;
    gap:45px}

.retailers h2 {
    font-size:3rem;
    margin:.2em 0}

.retail-lead {
    font-size:1.15rem}

.retail-points {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
    margin-top:30px}

.retail-points article {
    border-left:2px solid var(--gold);
    padding-left:18px}

.retail-points h3 {
    color:#f2bd58}

.retail-card {
    background:var(--paper);
    color:var(--ink);
    padding:30px;
    border-radius:10px}

.retail-card h3 {
    font-family:Marcellus,serif;
    font-size:2rem;
    margin-top:0;
    color:#a6401d}

.retail-card li {
    margin:.75em 0}

.next-actions {
    position: relative;

    padding: 90px 0;

    background-image: url("images/tabletop.png");
    /* or actions-background.png */

    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;

    overflow: hidden;
}

.action-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px}

.action-grid article {
    padding:32px;
    background:#fff9ed;
    border:1px solid #d9c7a5;
    border-radius:10px}

.action-grid h2 {
    font-size:2rem;
    margin:.3em 0}

.action-grid p {
    line-height:1.55}

/* =========================
   FOOTER
   ========================= */
footer {
    background:#15120e;
    color:#e8dbc1;
    padding:38px 0}

.footer-grid {
    display:grid;
    grid-template-columns:160px 1fr 1fr auto;
    gap:30px;
    align-items:center}

.footer-grid>img {
    width:125px}

.footer-grid div {
    display:flex;
    flex-direction:column;
    gap:7px}

.footer-grid a {
    text-decoration:none;
    color:#e8dbc1;
    font-size:.88rem}

.footer-grid p {
    margin:0;
    line-height:1.5}

.footer-grid small {
    align-self:end}

/* =========================
   TABLET
   ========================= */
@media(max-width:960px) {
.site-header nav {
    display:none;
    position:absolute;
    top:88px;
    left:0;
    right:0;
    background:#0b1116;
    padding:20px;
    flex-direction:column}

.site-header nav.open {
    display:flex}

.menu-toggle {
    display:block;
    background:transparent;
    border:1px solid white;
    color:white;
    padding:10px}

.hero-content {
    grid-template-columns:1fr}

.hero-copy {
    padding-top:70px}

.hero-bottles {
    height:420px}

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

    .about-logo {
        grid-row: span 2;
    }

    .feature-grid {
        grid-column: 2;
    }

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

.timeline {
    grid-template-columns:repeat(3,1fr);
    row-gap:30px}

.timeline:before {
    display:none}

.action-grid {
    grid-template-columns:1fr}

.footer-grid {
    grid-template-columns:1fr 1fr}

}

/* =========================
   MOBILE
   ========================= */
@media(max-width:620px) {
.about-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
    }

    .about-logo {
        grid-row: auto;
    }

    .about-logo img {
        max-width: 210px;
    }

    .feature-grid {
        grid-column: auto;
    }

.wrap {
    width:min(calc(100% - 24px),var(--max))}

.hero {
    min-height:820px}

.hero h1 {
    font-size:3.5rem}

.hero-content {
    align-items:start}

.hero-bottles {
    height:340px}

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

.drink-grid {
    grid-template-columns:1fr}

.drink-card {
    min-height:480px}

.timeline {
    grid-template-columns:1fr 1fr}

.footer-grid {
    grid-template-columns:1fr}

.brand img {
    width:90px}

.site-header {
    height:76px}

.site-header nav {
    top:76px}

}