/*
Theme Name: Sustainability Era Heritage
Theme URI: https://sustainabilityera.com
Author: Sustainability Era
Description: Custom institutional WordPress theme for Sustainability Era — People • Planet • Energy.
Version: 1.1.0
Text Domain: sustainability-era
*/

:root{
  --green:#0b3b2f;
  --green-2:#0e4d3c;
  --green-3:#123f34;
  --gold:#b58a2a;
  --gold-2:#d5b35d;
  --ivory:#f7f3e8;
  --cream:#fbf8f1;
  --ink:#16372f;
  --muted:#6e756f;
  --line:rgba(181,138,42,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Georgia,'Times New Roman',serif;background:var(--cream);color:var(--ink);line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.container{width:min(1180px,92%);margin:0 auto}
.site-header{position:sticky;top:0;z-index:50;background:linear-gradient(90deg,rgba(251,248,239,.985),rgba(247,242,228,.985));backdrop-filter:blur(12px);border-bottom:1px solid rgba(181,138,42,.28);box-shadow:0 7px 22px rgba(19,49,39,.07)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:11px 0}
.brand{display:flex;align-items:center}
.brand-lockup{gap:13px;min-width:365px}
.brand-seal{width:72px;height:72px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 3px 5px rgba(21,32,25,.18))}
.brand-wordmark{display:flex;flex-direction:column;justify-content:center;white-space:nowrap}
.brand-name{font-size:25px;letter-spacing:.045em;text-transform:uppercase;line-height:1;font-weight:400;color:#082f27;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.brand-name .era{color:#b77a16;text-shadow:0 1px 0 #f7dfa2}
.brand-rule{display:grid;grid-template-columns:31px auto 31px;align-items:center;gap:8px;margin-top:9px}
.brand-rule>span:first-child,.brand-rule>span:last-child{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.brand-tag{font-family:Arial,sans-serif;font-size:8px;letter-spacing:.31em;text-transform:uppercase;color:#173c34}
.nav{display:flex;align-items:center;gap:19px;font-family:Arial,sans-serif;font-size:13px}
.nav a{padding:7px 0;border-bottom:1px solid transparent}
.nav a:hover{border-color:var(--gold)}
.nav .cta{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#fff;padding:12px 18px;border-radius:3px;border:none}
.mobile-toggle{display:none}

.hero{position:relative;overflow:hidden;color:white;background:
linear-gradient(90deg,rgba(5,41,32,.96) 0%,rgba(5,41,32,.8) 38%,rgba(5,41,32,.35) 67%,rgba(5,41,32,.78) 100%),
radial-gradient(circle at 72% 25%,rgba(255,223,145,.92),transparent 18%),
linear-gradient(145deg,#284f3d 0%,#17382f 38%,#57735a 56%,#17382f 100%);
min-height:610px;display:flex;align-items:center}
.hero:after{content:"";position:absolute;inset:auto 0 0 0;height:44%;background:linear-gradient(to top,rgba(2,25,20,.75),transparent);pointer-events:none}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;padding:84px 0}
.eyebrow{font-family:Arial,sans-serif;text-transform:uppercase;letter-spacing:.32em;color:var(--gold-2);font-size:13px}
.hero h1{font-weight:400;font-size:76px;line-height:.95;margin:16px 0 18px;max-width:650px}
.hero h1 em{color:var(--gold-2);font-weight:400}
.hero p{font-size:21px;max-width:650px;color:rgba(255,255,255,.9)}
.actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:1px solid var(--gold-2);font-family:Arial,sans-serif;font-size:15px;border-radius:3px}
.btn.primary{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#fff;border:none}
.btn.ghost{background:rgba(7,42,33,.45);color:#fff}
.hero-aside{justify-self:end;text-align:right}
.hero-aside .small-stack{font-family:Arial,sans-serif;text-transform:uppercase;letter-spacing:.3em;font-size:12px;line-height:2.2;border-right:2px solid var(--gold);padding-right:18px;margin-bottom:65px}
.hero-aside .manifesto{font-size:30px;line-height:1.15;font-style:italic}

.section{padding:72px 0}
.section.light{background:var(--ivory)}
.section.dark{background:linear-gradient(145deg,#0a3a2d,#083126);color:white;position:relative;overflow:hidden}
.section.dark:before,.section.dark:after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;border:1px solid rgba(213,179,93,.12)}
.section.dark:before{left:-170px;top:-140px}.section.dark:after{right:-170px;bottom:-140px}
.section-title{text-align:center;margin-bottom:38px}
.section-title .kicker{color:var(--gold);font-family:Arial,sans-serif;letter-spacing:.28em;text-transform:uppercase;font-size:12px}
.section-title h2{font-size:47px;font-weight:400;margin:6px 0 5px}
.section-title p{font-size:18px;margin:0;color:#465e56}
.dark .section-title p{color:rgba(255,255,255,.82)}
.focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.focus{padding:10px 34px 18px;text-align:center;border-right:1px solid rgba(22,55,47,.14)}
.focus:last-child{border-right:none}
.icon-ring{width:70px;height:70px;margin:0 auto 14px;border:2px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-family:Arial,sans-serif;font-size:28px;color:var(--green)}
.focus h3{font-weight:400;letter-spacing:.08em;text-transform:uppercase;font-size:21px;margin:8px 0}
.focus p{font-size:17px;margin:0}
.membership-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.member-card{border:1px solid rgba(213,179,93,.75);padding:28px 22px;text-align:center;min-height:235px;background:rgba(4,42,32,.38)}
.member-card .mini{width:52px;height:52px;margin:0 auto 18px;border:1px solid var(--gold-2);border-radius:50%;display:grid;place-items:center;color:var(--gold-2);font-size:24px}
.member-card h3{font-weight:400;letter-spacing:.08em;text-transform:uppercase;font-size:19px}
.member-card p{font-size:15px;color:rgba(255,255,255,.82)}
.member-card .arrow{width:34px;height:34px;border:1px solid var(--gold-2);border-radius:50%;display:grid;place-items:center;margin:18px auto 0;color:var(--gold-2)}
.lower-grid{display:grid;grid-template-columns:1fr 1fr .82fr;gap:38px;align-items:stretch}
.panel{padding:18px 0}
.panel h3{font-size:34px;font-weight:400;margin:6px 0 20px}
.event-row{display:grid;grid-template-columns:70px 1fr 38px;gap:18px;align-items:center;padding:18px 0;border-top:1px solid rgba(22,55,47,.15)}
.event-row:last-of-type{border-bottom:1px solid rgba(22,55,47,.15)}
.datebox strong{font-size:30px;font-weight:400}.datebox span{display:block;font-family:Arial,sans-serif;font-size:11px;letter-spacing:.14em}
.round{width:36px;height:36px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center}
.insight{display:grid;grid-template-columns:130px 1fr;gap:18px;align-items:start}
.insight-thumb{height:120px;background:linear-gradient(145deg,#2d5a46,#b5a066);border-radius:2px}
.callout{background:linear-gradient(145deg,#0c3f31,#0a2f27);color:#fff;padding:38px;display:flex;flex-direction:column;justify-content:center;min-height:280px;border:1px solid rgba(213,179,93,.18)}
.callout h3{font-size:38px;font-style:italic;font-weight:400;line-height:1.18;margin:0 0 26px}

.site-footer{background:#082d24;color:white;padding:42px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1.5fr .8fr;gap:40px;align-items:start}
.footer-links{display:flex;flex-wrap:wrap;gap:10px 14px;font-family:Arial,sans-serif;font-size:13px;color:rgba(255,255,255,.88)}
.footer-meta{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:18px;font-family:Arial,sans-serif;font-size:12px;color:rgba(255,255,255,.6);display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}

.page-hero{padding:90px 0 55px;background:linear-gradient(145deg,#0b3b2f,#0a2d25);color:#fff}
.page-hero h1{font-size:58px;font-weight:400;margin:8px 0}
.content-wrap{width:min(900px,92%);margin:0 auto;padding:60px 0 90px}
.content-wrap h2{font-size:36px;font-weight:400}.content-wrap h3{font-size:25px;font-weight:400}
.content-wrap p,.content-wrap li{font-size:18px}
.content-wrap a{color:#8a6718;text-decoration:underline}

@media(max-width:980px){
  .nav{display:none}.mobile-toggle{display:block;font-family:Arial,sans-serif}
  .hero-grid{grid-template-columns:1fr}.hero-aside{justify-self:start;text-align:left}.hero-aside .small-stack{border-right:none;border-left:2px solid var(--gold);padding-right:0;padding-left:18px;margin-bottom:28px}.hero h1{font-size:58px}
  .membership-grid{grid-template-columns:1fr 1fr}.lower-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.focus-grid{grid-template-columns:1fr}.focus{border-right:none;border-bottom:1px solid rgba(22,55,47,.14);padding:25px}
}
@media(max-width:620px){
  .brand{min-width:0}.brand-lockup{min-width:0}.brand-seal{width:54px;height:54px}.brand-name{font-size:17px}.brand-rule{grid-template-columns:18px auto 18px;gap:5px}.brand-tag{font-size:6.5px;letter-spacing:.22em}
  .hero{min-height:560px}.hero-grid{padding:60px 0}.hero h1{font-size:46px}.hero p{font-size:18px}.hero-aside{display:none}
  .section{padding:54px 0}.section-title h2{font-size:38px}.membership-grid{grid-template-columns:1fr}.lower-grid{gap:18px}
}

.footer-brand{display:flex;align-items:center;gap:14px}
.footer-seal{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 3px 7px rgba(0,0,0,.25))}
.footer-name{font-size:21px;letter-spacing:.055em;text-transform:uppercase;line-height:1.1}
.footer-name span{color:var(--gold-2)}
.footer-tag{font-family:Arial,sans-serif;font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:7px}
.footer-motto{text-align:right;color:#d5b35d;font-style:italic;font-size:18px}

@media(max-width:1120px){
  .brand-lockup{min-width:315px}
  .brand-seal{width:64px;height:64px}
  .brand-name{font-size:21px}
  .nav{gap:14px;font-size:12px}
  .nav .cta{padding:10px 13px}
}