/* =========================================================
   MPU — style.css (Consolidated / Clean)
   Notes:
   - Same visuals as your current file
   - Hover only applies to clickable cards (links or .card--link)
========================================================= */

/* =========================================================
   Tokens
========================================================= */
:root{
  /* Layout */
  --container: 1120px;
  --container-wide: 1600px;
  --gutter: 16px;
  --gutter-wide: 24px;
  --nav-height: 80px;
  --section-pad: 56px;
  --radius: 14px;
  --stack: 28px;

  /* Colors */
  --bg: #ffffff;
  --ink: #0f172a;
  --muted: #475569;
  --line: #e5e7eb;

  --blue-50: #eff6ff;
  --blue-600:#2563eb;
  --blue-700:#1d4ed8;
  --blue-900:#1e3a8a;

  --gray-50:#f9fafb;
  --gray-700:#374151;
  --gray-800:#1f2937;
  --gray-900:#111827;

  /* Effects */
  --shadow: 0 10px 18px rgba(2, 6, 23, .08);
  --nav-shadow: 0 4px 14px rgba(0,0,0,.25);
  --text-shadow-hero: 0 6px 18px rgba(0,0,0,.65);
}

/* =========================================================
   Base / Resets
========================================================= */
*{ box-sizing: border-box; }
body{
  margin: 0;
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  color: var(--ink);
  background: var(--bg);
}
a{ color: inherit; text-decoration: none; }
button{ font: inherit; }
svg{ display:block; }
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,p{ margin:0; }

/* Unified focus ring */
:where(a, .navlink, .dropitem, .btn, .mobitem, .nav__mobileToggle, .ue-lightbox__close):focus-visible{
  outline: 2px solid rgba(96,165,250,.95);
  outline-offset: 2px;
}

/* =========================================================
   Layout + Utilities
========================================================= */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--wide{
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter-wide);
}

