/* =============================================================
   Sway for Future — Purpose-Driven Impact VC Design
   ============================================================= */

:root {
    --forest:      #0d3320;
    --forest-mid:  #0f3d26;
    --forest-light:#14532d;
    --green:       #1a7a4a;
    --green-light: #22a05e;
    --green-dim:   rgba(26,122,74,0.12);
    --green-border:rgba(26,122,74,0.35);
    --amber:       #e8a030;
    --amber-light: #f0b850;
    --amber-dark:  #c98020;
    --amber-bg:    #fdf3e3;
    --white:       #ffffff;
    --off-white:   #f8f9f7;
    --light-grey:  #f0f2ee;
    --text-dark:   #1a2318;
    --text-body:   #364832;
    --text-muted:  #6b7a65;
    --border-light:rgba(0,0,0,0.1);
    --border-green:rgba(26,122,74,0.2);
    --serif:       Georgia,'Times New Roman',Times,serif;
    --sans:        'Segoe UI','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ----------------------------------------------------------------
   BASE
---------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }

body {
    font-family: var(--sans);
    background-color: var(--white);
    color: var(--text-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--green); text-decoration: none; transition: color .2s; }
a:hover { color: var(--amber); }

img { max-width: 100%; height: auto; }

/* ----------------------------------------------------------------
   NAV — fixed, forest green background, logo first
---------------------------------------------------------------- */
nav#nav,
#nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 2.5em !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 4em !important;
    z-index: 99999 !important;
    background-color: var(--forest) !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 20px rgba(0,0,0,.3) !important;
}

#nav #logo,
nav#nav div#logo {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    order: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    position: static !important;
    text-align: left !important;
}

#nav #logo img,
nav#nav div#logo img {
    height: 38px !important;
    width: auto !important;
    display: block !important;
}

#nav #logo h1 { margin:0 !important; padding:0 !important; font-size:1em !important; }

nav#nav > ul,
#nav > ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    order: 2 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

nav#nav > ul > li,
#nav > ul > li {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    float: none !important;
}

nav#nav > ul > li > a,
#nav > ul > li > a {
    display: flex !important;
    align-items: center !important;
    height: 4em !important;
    padding: 0 1.1em !important;
    color: rgba(255,255,255,.8) !important;
    font-size: .72em !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
    transition: color .2s !important;
}

nav#nav > ul > li > a:hover,
nav#nav > ul > li.current > a,
#nav > ul > li > a:hover,
#nav > ul > li.current > a {
    color: #fff !important;
    background: rgba(255,255,255,.08) !important;
}

#page-wrapper { padding-top: 4em !important; }

@media screen and (max-width:980px) {
    nav#nav > ul, #nav > ul { display: none !important; }
}

/* ----------------------------------------------------------------
   HERO — forest green, large white serif headline
---------------------------------------------------------------- */
#hero {
    background-color: var(--forest);
    padding: 7em 2em 6em;
    text-align: center;
    position: relative;
    overflow: hidden;
}

#hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--green), var(--amber), var(--green));
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
}

.hero-eyebrow {
    font-size: .75em;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 1.4em;
    display: block;
}

.hero-headline {
    font-family: var(--serif);
    font-size: clamp(2.4em, 5.5vw, 4em);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--white);
    margin: 0 0 .8em;
}

.hero-tagline {
    font-size: 1.15em;
    color: rgba(255,255,255,.75);
    max-width: 620px;
    margin: 0 auto 2.5em;
    line-height: 1.8;
    font-weight: 300;
}

.hero-actions {
    display: flex;
    gap: 1em;
    justify-content: center;
    flex-wrap: wrap;
}

/* ----------------------------------------------------------------
   BUTTONS
---------------------------------------------------------------- */
.btn-hero,
a.btn-hero {
    display: inline-block;
    background: var(--amber) !important;
    color: var(--text-dark) !important;
    border: none !important;
    padding: .9em 2.4em !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    font-size: .9em !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    transition: all .25s ease !important;
    text-decoration: none !important;
}
.btn-hero:hover, a.btn-hero:hover {
    background: var(--amber-light) !important;
    transform: translateY(-2px) !important;
    color: var(--text-dark) !important;
}

