/* =========================================================
   VIVENT — Circular Infrastructure for Water and Waste
   Design tokens: brand green + white, schematic/infrastructure system
   ========================================================= */

@font-face{
  font-family:'Hind';
  src:url('../fonts/hind-latin-300-normal.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Hind';
  src:url('../fonts/hind-latin-400-normal.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Hind';
  src:url('../fonts/hind-latin-500-normal.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Hind';
  src:url('../fonts/hind-latin-600-normal.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Hind';
  src:url('../fonts/hind-latin-700-normal.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  /* --- brand colors (from logo) --- */
  --green:        #4FA62E;
  --green-mid:    #3D8323;
  --green-deep:   #16321A;   /* near-black green, dark sections & headings */
  --green-ink:    #142013;   /* text ink */
  --sage:         #EAF3E2;   /* light tint section bg */
  --sage-line:    #D3E6C6;   /* hairline borders on white/sage */
  --white:        #FFFFFF;
  --slate:        #566254;   /* secondary body text on white */
  --slate-light:  #93A290;   /* muted/caption text */
  --biochar:      #7C5738;   /* small earth accent, used sparingly */

  /* --- type --- */
  --font-display: 'Hind','Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --font-body:    'Hind',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:    'SF Mono','JetBrains Mono',ui-monospace,Menlo,Consolas,'Courier New',monospace;

  --container: 1180px;
  --logo-w: 180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }

body{
  font-family:var(--font-body);
  font-weight:400;
  color:var(--green-ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--green-deep);
  margin:0 0 .5em 0;
  line-height:1.15;
  letter-spacing:-0.01em;
  font-weight:700;
}

h1{ font-size:clamp(2.4rem, 4.4vw, 3.6rem); font-weight:700; }
h2{ font-size:clamp(1.7rem, 3vw, 2.5rem); font-weight:700; max-width:24ch; }
h3{ font-size:1.3rem; font-weight:700; }
h4{ font-size:1.08rem; font-weight:600; }

h2.light, .light{ color:var(--white); }

p{ margin:0 0 1em 0; }

ul{ margin:0; padding:0; list-style:none; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--green-mid);
  margin:0 0 1em 0;
  display:flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:16px;
  height:2px;
  background:var(--green);
}
.eyebrow-light{ color:#9FD98A; }
.eyebrow-light::before{ background:#9FD98A; }

.section-lede{
  max-width:64ch;
  color:var(--slate);
  font-size:1.05rem;
  font-weight:400;
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.85em 1.6em;
  border-radius:2px;
  font-weight:600;
  font-size:.95rem;
  font-family:var(--font-body);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{
  background:var(--green);
  color:var(--white);
}
.btn-primary:hover{ background:var(--green-mid); transform:translateY(-1px); }
.btn-ghost{
  background:transparent;
  color:var(--green-deep);
  border-color:var(--green-deep);
}
.btn-ghost:hover{ background:var(--green-deep); color:var(--white); }
.btn-ghost-light{
  color:var(--white);
  border-color:rgba(255,255,255,.55);
}
.btn-ghost-light:hover{ background:var(--white); color:var(--green-deep); }
.btn-block{ width:100%; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--sage-line);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:96px;
}
.brand-mark{ width:var(--logo-w); height:auto; }

.main-nav{
  display:flex;
  gap:2.2rem;
  font-family:var(--font-body);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.01em;
}
.main-nav a{
  position:relative;
  padding:.3em 0;
  margin-right:2.2rem;
  color:var(--green-deep);
}
.main-nav a:last-child{ margin-right:0; }
.main-nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:2px;
  background:var(--green);
  transition:width .2s ease;
}
.main-nav a:hover::after{ width:100%; }
.mobile-cta-link{ display:none; }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.nav-toggle span{
  width:22px; height:2px; background:var(--green-deep); display:block;
}

/* =========================================================
   HERO (white background)
   ========================================================= */
.hero{
  padding:64px 0 40px;
  background:var(--white);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
}
.hero-copy .accent{ color:var(--green); }
.hero-lede{
  color:var(--slate);
  font-size:1.08rem;
  max-width:48ch;
}
.hero-actions{
  display:flex;
  gap:1rem;
  margin:1.6rem 0 0;
  flex-wrap:wrap;
}
.hero-stats{
  display:flex;
  justify-content:space-between;
  gap:2rem;
  border-top:1px solid var(--sage-line);
  margin-top:2.8rem;
  padding-top:1.6rem;
}
.hero-stats dt{
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:700;
  color:var(--green);
}
.hero-stats dd{
  margin:0;
  font-size:.82rem;
  color:var(--slate);
  max-width:17ch;
}
.hero-diagram{
  position:relative;
  display:flex;
  align-items:center;
}
.orbit-svg{ width:100%; height:auto; display:block; }

@keyframes orbit-spin{ to{ transform:rotate(360deg); } }

.layers-svg{ width:100%; height:auto; display:block; }

.layer{ stroke:var(--white); stroke-width:2; }
.layer-1{ fill:#8BCB6E; }
.layer-2{ fill:var(--green); }
.layer-3{ fill:var(--green-mid); }
.layer-4{ fill:var(--green-deep); }
.layer-5{ fill:var(--green-ink); }

.layer-arrow{ fill:rgba(255,255,255,.55); }

.layer-label{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
  letter-spacing:.01em;
}
.layer-sublabel{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.02em;
}
.layer-label-dark{ fill:var(--green-deep); }
.layer-label-light{ fill:var(--white); }

/* =========================================================
   SECTIONS — generic
   ========================================================= */
.section{ padding:88px 0; }
.section-tint{ background:var(--sage); }
.section-divider{ border-top:1px solid var(--sage-line); }
.section-dark{ background:var(--green-deep); }
.section-dark p{ color:#CFE3C6; }
.section-dark .section-lede{ color:#CFE3C6; }

/* =========================================================
   CIRCULAR INFRASTRUCTURE MODEL (challenge-grid reused)
   ========================================================= */
.challenge-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  margin-top:2.4rem;
}
.challenge-grid-4{ grid-template-columns:repeat(2, 1fr); }
.challenge-card{
  background:var(--white);
  border:1px solid var(--sage-line);
  border-top:3px solid var(--green);
  border-radius:3px;
  padding:1.5rem 1.6rem 1.7rem;
}
.challenge-num{
  font-family:var(--font-mono);
  color:var(--slate-light);
  font-size:.85rem;
  margin-bottom:.4em;
}
.challenge-card p:not(.challenge-num){ color:var(--slate); }
.card-link{
  display:inline-block;
  color:var(--green-mid);
  font-weight:600;
  font-size:.92rem;
  margin-top:.2em;
}
.card-link:hover{ text-decoration:underline; }

/* =========================================================
   GLOBE ILLUSTRATION (Solutions page hero)
   ========================================================= */
.globe-svg{ width:100%; height:auto; display:block; }

.globe-orbit-ring{
  fill:none;
  stroke:var(--sage-line);
  stroke-width:1.4;
  stroke-dasharray:2 8;
  transform-box:fill-box;
  transform-origin:50% 50%;
  animation:orbit-spin 90s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .globe-orbit-ring{ animation:none; } }

.globe-spoke{ stroke:var(--sage-line); stroke-width:1.4; }
.globe-outline{ stroke:var(--green-deep); stroke-width:1.6; }
.globe-line{ fill:none; stroke:var(--green); stroke-opacity:.35; stroke-width:1.2; }
.globe-node{ fill:var(--white); stroke:var(--green-deep); stroke-width:2; }
.globe-label{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  fill:var(--green-deep);
}

/* =========================================================
   SOLUTIONS PAGE — solution blocks with expanded detail items
   ========================================================= */
.solution-block{ padding:2.6rem 0; }
.solution-block ~ .solution-block{ border-top:1px solid var(--sage-line); }
.section-lede + .solution-block{ margin-top:1rem; }
.solution-block h3{ margin-bottom:.6em; }
.solution-block > p:not(.cap-index){ color:var(--slate); }

.detail-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-top:1.8rem;
}
.detail-grid-2{ grid-template-columns:repeat(2, 1fr); }
.detail-item{
  background:var(--white);
  border:1px solid var(--sage-line);
  border-left:3px solid var(--green);
  border-radius:3px;
  padding:1rem 1.1rem;
}
.detail-item h4{ margin:0 0 .4em 0; font-size:.96rem; }
.detail-item p{ margin:0; color:var(--slate); font-size:.85rem; }

.value-grid{ margin-top:2.2rem; }
.value-item{ border-left-color:var(--green-mid); }

.service-sync-grid{ margin-top:2.2rem; }

.services-sync-link{ margin-top:1.6rem; }

/* =========================================================
   HUB-AND-SPOKE ILLUSTRATION (Industries page hero)
   ========================================================= */
.hub-svg{ width:100%; height:auto; display:block; }

.hub-spoke{ stroke:var(--sage-line); stroke-width:1.4; }

.hub-node{
  fill:var(--white);
  stroke:var(--green-deep);
  stroke-width:2;
}

.hub-label{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  fill:var(--green-deep);
}

.hub-center circle{ fill:var(--green-deep); }
.hub-center-label{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  fill:var(--white);
}

/* =========================================================
   INDUSTRIES PAGE — industry detail blocks
   ========================================================= */
.industry-detail{ padding:2.2rem 0; }
.industry-detail ~ .industry-detail{ border-top:1px solid var(--sage-line); }
.section-lede + .industry-detail{ margin-top:1rem; }

.industry-detail-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:.5em;
}
.industry-detail-header h3{ margin:0; }

.pillar-tags{ display:flex; gap:.5rem; flex-wrap:wrap; }
.pillar-tag{
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--green-mid);
  border:1px solid var(--sage-line);
  border-radius:20px;
  padding:.25em .8em;
  white-space:nowrap;
}

.industry-detail > p{ color:var(--slate); max-width:80ch; }

/* =========================================================
   VALUE CHAIN FLOW ILLUSTRATION (Resources page hero)
   ========================================================= */
.chain-svg{ width:100%; height:auto; display:block; }

.chain-box{ stroke:none; }
.chain-box-1{ fill:#8BCB6E; }
.chain-box-2{ fill:var(--green); }
.chain-box-3{ fill:var(--green-deep); }

.chain-arrow{ fill:var(--slate-light); }

.chain-title{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
  letter-spacing:.01em;
}
.chain-title-dark{ fill:var(--green-deep); }
.chain-title-light{ fill:var(--white); }

.chain-tag rect{ fill:rgba(255,255,255,.85); }
.chain-tag text{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
}
.chain-tag-dark text{ fill:var(--green-deep); }
.chain-tag-light rect{ fill:rgba(255,255,255,.92); }
.chain-tag-light text{ fill:var(--green-deep); }

/* =========================================================
   FAQ ACCORDION (Resources page)
   ========================================================= */
/* =========================================================
   GROWTH CHART ILLUSTRATION (Company page hero)
   ========================================================= */
.growth-svg{ width:100%; height:auto; display:block; }

.growth-baseline{ stroke:var(--sage-line); stroke-width:1.4; }
.growth-gridline{ stroke:var(--sage-line); stroke-width:1; stroke-dasharray:2 6; }

.growth-area{ fill:url(#growthFill); }
.growth-line{
  fill:none;
  stroke:var(--green);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.growth-node{
  fill:var(--white);
  stroke:var(--green-deep);
  stroke-width:2.5;
}
.growth-tag{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  fill:var(--green-mid);
}
.growth-name{
  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  fill:var(--green-deep);
}

.positioning-quote-light{
  font-style:italic;
  color:var(--green-deep);
  border-left:3px solid var(--green);
  padding-left:1.1rem;
  margin-top:2rem;
  max-width:70ch;
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-email-block{
  margin:1.8rem 0;
  padding:1.2rem 1.4rem;
  background:var(--sage);
  border-left:3px solid var(--green);
  border-radius:3px;
  display:inline-block;
}
.contact-email-label{
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--green-mid);
  margin:0 0 .3em 0;
}
.contact-email-link{
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:700;
  color:var(--green-deep);
}
.contact-email-link:hover{ color:var(--green); }

.reach-svg{ width:100%; height:auto; display:block; }
.reach-arc{
  fill:none;
  stroke:var(--green);
  stroke-width:2.5;
  stroke-dasharray:6 8;
  stroke-linecap:round;
}
.reach-node{
  fill:var(--white);
  stroke:var(--green-deep);
  stroke-width:2.5;
}
.reach-label{
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  fill:var(--green-deep);
}
.reach-sublabel{
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.02em;
  fill:var(--slate);
}

.offices-grid{ margin-top:2.2rem; }
.offices-note{ margin-top:2rem; color:var(--slate); }

/* =========================================================
   LEGAL PAGES (Privacy, Terms, Cookies)
   ========================================================= */
.legal-hero{ padding:64px 0 40px; }
.legal-hero h1{ margin-bottom:.4em; }
.legal-updated{
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--slate-light);
  margin:0;
}

.legal-content{ max-width:76ch; }
.legal-content h2{
  font-size:1.3rem;
  margin-top:2.2rem;
  margin-bottom:.6em;
}
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ color:var(--slate); }
.legal-content a{ color:var(--green-mid); text-decoration:underline; }
.legal-content a:hover{ color:var(--green); }

.legal-list{ list-style:none; margin:0 0 1em 0; padding:0; }
.legal-list li{
  position:relative;
  padding-left:1.3em;
  margin-bottom:.6em;
  color:var(--slate);
}
.legal-list li::before{
  content:"";
  position:absolute;
  left:0; top:.55em;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--green);
}
.legal-list strong{ color:var(--green-deep); }

.legal-table{
  width:100%;
  border-collapse:collapse;
  margin:1.2rem 0 1.8rem;
  font-size:.92rem;
}
.legal-table th, .legal-table td{
  border:1px solid var(--sage-line);
  padding:.7em .9em;
  text-align:left;
}
.legal-table th{
  background:var(--sage);
  font-family:var(--font-mono);
  font-size:.76rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--green-deep);
}
.legal-table td{ color:var(--slate); }

.legal-crosslinks{ margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--sage-line); }

.faq-list{ margin-top:2rem; max-width:80ch; }
.faq-item{
  border-top:1px solid var(--sage-line);
  padding:1.1rem 0;
}
.faq-item:first-child{ border-top:none; }
.faq-item summary{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.02rem;
  color:var(--green-deep);
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  font-family:var(--font-mono);
  font-size:1.2rem;
  color:var(--green);
  flex-shrink:0;
}
.faq-item[open] summary::after{ content:"−"; }
.faq-item p{
  color:var(--slate);
  margin:.9em 0 0;
  max-width:70ch;
}

/* =========================================================
   SOLUTIONS PAGE — nav active state, jump nav, detail blocks
   ========================================================= */
.nav-active{ color:var(--green); }
.nav-active::after{ width:100%; }

.solutions-jump{
  background:var(--sage);
  border-bottom:1px solid var(--sage-line);
}
.solutions-jump-row{
  display:flex;
  gap:1.8rem;
  padding:16px 32px;
  flex-wrap:nowrap;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:thin;
}
.solutions-jump-row a{
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--green-deep);
  margin-right:1.6rem;
  flex-shrink:0;
}
.solutions-jump-row a:last-child{ margin-right:0; }
.solutions-jump-row a:hover{ color:var(--green); }

.cap-index{
  font-family:var(--font-mono);
  font-size:.8rem;
  font-weight:700;
  color:var(--green-mid);
  margin:0 0 .4em 0;
}

/* =========================================================
   PLATFORM / CAPABILITY CARDS (Solutions)
   ========================================================= */
.platform-block{ margin-top:3rem; }
.platform-block-first{ margin-top:0; }
.platform-head{
  border-bottom:1px solid var(--sage-line);
  padding-bottom:1rem;
  margin-bottom:1.6rem;
  display:flex;
  align-items:baseline;
  gap:1rem;
  flex-wrap:wrap;
}
.platform-head p{ margin:0; color:var(--slate); }

.capability-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.capability-card, .outcome-card{
  background:var(--white);
  border:1px solid var(--sage-line);
  border-radius:3px;
  padding:1.6rem 1.6rem 1.8rem;
  position:relative;
}

.detail-item h4, .capability-card h4, .outcome-card h4{
  display:flex;
  align-items:flex-start;
  gap:.55em;
}
.detail-item h4::before, .capability-card h4::before, .outcome-card h4::before{
  content:"";
  flex-shrink:0;
  display:inline-block;
  width:18px;
  height:18px;
  margin-top:.15em;
  border-radius:50%;
  background-color:var(--green);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4 4L19 7' stroke='white' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:center;
  background-size:10px 10px;
}
.outcome-card h4::before{ background-color:#9FD98A; }
.outcome-card h4::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4 4L19 7' stroke='%2316321A' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.office-card h4::before{ display:none; }
.office-card h4{ gap:0; }
.cap-tag{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--green-mid);
  font-weight:700;
  margin-bottom:.6em;
}
.capability-card ul{ margin-top:.8em; }
.capability-card li{
  padding:.35em 0;
  border-top:1px solid var(--sage-line);
  color:var(--slate);
  font-size:.92rem;
}
.capability-card li:first-child{ border-top:none; }

/* =========================================================
   VALUE CREATION (energy / carbon / water)
   ========================================================= */
.outcomes-strip{ background:var(--green-deep); color:var(--white); }
.outcomes-lede{ color:#CFE3C6 !important; max-width:70ch; margin-bottom:2.4rem; }
.outcomes-cards-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.outcomes-cards-4{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}
.outcome-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.16);
}
.outcome-card h4{ color:var(--white); }
.outcome-card .cap-tag{ color:#9FD98A; }
.outcome-card p{ color:#CFE3C6; }
.flow-mini{
  font-family:var(--font-mono);
  font-size:.76rem;
  color:#9FD98A !important;
  border-left:2px solid var(--green);
  padding-left:.7em;
  margin-bottom:.8em;
}

/* =========================================================
   SERVICES
   ========================================================= */
.services-lifecycle{
  display:flex;
  gap:0;
  margin:2rem 0 2.6rem;
  border:1px solid var(--sage-line);
  border-radius:3px;
  overflow:hidden;
}
.lifecycle-step{
  flex:1;
  text-align:center;
  padding:1.1rem .5rem;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.92rem;
  color:var(--green-deep);
  border-right:1px solid var(--sage-line);
  background:var(--sage);
}
.lifecycle-step:last-child{ border-right:none; background:var(--green); color:var(--white); }

.services-grid{ grid-template-columns:repeat(3, 1fr); }

/* =========================================================
   INDUSTRIES
   ========================================================= */
.industry-list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px 24px;
  margin-top:2.2rem;
}
.industry-list li{
  background:var(--white);
  border:1px solid var(--sage-line);
  border-left:3px solid var(--green);
  padding:1.1rem 1.2rem;
}
.industry-list h4{
  margin:0 0 .35em 0;
  font-size:1rem;
  color:var(--green-deep);
}
.industry-list p{
  margin:0;
  font-size:.88rem;
  color:var(--slate);
}

/* =========================================================
   VIVENT VALUE CHAIN
   ========================================================= */
.chain-table{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:14px;
  align-items:stretch;
  margin:2rem 0;
}
.chain-col{
  background:var(--sage);
  border:1px solid var(--sage-line);
  border-radius:3px;
  padding:1.4rem 1.5rem;
}
.chain-col-core{ background:var(--green); }
.chain-col-core .chain-head, .chain-col-core .chain-list li{ color:var(--white); border-color:rgba(255,255,255,.25); }
.chain-head{
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:700;
  color:var(--green-deep);
  margin-bottom:.8em;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.chain-list li{
  padding:.4em 0;
  border-top:1px solid var(--sage-line);
  font-size:.92rem;
  color:var(--green-ink);
}
.chain-list li:first-child{ border-top:none; }
.chain-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--green);
  font-size:1.4rem;
  font-weight:700;
}
.value-created{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:1rem;
}
.value-created article{
  border-top:3px solid var(--green);
  padding-top:1rem;
}
.value-created p{ color:var(--slate); margin:0; }

/* =========================================================
   COMPANY
   ========================================================= */
.company-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:56px;
  margin-top:2.2rem;
}
.company-purpose h3{ color:var(--white); margin-top:1.6rem; }
.company-purpose h3:first-child{ margin-top:0; }
.company-purpose p{ color:#CFE3C6; }
.positioning-quote{
  font-style:italic;
  color:var(--white) !important;
  border-left:3px solid var(--green);
  padding-left:1.1rem;
  margin-top:1.4rem;
}
.roadmap-list{ display:flex; flex-direction:column; gap:1.4rem; }
.roadmap-list li{
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:1rem;
}
.roadmap-phase{
  font-family:var(--font-mono);
  color:#9FD98A;
  font-size:.78rem;
  margin-bottom:.3em;
}
.roadmap-list h4{ color:var(--white); }
.roadmap-list p{ color:#CFE3C6; margin:0; }

.advantage-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  margin-top:3.4rem;
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:2.2rem;
}
.advantage-row h4{ color:var(--white); }
.advantage-row p{ color:#CFE3C6; font-size:.92rem; margin:0; }

/* =========================================================
   CTA / CONTACT
   ========================================================= */
.contact-section{ background:var(--sage); }
.contact-section-white{ background:var(--white); }
.cta-band{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:40px;
  align-items:center;
}
.cta-band h2{ max-width:18ch; }
.cta-band > div:first-child p{ color:var(--slate); max-width:44ch; margin:0; }
.cta-buttons{
  display:flex;
  flex-direction:column;
  gap:.8rem;
  align-items:flex-start;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--green-deep); padding:60px 0 0; }
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;
  gap:28px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.footer-logo{ width:var(--logo-w); height:auto; filter:brightness(0) invert(1); margin-bottom:1rem; }
.footer-brand p{ color:#9FD98A; font-size:.85rem; margin:0; }
.footer-head{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:#9FD98A;
  margin-bottom:.9em;
  letter-spacing:.03em;
}
.footer-col a{
  display:block;
  color:#CFE3C6;
  font-size:.9rem;
  padding:.3em 0;
}
.footer-col a:hover{ color:var(--white); }
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:20px 32px;
  font-size:.8rem;
  color:#9FD98A;
}
.footer-bottom p{ margin:0; }
.footer-legal{
  display:flex;
  gap:1.4rem;
  flex-wrap:wrap;
}
.footer-legal a{ color:#9FD98A; margin-right:1.4rem; }
.footer-legal a:last-child{ margin-right:0; }
.footer-legal a:hover{ color:var(--white); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .detail-grid{ grid-template-columns:repeat(2, 1fr); }
  .outcomes-cards-3{ grid-template-columns:1fr; }
  .outcomes-cards-4{ grid-template-columns:repeat(2, 1fr); }
  .company-grid{ grid-template-columns:1fr; gap:36px; }
  .cta-band{ grid-template-columns:1fr; }
  .cta-buttons{ flex-direction:row; }
  .capability-grid, .challenge-grid, .challenge-grid-4, .services-grid{ grid-template-columns:repeat(2, 1fr); }
  .industry-list{ grid-template-columns:repeat(2, 1fr); }
  .advantage-row{ grid-template-columns:repeat(2, 1fr); }
  .chain-table{ grid-template-columns:1fr; }
  .chain-arrow{ transform:rotate(90deg); padding:6px 0; }
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; }
}

@media (max-width: 720px){
  .wrap{ padding:0 20px; }
  :root{ --logo-w: 150px; }
  .header-row{ height:80px; }
  .main-nav{
    position:absolute; top:80px; left:0; right:0;
    background:var(--white);
    flex-direction:column;
    gap:0;
    border-bottom:1px solid var(--sage-line);
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
  }
  .main-nav.open{ max-height:420px; }
  .main-nav a{ padding:1rem 20px; border-top:1px solid var(--sage-line); }
  .mobile-cta-link{
    display:block;
    margin:14px 20px !important;
    padding:.8em 1em !important;
    background:var(--green);
    color:var(--white) !important;
    text-align:center;
    border-radius:2px;
    font-weight:600;
    border-top:none !important;
  }
  .mobile-cta-link:hover{ background:var(--green-mid); }
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .capability-grid, .challenge-grid, .challenge-grid-4, .services-grid, .industry-list, .advantage-row, .value-created, .outcomes-cards-4, .detail-grid{
    grid-template-columns:1fr;
  }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-stats{ flex-wrap:wrap; gap:1.6rem; }
  .cta-buttons{ flex-direction:column; width:100%; }
  .cta-buttons .btn{ width:100%; }
  .section{ padding:60px 0; }
}