.stack > * + *{ margin-top: var(--stack); }
.center{ text-align:center; }
.spread{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.spacer{ height:18px; }
.items-start{ align-items:start; }

/* Small icon wrapper (lucide) */
.icon-sm{ width:16px; height:16px; display:inline-flex; }
.icon-sm svg{ width:16px; height:16px; }

/* Subsection heading used inside box bodies */
.subhead{
  margin: 0 0 12px;
  font-size: 22px;
}

/* =========================================================
   UI Primitives: Box + Buttons + Links
========================================================= */
.box{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
}
.box__head{
  background: var(--blue-900);
  color:#fff;
  padding: 14px 18px;
}
.box__title{
  font-weight: 900;
  font-size: 32px;
}
.box__sub{
  margin-top: 4px;
  font-size: 28px;
  color: rgba(255,255,255,.9);
}
.box__body{ padding: 22px; }

.linkbtn{
  color: var(--blue-600);
  font-weight: 800;
  font-size: 18px;
}
.linkbtn:hover{ color: var(--blue-700); text-decoration: underline; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 12px;

  border: 1px solid transparent;
  background: var(--blue-900);
  color:#fff;

  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{
  box-shadow: var(--shadow);
  transform: translateY(-1px);
  background: #162f6f;
}
.btn--sm{ padding: 8px 12px; font-size: 14px; border-radius: 12px; }

.btn--outline{
  background:#fff;
  color: var(--blue-900);
  border-color: var(--blue-900);
}
.btn--outline:hover{ background: var(--blue-50); }

/* =========================================================
   Nav
========================================================= */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  background:#000;
  box-shadow: var(--nav-shadow);
}
.nav__inner{
  height: var(--nav-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand__logo{ height:auto; width:auto; }

.nav__desktop{
  display:none;
  align-items:center;
  gap: 14px;
}

.navgroup{ position:relative; }
.navlink{
  background: transparent;
  border:0;
  color:#fff;
  cursor:pointer;

  padding: 12px 14px;
  border-radius: 10px;

  display:flex;
  align-items:center;
  gap: 6px;

  font-weight: 800;
  font-size: 22px;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.navlink:hover{ color:#60a5fa; background: rgba(255,255,255,.06); }

.dropdown{
  position:absolute;
  top: calc(100% + 2px);
  left:0;
  z-index:60;

  min-width:220px;
  background:#fff;
  border:1px solid var(--line);
  border-radius: 0 0 12px 12px;
  box-shadow: var(--shadow);
  padding: 8px 0;

  display:none;
}
.navgroup:hover .dropdown,
.navgroup:focus-within .dropdown{ display:block; }

.dropitem{
  display:block;
  padding: 10px 14px;
  color:#334155;
  transition: background .2s ease, color .2s ease;
}
.dropitem:hover{
  background: var(--blue-50);
  color: var(--blue-600);
}

/* Mobile nav */
.nav__mobileToggle{
  border:0;
  background: transparent;
  color:#fff;
  cursor:pointer;

  padding: 10px;
  border-radius: 12px;
}
.nav__mobileToggle:hover{ background: rgba(255,255,255,.06); }

.nav__mobile{
  border-top: 1px solid rgba(255,255,255,.15);
  padding: 10px 0 16px;
}
.mobgroup{
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.mobhead{
  background:#111;
  color:#fff;
  padding: 12px 14px;
  font-weight: 700;
}
.mobitem{
  display:block;
  color:#d1d5db;
  padding: 10px 22px;
}
.mobitem:hover{ background:#111; color:#fff; }

@media (min-width: 1024px){
  .nav__desktop{ display:flex; }
  .nav__mobileToggle{ display:none; }
  .nav__mobile{ display:none !important; }
}

/* =========================================================
   Hero
========================================================= */
.hero{
  position: relative;
  width:100%;
  height: min(100vh, 900px);
  overflow:hidden;
}

.hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity:0;
  transition: opacity 1.5s ease;
}
.hero__img--active{ opacity:1; z-index:1; }

.hero__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.30);
}

.hero__bannerBar{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;

  background: rgba(0,0,0,.70);
  border-top: 1px solid rgba(255,255,255,.18);
  padding: 20px 0;
}
.hero__bannerBarInner{
  max-width: var(--container-wide);
  margin:0 auto;
  padding: 0 var(--gutter-wide);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
}
.hero__bannerText{ color:#fff; text-align:left; text-shadow: var(--text-shadow-hero); }
.hero__bannerTitle{
  font-size: clamp(30px, 3.1vw, 46px);
  font-weight: 900;
  line-height: 1.02;
}
.hero__bannerSubtext{
  font-size: clamp(15px, 1.5vw, 22px);
  font-weight: 600;
  margin-top: 8px;
  color: rgba(255,255,255,.80);
  line-height: 1.25;
}
.hero__bannerImg{
  height: clamp(96px, 18vw, 256px);
  width:auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.55));
}

@media (max-width: 640px){
  .hero__bannerBarInner{ padding: 0 var(--gutter); }
}

/* Hero arrows */
.hero__arrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  z-index:3;

  width:52px;
  height:52px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.45);
  color:#fff;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.hero__arrow svg{ width:24px; height:24px; }
.hero__arrow--left{ left:18px; }
.hero__arrow--right{ right:18px; }

.hero__arrow:hover{
  background: rgba(0,0,0,.65);
  border-color: rgba(255,255,255,.60);
  transform: translateY(-50%) scale(1.04);
}

@media (max-width: 640px){
  .hero__arrow--left{ left:10px; }
  .hero__arrow--right{ right:10px; }
}

/* =========================================================
   Sections / Type
========================================================= */
.section{ padding: var(--section-pad) 0; }
.section--alt{ background: var(--gray-50); }
.section--white{ background:#fff; }
.section--blue{ background: var(--blue-900); color:#fff; }

.h1{ font-size: clamp(34px, 4vw, 56px); font-weight: 900; margin:0 0 14px; }
.h2{ font-size: clamp(26px, 3vw, 40px); font-weight: 900; margin:0 0 18px; }
.lead{ color: var(--muted); font-size: 20px; line-height:1.6; max-width: 820px; margin: 0 auto; }

/* =========================================================
   Grid + Cards
========================================================= */
.grid{ display:grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 768px){
  .grid--2{ grid-template-columns: repeat(2, 1fr); }
  .grid--3{ grid-template-columns: repeat(3, 1fr); }
  .grid--4{ grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1100px){
  .grid--3xl{ grid-template-columns: repeat(3, 1fr); }
}

/* Default card = WHITE card (black text) */
.card{
  background:#fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 2px 0 rgba(2,6,23,.02);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  color: var(--ink);
}

/* Structure */
.card__top{ padding: 18px 18px 0; }
.card__topRow{ display:flex; flex-direction:column; gap: 8px; }

.card__top h3{
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
  margin: 0;
}

.card__sub{
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  font-size: 14px;
}

.card__body{
  padding: 14px 18px 18px;
  color: var(--gray-700);
  font-size: 18px;
  line-height: 1.65;
}

/* Optional icon sizing if you use .card__icon */
.card__icon svg{ width:56px; height:56px; }

/* BLUE variant (white text) */
.card--blue{
  background: var(--blue-900);
  border-color: transparent;
  color: #fff;
}
.card--blue .card__sub{ color: rgba(255,255,255,.85); }
.card--blue .card__body{ color: rgba(255,255,255,.92); }

/* ---------------------------------------------------------
   Card interactivity (ONLY when clickable)
   - anchors with class="card" get hover automatically
   - for non-<a> clickable cards, add .card--link
--------------------------------------------------------- */
a.card,
.card--link{
  cursor: pointer;
}

a.card:hover,
a.card:focus-visible,
.card--link:hover,
.card--link:focus-visible{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(37,99,235,.35);
}

/* Quick Access helper: make all cards in that section blue */
.quick-access .card{
  background: var(--blue-900);
  border-color: transparent;
  color: #fff;
}
.quick-access .card__sub{ color: rgba(255,255,255,.85); }
.quick-access .card__body{ color: rgba(255,255,255,.92); }

/* If quick-access cards are links, give them the deeper hover shadow */
.quick-access a.card:hover,
.quick-access a.card:focus-visible,
.quick-access .card--link:hover,
.quick-access .card--link:focus-visible{
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.18);
}

/* =========================================================
   Stats / Updates / Pills
========================================================= */
.stat{ text-align:center; }
.stat__num{ font-size:56px; font-weight: 900; margin-bottom: 8px; }
.stat__lbl{ color:#bfdbfe; font-size: 18px; }

.update{ padding:18px; }
.update__title{ margin: 10px 0; font-size:22px; font-weight:900; }
.update__body{ margin:0 0 12px; color: var(--gray-700); font-size:18px; line-height:1.55; }
.update__date{ color:#fff; font-size: 13px; }
.update.announcements{ background: var(--blue-900); color:#fff; }

.pill{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
}
.pill--orange{ background:#ffedd5; color:#9a3412; }
.pill--green{ background:#dcfce7; color:#166534; }
.pill--blue{ background:#dbeafe; color:#1d4ed8; }

/* =========================================================
   Post Cards (Archive grid cards)
========================================================= */
.archive-topbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.postcard{
  display:block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  background:#fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Postcards are links, so hover makes sense */
.postcard:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(37,99,235,.35);
}

.postcard__media{
  position:relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(30,58,138,.92), rgba(37,99,235,.55));
}
.postcard__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.postcard__media--empty::after{
  content:"MPU";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  letter-spacing:.12em;
  color: rgba(255,255,255,.75);
  font-size: 28px;
}

.postcard__body{ padding: 16px 16px 14px; }
.postcard__meta{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 10px;
}
.postcard__title{
  margin: 0 0 10px;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.25;
}
.postcard__excerpt{
  margin: 0 0 14px;
  color: var(--gray-700);
  font-size: 16px;
  line-height: 1.55;
}
.postcard__cta{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  color: var(--blue-700);
}
.postcard__cta:hover{ text-decoration: underline; }

/* =========================================================
   Footer
========================================================= */
.footer{
  background: var(--blue-900);
  color:#fff;
  padding: 64px 0 36px;
}

.footer__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 28px;
}
@media (min-width: 768px){
  .footer__grid{ grid-template-columns: repeat(4, 1fr); gap: 36px; }
}

.footer h3{
  margin: 0 0 16px;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: .02em;
}

.footer :where(p, li, a){
  color:#fff;
  font-size: 22px;
  line-height: 1.75;
  font-weight: 100;
}

.footer ul{ list-style:none; padding:0; margin:0; }
.footer li{ margin-bottom: 10px; }
.footer a:hover{ text-decoration: underline; }

.social{ display:flex; gap: 14px; margin-top: 18px; }

.iconbtn{
  border:0;
  background: var(--gray-800);
  color:#fff;
  cursor:pointer;
  padding: 14px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.iconbtn:hover{ background: #374151; }

.contact__row{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  margin-bottom: 14px;
}

.footer__block{ margin-bottom: 48px; }

.footer__bottom{
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 28px;
  padding-top: 24px;

  color:#d1d5db;
  display:flex;
  gap: 16px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;

  font-size: 14.5px;
}

.footer .footer__label{
  display:block;
  font-weight: 900;
  letter-spacing: .04em;
  font-size: 22px;
}
.footer .footer__label--inline{
  display:inline;
  margin-right: 6px;
}

.footer__logo{
  max-width: 180px;
  margin-top: 24px;
  display:block;
}
.go-top{ transform: scale(1.1); }

/* =========================================================
   Subpage Layout
========================================================= */
.page-hero{
  background: var(--gray-50);
  border-bottom: 1px solid var(--line);
  padding: 28px 0 22px;
}

.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
}
.breadcrumbs a{ color: var(--blue-700); }
.breadcrumbs a:hover{ text-decoration: underline; }

.page-title{
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 900;
  line-height: 1.05;
}
.page-lead{
  margin-top: 10px;
  color: var(--muted);
  max-width: 78ch;
  font-size: 22px;
  line-height: 1.6;
}

.page{ padding: var(--section-pad) 0; }

.page-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px){
  .page-grid{ grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}

.page-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.page-main{ min-width: 0; }
.page-aside{ min-width: 0; }

.prose p{
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 1.65;
}
.prose ul{
  margin: 8px 0 14px 18px;
  color: var(--gray-700);
  font-size: 22px;
  line-height: 1.65;
}
.prose li{ margin-bottom: 6px; }

.sidecard__list{ margin:0; padding-left: 18px; color: var(--gray-700); }
.sidecard__list a{ color: var(--blue-700); }
.sidecard__list a:hover{ text-decoration: underline; }
.sidecard__text{ color: var(--gray-700); line-height: 1.6; }
.sidecard__actions{ display:flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* =========================================================
   Subpage Components
========================================================= */
.media{
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background:#fff;
}
.media img{ width:100%; height:220px; object-fit: cover; }
.media__cap{ padding: 10px 12px; color: var(--gray-700); font-size: 30px; line-height: 1.4; }

.trustees-cta{
  display:flex;
  align-items:end;
  justify-content:center;
  min-height: 260px;
  font-size: 30px;
}

/* Docs */
.doclist{ display:flex; flex-direction: column; gap: 12px; }

.doc{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:#fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.doc:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: rgba(37,99,235,.35);
}
.doc__icon svg{ width:28px; height:28px; }
.doc__meta{ min-width:0; }
.doc__name{ font-weight: 900; }
.doc__sub{ color: var(--muted); font-size: 14px; margin-top: 2px; }
.doc__cta{ margin-left:auto; }

/* Make the little "Open" button not steal clicks from the <a> */
.doc .btn{ pointer-events:none; }

/* =========================================================
   Posts (detail layout)
========================================================= */
.post-wrap{
  background:#fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
}

.post-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--gray-50);
}

.post-meta{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  color: var(--muted);
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
}
.post-meta time{ font-weight: 900; }

.post-body{ padding: 22px; }

.post-media{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  background:#fff;
}
.post-media + .post-text{ margin-top: 16px; }

.post-media img{ width:100%; height:auto; display:block; }

.post-media iframe{
  width:100%;
  height: min(72vh, 760px);
  border:0;
  display:block;
  background:#fff;
}

.post-media .embed{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  background:#000;
}
.post-media .embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

.post-text p{
  margin: 0 0 14px;
  color: var(--gray-700);
  font-size: 18px;
  line-height: 1.65;
}
.post-text p:last-child{ margin-bottom: 0; }

.post-text h2{
  margin: 20px 0 10px;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.15;
}
.post-text h3{
  margin: 18px 0 10px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
}

.post-text ul{
  margin: 8px 0 14px 18px;
  color: var(--gray-700);
  font-size: 18px;
  line-height: 1.65;
}
.post-text li{ margin-bottom: 6px; }

.post-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* =========================================================
   Rates & Fees — page-scoped readability
   (Add class="rates-page" on <body>)
========================================================= */
.rates-page{ font-size: 18px; }
.rates-page .page-title{ font-size: clamp(38px, 3.4vw, 56px); }
.rates-page .page-lead{ font-size: 24px; line-height: 1.7; }
.rates-page .box__title{ font-size: 36px; }
.rates-page .pill{ font-size: 14px; padding: 8px 12px; }
.rates-page .breadcrumbs{ font-size: 16px; }
.rates-page .card__top h3{ font-size: 32px; }
.rates-page .card__body{
  font-size: 26px;
  line-height: 1.75;
  color: var(--ink);
}
.rates-page .card__body ul{ padding-left: 22px; }
.rates-page .card__body li{ margin-bottom: 10px; }
.rates-page .card__sub{ font-size: 20px; line-height: 1.5; margin: 0; }

/* =========================================================
   Split Content Grid (50 / 50)
========================================================= */
.split-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 1024px){
  .split-grid{ grid-template-columns: 1fr 1fr; align-items:start; }
}
.split-col{ min-width:0; }

/* =========================================================
   Customer Relations
========================================================= */
.customer-relations-cta{
  margin-top: 24px;
  display:flex;
  flex-direction: column;
  gap: 14px;
}
.customer-relations-cta .btn{
  font-size: 18px;
  padding: 14px 18px;
  border-radius: 14px;
}
@media (min-width: 640px){
  .customer-relations-cta{ flex-direction: row; }
  .customer-relations-cta .btn{ flex: 1; }
}

.management-grid{
  margin-top: 18px;
  display:flex;
  flex-direction: column;
  gap: 16px;
}
.management-card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  background: #EAEEFA;
}
.management-role{
  font-weight: 900;
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 6px;
}
.management-name{ font-size: 20px; }

/* =========================================================
   Utility Engineering (page-scoped)
========================================================= */
.utility-engineering-page .page-subnav{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.utility-engineering-page .ue-hero-img{
  width:100%;
  height:auto;
  display:block;
}

.utility-engineering-page .ue-project__media{
  display:block;
  border-radius: var(--radius);
  overflow:hidden;
}
.utility-engineering-page .ue-project__media img{
  width:100%;
  height: 220px;
  object-fit: cover;
  display:block;
}

.utility-engineering-page .ue-note{
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--gray-50);
}

.utility-engineering-page .ue-intro{
  font-size: 18px;
  line-height: 1.7;
  max-width: 80ch;
  margin: 10px 0 0;
}

/* Staff list cards */
.staff-list{
  display:flex;
  flex-direction: column;
  gap: 16px;
}
.staff-card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  background:#fff;
}
.staff-role{
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 4px;
}
.staff-name{
  font-size: 20px;
  color: var(--gray-700);
  margin-bottom: 6px;
}
.staff-meta{
  font-size: 16px;
  color: var(--gray-700);
}

/* =========================================================
   Accordion (FAQ)

========================================================= */

.accordion{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

/* Each FAQ row */
.accordion__item{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(2,6,23,.02);
}

/* Remove default marker */
.accordion__summary{
  list-style: none;
}
.accordion__summary::-webkit-details-marker{
  display:none;
}

/* Clickable summary row */
.accordion__summary{
  cursor: pointer;
  padding: 16px 18px;

  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;

  font-weight: 900;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);

  background: linear-gradient(180deg, #fff, #fbfdff);
}

.accordion__summary:focus-visible{
  outline: 2px solid rgba(96,165,250,.95);
  outline-offset: 2px;
}

/* Chevron (pure CSS) */
.accordion__summary::after{
  content:"";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 4px;

  border-right: 3px solid var(--blue-700);
  border-bottom: 3px solid var(--blue-700);
  transform: rotate(45deg);
  transition: transform .18s ease;
  opacity: .9;
}

/* Open state */
.accordion__item[open] .accordion__summary{
  background: rgb(190, 218, 255);
  border-bottom: 1px solid var(--line);
}
.accordion__item[open] .accordion__summary::after{
  transform: rotate(-135deg); /* points up */
}

/* Content panel */
.accordion__content{
  padding: 14px 18px 18px;
  color: var(--gray-700);
}

/* Make prose inside accordion a bit tighter */
.accordion__content.prose p{
  margin: 0;
  font-size: 20px;
  line-height: 1.65;
}

/* Optional: subtle “active” outline */
.accordion__item[open]{
  border-color: rgba(37,99,235,.35);
  box-shadow: var(--shadow);
}

/* Mobile tuning */
@media (max-width: 640px){
  .accordion__summary{
    font-size: 18px;
    padding: 14px 14px;
  }
  .accordion__content{
    padding: 12px 14px 14px;
  }
  .accordion__content.prose p{
    font-size: 18px;
  }
}

/* ===== FAQ Media (small, consistent images) ===== */

.accordion__content .faq-media-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.accordion__content .faq-media{
  width: 100%;
  max-width: 880px;              /* keeps FAQ images small */
  margin: 0 auto;                /* centers single images */
}

.accordion__content .faq-media img{
  width: 100%;
  aspect-ratio: 4 / 3;           /* consistent size across all FAQ images */
  object-fit: contain;           /* preserves diagrams/text */
  background: #fff;

  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(2, 6, 23, 0.06);
  padding: 8px;                  /* breathing room for diagrams */
}

/* Mobile: slightly larger tap targets */
@media (max-width: 640px){
  .accordion__content .faq-media{
    max-width: 100%;
  }
}

/* =========================================================
   Utilities Shared UI
   - UE Gallery + Lightbox (shared)
   - Water Systems Tabs (only on .water-systems-page)
   Used on:
   - body.utility-engineering-page
   - body.water-systems-page
========================================================= */

/* =========================================================
   UE Gallery (horizontal scroll) — shared
========================================================= */
:where(.utility-engineering-page, .water-systems-page) .ue-gallery{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 420px);
  gap: 16px;

  overflow-x: auto;
  padding: 6px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  border-radius: var(--radius);
}

:where(.utility-engineering-page, .water-systems-page) .ue-gallery::-webkit-scrollbar{ height: 10px; }
:where(.utility-engineering-page, .water-systems-page) .ue-gallery::-webkit-scrollbar-thumb{
  background: rgba(15, 23, 42, .18);
  border-radius: 999px;
}
:where(.utility-engineering-page, .water-systems-page) .ue-gallery::-webkit-scrollbar-track{
  background: rgba(15, 23, 42, .06);
  border-radius: 999px;
}

:where(.utility-engineering-page, .water-systems-page) .ue-gallery__item{
  display: block;
  scroll-snap-align: start;
  overflow: hidden;

  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 2px 0 rgba(2,6,23,.02);

  transition: transform .18s ease, box-shadow .18s ease;
}

:where(.utility-engineering-page, .water-systems-page) .ue-gallery__item:hover,
:where(.utility-engineering-page, .water-systems-page) .ue-gallery__item:focus-visible{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

:where(.utility-engineering-page, .water-systems-page) .ue-gallery__item img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px){
  :where(.utility-engineering-page, .water-systems-page) .ue-gallery{
    grid-auto-columns: minmax(220px, 320px);
  }
  :where(.utility-engineering-page, .water-systems-page) .ue-gallery__item img{
    height: 220px;
  }
}

/* =========================================================
   UE Lightbox (side caption layout) — shared
========================================================= */
:where(.utility-engineering-page, .water-systems-page) .ue-lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;

  width: 100vw;
  height: 100vh;
  height: 100dvh;

  display: none;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,.85);
}
:where(.utility-engineering-page, .water-systems-page) .ue-lightbox.is-open{ display: flex; }

:where(.utility-engineering-page, .water-systems-page) .ue-lightbox__panel{
  position: relative;
  width: min(1800px, 100vw);
  max-height: 100vh;
  margin: auto;
  padding: 20px;
}

:where(.utility-engineering-page, .water-systems-page) .ue-lightbox__content{
  display: grid;
  grid-template-columns: 2.2fr 1.3fr;
  gap: 16px;
  align-items: stretch;
}

:where(.utility-engineering-page, .water-systems-page) .ue-lightbox__media,
:where(.utility-engineering-page, .water-systems-page) .ue-lightbox__caption{
  max-height: 80vh;
}

:where(.utility-engineering-page, .water-systems-page) .ue-lightbox__media{
  display: flex;
  align-items: center;
  justify-content: center;

  background: #000;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  overflow: hidden;
}

:where(.utility-engineering-page, .water-systems-page) .ue-lightbox__img{
  width: 100%;
  height: 100%;
  max-height: 80vh;
  object-fit: contain;
  display: block;
}

:where(.utility-engineering-page, .water-systems-page) .ue-lightbox__caption{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  padding: 18px 20px;
  overflow: auto;

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: var(--blue-900);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

:where(.utility-engineering-page, .water-systems-page) .ue-lightbox__title{
  margin: 0 0 12px;
  color: #fff;
  font-weight: 900;
  font-size: 40px;
  line-height: 1.25;
}

:where(.utility-engineering-page, .water-systems-page) .ue-lightbox__desc{
  color: rgba(229,231,235,.95);
  font-size: 24px;
  line-height: 1.55;
}
:where(.utility-engineering-page, .water-systems-page) .ue-lightbox__desc + .ue-lightbox__desc{
  margin-top: 10px;
}

:where(.utility-engineering-page, .water-systems-page) .ue-lightbox__close{
  position: absolute;
  top: -10px;
  right: -10px;

  width: 44px;
  height: 44px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.6);
  color: #fff;

  font-size: 28px;
  line-height: 1;
  cursor: pointer;

  transition: transform .18s ease, background .18s ease;
}
:where(.utility-engineering-page, .water-systems-page) .ue-lightbox__close:hover{
  background: rgba(0,0,0,.8);
  transform: scale(1.04);
}

:where(.utility-engineering-page, .water-systems-page) .ue-lightbox__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 48px;
  height: 48px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.55);
  color: #fff;

  font-size: 32px;
  line-height: 1;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: background .18s ease, transform .18s ease;
  z-index: 2;
}

:where(.utility-engineering-page, .water-systems-page) .ue-lightbox__nav:hover{
  background: rgba(0,0,0,.8);
  transform: translateY(-50%) scale(1.05);
}

:where(.utility-engineering-page, .water-systems-page) .ue-lightbox__nav--prev{ left: -14px; }
:where(.utility-engineering-page, .water-systems-page) .ue-lightbox__nav--next{ right: -14px; }

@media (max-width: 900px){
  :where(.utility-engineering-page, .water-systems-page) .ue-lightbox__content{
    grid-template-columns: 1fr;
  }

  :where(.utility-engineering-page, .water-systems-page) .ue-lightbox__media{
    max-height: 60vh;
  }

  :where(.utility-engineering-page, .water-systems-page) .ue-lightbox__caption{
    max-height: none;
  }

  :where(.utility-engineering-page, .water-systems-page) .ue-lightbox__nav--prev{ left: 8px; }
  :where(.utility-engineering-page, .water-systems-page) .ue-lightbox__nav--next{ right: 8px; }
}

/* =========================================================
   Water Systems — Tabs (polished)
========================================================= */
.water-systems-page .ws-tablist{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;

  padding: 14px 16px;
  background: var(--blue-900);
  border-bottom: 1px solid rgba(255,255,255,.14);

  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.water-systems-page .ws-tablist::-webkit-scrollbar{ height: 10px; }
.water-systems-page .ws-tablist::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.22);
  border-radius: 999px;
}
.water-systems-page .ws-tablist::-webkit-scrollbar-track{
  background: rgba(255,255,255,.08);
  border-radius: 999px;
}

.water-systems-page .ws-tab{
  appearance:none;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: #fff;

  border-radius: 999px;
  padding: 10px 14px;

  font-weight: 900;
  font-size: 18px;
  line-height: 1;

  cursor:pointer;
  white-space: nowrap;
  flex: 0 0 auto;

  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.water-systems-page .ws-tab:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.45);
}

.water-systems-page .ws-tab[aria-selected="true"]{
  background: #fff;
  color: var(--blue-900);
  border-color: rgba(255,255,255,.95);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
}

.water-systems-page .ws-tab:focus-visible{
  outline: 2px solid rgba(96,165,250,.95);
  outline-offset: 2px;
}

.water-systems-page .ws-tabpanel{ padding: 22px; }
@media (max-width: 640px){
  .water-systems-page .ws-tab{ font-size: 16px; padding: 9px 12px; }
  .water-systems-page .ws-tabpanel{ padding: 16px; }
}

.archive-block{
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.archive-block:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

.archive-title{
  margin: 0 0 10px;
  font-weight: 900;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.25;
}

.archive-list{
  margin: 0;
  padding-left: 18px;
}
.archive-list li{ margin-bottom: 8px; }

.archive-list a{
  text-decoration: none;
  border-bottom: 1px dotted rgba(4, 44, 76, 0.35);
}
.archive-list a:hover{
  border-bottom-style: solid;
}

.page-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

/* Make side-by-side images fill their grid column and feel equal to text width */
.meter-reading-page .media {
  width: 100%;
}

/* Create a consistent "frame" so the image feels as big as the text column */
.meter-reading-page .media > img {
  width: 100%;
  /* height: clamp(260px, 28vw, 420px); */
  height: 100%;
  object-fit: cover;
  display: block;
}

/* On smaller screens let it go natural */
@media (max-width: 900px) {
  .meter-reading-page .media > img {
    height: auto;
  }
}

.tm-hero-media img{
  width: 100%;
  height: auto;
  display: block;
}

.tm-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

/* Reports list blocks: same vibe as your other “doc lists” */
.tm-reportBlock{
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.tm-reportBlock:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}
.tm-reportTitle{
  margin: 0 0 8px;
  font-weight: 900;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.3;
}
.tm-reportList{
  margin: 0;
  padding-left: 18px;
}
.tm-reportList a{
  text-decoration: none;
  border-bottom: 1px dotted rgba(4, 44, 76, 0.35);
}
.tm-reportList a:hover{
  border-bottom-style: solid;
}

/* Optional: make the budget chart behave nicely */
.tm-chart{
  max-width: 720px;
  margin: 0 auto;
}
.tm-chart img{
  width: 100%;
  height: auto;
  display: block;
}

/* Optional variant: red PDF icon pill */
.doc__icon--pdf{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(220,53,69,.10);
  flex: 0 0 42px;
}
.doc__icon--pdf svg{ width: 22px; height: 22px; color: rgb(220,53,69); }