.btn-primary,
a.btn-primary,
.button.style1,
a.button.style1,
.button.style3,
a.button.style3 {
    display: inline-block;
    background: var(--green) !important;
    color: #fff !important;
    border: none !important;
    padding: .85em 2.2em !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    font-size: .88em !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    transition: all .25s ease !important;
    text-decoration: none !important;
}
.btn-primary:hover, a.btn-primary:hover,
.button.style1:hover, a.button.style1:hover,
.button.style3:hover, a.button.style3:hover {
    background: var(--green-light) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
}

.btn-secondary,
a.btn-secondary,
.button.style2,
a.button.style2 {
    display: inline-block;
    background: transparent !important;
    color: var(--green) !important;
    border: 2px solid var(--green) !important;
    padding: .85em 2.2em !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    font-size: .88em !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    transition: all .25s ease !important;
    text-decoration: none !important;
}
.btn-secondary:hover, a.btn-secondary:hover,
.button.style2:hover, a.button.style2:hover {
    background: var(--green-dim) !important;
    color: var(--green) !important;
}

/* form inputs */
input[type="submit"].style1 {
    background: var(--green) !important;
    color: #fff !important; border: none !important;
    border-radius: 4px !important; padding: .85em 2.2em !important;
    font-weight: 700 !important; font-size: .88em !important;
    cursor: pointer !important; text-transform: uppercase !important;
    letter-spacing: .08em !important; transition: background .25s ease !important;
}
input[type="submit"].style1:hover { background: var(--green-light) !important; }

input[type="reset"].style2 {
    background: transparent !important; color: var(--text-muted) !important;
    border: 1px solid var(--border-light) !important; border-radius: 4px !important;
    padding: .85em 2.2em !important; font-weight: 500 !important;
    font-size: .88em !important; cursor: pointer !important;
    text-transform: uppercase !important; letter-spacing: .08em !important;
    transition: all .25s !important;
}

/* ----------------------------------------------------------------
   SECTION CHROME
---------------------------------------------------------------- */
.section-label {
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: .8em;
    display: block;
}

.section-heading {
    font-family: var(--serif);
    font-size: clamp(1.8em, 3vw, 2.8em);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text-dark);
    margin: 0 0 .5em;
    line-height: 1.2;
}

.section-heading-light {
    font-family: var(--serif);
    font-size: clamp(1.8em, 3vw, 2.8em);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--white);
    margin: 0 0 .5em;
    line-height: 1.2;
}

.section-sub {
    font-size: 1.05em;
    color: var(--text-muted);
    max-width: 580px;
    line-height: 1.8;
    margin: 0;
}

.section-sub-light {
    font-size: 1.05em;
    color: rgba(255,255,255,.72);
    max-width: 580px;
    line-height: 1.8;
    margin: 0;
}

/* .title used by legacy wrapper sections */
.title, .wrapper .title {
    color: var(--green) !important;
    font-size: .76em !important;
    font-weight: 700 !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
}
.title::before, .title::after { background: var(--green) !important; }

header.style1 h2 {
    font-family: var(--serif);
    color: var(--text-dark);
    font-size: clamp(1.6em, 2.8vw, 2.4em);
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: .4em;
    line-height: 1.2;
}
header.style1 p { color: var(--text-muted); font-size: 1.05em; line-height: 1.75; }

/* shared container */
.sf-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2em;
}

/* ----------------------------------------------------------------
   IMPACT STATS (white background)
---------------------------------------------------------------- */
#impact-stats {
    background: var(--white);
    padding: 5em 2em;
    border-bottom: 1px solid var(--border-light);
}

.stats-4-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1em;
    margin-top: 3em;
}

.stat-block {
    text-align: center;
    padding: 2em 1em;
    border-right: 1px solid var(--border-light);
}
.stat-block:last-child { border-right: none; }

.stat-block .stat-number {
    font-family: var(--serif);
    font-size: clamp(2.4em, 4vw, 3.5em);
    font-weight: 700;
    color: var(--green);
    line-height: 1;
    display: block;
    margin-bottom: .2em;
}

.stat-block .stat-label {
    font-size: .85em;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    display: block;
}

@media (max-width:768px) {
    .stats-4-grid { grid-template-columns: repeat(2,1fr); }
    .stat-block { border-right: none; border-bottom: 1px solid var(--border-light); }
    .stat-block:last-child { border-bottom: none; }
}

