:root {
   --ink: #101F2C;
   --night: #101F2C;
   --night-2: #172B3A;
   --paper: #F7FAF8;
   --white: #fff;
   --brand: #00664f;
   --brand-hover: #00664F;
   --brand-active: #005844;
   --brand-soft: #E5F0EA;
   --spruce: #174C43;
   --lime: #B7CE74;
   --energy: #174C43;
   --energy-light: #B7CE74;
   --energy-soft: #E5F0EA;
   --bronze: #B7CE74;
   --bronze-soft: #E5F0EA;
   --mist: #E9EDF0;
   --muted: #526170;
   --line: #D8DEE4;
   --line-strong: #71808B;
   --danger: #B42318;
   --success: #176B46;
   --warning: #805400;
   --info: #245B9E;
   --text-secondary: #526170;
   --surface: #ffffff;
   --surface-alt: #E9EDF0;
   --surface-highlight: #E5F0EA;
   --chart-grid: #D8DEE4;
   --cobalt: var(--brand);
   --cobalt2: #174C43;
   --mint: #B7CE74;
   --amber: var(--bronze);
   --max: 1460px;
   --gutter: clamp(20px, 4vw, 72px);
   --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
   --sans: "Aptos", "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
   --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   background: var(--paper)
}

body {
   margin: 0;
   color: var(--ink);
   background: var(--paper);
   font-family: var(--sans);
   font-size: 16px;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased
}

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

button,
input,
select,
textarea {
   font: inherit
}

button {
   cursor: pointer
}

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

main {
   overflow: hidden
}

.site-header {
   position: fixed;
   z-index: 80;
   top: 14px;
   left: var(--gutter);
   right: var(--gutter);
   height: 62px;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   padding: 0 18px;
   border: 1px solid rgba(255, 255, 255, .25);
   background: rgba(247, 250, 248, .92);
   backdrop-filter: blur(18px);
   border-radius: 999px;
   box-shadow: 0 12px 40px rgba(16, 31, 44, .08)
}
.eco-header{
    background: rgba(7, 21, 33, .97);
    border-bottom-color: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.brand {
   display: flex;
   align-items: center;
   gap: 10px;
   width: max-content;
   font-size: 13px;
   letter-spacing: .12em
}

.brand span:last-child {
   display: flex;
   gap: 5px;
   align-items: baseline
}

.brand b {
   font-weight: 800
}

.brand em {
   font-style: normal;
   color: var(--cobalt);
   font-weight: 800
}

.brand-mark {
   display: grid;
   place-items: center;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: var(--cobalt);
   color: white;
   font-weight: 800
}

.explore-btn {
   justify-self: center;
   border: 0;
   background: transparent;
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 700;
   color: var(--ink)
}

.explore-btn i,
.explore-btn i:after {
   display: block;
   width: 16px;
   height: 1.5px;
   background: var(--ink);
   content: ""
}

.explore-btn i:after {
   transform: translateY(5px)
}

.header-cta {
   justify-self: end;
   border-radius: 999px;
   background: var(--night);
   color: white;
   padding: 10px 16px;
   font-size: 13px;
   font-weight: 700
}

.nav-layer {
   position: fixed;
   z-index: 100;
   inset: 0;
   background: var(--night);
   color: white;
   padding: 24px var(--gutter) 36px;
   display: grid;
   grid-template-rows: auto 1fr auto;
   transform: translateY(-105%);
   transition: transform .5s cubic-bezier(.75, 0, .2, 1);
   visibility: hidden
}

.nav-layer.open {
   transform: none;
   visibility: visible
}

.nav-top {
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid rgba(255, 255, 255, .18);
   padding-bottom: 18px;
   font: 12px var(--mono);
   letter-spacing: .12em
}

.nav-top button {
   border: 0;
   background: none;
   color: white
}

.nav-grid {
   display: grid;
   grid-template-columns: 1.1fr 1fr .8fr;
   gap: 7vw;
   padding: 8vh 0
}

.nav-grid section {
   display: flex;
   flex-direction: column;
   gap: 13px
}

.nav-grid small {
   color: var(--mint);
   font: 12px var(--mono);
   letter-spacing: .12em;
   margin-bottom: 12px
}

.nav-grid a {
   font: clamp(24px, 2.3vw, 42px)/1.1 var(--serif);
   max-width: 470px;
   transition: color .2s
}

.nav-grid a:hover {
   color: var(--mint)
}

.nav-foot {
   border-top: 1px solid rgba(255, 255, 255, .18);
   padding-top: 18px;
   display: flex;
   justify-content: space-between
}

.nav-foot a {
   color: var(--mint)
}

.hero {
   min-height: 100svh;
   padding: 150px var(--gutter) 70px;
   position: relative;
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
   align-items: end;
   background: linear-gradient(125deg, var(--paper) 0 55%, var(--brand-soft) 55% 100%);
   isolation: isolate
}

.hero:before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(16, 31, 44, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 31, 44, .045) 1px, transparent 1px);
   background-size: 48px 48px;
   mask-image: linear-gradient(to bottom, transparent 0, #000 25%, #000 80%, transparent)
}

.hero-copy {
   position: relative;
   z-index: 2;
   max-width: 900px
}

.eyebrow {
   font: 700 11px var(--mono);
   letter-spacing: .15em;
   text-transform: uppercase;
   color: var(--cobalt);
   margin: 0 0 22px
}

.hero h1,
.section-head h2,
.final-cta h2,
.manifesto blockquote {
   font-family: var(--serif);
   font-weight: 500;
   letter-spacing: -.045em
}

.hero h1 {
   font-size: clamp(56px, 7vw, 112px);
   line-height: .92;
   margin: 0;
   max-width: 1000px
}

.hero-deck {
   font-size: clamp(18px, 1.45vw, 23px);
   max-width: 760px;
   margin: 30px 0 0;
   color: var(--text-secondary)
}

.hero-actions {
   display: flex;
   align-items: center;
   gap: 22px;
   margin-top: 34px;
   flex-wrap: wrap
}

.hero-trust {
   margin: 18px 0 0;
   font: 700 11px var(--mono);
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--muted)
}

.btn {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   min-height: 50px;
   padding: 12px 20px;
   border-radius: 4px;
   border: 1px solid transparent;
   font-weight: 750;
   letter-spacing: -.01em
}

.btn.primary {
   background: var(--cobalt);
   color: white
}

.btn.secondary {
   border-color: var(--line);
   background: white
}

.btn.light {
   background: white;
   color: var(--night)
}

