/* ═══════════════════════════════════════════════════════
   SolarCanopy — Main Stylesheet
   Font: Inter | Palette: Emerald + Slate + Amber
   ═══════════════════════════════════════════════════════ */

/* ── Reset & Base ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --sc-emerald-50:  #ecfdf5;
    --sc-emerald-100: #d1fae5;
    --sc-emerald-200: #a7f3d0;
    --sc-emerald-300: #6ee7b7;
    --sc-emerald-400: #34d399;
    --sc-emerald-500: #10b981;
    --sc-emerald-600: #059669;
    --sc-emerald-700: #047857;
    --sc-emerald-800: #065f46;
    --sc-emerald-900: #064e3b;

    --sc-amber-400: #fbbf24;
    --sc-amber-500: #f59e0b;
    --sc-amber-600: #d97706;

    --sc-slate-50:  #f8fafc;
    --sc-slate-100: #f1f5f9;
    --sc-slate-200: #e2e8f0;
    --sc-slate-300: #cbd5e1;
    --sc-slate-400: #94a3b8;
    --sc-slate-500: #64748b;
    --sc-slate-600: #475569;
    --sc-slate-700: #334155;
    --sc-slate-800: #1e293b;
    --sc-slate-900: #0f172a;
    --sc-slate-950: #020617;

    --sc-white: #ffffff;
    --sc-black: #000000;

    --sc-font: 'Inter', system-ui, -apple-system, sans-serif;
    --sc-radius: 0.75rem;
    --sc-radius-xl: 1rem;
    --sc-radius-2xl: 1.5rem;
    --sc-radius-full: 9999px;
    --sc-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.06);
    --sc-shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.07);
    --sc-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.07), 0 4px 6px -4px rgba(0,0,0,.07);
    --sc-shadow-xl: 0 20px 25px -5px rgba(0,0,0,.07), 0 8px 10px -6px rgba(0,0,0,.07);
    --sc-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.15);

    --sc-max-w: 80rem; /* 1280px */
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--sc-font); color: var(--sc-slate-800); background: var(--sc-slate-50); line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,h5,h6 { line-height: 1.2; font-weight: 800; color: var(--sc-slate-900); }
p { color: var(--sc-slate-600); }

/* ── Container ───────────────────────────────────────── */
.container { max-width: var(--sc-max-w); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

/* ── Buttons ─────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; border-radius: var(--sc-radius-full); transition: all .2s ease; cursor: pointer; border: none; font-family: var(--sc-font); text-decoration: none; }
.btn--primary { background: var(--sc-emerald-600); color: var(--sc-white); padding: .875rem 2rem; font-size: 1rem; box-shadow: var(--sc-shadow-md); }
.btn--primary:hover { background: var(--sc-emerald-700); box-shadow: var(--sc-shadow-lg); }
.btn--primary-lg { background: var(--sc-emerald-600); color: var(--sc-white); padding: 1.125rem 2.5rem; font-size: 1.125rem; box-shadow: var(--sc-shadow-lg); }
.btn--primary-lg:hover { background: var(--sc-emerald-700); box-shadow: var(--sc-shadow-xl); }
.btn--outline { background: transparent; color: var(--sc-slate-700); border: 1px solid var(--sc-slate-300); padding: .875rem 2rem; font-size: 1rem; }
.btn--outline:hover { background: var(--sc-slate-50); }
.btn--outline-lg { background: transparent; color: var(--sc-slate-700); border: 1px solid var(--sc-slate-300); padding: 1.125rem 2.5rem; font-size: 1.125rem; }
.btn--outline-lg:hover { background: var(--sc-slate-50); }
.btn--amber { background: var(--sc-amber-500); color: var(--sc-white); padding: 1.125rem 2.5rem; font-size: 1.125rem; font-weight: 700; box-shadow: var(--sc-shadow-md); }
.btn--amber:hover { background: var(--sc-amber-600); box-shadow: var(--sc-shadow-lg); }
.btn--outline-white { background: transparent; color: var(--sc-white); border: 1px solid var(--sc-slate-600); padding: .875rem 2rem; font-size: 1rem; }
.btn--outline-white:hover { background: var(--sc-slate-800); }
.btn--block { width: 100%; }
.btn .sc-icon { width: 1.25rem; height: 1.25rem; }

/* ── Badge ───────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: .25rem .75rem; border-radius: var(--sc-radius-full); font-size: .875rem; font-weight: 500; }
.badge--emerald { background: var(--sc-emerald-50); color: var(--sc-emerald-700); border: 1px solid var(--sc-emerald-200); }

/* ── Section Patterns ────────────────────────────────── */
.section { padding: 5rem 0; }
.section--white { background: var(--sc-white); }
.section--slate50 { background: var(--sc-slate-50); }
.section--slate100 { background: var(--sc-slate-100); }
.section--emerald50 { background: var(--sc-emerald-50); }
.section--dark { background: var(--sc-slate-900); color: var(--sc-white); }
.section--dark h2, .section--dark h3 { color: var(--sc-white); }
.section--dark p { color: var(--sc-slate-300); }
.section--gradient { background: linear-gradient(135deg, var(--sc-emerald-600), var(--sc-emerald-800)); color: var(--sc-white); }
.section--gradient h2 { color: var(--sc-white); }
.section--gradient p { color: var(--sc-emerald-100); }

.section__header { text-align: center; max-width: 42rem; margin: 0 auto 4rem; }
.section__header h2 { font-size: 1.875rem; margin-bottom: 1rem; }
.section__header p { font-size: 1.125rem; }
@media (min-width: 768px) { .section__header h2 { font-size: 2.25rem; } }

/* ── Hero (Home) ─────────────────────────────────────── */
.hero { background: var(--sc-white); padding: 4rem 0 5rem; overflow: hidden; }
@media (min-width: 1024px) { .hero { padding: 6rem 0 7rem; } }
.hero__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.hero__title { font-size: 2.25rem; line-height: 1.1; margin-bottom: 1.5rem; }
.hero__title em { font-style: normal; color: var(--sc-emerald-600); }
@media (min-width: 768px) { .hero__title { font-size: 3rem; } }
@media (min-width: 1024px) { .hero__title { font-size: 3.75rem; } }
.hero__body { font-size: 1.125rem; line-height: 1.7; max-width: 42rem; margin-bottom: 2rem; color: var(--sc-slate-600); }
.hero__buttons { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .hero__buttons { flex-direction: row; } }
.hero__visual { position: relative; }
.hero__visual-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--sc-emerald-100), #fffbeb); border-radius: var(--sc-radius-2xl); transform: rotate(3deg) scale(1.05); opacity: .7; }
.hero__visual-inner { position: relative; background: var(--sc-white); border-radius: var(--sc-radius-2xl); box-shadow: var(--sc-shadow-xl); border: 1px solid var(--sc-slate-100); overflow: hidden; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; }
@media (min-width: 768px) { .hero__visual-inner { aspect-ratio: 16/9; } }
@media (min-width: 1024px) { .hero__visual-inner { aspect-ratio: 1; } }
.hero__visual-inner img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--sc-radius-xl); }

