/* Bayou Prairie Electric Cooperative — Civic
   Scene: a co-op headquarters on the highway outside town — a lobby with a
   payment window, a wall of framed board photos, and a truck yard out back.
   This is the style modelled on how real institutional sites are actually
   built: a utility bar above the nav, a mega menu, a video hero with the
   headline on it, stat callouts, a working member tool, an accordion, and a
   footer that is a sitemap rather than a signature. Restraint is the point —
   green does every interactive job, gold appears only in the mark. */

:root{
  --green:#14624A;
  --green-dk:#0E4634;
  --green-lt:#E8F0EC;
  --gold:#F2C14E;
  --ink:#16211D;
  --ink-70:rgba(22,33,29,.72);
  --ink-45:rgba(22,33,29,.48);
  --paper:#FFFFFF;
  --tint:#F4F6F4;
  --line:#DDE3DF;
  --ok:#1B7A4B;
  --bad:#B3451F;

  --display:'Libre Franklin',system-ui,sans-serif;
  --body:'Source Sans 3',system-ui,sans-serif;
  --page:1220px;
  --pad:clamp(16px,4vw,44px);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:clamp(16px,1.02vw,17px); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--display); font-weight:800; margin:0; line-height:1.08; letter-spacing:-.022em; }
a{ color:inherit; }
/* height:auto is required: the width/height attributes on every <img> would
   otherwise beat aspect-ratio and render images at their intrinsic height. */
img{ display:block; max-width:100%; height:auto; }
:focus-visible{ outline:3px solid var(--green); outline-offset:2px; }
.wrap{ max-width:var(--page); margin:0 auto; padding-inline:var(--pad); }

.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--green); color:#fff; padding:12px 18px; }
.skip:focus{ left:8px; top:8px; }

.eyebrow{ font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--green); margin:0 0 12px; }
.section-title{ font-size:clamp(27px,3.4vw,44px); margin-bottom:16px; }
.section-sub{ color:var(--ink-70); margin:0 0 clamp(26px,3vw,40px); max-width:60ch; }

.btn{
  display:inline-block; cursor:pointer; text-decoration:none; text-align:center;
  background:var(--green); color:#fff; border:2px solid var(--green); border-radius:4px;
  padding:12px 22px; font-family:var(--display); font-weight:700; font-size:15px;
  transition:background .16s ease, border-color .16s ease;
}
.btn:hover{ background:var(--green-dk); border-color:var(--green-dk); }
.btn-lg{ padding:15px 30px; font-size:16.5px; }
.btn-ghost{ background:transparent; border-color:rgba(255,255,255,.7); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.16); border-color:#fff; }

/* ================= UTILITY BAR ================= */
.utility{ background:var(--green-dk); color:#fff; font-size:13.5px; }
.utility-inner{ display:flex; align-items:center; gap:18px; padding-block:8px; flex-wrap:wrap; }
.util-status{ margin:0; display:flex; align-items:center; gap:8px; }
.dot{ width:9px; height:9px; border-radius:50%; background:#5FD39B; flex:none; }
.dot.warn{ background:var(--gold); }
.util-links{ margin-left:auto; display:flex; gap:20px; flex-wrap:wrap; }
.util-links a{ color:rgba(255,255,255,.9); text-decoration:none; }
.util-links a:hover{ color:#fff; text-decoration:underline; }
@media (max-width:700px){ .util-links a:nth-child(2),.util-links a:nth-child(3){ display:none; } }

/* ================= MASTHEAD + MEGA NAV ================= */
.masthead{ background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.masthead-inner{ display:flex; align-items:center; gap:26px; padding-block:14px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--green); flex:none; }
.brand-mark{ width:26px; height:34px; }
.brand-text{ font-family:var(--display); font-weight:800; font-size:16px; line-height:1.05; color:var(--ink); letter-spacing:-.02em; }
.brand-text em{ display:block; font-style:normal; font-weight:600; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--green); }

.mainnav{ margin-left:auto; }
.nav-list{ display:flex; gap:4px; list-style:none; margin:0; padding:0; }
.nav-top{
  display:inline-block; background:none; border:0; cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:14.5px; color:var(--ink);
  padding:10px 12px; text-decoration:none; border-radius:4px;
}
.nav-top:hover{ background:var(--green-lt); color:var(--green-dk); }
.has-menu{ position:relative; }
.has-menu .nav-top[aria-expanded="true"]{ background:var(--green-lt); color:var(--green-dk); }

.mega{
  position:absolute; top:calc(100% + 12px); left:0; z-index:60;
  background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--green);
  box-shadow:0 18px 40px rgba(22,33,29,.14);
  padding:26px 28px; min-width:min(640px,84vw);
}
.mega-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:26px 34px; }
.mega-head{ font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin:0 0 12px; }
.mega a{ display:block; padding:6px 0; font-size:14.5px; color:var(--ink-70); text-decoration:none; }
.mega a:hover{ color:var(--green); }
.mega-feature{ background:var(--green-lt); padding:18px; }
.mega-feature p{ margin:0 0 10px; font-size:14px; color:var(--ink-70); }
.mega-cta{ font-weight:700; color:var(--green) !important; }

