h1 {
	/* color: #1eb313; */
	color: #c7cbc7;

}

section {
	margin:20px;
	padding: 50px;
}

#benefits {
	gap: 40px;
}

.benefitsIcon {
	height:120px;
}

.hero{
  position: relative;
  height: 340px;      /* slimmer showcase */
  overflow: hidden;   /* hide cropped parts */
  background: #000;
}

.heroImg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fill the box */
  object-position: right center; /* keep right side visible */
}
.hero--contain .heroImg{
  object-fit: contain;
  object-position: center right;
  padding: 24px 8% 24px 0;
  box-sizing: border-box;
}
/* Product showcase heroes: fill the banner (no letterboxed black frame) */
.hero--showcase{
  height: clamp(360px, 42vw, 480px);
  background: #0a0f0c;
}
.hero--contain.hero--showcase .heroImg,
.hero--showcase .heroImg{
  object-fit: cover;
  object-position: center right;
  padding: 0;
  box-sizing: border-box;
}

/* Black gradient overlay, heavier on the left fading to clear on the right */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.6) 35%,
    rgba(0, 0, 0, 0.2) 70%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

:root{
  /* shared left offset for hero + landing content so they line up */
  --content-inset: clamp(24px, 5vw, 62px);
}

.heroContent{
  position: relative;
  z-index: 2;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  height: 100%;
}

/* Left-justified, but aligned to the same centered container as the page body
   so the hero text lines up with the main content (and tracks it on wide screens). */
.hero .heroContent{
  padding-left: var(--content-inset);
  padding-right: 24px;
}

/* Vertical green accent bar running alongside the text block */
.heroContent::before{
  content: "";
  position: absolute;
  left: calc(var(--content-inset) - 18px);
  top: 22%;
  bottom: 22%;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6fce57, #007A33);
  box-shadow: 0 0 18px rgba(95, 194, 74, 0.55);
  transform-origin: top center;
  animation: heroBar 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Eyebrow / section kicker */
.heroKicker{
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8fe07a;
  margin-bottom: 16px;
  animation: heroRise 0.7s ease 0.05s both;
}

.heroContent h1{
  color: #fff;                 /* override washed-out global h1 color */
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
  animation: heroRise 0.7s ease 0.13s both;
}

.heroSubtitle{
  margin: 18px 0 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.5;
  font-weight: 400;
  color: #e8efe9;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  animation: heroRise 0.7s ease 0.21s both;
}

.heroActions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
  animation: heroRise 0.7s ease 0.29s both;
}

.heroBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border-radius: 999px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.heroBtn--primary{
  background: linear-gradient(90deg, #56AF40, #007A33);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0, 122, 51, 0.4);
}

.heroBtn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 122, 51, 0.5);
  color: #fff;
}

.heroBtn--ghost{
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
}

.heroNote{
  position: absolute;
  right: clamp(12px, 2vw, 24px);
  bottom: 12px;
  z-index: 2;
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.heroBtn--ghost:hover{
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

@keyframes heroRise{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}

@keyframes heroBar{
  from{ opacity: 0; transform: scaleY(0); }
  to{ opacity: 1; transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce){
  .heroKicker,
  .heroContent h1,
  .heroSubtitle,
  .heroActions,
  .heroContent::before{
    animation: none;
  }
}

@media (max-width: 768px){
  .hero{ height: 300px; }
  .hero--showcase{ height: min(360px, 58vw); }
  .hero::after{
    /* darken more on small screens so the wrapped text stays legible */
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.6) 60%,
      rgba(0, 0, 0, 0.3) 100%
    );
  }
  .heroKicker{ margin-bottom: 12px; }
}

/* ==========================================================================
   Landing page
   ========================================================================== */
.home{ overflow-x: clip; }
html:has(body.home),
:root:has(body.home){
  scroll-behavior: auto;
  overflow-x: clip;
  overflow-y: auto;
}

/* Align section content to the same inset as the hero text */
.home-section .container,
.home-cta .container{
  padding-left: var(--content-inset);
  padding-right: var(--content-inset);
}

.home-section{
  margin: 0;
  padding: clamp(56px, 8vw, 104px) 0;
}

.home-section--alt{
  background: #f4f8f2;
  border-top: 1px solid #e6efe3;
  border-bottom: 1px solid #e6efe3;
}

/* Shared eyebrow / kicker */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2f9d3f;
  margin-bottom: 14px;
}

.eyebrow::before{
  content: "";
  width: 26px;
  height: 2px;
  background: #56AF40;
}

.home-section h2{
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  margin-bottom: 16px;
}

.lead{
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: #3c4a40;
}