/* ── Logo Band ───────────────────────────────────────── */
.logo-band { background: var(--sc-slate-100); border-top: 1px solid var(--sc-slate-200); border-bottom: 1px solid var(--sc-slate-200); padding: 2rem 0; }
.logo-band__text { text-align: center; font-size: .875rem; font-weight: 600; color: var(--sc-slate-500); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1.5rem; }
.logo-band__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem; opacity: .6; filter: grayscale(100%); }
@media (min-width: 768px) { .logo-band__logos { gap: 4rem; } }
.logo-band__item { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.125rem; }
.logo-band__item img { height: 2rem; width: auto; }

/* ── Process Steps ───────────────────────────────────── */
.process__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; position: relative; }
@media (min-width: 768px) { .process__grid { grid-template-columns: repeat(4, 1fr); } }
.process__step { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; }
.process__num { width: 4rem; height: 4rem; border-radius: 50%; background: var(--sc-emerald-100); color: var(--sc-emerald-600); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; border: 4px solid var(--sc-white); box-shadow: var(--sc-shadow-sm); transition: all .2s ease; }
.process__step:hover .process__num { background: var(--sc-emerald-600); color: var(--sc-white); }
.process__step h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
.process__step p { color: var(--sc-slate-600); font-size: .9375rem; }

/* ── Calculator ──────────────────────────────────────── */
.calculator { border-radius: var(--sc-radius-2xl); box-shadow: var(--sc-shadow-xl); overflow: hidden; border: 1px solid var(--sc-emerald-100); background: var(--sc-white); max-width: 56rem; margin: 0 auto; }
.calculator__header { background: var(--sc-emerald-600); padding: 2rem; text-align: center; color: var(--sc-white); }
.calculator__header h2 { color: var(--sc-white); font-size: 1.875rem; margin-bottom: .5rem; }
.calculator__header p { color: var(--sc-emerald-100); }
.calculator__body { padding: 2rem; }
@media (min-width: 768px) { .calculator__body { padding: 2.5rem; } }
.calculator__options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .calculator__options { grid-template-columns: repeat(4, 1fr); } }
.calculator__option { cursor: pointer; border-radius: var(--sc-radius-xl); border: 2px solid var(--sc-slate-200); padding: 1rem; text-align: center; font-weight: 500; transition: all .2s ease; color: var(--sc-slate-600); }
.calculator__option:hover { border-color: var(--sc-emerald-200); background: var(--sc-slate-50); }
.calculator__option--active { border-color: var(--sc-emerald-500); background: var(--sc-emerald-50); color: var(--sc-emerald-800); font-weight: 600; }
.calculator__select { width: 100%; font-size: 1.125rem; padding: 1rem; border-radius: var(--sc-radius-xl); border: 2px solid var(--sc-slate-200); outline: none; transition: border-color .2s ease; margin-bottom: 2rem; font-family: var(--sc-font); }
.calculator__select:focus { border-color: var(--sc-emerald-500); }
.calculator__label { display: block; font-size: 1.125rem; font-weight: 600; color: var(--sc-slate-900); margin-bottom: 1rem; }
.calculator__result { background: var(--sc-emerald-50); border-radius: var(--sc-radius-2xl); padding: 2rem; border: 1px solid var(--sc-emerald-100); text-align: center; margin-bottom: 2rem; }
.calculator__result-label { color: var(--sc-emerald-800); font-weight: 500; margin-bottom: .5rem; }
.calculator__result-value { font-size: 2.25rem; font-weight: 800; color: var(--sc-emerald-600); margin-bottom: .5rem; }
@media (min-width: 768px) { .calculator__result-value { font-size: 3.75rem; } }
.calculator__result-note { color: var(--sc-slate-500); font-size: .875rem; }

