/* Single shared navigation and marketing hero implementation. */
.header{position:sticky;top:0;z-index:10;background:#fff;box-shadow:0 1px 8px #142b1710}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:82px}
.header .brand{display:flex;align-items:center;gap:9px;width:auto;padding:0;background:transparent;text-decoration:none;flex-shrink:0}
.brand-symbol{position:relative;overflow:hidden;width:53px;height:50px;flex-shrink:0}
.brand-symbol img{position:absolute;width:159px;max-width:none;height:auto;left:-53px;top:0}
.brand-word{font-size:24px;font-weight:700;letter-spacing:-1.2px;color:#12212b;white-space:nowrap}
.header nav{display:flex;align-items:center;gap:20px;font-size:14px;font-weight:500}
.header nav>a{text-decoration:none}
.header nav>a[aria-current]{text-decoration:underline;text-decoration-color:var(--leaf)}
.header nav .button{min-width:116px}
.menu-toggle{display:none;min-height:44px;padding:9px 13px;border:1px solid #c7d1c8;border-radius:8px;background:#fff;color:var(--ink)}
.hero-scene{position:relative;isolation:isolate;overflow:hidden;background:#edf5e8 url('/assets/green-city.webp') center/cover no-repeat}
.scene-picture{position:absolute;inset:0 0 0 22%;z-index:0;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 18%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%)}
.scene-picture img{position:absolute;bottom:0;right:0;width:100%;height:100%;object-fit:contain;object-position:right bottom}
.hero-scene:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#fffffff5 0%,#fffffff0 28%,#ffffffb8 36%,#ffffff00 49%)}
.hero-grid{position:relative;z-index:2;min-height:650px;padding-block:52px}
.hero-copy{width:40%;max-width:550px}
.hero .eyebrow{font:700 12px/1.6 Archivo,Arial,sans-serif;letter-spacing:.035em;color:#166c22;margin-bottom:16px}
.hero h1{font-size:clamp(42px,3.35vw,56px);line-height:1.04;letter-spacing:-.043em;font-weight:800;margin-bottom:20px}
.hero h1 span{color:#197b25}
.hero-subtitle{font-size:22px;line-height:1.35;margin-bottom:14px;color:#36483c}
.hero-description{font-size:16px;line-height:1.55;max-width:43ch;margin-bottom:18px;color:#36483c}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.hero .button{font-size:14px;padding-inline:20px}
.hero .offer-note{font-size:12px;line-height:1.45;max-width:46ch;margin:14px 0 0;color:#36483c}
.hero-proof{font-size:12px;margin:10px 0 0;color:#36483c}
.hero-partner{display:flex;align-items:center;gap:12px;margin-top:14px}
.hero-partner span{font-size:11px;color:#36483c}
.hero-partner img{width:144px;height:auto}
@media(max-width:1250px){
 .nav-row{flex-wrap:wrap;gap:0 12px;min-height:76px}
 .brand-word{font-size:22px}
 .header nav{width:100%;flex-wrap:wrap;gap:10px 20px;padding-bottom:18px}
 .header nav>a{padding:10px 4px;min-height:44px}
 .js .menu-toggle{display:block}
 .js .header nav{display:none}
 .js .header nav.open{display:flex}
 .hero-copy{width:44%}
 .hero h1{font-size:clamp(37px,4.1vw,49px)}
 .hero-grid{padding-block:44px;min-height:620px}
}
.desktop-copy,.reference-features,.desktop-nav-item{display:none}
.site-search{width:min(600px,90vw);max-height:80vh;border:1px solid #d7e3d8;border-radius:18px;padding:28px;color:var(--ink)}
.site-search::backdrop{background:#102b1bb3}
.search-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
.search-heading h2{font-size:26px;margin:0 0 20px}
.search-close,.site-search-toggle{border:0;background:transparent;color:var(--ink);cursor:pointer;min-width:44px;min-height:44px}
.search-close{font-size:28px}
.site-search label{display:block;font-size:14px;margin-bottom:8px}
.search-count{font-size:13px;margin:16px 0}
.search-results{padding-left:20px;margin:0}
.search-results a{display:inline-block;padding-block:5px}
@media(min-width:1251px){
 .header .nav-row{max-width:none;min-height:4.05vw;padding-inline:5.4vw}
 .header .brand-word{font-size:clamp(22px,1.48vw,29px)}
 .header nav{flex:1;margin-left:5.5vw;justify-content:center;gap:clamp(12px,1.6vw,30px);font-size:clamp(12px,.82vw,16px)}
 .header nav .desktop-nav-item{display:inline-flex;align-items:center}
 .header nav .mobile-nav-item{display:none}
 .header nav .button{min-width:10.2vw;padding:.65vw 1.3vw;margin-left:0}
 .header nav .button>span{width:100%;justify-content:space-between;gap:1.8vw}
 .header nav .button>span>span{font-size:1.8em;font-weight:400;line-height:1}
 .site-search-toggle{margin-left:auto;justify-content:center}
}

/* Desktop reference composition. Image uses its intrinsic ratio, never stretched. */
@media(min-width:1101px){
 .hero-scene{background:#edf5e8 url('/assets/hero-sky-v10.png') center top/100% auto no-repeat;aspect-ratio:5/2}
 .scene-picture{inset:auto 0 0;aspect-ratio:2163/727;mask-image:linear-gradient(180deg,transparent,#000 4%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 4%)}
 .scene-picture img{width:100%;height:100%;object-fit:contain;object-position:center}
 .hero-scene:before{display:none}
 .hero-grid{min-height:0;padding:3.7vw 5.4vw 2vw;max-width:none}
 .mobile-copy{display:none}
 .desktop-copy{display:block;width:26%;max-width:none}
  .desktop-copy h1{font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:clamp(24px,2.25vw,58px);line-height:1.12;letter-spacing:-.045em;text-transform:uppercase;margin-bottom:1.1vw}
 .desktop-copy h1 .headline-line{display:block;white-space:nowrap;color:#12212b}
 .desktop-copy h1 .headline-offer{display:block;white-space:nowrap;font-size:clamp(52px,4.75vw,100px);line-height:1.05;margin-top:.25vw;color:#197b25}
 .reference-description{font-size:clamp(13px,1.1vw,21px);line-height:1.3;color:#303f55;margin-bottom:1.3vw;max-width:36ch}
 .desktop-copy .actions{flex-wrap:nowrap;gap:.8vw;margin:0}
 .desktop-copy .button{min-height:0;padding:.8vw 1.1vw;font-size:clamp(11px,.95vw,18px);border-radius:.8vw;white-space:nowrap}
 .desktop-copy .primary{min-width:10.2vw;justify-content:space-between;background:linear-gradient(#138433,#076c26)}
 .desktop-copy .primary span{font-size:1.8em;font-weight:400;line-height:.7;margin-left:1.5vw}
 .play-mark{border:1.5px solid;border-radius:50%;width:1.45em;height:1.45em;display:inline-grid;place-items:center;font-size:.85em;margin-right:.6em}
 .reference-proof{font-size:clamp(11px,.83vw,15px);color:#384658;margin:.6vw 0 1.9vw}
 .reference-partners{display:flex;align-items:center;gap:1.4vw}
 .reference-partners small{display:block;font-size:clamp(9px,.57vw,11px);line-height:1.4;margin-bottom:.25vw;color:#3d4856}
 .reference-partners>div>img{width:8.5vw;max-width:170px;height:auto}
 .reference-ncz{border-left:1px solid #c8d1d9;padding-left:1.4vw}
 .reference-ncz>div{display:flex;align-items:center;gap:.35vw}
 .reference-ncz img{width:2.6vw;height:2.6vw;object-fit:contain}
 .reference-ncz strong{font-size:clamp(10px,.78vw,15px);line-height:1.15;letter-spacing:-.03em}
 .benefit-band{display:none}
 .reference-features{display:block;padding:0 4.2vw 14px;background:#fff}
 .reference-feature-row{display:grid;grid-template-columns:repeat(6,1fr) 1.35fr;align-items:center;gap:.7vw}
 .reference-feature{display:flex;align-items:center;gap:.6vw;min-width:0;text-decoration:none;padding:12px 0;position:relative}
 .reference-feature+.reference-feature:before{content:'';position:absolute;left:-.4vw;height:44px;border-left:1px solid #e5e9e7}
 .feature-icon{display:grid;place-items:center;width:3.5vw;height:3.5vw;border-radius:50%;background:#e9faed;color:#087531;flex-shrink:0}
 .feature-icon svg{width:1.8vw;height:1.9vw;fill:currentColor}
 .reference-feature strong{display:block;font-size:clamp(9px,.66vw,13px);line-height:1.2;letter-spacing:-.025em}
 .reference-feature small{display:block;font-size:clamp(9px,.63vw,12px);line-height:1.25;color:#344156;margin-top:5px}
 .reference-feature-cta{display:flex;align-items:center;justify-content:space-between;gap:.5vw;padding:1.1vw 1.2vw;border-radius:14px;background:#06592f;color:white;text-decoration:none}
 .reference-feature-cta:hover{color:white;background:#08703b}
 .reference-feature-cta>span{font-size:2.3vw;color:#a2df68;line-height:1}
 .reference-feature-cta strong{font-size:clamp(10px,.78vw,15px);line-height:1.15}
 .reference-feature-cta b{font-size:1.7vw;font-weight:400}
 .reference-company{display:flex;align-items:center;gap:1.6vw;background:#f1f5f5;border-radius:12px;padding:.5vw 1.2vw;margin-top:6px}
 .reference-company>span{font-size:2.2vw;line-height:1;color:#087531}
 .reference-company>strong{font-size:clamp(11px,.86vw,16px);white-space:nowrap}
 .reference-company p{font-size:clamp(11px,.78vw,15px);line-height:1.4;color:#344156;max-width:none;margin:0;flex:1}
 .reference-company .button{min-height:0;padding:.45vw .9vw;font-size:clamp(10px,.72vw,14px);border-radius:9px;white-space:nowrap}
 .reference-company .button span{margin-left:1vw;font-size:1.6em;line-height:1}
}
/* Portrait/tablet: one full-bleed city hero; source scene anchored below copy.
   Content determines height; reserved artwork space scales with viewport width. */
@media(max-width:1100px){
 .hero-scene{background:#dcebd4 url('/assets/green-city.webp') center/cover no-repeat}
 .hero-scene:before{background:none}
 .scene-picture{inset:auto 0 0;height:clamp(260px,65vw,430px);overflow:hidden;z-index:1;mask-image:linear-gradient(180deg,transparent 0%,#000 18%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%)}
 .scene-picture img{position:absolute;bottom:0;right:-7%;width:min(160%,1100px);max-width:none;height:100%;object-fit:contain;object-position:right bottom}
 .hero-grid{min-height:0;padding:28px 24px clamp(240px,60vw,390px)}
 .hero-copy{position:relative;isolation:isolate;width:100%;max-width:570px}
 /* Readability follows the actual copy height, including zoom and wrapped text.
    The background ends before the character artwork, keeping it full contrast. */
 .hero-copy:before{content:'';position:absolute;z-index:-1;inset:-28px -24px -32px;background:linear-gradient(180deg,rgba(245,250,240,.98) 0%,rgba(245,250,240,.98) calc(100% - 32px),transparent 100%);pointer-events:none}
 .hero .eyebrow{font-size:11px;margin-bottom:12px}
 .hero h1{font-size:clamp(35px,8.8vw,56px);line-height:1.04;margin-bottom:16px}
 .hero-subtitle{font-size:19px;margin-bottom:10px}
 .hero-description{font-size:16px;line-height:1.55;max-width:48ch;margin-bottom:14px;color:#203b2a}
 .hero .actions{gap:10px;margin-top:14px}
 .hero .button{font-size:14px;min-height:48px;padding:12px 16px}
 .hero .offer-note{font-size:13px;line-height:1.5;max-width:52ch;margin-top:14px;color:#203b2a}
 .hero-proof{font-size:13px;line-height:1.5;margin-top:10px;color:#203b2a}
 .hero-partner{margin-top:12px}
 .hero-partner span{font-size:13px;color:#203b2a}
 .hero-partner img{width:144px}
}
@media(max-width:430px){
 .nav-row{padding-inline:18px}
 .brand-word{font-size:20px;letter-spacing:-1px}
 .header .brand{gap:5px}
 .hero-grid{padding-inline:20px;padding-top:24px}
}
@media(max-width:360px){
 .brand-word{font-size:17px}
 .brand-symbol{width:43px}
 .hero-grid{padding-inline:16px}
 .hero h1{font-size:32px}
 .hero .button{padding-inline:12px;font-size:12px}
}

html:not(.js) .site-search-toggle{display:none}