/* legacy stats-bar compatibility */
.stats-bar {
    background: var(--off-white);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: 3.5em 0;
}
.stats-bar .container { max-width:1180px; margin:0 auto; padding:0 2em; }
.stat-item { text-align: center; padding: 1em; }
.stat-item .number {
    font-family: var(--serif);
    font-size: 2.8em; font-weight: 700;
    color: var(--green); line-height: 1;
    display: block; margin-bottom: .25em;
}
.stat-item .label {
    font-size: .82em; color: var(--text-muted);
    font-weight: 500; letter-spacing: .08em;
    text-transform: uppercase; display: block;
}

/* ----------------------------------------------------------------
   FOCUS AREAS (white, 3 columns)
---------------------------------------------------------------- */
#focus-areas {
    background: var(--off-white);
    padding: 6em 2em;
}

.focus-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2em;
    margin-top: 3em;
}

.focus-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-top: 4px solid var(--green);
    border-radius: 0 0 8px 8px;
    padding: 2.5em 2em;
    transition: box-shadow .25s, transform .25s;
}

.focus-card:hover {
    box-shadow: 0 8px 32px rgba(26,122,74,.12);
    transform: translateY(-3px);
}

.focus-icon {
    font-size: 2em;
    color: var(--green);
    margin-bottom: .75em;
    display: block;
}

.focus-card h3 {
    font-family: var(--serif);
    font-size: 1.25em;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: .6em;
    line-height: 1.25;
}

.focus-card p {
    font-size: .92em;
    color: var(--text-muted);
    line-height: 1.75;
    margin: 0;
}

@media (max-width:768px) { .focus-grid { grid-template-columns: 1fr; } }
@media (min-width:769px) and (max-width:1024px) { .focus-grid { grid-template-columns: 1fr 1fr; } }

/* ----------------------------------------------------------------
   PORTFOLIO HIGHLIGHTS (white)
---------------------------------------------------------------- */
#portfolio-highlights {
    background: var(--white);
    padding: 6em 2em;
    border-top: 1px solid var(--border-light);
}

.portfolio-card-white {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .25s, transform .25s;
    height: 100%;
}
.portfolio-card-white:hover {
    box-shadow: 0 8px 28px rgba(26,122,74,.12);
    transform: translateY(-4px);
}
.portfolio-card-white img {
    width: 100%; height: 190px; object-fit: cover; display: block;
    border-bottom: 1px solid var(--border-light);
}
.portfolio-card-white .pcw-body { padding: 1.5em; }
.portfolio-card-white .pcw-body h3 {
    font-family: var(--serif);
    font-size: 1.15em; font-weight: 700;
    color: var(--text-dark); margin-bottom: .4em;
}
.portfolio-card-white .pcw-body h3 a { color: var(--text-dark) !important; }
.portfolio-card-white .pcw-body h3 a:hover { color: var(--green) !important; }
.portfolio-card-white .pcw-body p {
    font-size: .9em; color: var(--text-muted);
    line-height: 1.65; margin-bottom: 1em;
}
.portfolio-card-white .pcw-actions { padding: 0 1.5em 1.5em; }

/* sector/stage badges */
.sector-tag {
    display: inline-block;
    background: var(--green-dim);
    border: 1px solid var(--green-border);
    color: var(--green);
    padding: .25em .85em;
    border-radius: 20px;
    font-size: .72em;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.stage-badge {
    display: inline-block;
    background: rgba(232,160,48,.12);
    border: 1px solid rgba(232,160,48,.4);
    color: var(--amber-dark);
    padding: .25em .85em;
    border-radius: 20px;
    font-size: .72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .8em;
}

.pf-3-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.8em;
    margin-top: 3em;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
    gap: 1.5em;
    margin-top: 2em;
}

/* portfolio card (subpages) */
.portfolio-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .25s, transform .25s;
}
.portfolio-card:hover { box-shadow: 0 8px 28px rgba(26,122,74,.12); transform: translateY(-4px); }
.portfolio-card .image-wrap { height: 180px; overflow: hidden; }
.portfolio-card .image-wrap img { width:100%; height:100%; object-fit:cover; }
.portfolio-card .content { padding: 1.5em; }
.portfolio-card h3 { font-family: var(--serif); font-size: 1.1em; font-weight: 700; color: var(--text-dark); margin-bottom: .4em; }
.portfolio-card p { font-size: .88em; color: var(--text-muted); line-height: 1.7; margin: 0; }

