/* Human Energy Co theme
   Brand: near-black #212322 · warm grey #D7D2CB · orange #FF7F41 · purple #AD96DC · pink #FF8DA1 · teal #86C8BC
   Type: Neusa (headings) · Lora (body) · Pitch Sans (labels) */

:root {
    --ink: #212322;
    --ink-2: #2B2D2C;
    --ink-3: #2E302F;
    --rule: #3A3C3B;
    --mid: #6B6D6C;
    --dim: #A9A49D;
    --stone: #D7D2CB;
    --paper: #EDE9E3;
    --white: #FFFFFF;
    --orange: #FF7F41;
    --purple: #AD96DC;
    --purple-dark: #6A4FB0;
    --pink: #FF8DA1;
    --teal: #86C8BC;
    --teal-dark: #1E4A43;
    --accent: var(--orange);
    --font-head: var(--gh-font-heading, 'Neusa', 'Saira Condensed', 'Arial Narrow', sans-serif);
    --font-body: var(--gh-font-body, 'Lora', Georgia, serif);
    --font-mono: 'Pitch Sans', 'JetBrains Mono', ui-monospace, monospace;
}
.accent-purple { --accent: var(--purple); }
.accent-pink { --accent: var(--pink); }
.accent-teal { --accent: var(--teal); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--font-body); font-size: 18px; line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--accent); }
a:hover { color: #FFA57A; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Type helpers */
.head { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.005em; }
.mono { font-family: var(--font-mono); }
.eyebrow { margin: 0; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.lead { margin: 0; font-size: 20px; }
.small { font-size: 13px; margin: 0; }
.quiet { color: var(--stone); }
.dim { color: var(--dim); }
.white { color: var(--white); }
.accent { color: var(--accent); }
.orange { color: var(--orange); } .purple { color: var(--purple); } .pink { color: var(--pink); } .teal { color: var(--teal); }
.purple-dark { color: var(--purple-dark); } .teal-dark { color: var(--teal-dark); }
.bg-orange { background: var(--orange); } .bg-purple { background: var(--purple); } .bg-teal { background: var(--teal); }

h1, h2, h3 { margin: 0; line-height: 1; }
.h1-page { font-size: clamp(44px, 6vw, 88px); line-height: 0.95; }
.h2 { font-size: clamp(36px, 4.5vw, 60px); max-width: 18em; }
.h2-big { font-size: clamp(40px, 5vw, 68px); line-height: 0.98; }
.h2-contact { font-size: clamp(34px, 4vw, 48px); max-width: 16em; }
.h3 { font-size: 28px; font-weight: 700; line-height: 1.05; }
.h3-door { font-size: 38px; font-weight: 700; line-height: 1.05; }
.h3-step { font-size: 32px; font-weight: 700; }
.h3-offer { font-size: 44px; }

/* Layout */
.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.wrap-text { max-width: 760px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.section { padding-top: 104px; padding-bottom: 104px; }
.section-tight { padding-top: 0; padding-bottom: 104px; }
.band { padding: 104px 0; }
.band-light { background: var(--stone); color: var(--ink); }
.band-dark2 { background: var(--ink-2); }
.narrow { max-width: 46em; }
.stack-12, .stack-16, .stack-20, .stack-40, .stack-48, .stack-56 { display: flex; flex-direction: column; }
.stack-12 { gap: 12px; } .stack-16 { gap: 16px; } .stack-20 { gap: 20px; } .stack-40 { gap: 40px; } .stack-48 { gap: 48px; } .stack-56 { gap: 56px; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: end; }
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 20px; }
.cols-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.cols-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 20px; }
.gap-20 { gap: 20px; } .gap-32 { gap: 32px; } .gap-40 { gap: 40px; } .gap-56 { gap: 56px; }

/* Buttons */
.buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px; font-family: var(--font-mono); font-size: 15px; text-decoration: none; border: 1px solid transparent; cursor: pointer; align-self: flex-start; }
.btn-small { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn-accent { background: var(--accent); color: var(--ink); }
.btn-accent:hover { color: var(--ink); filter: brightness(1.08); }
.btn-ghost { border-color: var(--mid); color: var(--paper); }
.btn-ghost:hover { color: var(--white); border-color: var(--stone); }
.btn-purple { background: var(--purple); color: var(--ink); }
.btn-purple:hover { color: var(--ink); filter: brightness(1.08); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { color: var(--white); background: #000; }
.btn-outline-purple { border-color: var(--purple); color: var(--white); }
.btn-outline-purple:hover { color: var(--white); background: rgba(173, 150, 220, 0.15); }
.link-accent { color: var(--accent); text-decoration: none; font-size: 15px; }

/* Header */
.site-header { border-bottom: 1px solid var(--rule); }
.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.nav-logo img { height: 64px; width: auto; display: block; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; font-size: 14px; }
.nav-links a:not(.btn) { color: var(--stone); text-decoration: none; }
.nav-links a:not(.btn):hover, .nav-links a.is-current { color: var(--white); }

/* Hero */
.hero { padding-top: 96px; padding-bottom: 88px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 64px; align-items: center; }
.hero-text { display: flex; flex-direction: column; gap: 28px; }
.hero-title { font-size: clamp(44px, 5.2vw, 76px); line-height: 0.98; color: var(--white); }
.hero-sub { display: flex; flex-direction: column; gap: 12px; border-left: 3px solid var(--rule); padding-left: 20px; }
.hero-subhead { margin: 0; font-weight: 700; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; color: var(--white); }

/* Energy grid */
.grid-figure { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.energy-grid { display: grid; grid-template-columns: 28px repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)) 28px; gap: 8px; aspect-ratio: 1 / 1; max-width: 520px; width: 100%; }
.axis-y { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; }
.axis-y span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.axis-x { grid-column: 2 / 4; display: flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.quad { background: var(--ink-3); border-radius: 6px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.quad-flow { background: var(--orange); color: var(--ink); }
.quad-name { font-weight: 700; font-size: 26px; text-transform: uppercase; }
.quad-line { font-size: 15px; color: var(--dim); }
.quad-stack { display: flex; flex-direction: column; gap: 10px; }
.quad-stack > span:first-child { display: flex; flex-direction: column; }
.quad-big { font-size: 56px; line-height: 1; }
.quad-line-dark { font-size: 15px; font-weight: 500; }
.grid-figure figcaption { font-size: 16px; font-style: italic; max-width: 520px; color: var(--dim); }
.grid-cta { display: block; margin-top: 12px; font-style: normal; font-size: 14px; text-decoration: none; }

/* Doors */
.door { background: var(--white); border-radius: 8px; padding: 40px; display: flex; flex-direction: column; gap: 18px; }
.door-bar { width: 48px; height: 6px; border-radius: 3px; }
.door-sub { margin: -6px 0 0; font-size: 14px; color: #4A4C4B; }
.door-body { margin: 0; font-size: 20px; }
.door-foot { margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--stone); font-size: 14px; color: #4A4C4B; }
.door-foot strong { color: var(--ink); }

/* Thread */
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pill { padding: 14px 22px; border-radius: 999px; font-size: 15px; border: 1px solid; }
.pill-fill { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.pill-pink { border-color: var(--pink); color: var(--pink); }
.pill-purple { border-color: var(--purple); color: var(--purple); }
.pill-teal { border-color: var(--teal); color: var(--teal); }
.pill-grey { border-color: var(--stone); color: var(--white); }
.arrow { color: var(--mid); font-size: 22px; }
.ruled { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--rule); padding-top: 24px; }
.ruled p { margin: 0; }
.big-quote { margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.big-quote p { margin: 0; font-style: italic; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.2; color: var(--pink); max-width: 22em; }
.big-quote footer { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }

/* Ideas */
.idea { background: var(--white); border-radius: 8px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.idea p { margin: 0; font-size: 17px; }
.bt-orange { border-top: 4px solid var(--orange); } .bt-purple { border-top: 4px solid var(--purple); } .bt-pink { border-top: 4px solid var(--pink); } .bt-teal { border-top: 4px solid var(--teal); }
.closing-line { margin: 0; font-size: 22px; font-style: italic; max-width: 36em; }

/* Steps */
.step { background: var(--ink); border: 1px solid var(--rule); border-radius: 8px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.step p { margin: 0; }
.step-num { font-size: 56px; line-height: 1; }
.step-proof { padding-top: 14px; border-top: 1px solid var(--rule); color: var(--stone); margin-top: auto; }

/* Offers */
.offer { border-radius: 8px; padding: 36px; display: flex; flex-direction: column; gap: 14px; }
.offer p { margin: 0; }
.offer-teal { background: var(--teal); color: var(--ink); }
.offer-dark { background: var(--ink-3); border-top: 4px solid var(--purple); }
.offer-tag { font-size: 20px; font-style: italic; }

/* Forms (Ghost members) */
.signup { display: flex; flex-wrap: wrap; gap: 10px; }
.signup label { width: 100%; font-size: 13px; color: var(--dim); }
.signup input[type="email"] { flex: 1 1 220px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--mid); background: var(--ink-3); color: var(--white); font-family: inherit; font-size: 15px; }
.signup .btn { align-self: auto; }
.signup-light label { color: var(--teal-dark); }
.signup-light input[type="email"] { background: var(--white); color: var(--ink); border-color: var(--teal-dark); }
.form-message { display: none; width: 100%; margin: 0; font-size: 13px; }
.signup.success .form-success { display: block; }
.signup.error .form-error { display: block; }
.signup.loading .btn { opacity: 0.6; pointer-events: none; }

/* Case studies */
.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.case-card { background: var(--ink-2); border: 1px solid var(--rule); border-radius: 8px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.case-card[hidden] { display: none; }
.case-card h3 { font-size: 30px; font-weight: 700; line-height: 1.05; color: var(--white); }
.case-card h3 a { color: inherit; text-decoration: none; }
.case-line { margin: 0; font-size: 17px; color: var(--stone); }
.case-more { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 14px; text-decoration: none; }
.clients { line-height: 1.9; font-size: 14px; }
.quote { margin: 0; display: flex; flex-direction: column; gap: 16px; padding-top: 24px; }
.quote p { margin: 0; font-size: 22px; font-style: italic; line-height: 1.45; color: var(--white); }
.quote footer { font-size: 13px; color: var(--dim); }

/* Kind-of-work colours: tag slug → colour */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; text-decoration: none; background: var(--stone); color: var(--ink); }
.chip:hover { color: var(--ink); filter: brightness(1.08); }
.chip-advisory { background: var(--orange); }
.chip-exploration { background: var(--purple); }
.chip-venturing { background: var(--teal); }
.chip-learning-and-leadership { background: var(--pink); }
.chip-convening { background: var(--stone); }

/* Work page */
.work-head { padding-top: 88px; padding-bottom: 40px; }
.work-filters { padding-bottom: 40px; display: flex; flex-direction: column; gap: 16px; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.filter { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; min-height: 44px; padding: 14px 16px; border-radius: 8px; cursor: pointer; font-family: inherit; background: var(--ink-2); border: 1px solid var(--rule); color: var(--white); }
.filter.is-active { background: var(--rule); border-color: var(--white); }
.filter-name { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.filter-hint { font-size: 12px; line-height: 1.45; color: var(--dim); }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.dot-all { background: var(--white); }
.dot-advisory { background: var(--orange); }
.dot-exploration { background: var(--purple); }
.dot-venturing { background: var(--teal); }
.dot-learning-and-leadership { background: var(--pink); }
.dot-convening { background: var(--stone); }
.work-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }

/* Case study and letter posts */
.case-head, .post-head { padding-top: 88px; padding-bottom: 40px; }
.case-image { margin: 0 auto 48px; }
.case-image img { width: 100%; border-radius: 8px; }
.post-list { display: flex; flex-direction: column; }
.post-row { padding: 28px 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; }
.post-row a { color: inherit; text-decoration: none; }
.post-row p { margin: 0; }
.pagination { display: flex; gap: 24px; align-items: center; padding-top: 32px; font-size: 14px; }

/* Essay */
.essay-head { padding-top: 96px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 24px; }
.essay-title { font-size: clamp(48px, 7vw, 104px); line-height: 0.95; color: var(--white); max-width: 12em; }
.essay-standfirst { margin: 0; font-size: 23px; font-style: italic; color: var(--stone); max-width: 34em; }
.essay-body { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; padding-bottom: 96px; }
.essay-toc { flex: 1 1 220px; max-width: 280px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; border-top: 1px solid var(--rule); padding-top: 20px; }
.essay-toc a { color: var(--stone); text-decoration: none; }
.essay-toc a:hover { color: var(--white); }
.toc-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.essay-content { flex: 999 1 560px; min-width: 0; max-width: 720px; font-size: 19px; line-height: 1.7; }

/* Ghost editor content */
.gh-content > * + * { margin-top: 1.1em; }
.gh-content h2 { font-family: var(--font-head); font-weight: 800; font-size: 48px; line-height: 1; color: var(--white); margin-top: 2em; }
.gh-content h3 { font-family: var(--font-head); font-weight: 700; font-size: 32px; line-height: 1.1; color: var(--white); margin-top: 1.6em; }
.gh-content h4 { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-top: 2.4em; }
.gh-content p, .gh-content li { color: var(--paper); }
.gh-content blockquote { margin-left: 0; padding-left: 24px; border-left: 3px solid var(--accent); font-size: 24px; font-style: italic; line-height: 1.45; color: var(--white); }
.gh-content blockquote.kg-blockquote-alt { border-left: 0; padding: 0; text-align: center; font-size: 28px; color: var(--pink); }
.gh-content hr { border: 0; border-top: 1px solid var(--rule); margin: 3em 0; }
.gh-content figure { margin: 2em 0; }
.gh-content figcaption { font-family: var(--font-mono); font-size: 13px; color: var(--dim); margin-top: 10px; }
.gh-content code { font-family: var(--font-mono); font-size: 0.9em; }
.kg-width-wide { position: relative; width: min(1040px, 100vw - 48px); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.kg-width-full { position: relative; width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); }
.kg-width-full img { border-radius: 0; }
.kg-image { display: block; margin: 0 auto; border-radius: 8px; }
.kg-callout-card { padding: 20px 24px; border-radius: 8px; background: var(--ink-2); }
.kg-bookmark-card a { color: var(--paper); }

/* Essay components (used via HTML cards) */
.heco-grid { background: var(--ink-2); border: 1px solid var(--rule); border-radius: 8px; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.heco-grid-title { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 30px; line-height: 1.1; color: var(--white); }
.heco-grid-quads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-family: var(--font-mono); font-size: 14px; }
.heco-grid-quad { background: var(--ink); border-radius: 6px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.heco-grid-quad label { display: flex; justify-content: space-between; color: var(--white); }
.heco-grid-quad input { width: 100%; }
.heco-grid-quad small { font-size: 12px; color: var(--dim); }
.heco-grid-result { display: flex; flex-wrap: wrap; gap: 24px; align-items: baseline; border-top: 1px solid var(--rule); padding-top: 20px; }
.heco-grid-share { font-family: var(--font-head); font-weight: 800; font-size: 56px; line-height: 1; color: var(--orange); }
.heco-grid-verdict { flex: 1 1 260px; font-size: 17px; color: var(--stone); }
.heco-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 14px; }
.heco-chain .pill { padding: 10px 18px; font-size: 14px; }
.heco-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.heco-stat { background: var(--ink-2); border-radius: 8px; padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.heco-stat b { font-family: var(--font-head); font-weight: 800; font-size: 56px; line-height: 1; }
.heco-stat span { font-size: 16px; color: var(--stone); }
.heco-loops { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.heco-loop { background: var(--ink-2); border-radius: 8px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.heco-loop-vicious { border-top: 4px solid var(--pink); }
.heco-loop-virtuous { border-top: 4px solid var(--teal); }
.heco-loop-label { margin: 0 0 6px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.heco-loop-step { border: 1px solid var(--mid); border-radius: 6px; padding: 12px 14px; font-size: 16px; line-height: 1.45; }
.heco-loop-step strong { color: var(--white); }
.heco-loop-step span { color: var(--dim); }
.heco-loop-arrow { text-align: center; color: var(--mid); font-family: var(--font-mono); font-size: 14px; }
.heco-loop-outcomes { margin-top: 8px; border-top: 1px solid var(--rule); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--stone); }
.heco-loop-outcomes .measured { border-left: 2px solid currentColor; padding-left: 10px; }
.heco-loop-outcomes .reading { border-left: 2px dashed currentColor; padding-left: 10px; }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); }
.letter { padding-top: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.letter-text { display: flex; flex-direction: column; gap: 6px; max-width: 32em; }
.letter-text p { margin: 0; }
.letter-title { font-weight: 700; font-size: 28px; color: var(--white); }
.letter .signup { flex: 0 1 460px; }
.footer-base { padding-top: 56px; padding-bottom: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; font-size: 13px; color: var(--dim); }
.footer-marque { width: 120px; height: auto; display: block; }
.footer-meta { display: flex; flex-direction: column; gap: 4px; text-align: right; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-end; margin-bottom: 8px; }
.footer-links a { color: var(--stone); text-decoration: none; }

@media (max-width: 640px) {
    body { font-size: 17px; }
    .section, .band { padding-top: 72px; padding-bottom: 72px; }
    .hero { padding-top: 56px; gap: 40px; }
    .door { padding: 28px; }
    .footer-meta { text-align: left; }
    .footer-links { justify-content: flex-start; }
    .heco-grid-quads, .heco-stats { grid-template-columns: 1fr; }
}

/* Innovation formula (homepage) */
.formula-box { background: var(--white); border-radius: 8px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.formula-box p { margin: 0; font-size: 17px; }
.formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.formula span { border: 1px solid var(--ink); padding: 8px 14px; border-radius: 999px; }
.formula i { font-style: normal; }
.formula .formula-result { background: var(--orange); border-color: var(--orange); }