.text-link {
   font-weight: 750;
   border-bottom: 1px solid currentColor;
   padding-bottom: 3px
}

.hero-context {
   position: relative;
   z-index: 2;
   min-height: 520px;
   display: grid;
   place-items: center
}

.hero-signal {
   position: absolute;
   z-index: 1;
   inset: 0;
   overflow: hidden;
   pointer-events: none
}

.hero-signal span {
   position: absolute;
   border: 1px solid rgba(0, 122, 94, .16);
   border-radius: 50%;
   width: 32vw;
   height: 32vw;
   right: -5vw;
   top: 15vh
}

.hero-signal span:nth-child(2) {
   width: 24vw;
   height: 24vw;
   right: 7vw;
   top: 29vh
}

.hero-signal span:nth-child(3) {
   width: 13vw;
   height: 13vw;
   right: 23vw;
   top: 43vh;
   border-color: rgba(0, 122, 94, .46)
}

.hero-signal span:nth-child(4) {
   width: 6vw;
   height: 6vw;
   right: 33vw;
   top: 52vh;
   background: var(--amber);
   border: 0
}

.energy-rings {
   width: min(36vw, 520px);
   aspect-ratio: 1;
   position: relative;
   display: grid;
   place-items: center
}

.energy-rings span {
   position: absolute;
   border: 1px solid var(--cobalt);
   border-radius: 50%;
   inset: 0
}

.energy-rings span:nth-child(2) {
   inset: 14%;
   border-color: var(--mint)
}

.energy-rings span:nth-child(3) {
   inset: 28%;
   border-color: var(--amber)
}

.energy-rings b {
   width: 24%;
   aspect-ratio: 1;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: var(--night);
   color: white;
   font: 800 20px var(--mono)
}

.sun-field {
   width: min(38vw, 560px);
   height: 500px;
   position: relative;
   border-bottom: 2px solid var(--ink)
}

.sun-field .sun {
   position: absolute;
   width: 180px;
   height: 180px;
   border-radius: 50%;
   background: var(--amber);
   right: 6%;
   top: 10%
}

.sun-field i {
   position: absolute;
   bottom: 0;
   width: 12%;
   height: 30%;
   background: var(--cobalt);
   transform: skewX(-18deg)
}

.sun-field i:nth-of-type(1) {
   left: 0
}

.sun-field i:nth-of-type(2) {
   left: 17%;
   height: 38%
}

.sun-field i:nth-of-type(3) {
   left: 34%;
   height: 45%
}

.sun-field i:nth-of-type(4) {
   left: 51%;
   height: 52%
}

.sun-field i:nth-of-type(5) {
   left: 68%;
   height: 60%
}

.pulse-orbit {
   width: min(38vw, 520px);
   aspect-ratio: 1;
   border: 1px solid var(--cobalt);
   border-radius: 50%;
   position: relative;
   display: grid;
   place-items: center
}

.pulse-orbit:before,
.pulse-orbit:after {
   content: "";
   position: absolute;
   inset: 17%;
   border: 1px dashed var(--mint);
   border-radius: 50%
}

.pulse-orbit:after {
   inset: 35%;
   border-style: solid;
   border-color: var(--amber)
}

.pulse-orbit b {
   z-index: 2;
   width: 26%;
   aspect-ratio: 1;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: var(--night);
   color: white
}

.pulse-orbit i {
   position: absolute;
   font: 700 11px var(--mono);
   font-style: normal;
   background: white;
   padding: 7px 9px;
   border: 1px solid var(--line)
}

.o1 {
   top: 6%;
   left: 40%
}

.o2 {
   right: 0;
   top: 44%
}

.o3 {
   left: 0;
   top: 44%
}

.o4 {
   bottom: 3%;
   left: 38%
}

.route-map {
   width: min(38vw, 560px);
   height: 460px;
   position: relative;
   border: 1px solid var(--cobalt);
   border-radius: 50% 50% 15% 15%;
   display: grid;
   place-items: center
}

.route-map span {
   position: absolute;
   left: 15%;
   right: 15%;
   top: 50%;
   height: 2px;
   background: var(--mint)
}

.route-map i {
   position: absolute;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: white;
   border: 2px solid var(--cobalt);
   display: grid;
   place-items: center;
   font-style: normal;
   font: 700 11px var(--mono)
}

.route-map i:nth-of-type(1) {
   left: 10%;
   top: 44%
}

.route-map i:nth-of-type(2) {
   left: 35%;
   top: 44%
}

.route-map i:nth-of-type(3) {
   left: 60%;
   top: 44%
}

.route-map i:nth-of-type(4) {
   right: 8%;
   top: 44%
}

.route-map b {
   font: 800 13px var(--mono);
   margin-top: -180px
}

.light-field {
   width: min(38vw, 560px);
   height: 460px;
   border-bottom: 6px solid var(--night);
   position: relative
}

.light-field i {
   position: absolute;
   bottom: 0;
   width: 4px;
   height: 65%;
   background: var(--night)
}

.light-field i:after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 120px;
   height: 90px;
   background: linear-gradient(145deg, rgba(183, 206, 116, .38), transparent 70%);
   clip-path: polygon(0 0, 100% 55%, 0 100%)
}

.light-field i:nth-child(1) {
   left: 15%
}

.light-field i:nth-child(2) {
   left: 48%;
   height: 80%
}

.light-field i:nth-child(3) {
   right: 15%;
   height: 58%
}

.light-field span {
   position: absolute;
   bottom: 18px;
   right: 0;
   font: 700 11px var(--mono)
}

.build-stack,
.layer-stack {
   display: flex;
   flex-direction: column;
   width: min(34vw, 500px);
   gap: 8px
}

.build-stack span,
.layer-stack span,
.layer-stack strong {
   padding: 18px 20px;
   background: white;
   border-left: 7px solid var(--cobalt);
   font: 700 13px var(--mono);
   letter-spacing: .1em
}

.build-stack span:nth-child(2),
.layer-stack span:nth-child(2) {
   margin-left: 8%
}

.build-stack span:nth-child(3),
.layer-stack span:nth-child(3) {
   margin-left: 16%
}

.build-stack span:nth-child(4),
.layer-stack span:nth-child(4) {
   margin-left: 24%
}

.decision-matrix {
   display: grid;
   grid-template-columns: 1fr 1fr;
   width: min(38vw, 520px);
   aspect-ratio: 1
}

.decision-matrix i,
.decision-matrix b {
   display: grid;
   place-items: center;
   border: 1px solid var(--cobalt);
   font: 700 11px var(--mono);
   font-style: normal
}

