:root{--brand:#135EAC;--brand-deep:#0F4A8A;--brand-tint:#E6EEF7;--ink:#20242C;--ink-2:#4A5566;--ink-3:#6B7280;--paper:#fff;--grey:#F2F2F2;--grey-2:#E6E6E6;--rule:#DDE1E6;--note:#B45309;--note-bg:#FFF6EA;--new:#2E7D5B;--new-bg:#E9F5EF;
--hd:"Montserrat",Arial,sans-serif;--bd:"Roboto",Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0}[hidden]{display:none!important}
body{font-family:var(--bd);color:var(--ink);background:var(--paper);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--brand)}button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--hd);margin:0;text-wrap:balance}
.container{max-width:1200px;margin:0 auto;padding-inline:20px}
.sr{position:absolute;left:-9999px}
/* ---------- prototype chrome */
.proto{position:sticky;top:0;z-index:50;background:#14171C;color:#fff;font-size:13px}
.proto-in{max-width:1200px;margin:0 auto;padding:8px 16px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.proto-title{font:600 12px var(--hd);letter-spacing:.08em;text-transform:uppercase;color:#A9CBEC;margin-right:auto}
.proto-seg{display:flex;background:#22272F;border-radius:6px;padding:2px;gap:2px}
.proto-seg button{border:0;background:transparent;color:#C9D1DB;font:500 13px var(--bd);padding:5px 11px;border-radius:4px;cursor:pointer}
.proto-seg button[aria-pressed="true"]{background:#fff;color:#14171C}
.proto-check{display:flex;align-items:center;gap:6px;color:#C9D1DB;cursor:pointer}
.proto-notes{border:1px solid #3A4250;background:transparent;color:#fff;border-radius:4px;padding:5px 11px;cursor:pointer}
.proto button:focus-visible,.proto input:focus-visible{outline:2px solid #A9CBEC;outline-offset:2px}
/* ---------- notes drawer */
.notes{position:fixed;right:0;top:0;bottom:0;width:min(420px,100%);background:#fff;border-left:1px solid var(--rule);box-shadow:-8px 0 30px rgba(15,30,60,.15);z-index:60;overflow:auto;padding:18px 20px 30px;color:var(--ink)}
.notes-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-family:var(--hd)}
.notes-head button{border:0;background:var(--grey);border-radius:50%;width:32px;height:32px;font-size:20px;cursor:pointer}
.notes ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.notes li{border:1px solid var(--rule);border-radius:8px;padding:10px 12px;font-size:14px;color:var(--ink-2)}
.notes li b{display:block;color:var(--ink);font-size:13px;margin-bottom:2px}
.notes .sub{color:var(--ink-3);font-size:13px;margin:0 0 14px}
/* ---------- audit badges (both skins) */
.tag{display:inline-block;font:500 10px var(--bd);letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:3px;margin-left:6px;vertical-align:middle}
.tag.gap{background:var(--note-bg);color:var(--note)}.tag.new{background:var(--new-bg);color:var(--new)}.tag.merged,.tag.moved{background:var(--brand-tint);color:var(--brand)}
body.no-notes .tag{display:none}
/* ---------- inner page stub (both skins) */
.stub-band{background:var(--brand-tint);padding:34px 0 26px}
.stub-band .crumb{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);margin-bottom:8px}
.stub-band h1{font-size:34px;font-weight:700;color:var(--ink)}
.stub{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:40px;padding:34px 0 60px}
@media (max-width:820px){.stub{grid-template-columns:1fr;gap:24px}}
.stub .lead{font-size:18px;color:var(--ink-2);max-width:62ch;margin:0 0 18px}
.stub .fake{height:10px;background:var(--grey);border-radius:5px;margin:8px 0;max-width:62ch}.stub .fake.s{max-width:40ch}
.kv{display:grid;grid-template-columns:120px minmax(0,1fr);gap:6px 12px;font-size:14px;margin:0 0 18px}
.kv dt{color:var(--ink-3)}.kv dd{margin:0;color:var(--ink-2)}
.card{border:1px solid var(--rule);border-radius:8px;padding:14px 16px;font-size:14px;color:var(--ink-2)}
.card h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);margin-bottom:8px}
.card.ev{border-left:4px solid var(--note);background:var(--note-bg)}.card.ev h3{color:var(--note)}
.card+.card{margin-top:12px}
.back{display:inline-block;margin-top:16px;font-size:14px}
/* ---------- TODAY skin (emulates bluemountainpower.coop) */
.t-util{display:flex;justify-content:flex-end}
.t-util nav{display:flex;background:var(--grey)}
.t-util a{display:flex;align-items:center;gap:8px;padding:10px 18px;font-size:14px;color:var(--ink-2);text-decoration:none;border-left:1px solid #fff}
.t-util a:first-child{border-left:0}
.t-util svg{width:14px;height:14px;fill:currentColor}
.t-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0 18px;flex-wrap:wrap}
.t-head .logo img{height:78px;width:auto;display:block}
.t-nav{display:flex;flex-wrap:wrap;gap:4px}
.t-nav>div{position:relative}
.t-nav>div>button{background:transparent;border:0;padding:12px 14px;font:700 13px var(--hd);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.t-nav>div>button[aria-expanded="true"]{color:var(--brand)}
.t-nav .dd{position:absolute;left:0;top:100%;min-width:260px;background:#fff;border:1px solid var(--rule);box-shadow:0 10px 24px rgba(0,0,0,.12);padding:6px 0;z-index:20}
.t-nav .dd a,.t-nav .dd .grp{display:block;padding:8px 18px;font-size:14px;color:var(--ink);text-decoration:none}
.t-nav .dd .grp{font-weight:700;color:var(--ink-3);text-transform:uppercase;font-size:12px;letter-spacing:.04em;padding-top:12px}
.t-nav .dd .l3{padding-left:32px;color:var(--ink-2)}
.t-nav .dd a:hover{background:var(--grey)}
.t-burger{display:none;background:transparent;border:0;width:36px;height:30px;position:relative;cursor:pointer}
.t-burger span,.t-burger span::before,.t-burger span::after{content:"";position:absolute;left:4px;right:4px;height:3px;background:var(--ink);border-radius:2px}
.t-burger span{top:13px}.t-burger span::before{top:-9px}.t-burger span::after{top:9px}
@media (max-width:900px){.t-burger{display:block}.t-nav{display:none;flex-direction:column;width:100%}.t-nav.open{display:flex}.t-nav .dd{position:static;box-shadow:none;border:0;border-left:3px solid var(--grey-2)}}
.t-hero{position:relative;min-height:520px;background:#3f6fa8 url(assets/bmpc-hero.jpg) center/cover no-repeat;display:flex;align-items:center}
.t-hero .panel{background:rgba(19,94,172,.78);color:#fff;padding:120px 44px;max-width:520px;margin-left:15%}
.t-hero .eyebrow{font:700 15px var(--hd);letter-spacing:.06em;text-transform:uppercase;color:#D6E4F3;margin-bottom:10px}
.t-hero h1{font-size:40px;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
@media (max-width:700px){.t-hero{min-height:380px}.t-hero .panel{margin:0 20px;padding:60px 28px}.t-hero h1{font-size:28px}}
.t-quick{display:grid;grid-template-columns:repeat(4,1fr)}
.t-quick a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 10px;text-decoration:none;font-size:17px;color:var(--ink);background:var(--grey)}
.t-quick a:nth-child(even){background:var(--grey-2)}
.t-quick a span{color:var(--brand)}
.t-quick svg{width:24px;height:24px;fill:#7a7f87}
@media (max-width:700px){.t-quick{grid-template-columns:repeat(2,1fr)}}
.t-serve{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:56px 0}
.t-serve h2{font-size:30px;font-weight:700;margin-bottom:6px}
.t-serve .sub{font:600 13px var(--hd);letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:14px}
.t-serve p{color:var(--ink-2);max-width:56ch}
.t-serve img{width:100%;height:auto;display:block}
@media (max-width:820px){.t-serve{grid-template-columns:1fr}}
.t-news{padding:0 0 56px}
.t-news h2{font-size:26px;margin-bottom:14px}
.t-news ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.t-news li{border-top:3px solid var(--brand);padding:14px 0 0}
.t-news li b{display:block;font:700 16px var(--hd);margin-bottom:6px}
.t-news li span{color:var(--ink-3);font-size:14px}
@media (max-width:700px){.t-news ul{grid-template-columns:1fr}}
.t-foot{background:#1e2530;color:#C9D1DB;padding:40px 0 30px;font-size:14px}
.t-foot .cols{display:grid;grid-template-columns:1.2fr 2fr;gap:40px}
@media (max-width:820px){.t-foot .cols{grid-template-columns:1fr}}
.t-foot h4{color:#fff;font-size:14px;margin-bottom:10px;text-transform:uppercase;letter-spacing:.06em}
.t-foot .menu{columns:3;column-gap:24px;font-size:13px}
@media (max-width:700px){.t-foot .menu{columns:1}}
.t-foot .menu div{break-inside:avoid;margin-bottom:10px}
.t-foot .menu b{display:block;color:#fff;margin-bottom:4px}
.t-foot .menu a{display:block;color:#C9D1DB;text-decoration:none;padding:2px 0}
.t-foot .menu a.l3{padding-left:12px;color:#98A3B3}
.t-foot .fine{border-top:1px solid #3A4250;margin-top:26px;padding-top:14px;font-size:12px;color:#98A3B3}
/* ---------- PROPOSED skin: the co-op's 2026 brand system.
   Source of truth: Claude Design project "Blue Mountain Power design system" (tokens/*.css, ui_kits/website,
   guidelines/*.card.html). Every token is copied verbatim and scoped to #site.skin-proposed, so nothing here can
   reach the Today skin. Layout mechanics (panel sizing, two columns past six items, last two panels open
   leftward, breakpoints, show/hide) are the demo's own and unchanged; only the visual layer follows the brand. */
.skin-proposed{
/* tokens/colors.css: four hues on a 20% tint scale */
--prairie-sky-100:#76AFD6;--prairie-sky-80:#91BFDE;--prairie-sky-60:#ADCFE6;--prairie-sky-40:#C8DFEF;--prairie-sky-20:#E4EFF7;
--utility-blue-100:#023149;--utility-blue-80:#355A6D;--utility-blue-60:#678392;--utility-blue-40:#9AADB6;--utility-blue-20:#CCD6DB;
--harvest-white-100:#F7F4F2;--harvest-white-80:#F9F7F5;--harvest-white-60:#FAF8F7;--harvest-white-40:#FCFBFA;--harvest-white-20:#FDFDFC;
--horizon-orange-100:#FC5821;--horizon-orange-80:#FD794D;--horizon-orange-60:#FD9B7A;--horizon-orange-40:#FEBCA6;--horizon-orange-20:#FEDED3;
--paper:#FFFFFF;
/* tokens/semantic.css: what the rules below reference */
--surface-page:var(--harvest-white-100);--surface-card:var(--paper);--surface-inset:var(--prairie-sky-20);--surface-muted:var(--utility-blue-20);
--surface-inverse:var(--utility-blue-100);--surface-inverse-soft:var(--utility-blue-80);
--text-primary:var(--utility-blue-100);--text-secondary:var(--utility-blue-80);--text-muted:var(--utility-blue-60);
--text-on-inverse:var(--harvest-white-100);--text-on-accent:var(--utility-blue-100);--text-link:var(--utility-blue-100);
--border-subtle:var(--utility-blue-20);--border-default:var(--utility-blue-40);--border-strong:var(--utility-blue-80);
--border-on-inverse:rgba(247,244,242,.24);--rule-accent:var(--horizon-orange-100);
--action-primary-bg:var(--utility-blue-100);--action-primary-bg-hover:#012437;--action-primary-fg:var(--harvest-white-100);
--action-secondary-fg:var(--utility-blue-100);--action-secondary-border:var(--utility-blue-100);--action-secondary-bg-hover:var(--utility-blue-20);
--action-urgent-bg:var(--horizon-orange-100);--action-urgent-bg-hover:#E64A16;--action-urgent-fg:var(--utility-blue-100);
--focus-ring-color:var(--horizon-orange-100);--focus-ring-width:3px;--focus-ring-offset:2px;
--status-outage-bg:var(--horizon-orange-20);--status-outage-mark:var(--horizon-orange-100);--status-planned-bg:var(--prairie-sky-20);--status-planned-mark:var(--prairie-sky-100);
--status-restored-bg:var(--utility-blue-20);--status-restored-mark:var(--utility-blue-80);--status-fg:var(--utility-blue-100);
/* tokens/typography.css (tokens/fonts.css: Helvetica Neue where installed, Archivo from Google Fonts elsewhere) */
--font-sans:"Helvetica Neue",Helvetica,Archivo,Arial,sans-serif;
--weight-heavy:800;--weight-medium:500;--weight-regular:400;
--text-display-1:4rem;--text-display-2:3rem;--text-h1:2.5rem;--text-h2:2rem;--text-h3:1.5rem;--text-h4:1.25rem;
--text-body-lg:1.125rem;--text-body:1rem;--text-body-sm:.875rem;--text-label:.8125rem;
--leading-tight:1.04;--leading-snug:1.18;--leading-normal:1.35;--leading-body:1.6;
--tracking-display:-.022em;--tracking-heading:-.012em;--tracking-label:.09em;--measure-prose:68ch;
/* tokens/spacing.css */
--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;--space-9:6rem;
--gutter:var(--space-5);--container-max:1200px;--target-min:44px;--target-primary:48px;
/* tokens/borders-elevation.css */
--radius-sm:2px;--radius-md:4px;--radius-lg:8px;--border-hairline:1px;--border-medium:2px;--border-heavy:4px;
--shadow-1:0 1px 2px rgba(2,49,73,.08);--shadow-2:0 2px 8px rgba(2,49,73,.10);--shadow-3:0 12px 32px rgba(2,49,73,.16);
/* tokens/motion.css */
--ease-standard:cubic-bezier(.2,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--duration-fast:120ms;--duration-base:180ms;--duration-slow:280ms;
--transition-control:color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);
/* the demo's own variable names, re-pointed at the brand's roles so any shared rule follows suit */
--hd:var(--font-sans);--bd:var(--font-sans);
--brand:var(--text-primary);--brand-deep:var(--surface-inverse);--brand-tint:var(--surface-inset);
--ink:var(--text-primary);--ink-2:var(--text-secondary);--ink-3:var(--text-secondary);
--grey:var(--surface-muted);--grey-2:var(--border-subtle);--rule:var(--border-subtle);
/* the Figma recipe, shared by the hero and every section below it: --u is one Figma pixel (1px to 1440, growing with the
   window to 1.333px at 1920); --mx/--m the card insets; --pad-l/--pad-r the inner pads, centring the measure past 1920 */
--u:clamp(1px,100vw / 1440,1.3334px);--mx:calc(30 * var(--u));--m:calc(25 * var(--u));
--pad-l:max(calc(40 * var(--u)),calc((100vw - 1366 * var(--u)) / 2));--pad-r:max(calc(34 * var(--u)),calc((100vw - 1366 * var(--u)) / 2));
--r-card:calc(20 * var(--u));--r-ctl:calc(10 * var(--u));--r-sm:calc(6 * var(--u));--hair:rgba(2,49,73,.14);--hair-soft:rgba(2,49,73,.1);
--sh-card:0 calc(10 * var(--u)) calc(22 * var(--u)) calc(3 * var(--u)) rgba(2,49,73,.06);--sh-lift:0 calc(14 * var(--u)) calc(30 * var(--u)) calc(4 * var(--u)) rgba(2,49,73,.12);
--sh-btn:0 calc(4 * var(--u)) calc(18.6 * var(--u)) rgba(2,49,73,.18);
background:var(--surface-page);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-body)}
@media (prefers-reduced-motion:reduce){.skin-proposed{--duration-fast:0ms;--duration-base:0ms;--duration-slow:0ms}}
.skin-proposed .container{max-width:none;margin:0;padding-inline:calc(var(--mx) + var(--pad-l)) calc(var(--mx) + var(--pad-r))}  /* the hero's edge line */
.skin-proposed h1,.skin-proposed h2,.skin-proposed h3,.skin-proposed h4{font-family:var(--font-sans);font-weight:700;letter-spacing:0;line-height:1.18;color:var(--text-primary)}  /* the Figma's Bold, untracked */
.skin-proposed a{color:var(--text-link);text-underline-offset:.18em;text-decoration-thickness:1px}
.skin-proposed :focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}
.skin-proposed .ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* ---------- PROPOSED header and hero: the agency's Figma "HERO" frames (received 29 Sep 2026; 1440 x 789, desktop only).
   The frame is one full screen, so the card always fills the window below the prototype bar (--proto-h, set by the script).
   --u is one Figma pixel: 1px up to a 1440 window, then growing with the window to 1.333px at 1920, so a 14-inch laptop or
   a 1080p screen sees the Figma's proportions, as Figma does when it fits the frame to the screen. Past 1920 (27 and
   32-inch screens) the photo keeps filling the card and the content holds at that size in a centred measure
   (--pad-l / --pad-r), so the controls never stretch into thin strips. Below 1440 the values hold at 1:1, tighten to
   1241, then fold for tablets and phones; those layouts, hover states and the inner-page header (the same header on
   a Utility Blue card) are the demo's own, since the Figma has none.
   Figma values: card radius 20, inset 25/30; controls 44 high at radius 10; glass = 15% white, a 0.5 Harvest White
   hairline (40%, or 25% on the quick links), a soft drop shadow and a background blur; Helvetica Neue Bold 48/1.04
   headline, Bold 15 menu, Medium 15 (+2% tracking) quick links, Regular 15 dropdown links, Bold 13 top bar;
   #F4552C orange, #76AFD6 Prairie Sky. Insets: 40 left; 34 right (A's header, both quick-link rows), 39 (B's menu),
   57 (B's top bar). Version A: Search and Contact at right, Report an Outage a fifth, orange quick link.
   Version B: Report an Outage, Contact and Search in a Prairie Sky top bar; four quick links.
   Glass blur sits on ::before, so a glass control never becomes the backdrop root of the dropdown inside it. */
#site.skin-proposed{display:flow-root}
.skin-proposed .p-card a{color:inherit;text-decoration:none}
.p-card{position:relative;margin:var(--m) var(--mx) 0;border-radius:var(--r-card);color:#F7F4F2}
.p-inner{background:var(--utility-blue-100);margin-bottom:var(--m)}
.p-hero{display:flex;flex-direction:column;min-height:max(560px,calc(100svh - var(--proto-h,45px) - 2 * var(--m)));margin-bottom:var(--m);background:#15171A url(assets/hero-loop-v2-still.webp) center/cover no-repeat}
.p-hero::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0) 30.3%),linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,0) 30.3%),linear-gradient(239deg,rgba(0,0,0,0) 55.5%,rgba(0,0,0,.7) 97.8%),linear-gradient(239deg,rgba(0,0,0,0) 55.5%,rgba(0,0,0,.7) 97.8%)}
/* desktop background video: the agency's 18.1s background loop (BM_Hero_Cutdown_v2, 1080p MP4, received 6 Oct 2026,
   a darker opening than the 2 Oct cut), re-saved for fast start with no re-encode (5.5 MB). The still above is the
   loop's first frame, so the fade from still to video is seamless. The script adds the video only on screens 1025px and wider,
   without Save-Data or reduced motion; everyone else keeps the 35 KB still and never downloads the video. */
.p-media{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.p-media video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease-standard)}
.p-media video.on{opacity:1}
@media (max-width:1024px){.p-media,.p-pause{display:none}}
.p-glass{position:relative;z-index:0}
.p-glass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(255,255,255,.15);border:.5px solid rgba(247,244,242,.4);box-shadow:0 calc(10 * var(--u)) calc(22 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.1);transition:background-color var(--duration-fast) var(--ease-standard)}
/* Version B top bar */
.p-util{position:relative;z-index:2;display:flex;justify-content:flex-end;align-items:stretch;gap:calc(25 * var(--u));min-height:calc(39 * var(--u));padding:0 calc(var(--pad-r) + 23 * var(--u)) 0 var(--pad-l);background:#76AFD6;border-radius:calc(20 * var(--u)) calc(20 * var(--u)) 0 0}
.p-util a{display:inline-flex;align-items:center;gap:calc(9 * var(--u));font:700 calc(13 * var(--u))/1.2 var(--font-sans);color:#F7F4F2}
.p-util .ico{width:calc(20 * var(--u));height:calc(20 * var(--u));stroke-width:2}
/* header row: logo, the glass menu pill 93 after it (A) or at the right (B), then A's Search and Contact */
.p-head{position:relative;z-index:2;display:flex;align-items:center;padding:calc(33 * var(--u)) var(--pad-r) 0 var(--pad-l)}
.v-b .p-head{padding:calc(29 * var(--u)) calc(var(--pad-r) + 5 * var(--u)) 0 var(--pad-l)}
.p-inner .p-head{padding-bottom:calc(33 * var(--u))}
.p-head .logo{flex:none;display:block;line-height:0}
.p-head .logo img{height:calc(44 * var(--u));width:auto;display:block}
.p-tools{display:flex;align-items:center;gap:calc(16 * var(--u));margin-left:auto}
.v-b .p-tools{display:none}
.p-nav{display:flex;height:calc(44 * var(--u));margin-left:calc(93 * var(--u));border-radius:calc(10 * var(--u))}
.v-b .p-nav{margin-left:auto}
.p-nav::before{-webkit-backdrop-filter:blur(calc(2.4 * var(--u)));backdrop-filter:blur(calc(2.4 * var(--u)))}
.p-nav>div{position:relative;display:flex}
.p-nav>div>button{background:transparent;border:0;padding:0 calc(18 * var(--u));font:700 calc(15 * var(--u))/1.2 var(--font-sans);color:#F7F4F2;white-space:nowrap;cursor:pointer}
.p-nav>div.p-nav-contact{display:none}
/* dropdown: a glass panel 10 under the pill, two columns past six links, the last two open leftward. Its hairline is an
   inset shadow because the Figma's stroke sits inside the shape, so it must not push the links (12 / 14 / 15 insets). */
.p-nav .mega{position:absolute;left:calc(-4 * var(--u));top:calc(100% + 10 * var(--u));width:max-content;min-width:calc(180 * var(--u));max-width:min(calc(760 * var(--u)),calc(100vw - 40px));padding:calc(3.5 * var(--u)) 0 calc(6.5 * var(--u));border-radius:calc(10 * var(--u));background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 .5px rgba(247,244,242,.4),0 calc(10 * var(--u)) calc(22 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.1);-webkit-backdrop-filter:blur(calc(9 * var(--u)));backdrop-filter:blur(calc(9 * var(--u)));z-index:20}
.p-nav>div.end .mega{left:auto;right:0}
.p-nav .mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:calc(10 * var(--u) + 2px)}
.p-inner .p-nav .mega{background:rgba(2,49,73,.88)}  /* no photo behind on inner pages: navy-tinted glass */
.p-nav .mega .links{columns:1}.p-nav .mega.two .links{columns:2;column-gap:calc(24 * var(--u))}
.p-nav .mega a{display:block;padding:calc(8.5 * var(--u)) calc(14 * var(--u));border-radius:calc(6 * var(--u));font:400 calc(15 * var(--u))/calc(18 * var(--u)) var(--font-sans);white-space:nowrap;break-inside:avoid;transition:var(--transition-control)}
/* A: Search (glass, no blur) and Contact (Prairie Sky); Menu (glass) below 1240 */
.p-btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(8 * var(--u));height:calc(44 * var(--u));padding:0 calc(14 * var(--u));border:0;border-radius:calc(10 * var(--u));background:transparent;font:500 calc(15 * var(--u))/1.2 var(--font-sans);color:#F7F4F2;white-space:nowrap;cursor:pointer;transition:var(--transition-control)}
.p-search{width:calc(43 * var(--u));padding:0}
.p-btn .ico{width:calc(20 * var(--u));height:calc(20 * var(--u));stroke-width:2}
.p-search .ico{width:calc(17.5 * var(--u));height:calc(17.5 * var(--u))}
.skin-proposed .p-contact{background:#76AFD6}
.p-burger{display:none}
/* hero body: headline and quick links pinned to the foot of the card */
.p-hero-body{position:relative;z-index:1;margin-top:auto;display:grid;gap:calc(31 * var(--u));padding:calc(40 * var(--u)) var(--pad-r) calc(39 * var(--u)) var(--pad-l)}
.skin-proposed .p-hero h1{margin:0;max-width:none;font-size:calc(48 * var(--u));font-weight:700;line-height:1.04;letter-spacing:0;color:#F7F4F2}
/* the headline row also carries the video's pause control (WCAG 2.2.2: moving content longer than 5s needs one) */
.p-hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.p-pause{flex:none;display:inline-flex;align-items:center;justify-content:center;width:calc(36 * var(--u));height:calc(36 * var(--u));padding:0;border:0;border-radius:50%;background:transparent;color:#F7F4F2;cursor:pointer}
.p-pause .ico{width:calc(16 * var(--u));height:calc(16 * var(--u));stroke-width:2}
.p-hero h1 span{display:block}
.p-tasks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(17 * var(--u))}
.v-b .p-tasks{grid-template-columns:repeat(4,minmax(0,1fr))}
.p-tasks a{display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--u));height:calc(44 * var(--u));padding:0 calc(17 * var(--u)) 0 calc(20 * var(--u));border-radius:calc(10 * var(--u));font:500 calc(15 * var(--u))/1.2 var(--font-sans);letter-spacing:.02em;white-space:nowrap}
.p-tasks a.p-glass::before{border-color:rgba(247,244,242,.25);box-shadow:0 calc(4 * var(--u)) calc(18.6 * var(--u)) rgba(0,0,0,.25);-webkit-backdrop-filter:blur(calc(2 * var(--u)));backdrop-filter:blur(calc(2 * var(--u)))}
.p-tasks a.urgent{background:#F4552C;padding-left:calc(19 * var(--u));padding-right:calc(10 * var(--u));transition:var(--transition-control)}
.p-tasks .lbl{display:inline-flex;align-items:center;gap:calc(9 * var(--u))}
.p-tasks .ico{width:calc(20 * var(--u));height:calc(20 * var(--u));stroke-width:2}
.p-tasks .ico.chev{stroke-width:1.4}
/* laptop, 1241-1399: the Figma's measurements at 1:1, tightened so five quick links hold one row; the pill centres */
@media (max-width:1399px){.skin-proposed{--mx:24px;--m:24px;--pad-l:32px;--pad-r:32px}.v-b .p-head{padding-right:32px}.p-util{padding:0 40px 0 32px}
.p-head .logo img{height:40px}.p-nav,.v-b .p-nav{margin-left:auto}.p-nav>div>button{padding:0 12px}
.p-tasks{gap:12px}.p-tasks a{padding:0 10px 0 16px;font-size:14px;letter-spacing:0}.p-tasks a.urgent{padding:0 8px 0 14px}}
/* tablet: the menu folds into a Menu button that opens a Utility Blue panel; A's quick links go three over two */
@media (max-width:1240px){.v-b .p-tools{display:flex}
.p-burger{display:inline-flex}
.p-nav{display:none;position:absolute;top:calc(100% + 10px);left:32px;right:32px;height:auto;max-height:calc(100svh - 170px);overflow:auto;flex-direction:column;margin:0;padding:6px 8px;background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 .5px rgba(247,244,242,.4),0 10px 22px 3px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
/* on the homepage the panel is the Figma's glass over the photo: the headline and quick links step aside while it is open,
   and the script keeps it inside the hero card. Inner pages have no photo behind it, so there it is navy-tinted glass. */
.p-hero.menu-open .p-hero-body{opacity:0;visibility:hidden}
.p-inner .p-nav{background:rgba(2,49,73,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.p-nav::before{content:none}
.p-nav.open{display:flex}
.p-nav>div{display:block}
.p-nav>div+div{border-top:.5px solid rgba(247,244,242,.2)}
.p-nav>div>button{width:100%;min-height:48px;padding:0 12px;text-align:left;font-size:16px}
.p-nav>div>button[aria-expanded="true"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.p-nav .mega{position:static;width:auto;min-width:0;max-width:none;padding:0 0 8px;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.p-inner .p-nav .mega{background:none}
.p-nav .mega .links,.p-nav .mega.two .links{columns:1}
.p-nav .mega a{display:flex;align-items:center;min-height:44px;padding:10px 12px 10px 24px;white-space:normal;font-size:16px}
.v-a .p-tasks{grid-template-columns:repeat(6,minmax(0,1fr))}
.v-a .p-tasks a{grid-column:span 2}
.v-a .p-tasks a:nth-child(n+4){grid-column:span 3}}
@media (max-width:1000px){.v-b .p-tasks{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* phone: the card fills the screen too, the photo centred on the combine; a darker foot carries the text, quick links go two by two (A's Report an Outage full width), and below 560 A's
   Contact moves into the Menu panel */
@media (max-width:700px){.skin-proposed{--mx:10px;--m:10px;--pad-l:16px;--pad-r:16px;--r-card:16px}
.p-util{min-height:44px;padding:0 16px;gap:20px;border-radius:16px 16px 0 0}
.p-head,.v-b .p-head{padding:16px 16px 0}.p-inner .p-head{padding-bottom:16px}
.p-head .logo img{height:34px}
.p-tools{gap:8px}
.p-nav{left:16px;right:16px}
.p-hero{background:#15171A url(assets/hero-loop-v2-still.webp) 50% 50%/cover no-repeat}
.p-hero::before{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 22%),linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.5) 55%,rgba(0,0,0,0) 78%)}
.p-hero-body{padding:24px 16px 16px;gap:20px}
.skin-proposed .p-hero h1{font-size:2.125rem}
.p-tasks,.v-a .p-tasks,.v-b .p-tasks{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.p-tasks a,.v-a .p-tasks a,.v-a .p-tasks a:nth-child(n+4){grid-column:auto;height:auto;min-height:52px;padding:8px 12px 8px 14px;font-size:15px;white-space:normal;line-height:1.25}
.v-a .p-tasks a.urgent{grid-column:1 / -1;padding-left:14px}
.p-tasks a:not(.urgent) .ico.chev{display:none}}
@media (max-width:560px){.v-a .p-contact{display:none}.v-a .p-nav>div.p-nav-contact{display:block}
.p-nav-contact a{display:flex;align-items:center;min-height:48px;padding:0 12px;font-size:16px;font-weight:700}}
@media (max-width:380px){.p-burger{width:44px;padding:0}.p-burger span{position:absolute;left:-9999px}}
/* ---------- PROPOSED skin below the hero: the Figma's recipe carried to every section, card, control and page.
   The Figma sets the language; these rules extend it to surfaces it does not draw, on the same measures:
   - One edge line: content starts where the hero's logo and headline start (the 30 card inset + the 40 inner pad),
     and scales with the window exactly as the hero does (--u, --pad-l/--pad-r).
   - Two radii: 20 for surfaces (cards, the page head, the rates panel, the footer), 10 for controls and rows.
   - Hairlines: 0.5 inside the shape (inset shadow, like the Figma's inside stroke); on light surfaces navy at 14%.
   - Shadows: the Figma's own geometry (0 10 22 3 for surfaces, 0 4 18.6 for buttons), navy-tinted and lighter on light.
   - Type: Bold 700 at zero tracking for every heading (48/1.04 page titles, as the hero headline), Medium 15 +2%
     for button and tab labels, Bold 13 +2% for small labels (the top bar's style); no uppercase, no "//".
   - Buttons: 44 high, radius 10, label left and the Figma's double chevron right when the button goes somewhere;
     navy on light, glass on navy, the Figma orange (#F4552C, Harvest White label) for outage actions.
   The footer is a navy card that bookends the hero; the phone's quick-action bar floats like the hero's buttons. */
/* sections on the ground */
.p-sec{padding-block:calc(72 * var(--u))}
.p-sec h2{font-size:calc(32 * var(--u));line-height:1.1;margin:0}
.p-sec .sub{color:var(--text-secondary);font-size:calc(18 * var(--u));line-height:1.5;max-width:60ch;margin:calc(10 * var(--u)) 0 calc(32 * var(--u))}
.p-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(17 * var(--u))}
.p-cards a{display:flex;flex-direction:column;gap:calc(8 * var(--u));min-height:calc(190 * var(--u));padding:calc(28 * var(--u));border-radius:var(--r-card);background:var(--surface-card);box-shadow:inset 0 0 0 .5px var(--hair),var(--sh-card);color:var(--text-primary);text-decoration:none;transition:box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}
.p-cards b{font-size:calc(20 * var(--u));font-weight:700;line-height:1.25}
.p-cards span{color:var(--text-secondary);font-size:calc(16 * var(--u));line-height:1.5}
.p-cards .ico.chev{margin-top:auto;align-self:flex-end;width:calc(22 * var(--u));height:calc(22 * var(--u));stroke-width:1.4;color:var(--text-primary)}
@media (max-width:820px){.p-cards{grid-template-columns:minmax(0,1fr)}.p-cards a{min-height:0}}
/* the rates panel: a Prairie Sky card on the hero's inset, its table a white inner card */
.p-rates{margin:0 var(--mx);border-radius:var(--r-card);background:var(--surface-inset)}
.skin-proposed .p-rates .container{padding-inline:var(--pad-l) var(--pad-r)}
.p-rates .p-sec{padding-block:calc(56 * var(--u))}
.p-rates .wrap{overflow-x:auto;border-radius:var(--r-ctl);background:var(--surface-card);box-shadow:inset 0 0 0 .5px var(--hair)}
.p-rates table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.p-rates th,.p-rates td{padding:calc(16 * var(--u)) calc(20 * var(--u));text-align:left;font-size:calc(16 * var(--u))}
.p-rates td{border-top:1px solid var(--hair-soft)}
.p-rates th{font-size:calc(13 * var(--u));font-weight:700;letter-spacing:.02em;color:var(--text-secondary)}
.p-rates td:nth-child(2){font-weight:700}
.p-rates .more{margin:calc(24 * var(--u)) 0 0}
.p-news ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(17 * var(--u))}
.p-news li{padding:calc(28 * var(--u));border-radius:var(--r-card);background:var(--surface-card);box-shadow:inset 0 0 0 .5px var(--hair),var(--sh-card)}
.p-news li b{display:block;font-size:calc(20 * var(--u));font-weight:700;line-height:1.25;margin-bottom:calc(8 * var(--u))}
.p-news li span{font-size:calc(13 * var(--u));font-weight:700;letter-spacing:.02em;color:var(--text-secondary)}
@media (max-width:700px){.p-news ul{grid-template-columns:minmax(0,1fr)}}
/* footer: a navy card that bookends the hero */
.p-foot{margin:0 var(--mx) var(--m);border-radius:var(--r-card);background:var(--utility-blue-100);color:var(--prairie-sky-40);font-size:calc(16 * var(--u))}
.skin-proposed .p-foot .container{padding-inline:var(--pad-l) var(--pad-r)}
.p-foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:calc(32 * var(--u));padding-block:calc(56 * var(--u)) calc(44 * var(--u))}
@media (max-width:820px){.p-foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:500px){.p-foot .cols{grid-template-columns:1fr}}
.p-foot .cols>div{display:grid;gap:calc(10 * var(--u));align-content:start;justify-items:start}
.p-foot .flogo{height:calc(44 * var(--u));width:auto;display:block;margin-bottom:calc(14 * var(--u))}
.p-foot h4{color:var(--prairie-sky-100);font-size:calc(13 * var(--u));font-weight:700;letter-spacing:.02em;margin:0 0 calc(4 * var(--u))}
.p-foot a{display:inline-flex;align-items:center;gap:calc(10 * var(--u));color:#F7F4F2;text-decoration:none;font-size:calc(15 * var(--u));font-weight:500;letter-spacing:.02em;line-height:1.5}
.p-foot a.tel{font-size:calc(28 * var(--u));font-weight:700;letter-spacing:0;line-height:1.2;min-height:var(--target-min)}
.p-foot a.tel .ico{width:calc(24 * var(--u));height:calc(24 * var(--u));color:#F4552C}
.p-foot p{margin:0;font-size:calc(14 * var(--u));max-width:36ch;color:var(--prairie-sky-40)}
.p-foot .bar{border-top:.5px solid rgba(247,244,242,.18)}
.p-foot .bar .container{display:flex;justify-content:space-between;gap:calc(16 * var(--u));flex-wrap:wrap;padding-block:calc(20 * var(--u));font-size:calc(13 * var(--u));color:var(--prairie-sky-40)}
/* phone: the quick-action bar floats above the page like the hero's buttons, once the hero's own links scroll away
   (always on inner pages, where Version B's top bar then drops its Report an Outage for the bar's) */
.p-sticky{display:none}
@media (max-width:700px){.p-foot{margin-bottom:calc(var(--m) + 72px)}
.p-inner .p-util a.in-sticky{display:none}
body.past-hero .p-sticky{display:flex;gap:6px;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:40;padding:6px;border-radius:16px;background:rgba(2,49,73,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 22px 3px rgba(0,0,0,.18)}
.p-sticky a{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 6px;border-radius:10px;text-align:center;font:500 13px/1.2 var(--font-sans);letter-spacing:.02em;color:#F7F4F2;text-decoration:none}
.p-sticky a.cta{background:#F4552C}}
/* ---------- PROPOSED inner pages: Outages, Report an Outage, Energy Rates, Understand Your Bill, and every page stub.
   The page head is a white card on the header card's inset, its title the hero's headline style; the body sits on the
   ground, on the hero's edge line. Classes only: the vhost CSP forbids inline style attributes. */
.skin-proposed .bmp-eyebrow{display:inline-flex;align-items:baseline;font-size:calc(13 * var(--u));font-weight:700;letter-spacing:.02em;color:var(--text-secondary)}
.kp-head,.skin-proposed .stub-band{margin:0 var(--mx);border-radius:var(--r-card);background:var(--surface-card);box-shadow:inset 0 0 0 .5px var(--hair),var(--sh-card)}
.skin-proposed .kp-head .container,.skin-proposed .stub-band .container{padding-inline:var(--pad-l) var(--pad-r)}
.kp-head .container{display:grid;gap:calc(16 * var(--u));padding-block:calc(48 * var(--u)) calc(44 * var(--u))}
.kp-top{display:flex;justify-content:space-between;align-items:center;gap:calc(16 * var(--u));flex-wrap:wrap}
.skin-proposed .kp-head h1,.skin-proposed .stub-band h1{font-size:calc(48 * var(--u));line-height:1.04;max-width:18ch}
.kp-lead{font-size:calc(18 * var(--u));line-height:1.5;color:var(--text-secondary);max-width:58ch;margin:0}
.kp-actions{display:flex;gap:calc(16 * var(--u));flex-wrap:wrap;align-items:center;margin-top:calc(8 * var(--u))}
.proto-page{display:inline-flex;align-items:center;padding:calc(6 * var(--u)) calc(12 * var(--u));border-radius:999px;box-shadow:inset 0 0 0 .5px rgba(2,49,73,.3);font-size:calc(13 * var(--u));font-weight:700;letter-spacing:.02em;line-height:1.3;color:var(--text-secondary);white-space:nowrap}
.kp-body{padding-block:calc(40 * var(--u)) calc(72 * var(--u))}
.kp-grid{display:grid;grid-template-columns:minmax(0,1fr) calc(340 * var(--u));gap:calc(24 * var(--u));align-items:start}
.kp-grid.wide-rail{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:calc(24 * var(--u))}
@media (max-width:900px){.kp-grid,.kp-grid.wide-rail{grid-template-columns:minmax(0,1fr)}}
.kp-stack{display:grid;gap:calc(17 * var(--u));align-content:start}
.kp-main{display:grid;gap:calc(24 * var(--u));align-content:start;min-width:0}
.skin-proposed .kp-main h2{font-size:calc(24 * var(--u));line-height:1.2}
.kp-src{font-size:calc(14 * var(--u));color:var(--text-secondary);margin:0}
/* phone: page heads one step down, so content starts on the first screen */
@media (max-width:700px){.kp-head .container{padding-block:28px 24px;gap:12px}.skin-proposed .kp-head h1,.skin-proposed .stub-band h1{font-size:34px}.skin-proposed .stub-band .container{padding-block:28px 24px}.kp-body{padding-block:24px 48px}.p-sec{padding-block:48px}.p-sec h2{font-size:28px}.p-rates .p-sec{padding-block:32px}}
/* Card */
.ds-card{display:grid;gap:calc(12 * var(--u));align-content:start;padding:calc(28 * var(--u));border-radius:var(--r-card);background:var(--surface-card);box-shadow:inset 0 0 0 .5px var(--hair),var(--sh-card);color:var(--text-primary);min-width:0}
.ds-card.pad6{padding:calc(32 * var(--u))}
.ds-card.inset{background:var(--surface-inset);box-shadow:none}
.ds-card.inverse{background:var(--utility-blue-100);box-shadow:var(--sh-card);color:#F7F4F2}
.ds-card.inverse .bmp-eyebrow{color:var(--prairie-sky-60)}
.ds-card.inverse p{color:var(--prairie-sky-40)}
.ds-card.accent{box-shadow:inset 0 calc(4 * var(--u)) 0 #F4552C,inset 0 0 0 .5px var(--hair),var(--sh-card)}
.ds-card p{margin:0;font-size:calc(16 * var(--u));line-height:1.55}
.ds-card p.sec{color:var(--text-secondary)}
.ds-card h3{font-size:calc(20 * var(--u));line-height:1.25}
.ds-card dl{margin:0;display:grid;gap:calc(8 * var(--u));font-size:calc(16 * var(--u))}
.ds-card dt{font-weight:700}.ds-card dd{margin:0 0 calc(4 * var(--u));color:var(--text-secondary)}
@media (max-width:700px){.ds-card,.ds-card.pad6{padding:20px}}
/* Button: the Figma quick link on light ground */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(9 * var(--u));height:calc(44 * var(--u));padding:0 calc(20 * var(--u));border:0;border-radius:var(--r-ctl);font:500 calc(15 * var(--u))/1.2 var(--font-sans);letter-spacing:.02em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:var(--transition-control),box-shadow var(--duration-base) var(--ease-standard)}
.ds-btn.go{justify-content:space-between;gap:calc(24 * var(--u));padding-right:calc(17 * var(--u))}
.ds-btn .lbl{display:inline-flex;align-items:center;gap:calc(9 * var(--u))}
.ds-btn .ico{width:calc(20 * var(--u));height:calc(20 * var(--u));stroke-width:2}
.ds-btn .ico.chev{stroke-width:1.4}
.ds-btn.full{display:flex;width:100%}
.ds-btn.primary{background:var(--utility-blue-100);color:#F7F4F2;box-shadow:var(--sh-btn)}
.ds-btn.secondary{background:var(--surface-card);color:var(--text-primary);box-shadow:inset 0 0 0 .5px rgba(2,49,73,.3)}
.ds-btn.urgent{background:#F4552C;color:#F7F4F2;box-shadow:var(--sh-btn)}
.ds-btn.inverse{background:rgba(255,255,255,.15);color:#F7F4F2;box-shadow:inset 0 0 0 .5px rgba(247,244,242,.4)}
.ds-btn.quiet{height:auto;padding:0;background:transparent;box-shadow:none;color:var(--text-primary);text-decoration:underline;text-underline-offset:.2em;justify-content:flex-start}
/* Badge, Tabs (a segmented pill, the menu bar's shape on light ground), Table */
.ds-badge{display:inline-flex;align-items:center;gap:calc(8 * var(--u));padding:calc(5 * var(--u)) calc(10 * var(--u));border-radius:var(--r-sm);font-size:calc(13 * var(--u));font-weight:700;letter-spacing:.02em;line-height:1.4;white-space:nowrap;color:var(--text-primary);background:var(--utility-blue-20);justify-self:start}
.ds-badge.planned{background:var(--prairie-sky-20)}
.ds-badge.nodot::before{content:none!important}
.ds-badge.planned::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--prairie-sky-100);flex:none}
.kp-tabs{gap:calc(20 * var(--u))}
.ds-tabs,.om-seg{display:inline-flex;flex-wrap:wrap;gap:calc(4 * var(--u));padding:calc(4 * var(--u));border-radius:var(--r-ctl);background:rgba(2,49,73,.06);justify-self:start}
.ds-tabs button,.om-seg button{appearance:none;min-height:calc(36 * var(--u));padding:calc(6 * var(--u)) calc(16 * var(--u));border:0;border-radius:calc(7 * var(--u));background:transparent;font:500 calc(15 * var(--u))/1.25 var(--font-sans);letter-spacing:.02em;color:var(--text-secondary);text-align:left;cursor:pointer;transition:var(--transition-control),box-shadow var(--duration-base) var(--ease-standard)}
.ds-tabs button[aria-selected="true"],.om-seg button[aria-pressed="true"]{background:var(--surface-card);color:var(--text-primary);box-shadow:0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(2,49,73,.14)}
.ds-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ds-table th{text-align:left;font-size:calc(13 * var(--u));font-weight:700;letter-spacing:.02em;color:var(--text-secondary);padding:0 calc(12 * var(--u)) calc(12 * var(--u)) 0}
.ds-table td{padding:calc(14 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u)) 0;border-top:1px solid var(--hair-soft);font-size:calc(16 * var(--u))}
.ds-table td.num{font-weight:700}
.ds-table td.end{text-align:right;padding-right:0}
.kp-scroll{overflow-x:auto}
/* phone: each rate becomes a two-line row (contract and rate, then term and dates) instead of four squeezed columns */
@media (max-width:700px){.p-rates thead,.ds-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.p-rates table,.p-rates tbody,.ds-table,.ds-table tbody{display:block;width:100%}
.p-rates tr,.ds-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:14px 16px;border-top:1px solid var(--hair-soft)}
.ds-table tr{padding-inline:0}
.p-rates tbody tr:first-child,.ds-table tbody tr:first-child{border-top:0}
.p-rates td,.ds-table td,.ds-table td.end{display:block;padding:0;border:0;font-size:16px;text-align:left}
.p-rates td:nth-child(even),.ds-table td:nth-child(even){text-align:right}
.p-rates td:nth-child(n+3),.ds-table td:nth-child(n+3){font-size:14px;color:var(--text-secondary)}
.p-rates td:nth-child(3),.ds-table td:nth-child(3){grid-area:2 / 1 / 3 / 2;text-align:left}
.p-rates td:nth-child(4),.ds-table td:nth-child(4){grid-area:2 / 1 / 3 / 3}}  /* spans both columns, so the long dates never widen the rate column */
/* Energy Rates: three headline rates */
.kp-rates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(17 * var(--u))}
@media (max-width:700px){.kp-rates{grid-template-columns:minmax(0,1fr)}}
.kp-rate{font-size:calc(34 * var(--u));font-weight:700;letter-spacing:0;line-height:1;font-variant-numeric:tabular-nums}
.kp-rate small{font-size:calc(16 * var(--u));font-weight:500;letter-spacing:.02em;margin-left:calc(4 * var(--u))}
/* Outages: rows as 10-radius controls, the status as an inset bar that follows the corner */
.kp-row,.om-row,.kp-none{border-radius:var(--r-ctl);background:var(--surface-card);box-shadow:inset calc(4 * var(--u)) 0 0 var(--row-mark,var(--utility-blue-40)),inset 0 0 0 .5px var(--hair)}
.kp-row{display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(0,.9fr);gap:calc(16 * var(--u));align-items:center;padding:calc(16 * var(--u)) calc(20 * var(--u));--row-mark:var(--prairie-sky-100)}
.kp-row .t{display:grid;gap:calc(4 * var(--u))}
.kp-row .n{font-size:calc(18 * var(--u));font-weight:700;line-height:1.3}
.kp-row .m,.kp-row .d{font-size:calc(14 * var(--u));color:var(--text-secondary)}
@media (max-width:700px){.kp-row{grid-template-columns:minmax(0,1fr);gap:8px}}
.kp-none{padding:calc(16 * var(--u)) calc(20 * var(--u));color:var(--text-secondary);margin:0}
/* Worked example and numbered steps */
.kp-lines{display:grid;margin-top:calc(12 * var(--u))}
.kp-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(16 * var(--u));padding:calc(16 * var(--u)) 0;border-top:1px solid var(--hair-soft);align-items:start}
.kp-line .t{display:grid;gap:calc(4 * var(--u))}
.kp-line .n{font-size:calc(18 * var(--u));font-weight:700;line-height:1.3}
.kp-line .c{font-size:calc(14 * var(--u));color:var(--text-secondary)}
.kp-line p{margin:calc(4 * var(--u)) 0 0;font-size:calc(16 * var(--u));color:var(--text-secondary)}
.kp-line.total{border-top:2px solid var(--utility-blue-100)}
.kp-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(16 * var(--u));padding:calc(16 * var(--u)) 0;border-top:1px solid var(--hair-soft)}
.kp-step .no{font-size:calc(24 * var(--u));font-weight:700;line-height:1.1;color:var(--text-primary);min-width:1.4em}
.kp-step .n{font-size:calc(18 * var(--u));font-weight:700;line-height:1.3}
.kp-step p{margin:calc(4 * var(--u)) 0 0;color:var(--text-secondary)}
/* ---------- PROPOSED outage map (interim mock-up). Status colours are the brand's status tokens: outage =
   --status-outage-mark, planned = --status-planned-mark, restored = --status-restored-mark; colour is never alone
   (outage is hatched and carries an icon, planned and restored carry icons, and every surface has the word). */
.om{display:grid;grid-template-columns:minmax(0,1fr) calc(340 * var(--u));gap:calc(24 * var(--u));align-items:start;margin-bottom:calc(24 * var(--u))}
@media (max-width:900px){.om{grid-template-columns:minmax(0,1fr);gap:16px}}
.om-top{display:flex;justify-content:space-between;align-items:center;gap:calc(12 * var(--u));flex-wrap:wrap}
.om-office{display:flex;gap:calc(12 * var(--u));align-items:center;justify-content:space-between;flex-wrap:wrap;padding:calc(12 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)) calc(20 * var(--u));border-radius:var(--r-ctl);background:var(--surface-inset);box-shadow:inset calc(4 * var(--u)) 0 0 var(--utility-blue-100)}
.om-office p{margin:0;max-width:52ch}
.om-svg{display:block;width:100%;max-width:calc(600 * var(--u));height:auto;margin:0 auto;overflow:visible}
/* phone: the map card runs nearly edge to edge so a township cell stays at least 24px (the brand's dense-target floor) */
@media (max-width:700px){.ds-card.om-map{padding:16px 4px;margin-inline:-16px}.ds-card.om-map>:not(svg){margin-inline:12px}}
.om-svg .lbl{font:500 15px var(--font-sans);fill:var(--text-secondary)}
.om-svg .hb{fill:var(--status-outage-mark)}.om-svg .hl{fill:var(--utility-blue-100);fill-opacity:.3}
.cell,.om-sw g{cursor:pointer}
.cell rect,.om-sw rect{stroke:var(--utility-blue-60);stroke-width:1;vector-effect:non-scaling-stroke}
.s-normal rect{fill:var(--harvest-white-100)}
.s-planned rect{fill:var(--status-planned-mark)}
.s-restored rect{fill:var(--status-restored-mark)}
.s-outage rect{fill:url(#om-hatch)}
.ci{fill:none;stroke:var(--utility-blue-100);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.s-restored .ci{stroke:var(--harvest-white-100)}
.cell:focus{outline:none}
.cell.sel rect{stroke:var(--utility-blue-100);stroke-width:4}
.cell:focus-visible rect{stroke:var(--focus-ring-color);stroke-width:4}
.om-ex line{stroke:var(--utility-blue-100);stroke-width:2;vector-effect:non-scaling-stroke}
.om-ex rect{fill:var(--surface-card);stroke:var(--utility-blue-100);stroke-width:2;vector-effect:non-scaling-stroke}
.om-ex text,.om-n text{font:700 15px var(--font-sans);fill:var(--utility-blue-100)}
.om-n path{fill:var(--utility-blue-100)}
@media (max-width:700px){.om-svg .lbl,.om-ex text,.om-n text{font-size:26px}.om-svg .rp{display:none}}
.om-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:calc(8 * var(--u)) calc(20 * var(--u));font-size:calc(14 * var(--u))}
.om-legend li{display:inline-flex;align-items:center;gap:calc(8 * var(--u))}
.om-legend .om-key{color:var(--text-secondary)}
.om-sw{width:24px;height:24px;flex:none;overflow:visible}
.om-sw .ci{stroke-width:2.5}
.om-panel{position:sticky;top:60px}
@media (max-width:900px){.om-panel{position:static}}
.skin-proposed .om-panel h3,.skin-proposed .om-list h3{font-size:calc(20 * var(--u));line-height:1.25}
.om-panel .sec,.ds-card .sec{color:var(--text-secondary)}
.om-badges{display:flex;flex-wrap:wrap;gap:calc(8 * var(--u))}
.om-field{display:grid;gap:calc(8 * var(--u))}
.om-field label{font-size:calc(15 * var(--u));font-weight:700;line-height:1.3}
.om-field input,.om-field select{width:100%;height:calc(44 * var(--u));padding:0 calc(14 * var(--u));font:400 calc(16 * var(--u)) var(--font-sans);color:var(--text-primary);background:var(--surface-card);border:0;border-radius:var(--r-ctl);box-shadow:inset 0 0 0 1px rgba(2,49,73,.3)}
.om-btns{display:flex;gap:calc(12 * var(--u));flex-wrap:wrap}
.om-msg{margin:0;padding:calc(10 * var(--u)) calc(14 * var(--u));border-radius:var(--r-ctl);background:var(--surface-inset);font-weight:700}
.om-list{gap:calc(12 * var(--u))}
.om-list h3{margin-top:calc(8 * var(--u))}
.om-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(12 * var(--u));align-items:center;width:100%;min-height:var(--target-primary);padding:calc(14 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)) calc(20 * var(--u));border:0;text-align:left;font:inherit;color:var(--text-primary);cursor:pointer;transition:box-shadow var(--duration-base) var(--ease-standard)}
.om-row.s-outage{--row-mark:var(--status-outage-mark)}.om-row.s-planned{--row-mark:var(--status-planned-mark)}.om-row.s-restored{--row-mark:var(--status-restored-mark)}
.om-row.sel{box-shadow:inset calc(4 * var(--u)) 0 0 var(--row-mark,var(--utility-blue-40)),inset 0 0 0 1.5px var(--utility-blue-100)}
.om-row .t{display:grid;gap:calc(4 * var(--u))}.om-row .n{font-weight:700}.om-row .m{font-size:calc(14 * var(--u));color:var(--text-secondary)}
@media (max-width:700px){.om-row{grid-template-columns:minmax(0,1fr)}}
.ds-badge.outage{background:var(--status-outage-bg)}
.ds-badge.outage::before,.ds-badge.restored::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.ds-badge.outage::before{background:var(--status-outage-mark)}
.ds-badge.restored{background:var(--status-restored-bg)}.ds-badge.restored::before{background:var(--status-restored-mark)}
.ds-badge.normal{background:var(--harvest-white-100);box-shadow:inset 0 0 0 .5px rgba(2,49,73,.3)}
.ds-badge.example{background:var(--surface-card);box-shadow:inset 0 0 0 1px rgba(2,49,73,.5)}
.kp-later{font-size:calc(14 * var(--u));color:var(--text-secondary)}
/* Report an Outage pop-up (Ash, 2 Oct 2026: "a pop up that shares a tap to text or tap to call contact for emergencies").
   Every Report an Outage control in the Proposed views opens it: utility bar, quick links, phone bar, footer, Outages page.
   A native <dialog>, so focus stays inside, Escape closes it, and the page behind is inert. The co-op publishes no
   text-enabled number, so the text option is shown as pending rather than linked to a number that cannot take texts. */
.rpt{width:min(440px,calc(100vw - 32px));max-height:calc(100svh - 32px);padding:0;border:0;border-radius:var(--r-card);background:var(--surface-card);color:var(--text-primary);box-shadow:0 calc(14 * var(--u)) calc(40 * var(--u)) rgba(2,49,73,.3)}
.rpt::backdrop{background:rgba(2,49,73,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.rpt .in{display:grid;gap:14px;padding:28px}
.rpt .top{display:flex;justify-content:space-between;align-items:center}
.rpt .x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-10px -10px -10px 0;border:0;border-radius:10px;background:transparent;color:var(--text-primary);cursor:pointer}
.rpt .x .ico{width:22px;height:22px}
.rpt h2{font-size:28px;line-height:1.1;margin:0}
.rpt p{margin:0;font-size:16px;line-height:1.5;color:var(--text-secondary)}
.rpt .call{height:52px;font-size:17px}
.rpt .alt{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:var(--surface-inset);font-size:15px}
.rpt .alt b{display:block;color:var(--text-primary)}
.rpt .alt span{color:var(--text-secondary)}
.rpt .alt a{white-space:nowrap}
.rpt .more{justify-self:start}
@media (prefers-reduced-motion:no-preference){.rpt[open]{animation:in .16s ease-out}}
/* hover only where a pointer can hover, so a tapped control on a phone does not stay tinted */
@media (hover:hover){.skin-proposed a:hover{text-decoration-thickness:2px}.skin-proposed .p-util a:hover{text-decoration:underline;text-underline-offset:3px}.p-nav .mega a:hover{background:rgba(255,255,255,.14)}a.p-glass:hover::before,button.p-glass:hover::before{background:rgba(255,255,255,.25)}.skin-proposed .p-contact:hover{background:#8DBCDD}.p-tasks a.urgent:hover{background:#E4471F}
.p-cards a:hover{box-shadow:inset 0 0 0 .5px var(--hair),var(--sh-lift);transform:translateY(calc(-2 * var(--u)))}.skin-proposed .p-foot a:hover{text-decoration:underline;text-underline-offset:4px}
.ds-btn.primary:hover{background:#012437}.ds-btn.secondary:hover{background:var(--harvest-white-100)}.ds-btn.urgent:hover{background:#E4471F}.ds-btn.inverse:hover{background:rgba(255,255,255,.25)}.ds-btn.quiet:hover{text-decoration-thickness:2px}
.ds-tabs button[aria-selected="false"]:hover,.om-seg button[aria-pressed="false"]:hover{color:var(--text-primary);background:rgba(255,255,255,.6)}.cell:hover rect{stroke:var(--utility-blue-100);stroke-width:2}.om-row:hover{box-shadow:inset calc(4 * var(--u)) 0 0 var(--row-mark,var(--utility-blue-40)),inset 0 0 0 .5px var(--hair),var(--sh-card)}}
@media (prefers-reduced-motion:reduce){.p-cards a:hover{transform:none}}
/* page stubs: the same white page-head card, then the body on the ground */
.skin-proposed .tag{font:700 calc(13 * var(--u))/1.4 var(--font-sans);letter-spacing:.02em;padding:1px calc(8 * var(--u));border-radius:var(--r-sm);margin-left:calc(8 * var(--u))}
.skin-proposed .tag.new{background:var(--surface-muted);color:var(--text-primary)}
.skin-proposed .stub-band{padding:0}
.skin-proposed .stub-band .container{padding-block:calc(48 * var(--u)) calc(44 * var(--u))}
.skin-proposed .stub-band .crumb{display:flex;gap:.5em;text-transform:none;font-size:calc(13 * var(--u));font-weight:700;letter-spacing:.02em;color:var(--text-secondary);margin-bottom:calc(14 * var(--u))}
.skin-proposed .stub{gap:calc(24 * var(--u));padding-block:calc(40 * var(--u)) calc(72 * var(--u))}
.skin-proposed .stub .lead{font-size:calc(18 * var(--u));line-height:1.5;color:var(--text-secondary)}
.skin-proposed .stub .fake{height:calc(10 * var(--u));background:rgba(2,49,73,.08);border-radius:999px}
.skin-proposed .card{padding:calc(28 * var(--u));border:0;border-radius:var(--r-card);background:var(--surface-card);box-shadow:inset 0 0 0 .5px var(--hair),var(--sh-card);font-size:calc(16 * var(--u));color:var(--text-secondary)}
.skin-proposed .card h3{text-transform:none;font-size:calc(13 * var(--u));font-weight:700;letter-spacing:.02em;color:var(--text-secondary);margin-bottom:calc(12 * var(--u))}
.skin-proposed .kv{font-size:calc(15 * var(--u))}.skin-proposed .kv dt{color:var(--text-secondary)}.skin-proposed .kv dd{color:var(--text-primary)}
.skin-proposed .back{margin-top:calc(24 * var(--u))}
@media (max-width:700px){.skin-proposed .stub{padding-block:24px 48px}}
@media (prefers-reduced-motion:no-preference){.skin-proposed .mega{animation-duration:var(--duration-base);animation-timing-function:var(--ease-out)}}
@media (prefers-reduced-motion:no-preference){.dd,.mega{animation:in .12s ease-out}@keyframes in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}}