[hidden] {
   display: none !important
}

.visual-photo {
   margin: 0;
   position: relative;
   min-width: 0
}

.visual-photo img {
   width: 100%;
   height: auto;
   aspect-ratio: 3/2;
   object-fit: cover;
   background: var(--brand-soft)
}

.visual-photo figcaption {
   font-size: 12px;
   line-height: 1.4;
   padding: 9px 12px;
   color: #526170;
   background: #E9EDF0
}

.scene-hero {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   justify-content: center
}

.scene-hero img {
   min-height: 430px;
   height: 100%;
   max-height: 650px;
   object-fit: cover;
   border-radius: 3px 3px 0 0
}

.eco-hero:has(.scene-hero) {
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
   gap: 48px;
   padding-top: 52px;
   padding-bottom: 52px
}

.eco-hero:has(.scene-hero) h1 {
   font-size: clamp(38px, 4.15vw, 66px)
}

.visual-switcher {
   margin: 28px 0
}

.visual-switches {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 24px
}

.visual-switches button,
.mode-controls button {
   background: white;
   border: 1px solid var(--line);
   padding: 12px 17px;
   min-height: 48px;
   border-radius: 3px;
   line-height: 1.3;
   text-align: left;
   color: var(--ink);
   font-size: 15px;
   font-weight: 650
}

.visual-switches button[aria-pressed=true],
.mode-controls button[aria-pressed=true] {
   background: var(--brand-soft);
   border-color: var(--brand);
   color: var(--ink);
   box-shadow: inset 0 0 0 1px var(--brand)
}

.visual-switches button:hover {
   border-color: var(--brand)
}

.visual-note {
   font-size: 14px;
   line-height: 1.6;
   color: var(--text-secondary);
   max-width: 1000px
}

.visual-index {
   font: 500 72px/1 var(--serif);
   color: var(--brand);
   opacity: .75
}

.impact-story .visual-switches {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   counter-reset: impact
}

.impact-story .visual-switches button {
   position: relative;
   border-top: 3px solid var(--brand);
   padding: 24px 20px;
   counter-increment: impact
}

.impact-story .visual-switches button:before {
   content: '0' counter(impact);
   display: block;
   margin-bottom: 20px;
   font: 14px var(--mono);
   opacity: .75
}

.impact-story .visual-switches button:not(:last-child):after {
   content: '→';
   position: absolute;
   right: -14px;
   top: 42%;
   z-index: 1;
   color: var(--brand);
   background: var(--paper);
   border-radius: 30px
}

.impact-copy {
   display: grid;
   grid-template-columns: 100px 1fr;
   gap: 24px;
   padding: 28px 32px;
   background: var(--brand-soft);
   border-left: 4px solid var(--brand)
}

.impact-copy h3 {
   font-size: 30px
}

.solution-explorer {
   display: grid;
   grid-template-columns: 255px minmax(0, 1fr);
   gap: 26px
}

.solution-explorer .visual-switches {
   flex-direction: column;
   margin: 0;
   gap: 5px
}

.solution-explorer .visual-switches button {
   border: 0;
   border-bottom: 1px solid var(--line);
   border-radius: 0;
   background: transparent;
   padding: 16px 18px;
   font-size: 16px
}

.solution-explorer .visual-switches button[aria-pressed=true] {
   background: var(--brand-soft);
   color: var(--ink);
   box-shadow: inset 3px 0 0 var(--brand)
}

.explorer-scene {
   display: grid;
   grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
   background: var(--night);
   color: #fff;
   min-height: 530px
}

.explorer-scene .visual-photo {
   display: flex;
   flex-direction: column
}

.explorer-scene .visual-photo img {
   flex: 1;
   height: 480px;
   object-fit: cover
}

.explorer-scene .visual-photo figcaption {
   background: #172B3A;
   color: #BAC6D0
}

.explorer-copy {
   padding: 32px 28px;
   align-self: center
}

.explorer-copy .eyebrow {
   color: #BAC6D0
}

.explorer-copy h3 {
   font: 500 35px/1.15 var(--serif);
   margin-bottom: 22px
}

.explorer-copy p {
   color: #F4F6F8
}

.explorer-copy .btn {
   background: #00664f;
   color: #fff
}

.outcome-explorer .visual-switches {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr))
}

.outcome-view {
   border-top: 4px solid var(--brand);
   padding: 38px;
   background: var(--brand-soft);
   max-width: none
}