/* ── Funding Cards ───────────────────────────────────── */
.funding__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .funding__grid { grid-template-columns: repeat(3, 1fr); } }
.funding-card { background: var(--sc-white); border-radius: var(--sc-radius-xl); border: 1px solid var(--sc-slate-200); box-shadow: var(--sc-shadow-sm); padding: 2rem; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.funding-card:hover { transform: translateY(-2px); box-shadow: var(--sc-shadow-md); }
.funding-card--highlight { border-color: var(--sc-emerald-500); box-shadow: var(--sc-shadow-xl); }
@media (min-width: 768px) { .funding-card--highlight { transform: scale(1.05); z-index: 1; } .funding-card--highlight:hover { transform: scale(1.05) translateY(-2px); } }
.funding-card__popular { position: absolute; top: 0; left: 0; right: 0; background: var(--sc-emerald-500); color: var(--sc-white); text-align: center; font-size: .75rem; font-weight: 700; padding: .25rem; text-transform: uppercase; letter-spacing: .05em; }
.funding-card__title { font-size: 1.5rem; font-weight: 700; margin-bottom: .25rem; }
.funding-card__subtitle { color: var(--sc-emerald-600); font-weight: 500; margin-bottom: 1.5rem; }
.funding-card__features { list-style: none; margin-bottom: 2rem; flex: 1; }
.funding-card__features li { display: flex; align-items: flex-start; gap: .75rem; color: var(--sc-slate-700); margin-bottom: 1rem; }
.funding-card__features li .sc-icon { width: 1.25rem; height: 1.25rem; color: var(--sc-emerald-500); flex-shrink: 0; margin-top: .125rem; }
.funding-card--highlight .funding-card__title { padding-top: 1rem; }

/* ── Case Study Cards ────────────────────────────────── */
.cs-card { background: var(--sc-slate-800); border-radius: var(--sc-radius-2xl); overflow: hidden; border: 1px solid var(--sc-slate-700); transition: border-color .2s ease; cursor: pointer; }
.cs-card:hover { border-color: var(--sc-emerald-500); }
.cs-card__split { display: flex; height: 12rem; }
.cs-card__before, .cs-card__after { flex: 1; display: flex; align-items: center; justify-content: center; font-size: .875rem; font-weight: 500; }
.cs-card__before { background: var(--sc-slate-700); color: var(--sc-slate-400); }
.cs-card__before img, .cs-card__after img { width: 100%; height: 100%; object-fit: cover; }
.cs-card__after { background: linear-gradient(135deg, var(--sc-emerald-600), var(--sc-emerald-900)); color: var(--sc-white); position: relative; }
.cs-card__body { padding: 1.5rem; }
.cs-card__location { color: var(--sc-emerald-400); font-size: .875rem; font-weight: 600; display: flex; align-items: center; gap: .25rem; margin-bottom: .5rem; }
.cs-card__location .sc-icon { width: 1rem; height: 1rem; }
.cs-card h3 { color: var(--sc-white); font-size: 1.25rem; margin-bottom: 1rem; }
.cs-card__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; font-size: .875rem; }
.cs-card__stat-label { color: var(--sc-slate-400); margin-bottom: .25rem; }
.cs-card__stat-value { font-weight: 700; color: var(--sc-white); font-size: 1.125rem; }
.cs-card__stat-value--amber { color: var(--sc-amber-400); }

/* ── Testimonials ────────────────────────────────────── */
.testimonial { background: var(--sc-white); padding: 2rem; border-radius: var(--sc-radius-2xl); box-shadow: var(--sc-shadow-sm); border: 1px solid var(--sc-emerald-100); position: relative; }
@media (min-width: 768px) { .testimonial { padding: 2.5rem; } }
.testimonial__quote-icon { position: absolute; top: 2rem; right: 2rem; color: var(--sc-emerald-100); }
.testimonial__quote-icon .sc-icon { width: 3rem; height: 3rem; }
.testimonial__text { font-size: 1.125rem; color: var(--sc-slate-700); font-style: italic; line-height: 1.7; margin-bottom: 2rem; position: relative; z-index: 1; }
.testimonial__author { display: flex; align-items: center; gap: 1rem; }
.testimonial__avatar { width: 3rem; height: 3rem; border-radius: 50%; background: var(--sc-slate-200); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--sc-slate-500); font-size: .875rem; overflow: hidden; }
.testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial__name { font-weight: 700; color: var(--sc-slate-900); }
.testimonial__role { font-size: .875rem; color: var(--sc-slate-500); }

/* ── FAQ Accordion ───────────────────────────────────── */
.faq-item { border: 1px solid var(--sc-slate-200); border-radius: var(--sc-radius-xl); background: var(--sc-white); transition: all .2s ease; margin-bottom: 1rem; overflow: hidden; }
.faq-item--open { border-color: var(--sc-emerald-500); background: var(--sc-emerald-50); }
.faq-item__q { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; text-align: left; background: none; border: none; cursor: pointer; font-family: var(--sc-font); font-size: 1.125rem; font-weight: 700; color: var(--sc-slate-900); }
.faq-item--open .faq-item__q { color: var(--sc-emerald-900); }
.faq-item__q .sc-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--sc-slate-400); transition: transform .2s ease; }
.faq-item--open .faq-item__q .sc-icon { color: var(--sc-emerald-600); transform: rotate(180deg); }
.faq-item__a { padding: 0 1.5rem 1.5rem; color: var(--sc-slate-700); line-height: 1.7; display: none; }
.faq-item--open .faq-item__a { display: block; }

/* ── CTA Band ────────────────────────────────────────── */
.cta-band { padding: 6rem 0; position: relative; overflow: hidden; }
.cta-band__pattern { position: absolute; inset: 0; opacity: .1; background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 32px 32px; }
.cta-band .container { position: relative; z-index: 1; }
.cta-band__header { text-align: center; margin-bottom: 3rem; }
.cta-band__header h2 { font-size: 1.875rem; color: var(--sc-white); margin-bottom: 1.5rem; }
@media (min-width: 768px) { .cta-band__header h2 { font-size: 3rem; } }
.cta-band__header p { font-size: 1.25rem; color: var(--sc-emerald-100); max-width: 42rem; margin: 0 auto; }
.cta-band__form { background: var(--sc-white); border-radius: var(--sc-radius-2xl); padding: 2rem; box-shadow: var(--sc-shadow-2xl); color: var(--sc-slate-800); max-width: 42rem; margin: 0 auto; }
@media (min-width: 768px) { .cta-band__form { padding: 3rem; } }

