/* ===== 01. Design tokens and resets ===== */
:root{--je-forest:#2B382E;--je-green:#4a8836;--je-lime:#6ca42f;--je-sprout:#c5daac;--je-ink:#202820;--je-muted:#667067;--je-paper:#f7f8f4;--je-white:#fff;--je-radius:1.35rem;--je-shadow:0 18px 50px rgba(43,56,46,.10)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;color:var(--je-ink);background:#fff;line-height:1.65}
a{color:var(--je-green);text-decoration:none}
a:hover{color:var(--je-forest)}
.container{max-width:1180px}

/* ===== 02. Navigation and header ===== */
.navbar{padding:1.05rem 0;background:rgba(255,255,255,.96);border-bottom:1px solid rgba(43,56,46,.08)}
.brand-wordmark{font-size:1.32rem;font-weight:800;letter-spacing:-.055em;color:var(--je-forest);white-space:nowrap}
.brand-wordmark span{color:var(--je-green)}
.brand-note{display:block;font-size:.54rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--je-muted);line-height:1.3}
.navbar .nav-link{font-size:.9rem;font-weight:600;color:#435045;padding:.6rem .72rem!important}
.navbar .nav-link:hover,.navbar .nav-link.active{color:var(--je-green)}
.lang-switch{border:1px solid #dce4d7;border-radius:999px;padding:.45rem .7rem;background:#fff;font-size:.82rem;font-weight:700;color:var(--je-forest)}

/* ===== 03. Buttons and links ===== */
.btn-je{background:var(--je-green);border:1px solid var(--je-green);color:#fff;border-radius:999px;padding:.9rem 1.35rem;font-weight:700;box-shadow:0 8px 20px rgba(74,136,54,.18);transition:.2s}
.btn-je:hover{background:var(--je-forest);border-color:var(--je-forest);color:#fff;transform:translateY(-1px)}
.btn-outline-je{border:1px solid rgba(43,56,46,.3);color:var(--je-forest);border-radius:999px;padding:.85rem 1.25rem;font-weight:700}
.btn-outline-je:hover{background:var(--je-forest);color:#fff}

/* ===== 04. Legacy hero and reusable content ===== */
.hero{position:relative;overflow:hidden;background:var(--je-forest);color:#fff;padding:6.5rem 0 5.5rem;isolation:isolate}
.hero:before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;right:-100px;top:-190px;background:radial-gradient(circle,rgba(108,164,47,.42),rgba(108,164,47,0) 68%);z-index:-1}
.hero:after{content:"";position:absolute;width:380px;height:380px;border:1px solid rgba(197,218,172,.22);border-radius:50%;right:9%;bottom:-260px;box-shadow:0 0 0 40px rgba(197,218,172,.035),0 0 0 80px rgba(197,218,172,.025);z-index:-1}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;text-transform:uppercase;letter-spacing:.13em;font-size:.73rem;font-weight:800;color:var(--je-lime);margin-bottom:1.1rem}
.eyebrow:before{content:"";width:25px;height:2px;background:currentColor}
.hero .eyebrow{color:var(--je-sprout)}
.hero h1{font-size:clamp(2.6rem,5.5vw,5rem);line-height:1.04;letter-spacing:-.065em;font-weight:800;max-width:800px;margin-bottom:1.45rem}
.hero p{font-size:clamp(1rem,1.4vw,1.18rem);color:rgba(255,255,255,.76);max-width:600px;margin-bottom:2rem}
.hero-art{min-height:330px;position:relative;display:flex;align-items:center;justify-content:center}
.sun-disc{width:min(25vw,290px);min-width:190px;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#d8e9bf,#7eae55 65%,#4a8836);box-shadow:0 25px 80px rgba(108,164,47,.25);position:relative}
.sun-disc:before{content:"";position:absolute;inset:13%;border:1px solid rgba(255,255,255,.42);border-radius:50%}
.sun-disc:after{content:"";position:absolute;width:125%;height:1px;background:rgba(255,255,255,.35);top:50%;left:-12.5%;transform:rotate(-28deg);box-shadow:0 35px 0 rgba(255,255,255,.18),0 -35px 0 rgba(255,255,255,.18)}
.art-card{position:absolute;right:0;bottom:3%;padding:1rem 1.2rem;background:rgba(255,255,255,.96);color:var(--je-forest);border-radius:1rem;box-shadow:var(--je-shadow);font-weight:700;max-width:220px}
.art-card small{display:block;color:var(--je-muted);font-weight:500;font-size:.78rem}

/* ===== 05. Sections and cards ===== */
.section{padding:5.5rem 0}
.section-soft{background:var(--je-paper)}
.section-dark{background:var(--je-forest);color:#fff}
.section-heading{max-width:720px;margin-bottom:2.6rem}
.section-heading h2,.page-intro h1{font-weight:800;letter-spacing:-.055em;line-height:1.12;font-size:clamp(2rem,4vw,3.25rem)}
.section-heading p{color:var(--je-muted);font-size:1.05rem;max-width:620px;margin-top:1rem}
.section-dark .section-heading p{color:rgba(255,255,255,.7)}
.feature-card{height:100%;padding:1.6rem;border:1px solid #e7ece3;border-radius:var(--je-radius);background:#fff;transition:transform .2s,box-shadow .2s}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--je-shadow)}
.feature-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:#edf4e6;color:var(--je-green);font-size:1.25rem;font-weight:800;margin-bottom:1.2rem}
.feature-card h3{font-size:1.12rem;font-weight:800;letter-spacing:-.025em}
.feature-card p{color:var(--je-muted);font-size:.94rem;margin-bottom:0}
.audience-panel{height:100%;min-height:290px;border-radius:var(--je-radius);padding:2rem;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;position:relative;background:linear-gradient(145deg,#dce9d0,#f4f7ef)}
.audience-panel.dark{background:linear-gradient(145deg,#35483a,#202d23);color:#fff}
.audience-panel h3{font-size:1.7rem;font-weight:800;letter-spacing:-.04em}
.audience-panel p{max-width:430px;color:var(--je-muted)}
.audience-panel.dark p{color:rgba(255,255,255,.72)}
.audience-panel .panel-number{position:absolute;right:1.5rem;top:1rem;font-size:4.5rem;font-weight:800;letter-spacing:-.08em;opacity:.12}
.text-link{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;color:var(--je-green);margin-top:1.2rem}
.text-link:after{content:"↗";font-size:1.1rem}
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem}
.stat{padding:1.3rem;border-top:1px solid rgba(255,255,255,.22)}
.stat strong{display:block;font-size:1.05rem;margin-bottom:.25rem}
.stat span{font-size:.87rem;color:rgba(255,255,255,.65)}

/* ===== 06. Inner pages and contact forms ===== */
.page-intro{padding:5rem 0 3.5rem;background:var(--je-paper)}
.page-intro p{max-width:720px;color:var(--je-muted);font-size:1.08rem;margin-top:1.2rem}
.breadcrumbs{font-size:.82rem;color:var(--je-muted);margin-bottom:1.5rem}
.breadcrumbs a{color:var(--je-green)}
.content-copy{max-width:850px}
.content-copy h2{font-weight:800;letter-spacing:-.04em;margin:2rem 0 .9rem}
.content-copy p,.content-copy li{color:#566057}
.cta-band{background:var(--je-sprout);border-radius:var(--je-radius);padding:clamp(1.7rem,4vw,3.2rem);display:flex;align-items:center;justify-content:space-between;gap:2rem}
.cta-band h2{font-size:clamp(1.7rem,3vw,2.6rem);font-weight:800;letter-spacing:-.05em;margin:0;max-width:650px}
.form-card{padding:clamp(1.4rem,4vw,2.4rem);border:1px solid #e3e9df;border-radius:var(--je-radius);box-shadow:var(--je-shadow);background:#fff}
.form-control,.form-select{border-color:#dce4d7;border-radius:.8rem;padding:.8rem 1rem}
.form-control:focus,.form-select:focus{border-color:var(--je-green);box-shadow:0 0 0 .2rem rgba(74,136,54,.12)}

/* ===== 07. Footer ===== */
footer{background:#202b22;color:#fff;padding:3.5rem 0 1.4rem}
footer .brand-wordmark{color:#fff}
footer p,footer .footer-link{color:rgba(255,255,255,.68);font-size:.9rem}
footer .footer-link{display:block;margin:.45rem 0}
footer .footer-link:hover{color:var(--je-sprout)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.13);margin-top:2.5rem;padding-top:1.2rem;font-size:.78rem;color:rgba(255,255,255,.48)}
.notice{padding:1rem 1.2rem;border-radius:.8rem;background:#f0f5ea;color:var(--je-forest);font-size:.9rem}

/* ===== 08. Responsive layouts ===== */
@media(max-width:991.98px){.hero{padding:4.5rem 0}.hero-art{min-height:270px;margin-top:1.5rem}.navbar-collapse{padding-top:1rem}.navbar-nav{gap:.1rem}.cta-band{align-items:flex-start;flex-direction:column}.section{padding:4rem 0}}
@media(max-width:575.98px){.hero{padding:3.5rem 0}.hero h1{font-size:2.65rem}.hero-art{min-height:235px}.sun-disc{min-width:175px}.art-card{right:0;bottom:0;max-width:175px;font-size:.85rem}.section{padding:3.5rem 0}.stat-strip{grid-template-columns:1fr}.page-intro{padding:3.5rem 0 2.5rem}.feature-card{padding:1.3rem}}


/* ===== 09. Official logo assets ===== */
.brand-logo{display:block;height:62px;width:auto;max-width:125px;object-fit:contain}
.footer-logo{display:block;height:110px;width:auto;max-width:155px;object-fit:contain;border-radius:6px}
@media(max-width:575.98px){.brand-logo{height:52px}}


/* ================================================================
   10. Reference-inspired homepage: green editorial opening
   The screenshot is a visual reference, not an image used as UI.
   ================================================================ */
body[data-page="home"] { background: #f7f8f4; }
body[data-page="home"] .navbar {
  background: #4a8836;
  border: 0;
  padding: .55rem 0;
}
body[data-page="home"] .navbar .nav-link,
body[data-page="home"] .navbar .nav-link.active { color: #fff; font-size: .76rem; font-weight: 500; letter-spacing: .015em; text-transform: uppercase; }
body[data-page="home"] .navbar .nav-link.active { border: 1px solid rgba(255,255,255,.75); border-radius: 50px; }
body[data-page="home"] .navbar .nav-link:hover { color: #e2f4d0; }
body[data-page="home"] .lang-switch { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
body[data-page="home"] .brand-logo { filter: brightness(0) invert(1); }
body[data-page="home"] .navbar-toggler { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.9); }
body[data-page="home"] #site-header { position: relative; z-index: 20; }
.reference-hero { color: #fff; background: #4a8836; overflow: hidden; }
.reference-hero__top {
  position: relative;
  padding: clamp(2.8rem, 5.8vw, 6.8rem) 0 clamp(2.4rem, 4vw, 4rem);
  background: radial-gradient(ellipse at 70% 25%, rgba(197,218,172,.17), transparent 55%), #4a8836;
}
.reference-hero__top:before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .11;
  background: repeating-linear-gradient(110deg, transparent 0 45px, rgba(255,255,255,.16) 46px, transparent 47px 95px);
}
.reference-hero__headline {
  position: relative; margin: 0 auto; text-align: center;
  font-size: clamp(2.15rem, 5.6vw, 6.1rem); line-height: 1.02;
  font-weight: 600; letter-spacing: -.075em; text-transform: uppercase;
  white-space: nowrap;
}
.reference-hero__subline {
  max-width: 700px; margin: 1.5rem auto 0; text-align: center;
  font-size: clamp(.72rem, 1vw, .9rem); line-height: 1.5;
  font-weight: 400; letter-spacing: -.02em; opacity: .84;
}
.reference-hero__photo { height: clamp(420px, 55vw, 690px); position: relative; overflow: hidden; isolation: isolate; }
.reference-hero__photo-image, .photo-break__image {
  position: absolute; inset: -90px 0; z-index: -2;
  background-image: linear-gradient(0deg, rgba(15,29,17,.45), transparent 55%), url("assets/solar-farm.jpg");
  background-size: cover; background-position: center;
  transform: translateY(var(--parallax-offset, 0px)) scale(1.08);
  will-change: transform;
}
.reference-hero__bolt {
  position: absolute; z-index: -1; left: 8%; top: -21%;
  color: #6ca42f; font-size: clamp(26rem, 57vw, 58rem);
  line-height: 1; font-family: Georgia, serif; font-weight: bold;
  transform: rotate(4deg); text-shadow: 0 0 2px rgba(0,0,0,.08);
  pointer-events: none;
}
.reference-hero__photo-action { position: absolute; bottom: 9%; left: 50%; transform: translateX(-50%); }
.outline-pill {
  display: inline-flex; align-items: center; justify-content: center; padding: .9rem 2.3rem;
  border: 1px solid rgba(255,255,255,.92); border-radius: 999px; color: #fff;
  font-size: .78rem; font-weight: 600; letter-spacing: .035em; white-space: nowrap;
  transition: background .25s, color .25s, transform .25s;
}
.outline-pill:hover { background: #fff; color: #2b382e; transform: translateY(-2px); }
.reference-hero__bottom { background: #4a8836; padding: 1.25rem 0; font-size: .7rem; letter-spacing: .15em; }
.reference-hero__bottom .container { display: flex; justify-content: space-between; }
.section-index { display: block; margin-bottom: 2rem; text-transform: uppercase; font-size: .8rem; letter-spacing: .13em; }
.statement-section { background: #eaf0e4; padding: clamp(5rem, 11vw, 10rem) 0; }
.statement-section h2 { font-size: clamp(2.7rem, 6.8vw, 7rem); font-weight: 600; letter-spacing: -.07em; line-height: 1.04; max-width: 1000px; }
.statement-section p { max-width: 600px; font-size: 1.13rem; margin: 2rem 0; }
.outline-pill--dark { color: #2b382e; border-color: #2b382e; }
.outline-pill--dark:hover { background: #2b382e; color: #fff; }
.photo-break { position: relative; isolation: isolate; overflow: hidden; min-height: 560px; display: flex; align-items: end; color: #fff; padding: 6rem 0; }
.photo-break__image { background-image: linear-gradient(0deg, rgba(12,29,14,.8), transparent 75%), url("assets/solar-farm.jpg"); }
.photo-break h2 { max-width: 800px; font-size: clamp(2.6rem, 5vw, 5.5rem); letter-spacing: -.065em; }
.editorial-grid { background: #f7f8f4; }
.editorial-tile { display: flex; flex-direction: column; position: relative; min-height: 420px; padding: clamp(2rem,4vw,4rem); background: #2b382e; color: #fff; }
.editorial-tile--light { background: #c5daac; color: #2b382e; }
.editorial-tile h3 { font-size: clamp(2rem,3vw,3.4rem); margin-top: auto; letter-spacing: -.05em; }
.editorial-tile p { max-width: 420px; }
.editorial-tile b { position: absolute; right: 2rem; top: 2rem; font-size: 2rem; font-weight: 400; }
.editorial-tile:hover { color: inherit; transform: translateY(-3px); }
.editorial-tile:not(.editorial-tile--light):hover { color: #fff; }
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ================================================================
   11. Responsive adaptations for tablet and mobile
   ================================================================ */
@media (max-width: 991.98px) {
  body[data-page="home"] .navbar-collapse { background: #4a8836; }
  .reference-hero__headline { white-space: normal; font-size: clamp(2.3rem, 7.5vw, 4.8rem); }
  .reference-hero__bolt { left: -5%; top: 0; }
}
@media (max-width: 575.98px) {
  .reference-hero__top { padding: 3.5rem 0; }
  .reference-hero__headline { font-size: clamp(2.1rem, 10vw, 3.6rem); }
  .reference-hero__subline { margin-top: 1.2rem; }
  .reference-hero__photo { height: 470px; }
  .reference-hero__bolt { left: -18%; top: 5%; font-size: 30rem; }
  .photo-break { min-height: 430px; }
  .editorial-tile { min-height: 330px; }
}

/* ================================================================
   12. Accessibility: users who disable animations
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .reference-hero__photo-image, .photo-break__image { transform: none; }
}


/* 13. Geometric lightning emblem inspired by the brand-book mockup */
.reference-hero__bolt {
  width: clamp(250px, 38vw, 530px);
  height: 120%;
  top: -7%;
  left: 9%;
  font-size: 0;
  background: linear-gradient(145deg, #77b72e, #4b8c25);
  clip-path: polygon(54% 0, 93% 0, 59% 42%, 85% 42%, 22% 100%, 38% 58%, 7% 58%);
  transform: rotate(4deg);
  opacity: .98;
}
@media (max-width: 575.98px) {
  .reference-hero__bolt { width: 280px; height: 105%; left: -12%; top: 0; }
}


/* ================================================================
   14. Navigation breakpoint: medium screens and up (>= 768px)
   ================================================================ */
@media (min-width: 768px) {
  .navbar-expand-md .navbar-nav { flex-direction: row; }
  .navbar-expand-md .navbar-collapse { display: flex !important; flex-basis: auto; }
  .navbar-expand-md .navbar-toggler { display: none; }
  .navbar-expand-md .nav-link { padding-left: .48rem; padding-right: .48rem; }
  .navbar-expand-md .navbar-brand { margin-right: .8rem; }
  .navbar-expand-md .nav-link { font-size: .77rem; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .navbar-expand-md .container { max-width: 100%; padding-left: 1.25rem; padding-right: 1.25rem; }
  .navbar-expand-md .brand-logo { max-width: 100px; height: 50px; }
  .navbar-expand-md .nav-link { font-size: .68rem; padding-left: .3rem; padding-right: .3rem; }
  .navbar-expand-md .lang-switch { font-size: .7rem; padding: .4rem .5rem; }
}
@media (max-width: 767.98px) {
  .navbar-expand-md .navbar-collapse { padding: 1rem 0; }
  .navbar-expand-md .nav-link { padding: .7rem .5rem; }
}

/* ================================================================
   15. Two service sections and the partnership page
   ================================================================ */
.service-audience { padding: clamp(5rem, 9vw, 9rem) 0; scroll-margin-top: 80px; background: #f7f8f4; }
.service-audience--soft { background: #eaf0e4; }
.service-audience h2 { font-size: clamp(2.8rem, 5vw, 5.6rem); line-height: 1.05; letter-spacing: -.06em; }
.service-audience p { max-width: 640px; font-size: 1.12rem; line-height: 1.7; margin: 1.8rem 0 2.3rem; }
.service-audience__art { min-height: 360px; display: flex; align-items: flex-end; padding: 2rem; background: #2b382e; color: #c5daac; }
.service-audience__art--home { background: #6ca42f; color: #fff; }
.service-audience__art span { font-size: clamp(7rem, 15vw, 14rem); font-weight: 700; line-height: .8; letter-spacing: -.1em; }
@media (max-width: 767.98px) { .service-audience__art { min-height: 240px; } }

/* ================================================================
   14. Homepage-only, one-screen brandbook composition (v4)
   Overrides the previous multi-section homepage styling.
   ================================================================ */
body[data-page="home"] { min-height: 100dvh; background: #4a8836; }
body[data-page="home"] #site-footer { display: none; }
body[data-page="home"] #site-header { background: #4a8836; }
body[data-page="home"] .navbar { position: relative; }
body[data-page="home"] .navbar .container { max-width: 1240px; }
body[data-page="home"] .navbar-nav { margin-left: 2rem !important; margin-right: auto !important; }
body[data-page="home"] .nav-link { font-size: .73rem; padding: .38rem .75rem !important; }
body[data-page="home"] .brand-logo { max-width: 90px; height: 58px; }
body[data-page="home"] .reference-hero {
  min-height: calc(100dvh - 80px); display: grid;
  grid-template-rows: minmax(145px, .34fr) minmax(320px, 1fr) 65px;
}
body[data-page="home"] .reference-hero__top { padding: clamp(1.1rem, 3vh, 2.7rem) 0 1.3rem; display: grid; align-items: center; }
body[data-page="home"] .reference-hero__headline { font-size: clamp(2.25rem, 5.1vw, 5.5rem); letter-spacing: -.067em; }
body[data-page="home"] .reference-hero__subline { max-width: 640px; margin-top: .7rem; font-size: clamp(.67rem, .9vw, .85rem); }
body[data-page="home"] .reference-hero__photo { height: auto; min-height: 320px; }
body[data-page="home"] .reference-hero__photo-image { inset: 0; transform: none; background-position: center 45%; background-size: cover; }
body[data-page="home"] .reference-hero__bolt-image {
  position: absolute; height: 135%; width: auto; max-width: none; top: -9%; left: 11%;
  pointer-events: none; filter: drop-shadow(0 8px 7px rgba(0,0,0,.08));
}
body[data-page="home"] .reference-hero__photo-action { bottom: 9%; }
body[data-page="home"] .reference-hero__bottom { padding: 0; display: flex; align-items: center; }
body[data-page="home"] .reference-hero__bottom-content { display: flex; justify-content: space-between; align-items: center; }
body[data-page="home"] .reference-hero__bottom-brand { font-size: .7rem; opacity: .7; }
.reference-hero__socials { display: flex; align-items: center; gap: .5rem; }
.reference-hero__social { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; color: #fff; }
.reference-hero__social svg { width: 15px; height: 15px; }
/* Social icons intentionally are not clickable until real account links are supplied. */
@media (max-width: 767.98px) {
  body[data-page="home"] .navbar-nav { margin-left: 0 !important; }
  body[data-page="home"] .reference-hero { grid-template-rows: auto minmax(390px, 1fr) 58px; }
  body[data-page="home"] .reference-hero__top { padding: 2rem 0; }
  body[data-page="home"] .reference-hero__headline { white-space: normal; font-size: clamp(2.3rem, 8vw, 4rem); }
  body[data-page="home"] .reference-hero__bolt-image { left: -5%; height: 118%; top: -4%; }
}
@media (max-width: 440px) {
  body[data-page="home"] .reference-hero__bolt-image { left: -23%; height: 108%; }
  body[data-page="home"] .reference-hero__photo-action { left: 58%; }
}

/* ================================================================
   15. Homepage adjustments — no lightning or footer wordmark
   Texture is intentionally not selected yet. Keep original green
   until one of the leaf options has been approved.
   ================================================================ */
body[data-page="home"] .reference-hero__bottom-content {
  justify-content: flex-end;
}
body[data-page="home"] .reference-hero__bolt,
body[data-page="home"] .reference-hero__bolt-image,
body[data-page="home"] .reference-hero__bottom-brand {
  display: none !important;
}

/* ================================================================
   16. APPROVED LEAF DESIGN — homepage desktop composition
   Source: approved JustEnergy reference. Leaf texture is a real
   local image asset, not a CSS-only green gradient.
   ================================================================ */
:root {
  --je-leaf-green: #388d08;
  --je-leaf-texture: url("assets/leaf-single.jpg");
}
body[data-page="home"] {
  margin: 0;
  background: var(--je-leaf-green);
}
body[data-page="home"] #site-header,
body[data-page="home"] .navbar,
body[data-page="home"] .reference-hero__top,
body[data-page="home"] .reference-hero__bottom {
  background-color: var(--je-leaf-green);
  background-image: linear-gradient(rgba(32,110,0,.13),rgba(32,110,0,.13)), var(--je-leaf-texture);
  background-repeat: repeat;
  background-size: auto, 700px 298px;
}
body[data-page="home"] .reference-hero__top::before { display: none; }
body[data-page="home"] #site-header { position: relative; z-index: 15; }
body[data-page="home"] .navbar {
  min-height: 125px;
  padding: 14px 0 6px;
}
body[data-page="home"] .navbar .container {
  max-width: 1540px;
  padding-left: clamp(20px, 5vw, 90px);
  padding-right: clamp(20px, 5vw, 90px);
}
body[data-page="home"] .brand-logo {
  width: 110px; max-width: none; height: 95px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
body[data-page="home"] .navbar-nav {
  margin-left: 2rem !important; margin-right: auto !important;
  gap: clamp(.1rem, 1vw, 1.3rem);
}
body[data-page="home"] .nav-link {
  color: white !important;
  font-size: clamp(.68rem, .92vw, .96rem);
  font-weight: 500;
  padding: .65rem 1.1rem !important;
  text-transform: uppercase;
}
body[data-page="home"] .nav-link.active {
  border: 1px solid white;
  border-radius: 40px;
}
body[data-page="home"] .lang-switch {
  border: 1px solid rgba(255,255,255,.6);
  color: white;
  background: rgba(0,0,0,.04);
}
body[data-page="home"] .reference-hero {
  height: calc(100dvh - 125px);
  min-height: 580px;
  grid-template-rows: minmax(185px, .37fr) minmax(300px, 1fr) 95px;
}
body[data-page="home"] .reference-hero__top {
  padding: 0 1rem 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body[data-page="home"] .reference-hero__top .container { max-width: 1600px; }
body[data-page="home"] .reference-hero__headline {
  font-size: clamp(2.25rem, 5.5vw, 6.4rem);
  line-height: 1.02;
  letter-spacing: -.065em;
  font-weight: 600;
  white-space: nowrap;
}
body[data-page="home"] .reference-hero__subline {
  margin: 18px auto 0;
  max-width: 960px;
  font-size: clamp(.72rem, 1.18vw, 1.18rem);
  letter-spacing: .02em;
  line-height: 1.45;
}
body[data-page="home"] .reference-hero__photo { min-height: 300px; }
body[data-page="home"] .reference-hero__photo-image {
  inset: 0;
  background-image: url("assets/hero-reference-photo.jpg");
  background-position: center;
  background-size: 100% 100%;
  transform: none;
}
body[data-page="home"] .reference-hero__photo-action {
  bottom: 10.5%;
  left: 50%;
  transform: translateX(-50%);
}
body[data-page="home"] .reference-hero__cta {
  width: clamp(260px, 25vw, 420px);
  min-height: 55px;
  border-color: transparent;
  background: transparent;
  color: transparent;
}
body[data-page="home"] .reference-hero__cta span { opacity: 0; }
body[data-page="home"] .reference-hero__cta:hover,
body[data-page="home"] .reference-hero__cta:focus-visible {
  border-color: #fff;
  color: #fff;
  background: rgba(0,0,0,.15);
}
body[data-page="home"] .reference-hero__cta:hover span,
body[data-page="home"] .reference-hero__cta:focus-visible span { opacity: 1; }
body[data-page="home"] .reference-hero__bottom {
  padding: 0;
  display: flex;
  align-items: center;
}
body[data-page="home"] .reference-hero__bottom-content { justify-content: flex-end; }
body[data-page="home"] .reference-hero__socials { gap: 10px; }
body[data-page="home"] .reference-hero__social {
  width: 48px; height: 48px;
  border: 2px solid #fff;
  border-radius: 50%;
}
body[data-page="home"] .reference-hero__social svg { width: 26px; height: 26px; }

/* ================================================================
   17. Approved design on medium displays (768px and above)
   Main navigation stays visible; no hamburger until below md.
   ================================================================ */
@media (min-width: 768px) and (max-width: 1100px) {
  body[data-page="home"] .navbar { min-height: 94px; }
  body[data-page="home"] .brand-logo { width: 75px; height: 74px; }
  body[data-page="home"] .nav-link { font-size: .67rem; padding: .5rem .55rem !important; }
  body[data-page="home"] .navbar-nav { gap: 0; margin-left: .8rem !important; }
  body[data-page="home"] .reference-hero { height: calc(100dvh - 94px); grid-template-rows: minmax(175px,.35fr) minmax(300px,1fr) 75px; }
  body[data-page="home"] .reference-hero__headline { font-size: clamp(2.25rem,5vw,4rem); white-space: normal; }
  body[data-page="home"] .reference-hero__social { width: 38px; height: 38px; }
  body[data-page="home"] .reference-hero__social svg { width: 21px; height: 21px; }
}

/* ================================================================
   18. Mobile: retain approved styling while ensuring readability.
   Real HTML CTA is shown over a separate clean brand-book photo.
   ================================================================ */
@media (max-width: 767.98px) {
  body[data-page="home"] .navbar { min-height: 78px; padding: 6px 0; }
  body[data-page="home"] .brand-logo { width: 70px; height: 65px; }
  body[data-page="home"] .navbar-nav { margin-left: 0 !important; }
  body[data-page="home"] .navbar-collapse {
    background: var(--je-leaf-green);
    background-image: var(--je-leaf-texture);
    background-size: 700px 298px;
    border-radius: 10px;
    padding: 10px;
  }
  body[data-page="home"] .reference-hero {
    height: auto; min-height: calc(100dvh - 78px);
    grid-template-rows: auto minmax(420px, 1fr) 76px;
  }
  body[data-page="home"] .reference-hero__top { padding: 34px 8px; }
  body[data-page="home"] .reference-hero__headline {
    font-size: clamp(2rem, 8.8vw, 4rem);
    line-height: 1.08;
    white-space: normal;
  }
  body[data-page="home"] .reference-hero__subline {
    font-size: .72rem;
    max-width: 500px;
    margin-top: 16px;
  }
  body[data-page="home"] .reference-hero__photo-image {
    background-image: linear-gradient(0deg,rgba(0,0,0,.35),transparent 55%),url("assets/solar-farm.jpg");
    background-size: cover;
    background-position: 63% center;
  }
  body[data-page="home"] .reference-hero__photo-action { left: 50%; bottom: 9%; }
  body[data-page="home"] .reference-hero__cta {
    color: white;
    border: 1px solid white;
    background: rgba(0,0,0,.15);
    min-height: 48px;
    width: 240px;
  }
  body[data-page="home"] .reference-hero__cta span { opacity: 1; }
  body[data-page="home"] .reference-hero__social { width: 38px; height: 38px; }
  body[data-page="home"] .reference-hero__social svg { width: 21px; height: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .reference-hero__photo-image { transform: none; }
}

/* ================================================================
   19. FIX: one continuous leaf background for navigation + hero.
   Background belongs to body, so header, menu and hero top are
   transparent and never restart the texture at section boundaries.
   ================================================================ */
body[data-page="home"] {
  background-color: #388d08;
  background-image: linear-gradient(rgba(32,110,0,.13), rgba(32,110,0,.13)), url("assets/leaf-single.jpg");
  background-size: auto, 700px 298px;
  background-repeat: repeat;
}
body[data-page="home"] #site-header,
body[data-page="home"] .navbar,
body[data-page="home"] .reference-hero,
body[data-page="home"] .reference-hero__top,
body[data-page="home"] .reference-hero__bottom,
body[data-page="home"] .navbar-collapse {
  background: transparent !important;
}
body[data-page="home"] .reference-hero__top::before {
  display: none !important;
}
/* On small screens the expanded menu uses the same underlying leaf
   texture as the rest of the page, without a solid green rectangle. */
@media (max-width: 767.98px) {
  body[data-page="home"] .navbar-collapse {
    background: transparent !important;
  }
}

/* ================================================================
   20. FIX: one real HTML CTA, no pre-rendered button in photo.
   The clean solar photo has no baked-in text or button.
   ================================================================ */
body[data-page="home"] .reference-hero__photo-image {
  background-image: linear-gradient(0deg, rgba(0,0,0,.16), transparent 55%), url("assets/solar-farm.jpg");
  background-position: center 46%;
  background-size: cover;
}
body[data-page="home"] .reference-hero__cta,
body[data-page="home"] .reference-hero__cta:hover,
body[data-page="home"] .reference-hero__cta:focus-visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(250px, 25vw, 420px);
  min-height: 55px;
  border: 1px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: rgba(0,0,0,.13);
  transform: none;
  transition: background-color .25s ease, color .25s ease;
}
body[data-page="home"] .reference-hero__cta span,
body[data-page="home"] .reference-hero__cta:hover span,
body[data-page="home"] .reference-hero__cta:focus-visible span {
  opacity: 1;
}
body[data-page="home"] .reference-hero__cta:hover,
body[data-page="home"] .reference-hero__cta:focus-visible {
  background: rgba(255,255,255,.95);
  color: #2b382e;
}
@media (max-width: 767.98px) {
  body[data-page="home"] .reference-hero__cta { width: 240px; min-height: 48px; }
}

/* ===================================================================
   21. SHARED BRAND SYSTEM — all interior pages
   Same typography, logo, leaf background and green palette as homepage.
   =================================================================== */
body:not([data-page="home"]) {
  background: #2b382e;
  color: #fff;
}
body:not([data-page="home"]) #site-header,
body:not([data-page="home"]) .navbar {
  background: transparent !important;
}
body:not([data-page="home"]) #site-header {
  background-color: #418b25 !important;
  background-image: linear-gradient(rgba(30,96,0,.16),rgba(30,96,0,.16)),url("assets/leaf-single.jpg") !important;
  background-size: auto,700px 298px !important;
}
body:not([data-page="home"]) .navbar {
  padding: .65rem 0;
}
body:not([data-page="home"]) .navbar .nav-link,
body:not([data-page="home"]) .navbar .nav-link.active {
  color: #fff !important;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .035em;
}
body:not([data-page="home"]) .navbar .nav-link.active {
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 50px;
}
body:not([data-page="home"]) .navbar .lang-switch {
  color: #fff;
  border-color: rgba(255,255,255,.65);
  background: transparent;
}
body .brand-logo {
  display: block;
  width: 105px !important;
  height: 86px !important;
  max-width: none !important;
  object-fit: contain;
  filter: none !important;
}
body .footer-logo { width: 120px; height: auto; filter: none; }
body:not([data-page="home"]) .page-intro {
  background-color: #418b25;
  background-image: linear-gradient(rgba(30,96,0,.13),rgba(30,96,0,.13)),url("assets/leaf-single.jpg");
  background-size: auto,700px 298px;
  color: #fff;
  padding: clamp(5rem,9vw,9rem) 0;
}
body:not([data-page="home"]) .page-intro h1 {
  color: #fff;
  font-size: clamp(3rem,6vw,6rem);
  font-weight: 300;
  letter-spacing: -.055em;
  line-height: 1.02;
}
body:not([data-page="home"]) .page-intro p { color: rgba(255,255,255,.92); }
body:not([data-page="home"]) .page-intro .breadcrumbs,
body:not([data-page="home"]) .page-intro .breadcrumbs a { color: rgba(255,255,255,.82); }
body:not([data-page="home"]) .service-audience {
  background: #2b382e;
  color: #fff;
  padding: clamp(5rem,9vw,9rem) 0;
}
body:not([data-page="home"]) .service-audience--soft { background: #3d772c; }
body:not([data-page="home"]) .service-audience h2 {
  font-size: clamp(2.8rem,5.8vw,6rem);
  font-weight: 300;
  letter-spacing: -.055em;
}
body:not([data-page="home"]) .service-audience p { color: rgba(255,255,255,.85); }
body:not([data-page="home"]) .service-audience .outline-pill--dark {
  color: #fff;
  border-color: #fff;
}
body:not([data-page="home"]) .service-audience .outline-pill--dark:hover {
  background: #fff;
  color: #2b382e;
}
body:not([data-page="home"]) .service-audience__art {
  background-image: linear-gradient(0deg,rgba(23,50,26,.18),rgba(23,50,26,.18)),url("assets/about-farm.jpg");
  background-size: cover;
  background-position: center;
}
body:not([data-page="home"]) .service-audience__art--home {
  background-image: linear-gradient(0deg,rgba(23,50,26,.12),rgba(23,50,26,.12)),url("assets/solar-farm.jpg");
}
body:not([data-page="home"]) .service-audience__art span { display: none; }
body:not([data-page="home"]) .cta-band { background: #4a8836; color: #fff; }
body:not([data-page="home"]) .section { background: #2b382e; color: #fff; }
body:not([data-page="home"]) .form-card { background: #f8faf5; color: #2b382e; }
body:not([data-page="home"]) .form-card h2 { color: #2b382e; }
body:not([data-page="home"]) footer { background: #1e2b22; }

/* ===================================================================
   22. ABOUT / SECTION 1 — two equal columns from the supplied mockup
   Left: brand green, large light typography, translucent logo.
   Right: industrial solar-farm photograph and white official logo.
   =================================================================== */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: min(770px,calc(100svh - 108px));
  overflow: hidden;
}
.about-intro__copy {
  position: relative;
  isolation: isolate;
  background: #4a8836;
  padding: clamp(3rem,6vw,7rem) clamp(2rem,6vw,7rem);
  overflow: hidden;
}
.about-intro__content {
  position: relative;
  z-index: 2;
  max-width: 750px;
  margin: 0 auto;
}
.about-intro__content h1 {
  font-weight: 300;
  font-size: clamp(3.3rem,5.2vw,6.5rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  display: flex;
  gap: .35em;
  margin: 0 0 2rem;
  color: #fff;
}
.about-intro__content h1 span { font-weight: 300; flex: none; }
.about-intro__content h2 {
  font-size: clamp(1.25rem,2.3vw,2.5rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: clamp(2rem,4vw,4rem);
}
.about-intro__content p {
  max-width: 650px;
  margin-bottom: clamp(1.5rem,2.6vw,3rem);
  font-size: clamp(.9rem,1.5vw,1.45rem);
  line-height: 1.58;
  font-weight: 300;
  color: #fff;
}
.about-intro__watermark {
  position: absolute;
  width: min(72%,650px);
  right: -7%;
  top: 16%;
  opacity: .12;
  z-index: 1;
  filter: grayscale(1) brightness(2);
  pointer-events: none;
}
.about-intro__image {
  background: url("assets/about-farm.jpg") center / cover no-repeat;
  position: relative;
}
.about-intro__corner-logo {
  position: absolute;
  top: 3rem;
  right: 3rem;
  width: clamp(80px,7vw,125px);
  height: auto;
  filter: brightness(0) invert(1);
}

/* ===================================================================
   23. ABOUT / SECTION 2 — dark benefits panel and brand watermark
   =================================================================== */
.about-benefits {
  background: #2b382e;
  position: relative;
  isolation: isolate;
  min-height: 800px;
  overflow: hidden;
  padding: clamp(3rem,5vw,6rem) clamp(1.5rem,6vw,7rem) clamp(5rem,8vw,8rem);
}
.about-benefits__inner { max-width: 1700px; margin: 0 auto; position: relative; z-index: 2; }
.about-benefits h2 {
  display: flex;
  align-items: baseline;
  gap: .45em;
  font-size: clamp(2.8rem,5.5vw,6rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.045em;
  color: #fff;
  margin: 0 0 clamp(3rem,5vw,6rem);
}
.about-benefits h2 span { flex: none; }
.about-benefits__grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  column-gap: clamp(3rem,8vw,10rem);
  row-gap: clamp(2rem,3vw,3.5rem);
  max-width: 1500px;
  padding: 0 clamp(0px,6vw,120px);
}
.about-benefit h3 {
  color: #fff;
  font-size: clamp(1.15rem,1.8vw,1.85rem);
  line-height: 1.05;
  margin: 0 0 .3rem;
  font-weight: 700;
}
.about-benefit p {
  font-size: clamp(.95rem,1.18vw,1.2rem);
  font-weight: 300;
  line-height: 1.48;
  color: rgba(255,255,255,.76);
  margin: 0;
}
.about-benefits__watermark {
  position: absolute;
  width: min(55%,900px);
  right: -4%;
  bottom: -18%;
  opacity: .075;
  filter: grayscale(1) brightness(1.9);
  z-index: 1;
  pointer-events: none;
}

/* ===================================================================
   24. Responsive brandbook pages
   =================================================================== */
@media (min-width:768px) and (max-width: 1100px) {
  body .brand-logo { width: 78px !important; height: 75px !important; }
  body:not([data-page="home"]) .navbar .nav-link { font-size: .7rem; padding: .5rem .55rem; }
  .about-intro__copy { padding: 3rem 2.2rem; }
  .about-intro__content h1 { font-size: clamp(2.5rem,4.5vw,4.5rem); }
  .about-intro__content p { font-size: .95rem; }
}
@media (max-width:767.98px) {
  body .brand-logo { width: 72px !important; height: 68px !important; }
  body:not([data-page="home"]) .navbar-collapse {
    background: transparent !important;
  }
  .about-intro { grid-template-columns: 1fr; }
  .about-intro__copy { padding: 3.2rem 1.6rem; }
  .about-intro__content h1 { font-size: clamp(2.4rem,9vw,4rem); }
  .about-intro__content p { font-size: 1rem; }
  .about-intro__image { min-height: 400px; }
  .about-intro__corner-logo { top: 1.4rem; right: 1.4rem; width: 80px; }
  .about-benefits { padding: 3rem 1.5rem 5rem; }
  .about-benefits h2 { font-size: clamp(2.5rem,8vw,4.3rem); }
  .about-benefits__grid { grid-template-columns: 1fr; gap: 2rem; padding: 0; }
  .about-benefits__watermark { width: 90%; bottom: 0; right: -30%; }
}


/* ===================================================================
   25. SINGLE LEAF BACKGROUND — homepage
   One continuous texture for the entire viewport. No tiling.
   background-attachment: fixed makes the navbar, heading and lower
   band share exactly the same image coordinates during scrolling.
   At browser zoom 25%, the image scales to cover the viewport
   instead of repeating across the expanded CSS viewport.
   =================================================================== */
body[data-page="home"] {
  background-color: #388d08;
  background-image:
    linear-gradient(rgba(32, 110, 0, .13), rgba(32, 110, 0, .13)),
    url("assets/leaf-single.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* The background must not restart on individual homepage sections. */
body[data-page="home"] #site-header,
body[data-page="home"] .navbar,
body[data-page="home"] .navbar-collapse,
body[data-page="home"] .reference-hero,
body[data-page="home"] .reference-hero__top,
body[data-page="home"] .reference-hero__bottom {
  background: transparent !important;
}

/* Mobile browsers may handle fixed backgrounds inconsistently.
   The image still covers the page as one texture without tiling. */
@media (max-width: 767.98px) {
  body[data-page="home"] {
    background-attachment: scroll;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

/* ===================================================================
   26. About page corrections
   No numerical prefixes, no background logo on the green text panel.
   The image asset is cropped to remove the brandbook lightning.
   =================================================================== */
.about-intro__watermark { display: none !important; }
.about-intro__content h1,
.about-benefits h2 { display: block; }
.about-intro__image { background-position: center center; }

/* ===================================================================
   27. Continuous leaf texture across navbar + page-intro
   Apply the leaf texture once to the page background. Both the navbar
   and the page-intro remain transparent, so the image never restarts
   between those two areas. Content sections keep their own colors.
   =================================================================== */
body:not([data-page="home"]) {
  background-color: #418b25;
  background-image:
    linear-gradient(rgba(30,96,0,.13), rgba(30,96,0,.13)),
    url("assets/leaf-single.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body:not([data-page="home"]) #site-header,
body:not([data-page="home"]) .navbar,
body:not([data-page="home"]) .navbar-collapse,
body:not([data-page="home"]) .page-intro {
  background: transparent !important;
  background-image: none !important;
}
@media (max-width: 767.98px) {
  body:not([data-page="home"]) { background-attachment: scroll; }
}

/* ===================================================================
   28. FIX: standalone CTA on the Solutions page
   Previously `section pt-0` suppressed the upper gap and the
   `.btn-je` background was almost identical to the green CTA panel.
   =================================================================== */
body[data-page="solutions"] .cta-section {
  background: #2b382e;
  padding: clamp(4rem, 7vw, 7rem) 0;
}
body[data-page="solutions"] .cta-band {
  background: #4a8836;
  padding: clamp(2rem, 4.5vw, 4rem);
  gap: clamp(2rem, 4vw, 4rem);
}
body[data-page="solutions"] .cta-band__link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  border: 1px solid #fff;
  border-radius: 999px;
  padding: 1rem 1.65rem;
  color: #2b382e;
  background: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
body[data-page="solutions"] .cta-band__link:hover,
body[data-page="solutions"] .cta-band__link:focus-visible {
  background: #2b382e;
  color: #fff;
}

/* ===================================================================
   29. FIX: stable scrolling on interior pages
   Revealing whole full-width sections using translateY changed their
   visual position during scrolling. Do not transform entire sections.
   No scripted parallax is applied on inner pages.
   =================================================================== */
body:not([data-page="home"]) [data-reveal],
body:not([data-page="home"]) [data-reveal].is-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
body:not([data-page="home"]) {
  background-attachment: scroll;
}
/* Keep the same leaf pattern uninterrupted between navbar and intro.
   Their backgrounds are still transparent; no independent tiling. */
body:not([data-page="home"]) #site-header,
body:not([data-page="home"]) .navbar,
body:not([data-page="home"]) .page-intro {
  background: transparent !important;
}
@media (max-width: 767.98px) {
  body[data-page="solutions"] .cta-band__link {
    width: 100%;
  }
}

/* ===================================================================
   30. INNER PAGE HERO — identical continuous leaf texture to home
   Important: use the EXACT same image, overlay, scale and position
   as the homepage. Do not paint a second background on navbar or
   page-intro; both are windows onto the body background.
   =================================================================== */
body:not([data-page="home"]) {
  background-color: #388d08;
  background-image:
    linear-gradient(rgba(32, 110, 0, .13), rgba(32, 110, 0, .13)),
    url("assets/leaf-single.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Keep the image continuous across the header and intro. */
body:not([data-page="home"]) #site-header,
body:not([data-page="home"]) .navbar,
body:not([data-page="home"]) .navbar-collapse,
body:not([data-page="home"]) .page-intro {
  background: transparent !important;
  background-image: none !important;
}
body:not([data-page="home"]) #site-header {
  border: 0;
}
body:not([data-page="home"]) .navbar {
  border: 0;
}

/* Hero plus navbar fills one complete screen.
   --site-header-height is measured once after render, and updated
   on resize; no scroll listeners or transforms affect this layout. */
body:not([data-page="home"]) .page-intro {
  min-height: calc(100vh - var(--site-header-height, 110px));
  min-height: calc(100svh - var(--site-header-height, 110px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 7vw, 7rem) 0;
  position: relative;
}
body:not([data-page="home"]) .page-intro .container {
  width: 100%;
}
body:not([data-page="home"]) .page-intro h1 {
  font-size: clamp(3.5rem, 7.5vw, 7.5rem);
  font-weight: 400;
  line-height: 1.03;
}
body:not([data-page="home"]) .page-intro p {
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  max-width: 760px;
}
@media (max-width: 767.98px) {
  body:not([data-page="home"]) {
    /* Mobile browsers often do not support fixed backgrounds reliably.
       This stays a single non-repeating background across header+hero. */
    background-attachment: scroll;
    background-size: 100% 100svh;
    background-position: center top;
  }
  body:not([data-page="home"]) .page-intro {
    padding: 3rem 0;
  }
}

/* ===================================================================
   31. About photo and company contact information
   Photo is cropped to exclude the two brandbook logos. No overlay logo.
   =================================================================== */
.about-intro__corner-logo { display: none !important; }
.about-intro__image {
  background-position: center center;
}
.je-contact-info {
  font-style: normal;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.je-contact-info a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}
.je-contact-info a:hover { opacity: .8; }

/* ===================================================================
   32. Mobile navigation — white hamburger, stronger when expanded
   The icon is drawn with CSS so Bootstrap's dark SVG cannot override it.
   =================================================================== */
@media (max-width: 767.98px) {
  body .navbar .navbar-toggler {
    color: #fff !important;
    background: transparent !important;
    border: 1.5px solid rgba(255,255,255,.85) !important;
    border-radius: 12px;
    padding: .65rem .8rem;
    box-shadow: none !important;
    transition: border-width .15s ease;
  }
  body .navbar .navbar-toggler:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }
  body .navbar .navbar-toggler-icon {
    width: 26px;
    height: 22px;
    display: block;
    background-image: linear-gradient(#fff,#fff),
                      linear-gradient(#fff,#fff),
                      linear-gradient(#fff,#fff) !important;
    background-size: 100% 2px, 100% 2px, 100% 2px;
    background-position: center 2px, center 10px, center 18px;
    background-repeat: no-repeat;
    transition: background-size .15s ease;
  }
  body .navbar .navbar-toggler[aria-expanded="true"] {
    border-width: 3px !important;
  }
  body .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-size: 100% 3px, 100% 3px, 100% 3px;
  }
}

/* ===================================================================
   33. Mobile leaf texture — preserve its aspect ratio
   The former 100% 100svh stretched a wide 700x298 image into a
   tall, narrow mobile viewport. Use proportional scaling instead.
   Crop the sides naturally and never repeat the texture.
   =================================================================== */
@media (max-width: 767.98px) {
  body[data-page="home"],
  body:not([data-page="home"]) {
    background-image:
      linear-gradient(rgba(32,110,0,.13),rgba(32,110,0,.13)),
      url("assets/leaf-single.jpg") !important;
    background-color: #388d08;
    background-size: auto, auto 100svh !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
  }
  /* Header and intro share the SAME body background; no reset. */
  body #site-header,
  body .navbar,
  body .navbar-collapse,
  body .page-intro,
  body[data-page="home"] .reference-hero__top,
  body[data-page="home"] .reference-hero__bottom {
    background: transparent !important;
    background-image: none !important;
  }
}

/* ===================================================================
   34. ONE NATURAL LEAF — desktop and mobile
   Previous texture was constructed from mirrored pieces; repetition
   was baked into the JPG, not just CSS background-repeat. This new
   asset is a continuous photographic region without mirrored seams.
   All pages reference the same image, and navbar/page-intro are clear.
   =================================================================== */
body { --je-leaf-image: url("assets/leaf-single.jpg"); }
body[data-page="home"],
body:not([data-page="home"]) {
  background-image: linear-gradient(rgba(32,110,0,.13),rgba(32,110,0,.13)),var(--je-leaf-image);
  background-size: auto, cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}
@media (max-width: 767.98px) {
  body[data-page="home"],body:not([data-page="home"]) {
    background-image: linear-gradient(rgba(32,110,0,.13),rgba(32,110,0,.13)),var(--je-leaf-image) !important;
    background-size: auto, auto 100svh !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-attachment: scroll !important;
  }
}

/* ===================================================================
   35. BRAND PALETTE & CONSISTENT LEAF HEROES — v15
   Palette sourced from JustEnergy brandbook:
   forest #2B382E | green #4a8836 | lime #6ca42f | sprout #c5daac.
   One photo (leaf-single.jpg) is shared across ALL pages.
   =================================================================== */
:root {
  --je-forest: #2B382E;
  --je-green: #4a8836;
  --je-lime: #6ca42f;
  --je-sprout: #c5daac;
  --je-pale: #eef4e5;
  --je-leaf-image: url("assets/leaf-single.jpg");
}

/* 35.1. Single, uninterrupted image across navigation and first screen.
   Use the same coordinates and photo on every page. */
body[data-page="home"],
body:not([data-page="home"]) {
  background-color: var(--je-green);
  background-image:
    linear-gradient(rgba(32,110,0,.13),rgba(32,110,0,.13)),
    var(--je-leaf-image);
  background-size: auto, cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body #site-header,
body .navbar,
body .navbar-collapse,
body .page-intro,
body[data-page="home"] .reference-hero,
body[data-page="home"] .reference-hero__top,
body[data-page="home"] .reference-hero__bottom {
  background: transparent !important;
  background-image: none !important;
}
body:not([data-page="home"]) .page-intro {
  background: transparent !important;
  color: white;
}

/* 35.2. Solutions: alternating light/green sections.
   Previously the first section was dark forest and the second dark green. */
body[data-page="solutions"] .service-audience {
  background: var(--je-sprout) !important;
  color: var(--je-forest) !important;
}
body[data-page="solutions"] .service-audience p,
body[data-page="solutions"] .service-audience .section-index {
  color: #344733 !important;
}
body[data-page="solutions"] .service-audience--soft {
  background: var(--je-green) !important;
  color: white !important;
}
body[data-page="solutions"] .service-audience--soft p,
body[data-page="solutions"] .service-audience--soft .section-index {
  color: rgba(255,255,255,.92) !important;
}
body[data-page="solutions"] .service-audience .outline-pill--dark {
  border-color: var(--je-forest);
  color: var(--je-forest);
}
body[data-page="solutions"] .service-audience .outline-pill--dark:hover {
  background: var(--je-forest);
  color: white;
}
body[data-page="solutions"] .service-audience--soft .outline-pill--dark {
  border-color: white;
  color: white;
}
body[data-page="solutions"] .service-audience--soft .outline-pill--dark:hover {
  background: white;
  color: var(--je-forest);
}

/* 35.3. Partnership: light green editorial panel with dark typography. */
body[data-page="partnership"] .service-audience {
  background: var(--je-sprout) !important;
  color: var(--je-forest) !important;
}
body[data-page="partnership"] .service-audience p,
body[data-page="partnership"] .service-audience .section-index {
  color: #344733 !important;
}
body[data-page="partnership"] .service-audience .outline-pill--dark {
  border-color: var(--je-forest);
  color: var(--je-forest);
}
body[data-page="partnership"] .service-audience .outline-pill--dark:hover {
  background: var(--je-forest);
  color: white;
}

/* 35.4. Contacts: bright sprout panel with readable form surfaces. */
body[data-page="contacts"] .section {
  background: var(--je-sprout) !important;
  color: var(--je-forest) !important;
}
body[data-page="contacts"] .form-card {
  background: #f8faf5 !important;
  color: var(--je-forest) !important;
}
body[data-page="contacts"] .form-card .text-secondary {
  color: #475746 !important;
}

/* 35.5. About: keep the dark advantages panel exactly as the
   supplied brandbook reference; the company intro remains brand green.
   Keep footer dark for contrast, as an accent rather than page default. */
body[data-page="about"] .about-intro__copy {
  background: var(--je-green) !important;
}
body[data-page="about"] .about-benefits {
  background: var(--je-forest) !important;
}
body:not([data-page="home"]) footer {
  background: var(--je-forest) !important;
}
body[data-page="solutions"] .cta-section {
  background: var(--je-pale) !important;
}
body[data-page="solutions"] .cta-band {
  background: var(--je-green) !important;
}

/* 35.6. On mobile, retain the same photo without distortion.
   The photo is cropped, never stretched or tiled. */
@media (max-width: 767.98px) {
  body[data-page="home"],
  body:not([data-page="home"]) {
    background-image:
      linear-gradient(rgba(32,110,0,.13),rgba(32,110,0,.13)),
      var(--je-leaf-image) !important;
    background-size: auto, auto 100svh !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
  }
}


/* ===================================================================
   36. MOBILE LEAF BACKDROP — v16
   The previous `auto 100svh` image was only one viewport tall and
   sometimes narrower than the viewport, exposing green body color
   along the sides and below the fold. A fixed viewport-sized layer
   keeps the same natural leaf visible behind transparent hero bands.
   =================================================================== */
@media (max-width: 767.98px) {
  html { background-color: var(--je-green); }
  body[data-page="home"],
  body:not([data-page="home"]) {
    position: relative;
    isolation: isolate;
    background: transparent !important;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--je-green);
    background-image:
      linear-gradient(rgba(32,110,0,.13),rgba(32,110,0,.13)),
      var(--je-leaf-image);
    background-size: cover, cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
}