/* ==========================================================================
   MP Ensystems — clean rebuild (interim GCP migration, no Squarespace runtime)
   Palette = confirmed exact brand hex values from the live site's own CSS
   (--accent-hsl, --black-hsl, --darkAccent-hsl, --lightAccent-hsl), same
   values already verified while rebuilding EarthAware (an MP Ensystems
   affiliate brand sharing this exact palette).
   ========================================================================== */

:root{
  --navy:#0A1B51;         /* site's "black" — headings, nav, footer, wordmark */
  --blue:#126A96;         /* site's "accent" — links, primary buttons, pills */
  --blue-hover:#0E5478;
  --blue-tint:#E8F1F6;
  --green:#139B48;        /* site's "darkAccent" — headline impact statements */
  --green-tint:#E7F5EC;
  --ink-900:#16201A;
  --ink-600:#4C594F;
  --bg:#FFFFFF;
  --bg-tint:#F5F5F7;      /* site's "lightAccent" */
  --font-head:"Open Sans","Segoe UI",system-ui,sans-serif;
  --font-body:"Open Sans","Segoe UI",system-ui,sans-serif;
  --container:1200px;
  --radius:14px;
  --shadow:0 16px 40px rgba(10,27,81,.12);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font-body); color:var(--ink-900); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.65;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ font-family:var(--font-head); font-weight:700; margin:0; line-height:1.2; color:var(--navy); }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:80px 0; }
.section-sm{ padding:48px 0; }
.bg-tint{ background:var(--bg-tint); }
.section-head{ max-width:720px; margin-bottom:36px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow{ display:inline-block; font-weight:700; font-size:.88rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:10px; }
.section-head h2{ font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:10px; }
.section-head p{ color:var(--ink-600); }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:999px;
  font-weight:700; font-size:.9rem; border:1.5px solid transparent; transition:all .2s ease;
}
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-hover); transform:translateY(-2px); }
.btn-outline{ border-color:rgba(10,27,81,.22); color:var(--navy); }
.btn-outline:hover{ background:var(--blue-tint); border-color:var(--blue); }
.appliance-cta{ border-radius:8px; padding:16px 32px; font-size:1rem; }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid rgba(10,27,81,.08); }
.header-top{ display:flex; align-items:center; padding:14px 24px; max-width:1400px; margin:0 auto; gap:18px; }
.brand-logo{ height:36px; width:auto; flex-shrink:0; }
.decade-badge-img{ height:56px; width:auto; flex-shrink:0; }

.nav-main{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; flex:1; }
.nav-main > li{ position:relative; list-style:none; }
.nav-main a{ font-weight:600; font-size:.93rem; color:var(--navy); transition:color .2s ease; white-space:nowrap; }
.nav-main a:hover{ color:var(--blue); }
.nav-dropdown .dropdown-menu{
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:#fff; border:1px solid #e8edf3; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.1); min-width:180px; padding:8px 0; z-index:200; margin-top:2px; list-style:none;
}
.nav-dropdown:hover .dropdown-menu{ display:block; }
.nav-dropdown > a::after{ content:" ▾"; font-size:.7rem; }
.dropdown-menu li a{
  display:block; padding:10px 18px; font-size:.84rem; font-weight:600;
  color:var(--navy); white-space:nowrap; transition:background .15s ease;
}
.dropdown-menu li a:hover{ background:var(--blue-tint); color:var(--blue); }
.nav-toggle{ display:none; background:none; border:none; padding:6px; flex-shrink:0; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:24px; height:2px; background:var(--navy); border-radius:2px; position:relative; transition:.2s ease;
}
.nav-toggle span::before{ position:absolute; top:-8px; }
.nav-toggle span::after{ position:absolute; top:8px; }

/* ---------- Hero ---------- */
.hero{ background:var(--bg-tint); padding:56px 24px 64px; text-align:center; }
.hero h1{ color:var(--green); font-size:clamp(1.5rem,3.4vw,2.3rem); max-width:980px; margin:0 auto; line-height:1.35; }