.decision-matrix b {
   grid-column: 1/-1;
   background: var(--cobalt);
   color: white
}

.outcome-ribbon {
   background: var(--night);
   color: white;
   min-height: 86px;
   padding: 0 var(--gutter);
   display: flex;
   align-items: center;
   justify-content: space-between;
   font: 700 12px var(--mono);
   letter-spacing: .14em
}

.outcome-ribbon i {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--mint)
}

section {
   padding: clamp(78px, 7vw, 150px) var(--gutter)
}

.section-head {
   max-width: 980px;
   margin-bottom: 60px
}

.section-head h2 {
   font-size: clamp(44px, 5.7vw, 84px);
   line-height: .98;
   margin: 0
}

.section-head>p:last-child {
   font-size: 19px;
   color: var(--muted);
   max-width: 720px
}

.decision-canvas {
   background: var(--paper)
}

.decision-board {
   display: grid;
   grid-template-columns: .78fr 1.22fr;
   min-height: 540px;
   border-top: 1px solid var(--ink);
   border-bottom: 1px solid var(--ink)
}

.decision-tabs {
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--ink)
}

.decision-tabs button {
   flex: 1;
   text-align: left;
   background: transparent;
   border: 0;
   border-bottom: 1px solid var(--line);
   padding: 20px 4vw 20px 0;
   font: 500 clamp(20px, 2.1vw, 34px) var(--serif);
   color: var(--muted);
   display: flex;
   gap: 18px;
   align-items: center
}

.decision-tabs button span {
   font: 700 10px var(--mono);
   color: var(--cobalt)
}

.decision-tabs button[aria-pressed=true] {
   color: var(--ink);
   padding-left: 24px
}

.decision-panel {
   position: relative;
   padding: 56px;
   overflow: hidden;
   background: white
}

.decision-panel article {
   position: relative;
   z-index: 2;
   max-width: 640px
}

.decision-panel h3 {
   font: 500 clamp(38px, 4vw, 62px)/1 var(--serif);
   margin: 0 0 20px
}

.decision-panel article p {
   font-size: 20px;
   color: var(--muted)
}

.decision-panel article a {
   font-weight: 750;
   color: var(--cobalt)
}

.signal-chart {
   position: absolute;
   bottom: -8%;
   right: -2%;
   width: 65%;
   height: 42%;
   display: flex;
   align-items: flex-end;
   gap: 8px;
   opacity: .22
}

.signal-chart i {
   flex: 1;
   background: var(--cobalt);
   height: var(--h)
}

.signal-chart i:nth-child(1) {
   height: 25%
}

.signal-chart i:nth-child(2) {
   height: 43%
}

.signal-chart i:nth-child(3) {
   height: 79%
}

.signal-chart i:nth-child(4) {
   height: 58%
}

.signal-chart i:nth-child(5) {
   height: 95%
}

.architecture-stage {
   background: var(--night);
   color: white
}

.architecture-head {
   display: grid;
   grid-template-columns: 1.2fr .8fr;
   gap: 10vw;
   align-items: end
}

.architecture-head h2 {
   font: 500 clamp(46px, 5.4vw, 82px)/.98 var(--serif);
   margin: 0
}

.architecture-head p:last-child {
   color: #BAC6D0;
   font-size: 18px
}

.state-controls {
   display: flex;
   gap: 8px;
   margin: 52px 0 30px;
   overflow: auto;
   padding-bottom: 6px
}

.state-controls button {
   border: 1px solid rgba(255, 255, 255, .23);
   background: transparent;
   color: white;
   border-radius: 999px;
   padding: 10px 14px;
   white-space: nowrap
}

.state-controls button[aria-selected=true] {
   background: var(--mint);
   border-color: var(--mint);
   color: var(--night)
}

.system-field {
   height: 520px;
   position: relative;
   border: 1px solid rgba(255, 255, 255, .17);
   background: radial-gradient(circle at center, rgba(0, 122, 94, .26), transparent 36%), linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
   background-size: auto, 56px 56px, 56px 56px
}

.system-field .source,
.system-field .load,
.system-field .hub {
   position: absolute;
   z-index: 2;
   padding: 10px 12px;
   border: 1px solid rgba(255, 255, 255, .3);
   background: var(--night);
   font: 700 11px var(--mono);
   letter-spacing: .1em
}

.system-field .grid {
   left: 5%;
   top: 17%
}

.system-field .solar {
   left: 5%;
   bottom: 18%
}

.system-field .battery {
   left: 46%;
   bottom: 7%
}

.system-field .gen {
   right: 7%;
   top: 17%
}

.system-field .hub {
   left: 46%;
   top: 45%;
   border-radius: 50%;
   width: 90px;
   height: 90px;
   display: grid;
   place-items: center;
   background: var(--cobalt);
   text-align: center
}

.system-field .hub span {
   display: block;
   font-size: 8px
}

.system-field .critical {
   right: 5%;
   bottom: 18%;
   border-color: var(--amber)
}

.system-field .facility {
   right: 5%;
   top: 45%;
   border-color: var(--mint)
}

.system-field svg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%
}

.flow {
   fill: none;
   stroke: var(--mint);
   stroke-width: 2;
   stroke-dasharray: 7 10;
   animation: dash 9s linear infinite
}

.system-field[data-system-state=outage] .f1 {
   stroke: var(--danger);
   opacity: .2
}

.system-field[data-system-state=surplus] .f2,
.system-field[data-system-state=surplus] .f3 {
   stroke: var(--amber);
   stroke-width: 4
}

.system-field[data-system-state=extended] .f4,
.system-field[data-system-state=extended] .f3 {
   stroke: var(--amber);
   stroke-width: 4
}

@keyframes dash {
   to {
      stroke-dashoffset: -170
   }
}

.state-copy {
   max-width: 760px;
   margin: 28px 0 0;
   color: #BAC6D0
}

.solution-chapters {
   background: white
}

.solution-row {
   display: grid;
   grid-template-columns: 90px 1fr minmax(180px, .35fr) 30px;
   gap: 30px;
   align-items: center;
   border-top: 1px solid var(--ink);
   padding: 30px 0;
   transition: padding .25s, background .25s
}

.solution-row:last-child {
   border-bottom: 1px solid var(--ink)
}

.solution-row:hover {
   padding-left: 22px;
   background: var(--surface-alt)
}

.chapter-no {
   font: 700 12px var(--mono);
   color: var(--cobalt)
}

.solution-row h3 {
   font: 500 clamp(30px, 3vw, 50px) var(--serif);
   margin: 0 0 6px
}