@media (max-width:768px) { .pf-3-grid { grid-template-columns: 1fr; } }
@media (min-width:769px) and (max-width:1024px) { .pf-3-grid { grid-template-columns: 1fr 1fr; } }

/* ----------------------------------------------------------------
   NEWS / BLOG (editorial, white bg)
---------------------------------------------------------------- */
#latest-news {
    background: var(--off-white);
    padding: 6em 2em;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2em;
    margin-top: 3em;
}

.news-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .25s, transform .25s;
    display: flex;
    flex-direction: column;
}
.news-card:hover { box-shadow: 0 6px 24px rgba(26,122,74,.1); transform: translateY(-3px); }

.news-card img {
    width: 100%; height: 190px; object-fit: cover; display: block;
    border-bottom: 1px solid var(--border-light);
}

.news-card .nc-body { padding: 1.5em; flex: 1; display:flex; flex-direction:column; }

.news-card .nc-category {
    font-size: .7em;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: .5em;
    display: block;
}

.news-card .nc-date {
    font-size: .78em;
    color: var(--text-muted);
    margin-bottom: .8em;
    display: block;
}

.news-card h3 {
    font-family: var(--serif);
    font-size: 1.08em;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.4;
    margin-bottom: .7em;
    flex: 1;
}

.news-card h3 a { color: var(--text-dark) !important; text-decoration: none !important; }
.news-card h3 a:hover { color: var(--green) !important; }

.news-card p {
    font-size: .88em;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 1em;
}

.news-card .nc-link {
    color: var(--green);
    font-size: .82em;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-top: auto;
    transition: color .2s;
}
.news-card .nc-link:hover { color: var(--amber-dark); }

@media (max-width:768px) { .news-grid { grid-template-columns: 1fr; } }
@media (min-width:769px) and (max-width:1024px) { .news-grid { grid-template-columns: 1fr 1fr; } }

/* ----------------------------------------------------------------
   CTA STRIP (amber)
---------------------------------------------------------------- */
#cta-strip {
    background: var(--amber-bg);
    border-top: 4px solid var(--amber);
    border-bottom: 1px solid rgba(232,160,48,.25);
    padding: 5em 2em;
    text-align: center;
}

#cta-strip .strip-inner {
    max-width: 700px;
    margin: 0 auto;
}

#cta-strip h2 {
    font-family: var(--serif);
    font-size: clamp(1.8em, 3.5vw, 2.8em);
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -.01em;
    margin-bottom: .6em;
    line-height: 1.2;
}

#cta-strip p {
    font-size: 1.1em;
    color: var(--text-muted);
    margin-bottom: 2em;
    line-height: 1.7;
}

.btn-amber,
a.btn-amber {
    display: inline-block;
    background: var(--amber) !important;
    color: var(--text-dark) !important;
    border: none !important;
    padding: .9em 2.5em !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    font-size: .9em !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    transition: all .25s ease !important;
    text-decoration: none !important;
}
.btn-amber:hover, a.btn-amber:hover {
    background: var(--amber-light) !important;
    transform: translateY(-2px) !important;
    color: var(--text-dark) !important;
}

/* ----------------------------------------------------------------
   WRAPPER SECTIONS (compatibility)
---------------------------------------------------------------- */
.wrapper.style1 { background: var(--forest); }
.wrapper.style2 { background: var(--off-white); }
.wrapper.style3 { background: var(--white); }

#main { background: var(--off-white); }
#main .title { color: var(--green) !important; }

/* ----------------------------------------------------------------
   HIGHLIGHTS (subpages)
---------------------------------------------------------------- */
#highlights { background: var(--white); padding: 5em 0; }

.highlight {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .25s, transform .25s;
    height: 100%;
}
.highlight:hover { box-shadow: 0 6px 24px rgba(26,122,74,.12); transform: translateY(-4px); }
.highlight h3 a { color: var(--text-dark) !important; font-family: var(--serif); font-weight: 700; text-decoration: none !important; }
.highlight h3 a:hover { color: var(--green) !important; }
.highlight p { color: var(--text-muted); font-size: .9em; line-height: 1.7; padding: 0 1.5em; }
.highlight .actions { padding: 0 1.5em 1.5em; }
.highlight .image.featured img { width:100%; height:200px; object-fit:cover; display:block; }

