:root {
    --ean-forest: #1f5138;
    --ean-forest-deep: #153828;
    --ean-moss: #6f8b52;
    --ean-sage: #dce8d2;
    --ean-cream: #fbf7ed;
    --ean-linen: #f4ead9;
    --ean-clay: #bf6f45;
    --ean-gold: #d8a243;
    --ean-ink: #1e241f;
    --ean-muted: #667063;
    --ean-line: rgba(31, 81, 56, 0.16);
    --ean-card: rgba(255, 252, 246, 0.86);
    --ean-shadow: 0 22px 60px rgba(31, 81, 56, 0.12);
    --ean-radius: 24px;
    --ean-container: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--ean-cream);
    color: var(--ean-ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.65;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 12% 10%, rgba(216, 162, 67, 0.16), transparent 28rem),
        radial-gradient(circle at 92% 0%, rgba(111, 139, 82, 0.16), transparent 32rem),
        linear-gradient(180deg, #fffaf0 0%, #f8f0e2 48%, #eef4e8 100%);
}
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { color: var(--ean-clay); }
img { height: auto; max-width: 100%; }
p { margin: 0; }
.container { margin-inline: auto; max-width: var(--ean-container); padding-inline: 24px; width: 100%; }
.narrow { max-width: 820px; }
.skip-link {
    background: var(--ean-forest-deep);
    color: #fff;
    left: 16px;
    padding: 10px 14px;
    position: absolute;
    top: -60px;
    z-index: 20;
}
.skip-link:focus { top: 16px; }
.site-header {
    backdrop-filter: blur(18px);
    background: rgba(251, 247, 237, 0.82);
    border-bottom: 1px solid var(--ean-line);
    position: sticky;
    top: 0;
    z-index: 10;
}
.header-inner { align-items: center; display: flex; gap: 24px; justify-content: space-between; min-height: 82px; }
.site-brand { align-items: center; display: inline-flex; gap: 12px; text-decoration: none; }
.brand-mark {
    align-items: center;
    background: var(--ean-forest);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 800;
    height: 42px;
    justify-content: center;
    letter-spacing: 0;
    width: 42px;
}
.site-brand strong { display: block; font-size: 0.98rem; line-height: 1.15; }
.site-brand em { color: var(--ean-muted); display: block; font-size: 0.78rem; font-style: normal; margin-top: 2px; }
.menu { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.menu a {
    border-radius: 999px;
    color: var(--ean-forest-deep);
    display: inline-flex;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 10px 14px;
    text-decoration: none;
}
.menu a:hover { background: rgba(31, 81, 56, 0.08); color: var(--ean-forest-deep); }
.hero-section { padding: 86px 0 62px; }
.hero-grid { align-items: center; display: grid; gap: 50px; grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr); }
.eyebrow {
    color: var(--ean-clay);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin: 0 0 14px;
    text-transform: uppercase;
}
h1, h2, h3 {
    color: var(--ean-forest-deep);
    font-family: Fraunces, Georgia, serif;
    letter-spacing: 0;
    line-height: 1.05;
    margin: 0;
}
h1 { font-size: clamp(2.55rem, 6vw, 5.75rem); max-width: 980px; }
h2 { font-size: clamp(2rem, 4vw, 3.7rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 2rem); }
.hero-lede { color: var(--ean-muted); font-size: 1.22rem; margin-top: 24px; max-width: 680px; }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    text-decoration: none;
}
.button.primary { background: var(--ean-forest); color: #fff; box-shadow: 0 12px 30px rgba(31, 81, 56, 0.18); }
.button.primary:hover { background: var(--ean-forest-deep); color: #fff; }
.button.secondary { background: rgba(255, 255, 255, 0.72); border-color: var(--ean-line); color: var(--ean-forest-deep); }
.button.secondary:hover { background: #fff; color: var(--ean-clay); }
.hero-panel {
    background: linear-gradient(145deg, rgba(255,255,255,0.78), rgba(220,232,210,0.72));
    border: 1px solid rgba(31, 81, 56, 0.14);
    border-radius: 34px;
    box-shadow: var(--ean-shadow);
    display: grid;
    gap: 14px;
    padding: 18px;
}
.portrait-shape {
    align-items: end;
    aspect-ratio: 4 / 3;
    background:
        linear-gradient(145deg, rgba(31,81,56,0.08), rgba(191,111,69,0.18)),
        repeating-linear-gradient(135deg, rgba(31,81,56,0.08) 0 1px, transparent 1px 12px);
    border-radius: 28px;
    display: flex;
    justify-content: flex-start;
    overflow: hidden;
    padding: 24px;
}
.portrait-shape span {
    background: var(--ean-forest-deep);
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
    padding: 10px 14px;
}
.hero-stat {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(31, 81, 56, 0.12);
    border-radius: 20px;
    padding: 18px;
}
.hero-stat strong { color: var(--ean-forest-deep); display: block; font-size: 1rem; }
.hero-stat span { color: var(--ean-muted); display: block; font-size: 0.94rem; margin-top: 4px; }
.section { padding: 76px 0; }
.tinted-section { background: rgba(220, 232, 210, 0.38); border-block: 1px solid var(--ean-line); }
.section-heading { margin-bottom: 34px; max-width: 780px; }
.inline-heading { align-items: end; display: flex; justify-content: space-between; max-width: none; }
.split-layout { align-items: start; display: grid; gap: 52px; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.split-layout.reverse { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.prose-large { color: var(--ean-muted); display: grid; font-size: 1.1rem; gap: 18px; }
.card-grid { display: grid; gap: 18px; }
.card-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-card, .project-card, .soft-card, .editor-empty-card {
    background: var(--ean-card);
    border: 1px solid var(--ean-line);
    border-radius: var(--ean-radius);
    box-shadow: 0 14px 38px rgba(31, 81, 56, 0.08);
    padding: 28px;
}
.feature-card, .project-card { min-height: 250px; }
.feature-card p, .project-card p, .soft-card p, .editor-empty-card p { color: var(--ean-muted); margin-top: 14px; }
.feature-card h2 { font-size: 1.4rem; }
.feature-card h2 a { text-decoration: none; }
.card-icon {
    background: var(--ean-forest);
    border-radius: 999px;
    display: block;
    height: 16px;
    margin-bottom: 36px;
    width: 48px;
}
.card-icon.clay { background: var(--ean-clay); }
.card-icon.gold { background: var(--ean-gold); }
.card-kicker { color: var(--ean-clay) !important; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.emphasis-card { background: var(--ean-forest-deep); }
.emphasis-card h3, .emphasis-card .card-kicker { color: #fff !important; }
.emphasis-card h3 { margin-top: 14px; }
.text-link { color: var(--ean-forest); font-weight: 800; text-decoration: none; }
.text-link:hover { color: var(--ean-clay); }
.impact-band { background: var(--ean-forest-deep); color: #fff; }
.impact-band h2, .impact-band .eyebrow { color: #fff; }
.impact-grid { align-items: start; display: grid; gap: 22px; grid-template-columns: 1.2fr repeat(3, 1fr); }
.metric { border-left: 1px solid rgba(255,255,255,0.22); padding-left: 22px; }
.metric strong { display: block; font-size: 1.18rem; }
.metric span { color: rgba(255,255,255,0.76); display: block; margin-top: 8px; }
.final-cta { padding-bottom: 96px; }
.cta-card {
    background: linear-gradient(135deg, rgba(31, 81, 56, 0.94), rgba(111, 139, 82, 0.9));
    border-radius: 34px;
    color: #fff;
    padding-block: 52px;
    text-align: center;
}
.cta-card h2 { color: #fff; margin-inline: auto; max-width: 780px; }
.cta-card .button { margin-top: 28px; }
.cta-card .button.primary { background: #fff; color: var(--ean-forest-deep); }
.page-hero { padding: 76px 0 54px; }
.content-page { padding-bottom: 76px; }
.content-page > * { margin-block: 0 24px; }
.content-page h2, .content-page h3 { margin-top: 42px; }
.content-page .wp-block-group, .wp-section {
    border-radius: var(--ean-radius);
    margin-block: 28px;
    padding: 30px;
}
.editor-empty-card { margin-bottom: 40px; }
.single-post .content-page { font-size: 1.08rem; }
.site-footer {
    background: #172f24;
    color: rgba(255,255,255,0.78);
    padding: 56px 0 28px;
}
.site-footer .site-brand strong, .site-footer .site-brand em { color: #fff; }
.footer-grid { display: grid; gap: 42px; grid-template-columns: 1.1fr 0.9fr; }
.footer-grid p { margin-top: 18px; max-width: 520px; }
.footer-nav .menu { justify-content: flex-end; }
.footer-nav .menu a { color: rgba(255,255,255,0.84); }
.footer-nav .menu a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; margin-top: 42px; padding-top: 22px; }
@media (max-width: 900px) {
    .header-inner, .footer-bottom { align-items: flex-start; flex-direction: column; }
    .hero-grid, .split-layout, .split-layout.reverse, .impact-grid, .footer-grid { grid-template-columns: 1fr; }
    .card-grid.three { grid-template-columns: 1fr; }
    .inline-heading { align-items: start; flex-direction: column; gap: 16px; }
    .footer-nav .menu { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .container { padding-inline: 18px; }
    .hero-section { padding-top: 54px; }
    h1 { font-size: 2.55rem; }
    .section { padding: 54px 0; }
    .feature-card, .project-card, .soft-card { padding: 22px; }
    .menu { gap: 2px; }
    .menu a { padding: 8px 10px; }
}