.solution-row p {
   margin: 0;
   color: var(--muted);
   max-width: 660px
}

.solution-row>strong {
   font: 700 11px var(--mono);
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: .08em
}

.project-evidence {
   background: var(--surface-highlight)
}

.project-strip {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   gap: 16px;
   margin-bottom: 36px
}

.project-item {
   margin: 0;
   background: white;
   grid-column: span 4
}

.project-item:nth-child(1),
.project-item:nth-child(4) {
   grid-column: span 7
}

.project-item:nth-child(2),
.project-item:nth-child(3) {
   grid-column: span 5
}

.project-item img {
   width: 100%;
   aspect-ratio: 1.65;
   object-fit: cover
}

.project-item figcaption {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 5px 18px;
   padding: 20px
}

.project-item figcaption strong {
   font: 700 14px var(--mono);
   color: var(--cobalt)
}

.project-item figcaption span {
   font-weight: 750
}

.project-item figcaption small {
   grid-column: 2;
   color: var(--muted)
}

.industry-lens {
   background: var(--paper)
}

.lens-intro {
   display: grid;
   grid-template-columns: 1fr 1.25fr;
   gap: 8vw;
   margin-bottom: 60px
}

.lens-intro h2 {
   font: 500 clamp(44px, 5vw, 78px)/1 var(--serif);
   margin: 0
}

.lens-layout {
   display: grid;
   grid-template-columns: .8fr 1.2fr;
   border-top: 1px solid var(--ink);
   border-bottom: 1px solid var(--ink)
}

.lens-tabs {
   display: flex;
   flex-direction: column;
   border-right: 1px solid var(--ink)
}

.lens-tabs button {
   background: none;
   border: 0;
   border-bottom: 1px solid var(--line);
   padding: 18px 0;
   text-align: left;
   font-size: 18px;
   color: var(--muted)
}

.lens-tabs button[aria-pressed=true] {
   font-weight: 800;
   color: var(--cobalt);
   padding-left: 18px
}

.lens-panel {
   min-height: 400px;
   padding: 50px;
   background: white
}

.lens-panel article span {
   font: 700 12px var(--mono);
   color: var(--cobalt)
}

.lens-panel h3 {
   font: 500 clamp(42px, 4vw, 68px)/1 var(--serif);
   margin: 12px 0
}

.lens-panel p {
   font-size: 20px;
   color: var(--muted);
   max-width: 650px
}

.lens-panel a {
   font-weight: 750;
   color: var(--cobalt)
}

.decision-lab {
   display: grid;
   grid-template-columns: .85fr 1.15fr;
   gap: 6vw;
   background: var(--night);
   color: white
}

.lab-copy>h2 {
   font: 500 clamp(46px, 5vw, 78px)/1 var(--serif);
   margin: 0 0 18px
}

.lab-copy>p {
   color: #BAC6D0
}

.finder {
   margin-top: 50px;
   border-top: 1px solid rgba(255, 255, 255, .2);
   padding-top: 28px
}

.finder-head h3 {
   font: 500 34px var(--serif);
   margin: 0
}

.finder-options {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 22px 0
}

.finder-options button {
   background: transparent;
   border: 1px solid rgba(255, 255, 255, .25);
   color: inherit;
   padding: 9px 12px;
   border-radius: 999px
}

.finder-options button.active {
   background: var(--mint);
   color: var(--night);
   border-color: var(--mint)
}

.finder-result {
   min-height: 120px;
   padding: 18px;
   background: rgba(255, 255, 255, .07);
   margin-bottom: 18px
}

.finder-result small {
   font: 700 10px var(--mono);
   color: var(--mint)
}

.finder-result p {
   margin: 7px 0
}

.lab-tool {
   background: var(--paper);
   color: var(--ink);
   padding: 28px
}

.tool-tabs {
   display: flex;
   gap: 6px;
   overflow: auto;
   margin-bottom: 24px
}

.tool-tabs button {
   border: 1px solid var(--line);
   background: white;
   padding: 9px 11px;
   white-space: nowrap
}

.tool-tabs button[aria-pressed=true] {
   background: var(--cobalt);
   color: white;
   border-color: var(--cobalt)
}

.calc {
   display: grid;
   gap: 22px
}

.calc-fields {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px
}

.calc label,
.lead-form label {
   font-weight: 700;
   font-size: 13px;
   display: grid;
   gap: 6px
}

.calc label span {
   font-weight: 500;
   color: var(--muted)
}

input,
select,
textarea {
   width: 100%;
   border: 1px solid var(--line-strong);
   background: white;
   padding: 12px 13px;
   color: var(--ink);
   border-radius: 0;
   min-height: 48px
}

input:focus,
select:focus,
textarea:focus {
   outline: 3px solid rgba(0, 122, 94, .16);
   border-color: var(--cobalt)
}

.calc-result {
   padding: 20px;
   border: 1px solid var(--cobalt);
   background: var(--brand-soft)
}

.calc-result small {
   font: 700 10px var(--mono);
   color: var(--cobalt)
}

.calc-result strong {
   font-size: 26px
}

.disclaimer {
   font-size: 12px;
   color: var(--muted)
}

.method-wave {
   background: white
}

.wave-line {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   position: relative
}

.wave-line:before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 30px;
   height: 2px;
   background: linear-gradient(90deg, var(--cobalt), var(--mint), var(--amber))
}

.wave-line article {
   position: relative;
   padding: 70px 20px 0 0
}

.wave-line article:before {
   content: "";
   position: absolute;
   top: 22px;
   left: 0;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background: var(--paper);
   border: 4px solid var(--cobalt)
}

.wave-line b {
   font: 700 11px var(--mono);
   color: var(--cobalt)
}

.wave-line h3 {
   font: 500 27px var(--serif);
   margin: 7px 0
}

.wave-line p {
   font-size: 14px;
   color: var(--muted)
}

.principles {
   display: grid;
   grid-template-columns: 1.1fr repeat(3, 1fr);
   gap: 0;
   padding-top: 0;
   background: white
}

.principles>div,
.principles article {
   padding: 42px 32px;
   border-top: 1px solid var(--ink);
   border-right: 1px solid var(--line)
}

.principles>div h2 {
   font: 500 clamp(38px, 4vw, 60px)/1 var(--serif);
   margin: 0
}

.principles article b {
   font: 700 11px var(--mono);
   color: var(--cobalt)
}

.principles article h3 {
   font: 500 30px var(--serif)
}

.principles article p {
   color: var(--muted)
}

.final-cta {
   background: var(--night);
   color: white;
   min-height: 570px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: flex-start
}

.final-cta .eyebrow {
   color: var(--mint)
}

.final-cta h2 {
   font-size: clamp(56px, 7vw, 110px);
   line-height: .92;
   max-width: 1200px;
   margin: 0
}

.final-cta p {
   font-size: 20px;
   max-width: 680px;
   color: #E5F0EA
}

.site-footer {
   background: var(--night);
   color: white;
   padding: 70px var(--gutter) 28px
}

.footer-lead {
   display: flex;
   justify-content: space-between;
   align-items: end;
   padding-bottom: 50px;
   border-bottom: 1px solid rgba(255, 255, 255, .2)
}

.footer-lead p {
   font: 500 clamp(36px, 4.5vw, 66px)/1 var(--serif);
   max-width: 760px;
   margin: 0
}

.footer-lead a {
   color: var(--mint);
   font-weight: 750
}

.footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   gap: 5vw;
   padding: 48px 0
}

.footer-grid nav {
   display: flex;
   flex-direction: column;
   gap: 10px
}

.footer-grid p {
   max-width: 500px;
   color: #BAC6D0
}

.footer-brand {
   font-weight: 800;
   letter-spacing: .12em
}

.footer-base {
   display: flex;
   gap: 24px;
   border-top: 1px solid rgba(255, 255, 255, .14);
   padding-top: 20px;
   color: #BAC6D0;
   font-size: 12px
}

.mobile-sticky {
   display: none
}

.service-narrative,
.about-copy,
.legal-copy {
   background: white
}

.copy-flow {
   max-width: 920px;
   margin: auto
}

.copy-flow h2 {
   font: 500 clamp(38px, 4vw, 62px)/1 var(--serif);
   margin: 72px 0 20px
}

.copy-flow h3 {
   font: 500 31px var(--serif);
   margin: 45px 0 10px
}

.copy-flow h4 {
   font-size: 18px
}

.copy-flow p,
.copy-flow li {
   font-size: 18px;
   color: var(--text-secondary)
}

.copy-flow strong {
   color: var(--ink)
}

.copy-flow ul,
.copy-flow ol {
   padding-left: 22px
}

.experience {
   display: grid;
   grid-template-columns: .8fr 1.2fr;
   gap: 7vw;
   background: var(--surface-highlight)
}

.experience h2,
.embedded-tool h2 {
   font: 500 clamp(42px, 4.8vw, 72px)/1 var(--serif);
   margin: 0
}

.experience-note {
   align-self: end;
   font-size: 20px
}

.chart-shell {
   background: white;
   padding: 30px;
   min-height: 420px;
   display: flex;
   flex-direction: column;
   justify-content: end
}

.chart-bars {
   height: 240px;
   display: flex;
   align-items: end;
   gap: 6px;
   border-bottom: 1px solid var(--ink);
   position: relative
}

.chart-bars i {
   flex: 1;
   height: var(--h);
   background: linear-gradient(var(--amber), #E5F0EA)
}

.load-line {
   height: 3px;
   background: var(--cobalt);
   transform: translateY(-150px);
   transition: transform .2s
}

.chart-labels {
   display: flex;
   justify-content: space-between;
   font: 10px var(--mono);
   margin: 8px 0 30px
}

.chart-shell label {
   display: grid;
   gap: 7px;
   font-weight: 700
}

.gate-options {
   display: grid;
   gap: 10px
}

.gate-options button {
   padding: 20px;
   text-align: left;
   border: 1px solid var(--cobalt);
   background: white;
   font-weight: 750
}

.gate-result {
   padding: 24px;
   background: var(--night);
   color: white;
   min-height: 120px
}

.resource-clock {
   width: min(440px, 80vw);
   aspect-ratio: 1;
   border-radius: 50%;
   position: relative;
   border: 1px solid var(--cobalt);
   display: grid;
   place-items: center;
   margin: auto
}

.resource-clock .solar-arc,
.resource-clock .wind-arc {
   position: absolute;
   inset: 12%;
   border-radius: 50%;
   border: 28px solid transparent
}

.resource-clock .solar-arc {
   border-top-color: var(--amber);
   border-right-color: var(--amber);
   transform: rotate(-30deg)
}

.resource-clock .wind-arc {
   inset: 28%;
   border-bottom-color: var(--mint);
   border-left-color: var(--mint);
   transform: rotate(20deg)
}

.resource-clock b {
   font: 700 22px var(--mono)
}

.critical-explorer {
   grid-template-columns: .8fr 1.2fr
}

.load-selector {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px
}

.load-selector button {
   padding: 20px;
   border: 1px solid var(--cobalt);
   background: white;
   text-align: left;
   font-weight: 750
}

.load-selector button span {
   display: block;
   color: var(--muted);
   font: 11px var(--mono)
}

.load-selector button.active {
   background: var(--cobalt);
   color: white
}

.load-selector button.active span {
   color: #E5F0EA
}

.critical-total {
   grid-column: 1/-1;
   background: var(--night);
   color: white;
   padding: 24px
}

.critical-total strong {
   display: block;
   font: 500 45px var(--serif);
   color: var(--mint)
}

.critical-total p {
   font-size: 12px;
   color: #BAC6D0
}

.embedded-tool {
   display: grid;
   grid-template-columns: .75fr 1.25fr;
   gap: 7vw;
   background: var(--paper)
}

.outage-timeline {
   display: block
}

.duration-track {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   margin-top: 50px
}

.duration-track span {
   border-top: 6px solid var(--cobalt);
   padding: 20px 14px;
   border-right: 1px solid var(--line)
}

.duration-track span:nth-child(2) {
   border-color: var(--mint)
}

.duration-track span:nth-child(3) {
   border-color: var(--amber)
}

.duration-track span:nth-child(4) {
   border-color: var(--danger)
}

.duration-track b {
   display: block;
   font: 700 11px var(--mono);
   margin-bottom: 8px
}

.day-profile {
   grid-template-columns: .65fr 1.35fr
}

.day-profile input[type=range] {
   grid-column: 1/-1
}

.day-scene {
   grid-column: 2;
   min-height: 380px;
   background: linear-gradient(#E5F0EA, #E9EDF0 70%, #172B3A 70%);
   position: relative;
   overflow: hidden
}

.day-scene .sky {
   position: absolute;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   background: var(--amber);
   left: 50%;
   top: 12%;
   transform: translateX(-50%)
}

.day-values {
   position: absolute;
   left: 30px;
   right: 30px;
   bottom: 26px;
   color: white
}

.day-values b {
   font: 500 50px var(--serif)
}

.fleet-day {
   display: block
}

.fleet-track {
   display: grid;
   grid-template-columns: auto 1fr auto 1fr auto;
   align-items: center;
   margin-top: 50px
}

.fleet-track i {
   height: 6px;
   background: var(--cobalt)
}

.fleet-track i.charge {
   background: repeating-linear-gradient(90deg, var(--mint) 0 20px, transparent 20px 27px)
}

.fleet-track span {
   text-align: center
}

.light-geometry {
   display: block
}

.road-demo {
   height: 390px;
   border-bottom: 8px solid var(--night);
   position: relative;
   margin-top: 40px
}

.road-demo .pole {
   position: absolute;
   bottom: 0;
   width: 5px;
   height: 70%;
   background: var(--night)
}

.road-demo .p1 {
   left: 16%
}

.road-demo .p2 {
   left: 50%;
   height: 85%
}

.road-demo .p3 {
   right: 16%
}

.road-demo .beam {
   position: absolute;
   width: 28%;
   height: 26%;
   background: linear-gradient(145deg, rgba(183, 206, 116, .38), transparent 75%);
   clip-path: polygon(0 0, 100% 55%, 0 100%)
}

.road-demo .b1 {
   left: 16%;
   top: 27%
}

.road-demo .b2 {
   left: 50%;
   top: 13%
}

.road-demo .b3 {
   right: -12%;
   top: 39%
}

.road-demo b {
   position: absolute;
   bottom: 13px;
   left: 50%;
   transform: translateX(-50%);
   font: 700 11px var(--mono)
}

.compare-rail {
   display: block
}

.compare-cols {
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-top: 40px
}

.compare-cols article {
   padding: 40px;
   border: 1px solid var(--ink)
}

.compare-cols article+article {
   border-left: 0
}

.compare-cols strong {
   font: 700 13px var(--mono);
   color: var(--cobalt)
}

.delivery-ribbon {
   display: block
}

.ribbon-steps {
   display: flex;
   overflow: auto;
   margin-top: 50px
}

.ribbon-steps span {
   min-width: 190px;
   padding: 25px 20px;
   border-left: 1px solid var(--ink);
   border-top: 6px solid var(--cobalt);
   font-weight: 750
}

.ribbon-steps span:nth-child(even) {
   border-top-color: var(--mint)
}

.advisory-layers {
   display: grid
}

.industry-index,
.challenge-index {
   padding: 0 var(--gutter) clamp(80px, 9vw, 140px)
}

.tier-head {
   margin-top: 80px;
   padding-top: 40px;
   border-top: 2px solid var(--ink)
}

.industry-index a,
.challenge-index a {
   display: grid;
   grid-template-columns: 70px 1fr 1.2fr 30px;
   gap: 25px;
   align-items: center;
   border-top: 1px solid var(--ink);
   padding: 24px 0
}

.industry-index span,
.challenge-index span {
   font: 700 11px var(--mono);
   color: var(--cobalt)
}

.industry-index h3,
.challenge-index h3 {
   font: 500 30px var(--serif);
   margin: 0
}

.industry-index p,
.challenge-index p {
   margin: 0;
   color: var(--muted)
}

.industry-portrait {
   display: grid;
   grid-template-columns: .45fr 1fr;
   gap: 8vw;
   background: white
}

.industry-portrait aside {
   position: sticky;
   top: 110px;
   align-self: start;
   border-top: 6px solid var(--cobalt);
   padding-top: 20px
}

.industry-portrait aside small {
   font: 700 10px var(--mono);
   color: var(--cobalt)
}

.industry-portrait aside strong {
   display: block;
   font: 500 clamp(45px, 5vw, 72px)/.96 var(--serif);
   margin: 10px 0;
   overflow-wrap: anywhere
}

.industry-portrait aside p {
   color: var(--muted)
}

.industry-portrait>div {
   max-width: 840px
}

.industry-portrait h2,
.industry-portrait h3 {
   font: 500 clamp(32px, 3.5vw, 52px)/1 var(--serif)
}

.industry-portrait p,
.industry-portrait li {
   font-size: 18px;
   color: var(--text-secondary)
}

.pressure-response {
   display: grid;
   grid-template-columns: .7fr 1.3fr;
   padding-top: 0
}

.pressure,
.response {
   padding: 60px 4vw;
   border-top: 1px solid var(--ink)
}

.pressure {
   background: var(--night);
   color: white
}

.pressure small,
.response small {
   font: 700 10px var(--mono);
   letter-spacing: .12em;
   color: var(--mint)
}

.pressure h2 {
   font: 500 clamp(48px, 5vw, 78px)/1 var(--serif)
}

.response h2,
.response h3 {
   font: 500 clamp(30px, 3vw, 46px)/1 var(--serif)
}

.response p,
.response li {
   font-size: 18px;
   color: var(--text-secondary)
}

.challenge-index+.final-cta {}

.project-ledger {
   background: white
}

.project-feature {
   display: grid;
   grid-template-columns: 1.2fr .8fr;
   gap: 0;
   border-top: 1px solid var(--ink);
   margin: 0
}

.project-feature:nth-child(even) {
   grid-template-columns: .8fr 1.2fr
}

.project-feature:nth-child(even) img {
   order: 2
}

.project-feature img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.project-feature div {
   padding: 55px
}

.project-feature small {
   font: 700 10px var(--mono);
   color: var(--cobalt)
}

.project-feature strong {
   display: block;
   font: 500 60px var(--serif);
   margin-top: 18px
}

.project-feature h2 {
   font: 500 35px var(--serif);
   margin: 8px 0
}

.project-feature p {
   color: var(--muted)
}

.manifesto {
   background: var(--night);
   color: white
}

.manifesto blockquote {
   font-size: clamp(55px, 7vw, 105px);
   line-height: .96;
   margin: 0;
   max-width: 1300px
}

.about-copy h2 {
   margin-top: 70px
}

.assessment-stage {
   display: grid;
   grid-template-columns: .75fr 1.25fr;
   gap: 7vw;
   background: white
}

.assessment-stage h2 {
   font: 500 clamp(42px, 4.5vw, 68px)/1 var(--serif)
}

.assessment-stage ol {
   padding-left: 22px
}

.lead-form {
   display: grid;
   gap: 18px;
   background: var(--brand-soft);
   padding: 28px
}

.form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px
}

.form-status {
   font-weight: 700
}

.hp {
   position: absolute;
   left: -9999px
}

.insight-empty {
   background: white;
   max-width: none
}

.insight-empty h2,
.legal-copy h2 {
   font: 500 clamp(44px, 5vw, 75px)/1 var(--serif)
}

.insight-empty p,
.legal-copy p {
   font-size: 18px;
   max-width: 850px;
   color: var(--muted)
}

.legal-copy {
   min-height: 500px
}

.mobile-sticky {
   position: fixed;
   z-index: 70;
   bottom: 12px;
   left: 12px;
   right: 12px;
   background: var(--cobalt);
   color: white;
   padding: 13px 16px;
   text-align: center;
   font-weight: 800;
   border-radius: 4px;
   box-shadow: 0 8px 30px rgba(16, 31, 44, .18)
}

@media(max-width:1000px) {
   .site-header {
      grid-template-columns: 1fr auto
   }

   .header-cta {
      display: none
   }

   .explore-btn {
      justify-self: end
   }

   .hero {
      grid-template-columns: 1fr;
      padding-top: 130px;
      min-height: auto
   }

   .hero-context {
      min-height: 360px
   }

   .hero-signal span {
      width: 55vw;
      height: 55vw
   }

   .energy-rings,
   .sun-field,
   .pulse-orbit,
   .route-map,
   .light-field,
   .decision-matrix {
      width: min(70vw, 520px)
   }

   .build-stack,
   .layer-stack {
      width: min(70vw, 500px)
   }

   .decision-board,
   .architecture-head,
   .lens-intro,
   .lens-layout,
   .decision-lab,
   .experience,
   .embedded-tool,
   .industry-portrait,
   .assessment-stage {
      grid-template-columns: 1fr
   }

   .decision-tabs,
   .lens-tabs {
      border-right: 0;
      border-bottom: 1px solid var(--ink)
   }

   .decision-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr
   }

   .decision-tabs button {
      padding: 18px 8px
   }

   .architecture-head {
      gap: 25px
   }

   .system-field {
      height: 430px
   }

   .solution-row {
      grid-template-columns: 55px 1fr 30px
   }

   .solution-row>strong {
      display: none
   }

   .project-item,
   .project-item:nth-child(n) {
      grid-column: span 6
   }

   .wave-line {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
   }

   .wave-line:before {
      display: none
   }

   .wave-line article {
      padding-top: 38px;
      border-top: 1px solid var(--line)
   }

   .wave-line article:before {
      top: -9px
   }

   .principles {
      grid-template-columns: 1fr 1fr
   }

   .project-feature,
   .project-feature:nth-child(even) {
      grid-template-columns: 1fr
   }

   .project-feature:nth-child(even) img {
      order: 0
   }

   .pressure-response {
      grid-template-columns: 1fr
   }

   .industry-portrait aside {
      position: static
   }

   .day-scene {
      grid-column: auto
   }

   .nav-grid {
      grid-template-columns: 1fr 1fr
   }

   .nav-grid section:nth-child(3) {
      grid-column: 1/-1;
      display: grid;
      grid-template-columns: repeat(3, 1fr)
   }

   .nav-grid section:nth-child(3) small {
      grid-column: 1/-1
   }

   .nav-grid a {
      font-size: 28px
   }
}

