/* Project-specific additions. Keep this small. */
/* IEH site header: blue bar with the white and yellow logo, like independentenergyhawaii.com */
:root { --sun: oklch(85.2% .199 91.936); }
.site-head { background: var(--primary); border-bottom: 0; }
.site-head .site-nav { color: color-mix(in oklab, var(--primary-fg) 80%, transparent); }
.site-head .site-nav .on { color: var(--primary-fg); }
.site-logo span { display: none; }
.site-logo img { height: 34px; }
.site-head .btn.primary { background: var(--sun); border-color: var(--sun); color: #1b2433; }
.site-head .menu-btn { color: var(--primary-fg); }

/* builder A: panel outline drawn over the aerial roof placeholder, and a bill slider */
.roof-shape { position: absolute; z-index: 1; background: hsl(25 12% 42% / .6); border: 1px solid rgb(255 255 255 / .45); border-radius: 2px; }
.roof-area { position: absolute; z-index: 1; border: 2px dashed var(--sun); background: rgb(250 204 21 / .16); border-radius: 3px; }
.roof-panels { position: absolute; z-index: 1; display: grid; gap: 2px; }
.roof-panels i { display: block; aspect-ratio: 1 / 1.6; background: hsl(215 50% 20% / .88); border: 1px solid rgb(255 255 255 / .6); }
.roof-key { display: inline-block; width: 16px; height: 11px; border: 2px dashed var(--sun); background: rgb(250 204 21 / .16); vertical-align: -1px; flex-shrink: 0; }
.slider { position: relative; height: 6px; border-radius: 999px; background: var(--muted); margin: 12px 0 6px; }
.slider > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--primary); }
.slider > b { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 999px; background: var(--bg); border: 2px solid var(--primary); }

/* builder E: small photo grid that stays 4 across on the phone */
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }