/* ─────────────────────────────────────────────────────────────
COCO — Warm Dark theme
The "marketing kit" aesthetic, codified: a warm near-black canvas,
cream type, gold eyebrows, and brand-colour blocks with a faint
dot-field. Pairs with colors_and_type.css (brand tokens + Figtree).
Usage:
…
───────────────────────────────────────────────────────────── */
.dk {
/* ── Surfaces (warm, brown-black) ── */
--dk-bg: #20160d; /* page canvas */
--dk-bg-2: #2b2015; /* raised card / panel */
--dk-bg-3: #34271a; /* hover / nested */
--dk-ink: #18100a; /* deepest wells, footers */
/* ── Lines ── */
--dk-border: rgba(253, 248, 240, 0.10);
--dk-border-strong: rgba(253, 248, 240, 0.20);
/* ── Text (cream) ── */
--dk-text: #f6efe3;
--dk-muted: rgba(246, 239, 227, 0.62);
--dk-faint: rgba(246, 239, 227, 0.40);
/* ── Accent ── */
--dk-accent: var(--sand, #f2cc7c); /* gold eyebrows / hairline highlights */
/* dot-field colour helpers */
--dot-cream: rgba(246, 239, 227, 0.10);
--dot-white: rgba(255, 255, 255, 0.10);
--dot-green: rgba(45, 122, 79, 0.12);
background: var(--dk-bg);
color: var(--dk-text);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
}
body.dk { margin: 0; }
/* ── Layout ───────────────────────────────────────────────── */
.dk .container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.dk .container.narrow { max-width: 880px; }
.dk section.band { padding: 112px 0; position: relative; overflow: hidden; }
.dk section.band.tight { padding: 80px 0; }
/* Coloured emphasis bands */
.dk .band.green { background: var(--green); color: #fff; }
.dk .band.petrol { background: var(--petrol); color: #fff; }
.dk .band.terra { background: var(--terracotta); color: #fff; }
.dk .band.olive { background: var(--olive); color: #fff; }
.dk .band.ink { background: var(--dk-ink); }
.dk .band.raised { background: var(--dk-bg-2); }
/* Cream contrast band (the light break) */
.dk .band.cream { background: var(--bg); color: var(--text); }
.dk .band.cream .eyebrow { color: var(--green); }
.dk .band.cream h2, .dk .band.cream h1, .dk .band.cream h3 { color: var(--text); }
.dk .band.cream .lead { color: var(--text-muted); }
.dk .band.cream .card { background: var(--surface); border-color: var(--border); }
.dk .band.cream .rule { background: var(--border); }
/* ── Dot-field texture ────────────────────────────────────── */
.dk .dotfield { position: absolute; inset: 0; pointer-events: none; z-index: 0;
background-image: radial-gradient(var(--dot-cream) 1.4px, transparent 1.6px);
background-size: 26px 26px; }
.dk .dotfield.white { background-image: radial-gradient(var(--dot-white) 1.4px, transparent 1.6px); }
.dk .dotfield.green { background-image: radial-gradient(var(--dot-green) 1.4px, transparent 1.6px); }
.dk .dotfield.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent 52%, #000); mask-image: linear-gradient(90deg, transparent 52%, #000); }
.dk .dotfield.fade-tr { -webkit-mask-image: radial-gradient(120% 120% at 100% 0, #000, transparent 62%); mask-image: radial-gradient(120% 120% at 100% 0, #000, transparent 62%); }
.dk .dotfield.fade-b { -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000); mask-image: linear-gradient(180deg, transparent 30%, #000); }
.dk .band > .container { position: relative; z-index: 1; }
/* ── Type ─────────────────────────────────────────────────── */
.dk .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dk-accent); margin: 0 0 18px; }
.dk h1, .dk .h1 { font-size: clamp(44px, 6vw, 84px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; margin: 0; text-wrap: balance; }
.dk h2, .dk .h2 { font-size: clamp(32px, 4vw, 54px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; margin: 0; text-wrap: balance; }
.dk h3, .dk .h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
.dk .lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: var(--dk-muted); margin: 0; max-width: 56ch; }
.dk .lead.center { margin-left: auto; margin-right: auto; }
.dk .em-accent { color: var(--dk-accent); }
.dk .em-green { color: var(--green); }
.dk .rule { width: 84px; height: 4px; border-radius: 4px; background: var(--dk-accent); margin: 0 0 26px; }
.dk .kicker-num { font-family: var(--font-mono); font-size: 14px; color: var(--dk-accent); }
/* ── Buttons ──────────────────────────────────────────────── */
.dk .btn { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
padding: 13px 24px; border-radius: 12px; border: 1px solid transparent; text-decoration: none; cursor: pointer;
transition: transform .14s ease, background .14s ease, border-color .14s ease; white-space: nowrap; }
.dk .btn:hover { transform: translateY(-2px); }
.dk .btn-primary { background: var(--green); color: #fff; }
.dk .btn-primary:hover { background: var(--green-dark, #245f3e); }
.dk .btn-accent { background: var(--dk-accent); color: var(--text); }
.dk .btn-ghost { background: transparent; color: var(--dk-text); border-color: var(--dk-border-strong); }
.dk .btn-ghost:hover { border-color: var(--dk-accent); }
.dk .band.cream .btn-ghost { color: var(--text); border-color: var(--border); }
.dk .btn-lg { font-size: 16px; padding: 16px 30px; }
/* ── Lockup / mark ────────────────────────────────────────── */
.dk .lockup { display: inline-flex; align-items: center; gap: 14px; }
.dk .lockup .mk { display: block; flex-shrink: 0; width: 36px; height: 36px; }
.dk .lockup .wm { font-weight: 600; font-size: 40px; letter-spacing: -0.02em; line-height: 1; transform: translateY(-0.06em); color: currentColor; }
/* ── Cards ────────────────────────────────────────────────── */
.dk .card { background: var(--dk-bg-2); border: 1px solid var(--dk-border); border-radius: 18px; padding: 30px;
transition: transform .16s ease, border-color .16s ease; }
.dk .card.hover:hover { transform: translateY(-4px); border-color: var(--dk-border-strong); }
.dk .card .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); display: inline-block; }
.dk .card p { color: var(--dk-muted); line-height: 1.6; margin: 10px 0 0; font-size: 15px; }
.dk .grid { display: grid; gap: 20px; }
.dk .grid.c2 { grid-template-columns: repeat(2, 1fr); }
.dk .grid.c3 { grid-template-columns: repeat(3, 1fr); }
.dk .grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .dk .grid.c3, .dk .grid.c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dk .grid.c2, .dk .grid.c3, .dk .grid.c4 { grid-template-columns: 1fr; } }
/* ── Stats ────────────────────────────────────────────────── */
.dk .stat .n { font-size: clamp(48px, 6vw, 84px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; color: var(--dk-accent); }
.dk .band.green .stat .n, .dk .band.petrol .stat .n, .dk .band.terra .stat .n { color: #fff; }
.dk .stat .l { font-size: 15px; line-height: 1.5; color: var(--dk-muted); margin-top: 12px; max-width: 26ch; }
.dk .band.green .stat .l, .dk .band.petrol .stat .l { color: rgba(255,255,255,0.85); }
/* ── Pills / chips ────────────────────────────────────────── */
.dk .pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase; padding: 7px 14px; border-radius: 100px; border: 1px solid var(--dk-border-strong); color: var(--dk-muted); }
.dk .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
/* ── Nav ──────────────────────────────────────────────────── */
.dk .nav { position: sticky; top: 0; z-index: 50; background: rgba(32, 22, 13, 0.82); backdrop-filter: blur(14px);
border-bottom: 1px solid var(--dk-border); }
.dk .nav .row { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.dk .nav .links { display: flex; align-items: center; gap: 30px; }
.dk .nav .links a { color: var(--dk-muted); text-decoration: none; font-size: 15px; font-weight: 500; transition: color .14s ease; }
.dk .nav .links a:hover { color: var(--dk-text); }
.dk .nav .lockup .wm { font-size: 30px; }
.dk .nav .lockup .mk { width: 28px; height: 28px; }
@media (max-width: 720px) { .dk .nav .links a:not(.btn) { display: none; } }
/* ── Footer ───────────────────────────────────────────────── */
.dk .foot { background: var(--dk-ink); padding: 64px 0 40px; }
.dk .foot .cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--dk-border); }
.dk .foot .col h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dk-accent); margin: 0 0 16px; }
.dk .foot .col a { display: block; color: var(--dk-muted); text-decoration: none; font-size: 14px; margin-bottom: 10px; }
.dk .foot .col a:hover { color: var(--dk-text); }
.dk .foot .fine { display: flex; justify-content: space-between; padding-top: 26px; font-size: 13px; color: var(--dk-faint); }
@media (max-width: 720px) { .dk .foot .cols { grid-template-columns: 1fr 1fr; } }
/* ── Reveal hook (kept as a no-op so markup stays valid; content always visible) ── */
.dk .reveal { opacity: 1; }