.impact-band{ padding:64px 0 24px; text-align:center; }
.impact-band .impact-title{ color:var(--blue); font-size:clamp(1.6rem,3.4vw,2.4rem); letter-spacing:.02em; font-weight:700; }
.impact-band .impact-sub{ color:var(--green); font-weight:700; font-size:1.1rem; margin:10px 0 18px; }
.impact-band .impact-desc{ color:var(--ink-600); max-width:720px; margin:0 auto 36px; }
.impact-photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; max-width:var(--container); margin:0 auto; }
.impact-photos img{ width:100%; height:280px; object-fit:cover; }

/* ---------- Core Verticals (pill/button cards) ---------- */
.vertical-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.vertical-card{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--blue); color:#fff; font-weight:700; font-size:.92rem;
  border-radius:10px; padding:18px 16px; min-height:64px; transition:transform .2s ease, background .2s ease;
}
.vertical-card:hover{ background:var(--blue-hover); transform:translateY(-3px); }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:563.33px 1fr; gap:40px; align-items:center; text-align:left; }
.about-text p{ color:var(--ink-600); margin-bottom:16px; }
.about-cta{ text-align:center; margin-top:24px; }
.about-img{ width:563.33px; height:480.99px; max-width:100%; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); }

/* ---------- Amplifying Impact carousel ---------- */
.impact-carousel-wrap{ display:flex; gap:4px; align-items:center; }
.impact-fixed{ flex:0 0 300px; height:380px; object-fit:cover; border-radius:var(--radius) 0 0 var(--radius); }
.impact-scroll{ flex:1; overflow:hidden; position:relative; border-radius:0 var(--radius) var(--radius) 0; background:var(--bg-tint); }
.impact-track{ display:flex; gap:4px; width:max-content; }
.impact-track img{ height:380px; width:340px; object-fit:contain; background:var(--bg-tint); flex-shrink:0; }
.carousel-arrow{
  z-index:5; width:36px; height:36px; border-radius:6px;
  background:var(--navy); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:#fff;
}
.carousel-arrow:hover{ background:var(--blue); }
.impact-carousel-wrap{ position:relative; }
.impact-arrow{ position:absolute; bottom:14px; z-index:10; }
.impact-arrow.prev{ right:58px; } .impact-arrow.next{ right:14px; }
.impact-narrative{ display:grid; grid-template-columns:7fr 5fr; gap:40px; margin-top:44px; align-items:start; }
.impact-story h3{ font-size:1.4rem; margin-bottom:16px; }
.impact-story p{ color:var(--ink-600); margin-bottom:14px; }
.impact-launch-box{ background:var(--bg-tint); border-top:4px solid var(--green); border-radius:8px; padding:28px; }
.impact-launch-box h4{ font-size:1.15rem; color:var(--blue); margin-bottom:12px; }
.impact-launch-box p{ color:var(--ink-600); margin-bottom:20px; }
@media(max-width:700px){ .impact-narrative{ grid-template-columns:1fr; } }
.scroll-carousel-wrap{ position:relative; }
.scroll-carousel-wrap .carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); border-radius:50%; background:#fff;
  border:1px solid rgba(10,27,81,.15); box-shadow:var(--shadow); color:var(--navy);
}
.scroll-carousel-wrap .carousel-arrow:hover{ background:var(--blue-tint); }
.scroll-carousel-wrap .carousel-arrow.prev{ left:-18px; } .scroll-carousel-wrap .carousel-arrow.next{ right:-18px; }
@media(max-width:700px){
  .impact-carousel-wrap{ flex-direction:column; }
  .impact-fixed{ flex-basis:auto; width:100%; height:220px; border-radius:var(--radius) var(--radius) 0 0; }
  .impact-scroll{ border-radius:0 0 var(--radius) var(--radius); }
  .impact-track img{ height:220px; width:220px; }
  .about-grid{ grid-template-columns:1fr; }
  .about-img{ width:100%; height:auto; aspect-ratio:563.33/480.99; max-height:480px; }
}

