/* All solar-field rules are scoped to this project. The cube renderer stays shared. */
.hst-page .identity-stage { height: 0; }
.hst-page [data-page-content] { padding-top: 0; }
.hst-page .cube-canvas, .hst-page .glass-scrim { opacity: .14; }
.hst-page .site-nav, .hst-page .site-footer, .hst-page .project-float { transition: opacity 1400ms ease-in-out, visibility 0s; }
.hst-page:not(.project-intro-ready) .site-nav, .hst-page:not(.project-intro-ready) .site-footer, .hst-page:not(.project-intro-ready) .project-float { opacity: 0; visibility: hidden; pointer-events: none; }
.hst-page { --hero-banner-text: #585c71; }
.rhc-page { --hero-banner-text: #fff; }
.hst-page.project-hero-under-nav .site-nav nav > a[data-section], .hst-page.project-hero-under-nav .about-menu > a,
.rhc-page.project-hero-under-nav .site-nav nav > a[data-section], .rhc-page.project-hero-under-nav .about-menu > a { color: var(--hero-banner-text); }
.hst-page.project-hero-under-nav .site-nav nav > a[data-section]::after, .hst-page.project-hero-under-nav .about-menu > a::after,
.rhc-page.project-hero-under-nav .site-nav nav > a[data-section]::after, .rhc-page.project-hero-under-nav .about-menu > a::after { background: var(--hero-banner-text); }
.hst-page.project-hero-under-nav .work-menu > a, .rhc-page.project-hero-under-nav .work-menu > a { color: var(--navy); }
.hst-page.project-hero-under-nav .work-menu > a::after, .rhc-page.project-hero-under-nav .work-menu > a::after { background: var(--navy); }
.hst-page.project-hero-under-footer .footer-inner > span, .rhc-page.project-hero-under-footer .footer-inner > span { color: var(--hero-banner-text); }
.hst-page.project-hero-under-footer .footer-inner a, .rhc-page.project-hero-under-footer .footer-inner a { color: var(--navy); }
.hst-hero { min-height: max(860px,100svh); position: relative; }
.hst-hero > picture, .hst-hero > picture > img { display: block; width: 100%; height: 100%; }
.hst-hero > picture { position: absolute; inset: 0; }
.hst-hero > picture > img { object-fit: cover; }
.hst-hero [data-hero-card] { top: 188px; }
.hst-hero .project-tags li { color: #fff; border-color: rgba(255,255,255,.38); }
.rhc-hero .project-tags li { color: #fff; border-color: rgba(255,255,255,.38); }
.hst-hero-stats { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 24px; padding-top: 17px; }
.hst-hero-stats span { font-size: .61rem; line-height: 1.4; }
.hst-hero-stats strong { display: block; font-size: 1.06rem; font-weight: 500; }
.hst-page .case-section { width: min(1220px,calc(100% - 512px)); margin-inline: auto; }
.hst-page .case-summary { max-width: 850px; }
.hst-pattern-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; align-items: center; margin-top: 36px; }
.hst-pattern-panel, .hst-workspace { border: 1px solid var(--line); background: var(--paper); }
.hst-pattern-panel { padding: 16px; }
.hst-canvas { display: block; width: 100%; aspect-ratio: 1; background: var(--paper); }
.hst-pattern-copy p { color: var(--muted); font-size: .84rem; }
.hst-pattern-copy dl { margin: 26px 0; }
.hst-pattern-copy dl div { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding: 10px 0; font-size: .74rem; }
.hst-pattern-copy dt { color: var(--muted); }
.hst-pattern-copy dd { margin: 0; color: var(--navy); text-align: right; }
.hst-pattern-heading, .hst-field-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.hst-pattern-heading p, .hst-field-heading p { margin: 0; font-size: .68rem; color: var(--navy); }
.hst-button { padding: 9px 16px; background: var(--navy); color: white; border: 1px solid var(--navy); font-size: .74rem; line-height: 1.4; }
.hst-button:disabled { opacity: .45; cursor: wait; }
.hst-button--light { background: transparent; color: var(--navy); }
.hst-method { margin-top: 34px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.hst-method article { border-top: 1px solid var(--line); padding-top: 20px; }
.hst-method svg { width: 100%; height: 100px; stroke: var(--navy); fill: none; stroke-width: 1.5; }
.hst-method h3 { color: var(--navy); font-size: 1rem; font-weight: 500; margin: 16px 0 8px; }
.hst-method p { margin: 0; color: var(--muted); font-size: .78rem; }
.hst-note { color: var(--muted); font-size: .75rem; margin: 24px 0 0; }
.hst-workspace { margin-top: 32px; padding: 24px; }
.hst-toolbar { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; }
.hst-toolbar label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: .68rem; }
.hst-toolbar select { max-width: 100%; min-height: 36px; padding: 6px 26px 6px 10px; border: 1px solid var(--line); color: var(--navy); background: white; font-size: .75rem; }
.hst-toolbar .hst-button { min-height: 36px; }
.hst-scrubber { display: block; margin: 22px 0; color: var(--navy); font-size: .74rem; }
.hst-scrubber > span { display: flex; justify-content: space-between; gap: 16px; }
.hst-page input[type=range] { display: block; width: 100%; margin: 14px 0 0; accent-color: var(--navy); cursor: pointer; }
.hst-field-grid { display: grid; grid-template-columns: minmax(0,1fr) 195px; gap: 24px; }
.hst-map-panel { min-width: 0; }
.hst-map-stage { position: relative; }
.hst-canvas--isometric { aspect-ratio: 1.4; }
.hst-field-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hst-field-heading { margin-bottom: 8px; }
.hst-field-heading span { color: var(--muted); font-size: .65rem; }
.hst-legend { margin-top: 12px; }
.hst-colour-ramp { height: 10px; background: linear-gradient(90deg,#30123b,#392972,#4440a1,#466be3,#4193fe,#28bbeb,#17dcc2,#50f197,#a4fc3b,#edcf39,#fd952b,#ea500d,#d02f04,#7a0402); }
.hst-legend-labels { display: flex; justify-content: space-between; gap: 12px; font-size: .62rem; color: var(--muted); margin-top: 5px; }
.hst-readout { border-left: 1px solid var(--line); padding-left: 20px; }
.hst-readout .kicker { font-size: .61rem; }
.hst-readout strong { display: block; font-size: 1.45rem; color: var(--navy); font-weight: 500; line-height: 1.15; }
.hst-readout dl { margin: 18px 0; }
.hst-readout dt { font-size: .67rem; color: var(--muted); margin-top: 18px; }
.hst-readout dd { margin: 4px 0; font-size: .91rem; color: var(--navy); }
.hst-readout p:not(.kicker) { font-size: .72rem; color: var(--muted); }
.hst-inspect { width: 100%; padding: 8px; border: 1px solid var(--line); font: inherit; color: var(--navy); font-size: .78rem; }
.hst-status { font-size: .73rem; color: var(--muted); min-height: 1.6em; margin: 12px 0 0; }
.hst-allocation-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; border-top: 1px solid var(--line); padding-top: 20px; margin: 24px 0; }
.hst-allocation-metrics strong { display: block; color: var(--navy); font-size: clamp(1.25rem,2.2vw,2rem); font-weight: 500; line-height: 1.2; }
.hst-allocation-metrics span { display: block; color: var(--muted); font-size: .66rem; margin-top: 6px; }
.hst-allocation-key { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .67rem; color: var(--muted); }
.hst-allocation-key i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; background: #010161; }
.hst-allocation-key .passive { background: #d7d8dd; }
.hst-allocation-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: center; }
.hst-allocation-layout h3 { color: var(--navy); font-size: .95rem; font-weight: 500; }
.hst-curve { display: block; width: 100%; overflow: visible; }
.hst-curve text { font-family: inherit; font-size: 10px; fill: #585c71; }
.hst-details { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 16px; font-size: .75rem; color: var(--muted); }
.hst-details summary { cursor: pointer; color: var(--navy); }
.hst-details p { max-width: 740px; }
.hst-electricity { display: block; font-size: .73rem; color: var(--navy); margin: 20px 0 0; }
.hst-page .project-link { margin-top: 28px; }
@media (min-width:900px) and (max-width:1199px) { .hst-page .case-section { width: calc(100% - 368px); } }
@media (min-width:700px) and (max-width:899px) { .hst-page .case-section { width: calc(100% - 224px); } }
@media (max-width:1199px) {
  .hst-pattern-grid { grid-template-columns: 1fr; }
  .hst-pattern-copy dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .hst-field-grid { grid-template-columns: 1fr; }
  .hst-readout { border-left: 0; border-top: 1px solid var(--line); padding: 20px 0 0; }
  .hst-readout dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
  .hst-readout dt { margin: 0; }
  .hst-allocation-layout { grid-template-columns: 1fr; }
  .hst-allocation-metrics { grid-template-columns: 1fr 1fr; }
}
@media (max-width:760px) {
  .hst-page .site-nav, .hst-page .site-footer, .hst-page .project-float { transition-duration: 500ms; }
  .hst-page .project-float { position: fixed; z-index: 15; top: 58px; right: 18px; left: auto; margin: 0; transform: none; }
  .hst-hero { min-height: max(810px,100svh); }
  .hst-hero > [data-hero-card] { top: auto; bottom: 82px; left: 18px; width: calc(100% - 36px); margin: 0; position: absolute; padding: 24px; }
  .hst-hero-stats { gap: 12px 16px; margin-top: 20px; }
  .hst-page .case-section { padding-block: 56px; }
  .hst-method { grid-template-columns: 1fr; gap: 28px; }
  .hst-method article { display: grid; grid-template-columns: 90px 1fr; gap: 0 16px; }
  .hst-method svg { grid-row: 1 / 3; }
  .hst-method h3 { margin: 0 0 8px; }
  .hst-workspace { padding: 16px; }
  .hst-pattern-copy dl { grid-template-columns: 1fr; }
  .hst-toolbar { gap: 12px; }
  .hst-toolbar label { flex: 1 1 150px; }
  .hst-field-heading { flex-wrap: wrap; }
  .hst-legend-labels { font-size: .58rem; }
  .hst-allocation-metrics { gap: 18px 12px; }
  .hst-scrubber > span { flex-wrap: wrap; gap: 4px; }
}
@media (max-width:699px) { .hst-page .case-section { width: calc(100% - 104px); padding-inline: 0; } }

.hst-field-overlay [data-sun-handle] { pointer-events: all; cursor: grab; touch-action: none; }
.hst-field-overlay [data-sun-handle]:active { cursor: grabbing; }
.hst-field-overlay [data-sun-handle]:focus-visible { stroke: var(--navy); stroke-width: 2; stroke-dasharray: 4 3; outline: none; }

@media (max-width: 760px) {
  .rhc-page .rhc-hero { position: relative; min-height: max(810px,100svh); overflow: hidden; }
  .rhc-page .rhc-hero-picture { position: absolute; inset: 0; height: 100%; }
  .rhc-page .rhc-hero-picture img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .rhc-page .rhc-hero > [data-hero-card] { position: absolute; top: auto; bottom: 82px; left: 18px; width: calc(100% - 36px); margin: 0; padding: 24px; }
  .rhc-page .site-nav { background: rgba(255,253,253,.9); }
  .rhc-page .site-nav nav > a[data-section], .rhc-page .site-nav .work-menu > a, .rhc-page .site-nav .about-menu > a { color: var(--navy); }
  .rhc-page .site-nav nav > a[data-section]::after, .rhc-page .site-nav .work-menu > a::after, .rhc-page .site-nav .about-menu > a::after { background: var(--navy); }
  .rhc-page .project-float { display: inline-flex; position: fixed; top: 58px; right: 18px; left: auto; margin: 0; transform: none; z-index: 15; }
}

/* A shared, image-independent tag treatment for every project hero. */
.project-detail-page [data-hero-card] .project-tags li { background: rgba(248,249,253,.7); color: var(--navy); border: 1px solid rgba(1,1,97,.14); border-radius: 999px; box-shadow: none; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
@media (max-width: 760px) {
  /* Keep every mobile project headband consistent and readable, including over the hero. */
  .project-detail-page .site-nav { min-height: 44px; padding: 0 18px; background: rgba(255,253,253,.9); }
  .project-detail-page .site-nav nav { width: min(100%,520px); grid-template-columns: repeat(4,minmax(0,1fr)); }
  .project-detail-page.project-hero-under-nav .site-nav nav > a[data-section],
  .project-detail-page.project-hero-under-nav .site-nav .work-menu > a,
  .project-detail-page.project-hero-under-nav .site-nav .about-menu > a { color: var(--navy); }
  .project-detail-page.project-hero-under-nav .site-nav nav > a[data-section]::after,
  .project-detail-page.project-hero-under-nav .site-nav .work-menu > a::after,
  .project-detail-page.project-hero-under-nav .site-nav .about-menu > a::after { background: var(--navy); }
  .rhc-page .site-nav, .rhc-page .project-float { transition-duration: 500ms; }

  /* One mobile hero viewport and one card inset across every project and phone. */
  .project-detail-page [data-project-hero] {
    height: calc(100svh - 44px);
    min-height: 0;
  }
  .project-detail-page [data-project-hero] > [data-hero-card] {
    position: absolute;
    top: auto;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    left: 18px;
    width: calc(100% - 36px);
    margin: 0;
  }
}


@media (max-width: 760px) {
  .project-detail-page .project-float {
    display: inline-flex;
    position: fixed;
    z-index: 15;
    top: 58px;
    right: 18px;
    left: auto;
    margin: 0;
    transform: none;
  }
}