.btn-report{ flex:none; }
.hamburger{ display:none; flex-direction:column; gap:4px; background:none; border:0; cursor:pointer; padding:8px; }
.hamburger span{ display:block; width:22px; height:2px; background:var(--ink); }

@media (max-width:1040px){
  .mainnav{ display:none; width:100%; }
  .hamburger{ display:flex; margin-left:auto; }
  .btn-report{ display:none; }
  body.nav-open .mainnav{ display:block; }
  body.nav-open .masthead-inner{ flex-wrap:wrap; }
  .nav-list{ flex-direction:column; gap:0; padding-bottom:12px; }
  .nav-top{ width:100%; text-align:left; padding:12px; border-bottom:1px solid var(--line); border-radius:0; }
  .mega{ position:static; min-width:0; box-shadow:none; border:0; border-left:3px solid var(--green); padding:16px 14px; }
}

/* ================= VIDEO HERO ================= */
.hero{ position:relative; isolation:isolate; color:#fff; min-height:min(74vh,620px); display:flex; align-items:flex-end; overflow:hidden; }
.hero-video{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
/* Just enough shade to hold white text at AA over moving footage. The reference
   sites do the same thing — a scrim is honest here because the type must stay
   readable while the picture underneath keeps changing. */
.hero-shade{ position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(14,70,52,.86) 0%, rgba(14,70,52,.62) 46%, rgba(14,70,52,.28) 100%); }
.hero-inner{ padding-block:clamp(46px,8vw,90px); }
.hero-kicker{ font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:0 0 18px; }
.hero h1{ font-size:clamp(32px,4.8vw,60px); margin-bottom:20px; max-width:18ch; }
.hero-lede{ font-size:clamp(16.5px,1.4vw,19px); max-width:52ch; margin:0 0 28px; color:rgba(255,255,255,.94); }
.hero-btns{ display:flex; flex-wrap:wrap; gap:11px; }
.video-toggle{
  position:absolute; right:16px; bottom:16px; z-index:2;
  width:42px; height:42px; display:grid; place-items:center; cursor:pointer;
  background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.5); border-radius:50%; color:#fff;
}
.video-toggle svg{ width:16px; height:16px; fill:currentColor; }
.video-toggle:hover{ background:rgba(0,0,0,.65); }

/* ================= STATS ================= */
.stats{ background:var(--green); color:#fff; }
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:24px; padding-block:clamp(30px,4vw,48px); }
.stat{ font-family:var(--display); font-weight:800; font-size:clamp(30px,3.8vw,46px); line-height:1; margin:0 0 8px; letter-spacing:-.03em; }
.stat-label{ margin:0; font-size:14px; color:rgba(255,255,255,.82); }

/* ================= SECTIONS ================= */
.section{ padding-block:clamp(48px,6vw,88px); }
.section--tint{ background:var(--tint); }

