/* ============================================================
   soli.coop — SHARED STYLE GUIDE  (single source of truth)
   Link on EVERY soli.coop page:  <link rel="stylesheet" href="/soli-style.css">
   Change type/weight/colour HERE once → every page stays consistent.
   Rules: ONE type scale; weights 400 (body) / 500 (headings & labels);
   800 is reserved for the banner slogan (.sr-slogan .col) ONLY.
   Nav: a BURGER at all widths (top-right, opposite the logo); the
   "See for yourself" CTA stays visible beside it; the rest collapses.
   ============================================================ */

/* ---- tokens ---- */
:root{
  --ink:#17120f; --cream:#faf5ec; --paper:#fffdf8;
  --gold:#cf952c; --goldb:#ffd27a; --line:#ece2d0; --muted:#6f6356;
  --sr-h:clamp(200px,26vh,300px);
}

/* ---- base ---- */
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1000px;margin:0 auto;padding:0 28px}
section{padding:54px 0;border-bottom:1px solid var(--line)}

/* ---- typography (one scale; medium 500, never 700/800 in the body) ---- */
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:500;margin:0 0 12px}
h1{font-size:clamp(30px,4.6vw,46px);line-height:1.12;font-weight:500;margin:0 0 16px;letter-spacing:-.01em}
h2{font-size:clamp(22px,3vw,30px);font-weight:500;margin:0 0 14px;letter-spacing:-.01em}
h3{font-size:19px;font-weight:500;margin:0 0 8px}
.lead{font-size:18px;color:#4a4138;max-width:60ch;margin:0 0 22px;line-height:1.7}
p{line-height:1.7}

/* ---- components ---- */
.btn{display:inline-block;background:var(--gold);color:#2b1d04;font-weight:500;text-decoration:none;padding:12px 26px;border-radius:999px;font-size:15px;margin:6px 8px 6px 0}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.grid2,.grid3{grid-template-columns:1fr}}
.card{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:22px;text-decoration:none;color:inherit;display:block}
.card .ch{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.card h3{margin:0;font-size:19px;font-weight:500}
.card p{margin:0;color:#4a4138;font-size:15px}
.card .go{margin-top:12px;font-size:13px;font-weight:500;color:var(--gold)}
.card.small h3{font-size:16px}
.pillar{padding:26px}
.ovw{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:22px 24px;text-decoration:none;color:inherit}
footer{background:var(--ink);color:#cdbfaf;text-align:center;padding:38px 28px;font-size:13.5px;line-height:1.8}
footer a{color:#cdbfaf;text-decoration:none}
footer .os{color:var(--goldb);font-weight:500}

/* ============================================================
   FIXED sunrise banner (shared). Markup (BLOCK B) stays inline per
   page; styling lives here. NAV = burger at ALL widths, top-right,
   with the visible "See for yourself" CTA beside it. Slogan .col = the ONE 800.
   ============================================================ */
.sr-fixed{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--sr-h)}
.sr-spacer{height:calc(var(--sr-h) + 26px)}
.sr-band{position:absolute;inset:0;overflow:hidden;background:url("/soli-sunrise-strip.jpg") center 36%/cover no-repeat}
.sr-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,18,16,0) 48%,rgba(46,24,10,.42) 100%)}
.sr-logo{position:absolute;left:30px;top:36%;z-index:3;display:inline-block;line-height:0;transform:translateY(-50%) rotate(-18deg);transform-origin:left center}
.sr-logo img{height:66px;width:auto;display:block;filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(20,12,4,.7))}
.sr-slogan{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);z-index:2;text-align:center;padding:0 18px}
.sr-slogan .col{display:inline-block;color:#fff;font-weight:800;letter-spacing:.01em;line-height:1.24;text-align:center;text-transform:lowercase;font-size:clamp(17px,2.2vw,27px);text-shadow:0 2px 16px rgba(0,0,0,.55)}
.sr-slogan .hl{color:#ffd27a;text-shadow:0 2px 16px rgba(120,60,10,.55)}
.sr-actions{position:absolute;right:18px;top:34%;transform:translateY(-50%);z-index:31;display:flex;align-items:center;gap:10px}
.sr-cta{background:#7a2e0a;color:#fff !important;border-radius:999px;padding:9px 18px;font-size:12px;font-weight:500;text-decoration:none;white-space:nowrap;box-shadow:0 8px 22px rgba(90,45,10,.28)}
.sr-cta::after{content:" \25BE";font-size:8px;opacity:.85}
.sr-cta:hover{background:#601f04}
.sr-cta-drop{position:relative}
.sr-cta-drop .sr-menu{position:absolute;right:0;left:auto;top:calc(100% + 10px);background:#fff;border:1px solid #e3e5e9;border-radius:12px;box-shadow:0 14px 34px rgba(90,45,10,.22);padding:7px;min-width:300px;max-width:330px;display:none;z-index:6}
.sr-cta-drop:hover .sr-menu,.sr-cta-drop:focus-within .sr-menu,.sr-cta-drop.open>.sr-menu{display:block}
.sr-cta-drop .sr-menu a{display:block;white-space:normal;padding:11px 14px;border-radius:8px;font-size:13px;color:#0c0c0c;font-weight:500;text-decoration:none}
.sr-cta-drop .sr-menu a:hover{background:#fbf3df;color:#7a2e0a}
.sr-cta-drop .sr-menu a b{display:block;font-size:14px;font-weight:500;color:#1a1410}
.sr-cta-drop .sr-menu a .desc{display:block;font-size:12px;font-weight:500;color:#6a6f78;line-height:1.38;margin-top:3px}
.sr-burger{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.55);cursor:pointer;font-size:19px;line-height:1;color:#5a3410;background:rgba(255,249,239,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(90,45,10,.28);padding:8px 12px;border-radius:999px}
.sr-burger:hover{background:rgba(255,249,239,.92)}
.sr-nav{display:none}
.sr-nav.open{display:flex;flex-direction:column;align-items:stretch;position:absolute;right:18px;left:auto;top:calc(34% + 30px);z-index:30;background:rgba(255,249,239,.98);border:1px solid rgba(255,255,255,.6);border-radius:16px;padding:8px;gap:1px;min-width:210px;max-width:80vw;box-shadow:0 14px 32px rgba(90,45,10,.34)}
.sr-nav a,.sr-nav .sr-drop>span{font-size:14px;font-weight:500;color:#5a3410;text-decoration:none;cursor:pointer;letter-spacing:.01em}
.sr-nav.open>a,.sr-nav.open .sr-drop>span{display:block;padding:9px 12px;border-radius:10px}
.sr-nav.open>a:hover,.sr-nav.open .sr-drop:hover>span{background:rgba(122,46,10,.07);color:#7a2e0a}
.sr-drop{position:relative}
.sr-drop>span{user-select:none}
.sr-drop>span::after{content:" \25BE";font-size:8px;color:#9a6a2a}
.sr-nav.open .sr-menu{position:static;display:none;box-shadow:none;border:none;padding:2px 0 6px 14px;min-width:0}
.sr-nav.open .sr-drop.open>.sr-menu{display:block}
.sr-nav.open .sr-menu a{display:block;padding:7px 10px;border-radius:8px;font-size:13px;color:#0c0c0c;font-weight:500;text-decoration:none}
.sr-nav.open .sr-menu a:hover{background:#fbf3df;color:#7a2e0a}
@media(max-width:640px){.sr-slogan .col{font-size:16px}.sr-logo{left:16px;top:34%}.sr-logo img{height:50px}.sr-actions{right:12px;gap:8px}.sr-cta{padding:8px 13px;font-size:11px}.sr-cta-drop .sr-menu{min-width:240px;max-width:80vw}}