.feature-list section {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-top: 3px solid var(--green);
    border-radius: 0 0 8px 8px;
    padding: 2em;
    margin-bottom: 1.5em;
    transition: box-shadow .25s, transform .25s;
}
.feature-list section:hover { box-shadow: 0 6px 24px rgba(26,122,74,.1); transform: translateY(-3px); }
.feature-list section h3 { color: var(--text-dark); font-size: 1em; font-weight: 700; margin-bottom: .6em; font-family: var(--serif); }
.feature-list section h3::before { color: var(--green) !important; }
.feature-list section p { color: var(--text-muted); font-size: .9em; line-height: 1.7; }

/* ----------------------------------------------------------------
   TEAM CARDS
---------------------------------------------------------------- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
    gap: 2em;
    margin-top: 2em;
}

.team-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 2.2em 1.8em;
    text-align: center;
    transition: box-shadow .25s, transform .25s;
}
.team-card:hover { box-shadow: 0 8px 28px rgba(26,122,74,.12); transform: translateY(-4px); }
.team-card .avatar {
    width: 96px; height: 96px; border-radius: 50%;
    margin: 0 auto 1.2em; border: 3px solid var(--green);
    object-fit: cover; display: block;
}
.team-card h3 { font-family: var(--serif); color: var(--text-dark); font-size: 1.15em; font-weight: 700; margin-bottom: .3em; }
.team-card .role {
    color: var(--green); font-size: .75em; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1em; display: block;
}
.team-card p { color: var(--text-muted); font-size: .87em; line-height: 1.7; margin: 0; }

/* ----------------------------------------------------------------
   PAGE BANNER (interior pages)
---------------------------------------------------------------- */
.page-banner {
    background: var(--forest);
    padding: 5em 2em 4em;
    border-bottom: 4px solid var(--amber);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-banner .subtitle {
    color: var(--amber);
    font-size: .75em;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: .75em;
    display: block;
}
.page-banner h1 {
    font-family: var(--serif);
    color: var(--white);
    font-size: clamp(2em, 4vw, 3em);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    margin-bottom: .75em;
}
.page-banner p {
    color: rgba(255,255,255,.72);
    font-size: 1.1em;
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.75;
}

/* ----------------------------------------------------------------
   BLOG CARDS (blog/news subpages)
---------------------------------------------------------------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 2em; margin-top: 2em; }

.blog-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .25s, transform .25s;
    display: flex; flex-direction: column;
}
.blog-card:hover { box-shadow: 0 6px 24px rgba(26,122,74,.1); transform: translateY(-3px); }
.blog-card .blog-image { width:100%; height:190px; overflow:hidden; }
.blog-card .blog-image img { width:100%; height:100%; object-fit:cover; transition: transform .3s; }
.blog-card:hover .blog-image img { transform: scale(1.05); }
.blog-card .blog-content { padding: 1.5em; flex:1; display:flex; flex-direction:column; }
.blog-card .category-tag {
    display: inline-block; background: var(--green-dim);
    color: var(--green); border: 1px solid var(--green-border);
    padding: .2em .6em; border-radius: 4px;
    font-size: .72em; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; margin-bottom: .8em;
}
.blog-card h3 { font-family: var(--serif); color: var(--text-dark) !important; font-size: 1.08em; font-weight: 700; line-height: 1.4; margin-bottom: .6em; }
.blog-card h3 a { color: var(--text-dark) !important; text-decoration: none; }
.blog-card h3 a:hover { color: var(--green) !important; }
.blog-card .blog-meta { color: var(--text-muted); font-size: .78em; margin-bottom: .8em; display:flex; gap:1em; }
.blog-card .excerpt { color: var(--text-muted) !important; font-size: .88em; line-height: 1.65; flex:1; margin-bottom: 1.2em; }
.blog-card .read-more { color: var(--green) !important; font-size: .82em; font-weight: 700; text-decoration: none; margin-top: auto; letter-spacing: .05em; text-transform: uppercase; }
.blog-card .read-more:hover { color: var(--amber-dark) !important; }

/* Article */
.article-header { padding: 3em 0 2em; }
.article-header h1 { font-family: var(--serif); color: var(--text-dark) !important; font-size: 2em; font-weight: 700; line-height: 1.3; margin-bottom: .5em; }
.article-meta { color: var(--text-muted); font-size: .9em; margin-bottom: 2em; display:flex; gap:1.5em; flex-wrap:wrap; }
.article-meta .category { color: var(--green); font-weight: 700; text-transform: uppercase; font-size: .8em; letter-spacing: .1em; }
.article-body { color: var(--text-body) !important; line-height: 1.9; font-size: 1em; }
.article-body h2 { font-family: var(--serif); color: var(--text-dark) !important; font-size: 1.5em; font-weight: 700; margin-top: 2em; margin-bottom: .8em; padding-bottom: .4em; border-bottom: 2px solid var(--border-light); }
.article-body h3 { font-family: var(--serif); color: var(--green) !important; font-size: 1.2em; font-weight: 700; margin-top: 1.5em; margin-bottom: .6em; }
.article-body p { color: var(--text-body) !important; margin-bottom: 1.2em; }
.article-body ul, .article-body ol { color: var(--text-body) !important; padding-left: 1.5em; margin-bottom: 1.2em; }
.article-body li { margin-bottom: .5em; line-height: 1.7; }
.article-body strong { color: var(--text-dark); }
.article-body blockquote { border-left: 4px solid var(--green); padding: 1em 1.5em; margin: 1.5em 0; background: var(--green-dim); border-radius: 0 6px 6px 0; font-style: italic; }
.article-body blockquote p { color: var(--text-body) !important; }
.article-nav { display:flex; justify-content:space-between; margin-top:3em; padding-top:1.5em; border-top: 1px solid var(--border-light); flex-wrap:wrap; gap:1em; }
.article-nav a { color: var(--green) !important; font-weight: 700; font-size: .9em; text-decoration: none; }
.article-nav a:hover { color: var(--amber-dark) !important; }
.back-to-blog { display:inline-flex; align-items:center; gap:.5em; color: var(--green) !important; font-weight: 700; font-size: .9em; text-decoration: none; margin-bottom: 2em; }
.back-to-blog:hover { color: var(--amber-dark) !important; }

/* ----------------------------------------------------------------
   CONTACT FORM
---------------------------------------------------------------- */
input[type="text"], input[type="email"], textarea, select {
    background: var(--white) !important;
    border: 1.5px solid var(--border-light) !important;
    color: var(--text-dark) !important;
    border-radius: 4px !important;
    padding: .85em 1em !important;
    font-size: .95em !important;
    transition: border-color .2s !important;
    width: 100%;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: var(--green) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(26,122,74,.1) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }

/* ----------------------------------------------------------------
   LEGAL PAGES
---------------------------------------------------------------- */
.legal-content { background: var(--off-white); padding: 4em 0; }
.legal-content .container { max-width: 900px; margin: 0 auto; padding: 0 2em; }
.legal-content h1 { font-family: var(--serif); color: var(--text-dark); font-size: 2.2em; font-weight: 700; margin-bottom: .5em; }
.legal-content .last-updated { color: var(--text-muted); font-size: .88em; margin-bottom: 3em; padding-bottom: 2em; border-bottom: 1px solid var(--border-light); }
.legal-content h2 { font-family: var(--serif); color: var(--text-dark); font-size: 1.3em; font-weight: 700; margin: 2.5em 0 1em; padding-left: .8em; border-left: 4px solid var(--green); }
.legal-content h3 { font-family: var(--serif); color: var(--green); font-size: 1.1em; font-weight: 700; margin: 1.8em 0 .7em; }
.legal-content p, .legal-content li { color: var(--text-body); font-size: .95em; line-height: 1.85; margin-bottom: 1em; }
.legal-content ul, .legal-content ol { padding-left: 1.5em; margin-bottom: 1.5em; }
.legal-content a { color: var(--green); text-decoration: underline; }
.legal-content a:hover { color: var(--amber-dark); }
.legal-content table { width:100%; border-collapse:collapse; margin: 1.5em 0; font-size:.9em; }
.legal-content table th { background: var(--off-white); color: var(--green) !important; padding: .75em 1em; text-align:left; font-weight: 700; border-bottom: 2px solid var(--green); text-transform:uppercase; letter-spacing:.05em; font-size:.85em; }
.legal-content table td { color: var(--text-body) !important; padding: .75em 1em; border-bottom: 1px solid var(--border-light); vertical-align:top; }
.legal-content table tr:nth-child(even) td { background: var(--off-white); }
.legal-content .toc { background: var(--white); border: 1px solid var(--border-light); border-radius: 8px; padding: 1.5em 2em; margin-bottom: 2.5em; }
.legal-content .toc h3 { color: var(--text-dark) !important; font-size: 1em; font-weight: 700; margin-bottom: .8em; }
.legal-content .toc a { color: var(--green) !important; font-size: .9em; text-decoration: none; }
.legal-content .toc a:hover { color: var(--amber-dark) !important; text-decoration: underline; }

/* ----------------------------------------------------------------
   FOOTER
---------------------------------------------------------------- */
#footer, section#footer {
    background: var(--forest);
    border-top: 4px solid var(--amber);
    padding: 4em 0 2em;
}
#footer .title { color: var(--amber) !important; }
#footer .title::before, #footer .title::after { background: var(--amber) !important; }
#footer header.style1 h2 { font-family: var(--serif); color: var(--white); }
#footer header.style1 p { color: rgba(255,255,255,.7); }
#footer .feature-list.small section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#footer .feature-list.small section h3 {
    color: rgba(255,255,255,.9);
    font-size: .82em;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    margin-bottom: .7em;
}
#footer .feature-list.small section h3::before { color: var(--amber) !important; }
#footer .feature-list.small section p,
#footer .feature-list.small section p a {
    color: rgba(255,255,255,.65);
    font-size: .88em;
    line-height: 1.8;
    text-decoration: none;
}
#footer .feature-list.small section p a:hover { color: var(--amber); }
#footer input[type="text"], #footer input[type="email"], #footer textarea {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    color: var(--white) !important;
}
#footer input[type="text"]:focus, #footer input[type="email"]:focus, #footer textarea:focus {
    border-color: var(--amber) !important;
}
#footer input::placeholder, #footer textarea::placeholder { color: rgba(255,255,255,.4) !important; }
#copyright { margin-top: 3em; padding-top: 1.5em; border-top: 1px solid rgba(255,255,255,.1); }
#copyright ul li { color: rgba(255,255,255,.4); font-size: .8em; }
#copyright ul li a { color: rgba(255,255,255,.4); }
#copyright ul li a:hover { color: var(--amber); }