@media(max-width:680px) {
   :root {
      --gutter: 18px
   }

   .site-header {
      top: 8px;
      left: 10px;
      right: 10px;
      height: 54px;
      padding: 0 13px
   }

   .brand {
      font-size: 11px
   }

   .brand-mark {
      width: 29px;
      height: 29px
   }

   .hero {
      padding-top: 105px;
      padding-bottom: 50px
   }

   .hero h1 {
      font-size: clamp(49px, 14vw, 72px)
   }

   .hero-deck {
      font-size: 17px
   }

   .hero-context {
      min-height: 280px
   }

   .outcome-ribbon {
      overflow: auto;
      gap: 22px;
      justify-content: flex-start
   }

   .outcome-ribbon span {
      white-space: nowrap
   }

   section {
      padding: 70px var(--gutter)
   }

   .section-head h2 {
      font-size: 44px
   }

   .decision-tabs {
      grid-template-columns: 1fr
   }

   .decision-panel {
      padding: 32px 20px
   }

   .decision-panel h3 {
      font-size: 42px
   }

   .architecture-head h2 {
      font-size: 45px
   }

   .system-field {
      height: 470px
   }

   .system-field .hub {
      left: 39%;
      top: 43%;
      width: 72px;
      height: 72px
   }

   .system-field .battery {
      left: 38%
   }

   .system-field .grid,
   .system-field .solar {
      left: 3%
   }

   .system-field .facility,
   .system-field .critical,
   .system-field .gen {
      right: 3%
   }

   .solution-row {
      grid-template-columns: 44px 1fr 22px;
      gap: 12px
   }

   .solution-row h3 {
      font-size: 30px
   }

   .project-strip {
      display: flex;
      overflow: auto;
      scroll-snap-type: x mandatory
   }

   .project-item,
   .project-item:nth-child(n) {
      min-width: 84vw;
      scroll-snap-align: start
   }

   .lens-panel {
      padding: 30px 20px;
      min-height: 330px
   }

   .lens-panel h3 {
      font-size: 42px
   }

   .calc-fields,
   .form-grid {
      grid-template-columns: 1fr
   }

   .decision-lab {
      padding-left: var(--gutter);
      padding-right: var(--gutter)
   }

   .lab-tool {
      padding: 20px 15px
   }

   .wave-line {
      display: flex;
      overflow: auto;
      scroll-snap-type: x mandatory
   }

   .wave-line article {
      min-width: 72vw;
      scroll-snap-align: start
   }

   .principles {
      grid-template-columns: 1fr
   }

   .final-cta {
      min-height: 500px
   }

   .final-cta h2 {
      font-size: 58px
   }

   .footer-lead {
      align-items: flex-start;
      flex-direction: column;
      gap: 25px
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr
   }

   .footer-grid>div {
      grid-column: 1/-1
   }

   .mobile-sticky {
      display: block
   }

   .site-footer {
      padding-bottom: 88px
   }

   .nav-layer {
      padding: 17px 18px 25px;
      overflow: auto
   }

   .nav-grid {
      display: block;
      padding: 34px 0
   }

   .nav-grid section {
      margin-bottom: 34px
   }

   .nav-grid section:nth-child(3) {
      display: flex
   }

   .nav-grid a {
      font-size: 25px
   }

   .nav-foot {
      flex-direction: column;
      gap: 8px
   }

   .experience h2,
   .embedded-tool h2 {
      font-size: 42px
   }

   .load-selector {
      grid-template-columns: 1fr
   }

   .duration-track {
      grid-template-columns: 1fr 1fr
   }

   .compare-cols {
      grid-template-columns: 1fr
   }

   .compare-cols article+article {
      border-left: 1px solid var(--ink);
      border-top: 0
   }

   .industry-index a,
   .challenge-index a {
      grid-template-columns: 35px 1fr 20px
   }

   .industry-index a p,
   .challenge-index a p {
      display: none
   }

   .industry-portrait aside strong {
      font-size: 48px
   }

   .pressure,
   .response {
      padding: 40px 20px
   }

   .project-feature div {
      padding: 30px 20px
   }

   .project-feature strong {
      font-size: 46px
   }

   .assessment-stage {
      padding-left: var(--gutter);
      padding-right: var(--gutter)
   }

   .lead-form {
      padding: 20px 15px
   }

   .route-map,
   .light-field {
      height: 300px
   }

   .footer-base {
      flex-wrap: wrap
   }
}

.product-visual-band {
   display: grid;
   grid-template-columns: minmax(0, .82fr) minmax(460px, 1.18fr);
   gap: clamp(35px, 6vw, 100px);
   align-items: center;
   padding: clamp(70px, 9vw, 140px) var(--gutter);
   background: var(--surface-highlight);
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line)
}

.product-visual-band h2 {
   font-family: var(--serif);
   font-size: clamp(38px, 4.5vw, 70px);
   line-height: .99;
   margin: 12px 0 24px;
   max-width: 800px
}

.product-visual-band>div>p:not(.eyebrow) {
   max-width: 720px;
   color: var(--text-secondary);
   font-size: 18px
}

.product-visual-band figure {
   margin: 0
}

.product-visual-band img {
   width: 100%;
   height: auto;
   display: block;
   border: 1px solid var(--line);
   border-radius: 22px;
   box-shadow: 0 22px 60px rgba(16, 31, 44, .09)
}

.product-visual-band figcaption {
   font-size: 13px;
   color: var(--muted);
   margin-top: 10px
}

.security-band {
   background: var(--paper)
}

.security-usecases {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   border-bottom: 1px solid var(--line);
   border-top: 1px solid var(--line)
}

.security-usecases article {
   padding: clamp(38px, 5vw, 72px) var(--gutter);
   border-right: 1px solid var(--line);
   background: var(--white)
}

.security-usecases article:last-child {
   border-right: 0
}

.security-usecases small,
.related-infrastructure small {
   font-size: 11px;
   letter-spacing: .16em;
   color: var(--energy);
   font-weight: 800
}

.security-usecases h3 {
   font-family: var(--serif);
   font-size: clamp(26px, 2.4vw, 38px);
   margin: 12px 0
}

.security-usecases p {
   color: var(--text-secondary)
}

.related-infrastructure {
   display: grid;
   grid-template-columns: 1.3fr .7fr;
   gap: 50px;
   padding: clamp(65px, 8vw, 115px) var(--gutter);
   background: var(--surface-highlight);
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line)
}

.related-infrastructure h2 {
   font-family: var(--serif);
   font-size: clamp(34px, 4vw, 58px);
   margin: 12px 0 18px
}

.related-infrastructure p {
   color: var(--text-secondary);
   max-width: 720px
}

.related-infrastructure nav {
   display: flex;
   flex-direction: column;
   justify-content: center
}

.related-infrastructure nav a {
   padding: 18px 0;
   border-bottom: 1px solid var(--line-strong);
   font-weight: 700;
   color: var(--brand)
}

.security-field {
   position: relative;
   width: min(520px, 90%);
   height: 370px;
   margin: auto;
   border: 1px solid rgba(255, 255, 255, .18);
   border-radius: 50% 50% 18px 18px;
   background: linear-gradient(180deg, rgba(183, 206, 116, .08), rgba(16, 31, 44, .1));
   overflow: hidden
}

.security-field:before {
   content: "";
   position: absolute;
   left: 50%;
   bottom: 45px;
   width: 8px;
   height: 210px;
   background: var(--paper);
   transform: translateX(-50%)
}

.security-field:after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: 230px;
   width: 150px;
   height: 55px;
   border: 7px solid var(--paper);
   border-radius: 28px;
   transform: translateX(-2%)
}

.security-field .security-sun {
   position: absolute;
   right: 54px;
   top: 44px;
   width: 72px;
   height: 72px;
   border-radius: 50%;
   background: var(--bronze)
}

.security-field .cam {
   position: absolute;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: var(--energy-light);
   box-shadow: 0 0 0 8px rgba(183, 206, 116, .12)
}

.security-field .cam-a {
   left: 90px;
   bottom: 90px
}

.security-field .cam-b {
   right: 95px;
   bottom: 105px
}

.security-field em {
   position: absolute;
   left: 50%;
   top: 86px;
   width: 170px;
   height: 70px;
   border-top: 2px dashed var(--energy-light);
   border-radius: 50%;
   transform: translateX(-50%)
}

.security-field b {
   position: absolute;
   left: 35px;
   top: 35px;
   color: var(--energy-light);
   font-size: 12px;
   letter-spacing: .14em
}

.service-narrative h3 {
   scroll-margin-top: 100px
}

@media(max-width:900px) {

   .product-visual-band,
   .related-infrastructure {
      grid-template-columns: 1fr
   }

   .product-visual-band {
      padding-left: var(--gutter);
      padding-right: var(--gutter)
   }

   .security-usecases {
      grid-template-columns: 1fr
   }

   .security-usecases article {
      border-right: 0;
      border-bottom: 1px solid var(--line)
   }

   .security-usecases article:last-child {
      border-bottom: 0
   }
}

@media(prefers-reduced-motion:reduce) {
   * {
      scroll-behavior: auto !important;
      animation: none !important;
      transition: none !important
   }
}

:focus-visible {
   outline: 3px solid var(--ink);
   outline-offset: 3px
}

[hidden] {
   display: none !important
}

.eco-contact-info {
   padding-top: 15px;
}

/* ---------- EXPONENT NRG brand colour states (Brand & Website Guide v1.0) — colour only ---------- */
.btn.primary:hover {
   background: var(--brand-hover)
}

.btn.primary:active {
   background: var(--brand-active)
}

.btn.secondary {
   color: var(--spruce);
   border-color: var(--spruce)
}

.btn.secondary:hover {
   background: var(--brand-soft)
}

.response small {
   color: var(--spruce)
}

.final-cta p {
   color: #BAC6D0
}