/* Stout Seed — stoutseed.com palette and type: green #456639, gold #CD9A2D, charcoal #242424; Oswald headings, Montserrat body; square buttons */
:root { --green:#456639; --green-dk:#33502a; --gold:#CD9A2D; --gold-dk:#b4851f; --ink:#242424; --mute:#6b6b6b; --line:#e3e3e0; --bg:#faf9f9; --paper:#fff; --tint:#eef2ea; }
* { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 Montserrat, system-ui, sans-serif; }
h1, h2, h3, .h3 { font-family:Oswald, sans-serif; line-height:1.15; margin:0 0 .4em; color:var(--ink); letter-spacing:.01em; }
h1 { font-size:clamp(32px, 4.6vw, 54px); font-weight:600; text-transform:uppercase; } h2 { font-size:clamp(24px, 3vw, 36px); font-weight:600; } h3, .h3 { font-size:17px; font-weight:600; text-transform:uppercase; color:var(--green); letter-spacing:.06em; }
a { color:var(--green); } img { max-width:100%; height:auto; }
.wrap { max-width:1180px; margin:0 auto; padding:0 20px; } .kicker { font:600 12px Montserrat, sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-dk); margin:0 0 8px; }
.lead { font-size:17.5px; color:#3a3a3a; max-width:760px; } .small { font-size:13px; } .muted { color:var(--mute); }
.btn { display:inline-block; background:var(--gold); color:#fff; text-decoration:none; font:700 14px Montserrat, sans-serif; letter-spacing:.06em; text-transform:uppercase; padding:14px 24px; border:1px solid var(--gold); border-radius:0; cursor:pointer; margin:0 10px 10px 0; }
.btn:hover { background:var(--green); border-color:var(--green); } .btn.ghost { background:transparent; color:#fff; border-color:#fff; } .btn.ghost:hover { background:#fff; color:var(--green); }
.topbar { background:var(--green-dk); color:#dfe8d9; font-size:13px; } .topbar .wrap { display:flex; justify-content:space-between; gap:12px; padding:7px 20px; } .topbar a { color:#fff; font-weight:700; text-decoration:none; }
.hdr { background:#fff; border-bottom:4px solid var(--gold); position:sticky; top:0; z-index:20; } .hrow { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 20px; }
.logo img { display:block; width:236px; height:auto; }
.nav { display:flex; gap:4px; align-items:center; } .nav a { text-decoration:none; color:#333; font:700 13.5px Montserrat, sans-serif; text-transform:uppercase; letter-spacing:.05em; padding:10px 12px; border-bottom:3px solid transparent; }
.nav a:hover, .nav a.on { color:var(--green); border-bottom-color:var(--gold); } .nav a.shop { background:var(--green); color:#fff; padding:10px 14px; margin-left:8px; border-bottom:none; } .nav a.shop:hover { background:var(--green-dk); }
.burger { display:none; width:44px; height:40px; background:none; border:1px solid var(--line); cursor:pointer; flex-direction:column; justify-content:center; gap:5px; align-items:center; } .burger span { width:22px; height:3px; background:var(--green); display:block; }
.hero { position:relative; background:#333 center/cover no-repeat; color:#fff; padding:96px 0 84px; } .hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,30,16,.78), rgba(20,30,16,.35)); } .hero .wrap { position:relative; max-width:1180px; }
.hero h1 { color:#fff; max-width:820px; } .hero .kicker { color:var(--gold); } .hero .lead { color:#e8ece4; } .hero .ctas { margin-top:18px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:16px; margin:-46px auto 40px; position:relative; z-index:2; }
.tile { display:block; min-height:280px; background:#333 center/cover; color:#fff; text-decoration:none; position:relative; border-bottom:5px solid var(--gold); } .tile::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(20,30,16,.9)); }
.tile span { position:absolute; left:0; right:0; bottom:0; padding:18px 20px; } .tile h3 { color:#fff; font-size:22px; letter-spacing:.04em; } .tile p { margin:0 0 8px; font-size:14px; color:#dfe6da; } .tile b { color:var(--gold); font-size:13px; text-transform:uppercase; letter-spacing:.1em; }
.band { padding:60px 0; } .band.why { background:#fff; } .band.light { background:var(--tint); } .band.cta { background:var(--green); color:#fff; } .band.cta h2 { color:#fff; } .band.cta .btn.ghost { color:#fff; }
.two { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; } .two img { width:100%; border:6px solid #fff; box-shadow:0 14px 40px rgba(0,0,0,.15); }
.partners { text-align:center; padding:40px 20px 10px; } .plogos { display:flex; gap:28px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:12px; } .plogos img { height:52px; width:auto; filter:grayscale(.1); } .plogos a:hover img { filter:none; }
.crumbs { padding:16px 20px 0; font-size:13px; color:var(--mute); } .crumbs a { color:var(--mute); }
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:30px 0 10px; } .in { padding:11px 12px; border:1px solid #cfcfcb; border-radius:0; font:inherit; font-size:15px; background:#fff; color:var(--ink); width:100%; } .filters .in { width:auto; flex:1 1 200px; } .filters input.in { flex:2 1 300px; } .count { font-weight:700; color:var(--green); white-space:nowrap; }
.legend { font-size:13px; color:var(--mute); margin:0 0 16px; }
.hybs { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:16px; } .hyb { display:flex; flex-direction:column; gap:8px; background:#fff; border:1px solid var(--line); border-top:4px solid var(--green); padding:16px 18px; text-decoration:none; color:var(--ink); }
.hyb:hover { box-shadow:0 10px 30px rgba(0,0,0,.1); border-top-color:var(--gold); } .hyb[hidden] { display:none; }
.hyb-top { display:flex; justify-content:space-between; align-items:baseline; } .code { font:600 26px Oswald, sans-serif; color:var(--green); } .rm { font-size:13px; color:var(--mute); } .rm b { font-size:20px; color:var(--ink); font-family:Oswald, sans-serif; }
.trait { font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gold-dk); } .hyb p { margin:0; font-size:14px; color:#3a3a3a; } .packs { font-size:12.5px; color:var(--mute); } .more { margin-top:auto; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--green); }
.soils { display:flex; gap:6px; flex-wrap:wrap; } .soil { display:inline-flex; flex-direction:column; align-items:center; min-width:52px; padding:4px 6px; background:#f1f1ee; border:1px solid var(--line); font-size:10px; color:var(--mute); text-transform:uppercase; letter-spacing:.04em; } .soil b { font-family:Oswald, sans-serif; font-size:16px; color:var(--ink); }
.soil.rE { background:#dfeedb; border-color:#b7d3ad; } .soil.rVG { background:#e9f1e2; } .soil.rF { background:#fbeeda; } .soil.rP { background:#f8e0e0; } .soils.big .soil { min-width:78px; padding:8px 10px; font-size:11px; } .soils.big .soil b { font-size:22px; }
.hhead { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:36px; padding:24px 20px 10px; align-items:start; } .hhead h1 { text-transform:none; font-size:clamp(40px, 6vw, 64px); color:var(--green); }
.meta { display:flex; gap:18px; flex-wrap:wrap; font-size:14px; color:var(--mute); } .meta b { font-family:Oswald, sans-serif; font-size:22px; color:var(--ink); margin-right:4px; } .meta span { display:inline-flex; align-items:baseline; }
.ov { padding-left:20px; font-size:16.5px; } .ov li { margin:0 0 6px; }
.card { background:#fff; border:1px solid var(--line); padding:18px 20px; } .card h3 { margin-bottom:10px; } .hside { display:flex; flex-direction:column; gap:14px; } .place { border-left:5px solid var(--gold); }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; padding-top:16px; }
.rt { width:100%; border-collapse:collapse; font-size:14px; } .rt th { text-align:left; font-weight:500; color:#444; padding:6px 0; border-bottom:1px solid var(--line); width:58%; } .rt td { padding:6px 0; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
.bar { display:inline-block; width:80px; height:8px; background:#eee; margin-right:8px; vertical-align:middle; } .bar i { display:block; height:100%; background:var(--green); }
.chips { display:flex; gap:8px; flex-wrap:wrap; } .chip { display:inline-block; padding:8px 14px; border:1px solid var(--green); color:var(--green); text-decoration:none; font-weight:700; } .chip:hover { background:var(--green); color:#fff; }
.soy { padding:36px 20px 10px; } .soyhead { display:flex; gap:20px; align-items:center; margin-bottom:16px; } .soyhead img { height:56px; width:auto; } .soyhead p { margin:0; color:#3a3a3a; }
.vars { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px; } .var { background:#fff; border:1px solid var(--line); padding:12px 14px; } .var b { display:block; font:600 20px Oswald, sans-serif; color:var(--green); } .var small { color:var(--mute); font-size:12px; }
.items { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; padding:40px 20px; } .item { display:block; background:#fff; border:1px solid var(--line); border-top:4px solid var(--gold); padding:18px 20px; text-decoration:none; color:var(--ink); } .item:hover { box-shadow:0 10px 30px rgba(0,0,0,.1); } .item p { font-size:14px; color:#3a3a3a; } .item b { color:var(--green); font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; }
.story { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:40px; padding:50px 20px 40px; align-items:start; } .story p { font-size:16px; color:#3a3a3a; }
.facts { list-style:none; margin:0; padding:20px 22px; background:var(--green); color:#dfe8d9; border-top:5px solid var(--gold); } .facts li { padding:10px 0; border-bottom:1px solid rgba(255,255,255,.14); font-size:14px; } .facts li:last-child { border:none; } .facts b { display:block; color:#fff; font:600 18px Oswald, sans-serif; }
.team { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:18px; } .person { background:#fff; border:1px solid var(--line); } .person img { width:100%; aspect-ratio:5/6; object-fit:cover; display:block; } .person h3 { margin:12px 14px 2px; text-transform:none; letter-spacing:0; font-size:18px; color:var(--ink); } .person p { margin:0 14px 14px; font-size:13px; color:var(--gold-dk); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.contact { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:30px; padding:40px 20px; align-items:start; } .cbox { background:#fff; border:1px solid var(--line); padding:24px; } .form { display:flex; flex-direction:column; gap:14px; } .form label { display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#555; } .row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .flash { padding:12px 16px; margin-bottom:14px; } .flash.ok { background:#dfeedb; color:#254a1b; } .flash.warn { background:#fbeeda; color:#6a4a08; } .flash ul { margin:0; padding-left:18px; }
.loc { background:#fff; border-left:4px solid var(--gold); padding:14px 18px; margin-bottom:12px; } .loc p { margin:4px 0 6px; font-size:14px; } .loc a.big { font:600 22px Oswald, sans-serif; text-decoration:none; }
.ft { background:#1f2a1b; color:#cfd8c9; margin-top:60px; border-top:6px solid var(--gold); } .fgrid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:30px; padding:44px 20px 24px; } .ft h4 { font:600 13px Oswald, sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:0 0 12px; } .ft ul { list-style:none; margin:0; padding:0; } .ft li { margin-bottom:8px; } .ft a { color:#fff; text-decoration:none; } .ft a:hover { text-decoration:underline; }
.ft p { font-size:14px; margin:0 0 10px; } .flogo { background:#fff; padding:8px; margin-bottom:10px; } .brands img { height:30px; width:auto; background:#fff; padding:3px; margin:4px 6px 0 0; } .ft a.big { font:600 20px Oswald, sans-serif; }
.fbot { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 20px 18px; border-top:1px solid rgba(255,255,255,.1); font-size:13px; color:#9fae98; } .fbot a { color:#cfd8c9; }
@media (max-width: 960px) { .burger { display:flex; } .nav { display:none; position:absolute; left:0; right:0; top:100%; background:#fff; flex-direction:column; align-items:stretch; padding:10px 16px 16px; border-bottom:4px solid var(--gold); box-shadow:0 14px 30px rgba(0,0,0,.15); } .nav.open { display:flex; } .nav a { padding:12px 6px; border-bottom:1px solid var(--line); } .nav a.shop { margin:10px 0 0; text-align:center; }
  .two, .hhead, .story, .contact { grid-template-columns:1fr; } .fgrid { grid-template-columns:1fr 1fr; } .hero { padding:64px 0 60px; } .tiles { margin-top:-24px; } }
@media (max-width: 640px) { .logo img { width:180px; } .topbar .wrap { flex-direction:column; gap:2px; text-align:center; } .fgrid { grid-template-columns:1fr; } .row2 { grid-template-columns:1fr; } .hero { padding:50px 0 46px; } .hero h1 { font-size:30px; } .filters .in { flex-basis:100%; } }
main > .wrap .btn.ghost, .hhead .btn.ghost { color:var(--green); border-color:var(--green); } main > .wrap .btn.ghost:hover, .hhead .btn.ghost:hover { background:var(--green); color:#fff; }