/* ----------------------------------------------------------------
   INTRO (legacy hero - used by inner pages)
---------------------------------------------------------------- */
#intro {
    background: var(--forest) !important;
    padding: 6em 2em 5em !important;
}
#intro .title { color: var(--amber) !important; }
#intro .title::before, #intro .title::after { background: var(--amber) !important; }
#intro p.style1 { color: rgba(255,255,255,.7) !important; font-size: .85em; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; }
#intro p.style2 {
    font-family: var(--serif);
    font-size: clamp(2em, 4.5vw, 3.8em);
    font-weight: 700;
    line-height: 1.15;
    color: var(--white) !important;
}
#intro p.style2 span { color: var(--amber); }
#intro p.style3 { font-size: 1.1em; color: rgba(255,255,255,.72) !important; max-width: 620px; margin: 0 auto 2.5em; line-height: 1.8; }

/* ----------------------------------------------------------------
   BLOCKQUOTE
---------------------------------------------------------------- */
blockquote { border-left: 4px solid var(--green); padding: 1em 1.5em; margin: 2em 0; background: var(--green-dim); border-radius: 0 6px 6px 0; }
blockquote p { color: var(--text-body) !important; font-style: italic; margin: 0 !important; }

/* ----------------------------------------------------------------
   UTILITIES
---------------------------------------------------------------- */
.text-green   { color: var(--green) !important; }
.text-amber   { color: var(--amber) !important; }
.text-dark    { color: var(--text-dark) !important; }
.text-muted   { color: var(--text-muted) !important; }
.section-divider { border: none; border-top: 1px solid var(--border-light); margin: 3em 0; }

/* ----------------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------------- */
@media (max-width:768px) {
    .page-banner h1 { font-size: 2em; }
    .stat-item .number, .stat-block .stat-number { font-size: 2em; }
    #hero { padding: 5em 1.5em 4em; }
    .hero-headline { font-size: 2em; }
}


/* ---------------------------------------------------------------
   FIX: Flex grid horizontal overflow (negative-margin .row containment)
--------------------------------------------------------------- */
.wrapper,
.content-section {
    overflow-x: hidden;
}