/* Local preview: keep irradiance in the opening viewport, independently of hero height. */
.impact {
  top: 126px;
  bottom: auto;
  max-height: calc(100svh - 142px);
  padding: 10px 18px 16px;
  background: rgb(30 49 57 / 96%);
  border-color: #ffffff24;
  box-shadow: 0 16px 46px #0b20252e;
  color: #f3f7f3;
}
.impact .impact-handle { min-height: 32px; margin: -5px auto 2px; }
.impact .impact-handle span { width: 40px; background: #bfceca; }
.impact .local-top { align-items: start; margin: 0 2px 10px; min-height: 72px; }
.impact .clock { font-size: 37px; line-height: 1.1; letter-spacing: -1.5px; }
.impact .date { font-size: 10px; line-height: 1.6; margin-top: 6px; }
.impact .weather strong { font-size: 28px; }
.impact .weather { line-height: 1.4; }
.impact .weather-icon { font-size: 20px; line-height: 1; }
.impact .weather > span:not(.weather-icon) { font-size: 11px; margin-top: 7px; }
.impact .weather small { font-size: 10px; margin-top: 4px; color: #bfceca; opacity: 1; }
.impact .weather-credit { font-size: 10px; margin: -1px 2px 12px; color: #bfceca; opacity: 1; }
.impact .impact-scroll { scrollbar-width: thin; scrollbar-color: #728783 transparent; padding-inline-end: 4px; }
.impact .update { margin: 9px 2px 10px; font-size: 10px; color: #bfceca; }
.impact .update .pulse { background: #9eae9c; width: 4px; height: 4px; }
.impact .cu-station-card { margin-block: 0 14px; padding: 18px 4px 16px; background: transparent; border-radius: 0; border-block-start: 1px solid #ffffff21; }
.impact .cu-station-card .cu-station-eyebrow { display: none; }
.impact .cu-station-card .cu-station-header { margin-block-end: 12px; }
.impact .cu-station-card .cu-station-symbol-mini { background: #1f333b; }
.impact .cu-station-card .cu-station-footer { margin-block-start: 16px; }
.impact .cu-station-card .cu-station-metric.cu-station-metric-main { min-block-size: 124px; }
.impact .cu-station-card .site-readings > .cu-station-primary:first-child { padding-block-end: 16px; }
.impact .cu-station-card .site-readings { row-gap: 17px; }
.impact .cu-station-card .cu-station-temperature .cu-station-label { min-block-size: 34px; }
.impact .cu-station-card .cu-station-metric { gap: 12px; }
@media(min-width:1700px) {
  .impact { top: 132px; bottom: auto; padding: 10px 20px 18px; }
}
@media(min-width:701px) and (max-height:720px) {
  .impact { top: 112px; max-height: calc(100svh - 130px); }
  .impact .local-top { min-height: 64px; margin-bottom: 6px; }
  .impact .clock { font-size: 32px; }
  .impact .weather strong { font-size: 25px; }
  .impact .weather-credit { margin-bottom: 9px; }
}
/* On phones the headline precedes the panel; the full company description and
   call to action follow it. Copy, service content and source data are retained. */
@media(max-width:700px) {
  .hero { display: grid; grid-template-columns: minmax(0,1fr); min-height: 0; height: auto; padding: 100px 18px 32px; }
  .hero .intro { display: contents; }
  .hero .intro .eyebrow { grid-row: 1; margin: 0 6px 8px; width: auto; max-width: none; }
  .hero .intro h1 { grid-row: 2; margin: 0 6px 18px; max-width: none; font-size: clamp(26px,7.3vw,34px); line-height: 1.42; letter-spacing: -.6px; }
  html[lang=en] .hero .intro h1 { font-size: clamp(27px,7.5vw,34px); line-height: 1.16; max-width: none; }
  .hero .impact { grid-row: 3; position: relative; inset: auto; inline-size: 100%; max-inline-size: 420px; margin: 0 auto; padding: 9px 14px 14px; border-radius: 20px; max-height: calc(100svh - 220px); }
  .impact .local-top { min-height: 67px; margin-bottom: 8px; }
  .impact .clock { font-size: 33px; }
  .impact .weather strong { font-size: 26px; }
  .impact .weather-credit { margin-bottom: 10px; font-size: 9px; }
  .hero .intro .lead { grid-row: 4; margin: 24px 6px 0; max-width: none; font-size: 14px; line-height: 1.9; }
  html[lang=en] .hero .intro .lead { max-width: none; font-size: 14px; line-height: 1.7; }
  .hero .intro .intro-line { display: none; }
  .hero .intro .intro-cta { grid-row: 5; justify-self: start; margin: 16px 6px 24px; }
  .hero .carousel-controls { position: static; grid-row: 6; justify-self: start; margin-inline: 6px; gap: 12px; }
  .hero .dots { gap: 7px; }
  .hero .dot { width: 20px; }
  .hero .slide-caption { position: static; grid-row: 7; margin: 12px 6px 0; max-width: none; font-size: 10px; }
  .hero .slides { height: 940px; }
  .hero .shade { height: 100%; background: linear-gradient(180deg,#142a3280,#1f333b22 300px,#263840 940px),linear-gradient(90deg,#10262e66,#10262e22); }
}
/* Keep the same reading order on short screens. Reduce empty space rather than
   moving the station ahead of the energy and carbon summaries. */
@media(max-height:740px) {
  .impact .local-top { min-height: 62px; margin-bottom: 6px; }
  .impact .weather > span:not(.weather-icon) { margin-top: 4px; }
  .impact .weather small { margin-top: 2px; }
  .impact .weather-credit { margin-bottom: 8px; }
  .impact .cu-impact-metrics .metric.cu-impact-metric { min-block-size: 110px; padding-block: 8px; gap: 4px; }
  .impact .cu-impact-metrics .cu-impact-metric > .cu-impact-label { min-block-size: 24px; }
  .impact .update { margin-block: 7px 8px; line-height: 1.5; }
  .impact .cu-station-card { padding-block-start: 12px; }
  .impact .cu-station-card .cu-station-header { margin-block-end: 8px; }
  .impact .cu-station-card .cu-station-metric.cu-station-metric-main { min-block-size: 114px; }
  .impact .cu-station-card .cu-station-art { block-size: 108px; }
  .impact .cu-station-card .cu-station-copy { gap: 10px; align-self: start; }
}
@media(max-width:700px) and (max-height:740px) {
  .hero .intro h1 { margin-bottom: 10px; }
}
@media(prefers-reduced-motion:reduce) {
  .impact .impact-scroll { animation: none; }
}
.impact .impact-scroll[hidden] { display: none; }