.outcome-view h3 {
   font: 500 38px/1.15 var(--serif);
   margin: 24px 0 16px
}

.outcome-route {
   font-family: var(--mono);
   font-size: 15px;
   line-height: 1.8;
   color: var(--brand)
}

.industry-scene {
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
   background: #fff;
   border: 1px solid var(--line)
}

.industry-scene .visual-photo {
   display: flex;
   flex-direction: column
}

.industry-scene .visual-photo img {
   height: 100%;
   min-height: 500px;
   flex: 1
}

.industry-insight {
   padding: 36px;
   display: flex;
   align-items: flex-start;
   flex-direction: column
}

.industry-insight h3 {
   font: 500 32px/1.2 var(--serif)
}

.industry-insight .btn {
   margin: 22px 0 18px
}

.solution-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px
}

.solution-chips a {
   border: 1px solid var(--line);
   background: var(--paper);
   padding: 8px 12px;
   font-size: 14px
}

.process-timeline .visual-switches {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 0;
   border-bottom: 2px solid var(--line)
}

.process-timeline .visual-switches button {
   border: 0;
   border-bottom: 3px solid transparent;
   border-radius: 0;
   padding: 16px;
   text-align: center
}

.process-timeline .visual-switches button[aria-pressed=true] {
   border-bottom-color: var(--brand)
}

.process-view {
   display: grid;
   grid-template-columns: 120px 1fr;
   gap: 24px;
   border-left: 3px solid var(--brand);
   padding: 32px;
   background: var(--brand-soft)
}

.decision-support {
   background: var(--night);
   padding: 24px
}

.decision-support>.visual-switches {
   gap: 6px
}

.decision-support>.visual-switches button {
   background: transparent;
   color: #F4F6F8;
   border-color: #82939F
}

.decision-support>.visual-switches button[aria-pressed=true] {
   background: #243A4A;
   color: #F4F6F8;
   border-color: #B7CE74;
   box-shadow: inset 0 0 0 1px #B7CE74
}

.decision-support .eco-tool {
   max-width: none;
   border: 0
}

.decision-support .eco-fields {
   grid-template-columns: repeat(4, minmax(0, 1fr))
}

.decision-support .eco-result {
   min-height: 112px
}

.credibility-scene {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 48px;
   align-items: center
}

.credibility-scene h3 {
   font: 500 36px/1.15 var(--serif)
}

.discipline-list {
   list-style: none;
   padding: 0
}

.discipline-list li {
   padding: 18px 0;
   border-top: 1px solid var(--line)
}

.discipline-list strong,
.discipline-list span {
   display: block
}

.discipline-list span {
   color: var(--muted);
   margin-top: 4px
}

.smart-application {
   position: relative;
   display: grid;
   grid-template-columns: 1.3fr .7fr;
   background: var(--brand-soft);
   align-items: stretch
}

.smart-application>.visual-photo {
   display: flex;
   flex-direction: column
}

.smart-application>.visual-photo img {
   height: 100%;
   min-height: 500px;
   object-fit: cover;
   flex: 1
}

.smart-selector {
   padding: 28px;
   margin: 0
}

.smart-selector .visual-switches {
   flex-direction: column
}

.smart-detail {
   padding-top: 20px;
   border-top: 1px solid var(--line)
}

.smart-detail h3 {
   font: 500 30px/1.2 var(--serif)
}

.visual-final {
   display: grid;
   grid-template-columns: 1fr 1fr;
   background: var(--night);
   color: #fff;
   gap: 0;
   position: relative;
   border-bottom: 1px solid #40596B;
}

.visual-final .visual-photo img {
   height: 100%;
   min-height: 420px;
   max-height: 650px;
   object-fit: cover
}

.visual-final .visual-photo figcaption {
   background: var(--night);
   color: #BAC6D0
}

.visual-final>div {
   align-self: center;
   padding: 64px var(--gutter)
}

.visual-final h2 {
   font: 500 clamp(34px, 3.6vw, 54px)/1.1 var(--serif);
   margin: 0
}

.visual-final .eyebrow {
   color: #BAC6D0
}

.visual-final p {
   color: #F4F6F8
}

.visual-final .btn {
   background: #00664f;
   color: #fff;
   margin: 14px 20px 20px 0
}

.visual-final .text-link {
   display: inline-block;
   font-size: 15px
}

.architecture {
   padding: 28px;
   background: var(--night);
   color: #F4F6F8;
   border: 1px solid #40596B
}

.architecture .mode-controls {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
}

.architecture .mode-controls button {
   background: transparent;
   color: #F4F6F8;
   border-color: #82939F
}

.architecture .mode-controls button[aria-pressed=true] {
   background: #243A4A;
   color: #F4F6F8;
   border-color: #B7CE74;
   box-shadow: inset 0 0 0 1px #B7CE74
}

.energy-map {
   position: relative;
   height: 420px;
   margin: 36px 0;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: 110px 100px 110px;
   gap: 45px 18px
}

.energy-lines {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 0
}

.energy-lines path {
   fill: none;
   stroke: #82939F;
   stroke-width: 3
}

.energy-lines .control-line {
   stroke: #BAC6D0;
   stroke-width: 2;
   stroke-dasharray: 4 8
}

.energy-lines text {
   font: 12px monospace;
   fill: #BAC6D0;
   letter-spacing: 2px
}

.energy-lines [data-flow] {
   opacity: .2
}

.energy-lines [data-flow].flow-active {
   opacity: 1;
   stroke: #8DDBAF;
   stroke-dasharray: 12 8;
   animation: energy-flow 2.2s linear infinite
}

.energy-lines [data-flow].flow-conditional {
   opacity: .7;
   stroke: #F1D08A;
   stroke-dasharray: 5 8
}

.energy-map[data-mode-state=surplus] [data-flow=bess] {
   animation-direction: reverse
}

.architecture.paused .energy-lines path {
   animation-play-state: paused
}

.energy-node {
   z-index: 1;
   align-self: start;
   background: #172B3A;
   color: #fff;
   border: 1px solid #82939F;
   border-top: 3px solid #B7CE74;
   border-radius: 5px;
   min-height: 96px;
   padding: 18px 12px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 5px
}

.energy-node span {
   font-size: 18px;
   font-weight: 700
}

.energy-node small {
   font-size: 13px;
   line-height: 1.4;
   color: #BAC6D0
}

.energy-node[aria-pressed=true] {
   background: #E5F0EA;
   color: var(--night);
   border-color: #fff
}

.energy-node[aria-pressed=true] small {
   color: #526170
}

.node-grid {
   grid-area: 1/1
}

.node-solar {
   grid-area: 1/2
}

.node-bess {
   grid-area: 1/3
}

.node-generator {
   grid-area: 1/4
}

.node-ems {
   grid-area: 3/1;
   max-width: 220px;
   align-self: center
}

.node-loads {
   grid-area: 3/2/4/4;
   align-self: center
}

.architecture-detail {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 32px;
   border-top: 1px solid #40596B;
   padding-top: 28px
}

.architecture-detail .eyebrow {
   color: #BAC6D0
}

.architecture-detail h3 {
   font-size: 25px
}

.architecture-detail p {
   color: #F4F6F8
}

.architecture>.visual-note {
   color: #BAC6D0;
   margin-top: 24px
}

.motion-control {
   border: 1px solid #82939F;
   background: transparent;
   color: #fff;
   border-radius: 3px;
   padding: 10px 14px;
   min-height: 44px;
   font-size: 14px
}

@keyframes energy-flow {
   to {
      stroke-dashoffset: -40
   }
}

.visual-note a {
   color: inherit
}