.home-section p{ color: #4a544c; }

/* Two-column split */
.home-split{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.home-split > *{ min-width: 0; max-width: 100%; }

/* Top-aligned split (e.g. a tall form beside a short info column) */
.home-split--top{ align-items: start; }

.home-copy{ max-width: 560px; }

.home-inline-links{
  margin-top: 18px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.home-inline-links a{
  color: var(--green, #007A33);
  text-decoration: none;
}
.home-inline-links a:hover{
  text-decoration: underline;
}
.home-inline-links span{
  color: #6b7a70;
  font-weight: 500;
}

.home-media{ display: flex; justify-content: center; }

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

/* photos get a card look; the topology diagram stays clean */
.home-media img[src*="marketing"]{
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(8, 40, 20, 0.18);
}

/* Centered section heading (benefits) */
.section-head{
  max-width: 720px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: center;
}

.section-head .eyebrow{ justify-content: center; }

/* Benefit cards */
.cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}

.card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 28px 26px;
  background: #fff;
  border: 1px solid #e6efe3;
  border-radius: 18px;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(8, 40, 20, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #56AF40, #007A33);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(8, 40, 20, 0.14);
  border-color: #cfe6c8;
}

.card:hover::before{ transform: scaleX(1); }

.card__icon{ height: 74px; width: auto; margin-bottom: 18px; }

.card h3{ font-size: 20px; line-height: 1.25; margin-bottom: 10px; }

.card p{
  font-size: 14.5px;
  line-height: 1.6;
  color: #4a544c;
  margin-bottom: 18px;
}

.card__link{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #007A33;
}

.card__link::after{
  content: "\2192";
  transition: transform 0.2s ease;
}

.card:hover .card__link::after{ transform: translateX(4px); }

/* Nested link inside article.card (SEO-friendly list markup) */
.card > a{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.card--study > a{ align-items: stretch; }

/* Case-study cards (photo on top) */
.card--study{ padding: 0; }

.card--study .card__media{
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid #e6efe3;
}

.card--study .card__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 26px 24px;
}

.card--study p{ margin-bottom: 14px; }

/* Long-form article column for content-heavy pages */
.prose{ max-width: 760px; }

.prose .lead{ margin-bottom: 22px; }

.prose > p{ margin-bottom: 16px; }

.prose h2,
.prose h5{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #06622a;
  margin: 28px 0 8px;
  padding-left: 14px;
  border-left: 3px solid #56AF40;
}

.prose .callout{
  margin: 28px 0 0;
  padding: 18px 22px;
  background: #f4f8f2;
  border: 1px solid #e6efe3;
  border-left: 4px solid #56AF40;
  border-radius: 12px;
}

.prose .callout p{ margin: 0; }

/* FAQ page — split intro + grouped accordion */
.page-faq{
  --faq-ink: #14201c;
  --faq-muted: #4a544c;
  --faq-line: #d7e4d4;
  --faq-sand: #f3f7f1;
  --faq-green: #007A33;
  --faq-leaf: #56AF40;
}

.faq-page{
  padding: clamp(36px, 6vw, 72px) 0;
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(86, 175, 64, 0.08), transparent 55%),
    linear-gradient(180deg, #fbfcfb 0%, #f3f7f1 100%);
}

.faq-page__layout{
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.35fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.faq-page__intro{
  position: sticky;
  top: 96px;
}

.faq-page__intro h2{
  margin: 0 0 12px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.15;
  color: var(--faq-ink);
}

.faq-page__intro .lead{
  margin: 0 0 22px;
  color: var(--faq-muted);
  line-height: 1.65;
}

.faq-jump{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.faq-jump__link{
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--faq-line);
  background: #fff;
  color: var(--faq-ink);
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.faq-jump__link:hover,
.faq-jump__link:focus-visible{
  border-color: var(--faq-green);
  color: var(--faq-green);
  background: #fff;
}

.faq-page__count{
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7a70;
}

.faq-page__panels{
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.faq-group{
  scroll-margin-top: 110px;
}

.faq-group__head{
  margin-bottom: 10px;
}

.faq-group__label{
  display: inline-block;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faq-green);
}

/* FAQ accordion (native <details>, no JS dependency) */
.faq{
  max-width: none;
  margin: 0;
  background: #fff;
  border: 1px solid var(--faq-line);
}

.faq__item{
  border-bottom: 1px solid var(--faq-line);
  background: #fff;
  overflow: hidden;
}

.faq__item:last-child{ border-bottom: 0; }

.faq__q{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  list-style: none;
  cursor: pointer;
  padding: 18px 18px 18px 16px;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  color: var(--faq-ink);
  transition: background 0.18s ease, color 0.18s ease;
}

.faq__q::-webkit-details-marker{ display: none; }

.faq__num{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--faq-leaf);
  min-width: 1.6em;
}

.faq__q-text{ min-width: 0; }

.faq__icon{
  width: 28px;
  height: 28px;
  border: 1px solid var(--faq-line);
  background: var(--faq-sand);
  position: relative;
  flex: 0 0 auto;
}

.faq__icon::before,
.faq__icon::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--faq-green);
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.faq__icon::after{
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item[open] .faq__q{
  background: var(--faq-sand);
  box-shadow: inset 3px 0 0 var(--faq-green);
  color: var(--faq-ink);
}

.faq__item[open] .faq__num{ color: var(--faq-green); }

.faq__item[open] .faq__icon{
  border-color: var(--faq-green);
  background: #fff;
}

.faq__item[open] .faq__icon::after{
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

.faq__q:hover .faq__icon{
  border-color: var(--faq-leaf);
}

.faq__a{
  padding: 0 18px 20px 54px;
  border-top: 0;
  animation: faqAnswerIn 0.22s ease;
}

.faq__a > *:last-child{ margin-bottom: 0; }

.faq__a p{
  margin: 0;
  color: var(--faq-muted);
  line-height: 1.7;
  max-width: 58ch;
}

@keyframes faqAnswerIn{
  from{ opacity: 0; transform: translateY(-4px); }
  to{ opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px){
  .faq-page__layout{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .faq-page__intro{
    position: static;
  }
}

@media (max-width: 560px){
  .faq__q{
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 16px 14px;
    font-size: 15px;
  }
  .faq__a{ padding: 0 14px 18px 44px; }
}

/* Modern form fields */
.form-modern input[type='text'],
.form-modern input[type='email'],
.form-modern textarea{
  width: 100%;
  padding: 13px 16px;
  margin-bottom: 16px;
  border: 1px solid #d8e3d4;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: #33263e;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-modern input[type='text']:focus,
.form-modern input[type='email']:focus,
.form-modern textarea:focus{
  outline: none;
  border-color: #56AF40;
  box-shadow: 0 0 0 3px rgba(86, 175, 64, 0.15);
}

.form-modern textarea{ resize: vertical; min-height: 150px; }

.form-modern .form-check{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 20px;
  font-size: 14px;
  line-height: 1.5;
}

.form-modern .form-check input{ margin-top: 3px; }

.form-modern button[type='submit']{ border: none; cursor: pointer; }
.form-modern button[type='submit']:disabled{ opacity: 0.65; cursor: wait; }
.form-legal{
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #5c6759;
}
.form-hp{
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}
.form-status{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
}
.form-status--ok{ color: #2d7a22; }
.form-status--err{ color: #b42318; }
#result.form-status{ margin: 8px 0 0; }
#footer .form-status--ok{ color: #8be07a; }
#footer .form-status--err{ color: #ff8a80; }
.copyright a{ color: inherit; text-decoration: underline; }

/* Contact info card */
.contact-card{
  background: #fff;
  border: 1px solid #e6efe3;
  border-radius: 18px;
  padding: 30px 30px 26px;
  box-shadow: 0 6px 20px rgba(8, 40, 20, 0.05);
  overflow: hidden;
}

.contact-card h3{
  font-size: 18px;
  font-family: 'Poppins', Arial, sans-serif;
  margin: 0 0 4px;
}

.contact-card__note{
  margin: 0 0 14px;
  font-size: 13px;
  color: #6b7a70;
}

.contact-card + .contact-card{ margin-top: 22px; }

.contact-list{ list-style: none; padding: 0; margin: 0; }

.contact-list li{
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  line-height: 1.5;
  color: #4a544c;
}

.contact-list li:last-child{ margin-bottom: 0; }

.contact-list li svg{
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  fill: #56AF40;
}

.contact-list a{ color: #007A33; }

.contact-map{
  margin-top: clamp(40px, 6vw, 64px);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #e6efe3;
  box-shadow: 0 10px 30px rgba(8, 40, 20, 0.08);
  line-height: 0;
}

.contact-map iframe{ width: 100%; height: 420px; border: 0; display: block; }

.contact-map--card{
  margin: -30px -30px 22px;
  border: 0;
  border-bottom: 1px solid #e6efe3;
  border-radius: 18px 18px 0 0;
  box-shadow: none;
}

.contact-map--card iframe{ height: 240px; }

/* Photographic media in a split gets a rounded card frame */
.home-media .media-photo{
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(8, 40, 20, 0.16);
}

/* Buttons */
.btn-primary,
.btn-light{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary{
  margin-top: 10px;
  background: linear-gradient(90deg, #56AF40, #007A33);
  color: #fff;
}

.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 122, 51, 0.3);
  color: #fff;
}

.btn-light{ background: #fff; color: #06622a; }

.btn-light:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  color: #06622a;
}

/* Closing CTA band */
.home-cta{
  margin: 0;
  padding: clamp(40px, 6vw, 64px) 0;
  background: linear-gradient(100deg, #56AF40, #007A33);
  color: #fff;
}

.home-cta__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.home-cta h2{ color: #fff; margin-bottom: 6px; }

.home-cta p{ color: rgba(255, 255, 255, 0.92); margin: 0; }
.home-cta p a{ color: #fff; font-weight: 600; }

@media (max-width: 860px){
  .home-split{ grid-template-columns: 1fr; }
  .home-copy{ max-width: none; }
}

/* Landing page: fixed hero that the body scrolls up and over */
body.home .hero{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--hero-h);
  z-index: 0;
}
/* Full-frame network: dark upper left, mesh rising on the right */
body.home .heroImg{
  object-position: center center;
}

/* The page content is the opaque layer that slides over the fixed hero.
   Avoid backdrop-filter here - blurring a fixed hero + animated SVG on every
   scroll frame is the main source of homepage jank. */
body.home main{
  position: relative;
  z-index: 1;
  overflow-x: clip;
  margin-top: var(--hero-h);
  background-color: #0b0f0d;
  background-image:
    radial-gradient(140% 120% at 50% 0%, transparent 58%, rgba(0, 0, 0, 0.32)),
    radial-gradient(900px 520px at 88% 0%, rgba(86, 175, 64, 0.13), transparent 60%),
    radial-gradient(760px 520px at -10% 16%, rgba(0, 122, 51, 0.10), transparent 55%),
    radial-gradient(820px 620px at 105% 100%, rgba(86, 175, 64, 0.08), transparent 60%);
  background-repeat: no-repeat;
  box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.55);   /* soft seam where it overlaps the hero */
}

/* Data pulses: light traveling along link lines, glowing beneath the frosted glass */
.data-pulses{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;            /* behind the hero + the glass body, blurred by the panel */
  pointer-events: none;
}

.data-pulses .wire{ stroke: rgba(111, 206, 87, 0.16); stroke-width: 1.25; fill: none; }

/* Nodes idle dim, then occasionally ramp up bright + glow, like a node on the
   network receiving power, before settling back. Timing is varied per-node
   (inline) so surges ripple around the mesh at different moments. */
.data-pulses .node{
  fill: rgba(140, 220, 120, 0.4);
  transform-box: fill-box;
  transform-origin: center;
  animation-name: nodePower;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes nodePower{
  0%, 62%, 100%{
    fill: rgba(140, 220, 120, 0.35);
    transform: scale(1);
  }
  78%{
    fill: #d8ffc7;
    transform: scale(1.55);
  }
}

.data-pulses .pulse{
  fill: none;
  stroke: #b6ff9c;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 11 100;         /* a longer, brighter streak on a normalized (pathLength=100) line */
  animation-name: dataPulse;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes dataPulse{
  from{ stroke-dashoffset: 100; }
  to{ stroke-dashoffset: -11; }
}

@media (prefers-reduced-motion: reduce){
  .data-pulses{ display: none; }
}

/* Freeze decorative network motion while scrolling to keep the compositor free */
body.home.is-scrolling .data-pulses,
body.home.is-scrolling main::before,
body.home.is-scrolling .section-net *{
  animation-play-state: paused !important;
}

/* Pulse mesh only matters under the fixed hero - hide without display:none
   so covering it mid-scroll does not force a layout jump */
body.home.hero-covered .data-pulses{
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Animated network constellation drifting behind the content (nodes + links) */
body.home main::before{
  content: "";
  position: absolute;
  inset: -70px;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='320'%3E%3Cg%20stroke='rgba(111,206,87,0.16)'%20stroke-width='1'%3E%3Cline%20x1='30'%20y1='40'%20x2='120'%20y2='20'/%3E%3Cline%20x1='120'%20y1='20'%20x2='210'%20y2='70'/%3E%3Cline%20x1='210'%20y1='70'%20x2='290'%20y2='30'/%3E%3Cline%20x1='30'%20y1='40'%20x2='60'%20y2='140'/%3E%3Cline%20x1='120'%20y1='20'%20x2='160'%20y2='120'/%3E%3Cline%20x1='210'%20y1='70'%20x2='160'%20y2='120'/%3E%3Cline%20x1='60'%20y1='140'%20x2='160'%20y2='120'/%3E%3Cline%20x1='160'%20y1='120'%20x2='250'%20y2='180'/%3E%3Cline%20x1='60'%20y1='140'%20x2='40'%20y2='240'/%3E%3Cline%20x1='160'%20y1='120'%20x2='140'%20y2='260'/%3E%3Cline%20x1='250'%20y1='180'%20x2='230'%20y2='300'/%3E%3Cline%20x1='40'%20y1='240'%20x2='140'%20y2='260'/%3E%3Cline%20x1='140'%20y1='260'%20x2='230'%20y2='300'/%3E%3Cline%20x1='250'%20y1='180'%20x2='300'%20y2='230'/%3E%3Cline%20x1='40'%20y1='240'%20x2='90'%20y2='300'/%3E%3Cline%20x1='140'%20y1='260'%20x2='90'%20y2='300'/%3E%3C/g%3E%3Cg%20fill='rgba(140,220,120,0.55)'%3E%3Ccircle%20cx='30'%20cy='40'%20r='2.5'/%3E%3Ccircle%20cx='120'%20cy='20'%20r='2'/%3E%3Ccircle%20cx='210'%20cy='70'%20r='2.5'/%3E%3Ccircle%20cx='290'%20cy='30'%20r='2'/%3E%3Ccircle%20cx='60'%20cy='140'%20r='3'/%3E%3Ccircle%20cx='160'%20cy='120'%20r='2.5'/%3E%3Ccircle%20cx='250'%20cy='180'%20r='2.5'/%3E%3Ccircle%20cx='40'%20cy='240'%20r='2'/%3E%3Ccircle%20cx='140'%20cy='260'%20r='3'/%3E%3Ccircle%20cx='230'%20cy='300'%20r='2.5'/%3E%3Ccircle%20cx='300'%20cy='230'%20r='2'/%3E%3Ccircle%20cx='90'%20cy='300'%20r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 360px 360px;
  background-repeat: repeat;
  opacity: 0.55;
  animation: netDrift 36s ease-in-out infinite alternate;
}

@keyframes netDrift{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(46px, -34px, 0); }
}

@media (prefers-reduced-motion: reduce){
  body.home main::before{ animation: none; }
}

/* Footer rides above the fixed hero too */
body.home #footer-container{
  position: relative;
  z-index: 1;
}

/* top scrim keeps the transparent header legible across the whole image */
body.home .hero::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 210px;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* Landing hero uses a top-weighted scrim (text sits in the upper area) */
body.home .hero::after{
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.5) 30%,
    rgba(0, 0, 0, 0.25) 65%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

/* Landing hero: centered, compact, with CTAs (sits behind the transparent header).
   Text is pushed well below the nav for breathing room. */
body.home .heroContent{
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: clamp(150px, 24vh, 240px) 24px 56px;
}

/* drop the side accent bar when the text is centered */
body.home .heroContent::before{ display: none; }

body.home .heroKicker{
  color: #9fe98a;
  font-size: 12px;
  letter-spacing: 0.28em;
  margin-bottom: 18px;
}

body.home .heroContent h1{
  font-size: clamp(1.7rem, 2.9vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
  max-width: 17ch;
}

body.home .heroSubtitle{
  margin-left: auto;
  margin-right: auto;
  max-width: 48ch;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
}

body.home .heroActions{ justify-content: center; }

@media (max-width: 768px){
  body.home .heroContent{ padding-top: clamp(120px, 20vh, 160px); }
}

/* ==========================================================================
   Dark theme - homepage proof-of-concept (scoped to body.home only)
   Tokenized so it's easy to tune or roll out site-wide later.
   ========================================================================== */
body.home{
  --d-bg: #0b0f0d;
  --d-bg-alt: #10160f;
  --d-surface: #151d17;
  --d-border: #243029;
  --d-text: #e7efe9;
  --d-text-dim: #a7b6ac;
  --d-accent: #6fce57;
  --hero-h: 100vh;
  --hero-h: 100svh;           /* stable on mobile; 100vh jumps as the URL bar hides */
  background-color: var(--d-bg);
}

/* Standard sections stay transparent so the grain + ambient glows show through */
body.home .home-section{
  background-color: transparent;
  background-image: none;
}

/* Alt sections get a faint panel wash + soft offset aurora glows for variation */
body.home .home-section--alt{
  background-color: rgba(255, 255, 255, 0.022);
  background-image:
    radial-gradient(720px 380px at 10% -10%, rgba(86, 175, 64, 0.12), transparent 60%),
    radial-gradient(640px 380px at 92% 110%, rgba(0, 122, 51, 0.09), transparent 60%);
  border-top: 1px solid var(--d-border);
  border-bottom: 1px solid var(--d-border);
}

/* First section the body reveals over the hero - give it a designed "seam" with a
   glowing top edge, a rising green light, and a network grid */
body.home main > .home-section:first-child{
  position: relative;
  background-color: transparent;
  background-image:
    radial-gradient(1100px 480px at 50% -14%, rgba(86, 175, 64, 0.22), transparent 60%),
    radial-gradient(620px 420px at 86% 120%, rgba(0, 122, 51, 0.10), transparent 60%);
  border-top: 1px solid rgba(111, 206, 87, 0.28);
}

/* thin glowing light-line right at the reveal seam */
body.home main > .home-section:first-child::before{
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(111, 206, 87, 0.9), transparent);
  box-shadow: 0 0 18px rgba(111, 206, 87, 0.6);
  pointer-events: none;
}

/* Typography on dark */
body.home .home-section h2{ color: #fff; }
body.home .home-section p{ color: var(--d-text-dim); }
body.home .home-section .lead{ color: var(--d-text); }
body.home .eyebrow{ color: var(--d-accent); }

/* Cards: solid dark glass panels (no backdrop-filter - keeps scroll smooth) */
body.home .card{
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.01) 48%),
    rgba(20, 28, 22, 0.92);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

body.home .card h3{ color: #fff; }
body.home .card p{ color: var(--d-text-dim); }
body.home .card__link{ color: var(--d-accent); }

body.home .card:hover{
  border-color: rgba(111, 206, 87, 0.55);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(111, 206, 87, 0.15);
}

/* Dark, themed diagram imagery gets a green-edged glass frame on the dark backdrop */
body.home .home-media img[src*="diagrams"]{
  border-radius: 18px;
  border: 1px solid rgba(111, 206, 87, 0.22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(111, 206, 87, 0.12);
}

/* Deepen the product photo shadow against the dark backdrop */
body.home .home-media img[src*="marketing"]{
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
}

/* CTA band: textured dark panel with a green edge instead of the bright slab */
body.home .home-cta{
  background:
    radial-gradient(720px 320px at 82% 130%, rgba(86, 175, 64, 0.26), transparent 60%),
    radial-gradient(560px 300px at 0% -25%, rgba(0, 122, 51, 0.14), transparent 60%),
    linear-gradient(120deg, rgba(86, 175, 64, 0.14), rgba(0, 122, 51, 0.05)),
    #121914;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.home .home-cta h2{ color: #fff; }
body.home .home-cta p{ color: var(--d-text-dim); }

/* Light pill CTA reads as the accent action on the dark band */
body.home .home-cta .btn-light{
  background: linear-gradient(90deg, #56AF40, #007A33);
  color: #fff;
}

body.home .home-cta .btn-light:hover{
  box-shadow: 0 12px 28px rgba(0, 122, 51, 0.45);
  color: #fff;
}

/* ==========================================================================
   Full-screen scroll sections + scroll-reveal of the green data network
   ========================================================================== */

/* Each landing section fills the viewport and vertically centers its content,
   so the page reads as a sequence of full-screen "slides" while scrolling.
   The closing CTA is intentionally excluded - it stays a compact band. */
body.home .home-section{
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Scroll-reveal for section content -------------------------------------
   Elements tagged [data-reveal] start dropped + faded, then rise into place
   once their parent section enters the viewport. Per-element stagger is set
   inline via --reveal-delay in the markup. */
body.home [data-reveal]{
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

body.home .home-section.in-view [data-reveal],
body.home .home-cta.in-view [data-reveal]{
  opacity: 1;
  transform: none;
}

/* --- Green data network: animate in as the content scrolls into view --------
   The fixed pulse network starts invisible with its link-lines "undrawn", then
   fades up and draws itself in the first time the user scrolls into the body. */
body.home .data-pulses{
  opacity: 0;
  transition: opacity 1.4s ease;
}

body.home.data-live .data-pulses{ opacity: 1; }

body.home .data-pulses .wire{
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

body.home.data-live .data-pulses .wire{ stroke-dashoffset: 0; }

/* Stagger the line-draw so the network appears to grow outward */
body.home .data-pulses .wire:nth-child(2){ transition-delay: 0.12s; }
body.home .data-pulses .wire:nth-child(3){ transition-delay: 0.24s; }
body.home .data-pulses .wire:nth-child(4){ transition-delay: 0.18s; }
body.home .data-pulses .wire:nth-child(5){ transition-delay: 0.30s; }
body.home .data-pulses .wire:nth-child(6){ transition-delay: 0.42s; }
body.home .data-pulses .wire:nth-child(7){ transition-delay: 0.36s; }
body.home .data-pulses .wire:nth-child(8){ transition-delay: 0.48s; }

/* The drifting constellation behind the glass eases in alongside the network */
body.home main::before{
  opacity: 0;
  transition: opacity 1.6s ease;
}
body.home.data-live main::before{ opacity: 0.7; }

@media (prefers-reduced-motion: reduce){
  body.home [data-reveal]{
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.home .data-pulses .wire{
    stroke-dashoffset: 0;
    transition: none;
  }
  body.home main::before{ opacity: 0.7; transition: none; }
}

/* ==========================================================================
   Per-section network backgrounds (sections 2 & 3)
   Each section gets its own green, network-based motion for a distinct feel.
   Layers sit above the frosted main background but behind the section content,
   and only fade in + start animating once the section is scrolled into view.
   ========================================================================== */
body.home .home-section{ position: relative; }
body.home .home-section > .container{ position: relative; z-index: 1; }

.section-net{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}

/* fade the layer in when the section enters view */
body.home .home-section.in-view .section-net{ opacity: 1; }

/* hold every sub-animation until the section is actually scrolled into */
.section-net *{ animation-play-state: paused; }
body.home .home-section.in-view .section-net *{ animation-play-state: running; }

/* Opaque dark backdrop for the networked sections so their own animation fully
   replaces the global drifting dot-grid + pulse layers showing through. */
body.home .home-section--net{
  background-color: var(--d-bg);
  background-image:
    radial-gradient(1000px 560px at 50% -8%, rgba(86, 175, 64, 0.10), transparent 62%),
    radial-gradient(760px 520px at 100% 110%, rgba(0, 122, 51, 0.08), transparent 60%);
}

/* Light-touch legibility lift for copy that floats directly over the network
   (headings/lead/body in these dark sections). Card text is already isolated
   by its own panel, so this only reinforces the free-floating text. */
body.home .home-section--net .home-copy h2,
body.home .home-section--net .home-copy p,
body.home .home-section--net .home-copy .eyebrow,
body.home .home-section--net .section-head h2,
body.home .home-section--net .section-head p,
body.home .home-section--net .section-head .eyebrow{
  text-shadow: 0 1px 16px rgba(6, 10, 8, 0.72);
}

/* Nudge the dim body text slightly brighter over the busier backdrop
   (leave the already-bright .lead paragraph as-is) */
body.home .home-section--net .home-copy p:not(.lead),
body.home .home-section--net .section-head p:not(.lead){
  color: #c3d0c7;
}

/* --- Section 2: "honeycomb fabric" - a fine hexagonal mesh whose cells very
   subtly flicker on, here and there. Each cell has its own random period +
   phase (inline) and only a brief faint peak, so it reads as sporadic. */
.section-net--hex .hex{
  fill: rgba(0, 122, 51, 0.025);
  stroke: rgba(0, 122, 51, 0.13);
  stroke-width: 1;
  animation-name: hexPulse;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes hexPulse{
  0%, 90%, 100%{
    fill: rgba(0, 122, 51, 0.025);
    stroke: rgba(0, 122, 51, 0.13);
  }
  95%{
    fill: rgba(63, 174, 79, 0.09);
    stroke: rgba(63, 174, 79, 0.28);
  }
}

/* --- Section 3: "circuit traces" - light flowing left-to-right along tracks ---
   Reads as data routing through an orderly system. Darker brand greens. */
.section-net--circuit .trace-base path{
  fill: none;
  stroke: rgba(0, 122, 51, 0.2);
  stroke-width: 1.5;
}

.section-net--circuit .trace-flow path{
  fill: none;
  stroke: #3fbe52;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 8 100;
  animation-name: traceFlow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes traceFlow{
  from{ stroke-dashoffset: 100; }
  to{ stroke-dashoffset: -8; }
}

/* Junction nodes idle dim, then flare as the traveling pulse on their trace
   reaches them. Each node's animation-duration + delay (inline) is tuned to its
   fractional position along its path so the flare coincides with the pulse. */
.section-net--circuit .trace-nodes circle{
  fill: rgba(47, 157, 63, 0.3);
  transform-box: fill-box;
  transform-origin: center;
  animation-name: circuitNode;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes circuitNode{
  0%, 42%, 58%, 100%{
    fill: rgba(47, 157, 63, 0.3);
    transform: scale(1);
  }
  50%{
    fill: #6adf7a;
    transform: scale(1.35);
  }
}

@media (prefers-reduced-motion: reduce){
  .section-net{ display: none; }
}

/* ==========================================================================
   Dynamic Control benefit page - interactive demo, feature grid, tabs
   ========================================================================== */

.control-stat{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(86, 175, 64, 0.12), rgba(0, 122, 51, 0.06));
  border: 1px solid #cfe6c8;
}

.control-stat__value{
  flex: 0 0 auto;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 700;
  line-height: 1;
  color: #007A33;
}

.control-stat__label{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #4a544c;
}

/* Hero split - demo column matches copy height */
.page-control .home-split--top{
  align-items: stretch;
}

.page-control .home-copy{
  max-width: none;
}

/* Interactive light demo */
.control-demo{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid #e6efe3;
  border-radius: 20px;
  padding: 22px 22px 20px;
  box-shadow: 0 16px 40px rgba(8, 40, 20, 0.10);
}

.control-demo__kicker{
  flex: 0 0 auto;
  margin: 0 0 14px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #007A33;
}

.control-demo__stage{
  --demo-r: 236;
  --demo-g: 224;
  --demo-b: 206;
  --demo-glow-r: 255;
  --demo-glow-g: 238;
  --demo-glow-b: 214;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background-color: rgb(var(--demo-r), var(--demo-g), var(--demo-b));
  background-image: radial-gradient(
    130% 90% at 50% 12%,
    rgb(var(--demo-glow-r), var(--demo-glow-g), var(--demo-glow-b)) 0%,
    rgb(var(--demo-r), var(--demo-g), var(--demo-b)) 72%
  );
  transition: background-color 0.25s ease, color 0.25s ease;
}

.control-demo__stage-meta{
  position: absolute;
  inset: auto 14px 14px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.control-demo__kelvin{
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 122, 51, 0.12);
  color: #007A33;
  font-size: 12px;
  white-space: nowrap;
}

.control-demo__scene{
  text-align: right;
  opacity: 0.9;
}

.control-demo__controls{
  flex: 0 0 auto;
  display: grid;
  gap: 16px;
  margin: 16px 0;
}

.control-slider__label{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1c2421;
}

.control-slider__label img{ flex: 0 0 auto; }

.control-slider__label strong{
  margin-left: auto;
  font-weight: 600;
  color: #007A33;
}

.control-slider input[type="range"]{
  width: 100%;
  height: 8px;
  appearance: none;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.control-slider--brightness input[type="range"]{
  background: linear-gradient(90deg, #2a2a2a 0%, #ffffff 100%);
}

.control-slider--warmth input[type="range"]{
  background: linear-gradient(90deg, #ffd4a8 0%, #ffffff 50%, #c5e3ff 100%);
}

.control-slider input[type="range"]::-webkit-slider-thumb{
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #007A33;
  box-shadow: 0 2px 8px rgba(0, 122, 51, 0.25);
}

.control-slider input[type="range"]::-moz-range-thumb{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #007A33;
  box-shadow: 0 2px 8px rgba(0, 122, 51, 0.25);
}

.control-demo__presets{
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.control-preset{
  appearance: none;
  border: 1px solid #d8e3d4;
  border-radius: 999px;
  padding: 9px 12px;
  background: #fff;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #4a544c;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.control-preset:hover{
  border-color: #56AF40;
  color: #007A33;
  transform: translateY(-1px);
}

.control-preset.is-active{
  background: linear-gradient(90deg, #56AF40, #007A33);
  border-color: transparent;
  color: #fff;
}

/* Interactive toolkit dashboard */
.control-dash{
  --dash-ink: #1c2421;
  --dash-muted: #5a655c;
  --dash-line: #d7e5d2;
  --dash-soft: #f3f8f1;
  --dash-green: #56AF40;
  --dash-green-deep: #007A33;
  border: 1px solid var(--dash-line);
  border-radius: 20px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(86, 175, 64, 0.12), transparent 55%),
    linear-gradient(180deg, #fbfdfb 0%, #f4f9f2 100%);
  box-shadow: 0 18px 40px rgba(8, 40, 20, 0.08);
  overflow: hidden;
}

.control-dash__chrome{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--dash-line);
  background: rgba(255, 255, 255, 0.72);
}

.control-dash__brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dash-ink);
}

.control-dash__pulse{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dash-green);
  box-shadow: 0 0 0 0 rgba(86, 175, 64, 0.55);
  animation: controlDashPulse 1.8s ease-out infinite;
}

@keyframes controlDashPulse{
  0%{ box-shadow: 0 0 0 0 rgba(86, 175, 64, 0.55); }
  70%{ box-shadow: 0 0 0 10px rgba(86, 175, 64, 0); }
  100%{ box-shadow: 0 0 0 0 rgba(86, 175, 64, 0); }
}

.control-dash__hint{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0;
  font-size: 14px;
  color: var(--dash-muted);
}

.control-dash__hint-label{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7a877c;
}

.control-dash__hint strong{
  color: var(--dash-green-deep);
  font-weight: 700;
}

.control-dash__body{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 0;
  min-height: 420px;
}

.control-dash__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
  align-content: start;
  border-right: 1px solid var(--dash-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35), transparent 40%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 27px,
      rgba(86, 175, 64, 0.04) 27px,
      rgba(86, 175, 64, 0.04) 28px
    );
}

.control-dash__tile{
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 96px;
  padding: 14px 14px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--dash-ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
  box-shadow: 0 4px 14px rgba(8, 40, 20, 0.04);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.control-dash__tile img{
  width: 36px;
  height: 36px;
  object-fit: contain;
  transition: transform 0.22s ease;
}

.control-dash__tile span{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

.control-dash__tile:hover,
.control-dash__tile:focus-visible{
  transform: translateY(-3px);
  border-color: #b9dcb0;
  box-shadow: 0 12px 24px rgba(8, 40, 20, 0.1);
  outline: none;
}

.control-dash__tile:hover img,
.control-dash__tile:focus-visible img{
  transform: scale(1.08);
}

.control-dash__tile.is-active{
  background: linear-gradient(145deg, #ffffff 0%, #eef8ea 100%);
  border-color: var(--dash-green);
  box-shadow:
    0 0 0 1px rgba(86, 175, 64, 0.25),
    0 14px 28px rgba(0, 122, 51, 0.14);
  color: var(--dash-green-deep);
}

.control-dash__tile.is-active img{
  transform: scale(1.06);
}

.control-dash__detail{
  position: relative;
  padding: 22px 24px 24px;
  background:
    radial-gradient(90% 70% at 0% 0%, rgba(86, 175, 64, 0.1), transparent 50%),
    #fff;
}

.control-dash__panel{
  display: none;
  animation: controlDashPanelIn 0.32s ease both;
}

.control-dash__panel.is-active{
  display: block;
}

@keyframes controlDashPanelIn{
  from{
    opacity: 0;
    transform: translateY(10px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.control-dash__panel-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.control-dash__panel-top img{
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.control-dash__chip{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(86, 175, 64, 0.12);
  color: var(--dash-green-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.control-dash__panel h3{
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.2;
  color: var(--dash-ink);
}

.control-dash__panel p{
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--dash-muted);
}

.control-dash__panel ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.control-dash__panel li{
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--dash-ink);
}

.control-dash__panel li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dash-green), var(--dash-green-deep));
}

/* Benefit tabs */
.control-tabs__nav{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 24px;
}

.control-tabs__btn{
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid #d8e3d4;
  border-radius: 999px;
  background: #fff;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #4a544c;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.control-tabs__btn img{
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.control-tabs__btn:hover{
  border-color: #56AF40;
  color: #007A33;
}

.control-tabs__btn.is-active{
  background: linear-gradient(90deg, #56AF40, #007A33);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 122, 51, 0.22);
}

.control-tabs__btn.is-active img{
  filter: brightness(0) invert(1);
}

.control-tabs__panel{
  display: none;
  animation: controlTabIn 0.35s ease;
}

.control-tabs__panel.is-active{ display: block; }

@keyframes controlTabIn{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

.control-tabs__panel-inner{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 4vw, 36px);
  background: #fff;
  border: 1px solid #e6efe3;
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(8, 40, 20, 0.08);
}

.control-tabs__copy h3{
  font-size: clamp(22px, 2.5vw, 28px);
  margin-bottom: 12px;
}

.control-tabs__copy p{
  margin-bottom: 16px;
  color: #4a544c;
}

.control-checklist{
  margin: 0;
  padding: 0;
  list-style: none;
}

.control-checklist li{
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: #4a544c;
}

.control-checklist li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #56AF40, #007A33);
  box-shadow: 0 0 0 3px rgba(86, 175, 64, 0.15);
}

.control-tabs__badge{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 28px 24px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(86, 175, 64, 0.14), rgba(0, 122, 51, 0.08));
  border: 1px solid #cfe6c8;
  text-align: center;
}

.control-tabs__badge--warm{
  background: linear-gradient(145deg, rgba(255, 180, 80, 0.18), rgba(255, 140, 40, 0.08));
  border-color: rgba(255, 160, 60, 0.35);
}

.control-tabs__badge--warm .control-tabs__badge-num{ color: #c45a00; }

.control-tabs__badge--vivid{
  background: linear-gradient(145deg, rgba(86, 175, 64, 0.18), rgba(0, 180, 120, 0.10));
  border-color: #9ed4a0;
}

.control-tabs__badge-num{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 700;
  line-height: 1;
  color: #007A33;
}

.control-tabs__badge-text{
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4a544c;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Bottom callout */
.control-callout{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 4vw, 36px);
  align-items: center;
  padding: clamp(24px, 4vw, 36px);
  background: #fff;
  border: 1px solid #e6efe3;
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(8, 40, 20, 0.08);
}

.control-callout__icon{
  width: clamp(80px, 12vw, 110px);
  height: auto;
}

.control-callout__body h3{
  font-size: clamp(22px, 2.5vw, 28px);
  margin-bottom: 10px;
}

.control-callout__body p{
  margin-bottom: 18px;
  color: #4a544c;
}

@media (max-width: 992px){
  .control-demo{
    height: auto;
  }

  .control-demo__stage{
    min-height: 200px;
    flex: none;
  }

  .control-dash__body{
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .control-dash__grid{
    border-right: 0;
    border-bottom: 1px solid var(--dash-line);
  }

  .control-tabs__panel-inner,
  .control-callout{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .control-tabs__badge{
    margin: 0 auto;
  }

  .control-checklist{
    text-align: left;
  }

  .control-callout__icon{
    margin: 0 auto;
  }
}

@media (max-width: 640px){
  .control-demo__presets{
    grid-template-columns: 1fr;
  }

  .control-dash__grid{
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
  }

  .control-dash__tile{
    min-height: 88px;
    padding: 12px;
  }

  .control-dash__tile span{
    font-size: 13px;
  }

  .control-dash__detail{
    padding: 18px 16px 20px;
  }

  .control-tabs__nav{
    flex-direction: column;
    align-items: stretch;
  }

  .control-tabs__btn{
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce){
  .control-tabs__panel,
  .control-dash__panel{ animation: none; }
  .control-dash__pulse{ animation: none; }
  .control-dash__tile:hover,
  .control-dash__tile:focus-visible,
  .control-preset:hover{ transform: none; }
  .control-demo__stage{ transition: none; }
}

/* ==========================================================================
   Better Building Performance - interactive demo, feature grid, tabs
   ========================================================================== */

.perf-stat{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(86, 175, 64, 0.12), rgba(0, 122, 51, 0.06));
  border: 1px solid #cfe6c8;
}

.perf-stat__value{
  flex: 0 0 auto;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 700;
  line-height: 1;
  color: #007A33;
}

.perf-stat__label{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #4a544c;
}

.perf-stat__label-kicker{
  display: block;
  margin-bottom: 4px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #007A33;
}

.page-performance .home-split--top{
  align-items: stretch;
}

.page-performance .home-copy{
  max-width: none;
  display: flex;
  flex-direction: column;
}

.perf-aside{
  margin-top: auto;
  padding-top: 28px;
}

.perf-aside__media{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #e6efe3;
  background: #f0f4ee;
  aspect-ratio: 16 / 9;
}

.perf-aside__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Interactive efficiency demo */
.perf-demo{
  display: flex;
  flex-direction: column;
  height: auto;
  background: #fff;
  border: 1px solid #e6efe3;
  border-radius: 20px;
  padding: 22px 22px 20px;
  box-shadow: 0 16px 40px rgba(8, 40, 20, 0.10);
}

.perf-demo__kicker{
  flex: 0 0 auto;
  margin: 0 0 14px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #007A33;
}

.perf-demo__stage{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(160deg, #f4faf2 0%, #ffffff 55%, #eef6eb 100%);
}

.perf-demo__gauge{
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto;
}

.perf-demo__ring{
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.perf-demo__ring-track{
  fill: none;
  stroke: #e6efe3;
  stroke-width: 10;
}

.perf-demo__ring-fill{
  fill: none;
  stroke: #007A33;
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.45s ease;
}

.perf-demo__gauge-center{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.perf-demo__gauge-value{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: #007A33;
}

.perf-demo__gauge-label{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-top: 4px;
  max-width: 76px;
}

.perf-demo__gauge-label-line{
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4a544c;
}

.perf-demo__flow{
  display: grid;
  gap: 10px;
}

.perf-flow__row{
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 10px;
}

.perf-flow__label{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #4a544c;
  text-align: right;
}

.perf-flow__bar{
  height: 10px;
  border-radius: 999px;
  background: #e8efe5;
  overflow: hidden;
}

.perf-flow__segment{
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.45s ease;
}

.perf-flow__segment--in{
  background: linear-gradient(90deg, #4a544c, #6a746c);
}

.perf-flow__segment--useful{
  background: linear-gradient(90deg, #56AF40, #007A33);
}

.perf-flow__segment--waste{
  background: linear-gradient(90deg, #e8a090, #d45a40);
}

.perf-demo__readout{
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: #1c2421;
  text-align: center;
}

.perf-demo__system{
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0 12px;
}

.perf-system-btn{
  appearance: none;
  border: 1px solid #d8e3d4;
  border-radius: 999px;
  padding: 10px 12px;
  background: #fff;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #4a544c;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.perf-system-btn:hover{
  border-color: #56AF40;
  color: #007A33;
  transform: translateY(-1px);
}

.perf-system-btn.is-active{
  background: linear-gradient(90deg, #56AF40, #007A33);
  border-color: transparent;
  color: #fff;
}

.perf-demo__features{
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  transition: opacity 0.2s ease;
}

.perf-demo__features.is-disabled{
  opacity: 0.45;
  pointer-events: none;
}

.perf-demo__features-label{
  margin: 0 0 2px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a544c;
}

.perf-toggle{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e6efe3;
  border-radius: 12px;
  background: #fafcf9;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1c2421;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.perf-toggle:hover{
  border-color: #cfe6c8;
  background: #fff;
}

.perf-toggle input{
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: #007A33;
  cursor: pointer;
}

.perf-toggle img{
  flex-shrink: 0;
  opacity: 0.85;
}

.perf-toggle span{
  flex: 1;
}

/* One-line vector breakouts (shared by performance + cost pages) */
.lineart{
  --pl-ink: #1a1f1c;
  --pl-muted: #5a655c;
  --pl-green: #56AF40;
  --pl-green-deep: #007A33;
}

.lineart__frame{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.9fr);
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e5ebe4;
  overflow: hidden;
  min-height: 420px;
}

.lineart__draw{
  position: relative;
  padding: clamp(16px, 2.5vw, 28px);
  min-height: 380px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, rgba(86, 175, 64, 0.06), transparent 40%);
}

.lineart__svg{
  display: block;
  width: 100%;
  height: auto;
  color: var(--pl-ink);
}

.lineart__node{
  fill: #fff;
  stroke: var(--pl-ink);
  stroke-width: 2.5;
  cursor: pointer;
  transition: fill 0.2s ease, stroke 0.2s ease, transform 0.2s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.lineart__node:hover,
.lineart__node.is-active{
  fill: var(--pl-green);
  stroke: var(--pl-green-deep);
  transform: scale(1.18);
}

.lineart__leaders path{
  stroke: rgba(26, 31, 28, 0.28);
  transition: stroke 0.2s ease, stroke-width 0.2s ease;
}

.lineart__leaders path.is-active{
  stroke: var(--pl-green);
  stroke-width: 2.25;
}

.lineart__callouts{
  position: absolute;
  /* Keep % positions inside the drawing so labels never spill out of the card */
  inset: 14px 16px;
  pointer-events: none;
}

.lineart__callout{
  appearance: none;
  pointer-events: auto;
  position: absolute;
  left: clamp(0%, var(--x), 100%);
  top: clamp(0%, var(--y), 100%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: min(148px, 46%);
  padding: 6px 10px;
  border: 1.5px solid var(--pl-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--pl-ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-shadow: 0 4px 12px rgba(20, 30, 24, 0.06);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.lineart__callout[data-anchor="start"]{
  transform: translate(0, -50%);
}
.lineart__callout[data-anchor="end"]{
  transform: translate(-100%, -50%);
}

.lineart__callout-num{
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pl-green-deep);
}

.lineart__callout-text{
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.lineart__callout:hover,
.lineart__callout:focus-visible{
  transform: translate(-50%, calc(-50% - 2px));
  border-color: var(--pl-green);
  color: var(--pl-green-deep);
  outline: none;
  z-index: 2;
}
.lineart__callout[data-anchor="start"]:hover,
.lineart__callout[data-anchor="start"]:focus-visible{
  transform: translate(0, calc(-50% - 2px));
}
.lineart__callout[data-anchor="end"]:hover,
.lineart__callout[data-anchor="end"]:focus-visible{
  transform: translate(-100%, calc(-50% - 2px));
}

.lineart__callout.is-active{
  border-color: var(--pl-green);
  color: var(--pl-green-deep);
  background: #f4fbf1;
  box-shadow: 0 8px 18px rgba(0, 122, 51, 0.12);
  z-index: 2;
}

.lineart__detail{
  padding: clamp(20px, 3vw, 28px);
  border-left: 1px solid #e5ebe4;
  background: #fbfdfb;
  display: flex;
  align-items: flex-start;
  overflow: auto;
  min-height: 0;
}

.lineart__photo{
  position: relative;
  margin: 0 0 14px;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 16 / 10;
  background: #111;
}
.lineart__photo img{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
  filter: saturate(0.92) brightness(0.98);
  transition: transform 0.45s ease, filter 0.45s ease;
}

.lineart__panel:hover .lineart__photo img,
.lineart__panel:focus-within .lineart__photo img{
  transform: scale(1.04);
  filter: saturate(1) brightness(1);
}

.lineart__panel{
  display: none;
  width: 100%;
  animation: lineartIn 0.28s ease both;
}

.lineart__panel.is-active{
  display: block;
}

@keyframes lineartIn{
  from{
    opacity: 0;
    transform: translateY(8px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.lineart__tag{
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pl-green-deep);
}

.lineart__panel h3{
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.2;
  color: var(--pl-ink);
}

.lineart__panel > p{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--pl-muted);
}

.lineart__panel ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.lineart__panel li{
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--pl-ink);
}

.lineart__panel li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pl-green);
}

/* Benefit tabs */
.perf-tabs__nav{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 24px;
}

.perf-tabs__btn{
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid #d8e3d4;
  border-radius: 999px;
  background: #fff;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #4a544c;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.perf-tabs__btn img{
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.perf-tabs__btn:hover{
  border-color: #56AF40;
  color: #007A33;
}

.perf-tabs__btn.is-active{
  background: linear-gradient(90deg, #56AF40, #007A33);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 122, 51, 0.22);
}

.perf-tabs__btn.is-active img{
  filter: brightness(0) invert(1);
}

.perf-tabs__panel{
  display: none;
  animation: perfTabIn 0.35s ease;
}

.perf-tabs__panel.is-active{ display: block; }

@keyframes perfTabIn{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

.perf-tabs__panel-inner{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 4vw, 36px);
  background: #fff;
  border: 1px solid #e6efe3;
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(8, 40, 20, 0.08);
}

.perf-tabs__copy h3{
  font-size: clamp(22px, 2.5vw, 28px);
  margin-bottom: 12px;
}

.perf-tabs__copy p{
  margin-bottom: 16px;
  color: #4a544c;
}

.perf-checklist{
  margin: 0;
  padding: 0;
  list-style: none;
}

.perf-checklist li{
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: #4a544c;
}

.perf-checklist li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #56AF40, #007A33);
  box-shadow: 0 0 0 3px rgba(86, 175, 64, 0.15);
}

.perf-tabs__badge{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 28px 24px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(86, 175, 64, 0.14), rgba(0, 122, 51, 0.08));
  border: 1px solid #cfe6c8;
  text-align: center;
}

.perf-tabs__badge--auto{
  background: linear-gradient(145deg, rgba(86, 175, 64, 0.18), rgba(0, 180, 120, 0.10));
  border-color: #9ed4a0;
}

.perf-tabs__badge--data{
  background: linear-gradient(145deg, rgba(70, 130, 200, 0.14), rgba(40, 90, 160, 0.08));
  border-color: rgba(70, 130, 200, 0.35);
}

.perf-tabs__badge--data .perf-tabs__badge-num{ color: #2a6cb0; }

.perf-tabs__badge-num{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 700;
  line-height: 1;
  color: #007A33;
}

.perf-tabs__badge-text{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  text-align: center;
}

.perf-tabs__badge-text-line{
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: #4a544c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Bottom callout */
.perf-callout{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 4vw, 36px);
  align-items: center;
  padding: clamp(24px, 4vw, 36px);
  background: #fff;
  border: 1px solid #e6efe3;
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(8, 40, 20, 0.08);
}

.perf-callout__icon{
  width: clamp(80px, 12vw, 110px);
  height: auto;
}

.perf-callout__body h3{
  font-size: clamp(22px, 2.5vw, 28px);
  margin-bottom: 10px;
}

.perf-callout__body p{
  margin-bottom: 18px;
  color: #4a544c;
}

@media (max-width: 992px){
  .perf-demo{
    height: auto;
  }

  .perf-demo__stage{
    flex: none;
  }

  .lineart__frame{
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .lineart__detail{
    border-left: 0;
    border-top: 1px solid #e5ebe4;
  }

  .lineart__callouts{
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
  }

  .lineart__callout,
  .lineart__callout[data-anchor="start"],
  .lineart__callout[data-anchor="end"]{
    position: static;
    transform: none;
    max-width: none;
    width: 100%;
    border-radius: 12px;
  }

  .lineart__callout:hover,
  .lineart__callout:focus-visible,
  .lineart__callout[data-anchor="start"]:hover,
  .lineart__callout[data-anchor="start"]:focus-visible,
  .lineart__callout[data-anchor="end"]:hover,
  .lineart__callout[data-anchor="end"]:focus-visible{
    transform: translateY(-2px);
  }

  .lineart__leaders{
    display: none;
  }

  .perf-tabs__panel-inner,
  .perf-callout{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .perf-tabs__badge{
    margin: 0 auto;
  }

  .perf-checklist{
    text-align: left;
  }

  .perf-callout__icon{
    margin: 0 auto;
  }
}

@media (max-width: 640px){
  .perf-demo__system{
    grid-template-columns: 1fr;
  }

  .perf-tabs__nav{
    flex-direction: column;
    align-items: stretch;
  }

  .perf-tabs__btn{
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce){
  .perf-tabs__panel,
  .lineart__panel{ animation: none; }
  .lineart__callout:hover,
  .lineart__callout:focus-visible,
  .lineart__node:hover,
  .lineart__node.is-active,
  .perf-system-btn:hover{ transform: none; }
  .lineart__photo img{
    transform: none;
    filter: none;
    transition: none;
  }
  .perf-flow__segment,
  .perf-demo__ring-fill{ transition: none; }
}

/* ==========================================================================
   Reduced Cost - interactive demo, feature grid, tabs
   ========================================================================== */

.cost-stat{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(200, 150, 40, 0.12), rgba(0, 122, 51, 0.06));
  border: 1px solid #e8dcc0;
}

.cost-stat__value{
  flex: 0 0 auto;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 700;
  line-height: 1;
  color: #b8860b;
}

.cost-stat__label{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #4a544c;
}

.page-cost .home-split--top{
  align-items: stretch;
}

.page-cost .home-copy,
.page-cost .cost-copy{
  max-width: none;
  display: flex;
  flex-direction: column;
}

.cost-aside{
  margin-top: auto;
  padding-top: 28px;
}

.cost-aside__media{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #e6efe3;
  background: #f0f4ee;
  aspect-ratio: 16 / 9;
}

.cost-aside__media img{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cost-aside__chips{
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cost-aside__chips li{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 12px;
  border-radius: 12px;
  border: 1px solid #e6efe3;
  background: linear-gradient(180deg, #ffffff 0%, #f4faf2 100%);
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #24312a;
}

.cost-aside__chips img{
  width: 28px;
  height: 28px;
  object-fit: contain;
}

@media (max-width: 900px){
  .cost-aside__chips{
    grid-template-columns: 1fr;
  }
}

/* Interactive cost comparison demo */
.cost-demo{
  display: flex;
  flex-direction: column;
  height: auto;
  background: #fff;
  border: 1px solid #e6efe3;
  border-radius: 20px;
  padding: 22px 22px 20px;
  box-shadow: 0 16px 40px rgba(8, 40, 20, 0.10);
}

.cost-demo__kicker{
  flex: 0 0 auto;
  margin: 0 0 14px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b8860b;
}

.cost-demo__stage{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(160deg, #fdfaf2 0%, #ffffff 55%, #f4faf2 100%);
}

.cost-demo__hero{
  text-align: center;
  padding: 8px 0 4px;
}

.cost-demo__savings-label{
  display: block;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4a544c;
}

.cost-demo__savings-value{
  display: block;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  color: #007A33;
  margin: 4px 0;
  transition: color 0.25s ease, transform 0.2s ease;
}

.cost-demo__savings-value.is-updating{
  animation: cost-savings-pulse 0.35s ease;
}

@keyframes cost-savings-pulse{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.04); }
  100%{ transform: scale(1); }
}

.cost-demo__savings-sub{
  display: block;
  font-size: 12px;
  color: #6a746c;
}

.cost-demo__bars{
  display: grid;
  gap: 12px;
}

.cost-bar{
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 8px 10px;
}

.cost-bar__label{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #4a544c;
  text-align: right;
}

.cost-bar__track{
  position: relative;
  height: 22px;
  border-radius: 999px;
  background: #eef2ea;
  overflow: hidden;
}

.cost-bar__fill{
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: calc(100% - 6px);
  will-change: width;
}

.cost-bar__fill--trad{
  background: linear-gradient(90deg, #8a9490, #5a6460);
  z-index: 1;
}

.cost-bar__fill--poe{
  background: linear-gradient(90deg, #56AF40, #007A33);
  z-index: 2;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

@media (prefers-reduced-motion: reduce){
  .cost-bar__fill{ transition: none; }
  .cost-demo__savings-value.is-updating{ animation: none; }
}

.cost-demo__legend{
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cost-demo__legend-item{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #4a544c;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cost-demo__legend-item::before{
  content: "";
  width: 14px;
  height: 8px;
  border-radius: 999px;
}

.cost-demo__legend-item--trad::before{
  background: linear-gradient(90deg, #8a9490, #5a6460);
}

.cost-demo__legend-item--poe::before{
  background: linear-gradient(90deg, #56AF40, #007A33);
}

.cost-demo__readout{
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: #1c2421;
  text-align: center;
}

.cost-slider{
  flex: 0 0 auto;
  display: block;
  margin: 16px 0 12px;
}

.cost-slider__label{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1c2421;
}

.cost-slider__label img{ flex: 0 0 auto; }

.cost-slider__label strong{
  margin-left: auto;
  color: #007A33;
  font-size: 15px;
}

.cost-slider input[type="range"]{
  width: 100%;
  height: 6px;
  border-radius: 999px;
  appearance: none;
  background: linear-gradient(90deg, #cfe6c8, #e8dcc0);
  cursor: pointer;
}

.cost-slider input[type="range"]::-webkit-slider-thumb{
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #56AF40, #007A33);
  box-shadow: 0 2px 8px rgba(0, 122, 51, 0.35);
  cursor: pointer;
}

.cost-slider input[type="range"]::-moz-range-thumb{
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #56AF40, #007A33);
  box-shadow: 0 2px 8px rgba(0, 122, 51, 0.35);
  cursor: pointer;
}

.cost-demo__perks{
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
}

.cost-demo__perks-label{
  margin: 0 0 2px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a544c;
}

.cost-toggle{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e6efe3;
  border-radius: 12px;
  background: #fafcf9;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1c2421;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cost-toggle:hover{
  border-color: #cfe6c8;
  background: #fff;
}

.cost-toggle input{
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: #007A33;
  cursor: pointer;
}

.cost-toggle img{
  flex-shrink: 0;
  opacity: 0.85;
}

.cost-toggle span{
  flex: 1;
}

/* Feature icon grid */
.cost-feature-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.cost-feature{
  padding: 24px 22px 22px;
  background: #fff;
  border: 1px solid #e6efe3;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(8, 40, 20, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cost-feature:hover{
  transform: translateY(-4px);
  border-color: #e8dcc0;
  box-shadow: 0 16px 32px rgba(8, 40, 20, 0.10);
}

.cost-feature__icon{
  height: 52px;
  width: 52px;
  object-fit: contain;
  margin-bottom: 14px;
}

.cost-feature h3{
  font-size: 17px;
  line-height: 1.25;
  margin-bottom: 8px;
}

.cost-feature p{
  font-size: 14px;
  line-height: 1.55;
  color: #4a544c;
  margin: 0;
}

/* Benefit tabs */
.cost-tabs__nav{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 24px;
}

.cost-tabs__btn{
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid #d8e3d4;
  border-radius: 999px;
  background: #fff;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #4a544c;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.cost-tabs__btn img{
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.cost-tabs__btn:hover{
  border-color: #b8860b;
  color: #8a6508;
}

.cost-tabs__btn.is-active{
  background: linear-gradient(90deg, #d4a82a, #b8860b);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(184, 134, 11, 0.25);
}

.cost-tabs__btn.is-active img{
  filter: brightness(0) invert(1);
}

.cost-tabs__panel{
  display: none;
  animation: costTabIn 0.35s ease;
}

.cost-tabs__panel.is-active{ display: block; }

@keyframes costTabIn{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

.cost-tabs__panel-inner{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 4vw, 36px);
  background: #fff;
  border: 1px solid #e6efe3;
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(8, 40, 20, 0.08);
}

.cost-tabs__copy h3{
  font-size: clamp(22px, 2.5vw, 28px);
  margin-bottom: 12px;
}

.cost-tabs__copy p{
  margin-bottom: 16px;
  color: #4a544c;
}

.cost-checklist{
  margin: 0;
  padding: 0;
  list-style: none;
}

.cost-checklist li{
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: #4a544c;
}

.cost-checklist li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4a82a, #b8860b);
  box-shadow: 0 0 0 3px rgba(212, 168, 42, 0.18);
}

.cost-tabs__badge{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 28px 24px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(212, 168, 42, 0.16), rgba(184, 134, 11, 0.08));
  border: 1px solid #e8dcc0;
  text-align: center;
}

.cost-tabs__badge--reliable{
  background: linear-gradient(145deg, rgba(86, 175, 64, 0.14), rgba(0, 122, 51, 0.08));
  border-color: #cfe6c8;
}

.cost-tabs__badge--reliable .cost-tabs__badge-num{ color: #007A33; }

.cost-tabs__badge--maintain{
  background: linear-gradient(145deg, rgba(70, 130, 200, 0.14), rgba(40, 90, 160, 0.08));
  border-color: rgba(70, 130, 200, 0.35);
}

.cost-tabs__badge--maintain .cost-tabs__badge-num{ color: #2a6cb0; }

.cost-tabs__badge-num{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 700;
  line-height: 1;
  color: #b8860b;
}

.cost-tabs__badge-text{
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4a544c;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Bottom callout */
.cost-callout{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 4vw, 36px);
  align-items: center;
  padding: clamp(24px, 4vw, 36px);
  background: #fff;
  border: 1px solid #e6efe3;
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(8, 40, 20, 0.08);
}

.cost-callout__icon{
  width: clamp(80px, 12vw, 110px);
  height: auto;
}

.cost-callout__body h3{
  font-size: clamp(22px, 2.5vw, 28px);
  margin-bottom: 10px;
}

.cost-callout__body p{
  margin-bottom: 18px;
  color: #4a544c;
}

@media (max-width: 992px){
  .cost-demo{
    height: auto;
  }

  .cost-demo__stage{
    flex: none;
  }

  .cost-tabs__panel-inner,
  .cost-callout{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cost-tabs__badge{
    margin: 0 auto;
  }

  .cost-checklist{
    text-align: left;
  }

  .cost-callout__icon{
    margin: 0 auto;
  }
}

@media (max-width: 640px){
  .cost-tabs__nav{
    flex-direction: column;
    align-items: stretch;
  }

  .cost-tabs__btn{
    justify-content: center;
  }

  .cost-bar{
    grid-template-columns: 72px 1fr;
  }
}

@media (prefers-reduced-motion: reduce){
  .cost-tabs__panel{ animation: none; }
  .cost-feature:hover{ transform: none; }
  .cost-bar__fill{ transition: none; }
}

/* Cross-links between the three benefit pages */
.benefit-related{
  padding: clamp(48px, 7vw, 72px) 0;
  background: #fff;
  border-top: 1px solid #e6efe3;
}
.benefit-related .section-head{
  margin-bottom: clamp(24px, 4vw, 36px);
}
.benefit-related__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
}
.benefit-related__link{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: clamp(18px, 2.5vw, 24px);
  border: 1px solid #e6efe3;
  border-radius: 4px;
  background: #f7faf7;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.benefit-related__link:hover,
.benefit-related__link:focus-visible{
  border-color: rgba(0, 122, 51, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(8, 40, 20, 0.08);
  outline: none;
}
.benefit-related__link img{
  width: 56px;
  height: auto;
}
.benefit-related__link h3{
  margin: 0 0 6px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.25;
  color: #14201c;
}
.benefit-related__link p{
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #5a6b64;
}
.benefit-related__cta{
  font-size: 13.5px;
  font-weight: 600;
  color: #007a33;
}
.benefit-related__cta::after{
  content: " →";
}
@media (max-width: 720px){
  .benefit-related__grid{
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce){
  .benefit-related__link:hover,
  .benefit-related__link:focus-visible{
    transform: none;
  }
}

/* ==========================================================================
   Environment pages - editorial intro, scene bar, accordion pillars
   ========================================================================== */

.page-env{
  --env-ink: #142018;
  --env-muted: #5a665c;
  --env-cream: #f3efe6;
  --env-forest: #0d2e1c;
  --env-line: #d4cfc3;
  --env-accent: #007A33;
  scroll-behavior: smooth;
}

/* Centered editorial intro */
.env-intro{
  padding: clamp(48px, 7vw, 80px) 0 clamp(32px, 5vw, 56px);
  background: var(--env-cream);
  border-bottom: 1px solid var(--env-line);
}

.env-intro__inner{
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.env-intro__eyebrow{
  display: inline-block;
  margin-bottom: 14px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--env-accent);
}

.env-intro__title{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(30px, 4.5vw, 44px);
  line-height: 1.12;
  color: var(--env-ink);
  margin-bottom: 18px;
}

.env-intro__lead{
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.65;
  color: var(--env-ink);
  margin-bottom: 16px;
}

.env-intro__body{
  font-size: 16px;
  line-height: 1.7;
  color: var(--env-muted);
  margin-bottom: 0;
}

.env-pullquote{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 32px 0 0;
  padding: 0;
  border: none;
  text-align: left;
}

.env-pullquote__value{
  flex-shrink: 0;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(48px, 8vw, 72px);
  font-weight: 700;
  line-height: 1;
  color: var(--env-accent);
  border-right: 3px solid var(--env-line);
  padding-right: 20px;
}

.env-pullquote__label{
  font-size: 15px;
  line-height: 1.5;
  color: var(--env-muted);
  max-width: 280px;
}

/* Chapter bridge - transition into story chapters */
.env-bridge{
  padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 80px);
  background: linear-gradient(180deg, var(--env-cream) 0%, #fff 140px);
}

.env-bridge__head{
  max-width: 620px;
  margin: 0 auto clamp(32px, 5vw, 48px);
  text-align: center;
}

.env-bridge__eyebrow{
  display: block;
  margin-bottom: 10px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--env-accent);
}

.env-bridge__title{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(26px, 3.5vw, 36px);
  line-height: 1.15;
  color: var(--env-ink);
  margin-bottom: 12px;
}

.env-bridge__lead{
  font-size: 16px;
  line-height: 1.65;
  color: var(--env-muted);
  margin: 0;
}

.env-bridge__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 24px);
}

.env-bridge__card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 3vw, 28px);
  background: #fff;
  border: 1px solid var(--env-line);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.env-bridge__card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--env-accent);
  transform: scaleX(0.35);
  transform-origin: left center;
  transition: transform 0.28s ease;
}

.env-bridge__card--warm::before{ background: #c45a00; }
.env-bridge__card--cool::before{ background: #2a5a8a; }
.env-bridge__card--green::before{ background: var(--env-accent); }

.env-bridge__card:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(20, 32, 24, 0.1);
  border-color: #c8c2b6;
}

.env-bridge__card:hover::before{
  transform: scaleX(1);
}

.env-bridge__card.env-reveal:nth-child(1){ transition-delay: 0ms; }
.env-bridge__card.env-reveal:nth-child(2){ transition-delay: 90ms; }
.env-bridge__card.env-reveal:nth-child(3){ transition-delay: 180ms; }

.env-bridge__num{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: rgba(20, 32, 24, 0.06);
  position: absolute;
  top: 12px;
  right: 16px;
}

.env-bridge__icon{
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.env-bridge__label{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.env-bridge__card--warm .env-bridge__label{ color: #9a4e00; }
.env-bridge__card--cool .env-bridge__label{ color: #2a5a8a; }
.env-bridge__card--green .env-bridge__label{ color: var(--env-accent); }

.env-bridge__heading{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.25;
  color: var(--env-ink);
  margin: 0;
}

.env-bridge__teaser{
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  color: var(--env-muted);
  margin: 0;
}

.env-bridge__cta{
  margin-top: 4px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--env-accent);
  transition: transform 0.2s ease;
}

.env-bridge__card--warm .env-bridge__cta{ color: #9a4e00; }
.env-bridge__card--cool .env-bridge__cta{ color: #2a5a8a; }

.env-bridge__card:hover .env-bridge__cta{
  transform: translateX(4px);
}

/* Sticky chapter navigation */
.env-chapter-nav{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--env-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.env-chapter-nav__inner{
  display: flex;
  gap: 8px;
  padding: 10px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.env-chapter-nav__inner::-webkit-scrollbar{ display: none; }

.env-chapter-nav__link{
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--env-muted);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.env-chapter-nav__link:hover{
  color: var(--env-accent);
  border-color: #cfe6c8;
}

.env-chapter-nav__link.is-active{
  background: var(--env-accent);
  border-color: var(--env-accent);
  color: #fff;
}

/* Interactive floor plan */
.env-floorplan{
  padding: clamp(48px, 7vw, 80px) 0;
  background: #fff;
}

.env-floorplan__head{
  max-width: 640px;
  margin-bottom: 20px;
}

.env-floorplan__eyebrow{
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(0, 122, 51, 0.08);
  border: 1px solid rgba(0, 122, 51, 0.14);
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--env-accent);
}

.env-floorplan__title{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(26px, 3.5vw, 36px);
  line-height: 1.12;
  color: var(--env-ink);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.env-floorplan__lead{
  font-size: 16px;
  line-height: 1.65;
  color: var(--env-muted);
  margin: 0;
}

.env-floorplan__hint{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--env-muted);
}

.env-floorplan__hint-icon{
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.55;
  position: relative;
  flex-shrink: 0;
}

.env-floorplan__hint-icon::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 2px;
  height: 5px;
  margin-left: -1px;
  background: currentColor;
  border-radius: 1px;
}

.env-floorplan__card{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--env-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--env-cream);
  box-shadow:
    0 1px 2px rgba(20, 32, 24, 0.04),
    0 16px 40px rgba(20, 32, 24, 0.07);
}

.env-floorplan__map{
  position: relative;
  padding: clamp(16px, 3vw, 24px);
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 122, 51, 0.04), transparent 45%),
    #f7f5f0;
  border-right: 1px solid var(--env-line);
}

.env-floorplan__svg{
  display: block;
  width: 100%;
  height: auto;
}

.env-floorplan__bg{
  fill: #ebe8e1;
  stroke: #b8b2a6;
  stroke-width: 1.5;
}

.env-floorplan__grid{
  fill: url(#env-floor-grid);
  pointer-events: none;
}

.env-floorplan__corridor{
  fill: #d8d4cb;
  stroke: #b8b2a6;
  stroke-width: 1;
  pointer-events: none;
}

.env-floorplan__room{
  cursor: pointer;
  transition: fill 0.22s ease, stroke 0.22s ease, filter 0.22s ease;
}

.env-floorplan__room--warm{
  fill: rgba(196, 90, 0, 0.14);
  stroke: rgba(196, 90, 0, 0.45);
  stroke-width: 2;
}

.env-floorplan__room--cool{
  fill: rgba(42, 90, 138, 0.14);
  stroke: rgba(42, 90, 138, 0.45);
  stroke-width: 2;
}

.env-floorplan__room--green{
  fill: rgba(0, 122, 51, 0.14);
  stroke: rgba(0, 122, 51, 0.45);
  stroke-width: 2;
}

.env-floorplan__room:hover,
.env-floorplan__room:focus{
  filter: brightness(1.03);
  outline: none;
}

.env-floorplan__room--warm:hover,
.env-floorplan__room--warm:focus,
.env-floorplan__room--warm.is-active{
  fill: rgba(196, 90, 0, 0.28);
  stroke: #c45a00;
}

.env-floorplan__room--cool:hover,
.env-floorplan__room--cool:focus,
.env-floorplan__room--cool.is-active{
  fill: rgba(42, 90, 138, 0.28);
  stroke: #2a5a8a;
}

.env-floorplan__room--green:hover,
.env-floorplan__room--green:focus,
.env-floorplan__room--green.is-active{
  fill: rgba(0, 122, 51, 0.28);
  stroke: var(--env-accent);
}

.env-floorplan__room.is-active{
  stroke-width: 2.5;
}

.env-floorplan__labels{
  position: absolute;
  inset: clamp(16px, 3vw, 24px);
  pointer-events: none;
}

.env-floorplan__label{
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--env-line);
  border-radius: 999px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--env-muted);
  opacity: 0.75;
  box-shadow: 0 2px 8px rgba(20, 32, 24, 0.06);
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.env-floorplan__label.is-active{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.04);
}

.env-floorplan__label--warm.is-active{
  color: #9a4e00;
  border-color: #e8c4a0;
}

.env-floorplan__label--cool.is-active{
  color: #2a5a8a;
  border-color: #b8cfe6;
}

.env-floorplan__label--green.is-active{
  color: var(--env-accent);
  border-color: #cfe6c8;
}

.env-floorplan__panel{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 40px);
  background: #fff;
  border-left: 4px solid var(--env-accent);
  transition: border-color 0.25s ease;
}

.env-floorplan__panel--warm{ border-left-color: #c45a00; }
.env-floorplan__panel--cool{ border-left-color: #2a5a8a; }
.env-floorplan__panel--green{ border-left-color: var(--env-accent); }

.env-floorplan__panel-kicker{
  margin: 0 0 10px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--env-muted);
}

.env-floorplan__panel-title{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(22px, 2.8vw, 28px);
  line-height: 1.2;
  color: var(--env-ink);
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.env-floorplan__panel-summary{
  font-size: 15px;
  line-height: 1.7;
  color: var(--env-muted);
  margin-bottom: 22px;
}

.env-floorplan__panel-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--env-accent);
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid #cfe6c8;
  border-radius: 999px;
  background: rgba(0, 122, 51, 0.05);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.env-floorplan__panel-link:hover{
  background: rgba(0, 122, 51, 0.1);
  border-color: var(--env-accent);
  transform: translateX(2px);
}

.env-floorplan__panel-arrow{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.env-floorplan__legend{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.env-floorplan__legend-btn{
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--env-line);
  background: #fff;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--env-muted);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.env-floorplan__legend-btn:hover{
  border-color: #cfe6c8;
  color: var(--env-ink);
}

.env-floorplan__legend-btn--warm.is-active{
  background: rgba(196, 90, 0, 0.1);
  border-color: #c45a00;
  color: #9a4e00;
  box-shadow: 0 2px 8px rgba(196, 90, 0, 0.12);
}

.env-floorplan__legend-btn--cool.is-active{
  background: rgba(42, 90, 138, 0.1);
  border-color: #2a5a8a;
  color: #2a5a8a;
  box-shadow: 0 2px 8px rgba(42, 90, 138, 0.12);
}

.env-floorplan__legend-btn--green.is-active{
  background: rgba(0, 122, 51, 0.1);
  border-color: var(--env-accent);
  color: var(--env-accent);
  box-shadow: 0 2px 8px rgba(0, 122, 51, 0.12);
}

/* Zigzag story chapters */
.env-chapters{
  padding: clamp(48px, 7vw, 80px) 0;
  background: #fff;
}

.env-chapters--compact{
  padding-top: clamp(8px, 2vw, 20px);
}

.env-chapters__head{
  max-width: 620px;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.env-chapters__eyebrow{
  display: block;
  margin-bottom: 10px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--env-accent);
}

.env-chapters__title{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(26px, 3.5vw, 36px);
  line-height: 1.15;
  color: var(--env-ink);
  margin-bottom: 10px;
}

.env-chapters__lead{
  font-size: 16px;
  line-height: 1.65;
  color: var(--env-muted);
  margin: 0;
}

.env-chapters__list{
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 72px);
}

.env-chapter{
  display: grid;
  grid-template-columns: minmax(200px, 0.9fr) 1.1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 40px) 0;
  border-top: 1px solid var(--env-line);
  scroll-margin-top: 32px;
}

.env-chapter.env-reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.env-chapter.env-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.env-chapter--warm .env-chapter__heading{ color: #9a4e00; }
.env-chapter--warm .env-chapter__bullets li::before{ background: #c45a00; }

.env-chapter--cool .env-chapter__heading{ color: #2a5a8a; }
.env-chapter--cool .env-chapter__bullets li::before{ background: #2a6cb0; }

.env-chapter--green .env-chapter__heading{ color: var(--env-accent); }

.env-chapter--flip{
  grid-template-columns: 1.1fr minmax(200px, 0.9fr);
}

.env-chapter--flip .env-chapter__visual{
  order: 2;
}

.env-chapter--flip .env-chapter__content{
  order: 1;
}

.env-chapter__visual{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 32px 24px;
  background: var(--env-cream);
  border: 1px solid var(--env-line);
  overflow: hidden;
}

.env-chapter__visual--photo{
  padding: 0;
  border: none;
}

.env-chapter__visual--warm{ --chapter-accent: #c45a00; }
.env-chapter__visual--cool{ --chapter-accent: #2a6cb0; }
.env-chapter__visual--green{ --chapter-accent: var(--env-accent); }

.env-chapter__photo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.env-chapter__photo-shade{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 32, 24, 0.15) 0%, rgba(20, 32, 24, 0.55) 100%);
}

.env-chapter__overlay{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 320px;
  padding: 32px 24px;
}

.env-chapter__visual--photo .env-chapter__watermark{
  color: rgba(255, 255, 255, 0.2);
  z-index: 1;
}

.env-chapter__visual--photo .env-chapter__icon-wrap{
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.env-chapter__visual--photo .env-chapter__stat{
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--chapter-accent, var(--env-accent));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.env-chapter__watermark{
  position: absolute;
  inset: 12px 16px auto auto;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(64px, 10vw, 96px);
  font-weight: 700;
  line-height: 1;
  color: rgba(20, 32, 24, 0.06);
  pointer-events: none;
  user-select: none;
}

.env-chapter__icon-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid var(--env-line);
}

.env-chapter__icon{
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.env-chapter__stat{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 20px;
  border: 2px solid var(--env-ink);
  background: #fff;
  text-align: center;
}

.env-chapter__stat--warm{ border-color: #c45a00; }
.env-chapter__stat--warm .env-chapter__stat-num{ color: #c45a00; }

.env-chapter__stat--cool{ border-color: #2a6cb0; }
.env-chapter__stat--cool .env-chapter__stat-num{ color: #2a6cb0; }

.env-chapter__stat--vivid{ border-color: var(--env-accent); }

.env-chapter__stat-num{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  line-height: 1;
  color: var(--env-accent);
}

.env-chapter__stat-text{
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--env-muted);
}

.env-chapter__label{
  display: block;
  margin-bottom: 8px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--env-accent);
}

.env-chapter__heading{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.2;
  color: var(--env-ink);
  margin-bottom: 14px;
}

.env-chapter__body{
  font-size: 16px;
  line-height: 1.75;
  color: var(--env-muted);
  margin-bottom: 18px;
}

.env-chapter__bullets{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.env-chapter__bullets li{
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--env-ink);
}

.env-chapter__bullets li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: var(--env-accent);
  transform: rotate(45deg);
}

.env-chapter__proof{
  margin: 20px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--env-accent);
  background: var(--env-cream);
}

.env-chapter__proof-label{
  display: block;
  margin-bottom: 4px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--env-muted);
}

.env-chapter__proof a{
  font-size: 14px;
  font-weight: 600;
  color: var(--env-ink);
  text-decoration: none;
  border-bottom: 1px solid #cfe6c8;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.env-chapter__proof a:hover{
  color: var(--env-accent);
  border-color: var(--env-accent);
}

/* Environment CTA band */
.env-cta{
  padding: clamp(40px, 6vw, 56px) 0;
  background: linear-gradient(135deg, #0d2e1c 0%, #007A33 100%);
  color: #fff;
}

.env-cta__inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.env-cta__copy h2{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  color: #fff;
  margin-bottom: 8px;
}

.env-cta__copy p{
  margin: 0;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.env-cta__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.env-cta__actions .btn-light{
  margin-top: 0;
}

.env-cta__secondary{
  display: inline-block;
  padding: 12px 22px;
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 4px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.env-cta__secondary:hover{
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}

.page-env .env-studies .card--study:target{
  border-color: var(--env-accent);
  box-shadow: 4px 4px 0 var(--env-ink);
}

/* Cinematic scene bar */
.env-scenebar{
  padding: clamp(28px, 4vw, 44px) 0;
  background: #fff;
}

.env-scenebar__frame{
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: stretch;
  border: 1px solid var(--env-line);
  background: var(--env-forest);
  padding: clamp(16px, 2.5vw, 22px);
}

.env-scenebar__stage{
  position: relative;
  min-height: 260px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  transition: background-color 0.4s ease;
}

.env-scenebar__glow{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255, 255, 255, 0.18), transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.25) 100%);
  pointer-events: none;
}

.env-scenebar__meta{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.82);
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.env-scenebar__kelvin{
  padding: 2px 10px;
  background: rgba(0, 122, 51, 0.14);
  color: var(--env-accent);
  font-size: 12px;
}

.env-scenebar__label{
  text-align: right;
}

.env-scenebar__aside{
  display: flex;
  flex-direction: column;
  color: #e8efe5;
}

.env-scenebar__kicker{
  margin: 0 0 14px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.env-scenebar__choices{
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.env-scenebar__choice{
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: #e8efe5;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.env-scenebar__choice:hover{
  border-color: rgba(86, 175, 64, 0.55);
  background: rgba(86, 175, 64, 0.12);
}

.env-scenebar__choice.is-active{
  border-color: #56AF40;
  background: rgba(86, 175, 64, 0.22);
  color: #fff;
}

.env-scenebar__choice-num{
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
}

.env-scenebar__choice.is-active .env-scenebar__choice-num{
  color: #9ed4a0;
}

.env-scenebar__quote{
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 14px;
  line-height: 1.6;
  font-style: italic;
  color: rgba(255, 255, 255, 0.72);
}

/* Numbered accordion pillars */
.env-pillars{
  padding: clamp(48px, 7vw, 80px) 0;
  background: #fff;
}

.env-pillars__head{
  max-width: 640px;
  margin-bottom: clamp(28px, 4vw, 40px);
}

.env-pillars__eyebrow{
  display: block;
  margin-bottom: 10px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--env-accent);
}

.env-pillars__title{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(26px, 3.5vw, 36px);
  line-height: 1.15;
  color: var(--env-ink);
  margin-bottom: 10px;
}

.env-pillars__lead{
  font-size: 16px;
  line-height: 1.65;
  color: var(--env-muted);
  margin: 0;
}

.env-pillars__list{
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 2px solid var(--env-ink);
}

.env-pillar{
  border-bottom: 1px solid var(--env-line);
}

.env-pillar__trigger{
  appearance: none;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 4px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease;
}

.env-pillar__trigger:hover{
  color: var(--env-accent);
}

.env-pillar__index{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--env-muted);
}

.env-pillar.is-open .env-pillar__index{
  color: var(--env-accent);
}

.env-pillar__icon{
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.env-pillar__name{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 600;
  color: var(--env-ink);
}

.env-pillar__chevron{
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--env-muted);
  border-bottom: 2px solid var(--env-muted);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  margin-right: 8px;
}

.env-pillar.is-open .env-pillar__chevron{
  transform: rotate(-135deg);
  border-color: var(--env-accent);
}

.env-pillar__panel{
  overflow: hidden;
  animation: envPillarOpen 0.35s ease;
}

@keyframes envPillarOpen{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

.env-pillar__panel-inner{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 4vw, 40px);
  padding: 0 4px 28px 68px;
  align-items: start;
}

.env-pillar__copy p{
  font-size: 16px;
  line-height: 1.7;
  color: var(--env-muted);
  margin-bottom: 16px;
}

.env-pillar__list{
  margin: 0;
  padding: 0;
  list-style: none;
}

.env-pillar__list li{
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--env-ink);
}

.env-pillar__list li::before{
  content: "-";
  position: absolute;
  left: 0;
  color: var(--env-accent);
  font-weight: 700;
}

.env-pillar__stat{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 20px 18px;
  border: 2px solid var(--env-ink);
  text-align: center;
}

.env-pillar__stat--warm .env-pillar__stat-num{ color: #b85c00; }

.env-pillar__stat--cool{
  border-color: #2a6cb0;
}

.env-pillar__stat--cool .env-pillar__stat-num{ color: #2a6cb0; }

.env-pillar__stat--vivid{
  border-color: var(--env-accent);
}

.env-pillar__stat-num{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 700;
  line-height: 1;
  color: var(--env-accent);
}

.env-pillar__stat-text{
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--env-muted);
}

/* Full-width closing banner */
.env-banner{
  padding: clamp(40px, 6vw, 64px) 0;
  background: var(--env-forest);
  color: #e8efe5;
}

.env-banner__inner{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 40px);
  align-items: center;
}

.env-banner__icon{
  width: clamp(72px, 10vw, 96px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.env-banner__body h3{
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
  color: #fff;
  margin-bottom: 12px;
}

.env-banner__body p{
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 20px;
}

.env-banner__cta{
  display: inline-block;
  padding: 12px 22px;
  border: 2px solid #56AF40;
  color: #fff;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.env-banner__cta:hover{
  background: #56AF40;
  color: #fff;
  text-decoration: none;
}

/* Case studies on environment pages */
.page-env .env-studies{
  padding: clamp(48px, 7vw, 72px) 0;
  background: var(--env-cream);
  border-top: 1px solid var(--env-line);
}

.page-env .env-studies .section-head{
  text-align: left;
  margin-bottom: 28px;
}

.page-env .env-studies .eyebrow{
  justify-content: flex-start;
}

.page-env .env-studies .cards{
  gap: 20px;
}

.page-env .env-studies .card--study{
  border-radius: 0;
  border: 1px solid var(--env-line);
  box-shadow: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.page-env .env-studies .card--study:hover{
  border-color: var(--env-accent);
  transform: translateY(-3px);
  box-shadow: 4px 4px 0 var(--env-ink);
}

@media (max-width: 992px){
  .env-bridge__grid{
    grid-template-columns: 1fr;
  }

  .env-bridge__card.env-reveal:nth-child(2),
  .env-bridge__card.env-reveal:nth-child(3){
    transition-delay: 0ms;
  }

  .env-cta__inner{
    flex-direction: column;
    align-items: flex-start;
  }

  .env-chapter,
  .env-chapter--flip{
    grid-template-columns: 1fr;
  }

  .env-chapter--flip .env-chapter__visual,
  .env-chapter--flip .env-chapter__content{
    order: unset;
  }

  .env-chapter__visual{
    min-height: 220px;
  }

  .env-scenebar__frame{
    grid-template-columns: 1fr;
  }

  .env-scenebar__stage{
    min-height: 200px;
  }

  .env-pillar__panel-inner{
    grid-template-columns: 1fr;
    padding-left: 4px;
  }

  .env-pillar__stat{
    justify-self: start;
  }

  .env-banner__inner{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .env-banner__icon{
    margin: 0 auto;
  }

  .env-pullquote{
    flex-direction: column;
    text-align: center;
  }

  .env-pullquote__value{
    border-right: none;
    border-bottom: 3px solid var(--env-line);
    padding-right: 0;
    padding-bottom: 12px;
  }

  .env-pullquote__label{
    max-width: none;
    text-align: center;
  }
}

@media (max-width: 640px){
  .env-pillar__trigger{
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }

  .env-pillar__icon{
    display: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .env-chapter.env-reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }

  .env-pillar__panel{ animation: none; }
  .env-scenebar__stage{ transition: none; }
  .page-env .env-studies .card--study:hover{ transform: none; }
}

/* ==========================================================================
   LBE case study (.page-study)
   ========================================================================== */
.page-study{
  --cs-ink: #14201c;
  --cs-muted: #5a6b64;
  --cs-line: rgba(20, 32, 28, 0.12);
  --cs-accent: #007a33;
  --cs-accent-soft: #8fe07a;
  --cs-forest: #0f3d28;
  --cs-sand: #e8efe9;
}

.page-study .cs-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.page-study .cs-reveal.is-visible{
  opacity: 1;
  transform: none;
}

.page-study .cs-eyebrow,
.page-study .section-head .eyebrow{
  display: inline-block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cs-accent);
}

.page-study .cs-lead{
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.55;
  color: var(--cs-ink);
}

.page-study .study-cta__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.page-study .study-cta__secondary{
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.45);
  text-decoration: none;
  padding-bottom: 2px;
}
.page-study .study-cta__secondary:hover{
  color: #8fe07a;
  border-color: #8fe07a;
}

.cs-intro{
  padding: clamp(40px, 6vw, 72px) 0;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(143, 224, 122, 0.18), transparent 60%),
    linear-gradient(180deg, #f3f7f4 0%, #fff 70%);
}
.cs-intro__inner{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.75fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
.cs-intro__copy h2{
  margin: 0 0 12px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.15;
  color: var(--cs-ink);
}
.cs-intro__copy p{
  color: var(--cs-muted);
  line-height: 1.65;
}
.cs-intro__pull{
  margin: 28px 0 0;
  padding: 20px 22px;
  border-left: 3px solid var(--cs-accent);
  background: rgba(255,255,255,0.7);
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--cs-ink);
  quotes: none;
}
.cs-intro__pull footer{
  display: block;
  margin-top: 14px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--cs-muted);
}

.cs-meta{
  display: grid;
  gap: 0;
  border: 1px solid var(--cs-line);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(8px);
}
.cs-meta__item{
  padding: 16px 18px;
  border-bottom: 1px solid var(--cs-line);
}
.cs-meta__item:last-child{ border-bottom: none; }
.cs-meta__label{
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cs-muted);
  margin-bottom: 4px;
}
.cs-meta__value{
  font-weight: 600;
  color: var(--cs-ink);
}
.cs-meta__value a{ color: var(--cs-accent); }

.cs-story{
  padding: 8px 0 56px;
}
.cs-story__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.cs-story__card{
  padding: clamp(24px, 3vw, 36px);
  background: #fff;
  border: 1px solid var(--cs-line);
  box-shadow: 0 18px 40px rgba(20, 32, 28, 0.04);
}
.cs-story__card p{
  color: var(--cs-muted);
  line-height: 1.7;
  font-size: 16px;
}
.cs-story__card a{ color: var(--cs-accent); }

.cs-impact{
  padding: clamp(40px, 6vw, 64px) 0;
  background: var(--cs-sand);
}
.cs-impact__inner{
  max-width: 820px;
}
.cs-impact__copy p{
  margin: 0;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.7;
  color: var(--cs-ink);
}

.cs-quote{
  padding: clamp(48px, 7vw, 80px) 0;
  background: var(--cs-forest);
  color: #fff;
}
.cs-quote__inner{
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.cs-quote blockquote{
  margin: 0 0 22px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 500;
  line-height: 1.55;
  quotes: none;
}
.cs-quote blockquote::before{
  content: "“";
  display: block;
  margin-bottom: 8px;
  font-size: 42px;
  line-height: 1;
  color: var(--cs-accent-soft);
}
.cs-quote figcaption{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}
.cs-quote figcaption span{ opacity: 0.75; }

.cs-gallery{
  padding: clamp(48px, 7vw, 80px) 0;
}
.cs-gallery__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cs-ph{
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  min-height: 200px;
  overflow: hidden;
  border-radius: 2px;
}
.cs-ph img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cs-ph--wide{ grid-column: span 2; aspect-ratio: 16 / 10; min-height: 240px; }

@media (max-width: 992px){
  .cs-intro__inner,
  .cs-story__grid{
    grid-template-columns: 1fr;
  }
  .cs-gallery__grid{
    grid-template-columns: 1fr 1fr;
  }
  .cs-ph--wide{ grid-column: span 2; }
}

@media (max-width: 640px){
  .cs-gallery__grid{
    grid-template-columns: 1fr;
  }
  .cs-ph--wide{ grid-column: auto; }
}

@media (prefers-reduced-motion: reduce){
  .page-study .cs-reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Fixture product pages (.page-fixture)
   ========================================================================== */
.page-fixture{
  --fx-ink: #14201c;
  --fx-muted: #5a6b64;
  --fx-line: rgba(20, 32, 28, 0.12);
  --fx-accent: #007a33;
  --fx-sand: #e8efe9;
}

.page-fixture .fixture-reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.page-fixture .fixture-reveal.is-visible{
  opacity: 1;
  transform: none;
}

.fixture-eyebrow,
.page-fixture .section-head .eyebrow{
  display: inline-block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fx-accent);
}

.fixture-lead{
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.55;
  color: var(--fx-ink);
}

.fixture-intro{
  padding: clamp(40px, 6vw, 72px) 0;
  background:
    radial-gradient(900px 420px at 8% 0%, rgba(143, 224, 122, 0.16), transparent 60%),
    linear-gradient(180deg, #f3f7f4 0%, #fff 70%);
}
.fixture-intro__inner{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.fixture-intro__copy h2{
  margin: 0 0 14px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.15;
  color: var(--fx-ink);
}
.fixture-intro__copy p{ color: var(--fx-muted); line-height: 1.65; }
.fixture-intro__copy a{ color: var(--fx-accent); }
.fixture-intro__media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(20, 32, 28, 0.08);
}

/* Fixtures index — visual lineup */
.fixture-catalog-benefits{
  padding: clamp(28px, 4vw, 40px) 0;
  border-top: 1px solid var(--fx-line);
  border-bottom: 1px solid var(--fx-line);
  background: #fff;
}
.fixture-catalog-benefits__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 28px);
}
.fixture-catalog-benefits__list h3{
  margin: 0 0 8px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--fx-ink);
}
.fixture-catalog-benefits__list p{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fx-muted);
}

.fixture-catalog{
  padding: clamp(48px, 7vw, 80px) 0;
  background:
    radial-gradient(700px 320px at 92% 8%, rgba(143, 224, 122, 0.12), transparent 55%),
    #fff;
}
.fixture-catalog .section-head{
  margin-bottom: clamp(28px, 4vw, 40px);
}
.fixture-catalog__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 24px);
}
.fixture-tile{
  display: flex;
  flex-direction: column;
  min-height: 100%;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--fx-line);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.fixture-tile:hover,
.fixture-tile:focus-visible{
  border-color: rgba(0, 122, 51, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(20, 32, 28, 0.08);
  outline: none;
}
.fixture-tile__media{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  aspect-ratio: 4 / 3;
  width: 100%;
  padding: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, #fff 0%, #eef3f0 72%);
}
.fixture-tile__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.fixture-tile__body{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 8px;
  min-height: 196px;
  padding: 20px 22px 22px;
  border-top: 1px solid var(--fx-line);
}
.fixture-tile__tag{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fx-accent);
}
.fixture-tile__body h3{
  margin: 0;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.2;
  color: var(--fx-ink);
}
.fixture-tile__body p{
  margin: 0;
  flex: 1;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fx-muted);
}
.fixture-tile__cta{
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fx-accent);
}
.fixture-tile__cta::after{
  content: " →";
}
.fixture-tile:hover .fixture-tile__cta,
.fixture-tile:focus-visible .fixture-tile__cta{
  text-decoration: underline;
}

.fixture-catalog-system{
  padding: clamp(40px, 6vw, 64px) 0;
  background: var(--fx-sand);
}
.fixture-catalog-system__inner{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.fixture-catalog-system__inner h2{
  margin: 0 0 12px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--fx-ink);
}
.fixture-catalog-system__inner p{
  margin: 0;
  color: var(--fx-muted);
  line-height: 1.6;
}
.fixture-catalog-system__links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.fixture-catalog-system__links a{
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--fx-line);
  border-radius: 4px;
  background: #fff;
  color: var(--fx-ink);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.fixture-catalog-system__links a:hover,
.fixture-catalog-system__links a:focus-visible{
  border-color: rgba(0, 122, 51, 0.4);
  color: var(--fx-accent);
  outline: none;
}

.fixture-product{
  padding: clamp(36px, 5vw, 64px) 0;
}
.fixture-product--alt{
  background: var(--fx-sand);
}
.fixture-product__inner{
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.fixture-product__inner--flip{
  grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
}
.fixture-product__inner--flip .fixture-product__media{ order: 2; }
.fixture-product__inner--flip .fixture-product__copy{ order: 1; }
.fixture-product__media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: #fff;
}
.fixture-product__media img.fixture-img--portrait,
.fixture-photo-pair img.fixture-img--portrait{
  width: auto;
  max-width: 100%;
  max-height: min(520px, 70vh);
  margin-inline: auto;
}

.fixture-intro__media--contain,
.fixture-product__media--contain{
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(80% 70% at 50% 45%, #fff 0%, #f3f7f3 70%, #e8efe9 100%);
  border: 1px solid var(--fx-line);
  border-radius: 4px;
  padding: clamp(20px, 4vw, 40px);
  min-height: min(360px, 48vw);
}

.fixture-intro__media--contain img,
.fixture-product__media--contain img{
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
  box-shadow: none;
  background: transparent;
}

/* Interactive downlight demos */
.fixture-demo{
  --cone-r: 255;
  --cone-g: 244;
  --cone-b: 229;
  --cone-intensity: 0.7;
  /* Sized to the inner diffuser only - stops short of the white trim ring */
  --lens-size: 39.5%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fixture-demo__stage{
  overflow: hidden;
  border-radius: 4px;
  background: #050505;
  box-shadow: 0 14px 34px rgba(20, 32, 28, 0.08);
}
.fixture-demo__product{
  position: relative;
  background: #050505;
}
.fixture-demo__product img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.fixture-demo__beam{
  position: relative;
  height: clamp(160px, 28vw, 220px);
  background: #050505;
  overflow: hidden;
}
.fixture-demo__cone{
  position: absolute;
  left: 50%;
  top: -8%;
  width: 92%;
  height: 118%;
  transform: translateX(-50%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  background: linear-gradient(
    180deg,
    rgba(var(--cone-r), var(--cone-g), var(--cone-b), calc(var(--cone-intensity) * 0.92)) 0%,
    rgba(var(--cone-r), var(--cone-g), var(--cone-b), calc(var(--cone-intensity) * 0.42)) 42%,
    rgba(var(--cone-r), var(--cone-g), var(--cone-b), 0) 100%
  );
  filter: blur(0.4px);
  pointer-events: none;
}

/* Face-on fixture demos: color the circular diffuser itself */
.fixture-demo--face .fixture-demo__stage{
  background: #ececec;
}
.fixture-demo--face .fixture-demo__product{
  background: #ececec;
}
.fixture-demo--face .fixture-demo__beam{
  display: none;
}
.fixture-demo__lens{
  display: none;
}
.fixture-demo--face .fixture-demo__lens{
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--lens-size);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  overflow: hidden;
  /* Hard clip - no outer glow/blur so the trim ring stays neutral */
  background:
    radial-gradient(
      circle at 50% 46%,
      rgba(255, 255, 255, calc(var(--cone-intensity) * 0.55)) 0%,
      rgba(255, 255, 255, 0) 48%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(var(--cone-r), var(--cone-g), var(--cone-b), calc(var(--cone-intensity) * 0.96)) 0%,
      rgba(var(--cone-r), var(--cone-g), var(--cone-b), calc(var(--cone-intensity) * 0.8)) 62%,
      rgba(var(--cone-r), var(--cone-g), var(--cone-b), calc(var(--cone-intensity) * 0.55)) 88%,
      rgba(var(--cone-r), var(--cone-g), var(--cone-b), calc(var(--cone-intensity) * 0.2)) 97%,
      rgba(var(--cone-r), var(--cone-g), var(--cone-b), 0) 100%
    );
  mix-blend-mode: screen;
  filter: saturate(1.15);
  box-shadow: none;
  transition: opacity 0.12s ease;
}
.fixture-demo--face .fixture-demo__stage{
  box-shadow: 0 14px 34px rgba(20, 32, 28, 0.08);
}
.fixture-demo__controls{
  display: grid;
  gap: 12px;
}
.fixture-demo__control{
  display: grid;
  gap: 6px;
  margin: 0;
}
.fixture-demo__control-label{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fx-muted);
}
.fixture-demo__control-label output{
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--fx-ink);
}
.fixture-demo__scale{
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--fx-muted);
}
.fixture-demo__control input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d7ddd8, #8fe07a);
  outline: none;
  cursor: pointer;
}
.fixture-demo__control input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--fx-accent);
  box-shadow: 0 2px 8px rgba(20, 32, 28, 0.18);
}
.fixture-demo__control input[type="range"]::-moz-range-thumb{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--fx-accent);
  box-shadow: 0 2px 8px rgba(20, 32, 28, 0.18);
}
.fixture-demo__slider--cct{
  background: linear-gradient(90deg, #ffb25a 0%, #ffe9c4 35%, #f5f7ff 65%, #9ec8ff 100%) !important;
}
.fixture-demo__slider--hue{
  background: linear-gradient(
    90deg,
    #ff0040,
    #ff8000,
    #ffff00,
    #00ff40,
    #00ffff,
    #0040ff,
    #8000ff,
    #ff0040
  ) !important;
}
.fixture-product--alt .fixture-demo__stage{
  box-shadow: 0 14px 34px rgba(20, 32, 28, 0.06);
}
.fixture-product__copy h3{
  margin: 0 0 12px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--fx-ink);
}
.fixture-product__copy p{
  color: var(--fx-muted);
  line-height: 1.7;
}

.fixture-bullets{
  margin: 16px 0 0;
  padding-left: 18px;
  color: var(--fx-ink);
}
.fixture-bullets li{ margin-bottom: 6px; line-height: 1.5; }

.fixture-specs{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
}
.fixture-specs > div{
  padding: 12px 14px;
  background: rgba(255,255,255,0.85);
  border-top: 3px solid var(--fx-accent);
}
.fixture-product--alt .fixture-specs > div{
  background: #fff;
}
.fixture-specs dt{
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fx-muted);
}
.fixture-specs dd{
  margin: 0;
  font-weight: 600;
  color: var(--fx-ink);
  line-height: 1.35;
}

.fixture-features,
.fixture-usecases{
  padding: clamp(40px, 6vw, 72px) 0;
}
.fixture-features__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 8px;
}
.fixture-features__grid--3{
  grid-template-columns: repeat(3, 1fr);
}
.fixture-feature{
  padding: 22px 20px;
  background: var(--fx-sand);
  border-top: 3px solid var(--fx-accent);
}
.fixture-feature h3{
  margin: 0 0 8px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 18px;
  color: var(--fx-ink);
}
.fixture-feature p{
  margin: 0;
  color: var(--fx-muted);
  line-height: 1.55;
}

.fixture-usecases__list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  margin: 0 0 24px;
  padding-left: 18px;
  color: var(--fx-ink);
  font-weight: 500;
}
.fixture-usecases__media{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.fixture-usecases__media img{
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 4px;
}

.fixture-specs-band{
  padding: 28px 0 56px;
}
.fixture-specs--band > div{
  background: var(--fx-sand);
}

.fixture-software{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
}
.fixture-software__card{
  padding: 16px;
  background: #fff;
  border-top: 3px solid var(--fx-accent);
}
.fixture-software__card img{
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 12px;
  border-radius: 4px;
  background: #111;
}
.fixture-software__card p{
  margin: 0;
  color: var(--fx-muted);
  line-height: 1.55;
  font-size: 0.95rem;
}

.fixture-video{
  margin-top: 28px;
}
.fixture-video__frame{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: 4px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 18px 40px rgba(20, 32, 28, 0.1);
}
.fixture-video__frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.fixture-features__media-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
}
.fixture-feature--media{
  display: flex;
  flex-direction: column;
}
.fixture-feature--media img{
  display: block;
  width: 100%;
  max-width: 220px;
  margin: 0 auto 16px;
  height: auto;
  background: #000;
  border-radius: 50%;
}

@media (max-width: 992px){
  .fixture-intro__inner,
  .fixture-product__inner,
  .fixture-product__inner--flip,
  .fixture-features__grid,
  .fixture-features__grid--3,
  .fixture-features__media-grid,
  .fixture-software,
  .fixture-usecases__list,
  .fixture-usecases__media,
  .fixture-catalog-system__inner{
    grid-template-columns: 1fr;
  }
  .fixture-catalog-benefits__list{
    grid-template-columns: 1fr 1fr;
  }
  .fixture-product__inner--flip .fixture-product__media,
  .fixture-product__inner--flip .fixture-product__copy{
    order: unset;
  }
  .fixture-usecases__media img{ height: 200px; }
  .fixture-feature--media img{ max-width: 180px; }
  .fixture-catalog__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .fixture-catalog-benefits__list,
  .fixture-catalog__grid{
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-fixture .fixture-reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }
  .fixture-tile:hover,
  .fixture-tile:focus-visible{
    transform: none;
  }
}

.fixture-photo-pair{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 8px;
}
.fixture-photo-pair figure{
  margin: 0;
}
.fixture-photo-pair img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: #111;
  box-shadow: 0 18px 40px rgba(20, 32, 28, 0.1);
}
@media (max-width: 768px){
  .fixture-photo-pair{
    grid-template-columns: 1fr;
  }
}

img.software-shot{
  background: #0f1412;
}
.page-software .fixture-intro__inner{
  grid-template-columns: 1fr;
  gap: 28px;
}
.page-software .fixture-intro__copy{
  max-width: 46rem;
}
.software-wide{
  margin-top: 4px;
}
.software-wide img,
.page-software .fixture-intro__media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #0f1412;
  box-shadow: 0 18px 40px rgba(20, 32, 28, 0.12);
}
.software-shot-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.72fr) minmax(0, 0.72fr);
  gap: 16px;
  align-items: stretch;
}
.software-shot-grid figure{
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #0f1412;
  border: 1px solid #e6efe3;
}
.software-shot-grid img{
  display: block;
  width: 100%;
  height: auto;
  background: #0f1412;
}
.software-shot-grid figcaption{
  margin-top: auto;
}
.software-shot-grid figcaption,
.page-software .fixture-photo-pair figcaption{
  padding: 10px 12px 12px;
  background: #fff;
  color: #4a544c;
  font-size: 0.9rem;
  line-height: 1.45;
}
.page-software .fixture-photo-pair figure{
  overflow: hidden;
  border-radius: 8px;
  background: #0f1412;
  border: 1px solid #e6efe3;
}
.page-software .fixture-product__media img.software-shot{
  width: auto;
  max-width: 100%;
  max-height: min(560px, 72vh);
  margin-inline: auto;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(20, 32, 28, 0.12);
}
.page-software .fixture-product a{
  color: var(--fx-accent);
}
@media (max-width: 900px){
  .software-shot-grid{
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }
}

/* Leaf Troffer ColorTune gallery */
.leaf-cct-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.leaf-cct{
  margin: 0;
  background: #fff;
  border: 1px solid #e6efe3;
  overflow: hidden;
}
.leaf-cct img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #f4f6f4;
}
.leaf-cct figcaption{
  padding: 10px 12px 12px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #007A33;
  text-align: center;
}
@media (max-width: 900px){
  .leaf-cct-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .leaf-cct-grid{ grid-template-columns: 1fr; }
}

/* Resources: How PoE Works journey */
.poe-flow-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.poe-flow-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(86, 175, 64, 0.10);
  border: 1px solid rgba(0, 122, 51, 0.16);
  color: #1c3a28;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
}
.poe-flow-chip img{
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.poe-cable-split{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.poe-cable-split__media{
  margin: 0;
}
.poe-cable-split__media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(20, 32, 28, 0.08);
}
.poe-cable-split__copy{
  display: grid;
  gap: 14px;
}
.poe-callout{
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e6efe3;
  box-shadow: 0 8px 22px rgba(8, 40, 20, 0.05);
}
.poe-callout img{
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.poe-callout h3{
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.poe-callout p{
  margin: 0;
  color: #4a544c;
  line-height: 1.55;
  font-size: 0.95rem;
}

.poe-journey{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  counter-reset: poe-step;
}
.poe-journey__step{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(22px, 4vw, 42px);
  align-items: center;
  padding: clamp(20px, 3vw, 28px);
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e6efe3;
  box-shadow: 0 12px 30px rgba(8, 40, 20, 0.06);
}
.poe-journey__step--flip{
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.poe-journey__step--flip .poe-journey__media{ order: 2; }
.poe-journey__step--flip .poe-journey__copy{ order: 1; }
.poe-journey__kicker{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.poe-journey__kicker .eyebrow{
  margin: 0;
}
.poe-journey__badge{
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #56AF40, #007A33);
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 8px 18px rgba(0, 122, 51, 0.28);
}
.poe-journey__media img,
.poe-journey__media-grid img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #0f1412;
}
.poe-journey__media-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.poe-journey__media-grid img{
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  object-position: center;
  background: #eef1ee;
}
.poe-journey__media-grid img:nth-child(4){
  object-fit: contain;
  padding: 10px;
}
.poe-journey__copy h3{
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}
.poe-journey__copy > p{
  margin: 0 0 12px;
  color: #3f4a43;
  line-height: 1.65;
}
.poe-journey__bullets{
  margin: 0 0 14px;
  padding-left: 1.1rem;
  color: #3f4a43;
  line-height: 1.55;
}
.poe-journey__bullets li{ margin-bottom: 4px; }

.poe-benefit-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.poe-benefit{
  padding: 26px 22px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e6efe3;
  box-shadow: 0 8px 22px rgba(8, 40, 20, 0.05);
}
.poe-benefit img{
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  object-fit: contain;
}
.poe-benefit h3{
  margin: 0 0 8px;
  font-size: 1.15rem;
}
.poe-benefit p{
  margin: 0;
  color: #4a544c;
  line-height: 1.55;
}

.poe-graph{
  margin: 8px 0 0;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e6efe3;
  box-shadow: 0 12px 30px rgba(8, 40, 20, 0.06);
}
.poe-graph__caption{
  margin: 0 0 18px;
  color: #4a544c;
  font-size: 0.98rem;
  line-height: 1.55;
}
.poe-graph__chart{
  width: 100%;
  overflow-x: auto;
}
.poe-graph__svg{
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
}
.poe-graph__legend{
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.poe-graph__legend li{
  display: grid;
  gap: 4px;
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: rgba(86, 175, 64, 0.06);
  border: 1px solid #e6efe3;
}
.poe-graph__legend li.is-genisys{
  background: linear-gradient(160deg, rgba(86, 175, 64, 0.16), rgba(0, 122, 51, 0.08));
  border-color: rgba(0, 122, 51, 0.28);
  box-shadow: inset 0 0 0 1px rgba(86, 175, 64, 0.12);
}
.poe-graph__legend-year{
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #007A33;
}
.poe-graph__legend strong{
  font-size: 0.95rem;
  color: #1c2421;
}
.poe-graph__legend span{
  font-size: 0.88rem;
  line-height: 1.45;
  color: #4a544c;
}
.poe-graph__legend em{
  font-style: normal;
  font-weight: 700;
  color: #007A33;
}
@media (max-width: 1100px){
  .poe-graph__legend{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.poe-feature-shot{
  margin: 0;
}
.poe-feature-shot img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(20, 32, 28, 0.08);
}

@media (max-width: 900px){
  .poe-cable-split,
  .poe-journey__step,
  .poe-journey__step--flip{
    grid-template-columns: 1fr;
  }
  .poe-journey__step--flip .poe-journey__media,
  .poe-journey__step--flip .poe-journey__copy{
    order: unset;
  }
  .poe-benefit-row{
    grid-template-columns: 1fr;
  }
  .poe-graph__legend{
    grid-template-columns: 1fr;
  }
  .poe-journey__media-grid{
    grid-template-columns: 1fr 1fr;
  }
}

.cards--3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cards--2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px){
  .cards--3,
  .cards--2{
    grid-template-columns: 1fr;
  }
}

/* Resources: video library */
.video-library{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 12px;
}
.video-card{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.video-card .fixture-video{
  margin-top: 0;
}
.video-card__body .eyebrow{
  display: inline-block;
  margin-bottom: 6px;
}
.video-card__body h3{
  margin: 0 0 8px;
  font-size: 1.2rem;
}
.video-card__body p{
  margin: 0 0 8px;
  line-height: 1.55;
}
@media (max-width: 768px){
  .video-library{
    grid-template-columns: 1fr;
  }
}

/* Find an Installer */
.page-installer .hero,
.page-dealer .hero{
  height: clamp(440px, 52vw, 580px);
}
.page-installer .heroContent h1,
.page-dealer .heroContent h1{
  font-size: clamp(2.45rem, 5.2vw, 4rem);
}
@media (max-width: 768px){
  .page-installer .hero{
    height: min(420px, 78vw);
  }
  .page-dealer .hero{
    height: 500px;
  }
  .page-dealer .hero .heroContent{
    justify-content: flex-end;
    padding-top: 96px;
    padding-bottom: 28px;
    box-sizing: border-box;
  }
  .page-dealer .heroContent h1{
    font-size: clamp(2.1rem, 9vw, 2.55rem);
  }
  .page-dealer .heroActions{
    margin-top: 16px;
    gap: 10px;
  }
  .page-dealer .heroBtn{
    padding: 11px 20px;
    font-size: 14px;
  }
}
.installer-cover{
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(111, 206, 87, 0.18), transparent 52%),
    #10160f;
  color: #e8efe6;
}
.installer-cover .eyebrow{
  color: #8fe07a;
}
.installer-cover .eyebrow::before{
  background: #6fce57;
}
.installer-cover__intro{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}
.installer-cover h2{
  margin: 0;
  max-width: 14ch;
  color: #fff;
  font-size: clamp(2.15rem, 4.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.installer-cover.home-section p,
.installer-cover .lead{
  margin: 0;
  max-width: 38ch;
  color: rgba(232, 239, 230, 0.82);
  font-size: clamp(1.05rem, 1.55vw, 1.22rem);
}
@media (max-width: 768px){
  .installer-cover__intro,
  .installer-why__intro{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .installer-cover h2,
  .installer-why__intro h2{ max-width: none; }
}
.installer-why{
  background: #f4f8f2;
  border-bottom: 1px solid #e6efe3;
}
.installer-why__intro{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(32px, 4.5vw, 48px);
}
.installer-why__intro h2{
  margin: 0;
  max-width: 12ch;
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.installer-why .lead{
  margin: 0;
  max-width: 38ch;
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
}
.installer-note{
  max-width: none;
  margin-top: 36px;
}
.installer-perks{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 0;
}
.installer-perk{
  display: flex;
  flex-direction: column;
  padding: 28px 26px 26px;
  border: 1px solid rgba(20, 40, 28, 0.12);
  border-radius: 4px;
  background:
    linear-gradient(165deg, rgba(111, 206, 87, 0.1), transparent 52%),
    #fff;
  box-shadow: 0 12px 28px rgba(20, 40, 28, 0.05);
}
.installer-perk__num{
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(145deg, #6fce57, #007A33);
  box-shadow: 0 0 0 5px rgba(111, 206, 87, 0.16);
}
.installer-perk h3{
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
}
.installer-perk p{
  margin: 0;
  line-height: 1.55;
  color: #3a463e;
}
@media (max-width: 768px){
  .installer-why__intro{
    grid-template-columns: 1fr;
  }
}
.start-paths{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.start-path{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 28px 24px;
  border: 1px solid rgba(20, 40, 28, 0.12);
  border-radius: 4px;
  background:
    linear-gradient(165deg, rgba(111, 206, 87, 0.08), transparent 55%),
    #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.start-path:hover{
  border-color: rgba(0, 122, 51, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(20, 40, 28, 0.08);
  text-decoration: none;
  color: inherit;
}
.start-path--project{
  background:
    linear-gradient(165deg, rgba(0, 122, 51, 0.1), transparent 55%),
    #fff;
}
.start-path__eyebrow{
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #007A33;
}
.start-path h3{
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
}
.start-path p{
  margin: 0;
  flex: 1;
  line-height: 1.55;
  color: #3a463e;
}
.start-path__cta{
  margin-top: 8px;
  font-weight: 600;
  color: #007A33;
}
.start-path__cta::after{
  content: " →";
  display: inline-block;
  transition: transform 0.15s ease;
}
.start-path:hover .start-path__cta::after{
  transform: translateX(4px);
}
@media (max-width: 768px){
  .installer-perks,
  .start-paths{
    grid-template-columns: 1fr;
  }
}

/* Authorized Dealers */
.dealer-cover{
  background:
    radial-gradient(90% 90% at 100% 0%, rgba(111, 206, 87, 0.18), transparent 52%),
    #10160f;
  color: #e8efe6;
}
.dealer-cover .eyebrow{
  color: #8fe07a;
}
.dealer-cover .eyebrow::before{
  background: #6fce57;
}
.dealer-cover__intro,
.dealer-why__intro,
.dealer-track__intro{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}
.dealer-cover h2{
  margin: 0;
  max-width: 14ch;
  color: #fff;
  font-size: clamp(2.15rem, 4.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.dealer-cover.home-section p,
.dealer-cover .lead{
  margin: 0;
  max-width: 38ch;
  color: rgba(232, 239, 230, 0.82);
  font-size: clamp(1.05rem, 1.55vw, 1.22rem);
}
.dealer-why{
  background: #f4f8f2;
  border-bottom: 1px solid #e6efe3;
}
.dealer-why__intro{
  margin-bottom: clamp(32px, 4.5vw, 48px);
}
.dealer-why__intro h2,
.dealer-track__intro h2{
  margin: 0;
  max-width: 16ch;
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.dealer-why .lead,
.dealer-track .lead{
  margin: 0;
  max-width: 38ch;
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
}
.dealer-perks{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.dealer-perk{
  display: flex;
  flex-direction: column;
  padding: 28px 26px 26px;
  border: 1px solid rgba(20, 40, 28, 0.12);
  border-radius: 4px;
  background:
    linear-gradient(165deg, rgba(111, 206, 87, 0.1), transparent 52%),
    #fff;
  box-shadow: 0 12px 28px rgba(20, 40, 28, 0.05);
}
.dealer-perk__num{
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(145deg, #6fce57, #007A33);
  box-shadow: 0 0 0 5px rgba(111, 206, 87, 0.16);
}
.dealer-perk h3{
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
}
.dealer-perk p{
  margin: 0;
  line-height: 1.55;
  color: #3a463e;
}
.dealer-fit{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 20px 32px;
  align-items: center;
  margin-top: clamp(28px, 4vw, 40px);
  padding: 22px 24px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid rgba(20, 40, 28, 0.1);
}
.dealer-fit__note{
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.45;
  color: #1a2a20;
}
.dealer-fit__tags{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.dealer-fit__tags li{
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #007A33;
  background: rgba(111, 206, 87, 0.14);
}
.dealer-track{
  background: #fff;
  scroll-margin-top: 110px;
}
.dealer-track__intro{
  margin-bottom: clamp(32px, 4.5vw, 48px);
}
.dealer-path{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.dealer-path::before{
  content: "";
  position: absolute;
  top: 32px;
  left: 8%;
  right: 8%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6fce57, #007A33);
}
.dealer-path__step{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
.dealer-path__marker{
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(145deg, #6fce57, #007A33);
  box-shadow: 0 0 0 6px #fff, 0 0 0 9px rgba(111, 206, 87, 0.28);
}
.dealer-path__card{
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  border: 1px solid rgba(20, 40, 28, 0.12);
  border-radius: 4px;
  background:
    linear-gradient(165deg, rgba(111, 206, 87, 0.1), transparent 52%),
    #fff;
  box-shadow: 0 12px 28px rgba(20, 40, 28, 0.05);
}
.dealer-path__step:nth-child(even) .dealer-path__card{
  background:
    linear-gradient(200deg, rgba(0, 122, 51, 0.08), transparent 50%),
    #fff;
}
.dealer-path__phase{
  display: block;
  margin-bottom: 8px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #007A33;
}
.dealer-path__card h3{
  margin: 0 0 8px;
  font-size: 1.2rem;
}
.dealer-path__card p{
  margin: 0;
  line-height: 1.55;
  color: #3a463e;
}
.dealer-path__link{
  display: inline-block;
  margin-top: 12px;
  font-weight: 600;
  color: #007A33;
  text-decoration: none;
}
.dealer-path__link:hover{
  text-decoration: underline;
}
.dealer-next{
  background: #f4f8f2;
  border-top: 1px solid #e6efe3;
}
@media (max-width: 1200px){
  .dealer-path{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .dealer-path::before{
    top: 28px;
    bottom: 28px;
    left: 31px;
    right: auto;
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, #6fce57, #007A33);
  }
  .dealer-path__step{
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  .dealer-path__marker{
    width: 64px;
    height: 64px;
    margin: 0;
  }
}
@media (max-width: 900px){
  .dealer-cover__intro,
  .dealer-why__intro,
  .dealer-track__intro,
  .dealer-fit{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .dealer-cover h2,
  .dealer-why__intro h2,
  .dealer-track__intro h2{
    max-width: none;
  }
  .dealer-perks{
    grid-template-columns: 1fr;
  }
  .dealer-fit__tags{
    justify-content: flex-start;
  }
}
@media (max-width: 768px){
  .dealer-path::before{
    left: 23px;
  }
  .dealer-path__step{
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
  }
  .dealer-path__marker{
    width: 48px;
    height: 48px;
    font-size: 0.88rem;
    box-shadow: 0 0 0 5px #fff, 0 0 0 8px rgba(111, 206, 87, 0.28);
  }
}

/* Starter kit page */
.kit-intro{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
.kit-intro__copy h2{
  margin-top: 0.35em;
}
.kit-intro__copy .lead{
  margin-bottom: 0.85em;
}
.kit-inline,
.kit-intro__open{
  margin: 0;
  background: transparent;
  border: 0;
  padding: 0;
}
.kit-inline{
  margin-top: 1.25rem;
  max-width: 280px;
}
.kit-inline img,
.kit-intro__open img{
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.kit-inline figcaption,
.kit-intro__open figcaption,
.kit-feature figcaption,
.kit-gallery figcaption,
.kit-how__media figcaption{
  margin-top: 8px;
  font-size: 0.9rem;
  color: #5a685e;
}
.kit-inline--wide{
  max-width: none;
  margin: 18px 0 20px;
}
.kit-inline--wide img{
  border-radius: 12px;
}
.kit-feature{
  margin: 0 0 28px;
}
.kit-feature img,
.kit-gallery img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid #e6efe3;
  background: #f4f7f2;
}
.kit-how__media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #d5e0d4;
  background: #0f1412;
  box-shadow: 0 18px 40px rgba(20, 32, 28, 0.12);
}
.kit-gallery{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 8px 0 0;
}
.kit-gallery figure,
.kit-feature,
.kit-how__media{
  margin: 0;
}
.kit-how{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
.kit-how .kit-steps{
  grid-template-columns: 1fr;
  margin-top: 18px;
}
.kit-contents{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.kit-contents__item{
  padding: 20px 20px 18px;
  border: 1px solid rgba(20, 40, 28, 0.12);
  border-radius: 4px;
  background:
    linear-gradient(155deg, rgba(111, 206, 87, 0.08), transparent 50%),
    #fff;
}
.kit-contents__label{
  display: block;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #007A33;
  margin-bottom: 8px;
}
.kit-contents__item h3{
  margin: 0 0 6px;
  font-size: 1.15rem;
}
.kit-contents__item p{
  margin: 0;
  line-height: 1.55;
  color: #3a463e;
}
.kit-steps{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.kit-steps__step{
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid rgba(20, 40, 28, 0.1);
}
.kit-steps__num{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, #6fce57, #007A33);
  box-shadow: 0 0 0 5px rgba(111, 206, 87, 0.16);
}
.kit-steps__step h3{
  margin: 0 0 6px;
  font-size: 1.15rem;
}
.kit-steps__step p{
  margin: 0;
  line-height: 1.55;
  color: #3a463e;
}
.kit-why{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(260px, 0.9fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 8px;
}
.kit-why__point{
  padding: 24px 22px 22px;
  border: 1px solid rgba(20, 40, 28, 0.12);
  border-radius: 4px;
  background:
    linear-gradient(155deg, rgba(111, 206, 87, 0.08), transparent 50%),
    #fff;
}
.kit-why__point h3{
  margin: 0 0 8px;
  font-size: 1.25rem;
}
.kit-why__point p{
  margin: 0;
  line-height: 1.55;
  color: #3a463e;
}
.kit-why + .home-inline-links{
  margin-top: 22px;
}
.kit-aside{
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  border-radius: 4px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(111, 206, 87, 0.18), transparent 55%),
    #10160f;
  color: #e8efe6;
}
.kit-aside .btn-light{
  margin-top: auto;
  align-self: flex-start;
}
.kit-aside__eyebrow{
  margin: 0 0 8px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8fe07a;
}
.kit-aside h3{
  margin: 0 0 10px;
  color: #fff;
  font-size: 1.45rem;
}
.kit-aside p{
  margin: 0 0 18px;
  line-height: 1.55;
  color: rgba(232, 239, 230, 0.82);
}
@media (max-width: 900px){
  .kit-contents,
  .kit-steps,
  .kit-gallery,
  .kit-how,
  .kit-why{
    grid-template-columns: 1fr;
  }
  .kit-intro{
    grid-template-columns: 1fr;
  }
  .kit-inline{
    max-width: 220px;
  }
  .kit-intro__open{
    max-width: 420px;
    margin-inline: auto;
  }
}

/* Partner logos — assets are standardized 640×280 (white or black fill) */
.partner-logo-strip{
  list-style: none;
  margin: 0 0 clamp(36px, 5vw, 56px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.partner-logo,
.partner-card__logo,
.partner-consortium__logo{
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid #e2ebe0;
  border-radius: 14px;
  background: #fff;
  line-height: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.partner-logo:hover,
.partner-card__logo:hover,
.partner-consortium__logo:hover{
  border-color: #b7d4b4;
  box-shadow: 0 10px 28px rgba(28, 52, 34, 0.08);
  transform: translateY(-2px);
}

.partner-logo--dark{
  border-color: #1c2620;
  background: #000;
}

.partner-logo--dark:hover{
  border-color: #3d5a45;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.partner-logo img,
.partner-card__logo img,
.partner-consortium__logo img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.partner-card__logo{
  margin: 0 0 18px;
}

.partner-card .card__link{
  margin-top: 8px;
}

.partner-consortium__logo{
  width: min(360px, 100%);
  margin: 0 0 22px;
}

.partner-list{
  display: grid;
  gap: 14px;
}
.section-head--follow{
  margin-top: clamp(40px, 6vw, 64px);
}
.partner-row,
.partner-parent{
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: center;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid #e6efe3;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(8, 40, 20, 0.05);
}
.partner-row__logo{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e6efe3;
  line-height: 0;
}
.partner-row__logo--dark{
  background: #000;
  border-color: #1c2620;
}
.partner-row__logo img{
  display: block;
  width: 100%;
  height: 72px;
  object-fit: contain;
}
.partner-row__copy h3,
.partner-parent h2{
  margin: 0 0 8px;
}
.partner-row__copy p,
.partner-parent p{
  margin: 0 0 10px;
  color: #4a544c;
  line-height: 1.55;
}
.partner-row__copy p:last-child,
.partner-parent p:last-child{
  margin: 0;
}
.partner-row__copy a,
.partner-parent a{
  color: #007A33;
  font-weight: 600;
  text-decoration: none;
}
.partner-row__copy a:hover,
.partner-parent a:hover{
  text-decoration: underline;
}
.partner-parent{
  max-width: none;
}
.partner-parent .eyebrow{
  margin-bottom: 8px;
}

@media (max-width: 900px){
  .partner-logo-strip{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .partner-row,
  .partner-parent{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px){
  .partner-logo-strip{
    grid-template-columns: 1fr;
  }
}

/* PoE vs Traditional comparison */
.page-poe-vs .home-media img{
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(8, 40, 20, 0.14);
  background: #fff;
}
.page-poe-vs .hero{
  height: min(400px, 58vw);
}
.page-poe-vs #poe-vs-compare{
  scroll-margin-top: 96px;
}

.poe-vs-duo{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
  margin-bottom: clamp(28px, 4vw, 40px);
}
.poe-vs-duo__card{
  position: relative;
  padding: 28px 26px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e6efe3;
  box-shadow: 0 12px 30px rgba(8, 40, 20, 0.06);
}
.poe-vs-duo__card--ac{
  background:
    linear-gradient(180deg, #f6f7f6 0%, #fff 42%);
}
.poe-vs-duo__card--poe{
  background:
    radial-gradient(420px 180px at 100% 0%, rgba(86, 175, 64, 0.18), transparent 62%),
    #fff;
  border-color: rgba(0, 122, 51, 0.22);
}
.poe-vs-duo__kicker{
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.poe-vs-duo__card--ac .poe-vs-duo__kicker{
  background: #eef1ee;
  color: #4a544c;
}
.poe-vs-duo__card--poe .poe-vs-duo__kicker{
  background: #007A33;
  color: #fff;
}
.poe-vs-duo__card h3{
  margin: 0 0 10px;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
}
.poe-vs-duo__card p{
  margin: 0;
  color: #4a544c;
  line-height: 1.55;
}
.poe-vs-duo__vs,
.poe-vs__vs{
  align-self: center;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #14241c;
  color: #fff;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(20, 36, 28, 0.22);
}

.poe-vs{
  display: grid;
  gap: 12px;
}
.poe-vs__legend{
  display: grid;
  grid-template-columns: minmax(190px, 0.58fr) minmax(0, 1.42fr);
  gap: 12px;
  align-items: center;
  margin: 0 0 2px;
  padding: 0 18px;
}
.poe-vs__legend-pair{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.poe-vs__legend-ac,
.poe-vs__legend-poe{
  padding: 10px 14px;
  border-radius: 999px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.poe-vs__legend-ac{
  background: #eef1ee;
  color: #4a544c;
}
.poe-vs__legend-poe{
  background: #007A33;
  color: #fff;
}
.poe-vs__row{
  display: grid;
  grid-template-columns: minmax(190px, 0.58fr) minmax(0, 1.42fr);
  gap: 12px;
  align-items: center;
  padding: 18px;
  background: #fff;
  border: 1px solid #e6efe3;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(8, 40, 20, 0.05);
}
.poe-vs__topic{
  display: flex;
  align-items: center;
  gap: 12px;
}
.poe-vs__topic img{
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: 0 0 auto;
}
.poe-vs__topic h3{
  margin: 0;
  font-size: 1.05rem;
  color: #14241c;
}
.poe-vs__pair{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.poe-vs__col{
  margin: 0;
  padding: 16px 16px 14px;
  border-radius: 14px;
  color: #4a544c;
  line-height: 1.55;
  font-size: 0.95rem;
}
.poe-vs__col--ac{
  background: #f4f6f4;
}
.poe-vs__col--poe{
  background: rgba(86, 175, 64, 0.10);
  border: 1px solid rgba(0, 122, 51, 0.14);
  color: #1c3a28;
  font-weight: 500;
}
.poe-vs__vs{
  width: 40px;
  height: 40px;
  font-size: 11px;
}

.poe-vs-fit{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 28px);
}
.poe-vs-fit__card{
  padding: 28px 26px 24px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e6efe3;
  box-shadow: 0 10px 30px rgba(8, 40, 20, 0.06);
}
.poe-vs-fit__card img{
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  object-fit: contain;
}
.poe-vs-fit__card--poe{
  background:
    radial-gradient(480px 220px at 100% 0%, rgba(86, 175, 64, 0.16), transparent 60%),
    #fff;
  border-color: rgba(0, 122, 51, 0.18);
}
.poe-vs-fit__kicker{
  display: inline-block;
  margin-bottom: 8px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #007A33;
}
.poe-vs-fit__card:not(.poe-vs-fit__card--poe) .poe-vs-fit__kicker{
  color: #5b6b63;
}
.poe-vs-fit__card h3{
  margin: 0 0 14px;
}
.poe-vs-fit__card ul{
  margin: 0;
  padding: 0 0 0 18px;
  color: #4a544c;
  line-height: 1.6;
}
.poe-vs-fit__card li + li{
  margin-top: 8px;
}
.poe-vs-fit__note{
  max-width: 720px;
  margin: 28px auto 0;
  text-align: center;
  color: #4a544c;
}
.poe-vs-fit__note a{
  color: #007A33;
  font-weight: 600;
  text-decoration: none;
}
.poe-vs-fit__note a:hover{
  text-decoration: underline;
}

@media (max-width: 900px){
  .poe-vs-duo{
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .poe-vs-duo__card{
    width: 100%;
  }
  .poe-vs-duo__vs{
    width: 42px;
    height: 42px;
    margin: 2px 0;
  }
  .poe-vs__legend{
    display: none;
  }
  .poe-vs__row{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .poe-vs__pair{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .poe-vs__vs{
    display: none;
  }
  .poe-vs__col::before{
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6b7a70;
  }
  .poe-vs__col--poe::before{
    color: #007A33;
  }
  .poe-vs-fit{
    grid-template-columns: 1fr;
  }
}

/* Who We Are */
.page-who .home-media .media-photo{
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 72% center;
}
.page-who .card__media{
  display: block;
  width: calc(100% + 56px);
  max-width: none;
  height: auto;
  margin: -30px -28px 18px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #0f1412;
}
.who-consortium{
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 18px 22px;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 16px 36px rgba(8, 40, 20, 0.14);
}
.who-consortium img{
  display: block;
  width: min(280px, 100%);
  height: auto;
}
.who-badge{
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: 0 0 18px;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e6efe3;
  box-shadow: 0 8px 18px rgba(8, 40, 20, 0.06);
}
.who-badge img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.who-badge--icon{
  background:
    radial-gradient(circle at 50% 42%, rgba(111, 206, 87, 0.16), transparent 62%),
    #fff;
}
.who-badge--icon img{
  width: 58%;
  height: 58%;
}
.who-badge--iowa{
  width: 118px;
  height: 92px;
  border-radius: 18px;
  padding: 8px;
}
.who-badge--iowa img{
  object-fit: contain;
  object-position: center;
}