/* Works web system: the approved brand deck (Nov 3, 2026) adapted for the web.
   Source: frontend docs/review/brand-deck/templates/deck.css and SPEC.md.
   White ground, forest #244432 the only green, forest tints for lines and quiet text only.
   Satoshi only. Two weights: 400 and 700. Spacing on 8 px steps.
   Web type scale: the deck's five steps 96 / 60 / 36 / 28 / 22 at 1024 px and up;
   below 1024 px every step moves down one: 48 / 36 / 28 / 22 / 18. Nothing in between.
   Seven layouts: Cover, Statement, Split, Three cards, Table, Full-bleed, Close. */

@font-face {
    font-family: 'Satoshi';
    src: url('fonts/Satoshi-Variable.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
}

:root {
    /* One source: these names and values are works-os/frontend src/design/tokens.css
       (WOR-39, Nov 4 2026). Change them there first; tests in both repos fail on drift. */
    --works-forest: #244432;
    --works-white: #FFFFFF;
    --type-96: 96px; --type-60: 60px; --type-36: 36px; --type-28: 28px; --type-22: 22px;
    --forest: var(--works-forest);
    --white: var(--works-white);
    --quiet: #597163;   /* forest 76%: captions, sources. 5.3:1 on white */
    --line-2: #A7B4AD;  /* forest 40%: outlines, chart rest */
    --line: #DCE1DE;    /* forest 16%: hairlines */
    --wash: #F4F6F5;    /* forest 5%: tint panels */
    --shadow: 0 24px 48px -32px rgba(36, 68, 50, 0.4);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --s-display: 48px; --s-title: var(--type-36); --s-card: var(--type-28); --s-lead: var(--type-22); --s-body: 18px; /* 48 and 18: the phone step-down, pending Winston */
    --gutter: 16px; --section: 64px; --page: 1440px;
}
@media (min-width: 1024px) {
    :root { --s-display: var(--type-96); --s-title: var(--type-60); --s-card: var(--type-36); --s-lead: var(--type-28); --s-body: var(--type-22); --gutter: 64px; --section: 128px; }
}
@media (min-width: 640px) and (max-width: 1023px) { :root { --gutter: 32px; --section: 96px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
html, body { margin: 0; padding: 0; background: var(--white); }
body { font-family: 'Satoshi', sans-serif; color: var(--forest); font-size: var(--s-body); font-weight: 400; line-height: 1.5; font-kerning: normal; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
/* Form controls inherit Satoshi and forest instead of browser defaults. */
button, input, select, textarea { font-family: inherit; font-size: 18px; color: var(--forest); border-color: var(--line-2); }
a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 4px; }
b, strong, th { font-weight: 700; }
.num, .big-num, td { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; border-radius: 8px; }
.skip { position: absolute; left: 16px; top: -64px; background: var(--forest); color: var(--white); padding: 8px 16px; border-radius: 8px; z-index: 30; }
.skip:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
    a, button, .card { transition: background-color 240ms var(--ease), color 240ms var(--ease), box-shadow 240ms var(--ease), transform 240ms var(--ease); }
}

/* ---- Type scale ---- */
.t-display { font-size: var(--s-display); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.t-title   { font-size: var(--s-title); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.t-card    { font-size: var(--s-card); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.t-lead    { font-size: var(--s-lead); font-weight: 400; line-height: 1.45; max-width: 60ch; text-wrap: pretty; }
.t-body    { font-size: var(--s-body); font-weight: 400; line-height: 1.55; max-width: 64ch; text-wrap: pretty; }
.t-cap     { font-size: var(--s-body); font-weight: 400; line-height: 1.5; color: var(--quiet); }
.t-label   { font-size: var(--s-body); font-weight: 700; line-height: 1.3; }
.quiet { color: var(--quiet); }
.on-forest, .on-forest a, .on-forest .t-cap, .on-forest .quiet { color: var(--white); }

/* ---- Page frame ---- */
.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section + .section { padding-top: 0; }
.stack { display: grid; gap: 24px; align-content: start; }
.stack-lg { display: grid; gap: 48px; align-content: start; }
.head { display: grid; gap: 24px; margin-bottom: 48px; max-width: 1040px; }
.head .t-lead { color: var(--quiet); }
.row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* Header */
.site-head { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.site-head .brand { display: inline-flex; flex: none; align-items: center; min-height: 48px; }
.site-head .brand img { width: 48px; max-width: none; height: auto; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 8px; align-items: center; }
.site-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; text-decoration: none; font-size: 18px; font-weight: 400; border-radius: 999px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--wash); }
.site-nav a[aria-current="page"] { font-weight: 700; }
.nav-toggle { display: none; margin-left: auto; min-height: 48px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--white); color: var(--forest); font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }
@media (max-width: 1023px) {
    .nav-toggle { display: inline-flex; align-items: center; }
    .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 24px; }
    .site-nav.open { display: block; }
    .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
    .site-nav a { padding: 0 16px; }
    .site-head .site-cta { display: none; }
}

/* Buttons: one style. Secondary paths are text links. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 32px; border-radius: 999px; background: var(--forest); color: var(--white); font: inherit; font-size: 18px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; }
.btn:hover { box-shadow: var(--shadow); }
.on-forest .btn, .btn.on-dark { background: var(--white); color: var(--forest); }
.link { display: inline-flex; align-items: center; min-height: 48px; font-size: 18px; font-weight: 700; }
.on-forest .link { color: var(--white); }

/* Cards and pieces */
.card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 40px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 639px) { .card { padding: 24px; } }
.card.forest { background: var(--forest); border-color: var(--forest); color: var(--white); }
.card.forest a, .card.forest .t-cap, .card.forest .quiet { color: var(--white); }
.card.wash { background: var(--wash); box-shadow: none; }
.card .push { margin-top: auto; }
.photo { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; background: var(--wash); }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 18px; font-weight: 700; align-self: flex-start; }
.on-forest .chip, .card.forest .chip { border-color: var(--white); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.big-num { font-size: var(--s-display); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.list { display: grid; gap: 24px; }
.list li { display: grid; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps { counter-reset: step; display: grid; gap: 24px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; }
.steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--line-2); font-weight: 700; }
.placeholder { display: grid; place-items: center; min-height: 320px; border: 2px dashed var(--line-2); border-radius: 12px; padding: 32px; text-align: center; color: var(--quiet); background: var(--white); }
.source { font-size: var(--s-body); color: var(--quiet); }
details.disclose { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
details.disclose summary { cursor: pointer; min-height: 56px; display: flex; align-items: center; font-weight: 700; list-style: none; }
details.disclose summary::-webkit-details-marker { display: none; }
details.disclose summary::after { content: '+'; margin-left: auto; font-weight: 400; }
details.disclose[open] summary::after { content: '\2212'; }
details.disclose > div { padding: 0 0 24px; display: grid; gap: 16px; }
.faq { display: grid; }

/* Grid children may shrink below their content, so nothing pushes the page sideways. */
.l-cover .wrap > *, .l-split .wrap > *, .cards > *, .pillars > *, .two > * { min-width: 0; }
.placeholder { overflow-wrap: anywhere; }

/* ---- Template 1: Cover ---- */
.l-cover .wrap { display: grid; gap: 48px; align-items: center; }
.l-cover .cover-media img, .l-cover .cover-media .placeholder { aspect-ratio: 4 / 3; }
.l-cover .cover-media .placeholder { min-height: 0; width: 100%; }
@media (min-width: 1024px) { .l-cover .wrap { grid-template-columns: 6fr 6fr; gap: 64px; } .l-cover .cover-media img { aspect-ratio: 7 / 6; } }

/* ---- Template 2: Statement ---- */
.l-statement .statement { max-width: 1200px; }
.l-statement .pillars { display: grid; gap: 32px; margin-top: 64px; }
@media (min-width: 1024px) { .l-statement .pillars { grid-template-columns: repeat(3, 1fr); } }

/* ---- Template 3: Split ---- */
.l-split .wrap { display: grid; gap: 48px; align-items: start; }
.l-split .split-media img { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
    .l-split .wrap { grid-template-columns: 5fr 7fr; gap: 64px; }
    .l-split.reverse .split-text { order: 2; }
    .l-split.reverse .wrap { grid-template-columns: 7fr 5fr; }
}

/* ---- Template 4: Three cards ---- */
.l-three .cards { display: grid; gap: 32px; }
@media (min-width: 768px) { .l-three .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .l-three .cards { grid-template-columns: repeat(3, 1fr); } }

/* ---- Template 5: Table or data ---- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data { width: 100%; border-collapse: collapse; min-width: 560px; }
.data caption { text-align: left; padding-bottom: 16px; color: var(--quiet); }
.data th { text-align: left; font-size: var(--s-body); padding: 0 24px 16px 0; border-bottom: 1px solid var(--line-2); vertical-align: bottom; }
.data td { font-size: var(--s-body); line-height: 1.4; padding: 16px 24px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.data td.q { color: var(--quiet); }
.data tr:last-child td { border-bottom: 0; }

/* ---- Template 6: Full-bleed photo ---- */
.l-bleed { position: relative; min-height: 640px; display: grid; align-items: center; }
.l-bleed > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.l-bleed .wrap { position: relative; padding-top: 64px; padding-bottom: 64px; }
.l-bleed .bleed-panel { background: var(--white); border-radius: 16px; padding: 40px; max-width: 760px; display: grid; gap: 24px; }
@media (max-width: 639px) { .l-bleed .bleed-panel { padding: 24px; } }

/* ---- Template 7: Close ---- */
.l-close .close-card { background: var(--forest); color: var(--white); border-radius: 16px; padding: 64px 40px; display: grid; gap: 32px; }
.l-close .close-card a:not(.btn) { color: var(--white); }
.l-close .close-card .btn, .card.forest .btn { background: var(--white); color: var(--forest); }
@media (min-width: 1024px) { .l-close .close-card { padding: 96px; grid-template-columns: 1fr auto; align-items: end; } }
.l-close .close-card .mark { width: 96px; }

/* Forms */
.form { display: grid; gap: 24px; max-width: 720px; }
.field { display: grid; gap: 8px; }
.field label, .field legend { font-weight: 700; font-size: 18px; }
.field .hint { font-size: 18px; color: var(--quiet); }
.field input, .field select, .field textarea { width: 100%; min-height: 56px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--white); color: var(--forest); font: inherit; font-size: 18px; }
.field textarea { min-height: 128px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--forest); outline-offset: 0; border-color: var(--forest); }
.field [aria-invalid="true"] { border-color: var(--forest); border-width: 2px; }
.field .error { font-weight: 700; font-size: 18px; }
.field .error:empty { display: none; }
.two { display: grid; gap: 24px; }
@media (min-width: 640px) { .two { grid-template-columns: 1fr 1fr; } }
.field label.consent, .consent { font-weight: 400; } .consent { display: grid; grid-template-columns: 24px 1fr; gap: 16px; align-items: start; font-size: 18px; line-height: 1.5; }
.consent input { width: 24px; height: 24px; margin: 0; accent-color: var(--forest); }
.form-note { font-size: 18px; color: var(--quiet); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; font: inherit; font-size: 18px; color: var(--forest); border: 0; background: var(--white); }

/* Footer */
.site-foot { border-top: 1px solid var(--line); padding: 64px 0 48px; margin-top: var(--section); font-size: 18px; }
.site-foot .cols { display: grid; gap: 40px; }
@media (min-width: 1024px) { .site-foot .cols { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-foot .lockup { width: 96px; }
.site-foot h2 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.site-foot ul { display: grid; gap: 0; }
.site-foot a { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; }
.site-foot .legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 16px; color: var(--quiet); }
.site-foot .eho { display: flex; gap: 16px; align-items: center; }
.site-foot .eho svg { width: 40px; height: 40px; flex: none; }

/* Cookie notice */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; max-width: 720px; margin: 0 auto; background: var(--white); border: 1px solid var(--line-2); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); display: grid; gap: 16px; font-size: 18px; }
.cookie[hidden] { display: none; }
.cookie .row button { min-height: 48px; }
.btn-quiet { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--white); color: var(--forest); border: 1px solid var(--line-2); font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }