/* =========================================================
   EcoVentrax — design tokens
   Palette drawn from the logo: deep forest ink + a green
   leaf gradient. Display type is geometric and technical to
   match the carbon-data subject matter; data figures use a
   monospace face like a ledger.
   ========================================================= */
:root{
	--forest-950:#07201A;
	--forest-800:#0D3529;
	--forest-700:#134A38;
	--green-600:#2E8B3D;
	--green-500:#4CA94A;
	--green-400:#74BF4B;
	--lime-300:#A8D95B;
	--paper-50:#F6F8F3;
	--paper-100:#ECF1E9;
	--ink-900:#132019;
	--ink-600:#48564C;
	--ink-400:#7C8A7F;
	--line:#DCE5D8;
	--white:#FFFFFF;

	--gradient-leaf: linear-gradient(120deg, var(--forest-700) 0%, var(--green-600) 45%, var(--green-400) 75%, var(--lime-300) 100%);

	--font-display:'Space Grotesk', 'Inter', sans-serif;
	--font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono:'IBM Plex Mono', 'Courier New', monospace;

	--radius-s:8px;
	--radius-m:14px;
	--radius-l:26px;
	--shadow-card: 0 1px 2px rgba(19,32,25,.04), 0 12px 28px -14px rgba(13,53,41,.22);
	--container: 1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
	html{scroll-behavior:auto;}
	*,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}
body{
	margin:0;
	font-family:var(--font-body);
	color:var(--ink-900);
	background:var(--paper-50);
	font-size:16px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--forest-950); margin:0 0 .5em; line-height:1.15; font-weight:600;}
p{margin:0 0 1em;}
.wrap{max-width:var(--container); margin:0 auto; padding:0 28px;}
.skip-link{position:absolute; left:-999px; top:0; background:var(--forest-950); color:#fff; padding:10px 16px; z-index:999;}
.skip-link:focus{left:12px; top:12px;}

::selection{ background:var(--lime-300); color:var(--forest-950); }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	padding:12px 22px; border-radius:999px; font-weight:600; font-size:.95rem;
	white-space:nowrap; border:1.5px solid transparent; cursor:pointer;
	transition:transform .18s ease, background .2s ease, border-color .2s ease, color .2s ease;
	font-family:var(--font-body);
}
.btn-solid{ background:var(--forest-950); color:#fff; }
.btn-solid:hover{ background:var(--green-600); transform:translateY(-1px); }
.btn-line{ border-color:rgba(13,53,41,.25); color:var(--forest-950); background:transparent; }
.btn-line:hover{ border-color:var(--green-600); color:var(--green-600); }
.btn-ghost-light{ border-color:rgba(255,255,255,.4); color:#fff; }
.btn-ghost-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn-block{ width:100%; }

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header{
	position:sticky; top:0; z-index:100;
	background:rgba(246,248,243,.85);
	backdrop-filter:saturate(160%) blur(10px);
	border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:24px; padding:14px 28px; }
.brand{ flex:0 0 auto; display:flex; align-items:center; }
.brand-logo, .custom-logo{ height:38px; width:auto; }
.site-nav{ flex:1; display:flex; justify-content:center; }
.nav-menu{ display:flex; gap:30px; }
.nav-menu a{ font-weight:600; font-size:.94rem; color:var(--ink-600); position:relative; padding:6px 0; }
.nav-menu a:hover{ color:var(--forest-950); }
.header-actions{ flex:0 0 auto; display:flex; align-items:center; gap:14px; }
.header-actions .btn-line{ padding:10px 16px; font-family:var(--font-mono); font-size:.82rem; letter-spacing:.02em; }

.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; background:none; border:0; cursor:pointer; margin-left:auto; }
.nav-toggle span{ display:block; height:2px; width:100%; background:var(--forest-950); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.nav-mobile{ display:none; flex-direction:column; gap:4px; padding:10px 28px 22px; border-top:1px solid var(--line); background:var(--paper-50); }
.nav-mobile .nav-menu-mobile{ display:flex; flex-direction:column; }
.nav-mobile .nav-menu-mobile a{ display:block; padding:12px 0; font-weight:600; border-bottom:1px solid var(--line); color:var(--ink-900); }
.nav-mobile .btn{ margin-top:14px; }

.site-header.is-open .nav-mobile{ display:flex; }
.site-header.is-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-header.is-open .nav-toggle span:nth-child(2){ opacity:0; }
.site-header.is-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 960px){
	.site-nav, .header-actions .btn-line{ display:none; }
	.header-actions{ gap:10px; }
	.nav-toggle{ display:flex; }
}
@media (max-width: 560px){
	.header-actions .btn-solid{ padding:9px 14px; font-size:.86rem; }
}

/* =========================================================
   Hero — signature element: descending emissions ledger line
   ========================================================= */
.hero{
	position:relative;
	background:var(--forest-950);
	color:#fff;
	overflow:hidden;
	padding:88px 0 0;
}
.hero::before{
	content:"";
	position:absolute; inset:0;
	background:
		radial-gradient(560px 360px at 82% 12%, rgba(116,191,75,.25), transparent 60%),
		radial-gradient(700px 420px at 10% 90%, rgba(19,74,56,.55), transparent 60%);
	pointer-events:none;
}
.hero-inner{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding-bottom:60px; }
.eyebrow{
	display:inline-flex; align-items:center; gap:8px;
	font-family:var(--font-mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
	color:var(--lime-300); border:1px solid rgba(168,217,91,.35); padding:6px 12px; border-radius:999px;
	margin-bottom:22px;
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--lime-300); box-shadow:0 0 0 4px rgba(168,217,91,.18); }
.hero h1{ color:#fff; font-size:clamp(2.1rem, 3.6vw, 3.35rem); max-width:16ch; letter-spacing:-.01em; }
.hero h1 em{ font-style:normal; background:linear-gradient(120deg, var(--lime-300), var(--green-400)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ color:rgba(255,255,255,.72); font-size:1.08rem; max-width:46ch; margin-bottom:30px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px; }

.hero-stats{ display:flex; gap:34px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.14); padding-top:26px; }
.hero-stat b{ display:block; font-family:var(--font-mono); font-size:1.5rem; color:var(--lime-300); }
.hero-stat span{ font-size:.82rem; color:rgba(255,255,255,.6); }

.hero-chart{ position:relative; }
.hero-chart .chart-card{
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.14);
	border-radius:var(--radius-l);
	padding:26px 22px 18px;
	backdrop-filter:blur(6px);
}
.chart-card-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.chart-card-head span{ font-family:var(--font-mono); font-size:.72rem; color:rgba(255,255,255,.55); letter-spacing:.06em; text-transform:uppercase; }
.chart-card-head b{ font-family:var(--font-mono); color:var(--lime-300); font-size:1.05rem; }
.hero-chart svg{ width:100%; height:auto; overflow:visible; }
.hero-chart .baseline-label{ font-family:var(--font-mono); font-size:.68rem; fill:rgba(255,255,255,.45); }
.hero-chart .path-line{
	fill:none; stroke:url(#ecovxLineGrad); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
	stroke-dasharray:640; stroke-dashoffset:640;
	animation:ecovxDraw 2.1s .3s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-chart .path-area{ fill:url(#ecovxAreaGrad); opacity:0; animation:ecovxFade 1.4s 1.6s ease forwards; }
.hero-chart .marker-dot{ opacity:0; animation:ecovxFade .5s 2.1s ease forwards; }
@keyframes ecovxDraw{ to{ stroke-dashoffset:0; } }
@keyframes ecovxFade{ to{ opacity:1; } }

.hero-wave{ display:block; width:100%; height:auto; margin-top:20px; }

/* =========================================================
   Section scaffolding
   ========================================================= */
.section{ padding:96px 0; }
.section-tight{ padding:64px 0; }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.kicker{
	display:inline-block; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
	color:var(--green-600); margin-bottom:14px;
}
.section-head h2{ font-size:clamp(1.7rem, 2.6vw, 2.35rem); }
.section-head p{ color:var(--ink-600); font-size:1.05rem; }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:none; }

/* =========================================================
   About
   ========================================================= */
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start; }
.about-figure{
	position:relative; border-radius:var(--radius-l); background:var(--gradient-leaf);
	padding:2px; overflow:hidden;
}
.about-figure-inner{
	background:var(--forest-950); border-radius:calc(var(--radius-l) - 2px);
	padding:34px; color:#fff; min-height:280px; display:flex; flex-direction:column; justify-content:space-between;
}
.about-figure-inner .quote-mark{ font-family:var(--font-display); font-size:3rem; color:var(--lime-300); line-height:1; }
.about-figure-inner p{ font-size:1.05rem; color:rgba(255,255,255,.85); }
.about-figure-inner footer{ font-family:var(--font-mono); font-size:.78rem; color:rgba(255,255,255,.55); }

.about-copy p{ color:var(--ink-600); font-size:1.03rem; }
.about-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.about-list li{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; color:var(--ink-900); }
.about-list li svg{ width:18px; height:18px; flex:0 0 auto; color:var(--green-600); margin-top:2px; }

/* =========================================================
   Services — accordion pillar cards
   ========================================================= */
.services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.service-card{
	background:#fff; border:1px solid var(--line); border-radius:var(--radius-m);
	box-shadow:var(--shadow-card); overflow:hidden;
}
.service-card-head{
	display:flex; align-items:flex-start; gap:14px; padding:22px 20px;
	width:100%; text-align:left; background:none; border:0; cursor:pointer; font:inherit; color:inherit;
}
.service-icon{
	flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
	background:var(--paper-100); color:var(--green-600);
}
.service-icon svg{ width:22px; height:22px; }
.service-card-head h3{ font-size:1.02rem; margin-bottom:4px; }
.service-card-head p{ font-size:.86rem; color:var(--ink-600); margin:0; }
.service-toggle-icon{ margin-left:auto; flex:0 0 auto; width:20px; height:20px; color:var(--ink-400); transition:transform .25s ease; }
.service-card[open] .service-toggle-icon{ transform:rotate(45deg); color:var(--green-600); }
.service-card summary{ list-style:none; }
.service-card summary::-webkit-details-marker{ display:none; }
.service-body{ padding:0 20px 22px 76px; }
.service-body ul{ display:flex; flex-direction:column; gap:9px; }
.service-body li{ position:relative; padding-left:18px; font-size:.9rem; color:var(--ink-600); }
.service-body li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:var(--green-500); }

@media (max-width:1080px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .services-grid{ grid-template-columns:1fr; } .service-body{ padding-left:20px; } }

/* =========================================================
   Approach — genuine sequence, numbered
   ========================================================= */
.approach{ background:var(--forest-950); color:#fff; position:relative; overflow:hidden;}
.approach::before{
	content:""; position:absolute; inset:0;
	background:radial-gradient(600px 380px at 88% 20%, rgba(116,191,75,.18), transparent 60%);
}
.approach .section-head h2{ color:#fff; }
.approach .section-head p{ color:rgba(255,255,255,.65); }
.approach .kicker{ color:var(--lime-300); }
.approach-steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.approach-step{ border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-m); padding:26px 22px; background:rgba(255,255,255,.03); }
.approach-step b{ font-family:var(--font-mono); color:var(--lime-300); font-size:.85rem; display:block; margin-bottom:14px; }
.approach-step h3{ color:#fff; font-size:1.08rem; margin-bottom:8px; }
.approach-step p{ color:rgba(255,255,255,.62); font-size:.9rem; margin:0; }
@media (max-width:960px){ .approach-steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .approach-steps{ grid-template-columns:1fr; } }

/* =========================================================
   CTA band
   ========================================================= */
.cta-band{
	margin:0 28px; max-width:calc(var(--container) - 0px); margin-left:auto; margin-right:auto;
	background:var(--gradient-leaf); border-radius:var(--radius-l);
	padding:52px 48px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
	color:#fff;
}
.cta-band h2{ color:#fff; margin-bottom:6px; font-size:1.6rem; }
.cta-band p{ color:rgba(255,255,255,.85); margin:0; }
.cta-band .btn-solid{ background:var(--forest-950); }
.cta-band .btn-solid:hover{ background:#000; }

/* =========================================================
   Contact
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:50px; }
.contact-card{
	background:var(--forest-950); color:#fff; border-radius:var(--radius-l); padding:36px 30px;
}
.contact-card h3{ color:#fff; }
.contact-card ul{ display:flex; flex-direction:column; gap:20px; margin-top:22px; }
.contact-card li{ display:flex; gap:14px; align-items:flex-start; }
.contact-card li svg{ width:20px; height:20px; color:var(--lime-300); flex:0 0 auto; margin-top:2px; }
.contact-card li a, .contact-card li span{ color:rgba(255,255,255,.85); font-size:.95rem; }

.contact-form{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-l); padding:36px; box-shadow:var(--shadow-card); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:7px; color:var(--ink-900); }
.field input, .field textarea{
	width:100%; padding:12px 14px; border-radius:var(--radius-s); border:1.5px solid var(--line);
	font-family:var(--font-body); font-size:.95rem; background:var(--paper-50); color:var(--ink-900);
	transition:border-color .2s ease, background .2s ease;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--green-500); background:#fff; }
.field textarea{ resize:vertical; min-height:120px; }
.hp-field{ position:absolute; left:-9999px; opacity:0; }
.form-note{ font-size:.82rem; color:var(--ink-400); margin-top:12px; }
.form-alert{ padding:12px 16px; border-radius:var(--radius-s); font-size:.9rem; margin-bottom:20px; }
.form-alert.success{ background:#E8F5E4; color:#1F5C2A; border:1px solid #BFE3B6; }
.form-alert.error{ background:#FCEDEC; color:#7A2A24; border:1px solid #F2C6C1; }

@media (max-width:900px){
	.hero-inner{ grid-template-columns:1fr; }
	.about-grid, .contact-grid{ grid-template-columns:1fr; }
	.about-list{ grid-template-columns:1fr; }
	.form-row{ grid-template-columns:1fr; }
	.cta-band{ padding:36px 26px; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background:var(--forest-950); color:rgba(255,255,255,.7); padding:70px 0 0; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-logo{ height:30px; margin-bottom:16px; filter:brightness(0) invert(1); }
.footer-brand p{ font-size:.9rem; color:rgba(255,255,255,.55); max-width:34ch; }
.footer-line-chart{ display:flex; align-items:center; gap:8px; margin-top:18px; font-family:var(--font-mono); font-size:.78rem; color:var(--lime-300); }
.footer-line-chart svg{ width:16px; height:16px; }
.footer-col h4, .footer-widget-title{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:.9rem; color:rgba(255,255,255,.6); }
.footer-col a:hover{ color:var(--lime-300); }
.footer-contact li{ font-size:.88rem; color:rgba(255,255,255,.6); line-height:1.5; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:22px 28px; font-size:.82rem; color:rgba(255,255,255,.45); flex-wrap:wrap; gap:10px; }
.footer-menu{ display:flex; gap:20px; }
.footer-menu a{ color:rgba(255,255,255,.5); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* =========================================================
   Blog (index/single) — kept simple, on-brand
   ========================================================= */
.page-header{ background:var(--forest-950); color:#fff; padding:70px 0 50px; }
.page-header h1{ color:#fff; margin-bottom:8px; }
.page-header p{ color:rgba(255,255,255,.65); margin:0; }
.post-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.post-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; box-shadow:var(--shadow-card); }
.post-card .thumb{ aspect-ratio:16/9; background:var(--paper-100); overflow:hidden; }
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.post-card-body{ padding:22px; }
.post-card time{ font-family:var(--font-mono); font-size:.75rem; color:var(--green-600); text-transform:uppercase; letter-spacing:.06em; }
.post-card h2{ font-size:1.15rem; margin:8px 0; }
.post-card p{ color:var(--ink-600); font-size:.92rem; }
.single-content{ max-width:760px; margin:0 auto; padding:60px 0; }
.single-content h1,.single-content h2,.single-content h3{ margin-top:1.4em; }
.single-content p{ color:var(--ink-900); font-size:1.05rem; }
.single-content img{ border-radius:var(--radius-m); margin:1.6em 0; }
@media (max-width:760px){ .post-grid{ grid-template-columns:1fr; } }

/* generic page (page.php) */
.generic-content{ max-width:820px; margin:0 auto; padding:70px 28px; }
.generic-content h1{ font-size:2rem; }
.generic-content p{ color:var(--ink-600); font-size:1.05rem; }

.pagination{ display:flex; gap:10px; justify-content:center; margin-top:40px; }
.pagination a, .pagination span{ padding:8px 14px; border-radius:8px; border:1px solid var(--line); font-family:var(--font-mono); font-size:.85rem; }
.pagination .current{ background:var(--forest-950); color:#fff; border-color:var(--forest-950); }