/* numbered service cards */
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2px; margin-top:clamp(24px,3vw,38px); background:var(--line); border:1px solid var(--line); }
.svc{ background:var(--paper); padding:26px 24px 28px; }
.svc-n{ font-family:var(--display); font-weight:800; font-size:13px; color:var(--gold); margin:0 0 14px; letter-spacing:.08em; }
.svc h3{ font-size:19px; margin-bottom:10px; }
.svc p{ margin:0 0 14px; color:var(--ink-70); font-size:15.5px; }
.svc a{ font-family:var(--display); font-weight:700; font-size:14px; color:var(--green); text-decoration:none; }
.svc a:hover{ text-decoration:underline; }

/* ================= THE TOOL ================= */
.tool-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:start; }
@media (max-width:860px){ .tool-wrap{ grid-template-columns:1fr; } }
.tool-sub{ color:var(--ink-70); margin:0 0 24px; max-width:46ch; }
.tool-label{ display:block; font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-45); margin-bottom:8px; }
.tool-select{
  width:100%; max-width:420px; font-family:var(--body); font-size:16.5px; color:var(--ink);
  background:var(--paper); border:2px solid var(--line); border-radius:4px; padding:13px 14px;
}
.tool-select:focus{ border-color:var(--green); outline:none; }

.tool-out{ background:var(--paper); border:1px solid var(--line); border-top:4px solid var(--green); padding:26px 26px 28px; min-height:230px; }
.tool-empty{ margin:0; color:var(--ink-45); }
.out-coop{ font-family:var(--display); font-weight:800; font-size:22px; margin:0 0 4px; }
.out-town{ margin:0 0 20px; color:var(--ink-70); font-size:14.5px; }
.out-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; margin:0 0 18px; }
.out-grid dt{ font-family:var(--display); font-weight:700; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-45); margin-bottom:3px; }
.out-grid dd{ margin:0; font-family:var(--display); font-weight:700; font-size:20px; }
.out-grid dd.ok{ color:var(--ok); }
.out-grid dd.bad{ color:var(--bad); }
.out-note{ margin:0; padding-top:16px; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-70); }

/* ================= PUBLICATIONS ================= */
.pubs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; }
.pub{ text-decoration:none; }
.pub img{ width:100%; aspect-ratio:5/6.5; object-fit:cover; border:1px solid var(--line); margin-bottom:14px; }
.pub:hover img{ border-color:var(--green); }
.pub-date{ margin:0 0 5px; font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--green); }
.pub-title{ margin:0; font-family:var(--display); font-weight:600; font-size:16px; line-height:1.3; }

/* ================= FAQ ================= */
.faq-wrap{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(26px,4vw,56px); align-items:start; }
@media (max-width:860px){ .faq-wrap{ grid-template-columns:1fr; } }
.faq details{ border-bottom:1px solid var(--line); background:var(--paper); }
.faq details:first-child{ border-top:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:18px 44px 18px 18px; position:relative;
  font-family:var(--display); font-weight:600; font-size:16.5px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; position:absolute; right:20px; top:24px; width:10px; height:10px;
  border-right:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(45deg); transition:transform .18s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:28px; }
.faq p{ margin:0; padding:0 18px 20px; color:var(--ink-70); max-width:66ch; }

/* ================= CAREERS ================= */
.careers{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:center; }
@media (max-width:860px){ .careers{ grid-template-columns:1fr; } }
.careers figure{ margin:0; }
.careers img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.careers p{ color:var(--ink-70); max-width:52ch; }
.job-list{ list-style:none; padding:0; margin:22px 0 26px; }
.job-list li{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--line); font-family:var(--display); font-weight:600; font-size:15.5px; }
.job-list li:last-child{ border-bottom:1px solid var(--line); }
.job-loc{ color:var(--ink-45); font-weight:400; }