/* ── Form Styles ─────────────────────────────────────── */
.form-grid { display: grid; gap: 1.5rem; }
.form-grid--2col { grid-template-columns: 1fr; }
@media (min-width: 768px) { .form-grid--2col { grid-template-columns: 1fr 1fr; } }
.form-group label { display: block; font-size: .875rem; font-weight: 500; color: var(--sc-slate-700); margin-bottom: .5rem; }
.form-input, .form-textarea { width: 100%; padding: .875rem 1rem; border: 1px solid var(--sc-slate-200); border-radius: var(--sc-radius); background: var(--sc-slate-50); font-family: var(--sc-font); font-size: 1rem; transition: border-color .2s ease; outline: none; }
.form-input:focus, .form-textarea:focus { border-color: var(--sc-emerald-500); box-shadow: 0 0 0 3px rgba(16,185,129,.1); }
.form-textarea { min-height: 6rem; resize: vertical; }
.form-note { text-align: center; font-size: .875rem; color: var(--sc-slate-500); margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.form-note .sc-icon { width: 1rem; height: 1rem; color: var(--sc-emerald-500); }

/* ── Footer ──────────────────────────────────────────── */
.footer { background: var(--sc-slate-100); border-top: 1px solid var(--sc-slate-200); padding-top: 4rem; padding-bottom: 2rem; }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer__brand { max-width: 24rem; }
.footer__logo { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
.footer__logo .sc-icon { width: 1.5rem; height: 1.5rem; color: var(--sc-emerald-600); }
.footer__logo-text { font-weight: 700; font-size: 1.25rem; color: var(--sc-slate-900); }
.footer__logo-text span { color: var(--sc-emerald-600); }
.footer__desc { color: var(--sc-slate-600); line-height: 1.7; margin-bottom: 2rem; }
.footer__certs { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer__cert { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; color: var(--sc-slate-700); border: 1px solid var(--sc-slate-300); border-radius: .25rem; padding: .25rem .5rem; font-size: .75rem; background: var(--sc-white); }
.footer__heading { font-weight: 700; color: var(--sc-slate-900); text-transform: uppercase; letter-spacing: .05em; font-size: .875rem; margin-bottom: 1.5rem; }
.footer__links { list-style: none; }
.footer__links li { margin-bottom: 1rem; }
.footer__links a { color: var(--sc-slate-600); transition: color .2s ease; }
.footer__links a:hover { color: var(--sc-emerald-600); }
.footer__contact-item { display: flex; align-items: flex-start; gap: .75rem; color: var(--sc-slate-600); margin-bottom: 1rem; }
.footer__contact-item .sc-icon { width: 1.25rem; height: 1.25rem; color: var(--sc-emerald-600); flex-shrink: 0; margin-top: .125rem; }
.footer__contact-item a { transition: color .2s ease; }
.footer__contact-item a:hover { color: var(--sc-emerald-600); }
.footer__contact-hours { font-size: .75rem; color: var(--sc-slate-500); }
.footer__bottom { border-top: 1px solid var(--sc-slate-200); padding-top: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
@media (min-width: 768px) { .footer__bottom { flex-direction: row; justify-content: space-between; } }
.footer__copyright { color: var(--sc-slate-500); font-size: .875rem; }
.footer__legal-links { display: flex; gap: 1.5rem; }
.footer__legal-links a { color: var(--sc-slate-500); font-size: .875rem; transition: color .2s ease; }
.footer__legal-links a:hover { color: var(--sc-emerald-600); }

/* ── Page Hero (Inner Pages) ─────────────────────────── */
.page-hero { background: var(--sc-white); padding: 4rem 0; border-bottom: 1px solid var(--sc-slate-200); }
@media (min-width: 1024px) { .page-hero { padding: 5rem 0; } }
.page-hero--dark { background: linear-gradient(135deg, var(--sc-slate-900), var(--sc-slate-800)); border-bottom: none; }
.page-hero--dark h1, .page-hero--dark h2 { color: var(--sc-white); }
.page-hero--dark p { color: var(--sc-slate-300); }
.page-hero__content { max-width: 48rem; }
.page-hero__content--center { margin: 0 auto; text-align: center; }
.page-hero h1 { font-size: 2.25rem; margin-bottom: 1rem; }
.page-hero h1 em { font-style: normal; color: var(--sc-emerald-600); }
@media (min-width: 768px) { .page-hero h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .page-hero h1 { font-size: 3.75rem; } }
.page-hero p { font-size: 1.125rem; line-height: 1.7; }
.page-hero--dark h1 em { color: var(--sc-emerald-400); }

/* ── HIW Detailed Steps ──────────────────────────────── */
.hiw-step { padding: 4rem 0; border-bottom: 1px solid var(--sc-slate-200); }
.hiw-step:nth-child(even) { background: var(--sc-slate-50); }
.hiw-step__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hiw-step__grid { grid-template-columns: 1fr 1fr; } }
.hiw-step:nth-child(even) .hiw-step__grid { direction: rtl; }
.hiw-step:nth-child(even) .hiw-step__grid > * { direction: ltr; }
.hiw-step__num { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--sc-emerald-600); color: var(--sc-white); font-weight: 700; font-size: 1.25rem; margin-bottom: 1rem; }
.hiw-step h3 { font-size: 1.5rem; margin-bottom: .75rem; }
.hiw-step__intro { font-size: 1.0625rem; margin-bottom: 1.5rem; }
.hiw-step__bullets { list-style: none; margin-bottom: 1.5rem; }
.hiw-step__bullets li { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .75rem; color: var(--sc-slate-700); }
.hiw-step__bullets li .sc-icon { width: 1.25rem; height: 1.25rem; color: var(--sc-emerald-500); flex-shrink: 0; margin-top: .125rem; }
.hiw-step__outcome { background: var(--sc-emerald-50); border-left: 4px solid var(--sc-emerald-500); padding: 1rem 1.5rem; border-radius: 0 var(--sc-radius) var(--sc-radius) 0; color: var(--sc-emerald-800); font-weight: 500; }
.hiw-step__image { border-radius: var(--sc-radius-2xl); overflow: hidden; box-shadow: var(--sc-shadow-lg); background: var(--sc-slate-200); aspect-ratio: 4/3; }
.hiw-step__image img { width: 100%; height: 100%; object-fit: cover; }

/* ── Tech Grid ───────────────────────────────────────── */
.tech-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .tech-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tech-grid { grid-template-columns: repeat(3, 1fr); } }
.tech-card { background: var(--sc-white); border: 1px solid var(--sc-slate-200); border-radius: var(--sc-radius-xl); padding: 2rem; transition: border-color .2s ease, box-shadow .2s ease; }
.tech-card:hover { border-color: var(--sc-emerald-200); box-shadow: var(--sc-shadow-md); }
.tech-card h3 { font-size: 1.125rem; margin-bottom: .75rem; }
.tech-card p { font-size: .9375rem; }

/* ── Suitability Checklist ───────────────────────────── */
.suit-list { list-style: none; display: grid; gap: 1rem; max-width: 40rem; margin: 0 auto; }
.suit-list li { display: flex; align-items: flex-start; gap: .75rem; background: var(--sc-white); padding: 1.25rem 1.5rem; border-radius: var(--sc-radius-xl); border: 1px solid var(--sc-slate-200); font-weight: 500; color: var(--sc-slate-800); }
.suit-list li .sc-icon { width: 1.25rem; height: 1.25rem; color: var(--sc-emerald-500); flex-shrink: 0; margin-top: .125rem; }

/* ── Case Studies Grid Page ──────────────────────────── */
.cs-filter { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 3rem; }
.cs-filter__btn { padding: .625rem 1.5rem; border-radius: var(--sc-radius-full); font-size: .875rem; font-weight: 500; border: none; background: var(--sc-white); color: var(--sc-slate-600); cursor: pointer; transition: all .2s ease; font-family: var(--sc-font); border: 1px solid var(--sc-slate-200); }
.cs-filter__btn:hover { border-color: var(--sc-emerald-200); }
.cs-filter__btn--active { background: var(--sc-emerald-600); color: var(--sc-white); border-color: var(--sc-emerald-600); }
.cs-page-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .cs-page-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cs-page-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── FAQ Page Tabs ───────────────────────────────────── */
.faq-tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 3rem; }
.faq-tab { padding: .625rem 1.25rem; border-radius: var(--sc-radius-full); font-size: .875rem; font-weight: 600; border: none; cursor: pointer; transition: all .2s ease; font-family: var(--sc-font); background: var(--sc-white); color: var(--sc-slate-600); border: 1px solid var(--sc-slate-200); }
.faq-tab:hover { border-color: var(--sc-emerald-200); }
.faq-tab--active { background: var(--sc-emerald-600); color: var(--sc-white); border-color: var(--sc-emerald-600); }
.faq-count { font-size: .875rem; text-align: center; color: var(--sc-slate-500); margin-bottom: 2rem; }

/* ── Contact Page ────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 5fr 7fr; } }
.contact-info { padding: 2rem 0; }
.contact-info__items { display: grid; gap: 1.5rem; margin-bottom: 2rem; }
.contact-info__item { display: flex; align-items: flex-start; gap: 1rem; }
.contact-info__item .sc-icon { width: 1.5rem; height: 1.5rem; color: var(--sc-emerald-600); flex-shrink: 0; margin-top: .125rem; }
.contact-info__item strong { color: var(--sc-slate-900); display: block; margin-bottom: .25rem; }
.contact-form-card { background: var(--sc-white); border-radius: var(--sc-radius-2xl); padding: 2rem; box-shadow: var(--sc-shadow-lg); border: 1px solid var(--sc-slate-200); }
@media (min-width: 768px) { .contact-form-card { padding: 2.5rem; } }
.contact-form-card h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.contact-form-card > p { margin-bottom: 2rem; }

/* ── About Page ──────────────────────────────────────── */
.about-hero__grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .about-hero__grid { grid-template-columns: 1fr 1fr; } }
.about-hero__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 640px) { .about-hero__stats { grid-template-columns: repeat(4, 1fr); } }
.about-stat { text-align: center; }
.about-stat__num { font-size: 2rem; font-weight: 800; color: var(--sc-emerald-600); }
.about-stat__label { font-size: .875rem; color: var(--sc-slate-500); }
.values-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
.value-card { background: var(--sc-white); border: 1px solid var(--sc-slate-200); border-radius: var(--sc-radius-xl); padding: 2rem; }
.value-card .sc-icon { width: 2.5rem; height: 2.5rem; color: var(--sc-emerald-600); margin-bottom: 1rem; }
.value-card h3 { margin-bottom: .5rem; }
.team-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card { background: var(--sc-white); border: 1px solid var(--sc-slate-200); border-radius: var(--sc-radius-xl); overflow: hidden; text-align: center; padding: 2rem; }
.team-card__photo { width: 6rem; height: 6rem; border-radius: 50%; margin: 0 auto 1rem; background: var(--sc-slate-200); overflow: hidden; }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { font-size: 1.125rem; margin-bottom: .25rem; }
.team-card__role { color: var(--sc-emerald-600); font-weight: 500; font-size: .875rem; margin-bottom: .75rem; }
.team-card__bio { font-size: .875rem; color: var(--sc-slate-600); }

/* ── Blog ────────────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card { background: var(--sc-white); border: 1px solid var(--sc-slate-200); border-radius: var(--sc-radius-xl); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
.blog-card:hover { border-color: var(--sc-emerald-200); box-shadow: var(--sc-shadow-md); }
.blog-card__thumb { aspect-ratio: 16/9; background: var(--sc-slate-200); overflow: hidden; }
.blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.blog-card:hover .blog-card__thumb img { transform: scale(1.05); }
.blog-card__body { padding: 1.5rem; }
.blog-card__meta { font-size: .75rem; color: var(--sc-slate-500); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.blog-card__title { font-size: 1.125rem; font-weight: 700; margin-bottom: .5rem; color: var(--sc-slate-900); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card__excerpt { font-size: .875rem; color: var(--sc-slate-600); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Single Post — Layout ────────────────────────────── */
.single-article { padding-top: 2rem; }

.sp-breadcrumb { font-size: .8125rem; color: var(--sc-slate-500); margin-bottom: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.sp-breadcrumb a { color: var(--sc-slate-500); transition: color .2s ease; }
.sp-breadcrumb a:hover { color: var(--sc-emerald-600); }
.sp-breadcrumb__sep { color: var(--sc-slate-300); }
.sp-breadcrumb__current { color: var(--sc-slate-700); font-weight: 500; }

.sp-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 1024px) { .sp-layout { grid-template-columns: 1fr 22rem; gap: 3.5rem; } }
@media (min-width: 1280px) { .sp-layout { grid-template-columns: 1fr 24rem; gap: 4rem; } }

/* ── Main Column ────────────────────────────────────── */
.sp-main { min-width: 0; }

.sp-main__header { margin-bottom: 2rem; }
.sp-main__header h1 { font-size: 2rem; line-height: 1.2; }
@media (min-width: 768px) { .sp-main__header h1 { font-size: 2.5rem; } }
.sp-main__meta { font-size: .875rem; color: var(--sc-slate-500); margin-bottom: 1rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.sp-main__cat { background: var(--sc-emerald-50); color: var(--sc-emerald-700); padding: .125rem .625rem; border-radius: var(--sc-radius-full); font-weight: 600; font-size: .8125rem; transition: background .2s ease; }
.sp-main__cat:hover { background: var(--sc-emerald-100); }

.sp-main__featured { border-radius: var(--sc-radius-xl); overflow: hidden; margin-bottom: 2.5rem; }
.sp-main__featured img { width: 100%; height: auto; display: block; }

/* ── Content — Responsive Elements ──────────────────── */
.sp-main__content { font-size: 1.0625rem; line-height: 1.8; color: var(--sc-slate-700); overflow-wrap: break-word; word-break: break-word; }
.sp-main__content h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; }
@media (min-width: 768px) { .sp-main__content h2 { font-size: 1.75rem; } }
.sp-main__content h3 { font-size: 1.25rem; margin: 2rem 0 .75rem; }
.sp-main__content p { margin-bottom: 1.25rem; }
.sp-main__content ul, .sp-main__content ol { margin: 0 0 1.25rem 1.5rem; }
.sp-main__content li { margin-bottom: .5rem; }
.sp-main__content a { color: var(--sc-emerald-600); text-decoration: underline; text-underline-offset: 2px; transition: color .2s ease; }
.sp-main__content a:hover { color: var(--sc-emerald-800); }

.sp-main__content blockquote { border-left: 4px solid var(--sc-emerald-500); margin: 1.5rem 0; padding: 1rem 1.5rem; background: var(--sc-emerald-50); border-radius: 0 var(--sc-radius) var(--sc-radius) 0; }
.sp-main__content blockquote p:last-child { margin-bottom: 0; }

/* Images */
.sp-main__content img { max-width: 100%; height: auto; border-radius: var(--sc-radius); margin: 1.5rem 0; display: block; }
.sp-main__content figure { margin: 1.5rem 0; }
.sp-main__content figcaption { font-size: .8125rem; color: var(--sc-slate-500); text-align: center; margin-top: .5rem; }

/* Tables */
.sp-main__content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .9375rem; }
.sp-main__content thead th { background: var(--sc-slate-50); font-weight: 700; color: var(--sc-slate-900); text-align: left; padding: .75rem 1rem; border-bottom: 2px solid var(--sc-slate-200); }
.sp-main__content tbody td { padding: .75rem 1rem; border-bottom: 1px solid var(--sc-slate-100); vertical-align: top; }
.sp-main__content tbody tr:hover { background: var(--sc-slate-50); }

/* Responsive table wrapper — rivmedia artifacts + wp tables */
.sp-main__content .rivmedia-artifact,
.sp-main__content .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; }
.sp-main__content .rivmedia-artifact table,
.sp-main__content .wp-block-table table { min-width: 36rem; }

/* Iframes & Embeds */
.sp-main__content iframe,
.sp-main__content video,
.sp-main__content embed,
.sp-main__content object { max-width: 100%; border-radius: var(--sc-radius); }

/* Code */
.sp-main__content pre { background: var(--sc-slate-900); color: var(--sc-slate-100); padding: 1.25rem 1.5rem; border-radius: var(--sc-radius); overflow-x: auto; font-size: .875rem; line-height: 1.6; margin: 1.5rem 0; }
.sp-main__content code { background: var(--sc-slate-100); padding: .125rem .375rem; border-radius: .25rem; font-size: .9em; }
.sp-main__content pre code { background: transparent; padding: 0; }

/* Key takeaways & intro boxes */
.sp-main__content .key-takeaways { background: var(--sc-emerald-50); border: 1px solid var(--sc-emerald-200); border-radius: var(--sc-radius-xl); padding: 1.5rem 2rem; margin: 1.5rem 0 2rem; }
.sp-main__content .key-takeaways strong { color: var(--sc-emerald-800); }
.sp-main__content .introduction { font-size: 1.125rem; color: var(--sc-slate-600); border-bottom: 1px solid var(--sc-slate-200); padding-bottom: 1.5rem; margin-bottom: 2rem; }
.sp-main__content .faq { border-top: 1px solid var(--sc-slate-200); padding-top: 2rem; margin-top: 2.5rem; }

/* ── Tags ───────────────────────────────────────────── */
.sp-tags { display: flex; flex-wrap: wrap; gap: .5rem; padding: 2rem 0; border-top: 1px solid var(--sc-slate-200); }
.sp-tags__item { display: inline-flex; padding: .25rem .75rem; border-radius: var(--sc-radius-full); font-size: .8125rem; font-weight: 500; color: var(--sc-slate-600); background: var(--sc-slate-100); border: 1px solid var(--sc-slate-200); transition: all .2s ease; }
.sp-tags__item:hover { background: var(--sc-emerald-50); border-color: var(--sc-emerald-200); color: var(--sc-emerald-700); }

/* ── Share Bar ──────────────────────────────────────── */
.sp-share { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--sc-slate-200); border-bottom: 1px solid var(--sc-slate-200); flex-wrap: wrap; }
.sp-share__label { font-size: .875rem; font-weight: 600; color: var(--sc-slate-700); }
.sp-share__links { display: flex; gap: .5rem; }
.sp-share__btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--sc-radius-full); transition: all .2s ease; color: var(--sc-white); }
.sp-share__btn--fb { background: #1877f2; }
.sp-share__btn--fb:hover { background: #0d65d9; }
.sp-share__btn--x { background: var(--sc-slate-900); }
.sp-share__btn--x:hover { background: var(--sc-slate-700); }
.sp-share__btn--li { background: #0a66c2; }
.sp-share__btn--li:hover { background: #004182; }
.sp-share__btn--email { background: var(--sc-slate-500); }
.sp-share__btn--email:hover { background: var(--sc-slate-600); }

/* ── Post Navigation ────────────────────────────────── */
.sp-postnav { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0; }
@media (min-width: 640px) { .sp-postnav { grid-template-columns: 1fr 1fr; } }
.sp-postnav__link { display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid var(--sc-slate-200); border-radius: var(--sc-radius-xl); transition: all .2s ease; }
.sp-postnav__link:hover { border-color: var(--sc-emerald-200); background: var(--sc-emerald-50); }
.sp-postnav__link--next { text-align: right; }
.sp-postnav__dir { font-size: .8125rem; font-weight: 600; color: var(--sc-emerald-600); margin-bottom: .25rem; }
.sp-postnav__title { font-size: .9375rem; font-weight: 600; color: var(--sc-slate-800); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Sidebar ────────────────────────────────────────── */
.sp-sidebar { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 1024px) { .sp-sidebar { position: sticky; top: 7rem; align-self: start; } }

.sp-widget { background: var(--sc-white); border: 1px solid var(--sc-slate-200); border-radius: var(--sc-radius-xl); padding: 1.5rem; }
.sp-widget__title { font-size: 1rem; font-weight: 700; color: var(--sc-slate-900); margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 2px solid var(--sc-emerald-500); }

/* Sidebar CTA */
.sp-cta { background: linear-gradient(135deg, var(--sc-emerald-600), var(--sc-emerald-800)); border-color: transparent; text-align: center; padding: 2rem 1.5rem; }
.sp-cta__icon { width: 3rem; height: 3rem; margin: 0 auto .75rem; color: var(--sc-emerald-200); }
.sp-cta__icon .sc-icon { width: 3rem; height: 3rem; }
.sp-cta__title { font-size: 1.125rem; color: var(--sc-white); margin-bottom: .5rem; }
.sp-cta__text { font-size: .875rem; color: var(--sc-emerald-100); margin-bottom: 1.25rem; line-height: 1.5; }
.sp-cta .btn--primary { background: var(--sc-white); color: var(--sc-emerald-700); font-weight: 700; }
.sp-cta .btn--primary:hover { background: var(--sc-emerald-50); }

.sp-cta--dark { background: var(--sc-slate-900); }
.sp-cta--dark .sp-cta__icon { color: var(--sc-amber-400); }
.sp-cta--dark .sp-cta__title { color: var(--sc-white); }
.sp-cta--dark .sp-cta__text { color: var(--sc-slate-400); }

/* Sidebar Recent Posts */
.sp-recent { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--sc-slate-100); transition: background .15s ease; text-decoration: none; }
.sp-recent:last-child { border-bottom: none; }
.sp-recent:hover { background: var(--sc-slate-50); margin: 0 -.75rem; padding-left: .75rem; padding-right: .75rem; border-radius: var(--sc-radius); }
.sp-recent__thumb { width: 4rem; height: 3rem; border-radius: .375rem; overflow: hidden; flex-shrink: 0; background: var(--sc-slate-200); }
.sp-recent__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-recent__body { min-width: 0; flex: 1; }
.sp-recent__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8125rem; font-weight: 600; color: var(--sc-slate-800); line-height: 1.3; margin-bottom: .125rem; }
.sp-recent__date { font-size: .75rem; color: var(--sc-slate-500); }

/* Sidebar Categories */
.sp-cat-list { display: flex; flex-direction: column; }
.sp-cat-list__item { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--sc-slate-100); font-size: .875rem; font-weight: 500; color: var(--sc-slate-700); transition: color .2s ease; text-decoration: none; }
.sp-cat-list__item:last-child { border-bottom: none; }
.sp-cat-list__item:hover { color: var(--sc-emerald-600); }
.sp-cat-list__count { font-size: .75rem; font-weight: 600; background: var(--sc-slate-100); color: var(--sc-slate-500); padding: .125rem .5rem; border-radius: var(--sc-radius-full); }

/* ── Pagination ──────────────────────────────────────── */
.pagination { display: flex; justify-content: center; gap: .5rem; padding: 3rem 0; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: .5rem; border-radius: var(--sc-radius); font-weight: 500; font-size: .875rem; border: 1px solid var(--sc-slate-200); transition: all .2s ease; }
.pagination a:hover { background: var(--sc-emerald-50); border-color: var(--sc-emerald-200); }
.pagination .current { background: var(--sc-emerald-600); color: var(--sc-white); border-color: var(--sc-emerald-600); }

/* ── 404 ─────────────────────────────────────────────── */
.error-404 { text-align: center; padding: 6rem 0; }
.error-404__code { font-size: 8rem; font-weight: 900; color: var(--sc-emerald-200); line-height: 1; margin-bottom: 1rem; }
.error-404 h1 { font-size: 2rem; margin-bottom: 1rem; }
.error-404 p { font-size: 1.125rem; max-width: 32rem; margin: 0 auto 2rem; }

/* ── Legal Page ──────────────────────────────────────── */
.legal-content { max-width: 48rem; margin: 0 auto; padding: 3rem 0; }
.legal-content h1 { font-size: 2rem; margin-bottom: .5rem; }
.legal-content__date { font-size: .875rem; color: var(--sc-slate-500); margin-bottom: 2rem; }
.legal-content__body { font-size: 1rem; line-height: 1.8; color: var(--sc-slate-700); }
.legal-content__body h2 { font-size: 1.375rem; margin: 2rem 0 .75rem; }
.legal-content__body h3 { font-size: 1.125rem; margin: 1.5rem 0 .5rem; }
.legal-content__body p { margin-bottom: 1rem; }
.legal-content__body ul, .legal-content__body ol { margin: 0 0 1rem 1.5rem; }
.legal-content__body li { margin-bottom: .5rem; }

/* ── Utility ─────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.text-emerald { color: var(--sc-emerald-600); }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ═══════════════════════════════════════════════════════
   Carbon Impact Dashboard
   ═══════════════════════════════════════════════════════ */

.carbon-impact { background: linear-gradient(170deg, var(--sc-slate-900) 0%, #0c1a2e 50%, #0a1628 100%); padding: 5rem 0; position: relative; overflow: hidden; }
.carbon-impact::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(16,185,129,.08), transparent 70%); pointer-events: none; }
.carbon-impact .section__header h2 { color: var(--sc-white); }
.carbon-impact .section__header p { color: var(--sc-slate-400); }

/* Badge */
.carbon-impact__badge { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem 1rem; border-radius: var(--sc-radius-full); font-size: .8125rem; font-weight: 600; color: var(--sc-emerald-400); background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.2); margin-bottom: 1rem; }
.carbon-impact__badge .sc-icon { width: 1rem; height: 1rem; }

/* Primary stats — big 3 */
.carbon-impact__primary { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .carbon-impact__primary { grid-template-columns: repeat(3, 1fr); } }

.carbon-impact__stat--hero { text-align: center; padding: 2rem 1.5rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: var(--sc-radius-2xl); position: relative; transition: border-color .3s ease, background .3s ease; }
.carbon-impact__stat--hero:hover { border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.05); }

.carbon-impact__icon { width: 4rem; height: 4rem; margin: 0 auto 1.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.carbon-impact__icon--co2 { background: rgba(16,185,129,.1); color: var(--sc-emerald-400); }
.carbon-impact__icon--co2 svg { width: 3rem; height: 3rem; }
.carbon-impact__icon--energy { background: rgba(251,191,36,.1); color: var(--sc-amber-400); }
.carbon-impact__icon--energy .sc-icon { width: 2rem; height: 2rem; }
.carbon-impact__icon--savings { background: rgba(99,102,241,.1); color: #a5b4fc; }
.carbon-impact__icon--savings .sc-icon { width: 2rem; height: 2rem; }

.carbon-impact__value { font-size: 2.5rem; font-weight: 900; color: var(--sc-white); letter-spacing: -.02em; margin-bottom: .25rem; }
@media (min-width: 768px) { .carbon-impact__value { font-size: 3rem; } }
.carbon-impact__label { font-size: .9375rem; color: var(--sc-slate-400); font-weight: 500; }

/* Animated ring on CO2 */
.carbon-ring { transition: stroke-dashoffset 1.5s ease-out; }
.carbon-impact__stat--hero:hover .carbon-ring { stroke-dashoffset: 0; }

/* Equivalence section */
.carbon-impact__equiv-title { text-align: center; font-size: 1rem; font-weight: 600; color: var(--sc-emerald-400); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.5rem; }
.carbon-impact__equiv-title::before,
.carbon-impact__equiv-title::after { content: ''; display: inline-block; width: 2rem; height: 1px; background: var(--sc-emerald-700); vertical-align: middle; margin: 0 1rem; }

.carbon-impact__equiv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .carbon-impact__equiv { grid-template-columns: repeat(4, 1fr); } }

.carbon-impact__equiv-card { text-align: center; padding: 1.5rem 1rem; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); border-radius: var(--sc-radius-xl); transition: all .3s ease; }
.carbon-impact__equiv-card:hover { background: rgba(255,255,255,.04); border-color: rgba(16,185,129,.2); transform: translateY(-2px); }

.carbon-impact__equiv-icon { width: 3rem; height: 3rem; margin: 0 auto .75rem; color: var(--sc-emerald-400); opacity: .7; }
.carbon-impact__equiv-icon .sc-icon { width: 2.5rem; height: 2.5rem; }

.carbon-impact__equiv-value { font-size: 1.5rem; font-weight: 800; color: var(--sc-white); margin-bottom: .25rem; }
@media (min-width: 768px) { .carbon-impact__equiv-value { font-size: 1.75rem; } }
.carbon-impact__equiv-label { font-size: .8125rem; color: var(--sc-slate-500); line-height: 1.3; }

/* Bottom stats bar */
.carbon-impact__bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem; padding: 1.5rem 2rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); border-radius: var(--sc-radius-2xl); margin-bottom: 3rem; }
@media (min-width: 768px) { .carbon-impact__bar { gap: 2.5rem; } }
.carbon-impact__bar-stat { text-align: center; }
.carbon-impact__bar-value { display: block; font-size: 1.375rem; font-weight: 800; color: var(--sc-emerald-400); }
.carbon-impact__bar-label { display: block; font-size: .75rem; color: var(--sc-slate-500); text-transform: uppercase; letter-spacing: .05em; }
.carbon-impact__bar-divider { width: 1px; height: 2.5rem; background: rgba(255,255,255,.08); display: none; }
@media (min-width: 768px) { .carbon-impact__bar-divider { display: block; } }

/* Footer / CTA */
.carbon-impact__footer { text-align: center; }
.carbon-impact__footnote { font-size: .75rem; color: var(--sc-slate-600); max-width: 40rem; margin: 1.25rem auto 0; line-height: 1.5; }

/* Animated counters */
[data-count] { transition: opacity .3s ease; }
.carbon-impact[data-counted] [data-count] { opacity: 1; }