@media(max-width:1100px) {
   .explorer-scene {
      grid-template-columns: 1fr;
      min-height: 0
   }

   .explorer-scene .visual-photo img {
      height: 350px;
      max-height: 350px
   }

   .explorer-copy {
      padding: 28px
   }

   .decision-support .eco-fields {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .industry-insight {
      padding: 26px
   }

   .industry-insight h3 {
      font-size: 28px
   }

   .smart-application {
      grid-template-columns: 1fr 1fr
   }

   .energy-node span {
      font-size: 16px
   }

   .energy-node small {
      font-size: 12px
   }

   .credibility-scene {
      gap: 28px
   }
}

@media(max-width:760px) {
   .eco-hero:has(.scene-hero) {
      grid-template-columns: 1fr;
      gap: 30px;
      padding: 36px 20px
   }

   .scene-hero img {
      min-height: 280px;
      height: 320px
   }

   .eco-hero:has(.scene-hero) h1 {
      font-size: 40px
   }

   .visual-switches {
      gap: 6px
   }

   .visual-switches button {
      font-size: 14px;
      padding: 12px
   }

   .impact-story .visual-switches {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px
   }

   .impact-story .visual-switches button {
      padding: 18px 12px
   }

   .impact-story .visual-switches button:after {
      display: none
   }

   .impact-copy,
   .process-view {
      grid-template-columns: 1fr;
      padding: 24px;
      gap: 18px
   }

   .visual-index {
      font-size: 48px
   }

   .impact-copy h3 {
      font-size: 28px
   }

   .solution-explorer {
      display: block
   }

   .solution-explorer .visual-switches {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-bottom: 18px
   }

   .solution-explorer .visual-switches button {
      font-size: 14px;
      padding: 14px 12px;
      border: 1px solid var(--line)
   }

   .explorer-scene .visual-photo img {
      height: 280px;
      max-height: 280px
   }

   .explorer-copy h3 {
      font-size: 30px
   }

   .outcome-explorer .visual-switches {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .outcome-view {
      padding: 24px
   }

   .outcome-view h3 {
      font-size: 30px
   }

   .outcome-route {
      font-size: 14px
   }

   .industry-scene,
   .credibility-scene,
   .smart-application,
   .visual-final {
      grid-template-columns: 1fr
   }

   .industry-scene .visual-photo img {
      min-height: 0;
      height: 280px
   }

   .industry-insight {
      padding: 24px
   }

   .industry-insight h3 {
      font-size: 28px
   }

   .process-timeline .visual-switches {
      grid-template-columns: repeat(3, minmax(0, 1fr))
   }

   .process-timeline .visual-switches button {
      padding: 14px 8px
   }

   .decision-support {
      padding: 12px
   }

   .decision-support .eco-fields {
      grid-template-columns: 1fr
   }

   .decision-support .visual-switches {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .credibility-scene h3 {
      font-size: 30px
   }

   .smart-application>.visual-photo img {
      min-height: 0;
      height: 300px
   }

   .smart-selector {
      padding: 24px
   }

   .smart-selector .visual-switches {
      display: grid;
      grid-template-columns: 1fr
   }

   .visual-final .visual-photo img {
      min-height: 0;
      height: 280px
   }

   .visual-final>div {
      padding: 36px 20px
   }

   .architecture {
      padding: 20px 14px
   }

   .mode-controls {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .mode-controls button {
      font-size: 14px;
      padding: 12px
   }

   .energy-map {
      height: auto;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto;
      gap: 12px;
      margin: 26px 0
   }

   .energy-node {
      grid-area: auto !important;
      align-self: stretch;
      min-height: 110px;
      padding: 14px 8px
   }

   .node-ems {
      max-width: none
   }

   .energy-lines {
      display: none
   }

   .energy-node small {
      font-size: 13px
   }

   .energy-map:after {
      content: 'Sources ↔ controlled AC bus → prioritized loads. EMS coordinates control signals.';
      grid-column: 1/-1;
      font-size: 14px;
      border-top: 1px solid #40596B;
      padding-top: 18px;
      color: #F4F6F8
   }

   .architecture-detail {
      grid-template-columns: 1fr;
      gap: 20px
   }

   .architecture-detail h3 {
      font-size: 23px
   }

   .visual-photo figcaption {
      font-size: 12px
   }

   .visual-final .btn {
      display: flex;
      margin-right: 0
   }

   .outcome-view,
   .smart-detail {
      min-height: 220px
   }
}

@media(prefers-reduced-motion:reduce) {
   .energy-lines [data-flow].flow-active {
      animation: none
   }

   .motion-control {
      display: none
   }
}

@media(max-width:760px) {
   .architecture .motion-control {
      display: none
   }
}

.node-base {
   grid-area: 3/4;
   align-self: center
}

.architecture .mode-controls {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr))
}

.operation-compare {
   display: grid;
   grid-template-columns: 1fr 1fr;
   border: 1px solid var(--line);
   margin-top: 28px
}

.operation-compare>div {
   padding: 26px;
   background: var(--paper)
}

.operation-compare>div+div {
   background: var(--brand-soft);
   border-left: 1px solid var(--line)
}

.operation-compare h3 {
   font-size: 23px
}

.operation-chain {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   font-size: 14px
}

.operation-chain span {
   padding: 9px 12px;
   border: 1px solid var(--line);
   background: white
}

.protocol-details {
   border-top: 1px solid #40596B;
   padding-top: 16px;
   margin-top: 20px
}

.protocol-details summary {
   color: #F4F6F8
}

.protocol-details a {
   text-decoration: underline
}

.assurance-table {
   width: 100%;
   border-collapse: collapse;
   background: white;
   font-size: 15px
}

.assurance-table th,
.assurance-table td {
   text-align: left;
   padding: 18px;
   vertical-align: top;
   border-bottom: 1px solid var(--line)
}

.assurance-table th {
   background: var(--brand-soft)
}

.assurance-scroll {
   overflow-x: auto
}

.smart-config {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 16px;
   margin-top: 24px
}

.smart-config>div {
   border-top: 3px solid var(--brand);
   background: #fff;
   padding: 22px
}

.smart-config strong {
   display: block;
   margin-bottom: 8px
}

@media(max-width:760px) {

   .operation-compare,
   .smart-config {
      grid-template-columns: 1fr
   }

   .operation-compare>div+div {
      border-left: 0;
      border-top: 1px solid var(--line)
   }

   .architecture .mode-controls {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .assurance-table th,
   .assurance-table td {
      padding: 12px;
      min-width: 145px
   }
}

.visual-photo picture {
   display: block;
   min-width: 0
}

.scene-hero picture {
   flex: 1;
   display: flex
}

.scene-hero picture img {
   min-height: 430px
}

.explorer-scene .visual-photo picture,
.industry-scene .visual-photo picture,
.smart-application>.visual-photo picture {
   flex: 1;
   display: flex
}

.visual-final .visual-photo picture {
   height: calc(100% - 40px)
}

@media(max-width:760px) {
   .scene-hero picture img {
      min-height: 280px
   }

   .visual-final .visual-photo picture {
      height: auto
   }
}

/* ==========================================================================
   Integrated Energy Architecture — mobile/tablet flow diagram (<=900px)
   Sources (2x2) -> animated controlled AC bus -> loads, EMS below.
   Each tile shows a live status chip (Active / Conditional / Standby) set by visuals.js,
   so switching operating mode visibly changes the diagram on phones, not just the text.
   ========================================================================== */
@media(max-width:900px) {
   .energy-lines {
      display: none
   }

   .energy-node {
      align-self: stretch
   }

   .architecture {
      padding: 18px 14px
   }

   /* one-line scrollable mode picker instead of three rows of buttons */
   .architecture .mode-controls {
      display: flex !important;
      flex-wrap: nowrap;
      gap: 8px;
      overflow-x: auto;
      margin: 0 -14px;
      padding: 2px 14px 10px;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      overscroll-behavior-x: contain
   }

   .architecture .mode-controls::-webkit-scrollbar {
      display: none
   }

   .architecture .mode-controls button {
      flex: 0 0 auto;
      white-space: nowrap;
      min-height: 44px;
      padding: 10px 16px;
      scroll-snap-align: center
   }

   .energy-map {
      height: auto;
      margin: 14px 0 8px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: none;
      grid-template-areas: "src1 src2" "src3 src4" "bus bus" "ld1 ld2" "ems ems" "note note";
      gap: 10px
   }

   .energy-map .node-grid {
      grid-area: src1 !important
   }

   .energy-map .node-solar {
      grid-area: src2 !important
   }

   .energy-map .node-bess {
      grid-area: src3 !important
   }

   .energy-map .node-generator {
      grid-area: src4 !important
   }

   .energy-map .node-loads {
      grid-area: ld1 !important
   }

   .energy-map .node-base {
      grid-area: ld2 !important
   }

   .energy-map .node-ems {
      grid-area: ems !important;
      border-style: dashed
   }

   .energy-map:before {
      content: '\25BC   CONTROLLED AC BUS   \25BC';
      grid-area: bus;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      margin: 2px 0;
      font: 600 11px/1 monospace;
      letter-spacing: .16em;
      color: #BAC6D0;
      text-align: center;
      background: linear-gradient(90deg, #8DDBAF 50%, transparent 0) 0 0/20px 3px repeat-x, linear-gradient(90deg, #8DDBAF 50%, transparent 0) 0 100%/20px 3px repeat-x;
      animation: bus-flow 1.6s linear infinite
   }

   @keyframes bus-flow {
      to {
         background-position: 20px 0, 20px 100%
      }
   }

   .architecture.paused .energy-map:before {
      animation-play-state: paused
   }

   .energy-map:after {
      content: 'Green = active path. Gold = conditional. Dashed = control signals, not power.';
      grid-area: note;
      font-size: 13px;
      line-height: 1.5;
      border-top: 1px solid #40596B;
      padding-top: 14px;
      color: #F4F6F8
   }

   .energy-node {
      min-height: 100px;
      padding: 12px 8px;
      gap: 3px;
      position: relative
   }

   .energy-node span {
      font-size: 15px;
      line-height: 1.25
   }

   .energy-node small {
      font-size: 12px
   }

   .energy-node:after {
      content: attr(data-status);
      margin-top: 6px;
      padding: 3px 9px;
      border: 1px solid #82939F;
      border-radius: 999px;
      background: #172B3A;
      color: #BAC6D0;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .07em;
      line-height: 1.3;
      text-transform: uppercase
   }

   .energy-node[data-state=active] {
      border-color: #8DDBAF
   }

   .energy-node[data-state=active]:after {
      background: #8DDBAF;
      border-color: #8DDBAF;
      color: #101F2C
   }

   .energy-node[data-state=conditional] {
      border-color: #F1D08A
   }

   .energy-node[data-state=conditional]:after {
      background: transparent;
      border-color: #F1D08A;
      color: #F1D08A
   }

   .energy-node[aria-pressed=true]:after {
      background: var(--night);
      border-color: var(--night);
      color: #fff
   }

   .energy-node[data-state=conditional][aria-pressed=true]:after {
      background: #FFF2D6;
      border-color: #805400;
      color: #805400
   }

   .energy-node[data-state=standby]:not([aria-pressed=true]),
   .energy-node[data-state=shed]:not([aria-pressed=true]) {
      opacity: .72
   }

   .energy-node[data-state=control]:after {
      border-style: dashed
   }

   /* scenario text first (it reacts to the mode buttons), component text second */
   .architecture-detail {
      display: flex;
      flex-direction: column;
      gap: 22px;
      padding-top: 20px
   }

   .architecture-detail>div:nth-child(2) {
      order: -1
   }

   .architecture>.visual-note {
      font-size: 13px;
      line-height: 1.55
   }
}

@media(max-width:380px) {
   .energy-node span {
      font-size: 14px
   }

   .energy-node small {
      font-size: 11.5px
   }
}

@media(min-width:561px) and (max-width:900px) {
   .architecture {
      padding: 24px 22px
   }

   .architecture .mode-controls {
      margin: 0 -22px;
      padding: 2px 22px 10px
   }

   .energy-map {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-areas: "src1 src2 src3 src4" "bus bus bus bus" "ems ld1 ld1 ld2" "note note note note"
   }

   .energy-map .node-ems {
      border-style: dashed
   }

   .energy-node span {
      font-size: 16px
   }

   .architecture-detail {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px
   }
}

/* Quality & lifecycle table: stack as cards on phones instead of hiding the 3rd column off-screen */
@media(max-width:760px) {
   .assurance-scroll {
      overflow: visible
   }

   .assurance-table,
   .assurance-table tbody,
   .assurance-table tr,
   .assurance-table td {
      display: block;
      width: 100%
   }

   .assurance-table {
      background: transparent
   }

   .assurance-table thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap
   }

   .assurance-table tr {
      background: #fff;
      border: 1px solid var(--line);
      border-top: 3px solid var(--brand);
      margin-bottom: 14px
   }

   .assurance-table td {
      min-width: 0;
      padding: 12px 16px;
      border-bottom: 1px solid var(--line)
   }

   .assurance-table td:last-child {
      border-bottom: 0
   }

   .assurance-table td:first-child {
      background: var(--brand-soft);
      font-weight: 720;
      font-size: 16px
   }

   .assurance-table td:nth-child(n+2):before {
      display: block;
      margin-bottom: 4px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted)
   }

   .assurance-table td:nth-child(2):before {
      content: 'Evidence to establish'
   }

   .assurance-table td:nth-child(3):before {
      content: 'Decision it supports'
   }
}

/* ---------- EXPONENT NRG brand colour states (Brand & Website Guide v1.0) — colour only ---------- */
.visual-switches button:hover,
.mode-controls button:hover {
   border-color: var(--brand)
}

.explorer-copy .btn:hover,
.visual-final .btn:hover {
   background: #00664F
}

.explorer-copy .btn:active,
.visual-final .btn:active {
   background: #005844
}

.architecture .mode-controls button:hover,
.decision-support>.visual-switches button:hover {
   background: #243A4A;
   border-color: #B7CE74
}

.explorer-copy .eyebrow,
.visual-final .eyebrow,
.architecture-detail .eyebrow {
   color: #B7CE74
}