/* ================= FOOTER ================= */
.foot{ background:var(--green-dk); color:rgba(255,255,255,.78); margin-top:clamp(20px,4vw,50px); }
.foot-grid{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:32px; padding-block:clamp(40px,5vw,64px); }
@media (max-width:960px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot-grid{ grid-template-columns:1fr; } }
.foot p{ margin:0 0 8px; font-size:14.5px; }
.foot a{ color:rgba(255,255,255,.78); text-decoration:none; }
.foot a:hover{ color:#fff; text-decoration:underline; }
.foot-grid > div > a{ display:block; padding:5px 0; font-size:14.5px; }
.foot-brand{ font-family:var(--display); font-weight:800; font-size:18px; color:#fff; line-height:1.15; margin-bottom:14px !important; }
.foot-brand em{ display:block; font-style:normal; font-weight:600; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); }
.foot-head{ font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:12px !important; }
.social{ display:flex; gap:12px; margin-top:16px; }
.social a{ width:32px; height:32px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.3); border-radius:50%; }
.social svg{ width:15px; height:15px; }
.social a:hover{ background:rgba(255,255,255,.14); }

.foot-legal{ border-top:1px solid rgba(255,255,255,.18); padding-block:22px 30px; }
.foot-legal p{ font-size:13px; color:rgba(255,255,255,.6); }
.legal-links a{ color:rgba(255,255,255,.6); }
.fine{ margin-top:14px !important; font-size:12px !important; color:rgba(255,255,255,.45) !important; max-width:88ch; line-height:1.7; }

/* ---- demo tag */
.demo-tag{
  position:fixed; right:14px; bottom:14px; z-index:80;
  display:flex; flex-direction:column; gap:1px;
  background:var(--gold); color:var(--green-dk);
  padding:10px 18px; border-radius:4px; text-decoration:none; text-align:center;
  font-size:11px; line-height:1.5; box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.demo-tag span{ opacity:.75; text-transform:uppercase; font-size:9.5px; letter-spacing:.13em; }
.demo-tag strong{ font-family:var(--display); font-weight:700; font-size:12px; }
.demo-tag:hover{ background:#fff; }

/* ================= SECOND PAGE: OUTAGE CENTRE ================= */
.crumbs{ padding-block:18px 0; font-size:13.5px; color:var(--ink-45); }
.crumbs a{ color:var(--green); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }
.crumbs span[aria-hidden]{ padding-inline:6px; }

.page-head{ padding-block:clamp(28px,4vw,52px) clamp(34px,4.5vw,58px); }
.page-title{ font-family:var(--display); font-weight:800; font-size:clamp(30px,4.4vw,54px); letter-spacing:-.026em; line-height:1.06; margin:0 0 18px; max-width:20ch; }
.page-lede{ color:var(--ink-70); font-size:clamp(16.5px,1.4vw,19px); max-width:58ch; margin:0 0 26px; }
.btn-outline{ background:transparent; color:var(--green); border-color:var(--green); }
.btn-outline:hover{ background:var(--green); color:#fff; }

/* the live board — a real grid driven by the shared parish table */
.board{ display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line); }
.board-cell{ background:var(--paper); padding:20px 18px 22px; }
.board-cell--out{ background:#FDF3EE; box-shadow:inset 3px 0 0 var(--bad); }
.board-parish{ font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-45); margin:0 0 10px; }
.board-num{ font-family:var(--display); font-weight:800; font-size:34px; line-height:1; margin:0 0 4px; color:var(--ok); }
.board-cell--out .board-num{ color:var(--bad); }
.board-of{ margin:0 0 10px; font-size:13px; color:var(--ink-45); }
.board-crew{ margin:0; padding-top:10px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-70); }
.board-total{ margin:20px 0 0; font-family:var(--display); font-weight:700; font-size:16px; }

/* restoration order — numbered because the order is the information */
.restore{ list-style:none; padding:0; margin:0; }
.restore li{ display:flex; gap:20px; padding:20px 0; border-top:1px solid var(--line); }
.restore li:last-child{ border-bottom:1px solid var(--line); }
.restore-n{
  flex:none; width:38px; height:38px; display:grid; place-items:center;
  background:var(--green); color:#fff; border-radius:50%;
  font-family:var(--display); font-weight:800; font-size:16px;
}
.restore h3{ font-size:18px; margin-bottom:6px; }
.restore p{ margin:0; color:var(--ink-70); font-size:15.5px; max-width:62ch; }