/* ---------- Services ---------- */
.services-text{ color:var(--ink-600); max-width:900px; margin:0 auto 8px; text-align:center; }
.service-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:32px; }
.service-card{ background:#fff; border:1px solid rgba(10,27,81,.08); border-radius:var(--radius); padding:26px 20px; text-align:left; box-shadow:0 6px 20px rgba(10,27,81,.06); }
.service-card img{ width:44px; height:44px; object-fit:contain; margin-bottom:16px; }
.service-card h4{ font-size:.98rem; }

/* ---------- Horizontal scroll carousel (Blog / Projects) ---------- */
.scroll-carousel-wrap{ position:relative; }
.scroll-carousel{ display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px 2px 12px; }
.scroll-carousel::-webkit-scrollbar{ display:none; }
.scroll-carousel .content-card{
  flex:0 0 calc((100% - 44px)/3); scroll-snap-align:start;
  height:560px; padding:0; overflow:hidden;
}
.scroll-carousel .content-card img{
  width:100%; height:50%; flex:0 0 50%; margin:0; border-radius:0;
}
.scroll-carousel .content-card h4,
.scroll-carousel .content-card p,
.scroll-carousel .content-card .link{
  margin-left:24px; margin-right:24px;
}
.scroll-carousel .content-card h4{
  margin-top:18px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.scroll-carousel .content-card p{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
}
.scroll-carousel .content-card .link{ margin-top:auto; margin-bottom:20px; flex-shrink:0; }
.scroll-carousel .content-card p{ flex:0 0 auto; }
@media(max-width:980px){ .scroll-carousel .content-card{ flex-basis:calc((100% - 22px)/2); } }
@media(max-width:700px){ .scroll-carousel .content-card{ flex-basis:88%; height:520px; } }

/* ---------- Card grids (Blog / Projects / Careers) ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.content-card{
  background:#fff; border:1px solid rgba(10,27,81,.08); border-radius:var(--radius);
  padding:24px; box-shadow:0 6px 20px rgba(10,27,81,.06); transition:transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column;
}
.content-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.content-card img{ width:100%; height:150px; object-fit:cover; border-radius:10px; margin-bottom:14px; }
.df-container{ max-width:1320px; }
.df-cards{ gap:20px; }
.df-cards .content-card p{ flex:1; }
.df-cards .content-card .btn{ margin-top:auto; }
.df-cards .content-card img{ height:auto; aspect-ratio:1.3333; object-fit:cover; background:none; margin-bottom:16px; }
.df-cards .content-card h4{ font-size:1.15rem; margin-bottom:8px; }
.content-card h4{ font-size:1.05rem; margin-bottom:10px; }
.content-card p{ color:var(--ink-600); font-size:.9rem; line-height:1.6; flex:1; margin-bottom:14px; }
.content-card .link{ font-weight:700; font-size:.85rem; color:var(--blue); }
.content-card .tag{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--green); margin-bottom:8px; }

.subsection-label{ font-size:.85rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); margin:36px 0 18px; }
.subsection-label:first-child{ margin-top:0; }
.project-band{
  background:var(--blue); color:#fff; text-align:center; font-size:1.3rem; letter-spacing:.06em;
  padding:22px 24px; margin:24px calc(50% - 50vw) 32px; width:100vw; max-width:100vw;
}
/* Project cards — one fixed size for every card; "View details" opens the full card */
#projects .proj-card{ height:480px; padding:0; cursor:pointer; }
#projects .proj-card img{ height:140px; flex:0 0 140px; object-fit:contain; padding:20px 24px 0; }
.proj-body{ flex:1; min-height:0; overflow:hidden; position:relative; padding:18px 24px 0; }
.proj-body::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:56px; pointer-events:none;
  background:linear-gradient(rgba(255,255,255,0), #fff);
}
#projects .proj-body h4,
#projects .proj-body p{ display:block; -webkit-line-clamp:unset; overflow:visible; margin:0 0 10px; }
#projects .proj-body h4{ margin-bottom:8px; }
#projects .proj-body p{ font-size:.85rem; }
.proj-field strong{ color:var(--navy); }
.proj-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  height:64px; padding:0 24px; border-top:1px solid rgba(10,27,81,.08); flex-shrink:0;
}
.proj-more{ background:none; border:0; padding:0; font:inherit; font-weight:700; font-size:.85rem; color:var(--blue); cursor:pointer; }
.proj-more::after{ content:" +"; }
.proj-more:hover{ color:var(--blue-hover); text-decoration:underline; }
.proj-report{ border-radius:8px; padding:9px 20px; }
.proj-foot .proj-report{ display:none; }   /* shown only in the "View details" pop-up */

/* Project details pop-up */
.proj-modal{
  border:0; border-radius:var(--radius); padding:0; width:min(720px, calc(100% - 32px));
  max-height:85vh; overflow:hidden; box-shadow:var(--shadow); color:var(--ink-900);
}
.proj-modal::backdrop{ background:rgba(10,27,81,.55); }
.proj-modal-body{ padding:36px 32px 32px; max-height:85vh; overflow-y:auto; }
.proj-modal-body img{ display:block; height:100px; width:auto; max-width:70%; object-fit:contain; margin-bottom:20px; }
.proj-modal-body h4{ font-size:1.25rem; margin-bottom:12px; padding-right:32px; }
.proj-modal-body p{ color:var(--ink-600); font-size:.95rem; line-height:1.7; margin-bottom:12px; }
.proj-modal-body .proj-field:first-child{ padding-right:32px; }
.proj-modal-body .proj-report{ margin-top:12px; }
.proj-modal-close{
  position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:0;
  background:var(--bg-tint); color:var(--navy); font-size:1.4rem; line-height:1; cursor:pointer;
}
.proj-modal-close:hover{ background:var(--blue-tint); }

/* ---------- Videos ---------- */
.video-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.video-embed{ position:relative; padding-top:56.25%; border-radius:var(--radius); overflow:hidden; background:#000; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- Team ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.team-card{ text-align:center; }
.team-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:left center; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:14px; }
.team-card h4{ font-size:.95rem; margin-bottom:2px; }
.team-card .role{ color:var(--blue); font-weight:600; font-size:.78rem; }
.team-card a:hover img{ opacity:.9; }

/* ---------- Careers ---------- */
.careers-band{ text-align:center; padding:56px 24px; border-radius:var(--radius); background:var(--green-tint); margin-bottom:8px; }

/* ---------- Footer ---------- */
.site-footer{ background:#F2F8FB; color:var(--ink-900); padding:56px 0 0; }
.footer-grid{ display:grid; grid-template-columns:240px 1fr 1fr; gap:48px; align-items:start; padding-bottom:44px; }
.footer-logo{ height:32px; width:auto; margin-bottom:22px; }
.footer-social{ display:flex; gap:12px; margin-bottom:28px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; color:#fff;
  display:flex; align-items:center; justify-content:center; transition:opacity .2s ease;
}
.footer-social a[aria-label="LinkedIn"]{ background:#0077B5; }
.footer-social a[aria-label="YouTube"]{ background:#FF0000; }
.footer-social a:hover{ opacity:.85; }
.footer-brand .footer-links{ display:flex; flex-direction:column; gap:14px; }
.footer-links a{ color:var(--blue); font-weight:600; font-size:.92rem; }
.footer-links a:hover{ color:var(--blue-hover); }
.footer-map iframe{ border-radius:var(--radius); display:block; }
.footer-contact h4{ font-size:1.3rem; color:var(--navy); margin-bottom:22px; }
.footer-contact-item{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.footer-icon{
  flex-shrink:0; width:40px; height:40px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.footer-contact-item p{ color:var(--ink-600); font-size:.94rem; line-height:1.6; margin:0; }
.footer-cin{ color:var(--ink-900); font-size:.92rem; margin-top:24px; }
.footer-bottom-wrap{ background:var(--blue-hover); }
.footer-bottom{
  display:flex; align-items:center; justify-content:center; gap:20px;
  padding:22px 24px; font-size:.9rem; color:#fff; position:relative;
}
.back-to-top{
  width:40px; height:40px; border-radius:50%; background:#fff; border:1.5px solid rgba(255,255,255,.5);
  color:var(--blue-hover); display:flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:1.2rem; flex-shrink:0; transition:background .2s ease; position:absolute; right:24px;
}
.back-to-top:hover{ background:var(--bg-tint); }

/* ---------- Legal pages (Privacy Policy / Terms of Use) ---------- */
.legal-page{ max-width:var(--container); margin:0 auto; padding:56px 24px 100px; }
.legal-page h1{ font-size:2.0375rem; color:var(--blue); margin-bottom:26px; }
.legal-page .legal-divider{ border:none; border-top:1px solid rgba(10,27,81,.15); margin:0 0 40px; }
.legal-page h2{ font-size:1.15rem; color:var(--blue); margin:34px 0 14px; }
.legal-page p{ color:var(--ink-600); font-size:.96rem; line-height:1.8; margin-bottom:16px; }

/* ---------- Detail pages (Team bio / Blog post / Project / Career) ---------- */
.detail-page{ max-width:900px; margin:0 auto; padding:56px 24px 100px; }
.detail-back{ display:inline-block; margin-bottom:28px; color:var(--blue); font-weight:700; font-size:.9rem; }
.bio-hero{ display:flex; align-items:center; gap:28px; margin-bottom:36px; flex-wrap:wrap; }
.bio-photo{ width:160px; height:160px; border-radius:50%; object-fit:cover; box-shadow:var(--shadow); flex-shrink:0; }
.bio-avatar{ width:160px; height:160px; border-radius:50%; background:var(--blue-tint); color:var(--blue); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:2.2rem; flex-shrink:0; }
.detail-page:has(.bio-hero){ max-width:960px; padding-top:64px; padding-bottom:180px; }
.bio-name{ font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:6px; }
.bio-role{ color:var(--blue); font-weight:700; font-size:1rem; }
.detail-page .eyebrow{ display:block; }
.detail-body p{ color:var(--ink-600); font-size:1rem; line-height:1.85; margin-bottom:18px; }
.detail-body h3{ font-size:1.15rem; color:var(--navy); margin:30px 0 12px; }
.detail-hero-img{ width:100%; max-height:420px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:32px; }
.detail-meta{ color:var(--ink-600); font-size:.92rem; margin-bottom:28px; }
.detail-pdf-cta{ text-align:center; padding:48px 24px; background:var(--bg-tint); border-radius:var(--radius); }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .vertical-grid{ grid-template-columns:repeat(2,1fr); }
  .card-grid{ grid-template-columns:repeat(2,1fr); }
  .team-grid{ grid-template-columns:repeat(3,1fr); }
  .impact-photos{ grid-template-columns:repeat(3,1fr); }
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .about-grid{ grid-template-columns:1fr; }
  .video-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .decade-badge-img{ height:42px; }
  .nav-main{
    position:fixed; top:64px; right:0; bottom:0; left:0; background:#fff; flex-direction:column; align-items:flex-start;
    padding:24px; gap:18px; transform:translateX(100%); transition:transform .25s ease; overflow-y:auto; z-index:99;
  }
  .nav-main.mobile-open{ transform:translateX(0); }
  .nav-toggle{ display:block; }
}
@media (max-width:700px){
  .vertical-grid{ grid-template-columns:1fr; }
  .card-grid{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .impact-photos{ grid-template-columns:1fr; }
  .service-grid{ grid-template-columns:1fr; }
  .video-grid{ grid-template-columns:1fr; }
  .section{ padding:56px 0; }
  .footer-grid{ grid-template-columns:1fr; }
}

/* ---------- GRVC Phase I dashboard + login ---------- */
.grvc-head{ background:var(--blue-tint); padding:28px 0 32px; }
.grvc-head-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.grvc-crumbs{ display:flex; flex-wrap:wrap; gap:6px; font-size:.85rem; color:var(--ink-600); }
.grvc-crumbs a:hover{ color:var(--blue); }
.grvc-crumbs .sep{ opacity:.5; }
.grvc-crumbs .here{ font-weight:700; color:var(--navy); }
.grvc-head h1{ margin-top:18px; font-size:clamp(1.5rem,3vw,2.3rem); color:var(--green); }
.grvc-head p{ margin-top:10px; max-width:760px; color:var(--ink-600); }
.grvc-back{ padding:9px 22px; line-height:1; }
.grvc-back svg{ flex:none; display:block; }

.grvc-split{ display:grid; grid-template-columns:1.35fr 1fr; gap:40px; align-items:start; }
.grvc-map{ position:relative; border:1px solid rgba(10,27,81,.14); border-radius:var(--radius); overflow:hidden; background:var(--bg-tint); box-shadow:var(--shadow); }
.grvc-map img{ width:100%; height:auto; }
.grvc-label{ font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:14px; }
.grvc-btn-list{ display:flex; flex-direction:column; gap:14px; }
.grvc-btn{
  display:block; background:var(--blue); color:#fff; padding:15px 24px; border-radius:10px;
  font-weight:700; text-align:center; transition:background .2s ease, transform .2s ease;
}
.grvc-btn:hover{ background:var(--blue-hover); transform:translateY(-2px); }

.grvc-districts{ background:var(--blue-tint); padding:56px 0; }
.grvc-district-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grvc-district{ display:block; background:#fff; border-radius:12px; padding:12px; box-shadow:0 4px 14px rgba(10,27,81,.08); transition:box-shadow .2s ease, transform .2s ease; }
a.grvc-district:hover{ box-shadow:0 10px 26px rgba(10,27,81,.16); transform:translateY(-3px); }
.grvc-district img{ width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid rgba(10,27,81,.14); border-radius:8px; background:#fff; }
.grvc-district span{ display:block; margin-top:10px; text-align:center; font-weight:700; color:var(--blue); }

.grvc-fpo-hero{ position:relative; overflow:hidden; background:var(--navy); }
.grvc-fpo-hero-bg{ position:absolute; inset:-20px; width:calc(100% + 40px); height:calc(100% + 40px); max-width:none; object-fit:cover; filter:blur(6px); }
.grvc-fpo-hero::after{ content:""; position:absolute; inset:0; background:rgba(10,27,81,.4); }
.grvc-fpo-hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; padding:44px 24px; }
.grvc-fpo-photo{ border:4px solid #fff; border-radius:10px; overflow:hidden; box-shadow:0 12px 32px rgba(0,0,0,.35); aspect-ratio:4/3; }
.grvc-fpo-photo img{ width:100%; height:100%; object-fit:cover; }
.grvc-fpo-hero h2{ color:#fff; text-align:center; font-size:clamp(1.7rem,3.2vw,2.6rem); }

.grvc-band{ background:var(--green); color:#fff; padding:36px 0; }
.grvc-band h3{ color:#fff; text-align:center; font-size:1.1rem; }
.grvc-band p{ margin-top:14px; text-align:justify; line-height:1.75; }

.grvc-kpis{ background:var(--blue-tint); padding:48px 0; }
.grvc-kpi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.grvc-kpi{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.grvc-kpi img{ height:auto; }
.grvc-kpi strong{ font-size:1.5rem; color:var(--blue); }

.grvc-chain{ padding:48px 0; }
.grvc-chain img{ width:100%; height:auto; }

.grvc-charts{ background:var(--green-tint); padding:48px 0; }
.grvc-chart-row{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:28px; }
.grvc-chart-card{ background:#fff; border-radius:var(--radius); padding:22px; box-shadow:0 4px 14px rgba(10,27,81,.08); }
.grvc-chart-card h3{ text-align:center; font-size:1.05rem; margin-bottom:14px; }
.grvc-chart-card svg{ display:block; width:100%; height:auto; }
.grvc-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:12px; font-size:.82rem; color:var(--ink-600); }
.grvc-legend i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; }
.grvc-note{ text-align:center; color:var(--ink-600); }
.grvc-pdd{ padding-top:40px; text-align:center; }

@media (max-width:980px){
  .grvc-split{ grid-template-columns:1fr; }
  .grvc-district-grid{ grid-template-columns:repeat(2,1fr); }
  .grvc-fpo-hero-inner{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .grvc-district-grid, .grvc-kpi-grid, .grvc-chart-row{ grid-template-columns:1fr; }
  .grvc-kpi img{ max-width:70%; }
}

.grvc-banner{ display:flex; align-items:center; justify-content:center; min-height:355px; padding:48px 24px; background-size:cover; background-position:center; text-align:center; }
.grvc-banner h1{ max-width:860px; color:#fff; font-size:clamp(1.9rem,3.2vw,2.75rem); text-shadow:0 2px 12px rgba(0,0,0,.5); }
.grvc-intro{ padding:56px 0 8px; text-align:center; }
.grvc-intro p{ max-width:1100px; margin:0 auto; font-weight:700; color:var(--blue); font-size:clamp(1.15rem,1.6vw,1.45rem); line-height:1.5; }
.grvc-phase-buttons{ display:flex; justify-content:center; gap:56px; flex-wrap:wrap; margin-top:52px; }
.grvc-phase-buttons .btn{ min-width:350px; justify-content:center; padding:18px 28px; border-radius:4px; background:var(--green); color:#fff; font-weight:600; }
.grvc-phase-buttons .btn:hover{ background:#0f7f3b; }
.grvc-gallery{ padding-top:56px; }
.grvc-gallery h2{ color:var(--green); text-transform:uppercase; font-size:clamp(1.8rem,3vw,2.3rem); font-weight:800; }
.scroll-carousel .grvc-gallery-item{ flex:0 0 calc((100% - 66px)/4); scroll-snap-align:start; }
.grvc-gallery-wrap .scroll-carousel{ padding-left:0; padding-right:0; }
.grvc-gallery-wrap .carousel-arrow.prev{ left:16px; }
.grvc-gallery-wrap .carousel-arrow.next{ right:16px; }
.grvc-gallery-item img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; background:var(--bg-tint); }
@media (max-width:1100px){ .scroll-carousel .grvc-gallery-item{ flex-basis:calc((100% - 44px)/3); } }
@media (max-width:980px){ .scroll-carousel .grvc-gallery-item{ flex-basis:calc((100% - 22px)/2); } }
@media (max-width:700px){ .scroll-carousel .grvc-gallery-item{ flex-basis:88%; } .grvc-phase-buttons{ gap:16px; } .grvc-phase-buttons .btn{ min-width:0; width:100%; } }

/* ---------- GRVC photo lightbox ---------- */
.gm{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; }
.gm[hidden]{ display:none; }
.gm-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.88); }
.gm-figure{ position:relative; margin:0; max-width:min(90vw,1200px); display:flex; flex-direction:column; align-items:center; gap:12px; }
.gm-img{ max-width:100%; max-height:80vh; width:auto; height:auto; border-radius:8px; background:#000; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.gm-count{ color:#fff; font-size:.9rem; font-weight:600; letter-spacing:.06em; }
.gm-btn{ position:absolute; z-index:2; width:48px; height:48px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center; padding:0; transition:background .2s ease; }
.gm-btn:hover, .gm-btn:focus-visible{ background:rgba(255,255,255,.34); outline:none; }
.gm-btn svg{ display:block; }
.gm-close{ top:20px; right:24px; }
.gm-prev{ left:24px; top:50%; transform:translateY(-50%); }
.gm-next{ right:24px; top:50%; transform:translateY(-50%); }
@media(max-width:700px){ .gm-prev{ left:8px; } .gm-next{ right:8px; } .gm-btn{ width:42px; height:42px; } }
.grvc-gallery-item img{ cursor:zoom-in; }