:root{
  --blue:#0d47a1;
  --blue-2:#1565d8;
  --blue-dark:#08264d;
  --teal:#00a884;
  --teal-dark:#087562;
  --gold:#f6c445;
  --gold-2:#ffe08a;
  --navy:#10213f;
  --charcoal:#253245;
  --muted:#667085;
  --line:rgba(13,71,161,.12);
  --soft-blue:#eaf4ff;
  --soft-green:#ecfff8;
  --soft-gold:#fff7df;
  --white:#fff;
  --glass:rgba(255,255,255,.82);
  --shadow-sm:0 10px 24px rgba(10,36,83,.08);
  --shadow:0 20px 55px rgba(10,36,83,.13);
  --shadow-lg:0 28px 80px rgba(8,38,77,.22);
  --radius:26px;
  --radius-md:20px;
  --radius-sm:14px;
  --container:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--charcoal);
  line-height:1.68;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 10% 4%,rgba(21,101,216,.13),transparent 32rem),
    radial-gradient(circle at 96% 16%,rgba(0,168,132,.14),transparent 28rem),
    radial-gradient(circle at 40% 96%,rgba(246,196,69,.16),transparent 25rem),
    linear-gradient(180deg,#f4faff 0%,#ffffff 43%,#f8fffb 100%);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,textarea{font:inherit}
.container{width:min(var(--container),calc(100% - 40px));margin-inline:auto}
.section-pad{padding:88px 0;position:relative}
.section-pad-sm{padding:66px 0;position:relative}
.center{align-items:center}
.soft-bg{background:linear-gradient(135deg,rgba(234,244,255,.84),rgba(236,255,248,.9));position:relative;overflow:hidden}
.soft-bg:before,.section-pad:before{content:"";position:absolute;pointer-events:none;border-radius:999px;filter:blur(.2px)}
.soft-bg:before{width:280px;height:280px;right:-100px;top:34px;background:rgba(246,196,69,.14)}
.section-pad > .container{position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--gold);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:900;margin-bottom:12px}
.eyebrow:before{content:"";width:26px;height:3px;border-radius:999px;background:currentColor}
/* Header */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);box-shadow:0 10px 30px rgba(8,38,77,.08);border-bottom:1px solid rgba(255,255,255,.65);transition:.25s ease}
.site-header.scrolled{background:rgba(255,255,255,.94);box-shadow:0 18px 45px rgba(8,38,77,.14)}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:82px}
.brand{display:flex;align-items:center;gap:13px;color:var(--blue-dark);min-width:max-content}
.brand img{width:58px;height:58px;border-radius:18px;filter:drop-shadow(0 10px 18px rgba(13,71,161,.16))}
.brand strong{display:block;font-size:1.08rem;letter-spacing:-.02em;line-height:1.05}
.brand small{display:block;color:var(--teal-dark);font-size:.78rem;font-weight:800;margin-top:3px}
.nav-menu{display:flex;align-items:center;justify-content:flex-end;gap:3px;flex-wrap:wrap}
.nav-link{padding:9px 10px;border-radius:999px;font-size:.87rem;font-weight:800;color:#27405f;transition:.22s ease;white-space:nowrap}
.nav-link:hover,.nav-link.active{background:linear-gradient(135deg,var(--blue-2),var(--teal));color:white;box-shadow:0 10px 22px rgba(21,101,216,.24)}
.menu-toggle{display:none;border:0;background:linear-gradient(135deg,var(--blue-2),var(--teal));width:46px;height:46px;border-radius:15px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;box-shadow:0 14px 24px rgba(21,101,216,.22)}
.menu-toggle span{width:22px;height:2px;background:white;border-radius:999px;transition:.25s ease}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Hero */
.hero{position:relative;min-height:720px;background:url('../images/hero-bg.jpg') center/cover no-repeat;color:white;display:grid;align-items:center;overflow:hidden;isolation:isolate}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(110deg,rgba(7,32,70,.93) 0%,rgba(13,71,161,.84) 47%,rgba(0,168,132,.68) 100%);z-index:0}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 18%,rgba(246,196,69,.34),transparent 15rem),radial-gradient(circle at 18% 82%,rgba(255,255,255,.13),transparent 18rem);z-index:1}
.hero:after{content:"";position:absolute;right:-130px;bottom:-150px;width:520px;height:520px;border-radius:50%;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);z-index:1}
.hero-content{position:relative;z-index:2;max-width:840px;padding:70px 0}
.hero h1,.page-hero h1{font-size:clamp(2.45rem,6vw,5.2rem);line-height:.98;margin-bottom:20px;letter-spacing:-.06em;text-wrap:balance}
.hero p,.page-hero p{font-size:clamp(1rem,2.1vw,1.24rem);max-width:780px;color:rgba(255,255,255,.9)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:13px 22px;font-weight:900;transition:.25s ease;cursor:pointer;gap:8px;line-height:1.1}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#17233b;box-shadow:0 16px 34px rgba(246,196,69,.35)}
.btn-outline{border:1px solid rgba(255,255,255,.58);color:white;background:rgba(255,255,255,.11);backdrop-filter:blur(8px)}
.btn-soft{background:rgba(255,255,255,.17);color:white;border:1px solid rgba(255,255,255,.22)}
.btn-small{padding:10px 16px;font-size:.9rem}
.btn:hover{transform:translateY(-3px);filter:saturate(1.05)}
.hero-card{position:absolute;right:7%;bottom:66px;z-index:3;background:rgba(255,255,255,.92);color:var(--navy);padding:24px;border-radius:var(--radius);box-shadow:var(--shadow-lg);width:min(330px,calc(100% - 40px));border:1px solid rgba(255,255,255,.75);backdrop-filter:blur(18px)}
.hero-card:before{content:"24/7";position:absolute;top:-14px;right:20px;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1f2a44;border-radius:999px;padding:6px 12px;font-weight:900;font-size:.8rem;box-shadow:var(--shadow-sm)}
.hero-card strong,.hero-card span{display:block}.hero-card strong{color:var(--blue-dark)}.hero-card span{font-size:1.68rem;color:var(--blue-2);font-weight:900;line-height:1.1;margin:8px 0}.hero-card small{color:var(--muted)}
/* Sections */
.gradient-band{padding:34px 0;background:linear-gradient(90deg,var(--blue-dark),var(--blue-2),var(--teal));position:relative;overflow:hidden}
.gradient-band:after{content:"";position:absolute;inset:auto -10% -90px auto;width:360px;height:180px;background:rgba(255,255,255,.14);border-radius:360px 360px 0 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;z-index:1}
.stats-grid div{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);padding:20px;border-radius:20px;color:white;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.stats-grid strong{display:block;font-size:1.06rem;letter-spacing:-.01em}.stats-grid span{color:#e9f6ff;font-size:.9rem}
.section-heading{text-align:center;max-width:760px;margin:0 auto 42px}.section-heading h2,.split-layout h2,.pledge h2{font-size:clamp(1.8rem,3.2vw,2.75rem);line-height:1.1;color:var(--blue-dark);letter-spacing:-.045em;margin-bottom:12px;text-wrap:balance}.section-heading p{color:var(--muted)}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.card-grid.three{grid-template-columns:repeat(3,1fr)}.card-grid.two{grid-template-columns:repeat(2,1fr)}
.info-card,.official-card,.contact-card,.contact-form,.pledge,.download-card{background:rgba(255,255,255,.9);border:1px solid rgba(13,71,161,.1);border-radius:var(--radius);padding:27px;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;position:relative;overflow:hidden}
.info-card:before,.official-card:before,.download-card:before,.contact-card:before,.pledge:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--blue-2),var(--teal),var(--gold));opacity:.95}
.info-card:hover,.image-card:hover,.official-card:hover,.download-card:hover,.profile-item:hover,.doc-row:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:rgba(21,101,216,.18)}
.icon{font-size:2.05rem;display:inline-grid;place-items:center;margin-bottom:14px;width:52px;height:52px;border-radius:17px;background:linear-gradient(135deg,var(--soft-blue),var(--soft-green));box-shadow:inset 0 0 0 1px rgba(13,71,161,.08)}
.info-card h3,.image-card h3,.official-card h3,.download-card h3{color:var(--blue-dark);line-height:1.18;margin-bottom:8px;letter-spacing:-.02em}.info-card p,.image-card p,.official-card p,.download-card p{color:var(--muted)}
.split-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:start}.mini-list{display:grid;gap:16px}.mini-list article{background:white;padding:23px;border-left:5px solid var(--teal);border-radius:20px;box-shadow:var(--shadow-sm);transition:.22s ease}.mini-list article:hover{transform:translateX(4px);box-shadow:var(--shadow)}.mini-list span,.date{color:var(--teal-dark);font-weight:900;font-size:.86rem}.text-link{color:var(--blue-2);font-weight:900;display:inline-flex;margin-top:16px}.text-link:hover{color:var(--teal-dark)}
.image-card{background:white;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.25s ease;border:1px solid rgba(13,71,161,.09)}.image-card img{height:220px;width:100%;object-fit:cover;transition:.5s ease}.image-card:hover img{transform:scale(1.06)}.image-card div{padding:23px}.status{display:inline-flex;padding:6px 11px;border-radius:999px;font-size:.75rem;font-weight:900;margin-bottom:11px}.ongoing{background:#e6f1ff;color:var(--blue-2)}.completed{background:#e2fff5;color:var(--teal-dark)}.upcoming{background:#fff3c4;color:#8b6400}
.official-strip{background:linear-gradient(135deg,#eaf4ff 0%,#f1fff8 52%,#fff6dc 100%);position:relative;overflow:hidden}.official-strip:before{content:"";position:absolute;left:-90px;bottom:-110px;width:320px;height:320px;border-radius:50%;background:rgba(21,101,216,.1)}.official-mini{display:flex;gap:22px;align-items:center;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.85);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}.official-mini img{width:154px;height:154px;border-radius:26px;object-fit:cover}.official-mini strong{display:block;font-size:1.35rem;color:var(--blue-dark);letter-spacing:-.03em}.official-mini span{color:var(--teal-dark);font-weight:900}
/* Page heroes */
.page-hero{background:linear-gradient(135deg,var(--blue-dark) 0%,var(--blue-2) 58%,var(--teal) 100%);color:white;position:relative;overflow:hidden;isolation:isolate}.page-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 30%,rgba(246,196,69,.3),transparent 16rem),radial-gradient(circle at 12% 90%,rgba(255,255,255,.13),transparent 18rem)}.page-hero:after{content:"";position:absolute;right:5%;top:18%;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}.page-hero .container{position:relative;z-index:1}.page-hero .eyebrow{color:var(--gold-2)}
.rounded-img{border-radius:var(--radius);box-shadow:var(--shadow);min-height:340px;object-fit:cover;border:7px solid rgba(255,255,255,.82)}
.profile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.profile-item{background:white;border-radius:20px;padding:23px;box-shadow:var(--shadow-sm);transition:.25s ease;border:1px solid rgba(13,71,161,.08)}.profile-item strong{display:block;color:var(--blue-dark);font-size:1.05rem}.profile-item span{color:var(--muted)}
.gradient-panel{background:linear-gradient(135deg,var(--blue-dark),var(--blue-2),var(--teal));color:white;position:relative;overflow:hidden}.gradient-panel:before{content:"";position:absolute;right:-80px;top:-80px;width:300px;height:300px;border-radius:50%;background:rgba(246,196,69,.18)}.gradient-panel h2{color:white}.gradient-panel p{color:rgba(255,255,255,.9)}
.map-placeholder,.map-embed{min-height:320px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);border-radius:var(--radius);display:grid;place-items:center;text-align:center;color:white;padding:28px;box-shadow:0 20px 50px rgba(0,0,0,.08)}.map-placeholder small{color:#eaffff}.map-embed{padding:0;overflow:hidden;background:white}.map-embed iframe{width:100%;height:420px;border:0}
/* Officials */
.officials-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.official-card{text-align:center}.official-card img{width:150px;height:150px;border-radius:50%;object-fit:cover;margin:0 auto 16px;border:7px solid #e8f3ff;box-shadow:0 12px 22px rgba(13,71,161,.14)}.official-card span{display:block;color:var(--teal-dark);font-weight:900;margin-bottom:8px}.official-card p{font-size:.94rem}
/* Accordions */
.accordion{display:grid;gap:15px}.accordion-item{background:white;border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden;border:1px solid rgba(13,71,161,.1)}.accordion-trigger{width:100%;border:0;background:linear-gradient(90deg,#fff,#f6fbff);color:var(--blue-dark);padding:21px 24px;display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:1rem;cursor:pointer;text-align:left}.accordion-trigger b{font-size:1.45rem;color:var(--teal-dark);line-height:1}.accordion-content{max-height:0;overflow:hidden;transition:max-height .32s ease}.accordion-content.open{max-height:650px}.accordion-content p{padding:0 24px 16px;color:var(--muted)}.service-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 24px 24px}.service-meta span{background:linear-gradient(135deg,#f4f9ff,#f5fffb);padding:14px;border-radius:15px;color:#3d4a5c;border:1px solid rgba(13,71,161,.07)}
/* Tables / documents */
.table-wrap{overflow-x:auto;background:white;border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid rgba(13,71,161,.09)}table{width:100%;border-collapse:collapse;min-width:760px}th{background:linear-gradient(135deg,var(--blue),var(--blue-2));color:white;text-align:left}th,td{padding:17px;border-bottom:1px solid #e7eef7}td{color:#45556a}tr:hover td{background:#f7fbff}
.document-list{display:grid;gap:15px}.doc-row{display:flex;align-items:center;justify-content:space-between;gap:18px;background:rgba(255,255,255,.92);border-radius:20px;padding:21px 23px;box-shadow:var(--shadow-sm);border:1px solid rgba(13,71,161,.09);transition:.25s ease}.doc-row strong{display:block;color:var(--blue-dark);font-size:1.04rem}.doc-row span{display:block;color:var(--muted);font-size:.94rem}.downloads-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.download-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}.download-card .icon{margin-bottom:0}
/* Contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px}.contact-card p{margin-bottom:10px}.emergency-box{margin-top:20px;padding:22px;border-radius:20px;background:linear-gradient(135deg,#fff3c4,#fff8df);border:1px solid rgba(246,196,69,.34);color:#5f4200}.contact-form{display:grid;gap:14px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-form label{display:grid;gap:7px;font-weight:900;color:var(--blue-dark)}.contact-form input,.contact-form textarea{width:100%;border:1px solid rgba(13,71,161,.16);border-radius:15px;padding:13px 14px;background:#fbfdff;color:var(--charcoal);outline:none;transition:.2s ease}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(0,168,132,.13);background:white}.contact-form textarea{resize:vertical;min-height:140px}
/* Footer */
.site-footer{background:linear-gradient(135deg,#071f3f 0%,#0b356f 56%,#075f55 100%);color:#dcebff;position:relative;overflow:hidden}.site-footer:before{content:"";position:absolute;right:-120px;top:-160px;width:360px;height:360px;border-radius:50%;background:rgba(246,196,69,.15)}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr .8fr .9fr;gap:34px;padding:58px 0;position:relative;z-index:1}.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:15px;color:white}.footer-brand img{width:54px;height:54px;border-radius:16px}.site-footer h3{color:white;margin-bottom:12px;font-size:1.05rem}.site-footer p,.site-footer a{color:#dcebff}.footer-links{list-style:none;display:grid;gap:8px}.footer-links a:hover,.social-link:hover{color:var(--gold-2)}.social-link{display:inline-flex;margin-top:10px;font-weight:900}.footer-bottom{text-align:center;padding:18px 20px;border-top:1px solid rgba(255,255,255,.12);color:#c7dcff;font-size:.92rem;position:relative;z-index:1}
/* Motion */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.22s}.delay-3{transition-delay:.32s}
.back-to-top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border:0;border-radius:16px;background:linear-gradient(135deg,var(--blue-2),var(--teal));color:white;font-size:1.25rem;font-weight:900;box-shadow:0 15px 35px rgba(13,71,161,.28);opacity:0;transform:translateY(18px);pointer-events:none;transition:.25s ease;z-index:900}.back-to-top.show{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}
/* Responsive */
@media (max-width:1180px){.menu-toggle{display:flex}.nav-menu{position:absolute;left:20px;right:20px;top:calc(100% + 8px);display:grid;grid-template-columns:repeat(2,1fr);gap:8px;background:rgba(255,255,255,.96);border:1px solid rgba(13,71,161,.1);border-radius:22px;padding:16px;box-shadow:var(--shadow);opacity:0;transform:translateY(-10px);pointer-events:none;transition:.22s ease}.nav-menu.open{opacity:1;transform:none;pointer-events:auto}.nav-link{padding:12px 14px;border-radius:14px}.hero-card{right:40px}.card-grid,.officials-grid{grid-template-columns:repeat(2,1fr)}.profile-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.hero{min-height:auto}.hero-content{padding:96px 0 150px}.hero-card{position:relative;right:auto;bottom:auto;margin:-108px auto 48px}.stats-grid{grid-template-columns:repeat(2,1fr)}.split-layout,.contact-grid{grid-template-columns:1fr}.card-grid.three,.card-grid.two{grid-template-columns:1fr 1fr}.page-hero h1,.hero h1{letter-spacing:-.045em}.section-pad{padding:70px 0}.section-pad-sm{padding:54px 0}.downloads-grid{grid-template-columns:1fr}.rounded-img{min-height:260px}.map-embed iframe{height:340px}}
@media (max-width:640px){.container{width:min(100% - 28px,var(--container))}.navbar{min-height:74px}.brand img{width:50px;height:50px}.brand strong{font-size:1rem}.nav-menu{grid-template-columns:1fr;left:14px;right:14px}.hero-content{padding:74px 0 136px}.hero h1{font-size:2.35rem}.hero p,.page-hero p{font-size:1rem}.hero-actions{display:grid;grid-template-columns:1fr;gap:11px}.btn{width:100%;padding:12px 18px}.section-pad{padding:58px 0}.section-pad-sm{padding:46px 0}.card-grid,.card-grid.three,.card-grid.two,.officials-grid,.stats-grid,.profile-grid,.service-meta{grid-template-columns:1fr}.image-card img{height:190px}.download-card{grid-template-columns:1fr;text-align:left}.doc-row{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr;padding:46px 0}.official-mini{flex-direction:column;text-align:center}.official-mini img{width:132px;height:132px}.form-row{grid-template-columns:1fr}.page-hero:after{display:none}}
@media (max-width:420px){.brand small{display:none}.hero h1{font-size:2.05rem}.page-hero h1{font-size:2rem}.hero-card span{font-size:1.35rem}.info-card,.official-card,.contact-card,.contact-form,.pledge,.download-card{padding:21px}.accordion-trigger{padding:18px}.accordion-content p{padding-left:18px;padding-right:18px}.service-meta{padding-left:18px;padding-right:18px}}

/* Production header correction: keep desktop navigation clean, single-row, and balanced */
.site-header{overflow:visible}
.navbar.container{width:min(1360px,calc(100% - 40px));max-width:1360px}
.navbar{min-height:76px;gap:18px}
.brand{flex:0 0 auto;gap:12px}
.brand img{width:52px;height:52px;border-radius:16px}
.brand strong{font-size:1.02rem;white-space:nowrap}
.brand small{font-size:.74rem;white-space:nowrap}
.nav-menu{flex:1 1 auto;min-width:0;flex-wrap:nowrap;gap:4px;justify-content:flex-end}
.nav-link{font-size:.78rem;padding:9px 8px;line-height:1.15;white-space:nowrap}
.nav-link.active{box-shadow:0 10px 20px rgba(21,101,216,.2)}

@media (max-width:1280px){
  .menu-toggle{display:flex}
  .nav-menu{
    position:absolute;
    left:20px;
    right:20px;
    top:calc(100% + 8px);
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    background:rgba(255,255,255,.98);
    border:1px solid rgba(13,71,161,.1);
    border-radius:22px;
    padding:16px;
    box-shadow:var(--shadow);
    opacity:0;
    transform:translateY(-10px);
    pointer-events:none;
    transition:.22s ease;
    flex:initial;
  }
  .nav-menu.open{opacity:1;transform:none;pointer-events:auto}
  .nav-link{padding:12px 14px;border-radius:14px;font-size:.9rem}
}

@media (max-width:640px){
  .navbar.container{width:min(100% - 28px,1360px)}
  .navbar{min-height:72px}
}

/* 2026 LGU modernization refresh - visual-only enhancements */
:root{
  --civic-navy:#061f3f;
  --civic-blue:#155eef;
  --civic-cyan:#09c6e8;
  --civic-mint:#16b687;
  --civic-gold:#f7c948;
  --surface:#ffffff;
  --surface-2:#f5f9ff;
  --text-strong:#0b1f3a;
  --text-soft:#5b6b83;
  --modern-shadow:0 24px 70px rgba(6,31,63,.14);
  --modern-shadow-soft:0 14px 36px rgba(6,31,63,.09);
}
body{
  color:var(--text-strong);
  background:
    radial-gradient(circle at 4% 5%,rgba(21,94,239,.18),transparent 30rem),
    radial-gradient(circle at 94% 9%,rgba(9,198,232,.16),transparent 28rem),
    radial-gradient(circle at 50% 100%,rgba(22,182,135,.12),transparent 30rem),
    linear-gradient(180deg,#f7fbff 0%,#ffffff 42%,#f5fff9 100%);
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:
    linear-gradient(rgba(21,94,239,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(21,94,239,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.15),transparent 90%);
}
.site-header{
  border-bottom:1px solid rgba(255,255,255,.42);
  background:rgba(255,255,255,.76);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:0 12px 40px rgba(6,31,63,.07);
  z-index:1000;
}
.site-header.scrolled{background:rgba(255,255,255,.92);box-shadow:0 18px 52px rgba(6,31,63,.12)}
.brand{padding:7px 9px;border-radius:20px;background:transparent;border:none}
.brand img,.footer-brand img{box-shadow:none;background:transparent}
.brand strong{color:var(--civic-navy);letter-spacing:-.02em}.brand small{color:var(--text-soft)}
.nav-link{font-weight:800;color:#223956;border:1px solid transparent}.nav-link:hover{background:rgba(21,94,239,.08);color:var(--civic-blue);border-color:rgba(21,94,239,.08)}
.nav-link.active{background:linear-gradient(135deg,var(--civic-blue),var(--civic-mint));color:white;box-shadow:0 14px 28px rgba(21,94,239,.24)}
.hero,.page-hero{
  isolation:isolate;
  background:
    linear-gradient(135deg,rgba(6,31,63,.88),rgba(21,94,239,.72) 47%,rgba(22,182,135,.64)),
    url('../images/hero-bg.jpg') center/cover no-repeat;
}
.hero:before,.page-hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 24% 24%,rgba(255,255,255,.18),transparent 18rem),
    radial-gradient(circle at 74% 36%,rgba(247,201,72,.18),transparent 14rem),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:auto,auto,58px 58px,58px 58px;
  opacity:.76;
}
.hero-overlay{background:linear-gradient(90deg,rgba(6,31,63,.78),rgba(6,31,63,.36),rgba(6,31,63,.18))}
.hero h1,.page-hero h1{max-width:950px;letter-spacing:-.065em;text-wrap:balance;text-shadow:0 18px 44px rgba(0,0,0,.18)}
.hero p,.page-hero p{color:rgba(255,255,255,.9);max-width:760px}.eyebrow{letter-spacing:.13em;color:var(--civic-mint)}
.hero .eyebrow,.page-hero .eyebrow{color:#c8fff2;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 13px;display:inline-flex;margin-bottom:16px}
.btn{border-radius:999px;font-weight:900;box-shadow:var(--modern-shadow-soft);transform:translateZ(0)}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:linear-gradient(135deg,var(--civic-blue),var(--civic-mint));border:0}.btn-outline{border-color:rgba(255,255,255,.52);background:rgba(255,255,255,.1);backdrop-filter:blur(12px)}.btn-soft{background:rgba(255,255,255,.9);color:var(--civic-navy)}
.hero-card,.official-mini,.info-card,.image-card,.official-card,.profile-item,.pledge,.contact-card,.contact-form,.download-card,.doc-row,.accordion-item,.table-wrap{
  border:1px solid rgba(21,94,239,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.86));
  box-shadow:var(--modern-shadow-soft);
  backdrop-filter:blur(16px);
}
.hero-card{border-radius:28px;background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(235,250,255,.92));overflow:hidden}.hero-card:before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--civic-blue),var(--civic-mint),var(--civic-gold))}.hero-card strong{color:var(--civic-navy)}.hero-card span{color:var(--civic-blue)}
.gradient-band{background:transparent}.stats-grid{margin-top:-2px}.stats-grid div{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.64);background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,248,255,.86));box-shadow:var(--modern-shadow-soft)}.stats-grid div:after{content:"";position:absolute;right:-34px;bottom:-34px;width:92px;height:92px;border-radius:50%;background:linear-gradient(135deg,rgba(21,94,239,.11),rgba(22,182,135,.12))}
.section-heading h2,.split-layout h2{color:var(--civic-navy);letter-spacing:-.045em}.section-heading p,.split-layout p,.info-card p,.image-card p,.official-card p{color:var(--text-soft)}
.info-card{position:relative;overflow:hidden}.info-card:before,.official-card:before,.download-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--civic-blue),var(--civic-mint))}.info-card:hover,.image-card:hover,.official-card:hover,.download-card:hover,.doc-row:hover{transform:translateY(-7px);box-shadow:var(--modern-shadow)}
.info-card .icon,.download-card .icon{display:grid;place-items:center;width:52px;height:52px;border-radius:18px;background:linear-gradient(135deg,rgba(21,94,239,.12),rgba(22,182,135,.15));font-size:1.45rem}
.soft-bg{background:linear-gradient(135deg,rgba(21,94,239,.06),rgba(22,182,135,.06));position:relative}.soft-bg:before{content:"";position:absolute;left:5%;top:8%;width:150px;height:150px;border-radius:50%;background:rgba(9,198,232,.09);filter:blur(8px)}
.mini-list article{border-left:4px solid var(--civic-mint);background:rgba(255,255,255,.88);box-shadow:var(--modern-shadow-soft)}
.image-card{overflow:hidden}.image-card img{transition:transform .5s ease,filter .5s ease}.image-card:hover img{transform:scale(1.055);filter:saturate(1.08) contrast(1.04)}
.status{border-radius:999px;font-weight:900}.status.ongoing{background:#e8f1ff;color:var(--civic-blue)}.status.completed{background:#e8fff6;color:#087562}.status.upcoming{background:#fff5d6;color:#8b6500}
.official-strip{background:linear-gradient(135deg,#f5faff,#f2fff9)}.official-mini{border-radius:30px}.official-mini img{border:8px solid white;box-shadow:0 20px 45px rgba(6,31,63,.18)}
.officials-grid{align-items:stretch}.official-card{position:relative;overflow:hidden;border-radius:28px}.official-card img{border:8px solid #fff;background:#eff6ff;box-shadow:0 18px 42px rgba(21,94,239,.16)}.official-card h3{color:var(--civic-navy);letter-spacing:-.025em}.official-card span{color:var(--civic-blue)}
.page-hero{padding:72px 0 72px;position:relative;overflow:hidden}.page-hero:after{opacity:.16}.page-hero .container{position:relative;z-index:1}.page-hero h1{font-size:clamp(2.35rem,6vw,4.9rem)}
.accordion-trigger{background:linear-gradient(90deg,#fff,#f3f9ff);color:var(--civic-navy)}.accordion-trigger b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(21,94,239,.1);color:var(--civic-blue)}.service-meta span{background:linear-gradient(135deg,#f8fbff,#f2fff9);border-color:rgba(21,94,239,.09)}
th{background:linear-gradient(135deg,var(--civic-navy),var(--civic-blue))}.doc-row,.download-card{position:relative;overflow:hidden}.btn-small{border-radius:999px}
.contact-form input,.contact-form textarea{background:white;border-color:rgba(21,94,239,.14)}.emergency-box{background:linear-gradient(135deg,#fff7df,#ecfff8);border-color:rgba(247,201,72,.38)}
.site-footer{background:radial-gradient(circle at 80% 0%,rgba(22,182,135,.24),transparent 28rem),linear-gradient(135deg,#041831,#082a55 52%,#063f4b);}.footer-bottom{background:rgba(0,0,0,.12)}
.back-to-top{border-radius:50%;background:linear-gradient(135deg,var(--civic-blue),var(--civic-mint))}
@media (max-width:1280px){.nav-menu{z-index:1200}.nav-link{white-space:normal}.site-header{overflow:visible}}
@media (max-width:900px){.page-hero{padding:62px 0 56px}.hero:before,.page-hero:before{background-size:auto,auto,46px 46px,46px 46px}.stats-grid{margin-top:0}}
@media (max-width:640px){body:before{background-size:34px 34px}.hero h1{font-size:2.55rem}.page-hero h1{font-size:2.35rem}.hero-card{max-width:calc(100% - 32px)}}

/* 2026-06-29 mobile balance + modern motion refresh
   Reverted away from the Philippine flag color theme and restored the clean civic blue/teal identity. */
:root{
  --mobile-safe-x:18px;
}

/* Soft ambient motion for a modern government/LGU feel without using flag colors */
.hero,
.page-hero,
.gradient-panel,
.soft-bg{
  position:relative;
  overflow:hidden;
}
.hero::selection,
.page-hero::selection{background:rgba(255,255,255,.25)}
.hero .container,
.page-hero .container{position:relative;z-index:2}
.hero:after,
.page-hero:after{
  content:"";
  position:absolute;
  z-index:0;
  width:420px;
  height:420px;
  right:-170px;
  bottom:-180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,.04) 60%,transparent 70%);
  animation:floatOrb 12s ease-in-out infinite;
}
.page-hero:after{opacity:.75}
.hero .eyebrow,
.page-hero .eyebrow{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 30px rgba(0,0,0,.08);
}
.info-card,
.official-card,
.profile-item,
.download-card,
.contact-card,
.contact-form,
.pledge,
.doc-row,
.accordion-item,
.image-card,
.table-wrap{
  will-change:transform;
}
.info-card:after,
.official-card:after,
.download-card:after,
.contact-card:after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-55px;
  bottom:-65px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(21,94,239,.08),rgba(22,182,135,.10));
  pointer-events:none;
  transition:transform .35s ease,opacity .35s ease;
}
.info-card:hover:after,
.official-card:hover:after,
.download-card:hover:after,
.contact-card:hover:after{transform:scale(1.25);opacity:.9}

@keyframes floatOrb{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-18px,-24px,0) scale(1.05)}
}
@keyframes subtleGradientShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.hero,
.page-hero{
  background-size:cover,cover;
}
.btn-primary,
.menu-toggle,
.back-to-top{
  background-size:160% 160%;
  animation:subtleGradientShift 8s ease-in-out infinite;
}

/* Stronger mobile balance */
@media (max-width:768px){
  .site-header{background:rgba(255,255,255,.9)}
  .navbar.container{width:calc(100% - 24px)}
  .navbar{min-height:68px;gap:10px}
  .brand{
    max-width:calc(100vw - 96px);
    min-width:0;
    padding:6px 10px 6px 7px;
    gap:9px;
    border-radius:18px;
  }
  .brand img{width:44px;height:44px;border-radius:14px;flex:0 0 auto}
  .brand span{min-width:0;display:block}
  .brand strong{
    font-size:.96rem;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .brand small{font-size:.68rem;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .menu-toggle{width:44px;height:44px;border-radius:15px;flex:0 0 44px}
  .nav-menu{
    left:12px;
    right:12px;
    top:calc(100% + 8px);
    max-height:calc(100vh - 92px);
    overflow:auto;
    grid-template-columns:1fr;
    padding:12px;
    border-radius:20px;
  }
  .nav-link{font-size:.92rem;padding:12px 14px}

  .hero{min-height:auto}
  .hero-content{padding:70px 0 112px;max-width:100%}
  .page-hero{padding:56px 0 48px;min-height:auto}
  .hero h1,.page-hero h1{
    font-size:clamp(2rem,10.5vw,2.75rem);
    line-height:1.05;
    letter-spacing:-.052em;
    max-width:100%;
  }
  .hero p,.page-hero p{
    font-size:1rem;
    line-height:1.65;
    max-width:100%;
  }
  .hero .eyebrow,.page-hero .eyebrow{
    font-size:.72rem;
    padding:7px 12px;
    letter-spacing:.12em;
    margin-bottom:14px;
  }
  .hero-actions{margin-top:26px}
  .hero-card{margin:-80px auto 38px;max-width:calc(100% - 28px);padding:20px;border-radius:24px}
  .section-pad{padding:54px 0}
  .section-pad-sm{padding:44px 0}
  .section-heading{margin-bottom:30px;text-align:left}
  .section-heading h2,.split-layout h2,.pledge h2{font-size:clamp(1.75rem,8vw,2.25rem);line-height:1.12}
  .card-grid,.card-grid.three,.card-grid.two,.officials-grid,.profile-grid,.stats-grid,.downloads-grid{gap:16px}
  .info-card,.official-card,.contact-card,.contact-form,.pledge,.download-card,.profile-item,.doc-row{border-radius:22px;padding:22px}
  .rounded-img{border-radius:24px;min-height:220px}
  .split-layout{gap:24px}
  .footer-grid{gap:24px}
}

@media (max-width:420px){
  .navbar.container{width:calc(100% - 20px)}
  .navbar{min-height:66px}
  .brand{max-width:calc(100vw - 86px);border-radius:17px}
  .brand img{width:40px;height:40px;border-radius:13px}
  .brand strong{font-size:.92rem}
  .menu-toggle{width:42px;height:42px;flex-basis:42px;border-radius:14px}
  .page-hero{padding:50px 0 42px}
  .hero-content{padding:62px 0 104px}
  .hero h1,.page-hero h1{font-size:2rem;line-height:1.08}
  .hero p,.page-hero p{font-size:.97rem;line-height:1.6}
  .section-pad{padding:48px 0}
  .info-card,.official-card,.contact-card,.contact-form,.pledge,.download-card,.profile-item,.doc-row{padding:20px}
}

@media (prefers-reduced-motion:reduce){
  .hero:after,.page-hero:after,.btn-primary,.menu-toggle,.back-to-top{animation:none!important}
}


/* 2026-06-29 v2 mobile rebalance + richer motion/background polish */
@keyframes heroGridDrift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-8px,10px,0)}
}
@keyframes ambientBlob{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(16px,-18px,0) scale(1.08)}
}
@keyframes iconLift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@keyframes shimmerSweep{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(130%)}
}

main{position:relative;overflow:hidden}
main > section{position:relative;isolation:isolate}
main > section:not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg){
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,251,255,.98));
}
main > section.section-pad:nth-of-type(odd):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg){
  background:linear-gradient(180deg,rgba(247,251,255,.98),rgba(255,255,255,.94));
}
main > section:not(.page-hero)::before{
  content:"";
  position:absolute;
  inset:auto auto 10% -54px;
  width:170px;
  height:170px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(21,94,239,.08),transparent 68%);
  filter:blur(4px);
  pointer-events:none;
  z-index:0;
}
main > section:not(.page-hero)::after{
  content:"";
  position:absolute;
  inset:12% -46px auto auto;
  width:160px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(22,182,135,.08),transparent 68%);
  filter:blur(6px);
  pointer-events:none;
  z-index:0;
}
main > section > .container{position:relative;z-index:1}

.page-hero{
  padding:112px 0 74px;
  overflow:hidden;
}
.page-hero:before{
  animation:heroGridDrift 18s ease-in-out infinite;
}
.page-hero .container{
  max-width:min(var(--container),calc(100% - 40px));
}
.page-hero .container:after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-80px;
  height:120px;
  background:radial-gradient(70% 120% at 50% 0%,rgba(255,255,255,.16),transparent 70%);
  pointer-events:none;
}
.page-hero h1{max-width:11ch}
.page-hero p{max-width:44rem}
.page-hero .eyebrow{backdrop-filter:blur(10px)}
.page-hero:after{
  width:340px;
  height:340px;
  right:-120px;
  bottom:-140px;
  opacity:.62;
}

.soft-bg,
.gradient-panel,
.official-strip{
  overflow:hidden;
}
.soft-bg:after,
.gradient-panel:after,
.official-strip:after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  right:-110px;
  bottom:-120px;
  background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 68%);
  animation:ambientBlob 16s ease-in-out infinite;
  pointer-events:none;
}
.info-card,
.official-card,
.download-card,
.profile-item,
.contact-card,
.contact-form,
.doc-row,
.accordion-item,
.image-card,
.official-mini,
.table-wrap{
  overflow:hidden;
}
.info-card::after,
.official-card::after,
.download-card::after,
.profile-item::after,
.contact-card::after,
.doc-row::after,
.image-card::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:42%;
  height:100%;
  background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,0));
  opacity:0;
  pointer-events:none;
}
.info-card:hover::after,
.official-card:hover::after,
.download-card:hover::after,
.profile-item:hover::after,
.contact-card:hover::after,
.doc-row:hover::after,
.image-card:hover::after{
  opacity:.8;
  animation:shimmerSweep 1.15s ease;
}
.info-card .icon,
.download-card .icon,
.official-card img,
.official-mini img{
  animation:iconLift 5.8s ease-in-out infinite;
}
.image-card:hover img,
.rounded-img:hover{
  transform:scale(1.03);
}
.rounded-img{transition:transform .45s ease, box-shadow .45s ease}
.rounded-img:hover{box-shadow:0 26px 56px rgba(6,31,63,.18)}

.reveal-left,
.reveal-right,
.reveal-zoom{opacity:0;transition:opacity .7s ease,transform .7s ease}
.reveal-left{transform:translateX(-24px)}
.reveal-right{transform:translateX(24px)}
.reveal-zoom{transform:scale(.96)}
.reveal-left.visible,
.reveal-right.visible,
.reveal-zoom.visible{opacity:1;transform:none}

@media (max-width:768px){
  body{
    background:
      radial-gradient(circle at 6% 4%,rgba(21,94,239,.16),transparent 22rem),
      radial-gradient(circle at 92% 10%,rgba(9,198,232,.12),transparent 18rem),
      linear-gradient(180deg,#f8fbff 0%,#ffffff 44%,#f5fff9 100%);
  }
  body:before{
    background-size:28px 28px;
    opacity:.72;
  }
  .page-hero{
    padding:74px 0 42px;
    min-height:auto;
  }
  .page-hero:before{
    background:
      radial-gradient(circle at 20% 18%,rgba(255,255,255,.14),transparent 13rem),
      radial-gradient(circle at 80% 68%,rgba(247,201,72,.12),transparent 12rem),
      linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),
      linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
    background-size:auto,auto,38px 38px,38px 38px;
    opacity:.86;
  }
  .page-hero:after{
    width:220px;
    height:220px;
    right:-90px;
    bottom:-88px;
    opacity:.52;
  }
  .page-hero .container:after{
    bottom:-56px;
    height:90px;
  }
  .page-hero h1,
  .hero h1{
    max-width:9.6ch;
    text-wrap:balance;
  }
  .page-hero p,
  .hero p{
    max-width:30ch;
    font-size:.98rem;
    line-height:1.72;
  }
  main > section:not(.page-hero)::before{
    width:120px;
    height:120px;
    left:-40px;
    bottom:6%;
  }
  main > section:not(.page-hero)::after{
    width:110px;
    height:110px;
    right:-34px;
    top:10%;
  }
  .split-layout > .reveal,
  .split-layout > .reveal-left,
  .split-layout > .reveal-right,
  .split-layout > .reveal-zoom{
    width:100%;
  }
  .section-heading,
  .split-layout h2,
  .pledge h2{
    text-wrap:balance;
  }
}

@media (max-width:480px){
  .page-hero{padding:70px 0 38px}
  .page-hero .container{width:min(100% - 20px,var(--container))}
  .page-hero h1,
  .hero h1{font-size:clamp(1.85rem,10.2vw,2.2rem);max-width:10ch}
  .page-hero p,
  .hero p{max-width:100%;font-size:.97rem;line-height:1.68}
  .hero .eyebrow,
  .page-hero .eyebrow{font-size:.69rem;gap:7px;padding:7px 11px}
  .split-layout{gap:20px}
  .rounded-img{min-height:200px}
  .info-card,
  .official-card,
  .contact-card,
  .contact-form,
  .pledge,
  .download-card,
  .profile-item,
  .doc-row,
  .accordion-item{border-radius:20px}
}

@media (prefers-reduced-motion:reduce){
  .page-hero:before,
  .page-hero:after,
  .soft-bg:after,
  .gradient-panel:after,
  .official-strip:after,
  .info-card .icon,
  .download-card .icon,
  .official-card img,
  .official-mini img{animation:none!important}
}


/* 2026-06-29 v3 vibrant visual refresh - brighter palette and more visible motion */
:root{
  --civic-navy:#071d49;
  --civic-blue:#2563ff;
  --civic-cyan:#08c8ff;
  --civic-mint:#12d6a6;
  --civic-gold:#ffd25e;
  --civic-violet:#6e6bff;
  --text-strong:#081b3a;
  --text-soft:#5a6e88;
}

@keyframes vividGradientFlow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes glowPulseStrong{
  0%,100%{box-shadow:0 18px 44px rgba(37,99,255,.18)}
  50%{box-shadow:0 24px 56px rgba(8,200,255,.24)}
}
@keyframes orbFloatStrong{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  25%{transform:translate3d(-12px,18px,0) scale(1.04)}
  50%{transform:translate3d(14px,-10px,0) scale(1.08)}
  75%{transform:translate3d(-10px,-18px,0) scale(1.02)}
}
@keyframes badgePulse{
  0%,100%{transform:scale(1);box-shadow:0 10px 26px rgba(255,255,255,.08)}
  50%{transform:scale(1.03);box-shadow:0 18px 34px rgba(255,255,255,.18)}
}

body{
  background:
    radial-gradient(circle at 6% 3%,rgba(37,99,255,.22),transparent 26rem),
    radial-gradient(circle at 92% 10%,rgba(8,200,255,.18),transparent 22rem),
    radial-gradient(circle at 82% 74%,rgba(18,214,166,.14),transparent 20rem),
    radial-gradient(circle at 22% 92%,rgba(110,107,255,.10),transparent 22rem),
    linear-gradient(180deg,#f5f9ff 0%,#ffffff 42%,#f3fffb 100%);
}
body:before{
  background-image:
    linear-gradient(rgba(37,99,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,255,.055) 1px,transparent 1px);
  background-size:42px 42px;
}

.site-header{
  background:rgba(255,255,255,.84);
  box-shadow:0 16px 42px rgba(7,29,73,.08);
}
.brand{
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(241,248,255,.88));
  border-color:rgba(37,99,255,.1);
  box-shadow:0 10px 26px rgba(37,99,255,.08);
}
.nav-link:hover{background:rgba(37,99,255,.09);color:var(--civic-blue)}
.nav-link.active{
  background:linear-gradient(135deg,var(--civic-blue),var(--civic-cyan),var(--civic-mint));
  background-size:180% 180%;
  animation:vividGradientFlow 8s ease infinite;
  box-shadow:0 16px 32px rgba(37,99,255,.28);
}
.menu-toggle,
.btn-primary,
.back-to-top{
  background:linear-gradient(135deg,var(--civic-blue),var(--civic-cyan),var(--civic-mint));
  background-size:190% 190%;
  animation:vividGradientFlow 7s ease infinite, glowPulseStrong 3.8s ease-in-out infinite;
}
.btn-soft{
  background:linear-gradient(135deg,#ffffff,#eef8ff);
  color:var(--civic-blue);
}
.btn-outline:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.85)}

.hero,
.page-hero{
  background:
    linear-gradient(125deg,rgba(7,29,73,.88) 0%,rgba(37,99,255,.78) 42%,rgba(8,200,255,.55) 72%,rgba(18,214,166,.45) 100%),
    url('../images/hero-bg.jpg') center/cover no-repeat;
}
.hero-overlay{
  background:linear-gradient(90deg,rgba(7,29,73,.66),rgba(7,29,73,.20),rgba(7,29,73,.06));
}
.hero:before,
.page-hero:before{
  background:
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.16),transparent 15rem),
    radial-gradient(circle at 80% 26%,rgba(255,210,94,.18),transparent 12rem),
    radial-gradient(circle at 76% 78%,rgba(18,214,166,.14),transparent 12rem),
    linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:auto,auto,auto,56px 56px,56px 56px;
  opacity:.95;
  animation:heroGridDrift 16s ease-in-out infinite;
}
.hero:after,
.page-hero:after,
.soft-bg:after,
.gradient-panel:after,
.official-strip:after{
  animation:orbFloatStrong 16s ease-in-out infinite;
}
.page-hero .eyebrow,
.hero .eyebrow{
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.28);
  animation:badgePulse 4s ease-in-out infinite;
}
.hero h1,
.page-hero h1{
  text-shadow:0 18px 50px rgba(0,0,0,.18);
}
.hero p,
.page-hero p{
  color:rgba(255,255,255,.95);
}
.hero-card{
  border-color:rgba(37,99,255,.12);
  box-shadow:0 28px 70px rgba(7,29,73,.18);
}

main > section:not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg){
  background:
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,251,255,.98));
}
main > section.section-pad:nth-of-type(odd):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg){
  background:
    linear-gradient(180deg,rgba(246,251,255,.98),rgba(255,255,255,.96));
}
.soft-bg{
  background:
    linear-gradient(135deg,rgba(37,99,255,.07),rgba(8,200,255,.05) 45%,rgba(18,214,166,.07));
}
.gradient-panel{
  background:linear-gradient(135deg,var(--civic-blue),var(--civic-cyan),var(--civic-mint));
  background-size:180% 180%;
  animation:vividGradientFlow 10s ease infinite;
}
.official-strip{
  background:linear-gradient(135deg,#eef5ff,#f3fbff 50%,#f0fff9);
}

.info-card,
.official-card,
.profile-item,
.contact-card,
.contact-form,
.pledge,
.download-card,
.doc-row,
.accordion-item,
.image-card,
.official-mini,
.table-wrap{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,251,255,.93));
  border:1px solid rgba(37,99,255,.10);
  box-shadow:0 16px 40px rgba(7,29,73,.08);
}
.info-card:hover,
.official-card:hover,
.profile-item:hover,
.download-card:hover,
.doc-row:hover,
.image-card:hover,
.contact-card:hover{
  transform:translateY(-9px) scale(1.01);
  box-shadow:0 24px 56px rgba(37,99,255,.14),0 10px 26px rgba(8,200,255,.10);
  border-color:rgba(37,99,255,.18);
}
.info-card:before,
.official-card:before,
.download-card:before,
.contact-card:before{
  background:linear-gradient(90deg,var(--civic-blue),var(--civic-cyan),var(--civic-mint),var(--civic-gold));
  background-size:200% 200%;
  animation:vividGradientFlow 8s ease infinite;
}
.info-card .icon,
.download-card .icon{
  background:linear-gradient(135deg,rgba(37,99,255,.16),rgba(8,200,255,.12),rgba(18,214,166,.16));
  color:var(--civic-blue);
  box-shadow:0 14px 28px rgba(37,99,255,.12);
}
.section-heading h2,
.split-layout h2,
.pledge h2{
  color:var(--civic-navy);
}
.eyebrow{color:var(--civic-mint)}
.text-link{color:var(--civic-blue)}
.official-card span,
.official-mini span,
.date,
.mini-list span{color:var(--civic-blue)}
.status.ongoing{background:#e9f0ff;color:var(--civic-blue)}
.status.completed{background:#e8fff8;color:#09906d}
.status.upcoming{background:#fff4d4;color:#9a6b00}
th{background:linear-gradient(135deg,var(--civic-navy),var(--civic-blue),var(--civic-cyan));background-size:180% 180%;animation:vividGradientFlow 10s ease infinite}

.back-to-top{border-radius:18px}
.back-to-top.show{opacity:1;transform:none;box-shadow:0 20px 44px rgba(37,99,255,.26)}

@media (max-width:768px){
  body:before{background-size:30px 30px}
  .page-hero,
  .hero-content{overflow:hidden}
  .page-hero{
    background:
      linear-gradient(128deg,rgba(7,29,73,.92) 0%,rgba(37,99,255,.80) 46%,rgba(8,200,255,.58) 74%,rgba(18,214,166,.46) 100%),
      url('../images/hero-bg.jpg') center/cover no-repeat;
  }
  .page-hero:before,
  .hero:before{
    background-size:auto,auto,auto,36px 36px,36px 36px;
    opacity:.92;
  }
  .page-hero .eyebrow,
  .hero .eyebrow{box-shadow:0 12px 28px rgba(0,0,0,.10)}
  .info-card,
  .official-card,
  .contact-card,
  .contact-form,
  .pledge,
  .download-card,
  .profile-item,
  .doc-row,
  .accordion-item{
    box-shadow:0 14px 34px rgba(7,29,73,.08);
  }
}

@media (prefers-reduced-motion:reduce){
  .nav-link.active,
  .menu-toggle,
  .btn-primary,
  .back-to-top,
  .gradient-panel,
  th,
  .info-card:before,
  .official-card:before,
  .download-card:before,
  .contact-card:before,
  .page-hero .eyebrow,
  .hero .eyebrow{animation:none!important}
}


/* 2026-06-29 v4 standardized page backgrounds + home community hero */
:root{
  --standard-page-bg: linear-gradient(180deg,#f6fbff 0%,#ffffff 52%,#f5fffa 100%);
  --standard-section-bg: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  --standard-soft-section-bg: linear-gradient(135deg,rgba(37,99,255,.05),rgba(8,200,255,.04) 46%,rgba(18,214,166,.06));
}
body{
  background:
    radial-gradient(circle at 8% 4%,rgba(37,99,255,.15),transparent 24rem),
    radial-gradient(circle at 92% 7%,rgba(8,200,255,.12),transparent 20rem),
    radial-gradient(circle at 75% 92%,rgba(18,214,166,.08),transparent 18rem),
    var(--standard-page-bg);
}
main{
  background:transparent;
}
main > section:not(.hero):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg):not(.gradient-band){
  background:var(--standard-section-bg);
}
.soft-bg,
.official-strip,
.gradient-band{
  background:var(--standard-soft-section-bg);
}
.page-hero{
  background:
    linear-gradient(135deg,rgba(8,26,70,.92) 0%,rgba(20,83,194,.84) 46%,rgba(8,200,255,.66) 100%);
  position:relative;
}
.page-hero:before{
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.18),transparent 15rem),
    radial-gradient(circle at 82% 30%,rgba(255,210,94,.18),transparent 12rem),
    linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
}
.hero{
  background:
    linear-gradient(90deg,rgba(5,22,56,.80) 0%,rgba(11,59,140,.62) 34%,rgba(7,145,193,.30) 58%,rgba(255,255,255,0) 78%),
    url('../images/home-community-hero.jpg') center/cover no-repeat;
  position:relative;
  min-height:720px;
}
.hero-overlay{
  background:
    linear-gradient(90deg,rgba(4,19,48,.18),rgba(4,19,48,.05),rgba(4,19,48,0));
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 14% 20%,rgba(255,255,255,.16),transparent 15rem),
    radial-gradient(circle at 28% 80%,rgba(8,200,255,.16),transparent 18rem),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:auto,auto,56px 56px,56px 56px;
  opacity:.92;
  animation:heroGridDrift 14s ease-in-out infinite;
}
.hero:after{
  content:"";
  position:absolute;
  width:460px;
  height:460px;
  right:-120px;
  bottom:-150px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,.04) 55%,transparent 70%);
  animation:orbFloatStrong 16s ease-in-out infinite;
}
.hero .container::before,
.hero .container::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(8px);
  pointer-events:none;
}
.hero .container::before{
  width:110px;
  height:110px;
  right:12%;
  top:5%;
  background:rgba(37,99,255,.24);
  animation:orbFloatStrong 11s ease-in-out infinite;
}
.hero .container::after{
  width:68px;
  height:68px;
  left:58%;
  bottom:8%;
  background:rgba(18,214,166,.18);
  animation:orbFloatStrong 9s ease-in-out infinite reverse;
}
.hero-content{
  max-width:760px;
}
.hero h1,
.hero p,
.hero .eyebrow,
.hero .btn-outline,
.hero .btn-soft{position:relative;z-index:2}
.hero h1{
  color:#ffffff;
  max-width:10ch;
  text-shadow:0 14px 40px rgba(0,0,0,.28);
}
.hero p{
  color:rgba(255,255,255,.95);
  max-width:36rem;
  text-shadow:0 6px 20px rgba(0,0,0,.18);
}
.hero .eyebrow{
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.09));
  color:#dbfff6;
}
.hero-card{
  background:rgba(255,255,255,.94);
  box-shadow:0 24px 60px rgba(5,22,56,.18);
}
.hero-card strong{color:#0a2a61}
.hero-card span{color:#155eef}
.section-heading h2,
.split-layout h2,
.pledge h2,
.info-card h3,
.image-card h3,
.official-card h3,
.download-card h3{color:#09245b}
.info-card p,
.image-card p,
.official-card p,
.download-card p,
.split-layout p,
.section-heading p,
.profile-item span,
.doc-row span,
.contact-card p{color:#576d8a}
.info-card,
.official-card,
.profile-item,
.contact-card,
.contact-form,
.pledge,
.download-card,
.doc-row,
.accordion-item,
.image-card,
.official-mini,
.table-wrap{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,252,255,.96));
}
.stats-grid div{
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(241,248,255,.92));
}
.stats-grid strong{color:#0c2c68}
.stats-grid span{color:#527090}

@media (max-width:900px){
  .hero{
    min-height:auto;
    background-position:68% center;
  }
  .hero-content{padding:84px 0 132px}
}
@media (max-width:768px){
  .hero{
    background:
      linear-gradient(180deg,rgba(5,22,56,.76) 0%,rgba(10,61,153,.58) 34%,rgba(7,145,193,.24) 58%,rgba(5,22,56,.10) 100%),
      url('../images/home-community-hero.jpg') 68% center/cover no-repeat;
  }
  .hero:before{background-size:auto,auto,36px 36px,36px 36px}
  .hero:after{width:260px;height:260px;right:-90px;bottom:-100px}
  .hero .container::before{right:4%;top:2%;width:80px;height:80px}
  .hero .container::after{left:auto;right:20%;bottom:4%;width:52px;height:52px}
  .hero h1{max-width:9.2ch}
  .hero p{max-width:30ch}
  .page-hero{padding:80px 0 52px}
}
@media (max-width:480px){
  .hero{background-position:72% center}
  .hero-content{padding:70px 0 116px}
  .hero h1{max-width:9.5ch}
  .hero p{max-width:100%}
}


/* 2026-06-29 v6 softer community backgrounds + less boxy modern styling */
@keyframes softGlowFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(10px,-14px,0) scale(1.06)}
}
@keyframes gentleDrift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-10px,8px,0)}
}

body{
  background:
    radial-gradient(circle at 8% 4%,rgba(37,99,255,.12),transparent 23rem),
    radial-gradient(circle at 92% 8%,rgba(8,200,255,.10),transparent 20rem),
    radial-gradient(circle at 74% 90%,rgba(18,214,166,.08),transparent 18rem),
    linear-gradient(180deg,#f7fbff 0%,#ffffff 48%,#f7fffb 100%);
}
body:before{
  background-image:none;
  opacity:.35;
}
main > section:not(.hero):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg):not(.gradient-band){
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,255,.96));
}
main > section.section-pad:nth-of-type(odd):not(.hero):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg):not(.gradient-band){
  background:linear-gradient(180deg,rgba(248,251,255,.97),rgba(255,255,255,.98));
}
.soft-bg,
.official-strip,
.gradient-band{
  background:
    radial-gradient(circle at 10% 18%,rgba(37,99,255,.06),transparent 16rem),
    radial-gradient(circle at 90% 20%,rgba(8,200,255,.05),transparent 14rem),
    linear-gradient(135deg,rgba(255,255,255,.94),rgba(244,250,255,.96) 58%,rgba(243,255,250,.95));
}

.hero{
  background:
    linear-gradient(90deg,rgba(4,20,56,.88) 0%,rgba(4,20,56,.74) 25%,rgba(8,50,113,.52) 48%,rgba(8,50,113,.18) 72%,rgba(255,255,255,0) 100%),
    url('../images/home-community-hero.jpg') 78% center/cover no-repeat;
  min-height:720px;
}
.hero-overlay{
  background:linear-gradient(90deg,rgba(4,20,56,.16),rgba(4,20,56,.04),rgba(4,20,56,0));
}
.hero:before{
  background:
    radial-gradient(circle at 16% 22%,rgba(255,255,255,.16),transparent 16rem),
    radial-gradient(circle at 72% 20%,rgba(8,200,255,.10),transparent 12rem),
    radial-gradient(circle at 58% 84%,rgba(18,214,166,.12),transparent 12rem);
  background-size:auto;
  opacity:.9;
  animation:gentleDrift 16s ease-in-out infinite;
}
.hero:after{
  width:420px;
  height:420px;
  right:-110px;
  bottom:-130px;
  background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,.03) 58%,transparent 72%);
  animation:softGlowFloat 15s ease-in-out infinite;
}
.hero .container::before,
.hero .container::after{
  filter:blur(18px);
}
.hero-content{
  max-width:760px;
  position:relative;
}
.hero h1,
.hero p,
.hero .eyebrow,
.hero .btn-outline,
.hero .btn-soft,
.hero .btn-primary{
  position:relative;
  z-index:2;
}
.hero h1{
  max-width:9.2ch;
  text-shadow:0 18px 46px rgba(0,0,0,.34);
}
.hero p{
  max-width:35rem;
  text-shadow:0 8px 24px rgba(0,0,0,.20);
}

.page-hero{
  background:
    linear-gradient(120deg,rgba(10,31,81,.88) 0%,rgba(22,79,188,.74) 46%,rgba(9,170,221,.58) 100%),
    url('../images/community-bg-soft.jpg') center/cover no-repeat;
  position:relative;
}
.page-hero:before{
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.14),transparent 16rem),
    radial-gradient(circle at 82% 22%,rgba(255,255,255,.10),transparent 14rem),
    radial-gradient(circle at 76% 78%,rgba(18,214,166,.12),transparent 16rem);
  background-size:auto;
  opacity:.95;
  animation:gentleDrift 16s ease-in-out infinite;
}
.page-hero:after{
  content:"";
  position:absolute;
  right:-90px;
  top:50%;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.12),rgba(255,255,255,.02) 58%,transparent 72%);
  transform:translateY(-50%);
  animation:softGlowFloat 15s ease-in-out infinite;
}
.page-hero .container{
  position:relative;
  z-index:1;
}
.page-hero h1{
  max-width:10ch;
}
.page-hero p{
  max-width:40rem;
}

.info-card,
.official-card,
.profile-item,
.contact-card,
.contact-form,
.pledge,
.download-card,
.doc-row,
.accordion-item,
.image-card,
.official-mini,
.table-wrap,
.stats-grid div,
.hero-card{
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,251,255,.95));
  border:1px solid rgba(37,99,255,.08);
  box-shadow:0 18px 42px rgba(7,29,73,.08);
}
.info-card:hover,
.official-card:hover,
.profile-item:hover,
.download-card:hover,
.doc-row:hover,
.image-card:hover,
.contact-card:hover,
.stats-grid div:hover{
  transform:translateY(-8px);
  box-shadow:0 28px 58px rgba(7,29,73,.12);
}
.stats-grid div{
  min-height:120px;
}
.section-heading h2,
.split-layout h2,
.pledge h2,
.info-card h3,
.image-card h3,
.official-card h3,
.download-card h3{
  letter-spacing:-.03em;
}
.image-card img,
.rounded-img{
  border-radius:24px;
}

@media (max-width:900px){
  .hero{background-position:72% center}
}
@media (max-width:768px){
  .hero{
    background:
      linear-gradient(180deg,rgba(4,20,56,.82) 0%,rgba(4,20,56,.62) 38%,rgba(8,50,113,.34) 70%,rgba(4,20,56,.12) 100%),
      url('../images/home-community-hero.jpg') 72% center/cover no-repeat;
    min-height:auto;
  }
  .hero:after{width:240px;height:240px;right:-70px;bottom:-90px}
  .page-hero{
    background:
      linear-gradient(140deg,rgba(10,31,81,.90) 0%,rgba(22,79,188,.76) 50%,rgba(9,170,221,.62) 100%),
      url('../images/community-bg-soft.jpg') center/cover no-repeat;
  }
  .page-hero:after{width:180px;height:180px;right:-60px}
}
@media (max-width:480px){
  .hero{background-position:75% center}
  .page-hero h1{max-width:9ch}
}


/* 2026-06-29 v7 balanced subtle community-people hero background */
.hero{
  background:
    linear-gradient(90deg,rgba(5,23,58,.88) 0%,rgba(5,23,58,.74) 24%,rgba(10,61,153,.50) 48%,rgba(10,61,153,.20) 70%,rgba(255,255,255,0) 100%),
    url('../images/home-community-balanced.jpg') 80% center/cover no-repeat !important;
  min-height:720px;
}
.hero-overlay{
  background:linear-gradient(90deg,rgba(5,23,58,.12),rgba(5,23,58,.04),rgba(5,23,58,0));
}
.hero:before{
  background:
    radial-gradient(circle at 16% 20%,rgba(255,255,255,.14),transparent 15rem),
    radial-gradient(circle at 76% 18%,rgba(8,200,255,.08),transparent 12rem),
    radial-gradient(circle at 60% 84%,rgba(18,214,166,.10),transparent 12rem);
  opacity:.72;
}
.hero:after{
  width:390px;
  height:390px;
  right:-90px;
  bottom:-120px;
  background:radial-gradient(circle,rgba(255,255,255,.14),rgba(255,255,255,.02) 58%,transparent 72%);
}
.hero h1{
  color:#ffffff;
  text-shadow:0 18px 42px rgba(0,0,0,.32);
}
.hero p{
  color:rgba(255,255,255,.94);
  text-shadow:0 8px 22px rgba(0,0,0,.18);
}
.hero-card{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,251,255,.95));
}
@media (max-width:900px){
  .hero{
    background:
      linear-gradient(90deg,rgba(5,23,58,.88) 0%,rgba(5,23,58,.72) 28%,rgba(10,61,153,.42) 60%,rgba(255,255,255,0) 100%),
      url('../images/home-community-balanced.jpg') 76% center/cover no-repeat !important;
  }
}
@media (max-width:768px){
  .hero{
    background:
      linear-gradient(180deg,rgba(5,23,58,.82) 0%,rgba(5,23,58,.62) 36%,rgba(10,61,153,.30) 66%,rgba(5,23,58,.12) 100%),
      url('../images/home-community-balanced.jpg') 72% center/cover no-repeat !important;
  }
}
@media (max-width:480px){
  .hero{
    background:
      linear-gradient(180deg,rgba(5,23,58,.84) 0%,rgba(5,23,58,.66) 34%,rgba(10,61,153,.32) 66%,rgba(5,23,58,.18) 100%),
      url('../images/home-community-balanced.jpg') 74% center/cover no-repeat !important;
  }
}


/* 2026-06-29 v8 mobile balance fix only */
html, body{
  max-width:100%;
  overflow-x:hidden;
}
.site-header,
.hero,
.page-hero,
main,
section{
  width:100%;
  max-width:100%;
}
.hero,
.page-hero{
  margin:0;
}

@media (max-width:768px){
  .container,
  .navbar.container,
  .page-hero .container,
  .hero .container{
    width:calc(100% - 24px) !important;
    max-width:calc(100% - 24px) !important;
    margin-left:auto;
    margin-right:auto;
  }
  .site-header{position:sticky;top:0}
  .navbar{
    min-height:64px;
    align-items:center;
    gap:10px;
  }
  .brand{
    max-width:calc(100vw - 92px);
    min-width:0;
    padding:6px 9px 6px 6px;
    border-radius:17px;
    gap:8px;
  }
  .brand img{
    width:42px !important;
    height:42px !important;
    border-radius:13px;
    flex:0 0 42px;
  }
  .brand span{min-width:0;display:block}
  .brand strong{
    font-size:.94rem !important;
    line-height:1.05;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .brand small{display:none !important}
  .menu-toggle{
    width:42px;
    height:42px;
    border-radius:14px;
    flex:0 0 42px;
  }
  .nav-menu{
    left:12px !important;
    right:12px !important;
    top:calc(100% + 8px);
    grid-template-columns:1fr !important;
    max-height:calc(100vh - 88px);
    overflow:auto;
  }

  .hero{
    min-height:auto !important;
    display:block;
    background-position:72% center !important;
  }
  .hero-content{
    width:100%;
    max-width:100% !important;
    padding:56px 0 28px !important;
  }
  .hero .eyebrow,
  .page-hero .eyebrow{
    font-size:.69rem !important;
    letter-spacing:.10em;
    padding:7px 11px;
    margin-bottom:14px;
  }
  .hero h1,
  .page-hero h1{
    max-width:100% !important;
    font-size:clamp(2.05rem,9.4vw,2.55rem) !important;
    line-height:1.07 !important;
    letter-spacing:-.045em !important;
    text-wrap:balance;
    margin-bottom:16px;
  }
  .hero p,
  .page-hero p{
    max-width:100% !important;
    font-size:.98rem !important;
    line-height:1.62 !important;
    margin-bottom:0;
  }
  .hero-actions{
    display:grid !important;
    grid-template-columns:1fr;
    gap:10px !important;
    margin-top:24px !important;
  }
  .hero-actions .btn,
  .btn{
    width:100%;
    min-height:48px;
    padding:12px 18px !important;
  }
  .hero-card{
    position:relative !important;
    right:auto !important;
    bottom:auto !important;
    width:calc(100% - 24px) !important;
    max-width:360px !important;
    margin:18px auto 34px !important;
    padding:20px !important;
    border-radius:24px !important;
  }
  .hero-card span{
    font-size:1.5rem !important;
    line-height:1.12;
  }

  .page-hero{
    padding:58px 0 48px !important;
    min-height:auto !important;
  }
  .page-hero .container{
    padding:0 !important;
  }
  .page-hero h1{
    margin-bottom:14px;
  }

  .section-pad{
    padding:48px 0 !important;
  }
  .section-pad-sm{
    padding:42px 0 !important;
  }
  .section-heading{
    margin-bottom:28px !important;
    text-align:left;
  }
  .section-heading h2,
  .split-layout h2,
  .pledge h2{
    font-size:clamp(1.75rem,7.8vw,2.15rem) !important;
    line-height:1.12;
    max-width:100%;
  }
  .split-layout,
  .contact-grid{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }
  .card-grid,
  .card-grid.three,
  .card-grid.two,
  .officials-grid,
  .stats-grid,
  .profile-grid,
  .downloads-grid,
  .service-meta{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .info-card,
  .official-card,
  .contact-card,
  .contact-form,
  .pledge,
  .download-card,
  .profile-item,
  .doc-row,
  .accordion-item,
  .official-mini,
  .stats-grid div{
    padding:20px !important;
    border-radius:22px !important;
  }
  .rounded-img{
    min-height:210px !important;
    border-radius:22px !important;
  }
  .official-mini{
    text-align:center;
    align-items:center;
  }
  .official-mini img{
    width:120px !important;
    height:120px !important;
    margin-inline:auto;
  }
  .footer-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
    padding:42px 0 !important;
  }
}

@media (max-width:420px){
  .container,
  .navbar.container,
  .page-hero .container,
  .hero .container{
    width:calc(100% - 20px) !important;
    max-width:calc(100% - 20px) !important;
  }
  .hero-content{
    padding:52px 0 24px !important;
  }
  .hero h1,
  .page-hero h1{
    font-size:clamp(1.95rem,10vw,2.35rem) !important;
  }
  .page-hero{
    padding:54px 0 42px !important;
  }
  .section-pad{padding:42px 0 !important}
  .hero-card{width:calc(100% - 20px) !important}
}


/* 2026-06-29 desktop hero gap correction only */
@media (min-width:901px){
  .hero{
    width:100% !important;
    margin:0 !important;
    overflow:hidden;
    background:
      linear-gradient(90deg,rgba(5,23,58,.86) 0%,rgba(5,23,58,.70) 22%,rgba(10,61,153,.48) 45%,rgba(10,61,153,.22) 68%,rgba(10,61,153,.08) 100%),
      url('../images/home-community-balanced.jpg') 74% center/cover no-repeat !important;
  }
  .hero .container{
    width:min(1440px,calc(100% - 96px)) !important;
    max-width:1440px !important;
    margin-inline:auto !important;
  }
  .hero-content{
    margin-left:0 !important;
    max-width:720px !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .hero h1{
    max-width:10ch !important;
  }
  .hero p{
    max-width:34rem !important;
  }
  .hero-card{
    right:6.5% !important;
    bottom:78px !important;
    width:min(340px,calc(100% - 48px)) !important;
  }
}

@media (min-width:1400px){
  .hero .container{
    width:min(1500px,calc(100% - 120px)) !important;
    max-width:1500px !important;
  }
  .hero-card{
    right:8% !important;
  }
}


/* 2026-06-29 inner page heroes: community people a bit more visible, home hero unchanged */
.page-hero{
  background:
    linear-gradient(100deg,rgba(9,32,86,.82) 0%,rgba(22,79,188,.62) 44%,rgba(9,170,221,.42) 100%),
    url('../images/community-bg-visible.jpg') center/cover no-repeat !important;
}
.page-hero:before{
  background:
    radial-gradient(circle at 16% 20%,rgba(255,255,255,.12),transparent 15rem),
    radial-gradient(circle at 82% 20%,rgba(255,255,255,.08),transparent 13rem),
    radial-gradient(circle at 74% 78%,rgba(18,214,166,.10),transparent 15rem);
  opacity:.72;
}
.page-hero:after{
  background:radial-gradient(circle,rgba(255,255,255,.10),rgba(255,255,255,.02) 58%,transparent 72%);
  opacity:.62;
}
.page-hero h1,
.page-hero p{
  text-shadow:0 10px 28px rgba(0,0,0,.20);
}

@media (max-width:768px){
  .page-hero{
    background:
      linear-gradient(145deg,rgba(9,32,86,.86) 0%,rgba(22,79,188,.66) 52%,rgba(9,170,221,.46) 100%),
      url('../images/community-bg-visible.jpg') center/cover no-repeat !important;
  }
}


/* 2026-06-29 v10 mobile page-hero balance + larger mobile logo
   Scope: mobile-only spacing/header correction for all pages. */
@media (max-width:768px){
  /* Make the mobile logo more visible without increasing the whole header too much */
  .navbar{
    min-height:68px !important;
    padding-top:6px !important;
    padding-bottom:6px !important;
  }
  .brand{
    max-width:calc(100vw - 94px) !important;
    padding:7px 11px 7px 7px !important;
    gap:9px !important;
    border-radius:18px !important;
  }
  .brand img{
    width:48px !important;
    height:48px !important;
    flex:0 0 48px !important;
    border-radius:14px !important;
  }
  .brand strong{
    font-size:1rem !important;
    line-height:1.05 !important;
  }
  .menu-toggle{
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
    border-radius:15px !important;
  }

  /* Remove the uneven top gap on all inner page banners */
  .page-hero{
    padding:30px 0 34px !important;
    min-height:220px !important;
    display:flex !important;
    align-items:center !important;
  }
  .page-hero .container{
    width:calc(100% - 28px) !important;
    max-width:calc(100% - 28px) !important;
    padding:0 !important;
    margin-inline:auto !important;
  }
  .page-hero .eyebrow{
    margin-bottom:12px !important;
  }
  .page-hero h1{
    margin-bottom:12px !important;
    max-width:100% !important;
    font-size:clamp(2rem,8.8vw,2.55rem) !important;
    line-height:1.08 !important;
  }
  .page-hero p{
    max-width:100% !important;
    font-size:.98rem !important;
    line-height:1.55 !important;
  }

  /* Keep home hero balanced separately */
  .hero-content{
    padding-top:46px !important;
    padding-bottom:28px !important;
  }
  .hero-card{
    margin-top:16px !important;
  }
}

@media (max-width:420px){
  .navbar{
    min-height:66px !important;
  }
  .brand img{
    width:46px !important;
    height:46px !important;
    flex-basis:46px !important;
  }
  .brand strong{
    font-size:.96rem !important;
  }
  .page-hero{
    padding:26px 0 32px !important;
    min-height:210px !important;
  }
  .page-hero .container{
    width:calc(100% - 24px) !important;
    max-width:calc(100% - 24px) !important;
  }
  .page-hero h1{
    font-size:clamp(1.9rem,9.2vw,2.35rem) !important;
  }
}


/* 2026-06-29 v11 mobile home hero balance only */
@media (max-width:768px){
  .hero{
    min-height:auto !important;
  }
  .hero .container{
    width:calc(100% - 28px) !important;
    max-width:calc(100% - 28px) !important;
    margin-inline:auto !important;
  }
  .hero-content{
    width:100% !important;
    max-width:100% !important;
    padding:34px 0 20px !important;
  }
  .hero .eyebrow{
    margin-bottom:12px !important;
    font-size:.70rem !important;
    padding:8px 12px !important;
  }
  .hero h1{
    max-width:100% !important;
    font-size:clamp(1.95rem,8.7vw,2.42rem) !important;
    line-height:1.06 !important;
    letter-spacing:-.042em !important;
    margin-bottom:14px !important;
  }
  .hero p{
    max-width:100% !important;
    font-size:.98rem !important;
    line-height:1.55 !important;
    margin-bottom:0 !important;
  }
  .hero-actions{
    margin-top:20px !important;
    gap:10px !important;
  }
  .hero-actions .btn{
    min-height:46px !important;
    font-size:1rem !important;
    padding:12px 16px !important;
  }
  .hero-card{
    width:calc(100% - 28px) !important;
    max-width:360px !important;
    margin:16px auto 26px !important;
    padding:18px 20px !important;
    border-radius:22px !important;
  }
  .hero-card strong{
    font-size:1rem !important;
  }
  .hero-card span{
    font-size:1.25rem !important;
    margin-top:6px !important;
    display:block;
  }
  .hero-card small{
    font-size:.92rem !important;
    line-height:1.45 !important;
  }
}

@media (max-width:420px){
  .hero .container{
    width:calc(100% - 24px) !important;
    max-width:calc(100% - 24px) !important;
  }
  .hero-content{
    padding:30px 0 18px !important;
  }
  .hero h1{
    font-size:clamp(1.85rem,9.2vw,2.2rem) !important;
  }
  .hero p{
    font-size:.96rem !important;
  }
  .hero-card{
    width:calc(100% - 24px) !important;
    margin:14px auto 22px !important;
  }
}


/* 2026-06-29 final: compact mobile hero buttons + cleaner location panel */
@media (max-width:768px){
  .hero-actions{
    max-width:320px !important;
    margin:18px auto 0 !important;
    gap:9px !important;
  }
  .hero-actions .btn{
    width:100% !important;
    min-height:42px !important;
    padding:9px 14px !important;
    font-size:.94rem !important;
    border-radius:999px !important;
  }
  .hero-card{
    max-width:320px !important;
    padding:16px 18px !important;
  }
  .hero-card span{
    font-size:1.18rem !important;
  }
}
@media (max-width:420px){
  .hero-actions{
    max-width:300px !important;
  }
  .hero-actions .btn{
    min-height:40px !important;
    font-size:.92rem !important;
  }
}

/* Calm down the bright location overview section */
.gradient-panel{
  background:
    radial-gradient(circle at 10% 10%, rgba(37,99,255,.08), transparent 18rem),
    radial-gradient(circle at 90% 10%, rgba(18,214,166,.08), transparent 18rem),
    linear-gradient(135deg,#f7fbff 0%,#ffffff 52%,#f4fffb 100%) !important;
  color:#0b1f3a !important;
}
.gradient-panel h2{color:#09245b !important;}
.gradient-panel p{color:#576d8a !important;}
.gradient-panel .map-placeholder,
.gradient-panel .map-embed{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,251,255,.96)) !important;
  border:1px solid rgba(37,99,255,.10) !important;
  color:#09245b !important;
  box-shadow:0 18px 42px rgba(7,29,73,.08) !important;
}
.gradient-panel .map-placeholder small{color:#576d8a !important;}


/* 2026-06-29 lively motion refresh - visual only */
@keyframes floatSoft{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-8px,0)}
}
@keyframes floatSide{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(16px,-12px,0) scale(1.04)}
}
@keyframes gradientMove{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes shineLine{
  0%{transform:translateX(-140%)}
  100%{transform:translateX(160%)}
}
@keyframes iconPop{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-6px) rotate(-2deg)}
}
@keyframes softPulse{
  0%,100%{box-shadow:0 18px 42px rgba(7,29,73,.08)}
  50%{box-shadow:0 26px 60px rgba(21,94,239,.16)}
}

.hero:before,
.page-hero:before{
  animation:gradientMove 18s ease-in-out infinite, gentleDrift 14s ease-in-out infinite;
}
.hero:after,
.page-hero:after,
main > section:not(.hero):not(.page-hero)::before,
main > section:not(.hero):not(.page-hero)::after{
  animation:floatSide 14s ease-in-out infinite;
}
.hero-card,
.official-mini{
  animation:floatSoft 6s ease-in-out infinite;
}
.btn-primary,
.menu-toggle,
.back-to-top{
  background-size:200% 200% !important;
  animation:gradientMove 7s ease infinite, softPulse 4.5s ease-in-out infinite;
}
.btn,
.nav-link,
.info-card,
.official-card,
.image-card,
.profile-item,
.download-card,
.doc-row,
.accordion-item,
.stats-grid div{
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease, color .28s ease;
}
.btn:hover,
.nav-link:hover{
  transform:translateY(-3px);
}
.info-card:hover,
.official-card:hover,
.image-card:hover,
.profile-item:hover,
.download-card:hover,
.doc-row:hover,
.accordion-item:hover,
.stats-grid div:hover{
  transform:translateY(-8px) scale(1.01);
}
.info-card,
.official-card,
.image-card,
.profile-item,
.download-card,
.doc-row,
.stats-grid div,
.contact-card,
.official-mini{
  position:relative;
  overflow:hidden;
}
.info-card:after,
.official-card:after,
.image-card:after,
.profile-item:after,
.download-card:after,
.doc-row:after,
.stats-grid div:after,
.contact-card:after,
.official-mini:after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:42%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));
  opacity:0;
  pointer-events:none;
}
.info-card:hover:after,
.official-card:hover:after,
.image-card:hover:after,
.profile-item:hover:after,
.download-card:hover:after,
.doc-row:hover:after,
.stats-grid div:hover:after,
.contact-card:hover:after,
.official-mini:hover:after{
  opacity:1;
  animation:shineLine 1.1s ease;
}
.info-card .icon,
.download-card .icon,
.official-card img,
.official-mini img{
  animation:iconPop 5.5s ease-in-out infinite;
}
.official-card:nth-child(2n) img{animation-delay:.4s}
.official-card:nth-child(3n) img{animation-delay:.8s}
.info-card:nth-child(2n) .icon{animation-delay:.5s}
.info-card:nth-child(3n) .icon{animation-delay:.9s}
.image-card img{
  transition:transform .65s ease, filter .65s ease;
}
.image-card:hover img{
  transform:scale(1.08);
  filter:saturate(1.12) contrast(1.04);
}
.accordion-trigger b{
  transition:transform .25s ease, background .25s ease;
}
.accordion-trigger:hover b{
  transform:rotate(90deg) scale(1.08);
}
.reveal,
.reveal-left,
.reveal-right,
.reveal-zoom{
  transition-duration:.82s !important;
  transition-timing-function:cubic-bezier(.2,.8,.2,1) !important;
}
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-zoom.visible{
  will-change:transform,opacity;
}

@media (max-width:768px){
  .hero-card,
  .official-mini{
    animation:none;
  }
  .info-card:hover,
  .official-card:hover,
  .image-card:hover,
  .profile-item:hover,
  .download-card:hover,
  .doc-row:hover,
  .accordion-item:hover,
  .stats-grid div:hover{
    transform:translateY(-4px);
  }
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation:none!important;
    transition:none!important;
  }
}

/* ===== Balanced Global Background Refresh ===== */
/* Added to balance the overall background and reduce plain white empty areas */

:root{
  --balanced-page-top: #f5f9ff;
  --balanced-page-mid: #ffffff;
  --balanced-page-bottom: #eef6ff;

  --balanced-section-1: rgba(255,255,255,.96);
  --balanced-section-2: rgba(247,251,255,.96);

  --balanced-section-alt-1: rgba(248,251,255,.97);
  --balanced-section-alt-2: rgba(255,255,255,.98);

  --balanced-card-bg: rgba(255,255,255,.90);
  --balanced-card-border: rgba(37,99,255,.08);
}

/* Overall page background */
body{
  background:
    radial-gradient(circle at 12% 10%, rgba(37,99,255,.06), transparent 22%),
    radial-gradient(circle at 88% 18%, rgba(8,200,255,.05), transparent 20%),
    radial-gradient(circle at 20% 85%, rgba(18,214,166,.05), transparent 22%),
    linear-gradient(180deg, var(--balanced-page-top) 0%, var(--balanced-page-mid) 42%, var(--balanced-page-bottom) 100%) !important;
}

/* Keep standard sections balanced and not too white */
main > section:not(.hero):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg):not(.gradient-band){
  background: linear-gradient(180deg, var(--balanced-section-1), var(--balanced-section-2)) !important;
  position: relative;
  overflow: hidden;
}

/* Subtle alternating section tone */
main > section.section-pad:nth-of-type(odd):not(.hero):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg):not(.gradient-band){
  background: linear-gradient(180deg, var(--balanced-section-alt-1), var(--balanced-section-alt-2)) !important;
}

/* Soft glow overlay for sections */
main > section:not(.hero):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg):not(.gradient-band)::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(37,99,255,.045), transparent 20%),
    radial-gradient(circle at 85% 75%, rgba(18,214,166,.04), transparent 22%);
  z-index: 0;
}

main > section > .container{
  position: relative;
  z-index: 1;
}

/* Softer modern cards */
.info-card,
.official-card,
.contact-card,
.contact-form,
.pledge,
.download-card,
.doc-row,
.profile-item,
.image-card,
.accordion-item,
.table-wrap,
.official-mini,
.mini-list article{
  background: var(--balanced-card-bg) !important;
  border: 1px solid var(--balanced-card-border) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Softer body text inside content areas */
.section-heading p,
.info-card p,
.download-card p,
.doc-row p,
.profile-item span,
.mini-list article p{
  color: #5c6f86;
}

/* ===== Location Overview Background Fix ===== */
/* Prevents the Location Overview section from looking too washed out after the global background refresh */

.split-layout{
  align-items: center;
}

.split-layout.section-pad,
section.section-pad:has(.split-layout){
  background:
    radial-gradient(circle at 8% 18%, rgba(37,99,255,.045), transparent 26%),
    radial-gradient(circle at 92% 20%, rgba(18,214,166,.055), transparent 28%),
    linear-gradient(180deg, rgba(248,251,255,.98), rgba(255,255,255,.97)) !important;
}

.map-placeholder{
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,251,255,.94)) !important;
  border: 1px solid rgba(37,99,255,.10) !important;
  box-shadow: 0 18px 46px rgba(8,38,77,.10) !important;
  color: var(--blue-dark) !important;
  min-height: 300px;
}

.map-placeholder small{
  color: #5c6f86 !important;
}

.map-placeholder strong,
.map-placeholder p{
  color: var(--blue-dark) !important;
}

/* Make the section feel less empty on wide screens */
.split-layout > div:first-child{
  max-width: 620px;
}

@media (max-width: 900px){
  .split-layout{
    align-items: start;
  }

  .map-placeholder{
    min-height: 240px;
  }
}

/* ===== Modern Motion Polish ===== */
/* Added subtle moving parts, modern hover effects, and balanced animation without changing layout/content */

:root{
  --motion-blue: rgba(37,99,255,.13);
  --motion-cyan: rgba(8,200,255,.12);
  --motion-mint: rgba(18,214,166,.14);
  --motion-gold: rgba(247,201,72,.14);
}

/* animated soft background ambience */
body::after{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 18% 22%, var(--motion-blue), transparent 18rem),
    radial-gradient(circle at 82% 18%, var(--motion-mint), transparent 20rem),
    radial-gradient(circle at 72% 82%, var(--motion-cyan), transparent 18rem),
    radial-gradient(circle at 16% 86%, var(--motion-gold), transparent 16rem);
  filter: blur(2px);
  opacity:.72;
  animation: civicAmbientMove 18s ease-in-out infinite alternate;
}

/* subtle civic dot pattern on standard sections */
main > section:not(.hero):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg):not(.gradient-band)::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.26;
  background-image:
    radial-gradient(circle, rgba(37,99,255,.16) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(18,214,166,.12) 1px, transparent 1.6px);
  background-size:46px 46px, 72px 72px;
  background-position:0 0, 22px 26px;
  animation: civicDotsFloat 28s linear infinite;
}

main > section > .container{
  position:relative;
  z-index:1;
}

/* richer hero movement */
.hero::before,
.page-hero::before{
  animation: civicHeroGlow 14s ease-in-out infinite alternate;
}

.hero::after,
.page-hero::after{
  animation: civicFloatSlow 10s ease-in-out infinite alternate;
}

/* modern card movement */
.info-card,
.official-card,
.contact-card,
.contact-form,
.pledge,
.download-card,
.doc-row,
.profile-item,
.image-card,
.accordion-item,
.table-wrap,
.official-mini,
.mini-list article,
.hero-card{
  transform:translateY(0);
  transition:
    transform .32s ease,
    box-shadow .32s ease,
    border-color .32s ease,
    background .32s ease;
}

.info-card:hover,
.official-card:hover,
.contact-card:hover,
.download-card:hover,
.profile-item:hover,
.image-card:hover,
.accordion-item:hover,
.official-mini:hover,
.mini-list article:hover,
.hero-card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 60px rgba(8,38,77,.14) !important;
  border-color:rgba(37,99,255,.18) !important;
}

/* animated accent line on cards */
.info-card::before,
.official-card::before,
.download-card::before,
.contact-card::before,
.pledge::before{
  background:linear-gradient(90deg,var(--civic-blue),var(--civic-cyan),var(--civic-mint),var(--civic-gold),var(--civic-blue)) !important;
  background-size:260% 100% !important;
  animation:civicAccentFlow 7s linear infinite;
}

/* icon float and glow */
.icon{
  animation:civicIconFloat 4.8s ease-in-out infinite;
}

.info-card:nth-child(2) .icon,
.download-card:nth-child(2) .icon,
.profile-item:nth-child(2) .icon{
  animation-delay:.45s;
}

.info-card:nth-child(3) .icon,
.download-card:nth-child(3) .icon,
.profile-item:nth-child(3) .icon{
  animation-delay:.9s;
}

.info-card:nth-child(4) .icon,
.download-card:nth-child(4) .icon,
.profile-item:nth-child(4) .icon{
  animation-delay:1.35s;
}

/* navigation feels more modern */
.nav-link{
  position:relative;
  overflow:hidden;
}

.nav-link::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:7px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--civic-blue),var(--civic-mint));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}

.nav-link:hover::after,
.nav-link.active::after{
  transform:scaleX(1);
}

/* button shine */
.btn,
.btn-primary,
.btn-outline,
.btn-soft,
.btn-small{
  position:relative;
  overflow:hidden;
}

.btn::after,
.btn-primary::after,
.btn-outline::after,
.btn-soft::after,
.btn-small::after{
  content:"";
  position:absolute;
  inset:-40% auto -40% -70%;
  width:42%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transition:left .55s ease;
}

.btn:hover::after,
.btn-primary:hover::after,
.btn-outline:hover::after,
.btn-soft:hover::after,
.btn-small:hover::after{
  left:130%;
}

/* map/location placeholder now feels intentional */
.map-placeholder{
  position:relative;
  overflow:hidden;
}

.map-placeholder::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-70px;
  top:-70px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(18,214,166,.18),transparent 70%);
  animation:civicFloatSlow 8s ease-in-out infinite alternate;
}

.map-placeholder::after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  left:-60px;
  bottom:-60px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,255,.15),transparent 70%);
  animation:civicFloatReverse 9s ease-in-out infinite alternate;
}

.map-placeholder > *{
  position:relative;
  z-index:1;
}

/* smooth entrance polish */
.reveal{
  will-change:transform,opacity;
}

.reveal.visible{
  animation:civicRevealUp .62s ease both;
}

/* accordion interaction */
.accordion-trigger{
  transition:background .28s ease, color .28s ease, transform .28s ease;
}

.accordion-trigger:hover{
  background:linear-gradient(90deg,#ffffff,#f0f8ff) !important;
}

.accordion-trigger b{
  transition:transform .28s ease, background .28s ease;
}

.accordion-trigger:hover b{
  transform:rotate(90deg) scale(1.04);
}

/* keep animation respectful for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}

/* motion keyframes */
@keyframes civicAmbientMove{
  0%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(2.5%, -1.5%, 0) scale(1.03);}
  100%{transform:translate3d(-1.5%, 2%, 0) scale(1.02);}
}

@keyframes civicDotsFloat{
  from{background-position:0 0, 22px 26px;}
  to{background-position:46px 46px, 94px 98px;}
}

@keyframes civicHeroGlow{
  0%{opacity:.78;transform:scale(1);}
  100%{opacity:1;transform:scale(1.035);}
}

@keyframes civicFloatSlow{
  0%{transform:translate3d(0,0,0) scale(1);}
  100%{transform:translate3d(-18px,14px,0) scale(1.04);}
}

@keyframes civicFloatReverse{
  0%{transform:translate3d(0,0,0) scale(1);}
  100%{transform:translate3d(18px,-14px,0) scale(1.04);}
}

@keyframes civicAccentFlow{
  0%{background-position:0% 50%;}
  100%{background-position:260% 50%;}
}

@keyframes civicIconFloat{
  0%,100%{transform:translateY(0);box-shadow:inset 0 0 0 1px rgba(13,71,161,.08), 0 0 0 rgba(37,99,255,0);}
  50%{transform:translateY(-5px);box-shadow:inset 0 0 0 1px rgba(13,71,161,.08), 0 14px 26px rgba(37,99,255,.10);}
}

@keyframes civicRevealUp{
  0%{opacity:0;transform:translateY(18px);}
  100%{opacity:1;transform:translateY(0);}
}

@media (max-width: 768px){
  body::after{
    opacity:.48;
  }

  main > section:not(.hero):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.soft-bg):not(.gradient-band)::after{
    opacity:.16;
    background-size:36px 36px, 58px 58px;
  }

  .info-card:hover,
  .official-card:hover,
  .contact-card:hover,
  .download-card:hover,
  .profile-item:hover,
  .image-card:hover,
  .accordion-item:hover,
  .official-mini:hover,
  .mini-list article:hover,
  .hero-card:hover{
    transform:translateY(-4px);
  }
}

/* ===== Recommended Modern Card Color Design ===== */
/* Softer, less repetitive civic gradients for announcement / community cards */

.image-card{
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(37,99,255,.09) !important;
  box-shadow: 0 18px 48px rgba(8,38,77,.10) !important;
}

.image-card img{
  filter: saturate(.86) contrast(.96) brightness(1.03);
}

/* Add soft overlay so repeated graphics feel more premium and less strong */
.image-card{
  position: relative;
}

.image-card::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 220px;
  pointer-events: none;
  border-radius: var(--radius) var(--radius) 0 0;
  opacity: .92;
  mix-blend-mode: soft-light;
}

/* Barangay Assembly / first card: blue to teal */
.image-card:nth-child(6n+1)::after{
  background:
    radial-gradient(circle at 82% 22%, rgba(255,255,255,.24), transparent 23%),
    linear-gradient(135deg, rgba(29,110,208,.46) 0%, rgba(20,184,166,.36) 100%);
}

/* Health / second card: teal to soft green */
.image-card:nth-child(6n+2)::after{
  background:
    radial-gradient(circle at 22% 22%, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(135deg, rgba(14,165,164,.42) 0%, rgba(91,196,126,.36) 100%);
}

/* Clean-up / third card: green to soft yellow */
.image-card:nth-child(6n+3)::after{
  background:
    radial-gradient(circle at 78% 26%, rgba(255,255,255,.24), transparent 24%),
    linear-gradient(135deg, rgba(18,158,114,.40) 0%, rgba(246,211,101,.34) 100%);
}

/* Disaster / fourth card: navy to cyan */
.image-card:nth-child(6n+4)::after{
  background:
    radial-gradient(circle at 20% 26%, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(135deg, rgba(9,42,98,.46) 0%, rgba(8,200,255,.32) 100%);
}

/* Public advisory / fifth card: blue to mint */
.image-card:nth-child(6n+5)::after{
  background:
    radial-gradient(circle at 70% 22%, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(135deg, rgba(37,99,255,.42) 0%, rgba(18,214,166,.32) 100%);
}

/* Community event / sixth card: teal to gold */
.image-card:nth-child(6n+6)::after{
  background:
    radial-gradient(circle at 82% 26%, rgba(255,255,255,.24), transparent 24%),
    linear-gradient(135deg, rgba(13,148,136,.42) 0%, rgba(247,201,72,.34) 100%);
}

/* Make the label panel cleaner and more readable over the softer graphics */
.image-card img + div,
.image-card > div{
  position: relative;
  z-index: 1;
}

.image-card .status{
  filter: saturate(.92);
}

/* Stronger content readability */
.image-card h3{
  color: #082a63;
}

.image-card p{
  color: #5d7189 !important;
}

.image-card .text-link{
  color: #1d6ed0;
}

/* Keep the image area soft on hover instead of becoming too loud */
.image-card:hover img{
  filter: saturate(.92) contrast(.98) brightness(1.05);
}

/* ===== Citizen's Charter compact modern redesign ===== */
/* Fixes the large vertical gap and turns the charter content into one cohesive modern block */

.charter-section{
  padding-top:72px !important;
  padding-bottom:72px !important;
}

.charter-stack{
  display:grid;
  gap:18px;
  max-width:1100px;
  margin:0 auto;
  position:relative;
}

.charter-stack::before{
  content:"";
  position:absolute;
  left:-40px;
  top:32px;
  width:180px;
  height:180px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, rgba(37,99,255,.08), transparent 70%);
  animation:civicFloatSlow 10s ease-in-out infinite alternate;
}

.charter-stack::after{
  content:"";
  position:absolute;
  right:-50px;
  bottom:30px;
  width:220px;
  height:220px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, rgba(18,214,166,.10), transparent 72%);
  animation:civicFloatReverse 12s ease-in-out infinite alternate;
}

.charter-section .pledge,
.charter-section .table-wrap,
.charter-meta-card{
  position:relative;
  z-index:1;
}

.charter-section .pledge{
  padding:26px 28px !important;
  border-radius:28px !important;
}

.charter-section .pledge p{
  max-width:840px;
}

.charter-section .table-wrap{
  margin-top:-2px;
  border-radius:26px !important;
  overflow:hidden;
  box-shadow:0 18px 48px rgba(8,38,77,.10) !important;
}

.charter-section table{
  min-width:100%;
}

.charter-section th{
  background:linear-gradient(135deg,var(--civic-blue),var(--civic-cyan),var(--civic-mint)) !important;
  background-size:180% 180% !important;
  animation:vividGradientFlow 10s ease infinite;
}

.charter-section td,
.charter-section th{
  vertical-align:top;
}

.charter-meta-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  margin-top:2px;
}

.charter-meta-card{
  min-height:100%;
  border-radius:24px !important;
  padding:24px 24px 22px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,250,255,.95)) !important;
}

.charter-meta-card h3{
  margin-bottom:10px;
  color:#09245b;
}

.charter-meta-card::after{
  content:"";
  position:absolute;
  inset:auto 22px 0 22px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(37,99,255,.35), rgba(8,200,255,.25), rgba(18,214,166,.30));
  opacity:.9;
}

.charter-meta-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 54px rgba(8,38,77,.12) !important;
}

@media (max-width: 900px){
  .charter-section{
    padding-top:56px !important;
    padding-bottom:56px !important;
  }

  .charter-stack{
    gap:16px;
  }

  .charter-meta-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .charter-section .pledge{
    padding:22px 22px !important;
    border-radius:24px !important;
  }

  .charter-section .table-wrap{
    border-radius:22px !important;
  }
}

@media (max-width: 640px){
  .charter-section{
    padding-top:44px !important;
    padding-bottom:44px !important;
  }

  .charter-section .pledge{
    padding:20px 18px !important;
  }

  .charter-meta-card{
    padding:20px 18px !important;
  }
}

/* ===== Global Spacing Balance Fix ===== */
/* Reduces excessive vertical gaps across all pages while keeping the modern design and animations */

:root{
  --balanced-section-space-desktop: 56px;
  --balanced-section-space-medium: 44px;
  --balanced-section-space-mobile: 34px;
  --balanced-card-gap: 16px;
}

/* Global section spacing */
.section-pad{
  padding-top: var(--balanced-section-space-desktop) !important;
  padding-bottom: var(--balanced-section-space-desktop) !important;
}

.section-pad-sm{
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

/* Reduce overly tall inner-page hero banners */
.page-hero.section-pad-sm{
  padding-top: 58px !important;
  padding-bottom: 50px !important;
}

/* Keep section headings closer to their content */
.section-heading{
  margin-bottom: 28px !important;
}

.section-heading h2,
.split-layout h2,
.pledge h2{
  margin-bottom: 10px !important;
}

/* Balance grids and card spacing */
.card-grid,
.card-grid.three,
.card-grid.two,
.officials-grid,
.profile-grid,
.stats-grid,
.downloads-grid,
.contact-grid,
.footer-grid,
.charter-meta-grid{
  gap: var(--balanced-card-gap) !important;
}

/* Reduce very large gaps in split sections like Mission/Vision and Location Overview */
.split-layout{
  gap: 28px !important;
  align-items: center !important;
}

/* Compact cards slightly */
.info-card,
.official-card,
.contact-card,
.contact-form,
.pledge,
.download-card,
.doc-row,
.profile-item,
.image-card,
.accordion-item,
.official-mini,
.mini-list article,
.charter-meta-card{
  padding: 22px !important;
}

/* Prevent stacked sections from creating too much empty space */
main > section + section{
  margin-top: 0 !important;
}

/* About/Profile sections: remove the large empty white band feel */
main > section:not(.hero):not(.page-hero):not(.gradient-panel):not(.official-strip):not(.gradient-band){
  min-height: auto !important;
}

/* Mission and Vision cards should not float too far from the next section */
.card-grid.two,
.profile-grid{
  margin-top: 0 !important;
}

/* Citizen's Charter stays compact after previous redesign */
.charter-section{
  padding-top: 54px !important;
  padding-bottom: 54px !important;
}

.charter-stack{
  gap: 16px !important;
}

/* Tables should feel closer to the heading/pledge */
.table-wrap{
  margin-top: 0 !important;
}

/* Location/map area */
.map-placeholder,
.map-embed{
  min-height: 260px !important;
}

/* Cards with images remain modern but not oversized */
.image-card img{
  height: 190px !important;
}

/* Footer spacing balance */
.site-footer{
  margin-top: 0 !important;
}

/* Mobile and tablet spacing */
@media (max-width: 900px){
  .section-pad{
    padding-top: var(--balanced-section-space-medium) !important;
    padding-bottom: var(--balanced-section-space-medium) !important;
  }

  .section-pad-sm,
  .page-hero.section-pad-sm{
    padding-top: 42px !important;
    padding-bottom: 38px !important;
  }

  .section-heading{
    margin-bottom: 22px !important;
  }

  .split-layout{
    gap: 22px !important;
    align-items: start !important;
  }

  .info-card,
  .official-card,
  .contact-card,
  .contact-form,
  .pledge,
  .download-card,
  .doc-row,
  .profile-item,
  .image-card,
  .accordion-item,
  .official-mini,
  .mini-list article,
  .charter-meta-card{
    padding: 20px !important;
  }

  .charter-section{
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  .map-placeholder,
  .map-embed{
    min-height: 230px !important;
  }
}

@media (max-width: 640px){
  .section-pad{
    padding-top: var(--balanced-section-space-mobile) !important;
    padding-bottom: var(--balanced-section-space-mobile) !important;
  }

  .section-pad-sm,
  .page-hero.section-pad-sm{
    padding-top: 34px !important;
    padding-bottom: 32px !important;
  }

  .section-heading{
    margin-bottom: 18px !important;
  }

  .card-grid,
  .card-grid.three,
  .card-grid.two,
  .officials-grid,
  .profile-grid,
  .stats-grid,
  .downloads-grid,
  .contact-grid,
  .footer-grid,
  .charter-meta-grid{
    gap: 14px !important;
  }

  .info-card,
  .official-card,
  .contact-card,
  .contact-form,
  .pledge,
  .download-card,
  .doc-row,
  .profile-item,
  .image-card,
  .accordion-item,
  .official-mini,
  .mini-list article,
  .charter-meta-card{
    padding: 18px !important;
  }

  .image-card img{
    height: 170px !important;
  }
}

/* ===== Navigation Active Highlight Removal ===== */
/* Removes the blue pill/highlight while navigating between pages */

.nav-link,
.nav-link.active,
.nav-link:hover,
.nav-link:focus,
.nav-link:focus-visible{
  background: transparent !important;
  box-shadow: none !important;
  color: var(--blue-dark) !important;
  outline: none !important;
}

/* Keep navigation clean with only a subtle text color change */
.nav-link:hover,
.nav-link.active{
  color: var(--civic-blue) !important;
}

/* Remove animated underline/highlight bar */
.nav-link::after,
.nav-link:hover::after,
.nav-link.active::after{
  display: none !important;
  transform: none !important;
}

/* Remove tap/click highlight effect on mobile */
.nav-link,
.brand,
.menu-toggle{
  -webkit-tap-highlight-color: transparent;
}

/* ===== Citizen's Charter actual process animation ===== */
/* Adds a more visual "actual process" feel to the Service Pledge workflow table */

.process-flow-wrap{
  position:relative;
  overflow:hidden;
}

.process-flow-wrap::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,rgba(37,99,255,.15),rgba(8,200,255,.55),rgba(18,214,166,.38),rgba(37,99,255,.15));
  background-size:220% 100%;
  animation:processBeam 8s linear infinite;
  z-index:2;
}

.charter-section tbody tr{
  opacity:.55;
  transform:translateX(-22px);
  transition:
    transform .38s ease,
    opacity .38s ease,
    background .28s ease;
}

.charter-section.process-in-view tbody tr{
  animation:processRowIn .72s ease forwards;
}

.charter-section.process-in-view tbody tr:nth-child(1){animation-delay:.05s;}
.charter-section.process-in-view tbody tr:nth-child(2){animation-delay:.18s;}
.charter-section.process-in-view tbody tr:nth-child(3){animation-delay:.31s;}
.charter-section.process-in-view tbody tr:nth-child(4){animation-delay:.44s;}
.charter-section.process-in-view tbody tr:nth-child(5){animation-delay:.57s;}

.charter-section tbody tr:hover td{
  background:linear-gradient(90deg,rgba(236,246,255,.96),rgba(244,252,255,.98)) !important;
}

.charter-section td.step-cell{
  position:relative;
  min-width:82px;
  padding-right:12px;
}

.charter-section td.step-cell::after{
  content:"";
  position:absolute;
  left:39px;
  top:54px;
  bottom:-18px;
  width:2px;
  background:linear-gradient(180deg,rgba(37,99,255,.18),rgba(8,200,255,.24),rgba(18,214,166,.18));
}

.charter-section tbody tr:last-child td.step-cell::after{
  display:none;
}

.step-badge{
  width:36px;
  height:36px;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  font-weight:800;
  color:#0b2d66;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.88), rgba(255,255,255,.42) 38%, transparent 39%),
    linear-gradient(135deg, rgba(37,99,255,.20), rgba(8,200,255,.22), rgba(18,214,166,.24));
  border:1px solid rgba(37,99,255,.20);
  box-shadow:
    0 10px 22px rgba(37,99,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.42);
  position:relative;
  isolation:isolate;
}

.step-badge::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px solid rgba(8,200,255,.18);
  opacity:0;
  transform:scale(.85);
}

.charter-section.process-in-view tbody tr:nth-child(1) .step-badge::after{animation:stepPulse 2.4s ease-out .6s infinite;}
.charter-section.process-in-view tbody tr:nth-child(2) .step-badge::after{animation:stepPulse 2.4s ease-out .95s infinite;}
.charter-section.process-in-view tbody tr:nth-child(3) .step-badge::after{animation:stepPulse 2.4s ease-out 1.3s infinite;}
.charter-section.process-in-view tbody tr:nth-child(4) .step-badge::after{animation:stepPulse 2.4s ease-out 1.65s infinite;}
.charter-section.process-in-view tbody tr:nth-child(5) .step-badge::after{animation:stepPulse 2.4s ease-out 2s infinite;}

.charter-section tbody td{
  position:relative;
}

.charter-section tbody tr td:nth-child(2)::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:0;
  height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,rgba(37,99,255,.55),rgba(8,200,255,.45),rgba(18,214,166,.32));
  border-radius:999px;
  opacity:.8;
}

.charter-section.process-in-view tbody tr:nth-child(1) td:nth-child(2)::before{animation:processLine 1.1s ease .25s forwards;}
.charter-section.process-in-view tbody tr:nth-child(2) td:nth-child(2)::before{animation:processLine 1.1s ease .45s forwards;}
.charter-section.process-in-view tbody tr:nth-child(3) td:nth-child(2)::before{animation:processLine 1.1s ease .65s forwards;}
.charter-section.process-in-view tbody tr:nth-child(4) td:nth-child(2)::before{animation:processLine 1.1s ease .85s forwards;}
.charter-section.process-in-view tbody tr:nth-child(5) td:nth-child(2)::before{animation:processLine 1.1s ease 1.05s forwards;}

.charter-section tbody tr td:nth-child(2){
  padding-left:22px;
}

.charter-section tbody tr td:nth-child(2) strong{
  color:#0a2c67;
}

.charter-meta-card{
  overflow:hidden;
}

.charter-meta-card::before{
  content:"";
  position:absolute;
  width:140px;
  height:140px;
  right:-46px;
  top:-52px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(8,200,255,.10),transparent 70%);
  animation:civicFloatSlow 9s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes processBeam{
  0%{background-position:0% 50%;}
  100%{background-position:220% 50%;}
}

@keyframes processRowIn{
  0%{opacity:0; transform:translateX(-24px);}
  100%{opacity:1; transform:translateX(0);}
}

@keyframes processLine{
  0%{width:0; opacity:.25;}
  100%{width:18px; opacity:.85;}
}

@keyframes stepPulse{
  0%{opacity:.65; transform:scale(.85);}
  70%{opacity:0; transform:scale(1.28);}
  100%{opacity:0; transform:scale(1.34);}
}

@media (max-width: 900px){
  .charter-section td.step-cell{
    min-width:68px;
  }
  .charter-section td.step-cell::after{
    left:33px;
    top:48px;
    bottom:-16px;
  }
  .step-badge{
    width:30px;
    height:30px;
    font-size:.95rem;
  }
  .charter-section tbody tr td:nth-child(2){
    padding-left:16px;
  }
}

@media (prefers-reduced-motion: reduce){
  .process-flow-wrap::before,
  .charter-section.process-in-view tbody tr,
  .charter-section.process-in-view tbody tr td:nth-child(2)::before,
  .step-badge::after{
    animation:none !important;
  }
  .charter-section tbody tr{
    opacity:1 !important;
    transform:none !important;
  }
}

/* ===== Feedback/Requirements bubble overlap fix ===== */
/* Keeps decorative floating bubbles from covering the actual text */

.charter-meta-card{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.charter-meta-card::before{
  z-index: 0 !important;
  width: 110px !important;
  height: 110px !important;
  right: -34px !important;
  top: -38px !important;
  opacity: .42 !important;
  pointer-events: none;
}

.charter-meta-card > *{
  position: relative;
  z-index: 2 !important;
}

/* Slightly move the underline accent lower and keep it behind content */
.charter-meta-card::after{
  z-index: 1 !important;
}

/* Mobile: make the decorative bubble even smaller */
@media (max-width: 640px){
  .charter-meta-card::before{
    width: 88px !important;
    height: 88px !important;
    right: -28px !important;
    top: -30px !important;
    opacity: .32 !important;
  }
}

/* ===== Global Typography Balance Fix ===== */
/* Rebalances oversized hero/main text and keeps headings more proportional across all sections */

:root{
  --balanced-hero-title: clamp(3.15rem, 6.1vw, 5.35rem);
  --balanced-inner-hero-title: clamp(2.15rem, 4.2vw, 3.35rem);
  --balanced-section-title: clamp(1.85rem, 3vw, 2.7rem);
  --balanced-body-lead: clamp(1rem, 1.2vw, 1.15rem);
}

/* Main homepage hero */
.hero h1{
  font-size: var(--balanced-hero-title) !important;
  line-height: .96 !important;
  letter-spacing: -0.055em !important;
  max-width: 9.2ch;
  margin-bottom: 18px !important;
}

.hero p{
  font-size: var(--balanced-body-lead) !important;
  line-height: 1.62 !important;
  max-width: 34rem !important;
}

.hero-content{
  max-width: 700px !important;
}

.hero-actions{
  gap: 12px !important;
  margin-top: 26px !important;
}

.hero .btn,
.hero .btn-primary,
.hero .btn-outline,
.hero .btn-soft{
  padding: 12px 20px !important;
  font-size: .98rem !important;
}

/* Inner page banners */
.page-hero h1{
  font-size: var(--balanced-inner-hero-title) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 12px !important;
}

.page-hero p{
  font-size: 1.02rem !important;
  line-height: 1.58 !important;
  max-width: 760px;
}

/* Section titles across the site */
.section-heading h2,
.split-layout h2,
.pledge h2{
  font-size: var(--balanced-section-title) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.042em !important;
}

/* Other cards / section text balance */
.info-card h3,
.image-card h3,
.official-card h3,
.download-card h3,
.charter-meta-card h3,
.contact-card h3{
  font-size: 1.45rem !important;
  line-height: 1.18 !important;
}

.info-card p,
.image-card p,
.official-card p,
.download-card p,
.contact-card p,
.charter-meta-card p,
.pledge p{
  font-size: 1rem !important;
  line-height: 1.62 !important;
}

/* Specific rebalance for large home headings like Barangay Profile / Services etc. */
.section-heading{
  max-width: 720px !important;
}

.section-heading p{
  font-size: 1rem !important;
  line-height: 1.62 !important;
}

/* Top eyebrow text slightly tighter */
.eyebrow{
  font-size: .74rem !important;
  letter-spacing: .13em !important;
}

/* Mobile / tablet tuning */
@media (max-width: 900px){
  .hero h1{
    font-size: clamp(2.65rem, 8.6vw, 4rem) !important;
    max-width: 9.5ch;
    margin-bottom: 16px !important;
  }

  .hero p{
    font-size: 1rem !important;
    max-width: 100% !important;
  }

  .hero-actions{
    margin-top: 22px !important;
    gap: 10px !important;
  }

  .hero .btn,
  .hero .btn-primary,
  .hero .btn-outline,
  .hero .btn-soft{
    padding: 11px 18px !important;
    font-size: .95rem !important;
  }

  .page-hero h1{
    font-size: clamp(1.95rem, 6vw, 2.7rem) !important;
  }

  .section-heading h2,
  .split-layout h2,
  .pledge h2{
    font-size: clamp(1.7rem, 5.3vw, 2.2rem) !important;
  }

  .info-card h3,
  .image-card h3,
  .official-card h3,
  .download-card h3,
  .charter-meta-card h3,
  .contact-card h3{
    font-size: 1.28rem !important;
  }
}

@media (max-width: 640px){
  .hero h1{
    font-size: clamp(2.25rem, 10vw, 3.15rem) !important;
    line-height: .98 !important;
    max-width: 9.8ch;
  }

  .hero p{
    font-size: .98rem !important;
    line-height: 1.58 !important;
  }

  .hero .btn,
  .hero .btn-primary,
  .hero .btn-outline,
  .hero .btn-soft{
    width: auto !important;
    min-width: 0 !important;
  }

  .page-hero h1{
    font-size: clamp(1.8rem, 8vw, 2.35rem) !important;
  }

  .section-heading h2,
  .split-layout h2,
  .pledge h2{
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
  }

  .info-card h3,
  .image-card h3,
  .official-card h3,
  .download-card h3,
  .charter-meta-card h3,
  .contact-card h3{
    font-size: 1.18rem !important;
  }

  .info-card p,
  .image-card p,
  .official-card p,
  .download-card p,
  .contact-card p,
  .charter-meta-card p,
  .pledge p,
  .section-heading p{
    font-size: .96rem !important;
  }
}

/* ===== Footer layout balance fix ===== */
/* Makes the footer less cramped and improves spacing/readability across desktop and mobile */

.site-footer{
  padding-top: 58px !important;
  padding-bottom: 0 !important;
}

.footer-grid{
  display: grid !important;
  grid-template-columns: 1.25fr 1fr .9fr .95fr !important;
  gap: 42px !important;
  align-items: start !important;
  max-width: 1240px;
}

.footer-grid > div{
  min-width: 0;
}

.footer-brand{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.footer-brand img{
  width: 56px !important;
  height: 56px !important;
  object-fit: contain;
  flex: 0 0 auto;
}

.footer-brand strong{
  font-size: 1.6rem !important;
  line-height: 1.1 !important;
}

.site-footer h3{
  font-size: 1.4rem !important;
  line-height: 1.15 !important;
  margin-bottom: 16px !important;
  color: #ffffff !important;
}

.site-footer p,
.site-footer li,
.site-footer a{
  font-size: 1.02rem !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,.88) !important;
  word-break: break-word;
}

.footer-links{
  display: grid !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.footer-links a{
  display: inline-block;
  text-decoration: none;
}

.footer-links a:hover,
.site-footer a:hover{
  color: #ffffff !important;
}

.social-link{
  display: inline-flex !important;
  align-items: center;
  margin-top: 12px !important;
  font-weight: 700;
}

.footer-bottom{
  margin-top: 34px !important;
  padding: 16px 20px !important;
  text-align: center !important;
  font-size: .94rem !important;
  line-height: 1.5 !important;
}

/* Better column widths for medium screens */
@media (max-width: 1180px){
  .footer-grid{
    grid-template-columns: 1.1fr 1fr 1fr 1fr !important;
    gap: 28px !important;
  }

  .site-footer h3{
    font-size: 1.25rem !important;
  }

  .footer-brand strong{
    font-size: 1.42rem !important;
  }

  .site-footer p,
  .site-footer li,
  .site-footer a{
    font-size: .98rem !important;
  }
}

/* Stack cleanly on tablet */
@media (max-width: 900px){
  .site-footer{
    padding-top: 46px !important;
  }

  .footer-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 22px !important;
  }

  .site-footer h3{
    margin-bottom: 12px !important;
  }
}

/* Single-column mobile layout */
@media (max-width: 640px){
  .site-footer{
    padding-top: 38px !important;
  }

  .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .footer-brand{
    margin-bottom: 12px !important;
  }

  .footer-brand strong{
    font-size: 1.28rem !important;
  }

  .site-footer h3{
    font-size: 1.12rem !important;
    margin-bottom: 10px !important;
  }

  .site-footer p,
  .site-footer li,
  .site-footer a{
    font-size: .95rem !important;
    line-height: 1.6 !important;
  }

  .footer-bottom{
    margin-top: 24px !important;
    font-size: .88rem !important;
  }
}

/* ===== Footer gap rebalance + hotline single line ===== */
/* Tightens the footer columns, improves balance, and keeps the hotline on one line */

.footer-grid{
  grid-template-columns: 1.12fr 1fr .92fr 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}

.footer-grid > div{
  padding-right: 4px;
}

.site-footer p,
.site-footer li,
.site-footer a{
  line-height: 1.55 !important;
}

.footer-hotline{
  display: inline-block;
  white-space: nowrap;
}

.social-link{
  text-decoration: none;
}

.social-link:hover{
  text-decoration: underline;
}

@media (max-width: 1180px){
  .footer-grid{
    grid-template-columns: 1.05fr 1fr .95fr 1fr !important;
    gap: 20px !important;
  }
}

@media (max-width: 900px){
  .footer-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 18px !important;
  }

  .footer-hotline{
    white-space: normal;
  }
}

@media (max-width: 640px){
  .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

/* ===== Final Footer Gap Balance ===== */
/* Balances footer column spacing and removes the uneven wide gap between Quick Links and Emergency Contacts */

.site-footer{
  padding-top: 48px !important;
}

.site-footer .footer-grid{
  max-width: 1080px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1.12fr 1.05fr .72fr 1.05fr !important;
  column-gap: 34px !important;
  row-gap: 24px !important;
  align-items: start !important;
}

.site-footer .footer-grid > div{
  padding-right: 0 !important;
  min-width: 0 !important;
}

.site-footer h3{
  margin-bottom: 12px !important;
}

.site-footer p,
.site-footer li,
.site-footer a{
  font-size: .94rem !important;
  line-height: 1.5 !important;
}

.footer-brand{
  margin-bottom: 12px !important;
}

.footer-brand img{
  width: 48px !important;
  height: 48px !important;
}

.footer-brand strong{
  font-size: 1.28rem !important;
  white-space: nowrap;
}

.footer-links{
  gap: 6px !important;
}

.footer-hotline{
  white-space: nowrap !important;
}

.footer-bottom{
  margin-top: 40px !important;
  padding: 10px 20px !important;
}

/* Medium desktop: keep columns balanced without creating a large center gap */
@media (max-width: 1200px){
  .site-footer .footer-grid{
    max-width: 980px !important;
    grid-template-columns: 1.08fr 1.02fr .72fr 1.08fr !important;
    column-gap: 28px !important;
  }

  .site-footer p,
  .site-footer li,
  .site-footer a{
    font-size: .9rem !important;
  }

  .footer-brand strong{
    font-size: 1.18rem !important;
  }
}

/* Tablet */
@media (max-width: 900px){
  .site-footer .footer-grid{
    max-width: 720px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 28px !important;
    row-gap: 24px !important;
  }

  .footer-hotline{
    white-space: normal !important;
  }
}

/* Mobile */
@media (max-width: 640px){
  .site-footer{
    padding-top: 36px !important;
  }

  .site-footer .footer-grid{
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .footer-bottom{
    margin-top: 24px !important;
  }
}

/* ===== Page Hero Background Line Cleanup ===== */
/* Removes the visible horizontal/diagonal decorative lines behind inner page titles */

.page-hero{
  background:
    linear-gradient(115deg, rgba(8,35,78,.88) 0%, rgba(25,102,196,.72) 48%, rgba(0,173,185,.62) 100%),
    url('../images/home-community-hero.jpg') center/cover no-repeat !important;
  overflow: hidden !important;
}

.page-hero::before{
  background:
    radial-gradient(circle at 16% 24%, rgba(255,255,255,.13), transparent 15rem),
    radial-gradient(circle at 84% 30%, rgba(18,214,166,.16), transparent 18rem),
    linear-gradient(90deg, rgba(6,25,64,.16), transparent 55%) !important;
  animation: civicHeroGlow 14s ease-in-out infinite alternate;
}

.page-hero::after{
  width: 230px !important;
  height: 230px !important;
  right: -80px !important;
  top: -70px !important;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%) !important;
  border: 0 !important;
  opacity: .65 !important;
}

/* Ensure no dotted/line pattern appears inside the page banner */
.page-hero .container::before,
.page-hero .container::after{
  display: none !important;
}

@media (max-width: 640px){
  .page-hero::after{
    width: 150px !important;
    height: 150px !important;
    right: -56px !important;
    top: -44px !important;
  }
}

/* ===== Footer Final Alignment Balance ===== */
/* Final footer correction: equal visual spacing, compact width, and cleaner column alignment */

.site-footer{
  padding-top: 52px !important;
}

.site-footer .footer-grid{
  width: min(100%, 1060px) !important;
  max-width: 1060px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 260px 250px 160px 250px !important;
  justify-content: center !important;
  column-gap: 46px !important;
  row-gap: 24px !important;
  align-items: start !important;
}

.site-footer .footer-grid > div{
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-brand{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.footer-brand img{
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
}

.footer-brand strong{
  font-size: 1.22rem !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

.site-footer h3{
  font-size: 1.28rem !important;
  line-height: 1.2 !important;
  margin: 0 0 14px !important;
}

.site-footer p,
.site-footer li,
.site-footer a{
  font-size: .94rem !important;
  line-height: 1.52 !important;
}

.footer-links{
  gap: 7px !important;
}

.footer-hotline{
  white-space: nowrap !important;
}

.footer-bottom{
  margin-top: 42px !important;
  padding: 10px 20px !important;
}

/* Medium desktop: use fluid columns but keep the same balance */
@media (max-width: 1180px){
  .site-footer .footer-grid{
    width: min(100%, 960px) !important;
    max-width: 960px !important;
    grid-template-columns: 250px 230px 150px 230px !important;
    column-gap: 32px !important;
  }

  .site-footer p,
  .site-footer li,
  .site-footer a{
    font-size: .9rem !important;
  }

  .site-footer h3{
    font-size: 1.18rem !important;
  }

  .footer-brand strong{
    font-size: 1.12rem !important;
  }
}

/* Tablet: two clean rows */
@media (max-width: 900px){
  .site-footer{
    padding-top: 42px !important;
  }

  .site-footer .footer-grid{
    width: min(100%, 700px) !important;
    max-width: 700px !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 28px !important;
    row-gap: 26px !important;
    justify-content: stretch !important;
  }

  .footer-hotline{
    white-space: normal !important;
  }
}

/* Mobile: single column */
@media (max-width: 640px){
  .site-footer{
    padding-top: 34px !important;
  }

  .site-footer .footer-grid{
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .footer-bottom{
    margin-top: 24px !important;
  }
}

/* ===== Header logo + hero text rebalance ===== */
/* Makes the header logo more visible and reduces the oversized homepage hero text */

.brand{
  gap: 12px !important;
  padding: 9px 14px !important;
  border-radius: 22px !important;
}

.brand img{
  width: 58px !important;
  height: 58px !important;
  object-fit: contain !important;
  flex: 0 0 58px !important;
}

.brand strong{
  font-size: 1.55rem !important;
  line-height: 1.05 !important;
}

.brand small{
  font-size: .98rem !important;
  line-height: 1.2 !important;
  display: block !important;
  margin-top: 3px !important;
}

/* Homepage hero text balance */
.hero h1{
  font-size: clamp(2.8rem, 5.1vw, 4.75rem) !important;
  line-height: .98 !important;
  letter-spacing: -0.05em !important;
  max-width: 8.2ch !important;
  margin-bottom: 16px !important;
}

.hero p{
  font-size: 1.04rem !important;
  line-height: 1.58 !important;
  max-width: 32rem !important;
}

.hero-content{
  max-width: 640px !important;
}

.hero .eyebrow{
  font-size: .8rem !important;
}

.hero-actions{
  margin-top: 24px !important;
}

/* Keep the floating card proportional */
.hero-card{
  width: min(340px, calc(100% - 40px)) !important;
}

@media (max-width: 1100px){
  .brand img{
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
  }

  .brand strong{
    font-size: 1.36rem !important;
  }

  .brand small{
    font-size: .92rem !important;
  }

  .hero h1{
    font-size: clamp(2.55rem, 6vw, 4.1rem) !important;
    max-width: 8.4ch !important;
  }
}

@media (max-width: 900px){
  .brand{
    padding: 8px 10px !important;
    gap: 10px !important;
  }

  .brand img{
    width: 50px !important;
    height: 50px !important;
    flex-basis: 50px !important;
  }

  .brand strong{
    font-size: 1.18rem !important;
  }

  .brand small{
    font-size: .84rem !important;
  }

  .hero h1{
    font-size: clamp(2.3rem, 8.4vw, 3.6rem) !important;
    max-width: 8.7ch !important;
  }

  .hero p{
    font-size: .98rem !important;
    max-width: 100% !important;
  }
}

@media (max-width: 640px){
  .brand img{
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }

  .brand strong{
    font-size: 1.06rem !important;
  }

  .brand small{
    font-size: .78rem !important;
  }

  .hero h1{
    font-size: clamp(2rem, 9.5vw, 3rem) !important;
    max-width: 8.8ch !important;
  }

  .hero p{
    font-size: .95rem !important;
    line-height: 1.55 !important;
  }
}

/* ===== Enhanced Process Timeline Style ===== */
/* More modern animated style for the Citizen's Charter step numbers */

.charter-section td.step-cell{
  width: 86px !important;
  text-align: center !important;
  position: relative !important;
}

.charter-section td.step-cell::after{
  left: 50% !important;
  top: 58px !important;
  bottom: -22px !important;
  width: 3px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(
      180deg,
      rgba(37,99,255,.16),
      rgba(8,200,255,.45),
      rgba(18,214,166,.22)
    ) !important;
  box-shadow: 0 0 18px rgba(8,200,255,.18);
}

.step-badge{
  width: 42px !important;
  height: 42px !important;
  font-size: 1.08rem !important;
  font-weight: 900 !important;
  color: #082a63 !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(226,249,255,.92)),
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.95), transparent 35%) !important;
  border: 1px solid rgba(37,99,255,.28) !important;
  box-shadow:
    0 12px 28px rgba(37,99,255,.13),
    inset 0 0 0 1px rgba(255,255,255,.72),
    0 0 0 7px rgba(8,200,255,.055) !important;
  position: relative !important;
  z-index: 2 !important;
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
}

/* small moving highlight inside each number circle */
.step-badge::before{
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(37,99,255,.18), transparent 45%, rgba(18,214,166,.16));
  opacity: .68;
  z-index: -1;
  animation: stepInnerGlow 4.5s ease-in-out infinite alternate;
}

.step-badge::after{
  content: "";
  position: absolute;
  inset: -9px !important;
  border-radius: 50%;
  border: 2px solid rgba(8,200,255,.20) !important;
  opacity: 0;
  transform: scale(.82);
}

/* active sequence pulse */
.charter-section.process-in-view tbody tr:nth-child(1) .step-badge{
  animation: stepFocus 3.5s ease-in-out .2s infinite;
}
.charter-section.process-in-view tbody tr:nth-child(2) .step-badge{
  animation: stepFocus 3.5s ease-in-out .55s infinite;
}
.charter-section.process-in-view tbody tr:nth-child(3) .step-badge{
  animation: stepFocus 3.5s ease-in-out .9s infinite;
}
.charter-section.process-in-view tbody tr:nth-child(4) .step-badge{
  animation: stepFocus 3.5s ease-in-out 1.25s infinite;
}
.charter-section.process-in-view tbody tr:nth-child(5) .step-badge{
  animation: stepFocus 3.5s ease-in-out 1.6s infinite;
}

/* row turns into a soft process card on hover */
.charter-section tbody tr:hover .step-badge{
  transform: scale(1.12);
  background:
    linear-gradient(135deg, #ffffff, #ddfbff) !important;
  box-shadow:
    0 16px 34px rgba(37,99,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.82),
    0 0 0 9px rgba(18,214,166,.075) !important;
}

.charter-section tbody tr:hover td:nth-child(2){
  color: #082a63 !important;
  font-weight: 700;
}

/* animated progress runner beside the timeline */
.process-flow-wrap{
  --runner-position: 0%;
}

.process-flow-wrap::after{
  content: "";
  position: absolute;
  left: 39px;
  top: 100px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563ff, #08c8ff, #12d6a6);
  box-shadow:
    0 0 0 6px rgba(8,200,255,.10),
    0 0 18px rgba(8,200,255,.38);
  z-index: 3;
  opacity: .9;
  animation: processRunner 7s ease-in-out infinite;
}

/* make table feel lighter and less rigid */
.charter-section tbody tr{
  background: rgba(255,255,255,.88);
}

.charter-section tbody td{
  border-bottom: 1px solid rgba(37,99,255,.075) !important;
}

@keyframes stepInnerGlow{
  0%{transform: rotate(0deg) scale(.96); opacity:.48;}
  100%{transform: rotate(22deg) scale(1.05); opacity:.86;}
}

@keyframes stepFocus{
  0%, 74%, 100%{
    transform: scale(1);
    box-shadow:
      0 12px 28px rgba(37,99,255,.13),
      inset 0 0 0 1px rgba(255,255,255,.72),
      0 0 0 7px rgba(8,200,255,.055);
  }
  12%{
    transform: scale(1.10);
    box-shadow:
      0 16px 36px rgba(37,99,255,.18),
      inset 0 0 0 1px rgba(255,255,255,.80),
      0 0 0 10px rgba(18,214,166,.08);
  }
}

@keyframes processRunner{
  0%, 8%{ transform: translateY(0); opacity:.95; }
  23%{ transform: translateY(62px); opacity:.95; }
  38%{ transform: translateY(124px); opacity:.95; }
  53%{ transform: translateY(186px); opacity:.95; }
  68%{ transform: translateY(248px); opacity:.95; }
  82%, 100%{ transform: translateY(248px); opacity:0; }
}

@media (max-width: 900px){
  .charter-section td.step-cell{
    width: 68px !important;
  }

  .step-badge{
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }

  .process-flow-wrap::after{
    left: 33px;
  }
}

@media (max-width: 640px){
  .charter-section td.step-cell{
    width: 58px !important;
  }

  .step-badge{
    width: 32px !important;
    height: 32px !important;
    font-size: .92rem !important;
  }

  .process-flow-wrap::after{
    display: none;
  }
}

/* ===== Homepage Hero Title Short Name Fix ===== */
/* Rebalances the hero title after changing it to Barangay Hulo only */

.hero h1{
  max-width: 11ch !important;
  font-size: clamp(3rem, 5.4vw, 5rem) !important;
  line-height: .98 !important;
  letter-spacing: -0.05em !important;
}

@media (max-width: 900px){
  .hero h1{
    max-width: 11ch !important;
    font-size: clamp(2.55rem, 8vw, 3.8rem) !important;
  }
}

@media (max-width: 640px){
  .hero h1{
    max-width: 11ch !important;
    font-size: clamp(2.3rem, 9vw, 3.1rem) !important;
  }
}

/* ===== Header Brand Text Balance Fix ===== */
/* Softens the brand text color and reduces the size for better balance */

.brand{
  padding: 8px 12px !important;
  gap: 10px !important;
}

.brand img{
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
}

.brand strong{
  font-size: 1.12rem !important;
  line-height: 1.08 !important;
  color: #16356a !important;
  font-weight: 800 !important;
}

.brand small{
  font-size: .84rem !important;
  line-height: 1.2 !important;
  color: #5a6f8d !important;
  font-weight: 700 !important;
  margin-top: 2px !important;
}

@media (max-width: 900px){
  .brand{
    padding: 7px 10px !important;
    gap: 9px !important;
  }

  .brand img{
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }

  .brand strong{
    font-size: 1rem !important;
  }

  .brand small{
    font-size: .78rem !important;
  }
}

@media (max-width: 640px){
  .brand img{
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }

  .brand strong{
    font-size: .94rem !important;
  }

  .brand small{
    font-size: .74rem !important;
  }
}

/* ===== Footer Clean Balanced Final Fix ===== */
/* Cleaner footer: smaller text, better spacing, less cramped layout */

.site-footer{
  padding-top: 42px !important;
  padding-bottom: 0 !important;
}

.site-footer .footer-grid{
  width: min(100%, 960px) !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1.02fr 1fr .82fr 1fr !important;
  column-gap: 30px !important;
  row-gap: 20px !important;
  align-items: start !important;
  justify-content: center !important;
}

.site-footer .footer-grid > div{
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-brand{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.footer-brand img{
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
}

.footer-brand strong{
  font-size: 1.02rem !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

.site-footer h3{
  font-size: 1rem !important;
  line-height: 1.2 !important;
  margin: 0 0 10px !important;
  font-weight: 800 !important;
}

.site-footer p,
.site-footer li,
.site-footer a{
  font-size: 0.84rem !important;
  line-height: 1.45 !important;
  color: rgba(255,255,255,.90) !important;
}

.footer-links{
  gap: 4px !important;
}

.footer-hotline{
  white-space: nowrap !important;
}

.social-link{
  margin-top: 8px !important;
  font-size: 0.84rem !important;
}

.footer-bottom{
  margin-top: 24px !important;
  padding: 10px 18px !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
}

/* Keep the footer compact on medium screens */
@media (max-width: 1100px){
  .site-footer .footer-grid{
    width: min(100%, 900px) !important;
    max-width: 900px !important;
    grid-template-columns: 1fr 1fr .85fr 1fr !important;
    column-gap: 22px !important;
  }

  .footer-hotline{
    white-space: normal !important;
  }
}

/* Tablet */
@media (max-width: 900px){
  .site-footer{
    padding-top: 36px !important;
  }

  .site-footer .footer-grid{
    width: min(100%, 700px) !important;
    max-width: 700px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 22px !important;
    row-gap: 20px !important;
  }
}

/* Mobile */
@media (max-width: 640px){
  .site-footer{
    padding-top: 30px !important;
  }

  .site-footer .footer-grid{
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .footer-bottom{
    margin-top: 20px !important;
    font-size: 0.76rem !important;
  }
}

/* ===== Officials Bluish Background Refresh ===== */
/* Gives the officials cards a soft bluish background for a cleaner civic look */

.official-card{
  background: linear-gradient(180deg, rgba(245,249,255,.98), rgba(234,242,255,.96)) !important;
  border: 1px solid rgba(82,125,210,.18) !important;
  box-shadow: 0 16px 36px rgba(21, 66, 140, .08) !important;
}

.official-card:hover{
  background: linear-gradient(180deg, rgba(247,251,255,.99), rgba(230,240,255,.98)) !important;
  border-color: rgba(63,118,235,.24) !important;
  box-shadow: 0 20px 44px rgba(21, 66, 140, .12) !important;
}

.official-card img{
  border-color: rgba(255,255,255,.88) !important;
  box-shadow:
    0 10px 24px rgba(21, 66, 140, .10),
    0 0 0 1px rgba(126, 162, 232, .22) !important;
}

.official-card h3{
  color: #16356a !important;
}

.official-card span{
  color: #2962ff !important;
}

.official-card p{
  color: #5f7394 !important;
}

/* Featured Punong Barangay block also gets a matching soft bluish tone */
.official-mini{
  background: linear-gradient(180deg, rgba(246,250,255,.96), rgba(236,244,255,.95)) !important;
  border: 1px solid rgba(82,125,210,.16) !important;
  box-shadow: 0 18px 40px rgba(21, 66, 140, .08) !important;
}

.official-mini strong{
  color: #16356a !important;
}

.official-mini span{
  color: #2962ff !important;
}

/* ===== Footer spacing rebalance override ===== */
/* Final override: equalizes footer column spacing, reduces cramped text, and cleans the layout */

.site-footer{
  padding-top: 44px !important;
  padding-bottom: 0 !important;
}

.site-footer .container{
  max-width: 1120px !important;
}

.site-footer .footer-grid{
  width: min(100%, 1000px) !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1.18fr) minmax(220px, 1.08fr) minmax(150px, .82fr) minmax(220px, 1fr) !important;
  column-gap: 40px !important;
  row-gap: 18px !important;
  align-items: start !important;
  justify-content: center !important;
}

.site-footer .footer-grid > div{
  min-width: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-brand{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.footer-brand img{
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
}

.footer-brand strong{
  font-size: 1rem !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
}

.site-footer h3{
  font-size: 1rem !important;
  line-height: 1.18 !important;
  margin: 0 0 10px !important;
  font-weight: 800 !important;
}

.site-footer p,
.site-footer li,
.site-footer a{
  font-size: .84rem !important;
  line-height: 1.48 !important;
  color: rgba(255,255,255,.90) !important;
}

.footer-links{
  gap: 5px !important;
}

.footer-hotline{
  white-space: nowrap !important;
}

.social-link{
  margin-top: 8px !important;
  font-size: .84rem !important;
}

.footer-bottom{
  margin-top: 24px !important;
  padding: 10px 18px !important;
  font-size: .79rem !important;
  line-height: 1.4 !important;
}

/* Slightly tighter on medium desktops while keeping the balance */
@media (max-width: 1150px){
  .site-footer .footer-grid{
    width: min(100%, 940px) !important;
    max-width: 940px !important;
    grid-template-columns: minmax(210px, 1.12fr) minmax(210px, 1.02fr) minmax(145px, .82fr) minmax(210px, .98fr) !important;
    column-gap: 30px !important;
  }

  .footer-hotline{
    white-space: normal !important;
  }
}

/* Tablet */
@media (max-width: 900px){
  .site-footer{
    padding-top: 36px !important;
  }

  .site-footer .footer-grid{
    width: min(100%, 720px) !important;
    max-width: 720px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    row-gap: 20px !important;
  }
}

/* Mobile */
@media (max-width: 640px){
  .site-footer{
    padding-top: 30px !important;
  }

  .site-footer .footer-grid{
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .footer-bottom{
    margin-top: 20px !important;
    font-size: .75rem !important;
  }
}

/* ===== Footer emergency contacts reorder + final gap fix ===== */
/* Removes Facebook link spacing, tightens Quick Links to Emergency Contacts gap, and keeps contact lines clean */

.site-footer .footer-grid{
  width: min(100%, 900px) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1.05fr 1fr .72fr 1.05fr !important;
  column-gap: 22px !important;
  row-gap: 18px !important;
  justify-content: center !important;
  align-items: start !important;
}

.site-footer .footer-grid > div{
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.site-footer h3{
  margin-bottom: 9px !important;
  font-size: .96rem !important;
}

.site-footer p,
.site-footer li,
.site-footer a{
  font-size: .82rem !important;
  line-height: 1.42 !important;
}

.footer-links{
  gap: 4px !important;
}

.footer-hotline{
  display: inline !important;
  white-space: nowrap !important;
}

.social-link{
  display: none !important;
}

.footer-bottom{
  margin-top: 22px !important;
}

/* Bring Emergency Contacts closer to Quick Links on desktop */
.site-footer .footer-grid > div:nth-child(4){
  margin-left: -6px !important;
}

/* Keep Contact Information from pushing too wide */
.site-footer .footer-grid > div:nth-child(2){
  max-width: 220px !important;
}

.site-footer .footer-grid > div:nth-child(3){
  max-width: 150px !important;
}

.site-footer .footer-grid > div:nth-child(4){
  max-width: 230px !important;
}

@media (max-width: 1100px){
  .site-footer .footer-grid{
    width: min(100%, 860px) !important;
    max-width: 860px !important;
    grid-template-columns: 1.05fr 1fr .72fr 1.05fr !important;
    column-gap: 18px !important;
  }

  .footer-hotline{
    white-space: normal !important;
  }

  .site-footer .footer-grid > div:nth-child(4){
    margin-left: 0 !important;
  }
}

@media (max-width: 900px){
  .site-footer .footer-grid{
    width: min(100%, 700px) !important;
    max-width: 700px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 22px !important;
    row-gap: 20px !important;
  }

  .site-footer .footer-grid > div:nth-child(2),
  .site-footer .footer-grid > div:nth-child(3),
  .site-footer .footer-grid > div:nth-child(4){
    max-width: none !important;
  }
}

@media (max-width: 640px){
  .site-footer .footer-grid{
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ===== Contact Section Modern Refresh ===== */

.contact-modern-section{
  position: relative;
}

.contact-grid-modern{
  grid-template-columns: .92fr 1.08fr !important;
  gap: 20px !important;
  align-items: stretch !important;
  max-width: 1160px;
}

.contact-card-modern,
.contact-form-modern{
  padding: 24px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,250,255,.96)) !important;
  border: 1px solid rgba(86, 129, 216, .14) !important;
  box-shadow: 0 18px 44px rgba(22, 53, 106, .07) !important;
}

.contact-card-header{
  margin-bottom: 18px;
}

.contact-card-header h2{
  margin: 10px 0 8px !important;
  font-size: clamp(1.7rem, 2.6vw, 2.25rem) !important;
  line-height: 1.08 !important;
  color: #112d61 !important;
}

.contact-card-header p{
  margin: 0 !important;
  color: #607595 !important;
  line-height: 1.58 !important;
  font-size: .98rem !important;
}

.contact-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37,99,255,.12), rgba(8,200,255,.10));
  color: #1d4ed8;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contact-info-list{
  display: grid;
  gap: 12px;
}

.contact-info-row{
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(247,250,255,.92);
  border: 1px solid rgba(86,129,216,.10);
}

.contact-info-label{
  font-weight: 800;
  color: #20427b;
}

.contact-info-value{
  color: #5f7394;
  line-height: 1.5;
}

.emergency-box-modern{
  margin-top: 18px !important;
  padding: 18px 20px !important;
  border-radius: 22px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, rgba(255,247,223,.95), rgba(240,255,247,.96)) !important;
  border: 1px solid rgba(247,201,72,.36) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

.emergency-box-modern strong{
  display: block;
  color: #7a5700;
  font-size: 1rem;
  margin-bottom: 4px;
}

.emergency-box-modern small{
  display: block;
  color: #8a6a19;
  font-size: .84rem;
}

.emergency-box-modern span{
  font-size: 1.28rem;
  font-weight: 800;
  color: #855c00;
  white-space: nowrap;
}

.contact-form-modern{
  gap: 14px !important;
}

.contact-form-modern .form-row{
  gap: 14px !important;
}

.contact-form-modern label{
  gap: 8px !important;
  font-size: .98rem;
  font-weight: 800;
  color: #16356a !important;
}

.contact-form-modern input,
.contact-form-modern textarea{
  border-radius: 16px !important;
  border: 1px solid rgba(86,129,216,.16) !important;
  background: rgba(255,255,255,.96) !important;
  padding: 14px 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.contact-form-modern input:focus,
.contact-form-modern textarea:focus{
  border-color: rgba(8,200,255,.55) !important;
  box-shadow: 0 0 0 4px rgba(8,200,255,.10) !important;
}

.contact-form-modern textarea{
  min-height: 180px !important;
}

.contact-form-modern .btn{
  width: 100%;
  border-radius: 999px !important;
  padding: 14px 22px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  margin-top: 2px;
}

@media (max-width: 900px){
  .contact-grid-modern{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .contact-card-modern,
  .contact-form-modern{
    padding: 22px !important;
    border-radius: 24px !important;
  }

  .contact-info-row{
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .emergency-box-modern{
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px){
  .contact-card-modern,
  .contact-form-modern{
    padding: 18px !important;
    border-radius: 22px !important;
  }

  .contact-card-header h2{
    font-size: clamp(1.45rem, 7vw, 1.9rem) !important;
  }

  .contact-form-modern .form-row{
    grid-template-columns: 1fr !important;
  }

  .contact-form-modern textarea{
    min-height: 150px !important;
  }

  .emergency-box-modern span{
    font-size: 1.12rem;
  }
}

/* ===== TRUE FINAL FOOTER GAP FIX ===== */
/* Uses fixed footer column widths so the spacing is visually even and no column floats too far away. */

.site-footer{
  padding-top: 42px !important;
}

.site-footer .footer-grid{
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 28px !important;
}

.site-footer .footer-grid > div{
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

.site-footer .footer-grid > div:nth-child(1){
  width: 220px !important;
}

.site-footer .footer-grid > div:nth-child(2){
  width: 220px !important;
}

.site-footer .footer-grid > div:nth-child(3){
  width: 145px !important;
}

.site-footer .footer-grid > div:nth-child(4){
  width: 225px !important;
  margin-left: 0 !important;
}

.footer-brand{
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.footer-brand img{
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
}

.footer-brand strong{
  font-size: 1rem !important;
  line-height: 1.1 !important;
}

.site-footer h3{
  font-size: 1rem !important;
  line-height: 1.18 !important;
  margin: 0 0 10px !important;
}

.site-footer p,
.site-footer li,
.site-footer a{
  font-size: .84rem !important;
  line-height: 1.42 !important;
}

.footer-links{
  gap: 4px !important;
}

.footer-hotline{
  white-space: nowrap !important;
}

.footer-bottom{
  margin-top: 24px !important;
  padding: 10px 18px !important;
  font-size: .78rem !important;
}

/* Tablet: two balanced columns */
@media (max-width: 900px){
  .site-footer .footer-grid{
    max-width: 680px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 22px !important;
  }

  .site-footer .footer-grid > div{
    width: auto !important;
  }

  .footer-hotline{
    white-space: normal !important;
  }
}

/* Mobile: single column */
@media (max-width: 640px){
  .site-footer{
    padding-top: 32px !important;
  }

  .site-footer .footer-grid{
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .footer-bottom{
    margin-top: 20px !important;
  }
}

/* ===== Contact emergency box cleanup ===== */
/* Removes excess vertical space and balances the Emergency Hotline box */

.emergency-box-modern{
  margin-top: 16px !important;
  padding: 16px 20px !important;
  min-height: auto !important;
  border-radius: 20px !important;
  align-items: center !important;
}

.emergency-box-modern div{
  display: flex;
  align-items: center;
  min-height: auto !important;
}

.emergency-box-modern strong{
  margin-bottom: 0 !important;
  font-size: 1.02rem !important;
  line-height: 1.2 !important;
}

.emergency-box-modern small{
  display: none !important;
}

.emergency-box-modern span{
  font-size: 1.18rem !important;
  line-height: 1 !important;
}

@media (max-width: 640px){
  .emergency-box-modern{
    padding: 14px 16px !important;
    gap: 10px !important;
  }

  .emergency-box-modern span{
    font-size: 1.05rem !important;
  }
}

/* ===== Footer email single-line cleanup ===== */
/* Removes office hours in footer and keeps the email on one line */

.footer-email{
  white-space: nowrap !important;
  display: inline-block;
}

@media (max-width: 1100px){
  .footer-email{
    white-space: normal !important;
    word-break: break-word;
  }
}

/* ===== Featured Punong Barangay image animation removal ===== */
/* Keeps the featured official image steady with no floating/hover animation */

.official-mini img,
.official-mini:hover img{
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

.official-mini:hover{
  transform: none !important;
}

/* Prevent any general card/image hover rule from affecting the featured official image */
.official-mini img:hover{
  transform: none !important;
  animation: none !important;
}

/* ===== Header Modern Balanced Refresh ===== */
/* Cleaner, more modern, and better-balanced branding + navigation */

.site-header{
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(20px) saturate(1.05) !important;
  border-bottom: 1px solid rgba(99, 136, 204, .12) !important;
  box-shadow: 0 10px 28px rgba(9, 39, 91, .06) !important;
}

.site-header.scrolled{
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 14px 36px rgba(9, 39, 91, .09) !important;
}

.site-header .container{
  max-width: 1280px !important;
}

.navbar{
  min-height: 74px !important;
  gap: 24px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.brand{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 14px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(245,249,255,.86)) !important;
  border: 1px solid rgba(90, 131, 212, .12) !important;
  box-shadow: 0 10px 24px rgba(21, 66, 140, .06) !important;
}

.brand img{
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  filter: drop-shadow(0 8px 14px rgba(13,71,161,.10)) !important;
}

.brand strong{
  font-size: 1rem !important;
  line-height: 1.08 !important;
  color: #173a74 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

.brand small{
  font-size: .74rem !important;
  line-height: 1.18 !important;
  margin-top: 3px !important;
  color: #5f7696 !important;
  font-weight: 700 !important;
}

.nav-menu{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  flex-wrap: wrap !important;
}

.nav-link{
  position: relative !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  font-size: .83rem !important;
  font-weight: 800 !important;
  color: #233d62 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: color .22s ease, background .22s ease, transform .22s ease !important;
}

.nav-link:hover{
  color: #1d6ed0 !important;
  background: rgba(37,99,255,.05) !important;
  transform: translateY(-1px);
}

.nav-link.active{
  color: #2a62ff !important;
  background: rgba(42,98,255,.06) !important;
}

.nav-link::after{
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 5px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #2563ff, #11c7d9) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform .22s ease !important;
  display: block !important;
}

.nav-link:hover::after,
.nav-link.active::after{
  transform: scaleX(1) !important;
}

.menu-toggle{
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 20px rgba(21,101,216,.14) !important;
}

/* Large desktop: slightly tighter link spacing for a more balanced full header */
@media (max-width: 1250px){
  .site-header .container{
    max-width: 1180px !important;
  }

  .nav-link{
    padding: 9px 10px !important;
    font-size: .8rem !important;
  }

  .navbar{
    gap: 18px !important;
  }
}

/* Tablet */
@media (max-width: 900px){
  .navbar{
    min-height: 70px !important;
    gap: 12px !important;
  }

  .brand{
    padding: 7px 10px !important;
    gap: 10px !important;
  }

  .brand img{
    width: 46px !important;
    height: 46px !important;
  }

  .brand strong{
    font-size: .94rem !important;
  }

  .brand small{
    font-size: .7rem !important;
  }
}

/* Mobile */
@media (max-width: 640px){
  .site-header{
    backdrop-filter: blur(16px) !important;
  }

  .navbar{
    min-height: 66px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .brand{
    padding: 6px 8px !important;
    border-radius: 18px !important;
  }

  .brand img{
    width: 42px !important;
    height: 42px !important;
  }

  .brand strong{
    font-size: .9rem !important;
  }

  .brand small{
    font-size: .68rem !important;
  }
}

/* ===== Header Wrap Fix / Clean Balanced Navigation ===== */
/* Fixes the messy two-line navigation and keeps the menu balanced on desktop */

.site-header .container{
  max-width: 1440px !important;
  width: min(100% - 32px, 1440px) !important;
}

.navbar{
  min-height: 74px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.brand{
  flex: 0 0 auto !important;
  padding: 7px 12px !important;
  gap: 10px !important;
  border-radius: 20px !important;
}

.brand img{
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
}

.brand strong{
  font-size: .98rem !important;
  line-height: 1.05 !important;
}

.brand small{
  font-size: .72rem !important;
  line-height: 1.15 !important;
}

.nav-menu{
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

.nav-link{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 8px 8px !important;
  font-size: .76rem !important;
  line-height: 1 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #18365f !important;
}

/* Keep active/hover clean and not bulky */
.nav-link:hover,
.nav-link.active{
  color: #2563ff !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.nav-link::after{
  left: 8px !important;
  right: 8px !important;
  bottom: 1px !important;
  height: 2px !important;
}

/* For smaller laptops/tablets, let the existing mobile menu take over earlier */
@media (max-width: 1180px){
  .nav-menu{
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    row-gap: 4px !important;
  }

  .nav-link{
    font-size: .74rem !important;
    padding: 7px 7px !important;
  }
}

/* Mobile menu mode */
@media (max-width: 900px){
  .site-header .container{
    width: min(100% - 24px, 1440px) !important;
  }

  .nav-menu{
    flex-wrap: nowrap !important;
  }

  .brand img{
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }
}

/* ===== Hero Emergency Card Redesign ===== */
/* Stronger emergency look with balanced styling and subtle animation */

.hero-emergency-card{
  position: absolute !important;
  right: 6% !important;
  bottom: 54px !important;
  width: min(390px, calc(100% - 40px)) !important;
  padding: 20px 20px 18px !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,250,255,.94)) !important;
  border: 1px solid rgba(102,130,214,.16) !important;
  box-shadow:
    0 18px 44px rgba(10, 39, 88, .16),
    inset 0 1px 0 rgba(255,255,255,.75) !important;
  overflow: hidden !important;
}

.hero-emergency-card::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  height: 6px !important;
  border-radius: 26px 26px 0 0 !important;
  background: linear-gradient(90deg, #2563ff 0%, #12cde2 58%, #f1ca53 100%) !important;
  display: block !important;
}

.hero-emergency-card::after{
  content: "" !important;
  position: absolute !important;
  right: -34px !important;
  top: -34px !important;
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(18,205,226,.14), transparent 70%) !important;
  animation: emergencyOrbFloat 7s ease-in-out infinite alternate !important;
}

.emergency-card-top{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
  position: relative;
  z-index: 1;
}

.emergency-pill{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(220,239,255,.82), rgba(236,249,255,.9)) !important;
  border: 1px solid rgba(74,131,232,.18) !important;
  color: #1d4ed8 !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.emergency-dot{
  width: 10px !important;
  height: 10px !important;
  display: inline-block !important;
  border-radius: 50% !important;
  background: #ff5b57 !important;
  box-shadow: 0 0 0 0 rgba(255,91,87,.45);
  animation: emergencyPulse 1.9s infinite !important;
}

.emergency-status{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 58px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(255,244,211,.96), rgba(255,250,229,.96)) !important;
  border: 1px solid rgba(241,202,83,.40) !important;
  color: #8a6400 !important;
  font-weight: 900 !important;
  font-size: .78rem !important;
  position: relative;
  z-index: 1;
}

.hero-emergency-card strong{
  display: block !important;
  color: #173a74 !important;
  font-size: 1.18rem !important;
  line-height: 1.15 !important;
  margin-bottom: 8px !important;
  position: relative;
  z-index: 1;
}

.hero-hotline-number{
  font-size: 2.15rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #2563ff !important;
  letter-spacing: -.03em !important;
  margin-bottom: 10px !important;
  position: relative;
  z-index: 1;
}

.hero-emergency-card p{
  margin: 0 0 14px !important;
  color: #667a96 !important;
  font-size: .95rem !important;
  line-height: 1.5 !important;
  max-width: none !important;
  position: relative;
  z-index: 1;
}

.hero-emergency-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  position: relative;
  z-index: 1;
}

.hero-emergency-item{
  padding: 12px 10px !important;
  border-radius: 16px !important;
  background: rgba(245,249,255,.95) !important;
  border: 1px solid rgba(92,132,212,.12) !important;
  text-align: center !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
}

.hero-emergency-item:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(21,66,140,.08) !important;
}

.hero-emergency-item label{
  display: block !important;
  margin-bottom: 5px !important;
  font-size: .68rem !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  font-weight: 800 !important;
  color: #7287a5 !important;
}

.hero-emergency-item span{
  display: block !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: #12356f !important;
  line-height: 1 !important;
  margin: 0 !important;
}

@keyframes emergencyPulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,91,87,.46); }
  70%{ box-shadow: 0 0 0 10px rgba(255,91,87,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,91,87,0); }
}

@keyframes emergencyOrbFloat{
  0%{ transform: translateY(0) scale(1); opacity: .72; }
  100%{ transform: translateY(12px) scale(1.06); opacity: .98; }
}

@media (max-width: 900px){
  .hero-emergency-card{
    right: 20px !important;
    bottom: 24px !important;
    width: min(360px, calc(100% - 24px)) !important;
    padding: 18px 18px 16px !important;
  }

  .hero-hotline-number{
    font-size: 1.95rem !important;
  }

  .hero-emergency-grid{
    gap: 8px !important;
  }
}

@media (max-width: 640px){
  .hero-emergency-card{
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin: 18px 16px 0 auto !important;
    width: calc(100% - 32px) !important;
  }

  .hero-hotline-number{
    font-size: 1.72rem !important;
  }

  .hero-emergency-grid{
    grid-template-columns: 1fr !important;
  }

  .hero-emergency-item{
    text-align: left !important;
    padding: 10px 12px !important;
  }
}

/* ===== Alternative Emergency Card Design ===== */
/* Stronger emergency look with animated siren/beacon and more alert-focused styling */

.hero-emergency-card.emergency-card-alt{
  width: min(420px, calc(100% - 40px)) !important;
  padding: 18px 18px 16px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,255,.95)) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow:
    0 18px 50px rgba(7, 25, 58, .22),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

.hero-emergency-card.emergency-card-alt::before{
  height: 7px !important;
  background: linear-gradient(90deg, #ff5252 0%, #ff8a3d 30%, #12cde2 70%, #94d54e 100%) !important;
  animation: emergencyBarShift 5s linear infinite !important;
  background-size: 220% 100% !important;
}

.hero-emergency-card.emergency-card-alt::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 28px !important;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.08) 42%, rgba(255,255,255,.36) 50%, transparent 58%) !important;
  background-size: 220% 100% !important;
  animation: emergencySweep 6.8s ease-in-out infinite !important;
  pointer-events: none !important;
}

.emergency-pill-live{
  background: linear-gradient(90deg, rgba(255,236,236,.95), rgba(246,247,255,.96)) !important;
  border-color: rgba(255,102,102,.24) !important;
  color: #d62839 !important;
}

.emergency-status-alert{
  background: linear-gradient(135deg, rgba(255,243,213,.98), rgba(255,249,231,.98)) !important;
  border-color: rgba(241,202,83,.42) !important;
  color: #8e6300 !important;
  box-shadow: 0 0 0 0 rgba(241,202,83,.24);
  animation: statusGlow 2.8s ease-in-out infinite !important;
}

.emergency-main-row{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 14px !important;
  align-items: center !important;
  margin-bottom: 8px !important;
  position: relative;
  z-index: 1;
}

.emergency-copy{
  min-width: 0;
}

.emergency-card-alt strong{
  color: #12346a !important;
  font-size: 1.16rem !important;
  margin-bottom: 8px !important;
}

.emergency-card-alt .hero-hotline-number{
  color: #2563ff !important;
  font-size: 2.28rem !important;
  text-shadow: 0 8px 20px rgba(37,99,255,.10);
}

.emergency-siren-badge{
  width: 70px !important;
  height: 70px !important;
  border-radius: 50% !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.86), rgba(255,255,255,.18) 28%, transparent 29%),
    linear-gradient(135deg, #ff5252, #ff8a3d) !important;
  box-shadow:
    0 14px 26px rgba(214,40,57,.22),
    inset 0 -8px 16px rgba(150,25,33,.16) !important;
  overflow: visible !important;
}

.emergency-siren-badge i{
  font-style: normal !important;
  font-size: .88rem !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: .06em !important;
  z-index: 3 !important;
}

.emergency-siren-badge span{
  position: absolute !important;
  inset: -8px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,94,94,.26) !important;
  animation: sirenRing 2.1s ease-out infinite !important;
}

.emergency-siren-badge span:nth-child(2){
  animation-delay: 1.05s !important;
}

.emergency-card-alt p{
  color: #677b97 !important;
  margin-bottom: 14px !important;
}

.emergency-card-alt .hero-emergency-grid{
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.emergency-card-alt .hero-emergency-item{
  background: linear-gradient(180deg, rgba(252,253,255,.98), rgba(243,247,255,.98)) !important;
  border: 1px solid rgba(89,127,208,.14) !important;
  position: relative !important;
  overflow: hidden !important;
}

.emergency-card-alt .hero-emergency-item::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: linear-gradient(90deg, rgba(255,82,82,.78), rgba(255,138,61,.72), rgba(37,99,255,.66)) !important;
  opacity: .8 !important;
}

.emergency-card-alt .hero-emergency-item:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 24px rgba(20, 64, 139, .10) !important;
}

.emergency-action-strip{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding-top: 2px !important;
  position: relative;
  z-index: 1;
}

.emergency-action-label{
  color: #d62839 !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

.emergency-action-chip{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(37,99,255,.10), rgba(18,205,226,.16)) !important;
  border: 1px solid rgba(37,99,255,.12) !important;
  color: #184cae !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
}

@keyframes sirenRing{
  0%{ transform: scale(.84); opacity: .7; }
  100%{ transform: scale(1.38); opacity: 0; }
}

@keyframes emergencySweep{
  0%, 15%{ background-position: 150% 0; opacity: 0; }
  32%{ background-position: 0 0; opacity: .8; }
  50%, 100%{ background-position: -120% 0; opacity: 0; }
}

@keyframes emergencyBarShift{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 220% 50%; }
}

@keyframes statusGlow{
  0%,100%{ box-shadow: 0 0 0 0 rgba(241,202,83,.20); }
  50%{ box-shadow: 0 0 0 8px rgba(241,202,83,0); }
}

@media (max-width: 900px){
  .hero-emergency-card.emergency-card-alt{
    width: min(390px, calc(100% - 24px)) !important;
  }

  .emergency-card-alt .hero-hotline-number{
    font-size: 2rem !important;
  }

  .emergency-siren-badge{
    width: 62px !important;
    height: 62px !important;
  }
}

@media (max-width: 640px){
  .hero-emergency-card.emergency-card-alt{
    width: calc(100% - 32px) !important;
    padding: 16px 16px 14px !important;
  }

  .emergency-main-row{
    grid-template-columns: 1fr !important;
  }

  .emergency-siren-badge{
    width: 58px !important;
    height: 58px !important;
    margin-left: auto !important;
  }

  .emergency-card-alt .hero-hotline-number{
    font-size: 1.76rem !important;
  }

  .emergency-action-strip{
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* ===== Mobile Navigation Safety Fix ===== */
/* Fixes mobile menu overflow/wrapping issue without changing desktop layout */

@media (max-width: 900px){
  .site-header{
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  .navbar{
    position: relative !important;
    min-height: 74px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .menu-toggle{
    display: flex !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    margin-left: auto !important;
    z-index: 1002 !important;
  }

  .nav-menu{
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: min(72vh, 560px) !important;
    overflow-y: auto !important;
    display: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 12px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(86,129,216,.16) !important;
    box-shadow: 0 18px 42px rgba(9,39,91,.16) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    z-index: 1001 !important;
  }

  .nav-menu.open,
  .nav-menu.active,
  body.nav-open .nav-menu{
    display: flex !important;
  }

  .nav-link{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    font-size: .92rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    color: #173a74 !important;
    background: transparent !important;
  }

  .nav-link:hover,
  .nav-link.active{
    color: #2563ff !important;
    background: rgba(37,99,255,.07) !important;
  }

  .nav-link::after{
    display: none !important;
  }
}

@media (max-width: 640px){
  .site-header .container{
    width: min(100% - 20px, 1440px) !important;
  }

  .navbar{
    min-height: 70px !important;
  }

  .brand{
    max-width: calc(100% - 58px) !important;
  }

  .brand img{
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }

  .brand strong{
    font-size: .95rem !important;
  }

  .brand small{
    font-size: .72rem !important;
  }

  .nav-menu{
    top: calc(100% + 6px) !important;
    border-radius: 20px !important;
    padding: 10px !important;
  }

  .nav-link{
    padding: 11px 13px !important;
    font-size: .9rem !important;
  }
}

/* ===== Compact Mobile Menu Refinement ===== */
/* Makes the mobile navigation smaller, cleaner, and more balanced */

@media (max-width: 900px){
  .nav-menu{
    left: auto !important;
    right: 0 !important;
    width: min(360px, calc(100vw - 28px)) !important;
    max-height: min(68vh, 470px) !important;
    padding: 10px !important;
    border-radius: 18px !important;
    gap: 8px !important;
    background: rgba(255,255,255,.97) !important;
  }

  .nav-menu.open,
  .nav-menu.active,
  body.nav-open .nav-menu{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  .nav-link{
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: .84rem !important;
    line-height: 1.2 !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
  }

  .nav-link:hover,
  .nav-link.active{
    background: rgba(37,99,255,.08) !important;
  }
}

@media (max-width: 640px){
  .nav-menu{
    width: min(330px, calc(100vw - 24px)) !important;
    max-height: min(66vh, 430px) !important;
    padding: 8px !important;
    border-radius: 16px !important;
    gap: 6px !important;
  }

  .nav-menu.open,
  .nav-menu.active,
  body.nav-open .nav-menu{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .nav-link{
    min-height: 40px !important;
    padding: 9px 10px !important;
    font-size: .8rem !important;
    border-radius: 11px !important;
  }
}

@media (max-width: 430px){
  .nav-menu{
    width: min(314px, calc(100vw - 20px)) !important;
    max-height: min(64vh, 400px) !important;
  }

  .nav-link{
    font-size: .78rem !important;
    padding: 8px 9px !important;
  }
}

/* ===== Footer rearranged after removing Emergency Contacts ===== */
/* Clean 3-column footer layout */

.site-footer{
  padding-top: 42px !important;
}

.site-footer .footer-grid{
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 36px !important;
}

.site-footer .footer-grid > div{
  flex: 0 0 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.site-footer .footer-grid > div:nth-child(1){
  width: 230px !important;
}

.site-footer .footer-grid > div:nth-child(2){
  width: 235px !important;
}

.site-footer .footer-grid > div:nth-child(3){
  width: 160px !important;
}

.site-footer h3{
  font-size: 1rem !important;
  line-height: 1.18 !important;
  margin: 0 0 10px !important;
}

.site-footer p,
.site-footer li,
.site-footer a{
  font-size: .84rem !important;
  line-height: 1.45 !important;
}

.footer-links{
  gap: 4px !important;
}

.footer-bottom{
  margin-top: 24px !important;
}

@media (max-width: 900px){
  .site-footer .footer-grid{
    max-width: 680px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 22px !important;
  }

  .site-footer .footer-grid > div{
    width: auto !important;
  }

  .site-footer .footer-grid > div:first-child{
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px){
  .site-footer{
    padding-top: 32px !important;
  }

  .site-footer .footer-grid{
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .footer-bottom{
    margin-top: 20px !important;
  }
}

/* ===== Contact page map gap fix ===== */
/* Reduces the excessive space between the inquiry/contact cards and the map section */

.contact-modern-section{
  padding-bottom: 18px !important;
}

.contact-modern-section + .section-pad.soft-bg{
  padding-top: 10px !important;
}

.contact-modern-section + .section-pad.soft-bg .container{
  max-width: 1160px !important;
}

.contact-modern-section + .section-pad.soft-bg .map-embed{
  border-radius: 26px !important;
  box-shadow: 0 18px 40px rgba(22, 53, 106, .08) !important;
  overflow: hidden !important;
}

.contact-modern-section + .section-pad.soft-bg .map-embed iframe{
  height: 420px !important;
}

@media (max-width: 900px){
  .contact-modern-section{
    padding-bottom: 14px !important;
  }

  .contact-modern-section + .section-pad.soft-bg{
    padding-top: 6px !important;
  }

  .contact-modern-section + .section-pad.soft-bg .map-embed iframe{
    height: 360px !important;
  }
}

@media (max-width: 640px){
  .contact-modern-section{
    padding-bottom: 10px !important;
  }

  .contact-modern-section + .section-pad.soft-bg{
    padding-top: 4px !important;
  }

  .contact-modern-section + .section-pad.soft-bg .map-embed{
    border-radius: 20px !important;
  }

  .contact-modern-section + .section-pad.soft-bg .map-embed iframe{
    height: 300px !important;
  }
}

/* =========================================================
   FINAL RESPONSIVE SYSTEM STABILIZATION
   Purpose:
   - Makes layout device-adaptive across mobile, tablet, laptop, desktop, and large screens.
   - Fixes common overflow, oversized text, cramped cards, image scaling, footer/header balance.
   - Does not change content, workflow, forms, links, or existing functionality.
   ========================================================= */

:root{
  --fluid-container: min(100% - 32px, 1180px);
  --fluid-container-wide: min(100% - 40px, 1320px);
  --section-y-lg: clamp(46px, 5.4vw, 76px);
  --section-y-md: clamp(34px, 4.4vw, 58px);
  --card-pad-fluid: clamp(18px, 2.2vw, 26px);
  --card-radius-fluid: clamp(18px, 2.4vw, 28px);
  --gap-fluid: clamp(14px, 2vw, 24px);
  --text-navy: #15376f;
  --text-muted-soft: #607595;
}

/* Global overflow and scaling protection */
html,
body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

body{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video,
iframe{
  max-width: 100%;
}

img{
  height: auto;
}

.container{
  width: var(--fluid-container) !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
}

/* Section spacing should scale, not jump */
.section-pad{
  padding-top: var(--section-y-lg) !important;
  padding-bottom: var(--section-y-lg) !important;
}

.section-pad-sm{
  padding-top: var(--section-y-md) !important;
  padding-bottom: var(--section-y-md) !important;
}

/* Balanced fluid typography */
.hero h1{
  font-size: clamp(2.75rem, 5.1vw, 4.9rem) !important;
  line-height: .98 !important;
  letter-spacing: -.05em !important;
  max-width: 11ch !important;
}

.hero p,
.page-hero p,
.section-heading p,
.info-card p,
.image-card p,
.contact-card p,
.contact-form p,
.official-card p,
.download-card p,
.profile-item span,
.charter-meta-card p{
  font-size: clamp(.92rem, 1vw, 1.02rem) !important;
  line-height: 1.6 !important;
}

.page-hero h1{
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  line-height: 1.05 !important;
}

.section-heading h2,
.split-layout h2,
.pledge h2,
.contact-card-header h2{
  font-size: clamp(1.65rem, 3vw, 2.55rem) !important;
  line-height: 1.1 !important;
}

/* Header: desktop balance without wrapping awkwardly */
.site-header .container{
  width: min(100% - 28px, 1360px) !important;
  max-width: 1360px !important;
}

.navbar{
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.brand{
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: 300px !important;
}

.brand img{
  flex: 0 0 auto !important;
}

.brand span{
  min-width: 0;
}

.brand strong,
.brand small{
  overflow-wrap: normal;
  word-break: normal;
}

.nav-menu{
  min-width: 0 !important;
}

.nav-link{
  text-align: center;
}

/* Cards and grids should be consistent */
.card-grid,
.card-grid.three,
.card-grid.two,
.officials-grid,
.profile-grid,
.stats-grid,
.downloads-grid,
.contact-grid,
.charter-meta-grid{
  gap: var(--gap-fluid) !important;
}

.info-card,
.official-card,
.contact-card,
.contact-form,
.pledge,
.download-card,
.doc-row,
.profile-item,
.image-card,
.accordion-item,
.table-wrap,
.official-mini,
.mini-list article,
.charter-meta-card{
  padding: var(--card-pad-fluid) !important;
  border-radius: var(--card-radius-fluid) !important;
}

/* Homepage hero: avoid oversized crop and bad placement */
.hero{
  min-height: clamp(600px, 78vh, 760px) !important;
}

.hero-content{
  max-width: 620px !important;
}

.hero-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.hero .btn{
  min-height: 44px;
}

/* Emergency hero card: desktop and responsive safety */
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
  max-width: 420px !important;
  z-index: 4 !important;
}

.hero-emergency-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.hero-hotline-number{
  overflow-wrap: anywhere;
}

/* Featured official block */
.official-mini{
  display: flex !important;
  align-items: center !important;
  gap: clamp(16px, 2vw, 24px) !important;
}

.official-mini img{
  width: clamp(118px, 12vw, 154px) !important;
  height: clamp(118px, 12vw, 154px) !important;
  flex: 0 0 auto !important;
}

/* Officials grid */
.officials-grid{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}

.official-card img{
  width: clamp(112px, 10vw, 150px) !important;
  height: clamp(112px, 10vw, 150px) !important;
}

/* Forms and contact cards */
.contact-grid-modern{
  align-items: stretch !important;
}

.contact-form-modern input,
.contact-form-modern textarea{
  width: 100% !important;
}

.form-row{
  gap: 14px !important;
}

/* Tables and map */
.table-wrap{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table{
  width: 100% !important;
}

.map-embed{
  width: 100% !important;
  min-height: 0 !important;
}

.map-embed iframe{
  width: 100% !important;
  height: clamp(300px, 42vw, 420px) !important;
}

/* Footer base: clean adaptive layout */
.site-footer{
  overflow: hidden !important;
}

.site-footer .footer-grid{
  width: min(100% - 32px, 920px) !important;
  max-width: 920px !important;
  margin-inline: auto !important;
}

.footer-email,
.footer-hotline{
  overflow-wrap: anywhere;
}

/* Laptop and smaller desktop */
@media (max-width: 1280px){
  .site-header .container{
    width: min(100% - 24px, 1220px) !important;
  }

  .nav-link{
    font-size: .74rem !important;
    padding: 8px 7px !important;
  }

  .brand{
    max-width: 270px !important;
  }

  .brand img{
    width: 46px !important;
    height: 46px !important;
  }

  .brand strong{
    font-size: .94rem !important;
  }

  .brand small{
    font-size: .7rem !important;
  }
}

/* Tablet layout */
@media (max-width: 1024px){
  :root{
    --fluid-container: min(100% - 28px, 900px);
  }

  .hero{
    min-height: auto !important;
  }

  .hero-content{
    padding-top: 84px !important;
    padding-bottom: 190px !important;
    max-width: 580px !important;
  }

  .hero h1{
    font-size: clamp(2.4rem, 7vw, 4rem) !important;
  }

  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{
    right: 24px !important;
    bottom: 28px !important;
    width: min(390px, calc(100% - 48px)) !important;
  }

  .card-grid,
  .card-grid.three,
  .officials-grid,
  .profile-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .card-grid.two,
  .contact-grid,
  .contact-grid-modern,
  .split-layout{
    grid-template-columns: 1fr !important;
  }

  .downloads-grid{
    grid-template-columns: 1fr !important;
  }

  .official-mini{
    display: grid !important;
    grid-template-columns: auto 1fr !important;
  }
}

/* Mobile navigation must be compact and non-overflowing */
@media (max-width: 900px){
  .site-header{
    position: sticky !important;
    top: 0 !important;
  }

  .site-header .container{
    width: min(100% - 22px, 760px) !important;
  }

  .navbar{
    min-height: 70px !important;
    position: relative !important;
  }

  .brand{
    max-width: calc(100% - 58px) !important;
    padding: 6px 9px !important;
    border-radius: 18px !important;
  }

  .brand img{
    width: 42px !important;
    height: 42px !important;
  }

  .brand strong{
    font-size: .9rem !important;
  }

  .brand small{
    font-size: .68rem !important;
  }

  .menu-toggle{
    display: flex !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 1002 !important;
  }

  .nav-menu{
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(340px, calc(100vw - 24px)) !important;
    max-height: min(64vh, 420px) !important;
    overflow-y: auto !important;
    display: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(86,129,216,.16) !important;
    box-shadow: 0 18px 42px rgba(9,39,91,.16) !important;
    backdrop-filter: blur(18px) !important;
    z-index: 1001 !important;
  }

  .nav-menu.open,
  .nav-menu.active,
  body.nav-open .nav-menu{
    display: grid !important;
  }

  .nav-link{
    width: 100% !important;
    min-height: 40px !important;
    padding: 9px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    white-space: normal !important;
    font-size: .8rem !important;
    line-height: 1.15 !important;
    border-radius: 11px !important;
  }

  .nav-link::after{
    display: none !important;
  }

  .contact-form-modern .form-row,
  .form-row{
    grid-template-columns: 1fr !important;
  }

  .service-meta{
    grid-template-columns: 1fr !important;
  }

  .footer-email,
  .footer-hotline{
    white-space: normal !important;
  }
}

/* Standard mobile phones */
@media (max-width: 640px){
  :root{
    --fluid-container: min(100% - 24px, 560px);
    --section-y-lg: 34px;
    --section-y-md: 30px;
    --card-pad-fluid: 18px;
    --gap-fluid: 14px;
  }

  .page-hero.section-pad-sm{
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .page-hero h1{
    font-size: clamp(1.8rem, 7.4vw, 2.35rem) !important;
  }

  .hero{
    min-height: auto !important;
  }

  .hero-content{
    padding-top: 58px !important;
    padding-bottom: 24px !important;
  }

  .hero h1{
    font-size: clamp(2.1rem, 10vw, 3rem) !important;
    max-width: 11ch !important;
  }

  .hero p{
    font-size: .94rem !important;
    max-width: 100% !important;
  }

  .hero-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hero .btn{
    width: 100% !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
  }

  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 0 !important;
    padding: 16px !important;
  }

  .emergency-main-row{
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
  }

  .emergency-siren-badge{
    width: 54px !important;
    height: 54px !important;
  }

  .hero-hotline-number{
    font-size: clamp(1.55rem, 8vw, 1.9rem) !important;
  }

  .hero-emergency-grid{
    grid-template-columns: 1fr !important;
  }

  .card-grid,
  .card-grid.three,
  .card-grid.two,
  .officials-grid,
  .profile-grid,
  .stats-grid,
  .downloads-grid,
  .contact-grid,
  .contact-grid-modern,
  .charter-meta-grid{
    grid-template-columns: 1fr !important;
  }

  .official-mini{
    grid-template-columns: 1fr !important;
    text-align: center !important;
    justify-items: center !important;
  }

  .official-mini img{
    width: 120px !important;
    height: 120px !important;
  }

  .official-card img{
    width: 120px !important;
    height: 120px !important;
  }

  .image-card img{
    height: 170px !important;
  }

  .download-card{
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }

  .doc-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .accordion-trigger{
    padding: 16px 18px !important;
  }

  .contact-info-row{
    grid-template-columns: 1fr !important;
  }

  .emergency-box-modern{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .map-embed iframe{
    height: 280px !important;
  }

  .site-footer .footer-grid{
    width: var(--fluid-container) !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .site-footer .footer-grid > div{
    width: auto !important;
  }
}

/* Very small mobile devices */
@media (max-width: 420px){
  :root{
    --fluid-container: min(100% - 20px, 400px);
  }

  .brand{
    gap: 8px !important;
  }

  .brand img{
    width: 40px !important;
    height: 40px !important;
  }

  .brand strong{
    font-size: .86rem !important;
  }

  .brand small{
    font-size: .64rem !important;
  }

  .menu-toggle{
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  .nav-menu{
    width: min(312px, calc(100vw - 20px)) !important;
    max-height: min(62vh, 390px) !important;
  }

  .nav-link{
    font-size: .76rem !important;
    min-height: 38px !important;
    padding: 8px 9px !important;
  }

  .hero h1{
    font-size: clamp(1.95rem, 10vw, 2.6rem) !important;
  }

  .hero-hotline-number{
    font-size: 1.48rem !important;
  }

  .emergency-card-top,
  .emergency-action-strip{
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

/* Large screens: centered and not oversized */
@media (min-width: 1440px){
  .container{
    max-width: 1200px !important;
  }

  .site-header .container{
    max-width: 1360px !important;
  }

  .hero-content{
    max-width: 650px !important;
  }

  .hero h1{
    font-size: clamp(4rem, 4.2vw, 5.15rem) !important;
  }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Mobile emergency card size rebalance ===== */
/* Reduces the emergency card height/weight on mobile only */

@media (max-width: 640px){
  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{
    margin-top: 14px !important;
    padding: 12px 12px 12px !important;
    border-radius: 20px !important;
  }

  .hero-emergency-card::before,
  .hero-emergency-card.emergency-card-alt::before{
    height: 5px !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .emergency-card-top{
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .emergency-pill,
  .emergency-pill-live{
    padding: 7px 10px !important;
    font-size: .72rem !important;
  }

  .emergency-status,
  .emergency-status-alert{
    min-width: auto !important;
    padding: 6px 10px !important;
    font-size: .72rem !important;
  }

  .emergency-main-row{
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
  }

  .emergency-card-alt strong,
  .hero-emergency-card strong{
    font-size: 1rem !important;
    margin-bottom: 6px !important;
  }

  .hero-hotline-number{
    font-size: 1.28rem !important;
    line-height: 1.02 !important;
    margin-bottom: 8px !important;
  }

  .emergency-siren-badge{
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }

  .emergency-siren-badge i{
    font-size: .74rem !important;
  }

  .hero-emergency-card p,
  .emergency-card-alt p{
    font-size: .88rem !important;
    line-height: 1.48 !important;
    margin-bottom: 10px !important;
  }

  .hero-emergency-grid{
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .hero-emergency-item,
  .emergency-card-alt .hero-emergency-item{
    padding: 9px 11px !important;
    border-radius: 14px !important;
    text-align: left !important;
    min-height: auto !important;
  }

  .hero-emergency-item label{
    font-size: .64rem !important;
    margin-bottom: 3px !important;
  }

  .hero-emergency-item span{
    font-size: .95rem !important;
  }

  .emergency-action-strip{
    gap: 8px !important;
    padding-top: 0 !important;
  }

  .emergency-action-label,
  .emergency-action-chip{
    font-size: .72rem !important;
  }

  .emergency-action-chip{
    padding: 7px 10px !important;
  }
}

@media (max-width: 420px){
  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{
    padding: 11px 11px 12px !important;
    border-radius: 18px !important;
  }

  .hero-hotline-number{
    font-size: 1.18rem !important;
  }

  .emergency-pill,
  .emergency-pill-live{
    font-size: .68rem !important;
    padding: 6px 8px !important;
  }

  .emergency-status,
  .emergency-status-alert{
    font-size: .68rem !important;
    padding: 5px 8px !important;
  }

  .hero-emergency-card p,
  .emergency-card-alt p{
    font-size: .84rem !important;
  }

  .emergency-siren-badge{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  .hero-emergency-item{
    padding: 8px 10px !important;
  }
}


/* ========================================================================== 
   2026-06-29 Final responsive redesign + balanced motion layer
   Purpose: keep existing content/functionality, improve device balance,
   mobile safety, visual polish, and lightweight animations.
   ========================================================================== */

:root{
  --site-max: 1180px;
  --header-h: 74px;
  --page-x: clamp(16px, 4vw, 32px);
  --fluid-radius: clamp(18px, 2.2vw, 28px);
  --fluid-gap: clamp(14px, 2vw, 24px);
  --fluid-card-pad: clamp(18px, 2.2vw, 28px);
  --fluid-section-y: clamp(44px, 7vw, 86px);
  --motion-fast: 180ms;
  --motion-med: 420ms;
}

html{
  overflow-x: hidden !important;
  scroll-padding-top: var(--header-h);
}

body{
  overflow-x: hidden !important;
}

.container,
.navbar.container,
.site-footer .container{
  width: min(100% - (var(--page-x) * 2), var(--site-max)) !important;
  max-width: var(--site-max) !important;
  margin-inline: auto !important;
}

.site-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 1500 !important;
  overflow: visible !important;
  backdrop-filter: blur(16px);
}

.navbar{
  min-height: var(--header-h) !important;
  gap: 14px !important;
}

.brand{
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.brand span,
.brand strong,
.brand small{
  min-width: 0 !important;
}

.brand strong,
.brand small{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.menu-toggle{
  flex: 0 0 auto !important;
}

.nav-link{
  position: relative !important;
  isolation: isolate;
}

.nav-link::after{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  opacity: .55;
  transition: transform var(--motion-fast) ease;
}

.nav-link:hover::after,
.nav-link.active::after{
  transform: scaleX(1);
}

.section-pad{
  padding-block: var(--fluid-section-y) !important;
}

.section-pad-sm{
  padding-block: clamp(48px, 7vw, 78px) !important;
}

.section-heading{
  margin-bottom: clamp(24px, 4vw, 42px) !important;
}

.info-card,
.official-card,
.contact-card,
.contact-form,
.pledge,
.download-card,
.image-card,
.profile-item,
.doc-row,
.table-wrap,
.mini-list article{
  border-radius: var(--fluid-radius) !important;
  padding: var(--fluid-card-pad) !important;
}

.card-grid,
.card-grid.three,
.card-grid.two,
.officials-grid,
.profile-grid,
.downloads-grid,
.charter-meta-grid{
  gap: var(--fluid-gap) !important;
}

.card-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.card-grid.three{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.card-grid.two,
.downloads-grid,
.profile-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.split-layout,
.contact-grid,
.contact-grid-modern{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(24px, 4vw, 48px) !important;
  align-items: center !important;
}

img,
video,
iframe{
  max-width: 100% !important;
}

/* Modern animated ambient background that remains lightweight */
.hero,
.page-hero{
  isolation: isolate;
}

.hero::before,
.page-hero::before{
  animation: bgDrift 22s linear infinite alternate !important;
}

.hero::after,
.page-hero::after{
  animation: softFloat 10s ease-in-out infinite alternate !important;
}

.hero-content{
  position: relative !important;
  z-index: 2 !important;
  padding-top: clamp(100px, 11vw, 150px) !important;
  padding-bottom: clamp(120px, 15vw, 190px) !important;
  max-width: min(680px, 100%) !important;
}

.hero h1,
.page-hero h1,
.section-heading h2,
.split-layout h2,
.pledge h2{
  text-wrap: balance;
}

.hero p,
.page-hero p,
.section-heading p,
.split-layout p{
  text-wrap: pretty;
}

.hero-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.btn{
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateZ(0);
  transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, border-color var(--motion-fast) ease !important;
}

.btn:hover,
.info-card:hover,
.official-card:hover,
.download-card:hover,
.profile-item:hover,
.image-card:hover{
  transform: translateY(-4px) !important;
}

.info-card::after,
.official-card::after,
.download-card::after,
.profile-item::after,
.image-card::after,
.contact-card::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx,50%) var(--my,0%), rgba(21,101,216,.12), transparent 36%);
  opacity: 0;
  transition: opacity var(--motion-med) ease;
}

.info-card:hover::after,
.official-card:hover::after,
.download-card:hover::after,
.profile-item:hover::after,
.image-card:hover::after,
.contact-card:hover::after{
  opacity: 1;
}

/* Emergency card redesign: compact, alert-like, and responsive */
.hero-card.hero-emergency-card{
  z-index: 3 !important;
}

.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
  width: min(420px, calc(100% - 40px)) !important;
  padding: clamp(16px, 2vw, 20px) !important;
  border-radius: clamp(20px, 2.2vw, 28px) !important;
}

.emergency-card-top,
.emergency-action-strip{
  flex-wrap: wrap !important;
}

.emergency-main-row{
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.hero-hotline-number{
  font-size: clamp(1.32rem, 4vw, 2.24rem) !important;
  word-break: keep-all !important;
}

.hero-emergency-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.emergency-siren-badge{
  animation: sirenFloat 2.8s ease-in-out infinite !important;
}

/* Footer rebalance for 3 actual columns */
.site-footer .footer-grid,
.footer-grid{
  width: min(100% - (var(--page-x) * 2), var(--site-max)) !important;
  max-width: var(--site-max) !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, .95fr) minmax(180px, .75fr) !important;
  gap: clamp(22px, 4vw, 44px) !important;
  padding-block: clamp(34px, 6vw, 58px) !important;
}

.footer-email{
  white-space: nowrap !important;
}

/* Better tablet behavior */
@media (max-width: 1180px){
  :root{ --site-max: 960px; }

  .nav-menu{
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: var(--page-x) !important;
    right: var(--page-x) !important;
    width: auto !important;
    max-height: min(68vh, 520px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    opacity: 0 !important;
    transform: translateY(-8px) scale(.98) !important;
    pointer-events: none !important;
  }

  .nav-menu.open,
  body.nav-open .nav-menu{
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }

  .card-grid,
  .card-grid.three,
  .officials-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-card{
    right: var(--page-x) !important;
  }
}

@media (max-width: 900px){
  :root{ --site-max: 720px; --header-h: 68px; }

  .hero-content{
    padding-top: 92px !important;
    padding-bottom: 34px !important;
  }

  .hero-card,
  .hero-card.hero-emergency-card,
  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: min(100%, 560px) !important;
    max-width: 100% !important;
    margin: 0 auto 34px !important;
  }

  .split-layout,
  .contact-grid,
  .contact-grid-modern{
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .site-footer .footer-grid,
  .footer-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px){
  :root{
    --page-x: 14px;
    --header-h: 64px;
    --fluid-card-pad: 16px;
    --fluid-section-y: 38px;
    --fluid-gap: 14px;
  }

  .navbar{
    min-height: var(--header-h) !important;
  }

  .brand img{
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  .brand strong{ font-size: .9rem !important; }
  .brand small{ font-size: .66rem !important; }

  .nav-menu{
    left: 10px !important;
    right: 10px !important;
    top: calc(100% + 8px) !important;
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    border-radius: 18px !important;
    max-height: min(72vh, 520px) !important;
  }

  .nav-link{
    min-height: 40px !important;
    padding: 10px 12px !important;
    font-size: .82rem !important;
  }

  .hero-content{
    padding-top: 78px !important;
    padding-bottom: 22px !important;
  }

  .hero h1{
    font-size: clamp(2.1rem, 12vw, 3rem) !important;
    max-width: 12ch !important;
  }

  .hero p,
  .page-hero p{
    font-size: .94rem !important;
    line-height: 1.62 !important;
  }

  .hero-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .hero-actions .btn{
    width: 100% !important;
    padding-inline: 14px !important;
  }

  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{
    margin-top: 0 !important;
    margin-bottom: 28px !important;
    padding: 13px !important;
  }

  .emergency-card-top{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
  }

  .emergency-pill,
  .emergency-pill-live,
  .emergency-status,
  .emergency-status-alert{
    font-size: .68rem !important;
    padding: 6px 8px !important;
    min-width: 0 !important;
  }

  .emergency-main-row{
    gap: 8px !important;
  }

  .emergency-siren-badge{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  .emergency-siren-badge i{
    font-size: .68rem !important;
  }

  .hero-hotline-number{
    font-size: clamp(1.16rem, 6vw, 1.45rem) !important;
    margin-bottom: 6px !important;
  }

  .hero-emergency-card p,
  .emergency-card-alt p{
    font-size: .82rem !important;
    line-height: 1.45 !important;
    margin-bottom: 8px !important;
  }

  .hero-emergency-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .hero-emergency-item,
  .emergency-card-alt .hero-emergency-item{
    padding: 8px 6px !important;
    text-align: center !important;
  }

  .hero-emergency-item label{
    font-size: .56rem !important;
    letter-spacing: .04em !important;
  }

  .hero-emergency-item span{
    font-size: .86rem !important;
  }

  .emergency-action-strip{
    display: none !important;
  }

  .card-grid,
  .card-grid.three,
  .card-grid.two,
  .officials-grid,
  .profile-grid,
  .downloads-grid,
  .stats-grid,
  .contact-grid,
  .contact-grid-modern,
  .charter-meta-grid,
  .form-row{
    grid-template-columns: 1fr !important;
  }

  .stats-grid div{
    min-height: auto !important;
  }

  .image-card img{
    height: clamp(150px, 45vw, 190px) !important;
  }

  .official-card img,
  .official-mini img{
    width: 112px !important;
    height: 112px !important;
  }

  .download-card,
  .doc-row{
    grid-template-columns: 1fr !important;
  }

  .site-footer .footer-grid,
  .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding-block: 32px !important;
  }

  .footer-email{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .back-to-top{
    right: 14px !important;
    bottom: 14px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 380px){
  :root{ --page-x: 12px; }

  .brand strong{ font-size: .82rem !important; }
  .brand small{ display: none !important; }

  .emergency-card-top{
    grid-template-columns: 1fr !important;
  }

  .hero-emergency-grid{
    grid-template-columns: 1fr !important;
  }

  .hero-emergency-item{
    text-align: left !important;
    padding-inline: 10px !important;
  }
}

@media (min-width: 1440px){
  :root{ --site-max: 1220px; }

  .site-header .container{
    max-width: 1380px !important;
  }
}

@keyframes bgDrift{
  from{ background-position: 0 0, 100% 0, 0 0, 0 0; }
  to{ background-position: 0 0, 100% 0, 38px 26px, -36px -24px; }
}

@keyframes softFloat{
  from{ transform: translate3d(0,0,0) scale(1); }
  to{ transform: translate3d(-18px,-12px,0) scale(1.05); }
}

@keyframes sirenFloat{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-3px) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce){
  .hero::before,
  .page-hero::before,
  .hero::after,
  .page-hero::after,
  .emergency-siren-badge,
  .emergency-dot,
  .emergency-status-alert{
    animation: none !important;
  }
}

/* =======================================================================
   TRUE FINAL MOBILE RECOVERY FIX - 2026-06-29
   Scope: fixes oversized mobile fonts, huge gaps, emergency card height,
   and broken/duplicate mobile menu behavior. Content and workflow unchanged.
   ======================================================================= */

@media (max-width: 900px){
  html, body{ overflow-x:hidden !important; }

  .site-header{ position:sticky !important; top:0 !important; z-index:9999 !important; }
  .site-header .container,
  .navbar.container,
  .container{
    width:calc(100% - 24px) !important;
    max-width:calc(100% - 24px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .navbar{
    min-height:62px !important;
    padding:6px 0 !important;
    gap:10px !important;
    align-items:center !important;
    justify-content:space-between !important;
  }

  .brand{
    flex:1 1 auto !important;
    max-width:calc(100% - 52px) !important;
    min-width:0 !important;
    padding:5px 8px !important;
    gap:8px !important;
    border-radius:16px !important;
  }

  .brand img{
    width:38px !important;
    height:38px !important;
    flex:0 0 38px !important;
    border-radius:11px !important;
  }

  .brand strong{
    font-size:.82rem !important;
    line-height:1.05 !important;
  }

  .brand small{
    display:block !important;
    font-size:.62rem !important;
    line-height:1.1 !important;
    margin-top:1px !important;
  }

  .menu-toggle{
    display:flex !important;
    width:40px !important;
    height:40px !important;
    flex:0 0 40px !important;
    border-radius:13px !important;
    margin-left:auto !important;
    z-index:10001 !important;
  }

  .nav-menu{
    position:absolute !important;
    top:calc(100% + 6px) !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-height:calc(100vh - 92px) !important;
    overflow-y:auto !important;
    display:none !important;
    grid-template-columns:1fr !important;
    gap:4px !important;
    padding:8px !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.98) !important;
    border:1px solid rgba(86,129,216,.16) !important;
    box-shadow:0 16px 38px rgba(9,39,91,.16) !important;
    z-index:10000 !important;
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
  }

  .nav-menu.open,
  body.nav-open .nav-menu{
    display:grid !important;
  }

  .nav-link{
    min-height:36px !important;
    padding:8px 10px !important;
    font-size:.78rem !important;
    line-height:1.15 !important;
    border-radius:10px !important;
    text-align:left !important;
    justify-content:flex-start !important;
    white-space:normal !important;
  }

  .nav-link::after{ display:none !important; }

  .hero{
    min-height:auto !important;
    background-position:72% center !important;
  }

  .hero-content{
    max-width:100% !important;
    padding-top:42px !important;
    padding-bottom:12px !important;
  }

  .hero .eyebrow,
  .page-hero .eyebrow{
    max-width:100% !important;
    padding:6px 10px !important;
    font-size:.60rem !important;
    line-height:1.15 !important;
    letter-spacing:.10em !important;
    margin-bottom:10px !important;
  }

  .hero h1{
    font-size:clamp(1.8rem, 7.8vw, 2.35rem) !important;
    line-height:1.03 !important;
    letter-spacing:-.035em !important;
    max-width:100% !important;
    margin-bottom:10px !important;
  }

  .hero p{
    font-size:.88rem !important;
    line-height:1.48 !important;
    max-width:100% !important;
    margin-bottom:0 !important;
  }

  .hero-actions{
    width:100% !important;
    max-width:285px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin:16px auto 0 !important;
  }

  .hero-actions .btn,
  .hero .btn{
    width:100% !important;
    min-height:38px !important;
    padding:8px 14px !important;
    font-size:.86rem !important;
    border-radius:999px !important;
  }

  .hero-card.hero-emergency-card,
  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    top:auto !important;
    width:100% !important;
    max-width:100% !important;
    margin:10px 0 22px !important;
    padding:10px !important;
    border-radius:18px !important;
    animation:none !important;
  }

  .hero-emergency-card::before,
  .hero-emergency-card.emergency-card-alt::before{
    height:4px !important;
    border-radius:18px 18px 0 0 !important;
  }

  .hero-emergency-card::after,
  .hero-emergency-card.emergency-card-alt::after{ display:none !important; }

  .emergency-card-top{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:6px !important;
    align-items:center !important;
    margin-bottom:8px !important;
  }

  .emergency-pill,
  .emergency-pill-live,
  .emergency-status,
  .emergency-status-alert{
    min-width:0 !important;
    padding:5px 7px !important;
    font-size:.58rem !important;
    line-height:1.05 !important;
    letter-spacing:.045em !important;
  }

  .emergency-main-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:8px !important;
    align-items:center !important;
    margin-bottom:4px !important;
  }

  .hero-emergency-card strong,
  .emergency-card-alt strong{
    font-size:.9rem !important;
    line-height:1.15 !important;
    margin-bottom:4px !important;
  }

  .hero-hotline-number,
  .emergency-card-alt .hero-hotline-number{
    font-size:1.18rem !important;
    line-height:1.02 !important;
    margin-bottom:5px !important;
    letter-spacing:-.02em !important;
  }

  .emergency-siren-badge{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    animation:none !important;
  }

  .emergency-siren-badge i{
    font-size:.58rem !important;
  }

  .emergency-siren-badge span{ display:none !important; }

  .hero-emergency-card p,
  .emergency-card-alt p{
    font-size:.76rem !important;
    line-height:1.36 !important;
    margin-bottom:8px !important;
  }

  .hero-emergency-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:6px !important;
    margin-bottom:0 !important;
  }

  .hero-emergency-item,
  .emergency-card-alt .hero-emergency-item{
    min-height:auto !important;
    padding:7px 4px !important;
    border-radius:12px !important;
    text-align:center !important;
  }

  .hero-emergency-item label{
    font-size:.48rem !important;
    line-height:1.05 !important;
    letter-spacing:.03em !important;
    margin-bottom:3px !important;
  }

  .hero-emergency-item span{
    font-size:.78rem !important;
    line-height:1 !important;
  }

  .emergency-action-strip{ display:none !important; }

  .section-pad{ padding-top:30px !important; padding-bottom:30px !important; }
  .section-pad-sm{ padding-top:28px !important; padding-bottom:28px !important; }
  .section-heading{ margin-bottom:18px !important; }

  .section-heading h2,
  .split-layout h2,
  .pledge h2,
  .contact-card-header h2{
    font-size:clamp(1.35rem, 6vw, 1.8rem) !important;
    line-height:1.12 !important;
  }

  .info-card,
  .official-card,
  .contact-card,
  .contact-form,
  .pledge,
  .download-card,
  .image-card,
  .profile-item,
  .doc-row,
  .table-wrap,
  .mini-list article,
  .charter-meta-card{
    padding:16px !important;
    border-radius:18px !important;
  }

  .card-grid,
  .card-grid.three,
  .card-grid.two,
  .officials-grid,
  .profile-grid,
  .downloads-grid,
  .stats-grid,
  .contact-grid,
  .contact-grid-modern,
  .charter-meta-grid,
  .form-row{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
}

@media (max-width:420px){
  .site-header .container,
  .navbar.container,
  .container{
    width:calc(100% - 20px) !important;
    max-width:calc(100% - 20px) !important;
  }

  .navbar{ min-height:58px !important; }
  .brand img{ width:36px !important; height:36px !important; flex-basis:36px !important; }
  .brand strong{ font-size:.78rem !important; }
  .brand small{ font-size:.58rem !important; }
  .menu-toggle{ width:38px !important; height:38px !important; flex-basis:38px !important; }

  .hero-content{ padding-top:36px !important; }
  .hero h1{ font-size:clamp(1.65rem, 8.2vw, 2.05rem) !important; }
  .hero p{ font-size:.84rem !important; }
  .hero-actions{ max-width:270px !important; }
  .hero-actions .btn{ min-height:36px !important; font-size:.82rem !important; }

  .emergency-card-top{ grid-template-columns:1fr auto !important; }
  .emergency-pill,
  .emergency-status{ font-size:.54rem !important; }
  .hero-hotline-number,
  .emergency-card-alt .hero-hotline-number{ font-size:1.05rem !important; }
  .hero-emergency-card p,
  .emergency-card-alt p{ font-size:.72rem !important; }
  .hero-emergency-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
}

@media (max-width:360px){
  .hero-emergency-grid{ grid-template-columns:1fr !important; }
  .hero-emergency-item{ text-align:left !important; padding:7px 9px !important; }
}

@media (max-width:900px), (prefers-reduced-motion: reduce){
  body::after,
  .hero::before,
  .hero::after,
  .page-hero::before,
  .page-hero::after,
  .info-card .icon,
  .download-card .icon,
  .official-card img{
    animation:none !important;
  }
}

/* =======================================================================
   MOBILE BALANCE PATCH - buttons + emergency card
   Scope: reduce mobile button size, emergency card height, gaps, and text scale.
   Content, links, forms, and functionality unchanged.
   ======================================================================= */
@media (max-width: 600px){
  .hero{
    min-height:auto !important;
    padding-bottom:18px !important;
  }

  .hero-content{
    padding-top:30px !important;
    padding-bottom:0 !important;
  }

  .hero .eyebrow{
    width:auto !important;
    max-width:100% !important;
    padding:5px 9px !important;
    font-size:.56rem !important;
    letter-spacing:.085em !important;
    margin-bottom:8px !important;
  }

  .hero h1{
    font-size:clamp(1.5rem, 7vw, 1.9rem) !important;
    line-height:1.02 !important;
    margin-bottom:8px !important;
  }

  .hero p{
    font-size:.80rem !important;
    line-height:1.42 !important;
    margin-bottom:0 !important;
  }

  .hero-actions{
    width:min(100%, 248px) !important;
    max-width:248px !important;
    gap:7px !important;
    margin:13px auto 0 !important;
  }

  .hero-actions .btn,
  .hero .btn,
  a.btn,
  button.btn{
    min-height:34px !important;
    height:34px !important;
    max-height:34px !important;
    padding:6px 12px !important;
    font-size:.78rem !important;
    line-height:1 !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .hero-card.hero-emergency-card,
  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{
    width:calc(100% - 20px) !important;
    max-width:360px !important;
    margin:12px auto 0 !important;
    padding:9px 10px 10px !important;
    border-radius:16px !important;
    box-shadow:0 10px 22px rgba(20, 37, 70, .14) !important;
  }

  .hero-emergency-card::before,
  .hero-emergency-card.emergency-card-alt::before{
    height:3px !important;
    border-radius:16px 16px 0 0 !important;
  }

  .emergency-card-top{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:6px !important;
    margin-bottom:7px !important;
  }

  .emergency-pill,
  .emergency-pill-live,
  .emergency-status,
  .emergency-status-alert{
    min-height:26px !important;
    padding:4px 7px !important;
    font-size:.50rem !important;
    line-height:1.05 !important;
    letter-spacing:.035em !important;
    border-radius:999px !important;
    white-space:nowrap !important;
  }

  .emergency-pill-live{
    max-width:66% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .emergency-status-alert{
    flex:0 0 auto !important;
    font-size:.60rem !important;
    font-weight:800 !important;
  }

  .emergency-main-row{
    grid-template-columns:minmax(0,1fr) 34px !important;
    gap:7px !important;
    margin-bottom:3px !important;
  }

  .hero-emergency-card strong,
  .emergency-card-alt strong{
    font-size:.78rem !important;
    line-height:1.1 !important;
    margin-bottom:3px !important;
  }

  .hero-hotline-number,
  .emergency-card-alt .hero-hotline-number{
    font-size:1.0rem !important;
    line-height:1 !important;
    margin-bottom:3px !important;
    letter-spacing:-.015em !important;
  }

  .emergency-siren-badge{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    box-shadow:0 6px 14px rgba(255, 84, 78, .20) !important;
  }

  .emergency-siren-badge i{
    font-size:.50rem !important;
    line-height:1 !important;
  }

  .hero-emergency-card p,
  .emergency-card-alt p{
    font-size:.68rem !important;
    line-height:1.28 !important;
    margin:0 0 7px !important;
  }

  .hero-emergency-grid{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:5px !important;
  }

  .hero-emergency-item,
  .emergency-card-alt .hero-emergency-item{
    padding:5px 3px !important;
    min-height:42px !important;
    border-radius:10px !important;
  }

  .hero-emergency-item label{
    font-size:.42rem !important;
    line-height:1 !important;
    margin-bottom:3px !important;
  }

  .hero-emergency-item span{
    font-size:.68rem !important;
    line-height:1 !important;
  }

  .gradient-band,
  .section-pad{
    padding-top:24px !important;
    padding-bottom:24px !important;
  }
}

@media (max-width: 380px){
  .hero-actions{
    width:min(100%, 230px) !important;
    max-width:230px !important;
  }

  .hero-actions .btn,
  .hero .btn,
  a.btn,
  button.btn{
    min-height:32px !important;
    height:32px !important;
    max-height:32px !important;
    font-size:.74rem !important;
    padding:5px 10px !important;
  }

  .hero-card.hero-emergency-card,
  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{
    width:calc(100% - 16px) !important;
    padding:8px !important;
  }

  .emergency-pill,
  .emergency-pill-live{
    font-size:.46rem !important;
    padding:4px 6px !important;
  }

  .emergency-status,
  .emergency-status-alert{
    font-size:.54rem !important;
    padding:4px 6px !important;
  }

  .hero-hotline-number,
  .emergency-card-alt .hero-hotline-number{
    font-size:.92rem !important;
  }

  .hero-emergency-card p,
  .emergency-card-alt p{
    font-size:.64rem !important;
  }
}

/* ==========================================================
   FINAL FIX: Citizen's Charter mobile timeline/table viewing
   Purpose: Fix cramped mobile table, oversized wrapping, and
   misaligned/early-stopping blue dot animation.
   ========================================================== */

/* Remove the separate moving blue dot runner because it is hard-coded
   and becomes inaccurate when row heights change on mobile/tablet. */
.process-flow-wrap::after{
  display:none !important;
  content:none !important;
  animation:none !important;
}

/* Keep desktop/tablet table cleaner and slightly less oversized. */
.charter-section .table-wrap{
  max-width:100% !important;
}

.charter-section table{
  min-width:680px !important;
}

.charter-section th,
.charter-section td{
  font-size:.95rem !important;
  line-height:1.45 !important;
  padding:14px 16px !important;
}

.charter-section th:first-child,
.charter-section td.step-cell{
  width:82px !important;
  min-width:82px !important;
}

/* Tablet: reduce width requirement so the table scroll is not excessive. */
@media (max-width:900px){
  .charter-section table{
    min-width:620px !important;
  }

  .charter-section th,
  .charter-section td{
    font-size:.88rem !important;
    line-height:1.42 !important;
    padding:12px 14px !important;
  }

  .charter-section .table-wrap{
    border-radius:18px !important;
  }
}

/* Mobile: convert the table into readable stacked process cards. */
@media (max-width:700px){
  .charter-section{
    padding-top:26px !important;
    padding-bottom:26px !important;
  }

  .charter-stack{
    gap:16px !important;
  }

  .pledge{
    padding:16px !important;
    border-radius:18px !important;
  }

  .pledge h2{
    font-size:1.1rem !important;
    margin-bottom:6px !important;
  }

  .pledge p{
    font-size:.82rem !important;
    line-height:1.45 !important;
  }

  .charter-section .table-wrap.process-flow-wrap{
    overflow:visible !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }

  .process-flow-wrap::before{
    display:none !important;
    content:none !important;
    animation:none !important;
  }

  .charter-section table,
  .charter-section thead,
  .charter-section tbody,
  .charter-section tr,
  .charter-section td{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }

  .charter-section thead{
    display:none !important;
  }

  .charter-section table{
    border-collapse:separate !important;
    border-spacing:0 !important;
  }

  .charter-section tbody{
    display:grid !important;
    gap:12px !important;
  }

  .charter-section tbody tr,
  .charter-section.process-in-view tbody tr{
    display:grid !important;
    grid-template-columns:48px minmax(0,1fr) !important;
    column-gap:10px !important;
    align-items:start !important;
    position:relative !important;
    padding:12px 12px 12px 8px !important;
    border:1px solid rgba(37,99,255,.10) !important;
    border-radius:18px !important;
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,251,255,.94)) !important;
    box-shadow:0 10px 24px rgba(7,29,73,.06) !important;
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }

  .charter-section tbody tr:hover td{
    background:transparent !important;
  }

  .charter-section tbody td,
  .charter-section tbody td:nth-child(2),
  .charter-section tbody td:nth-child(3),
  .charter-section tbody td:nth-child(4){
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    min-width:0 !important;
  }

  .charter-section td.step-cell{
    grid-column:1 !important;
    grid-row:1 / span 3 !important;
    width:48px !important;
    min-width:48px !important;
    padding-top:2px !important;
    text-align:center !important;
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
  }

  .charter-section td.step-cell::after{
    left:50% !important;
    top:42px !important;
    bottom:-26px !important;
    width:2px !important;
    transform:translateX(-50%) !important;
    background:linear-gradient(180deg,rgba(8,200,255,.34),rgba(18,214,166,.16)) !important;
    box-shadow:none !important;
  }

  .charter-section tbody tr:last-child td.step-cell::after{
    display:none !important;
  }

  .step-badge{
    width:32px !important;
    height:32px !important;
    font-size:.86rem !important;
    box-shadow:
      0 8px 18px rgba(37,99,255,.10),
      inset 0 0 0 1px rgba(255,255,255,.68),
      0 0 0 5px rgba(8,200,255,.055) !important;
    animation:none !important;
  }

  .step-badge::before,
  .step-badge::after{
    display:none !important;
    content:none !important;
    animation:none !important;
  }

  .charter-section tbody td:nth-child(2){
    grid-column:2 !important;
    color:#0b2d66 !important;
    font-size:.88rem !important;
    line-height:1.35 !important;
    font-weight:800 !important;
    margin:0 0 8px !important;
  }

  .charter-section tbody td:nth-child(2)::before{
    display:none !important;
    content:none !important;
    animation:none !important;
  }

  .charter-section tbody td:nth-child(3),
  .charter-section tbody td:nth-child(4){
    grid-column:2 !important;
    position:relative !important;
    padding-left:72px !important;
    color:#4b5f7a !important;
    font-size:.76rem !important;
    line-height:1.35 !important;
    margin-top:5px !important;
  }

  .charter-section tbody td:nth-child(3)::before,
  .charter-section tbody td:nth-child(4)::before{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    width:62px !important;
    color:#6b7f99 !important;
    font-size:.62rem !important;
    line-height:1.35 !important;
    font-weight:900 !important;
    letter-spacing:.05em !important;
    text-transform:uppercase !important;
  }

  .charter-section tbody td:nth-child(3)::before{
    content:"Time" !important;
  }

  .charter-section tbody td:nth-child(4)::before{
    content:"Office" !important;
  }

  .charter-meta-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .charter-meta-card{
    padding:16px !important;
    border-radius:18px !important;
  }

  .charter-meta-card h3{
    font-size:1rem !important;
    margin-bottom:6px !important;
  }

  .charter-meta-card p{
    font-size:.80rem !important;
    line-height:1.45 !important;
  }
}

@media (max-width:380px){
  .charter-section tbody tr,
  .charter-section.process-in-view tbody tr{
    grid-template-columns:42px minmax(0,1fr) !important;
    column-gap:8px !important;
    padding:10px 10px 10px 6px !important;
    border-radius:16px !important;
  }

  .charter-section td.step-cell{
    width:42px !important;
    min-width:42px !important;
  }

  .step-badge{
    width:28px !important;
    height:28px !important;
    font-size:.78rem !important;
  }

  .charter-section tbody td:nth-child(2){
    font-size:.82rem !important;
  }

  .charter-section tbody td:nth-child(3),
  .charter-section tbody td:nth-child(4){
    font-size:.72rem !important;
    padding-left:62px !important;
  }

  .charter-section tbody td:nth-child(3)::before,
  .charter-section tbody td:nth-child(4)::before{
    width:54px !important;
    font-size:.58rem !important;
  }
}

/* ==========================================================
   2026-06-29 v5 FINAL MOBILE COMPACT BALANCE PATCH
   Scope: mobile/tablet sizing only for header/menu, page hero,
   officials, initiative/announcement cards, and downloads.
   ========================================================== */

@media (max-width: 768px){
  html,
  body{
    overflow-x:hidden !important;
  }

  .site-header{
    min-height:auto !important;
  }

  .navbar.container{
    width:calc(100% - 18px) !important;
  }

  .navbar{
    min-height:58px !important;
    padding:6px 0 !important;
    gap:8px !important;
  }

  .brand{
    max-width:calc(100vw - 76px) !important;
    padding:5px 9px 5px 6px !important;
    gap:7px !important;
    border-radius:15px !important;
  }

  .brand img{
    width:34px !important;
    height:34px !important;
    border-radius:11px !important;
  }

  .brand strong{
    font-size:.78rem !important;
    line-height:1.05 !important;
    letter-spacing:-.02em !important;
  }

  .brand small{
    display:block !important;
    font-size:.58rem !important;
    line-height:1.05 !important;
  }

  .menu-toggle{
    width:38px !important;
    height:38px !important;
    flex:0 0 38px !important;
    border-radius:12px !important;
    gap:4px !important;
    box-shadow:0 8px 18px rgba(21,101,216,.18) !important;
  }

  .menu-toggle span{
    width:18px !important;
    height:2px !important;
  }

  .menu-toggle.open span:nth-child(1){
    transform:translateY(6px) rotate(45deg) !important;
  }

  .menu-toggle.open span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg) !important;
  }

  .nav-menu{
    left:10px !important;
    right:10px !important;
    top:calc(100% + 6px) !important;
    max-height:calc(100vh - 76px) !important;
    padding:9px !important;
    gap:6px !important;
    border-radius:16px !important;
    grid-template-columns:1fr !important;
  }

  .nav-link{
    min-height:38px !important;
    padding:9px 12px !important;
    font-size:.82rem !important;
    border-radius:12px !important;
  }

  .page-hero{
    min-height:190px !important;
    padding:50px 0 30px !important;
    background-position:center center !important;
  }

  .page-hero:before{
    opacity:.78 !important;
  }

  .page-hero .container{
    width:calc(100% - 24px) !important;
  }

  .page-hero .eyebrow{
    font-size:.58rem !important;
    line-height:1 !important;
    padding:6px 10px !important;
    gap:6px !important;
    margin-bottom:10px !important;
    letter-spacing:.08em !important;
  }

  .page-hero .eyebrow:before{
    width:24px !important;
    height:2px !important;
  }

  .page-hero h1{
    font-size:clamp(1.72rem,7.5vw,2.05rem) !important;
    line-height:1.08 !important;
    max-width:100% !important;
    margin-bottom:10px !important;
    letter-spacing:-.045em !important;
  }

  .page-hero p{
    max-width:34ch !important;
    font-size:.92rem !important;
    line-height:1.5 !important;
  }

  .section-pad{
    padding:28px 0 !important;
  }

  .section-pad-sm{
    padding:26px 0 !important;
  }

  .card-grid,
  .card-grid.three,
  .card-grid.two,
  .officials-grid,
  .downloads-grid{
    gap:14px !important;
    grid-template-columns:1fr !important;
  }

  .official-card{
    padding:17px 14px !important;
    border-radius:18px !important;
    min-height:0 !important;
  }

  .official-card img{
    width:82px !important;
    height:82px !important;
    border-width:5px !important;
    margin-bottom:10px !important;
    box-shadow:0 10px 22px rgba(21,94,239,.12) !important;
    animation:none !important;
  }

  .official-card h3{
    font-size:1rem !important;
    line-height:1.2 !important;
    margin-bottom:6px !important;
  }

  .official-card span{
    font-size:.86rem !important;
    line-height:1.2 !important;
    margin-bottom:5px !important;
  }

  .official-card p{
    font-size:.78rem !important;
    line-height:1.35 !important;
  }

  .image-card{
    border-radius:18px !important;
    box-shadow:0 12px 28px rgba(8,38,77,.08) !important;
  }

  .image-card img{
    height:132px !important;
    object-fit:cover !important;
  }

  .image-card::after{
    height:132px !important;
    border-radius:18px 18px 0 0 !important;
  }

  .image-card img + div,
  .image-card > div{
    padding:15px 16px 17px !important;
  }

  .image-card .status,
  .status{
    font-size:.66rem !important;
    padding:5px 9px !important;
    margin-bottom:9px !important;
  }

  .image-card h3{
    font-size:1.02rem !important;
    line-height:1.25 !important;
    margin-bottom:6px !important;
  }

  .image-card p{
    font-size:.86rem !important;
    line-height:1.45 !important;
  }

  .image-card .text-link{
    font-size:.86rem !important;
  }

  .download-card{
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    align-items:start !important;
    gap:11px !important;
    padding:16px !important;
    border-radius:18px !important;
    text-align:left !important;
  }

  .download-card .icon{
    width:42px !important;
    height:42px !important;
    border-radius:14px !important;
    font-size:1.05rem !important;
    margin:0 !important;
    animation:none !important;
  }

  .download-card h3{
    font-size:1rem !important;
    line-height:1.25 !important;
    margin-bottom:6px !important;
  }

  .download-card p{
    font-size:.84rem !important;
    line-height:1.45 !important;
    margin-bottom:12px !important;
  }

  .download-card .btn,
  .download-card .btn-small,
  .download-card .btn-primary{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-height:38px !important;
    height:38px !important;
    padding:9px 14px !important;
    font-size:.78rem !important;
    border-radius:15px !important;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-light{
    min-height:40px !important;
    padding:10px 16px !important;
    font-size:.86rem !important;
    border-radius:16px !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-zoom{
    transition-duration:.35s !important;
    transform:none !important;
  }
}

@media (max-width: 480px){
  .navbar.container{
    width:calc(100% - 16px) !important;
  }

  .navbar{
    min-height:54px !important;
  }

  .brand{
    max-width:calc(100vw - 68px) !important;
    padding:4px 8px 4px 5px !important;
  }

  .brand img{
    width:31px !important;
    height:31px !important;
  }

  .brand strong{
    font-size:.72rem !important;
  }

  .brand small{
    font-size:.54rem !important;
  }

  .menu-toggle{
    width:36px !important;
    height:36px !important;
    flex-basis:36px !important;
    border-radius:11px !important;
  }

  .page-hero{
    min-height:176px !important;
    padding:44px 0 26px !important;
  }

  .page-hero h1{
    font-size:clamp(1.62rem,7.8vw,1.92rem) !important;
    margin-bottom:8px !important;
  }

  .page-hero p{
    font-size:.88rem !important;
    line-height:1.48 !important;
  }

  .page-hero .eyebrow{
    font-size:.54rem !important;
    padding:5px 9px !important;
    margin-bottom:9px !important;
  }

  .official-card{
    padding:15px 12px !important;
    border-radius:16px !important;
  }

  .official-card img{
    width:76px !important;
    height:76px !important;
  }

  .official-card h3{
    font-size:.96rem !important;
  }

  .official-card span{
    font-size:.82rem !important;
  }

  .official-card p{
    font-size:.75rem !important;
  }

  .image-card img,
  .image-card::after{
    height:124px !important;
  }

  .image-card img + div,
  .image-card > div{
    padding:14px 15px 16px !important;
  }

  .image-card h3{
    font-size:.98rem !important;
  }

  .image-card p{
    font-size:.82rem !important;
  }

  .download-card{
    padding:14px !important;
    gap:10px !important;
    grid-template-columns:38px minmax(0,1fr) !important;
  }

  .download-card .icon{
    width:38px !important;
    height:38px !important;
    border-radius:13px !important;
    font-size:1rem !important;
  }

  .download-card h3{
    font-size:.95rem !important;
  }

  .download-card p{
    font-size:.80rem !important;
  }

  .download-card .btn,
  .download-card .btn-small,
  .download-card .btn-primary{
    height:36px !important;
    min-height:36px !important;
    font-size:.74rem !important;
  }
}

@media (max-width: 380px){
  .brand{
    max-width:calc(100vw - 64px) !important;
  }

  .brand strong{
    font-size:.68rem !important;
  }

  .brand small{
    font-size:.50rem !important;
  }

  .page-hero{
    min-height:166px !important;
  }

  .page-hero h1{
    font-size:1.5rem !important;
  }

  .page-hero p{
    font-size:.82rem !important;
  }

  .official-card img{
    width:70px !important;
    height:70px !important;
  }

  .image-card img,
  .image-card::after{
    height:116px !important;
  }
}

/* ===== Final Emergency Card Refinement ===== */
/* Compact, cleaner, government-service style emergency panel. */
.hero-emergency-card,
.hero-emergency-card.emergency-card-alt{
  width: min(360px, calc(100% - 40px)) !important;
  padding: 15px 15px 14px !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 36px rgba(7,25,58,.16), inset 0 1px 0 rgba(255,255,255,.82) !important;
}

.hero-emergency-card::before,
.hero-emergency-card.emergency-card-alt::before{
  height: 5px !important;
  border-radius: 22px 22px 0 0 !important;
}

.hero-emergency-card.emergency-card-alt::after{
  border-radius: 22px !important;
  opacity: .55 !important;
}

.emergency-card-top{
  gap: 8px !important;
  margin-bottom: 9px !important;
}

.emergency-pill,
.emergency-pill-live{
  padding: 6px 10px !important;
  gap: 6px !important;
  font-size: .68rem !important;
  letter-spacing: .035em !important;
}

.emergency-dot{
  width: 8px !important;
  height: 8px !important;
}

.emergency-status,
.emergency-status-alert{
  min-width: auto !important;
  padding: 6px 9px !important;
  font-size: .70rem !important;
}

.emergency-main-row{
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}

.hero-emergency-card strong,
.emergency-card-alt strong{
  font-size: 1.02rem !important;
  margin-bottom: 6px !important;
  line-height: 1.15 !important;
}

.hero-hotline-number,
.emergency-card-alt .hero-hotline-number{
  font-size: 1.82rem !important;
  line-height: 1 !important;
  margin-bottom: 7px !important;
  letter-spacing: -.025em !important;
}

.emergency-siren-badge{
  width: 56px !important;
  height: 56px !important;
  box-shadow: 0 10px 20px rgba(214,40,57,.18), inset 0 -7px 14px rgba(150,25,33,.14) !important;
}

.emergency-siren-badge i{
  font-size: .72rem !important;
}

.emergency-siren-badge span{
  inset: -6px !important;
  border-width: 1.5px !important;
}

.hero-emergency-card p,
.emergency-card-alt p{
  font-size: .84rem !important;
  line-height: 1.42 !important;
  margin-bottom: 10px !important;
}

.hero-emergency-grid,
.emergency-card-alt .hero-emergency-grid{
  gap: 8px !important;
  margin-bottom: 9px !important;
}

.hero-emergency-item,
.emergency-card-alt .hero-emergency-item{
  padding: 9px 8px !important;
  border-radius: 13px !important;
}

.hero-emergency-item label{
  margin-bottom: 4px !important;
  font-size: .58rem !important;
  letter-spacing: .045em !important;
}

.hero-emergency-item span{
  font-size: .92rem !important;
}

.emergency-action-strip{
  gap: 8px !important;
  padding-top: 0 !important;
}

.emergency-action-label{
  font-size: .64rem !important;
  letter-spacing: .06em !important;
}

.emergency-action-chip{
  padding: 6px 10px !important;
  font-size: .66rem !important;
}

@media (max-width: 1100px){
  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{
    width: min(340px, calc(100% - 32px)) !important;
    right: 4% !important;
  }

  .hero-hotline-number,
  .emergency-card-alt .hero-hotline-number{
    font-size: 1.68rem !important;
  }

  .emergency-siren-badge{
    width: 52px !important;
    height: 52px !important;
  }
}

@media (max-width: 640px){
  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{
    width: calc(100% - 28px) !important;
    margin: 12px 14px 0 !important;
    padding: 13px 13px 12px !important;
    border-radius: 18px !important;
  }

  .hero-emergency-card::before,
  .hero-emergency-card.emergency-card-alt::before{
    height: 4px !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .emergency-card-top{
    gap: 7px !important;
    margin-bottom: 8px !important;
  }

  .emergency-pill,
  .emergency-pill-live{
    padding: 5px 8px !important;
    font-size: .62rem !important;
    white-space: nowrap !important;
  }

  .emergency-status,
  .emergency-status-alert{
    padding: 5px 8px !important;
    font-size: .64rem !important;
    white-space: nowrap !important;
  }

  .emergency-main-row{
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
  }

  .hero-emergency-card strong,
  .emergency-card-alt strong{
    font-size: .95rem !important;
    margin-bottom: 5px !important;
  }

  .hero-hotline-number,
  .emergency-card-alt .hero-hotline-number{
    font-size: 1.48rem !important;
    margin-bottom: 6px !important;
  }

  .hero-emergency-card p,
  .emergency-card-alt p{
    font-size: .78rem !important;
    line-height: 1.36 !important;
    margin-bottom: 9px !important;
  }

  .emergency-siren-badge{
    width: 46px !important;
    height: 46px !important;
    margin-left: 0 !important;
  }

  .emergency-siren-badge i{
    font-size: .62rem !important;
  }

  .hero-emergency-grid,
  .emergency-card-alt .hero-emergency-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-bottom: 8px !important;
  }

  .hero-emergency-item,
  .emergency-card-alt .hero-emergency-item{
    text-align: center !important;
    padding: 8px 5px !important;
    border-radius: 12px !important;
  }

  .hero-emergency-item label{
    font-size: .50rem !important;
    margin-bottom: 3px !important;
  }

  .hero-emergency-item span{
    font-size: .82rem !important;
  }

  .emergency-action-strip{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .emergency-action-label{
    font-size: .54rem !important;
  }

  .emergency-action-chip{
    padding: 5px 8px !important;
    font-size: .56rem !important;
  }
}

@media (max-width: 390px){
  .emergency-pill,
  .emergency-pill-live{
    font-size: .56rem !important;
    padding: 5px 7px !important;
  }

  .emergency-status,
  .emergency-status-alert{
    font-size: .58rem !important;
    padding: 5px 7px !important;
  }

  .hero-hotline-number,
  .emergency-card-alt .hero-hotline-number{
    font-size: 1.34rem !important;
  }

  .emergency-siren-badge{
    width: 42px !important;
    height: 42px !important;
  }

  .emergency-action-label{
    display: none !important;
  }

  .emergency-action-chip{
    width: 100% !important;
  }
}

/* 2026-06-29 FINAL MOBILE BALANCE PATCH
   Scope: mobile header/logo, hero spacing, emergency information card only.
   Purpose: prevent oversized/clipped mobile UI while preserving desktop design/content. */
@media (max-width: 640px){
  body{overflow-x:hidden;}

  .site-header{
    padding: 4px 0 !important;
    background: rgba(255,255,255,.94) !important;
  }

  .navbar.container{
    width: calc(100% - 18px) !important;
  }

  .navbar{
    min-height: 54px !important;
    gap: 8px !important;
    padding: 5px 0 !important;
  }

  .brand{
    max-width: calc(100vw - 72px) !important;
    min-height: 44px !important;
    padding: 4px 8px 4px 5px !important;
    gap: 7px !important;
    border-radius: 14px !important;
  }

  .brand img{
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  .brand strong{
    font-size: .78rem !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
  }

  .brand small{
    font-size: .58rem !important;
    line-height: 1 !important;
    margin-top: 1px !important;
  }

  .menu-toggle{
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 12px !important;
    gap: 4px !important;
  }

  .menu-toggle span{
    width: 18px !important;
    height: 2px !important;
  }

  .menu-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg) !important;}
  .menu-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg) !important;}

  .nav-menu{
    left: 10px !important;
    right: 10px !important;
    top: calc(100% + 6px) !important;
    padding: 9px !important;
    gap: 6px !important;
    border-radius: 16px !important;
    max-height: calc(100vh - 74px) !important;
    z-index: 9999 !important;
  }

  .nav-link{
    padding: 9px 11px !important;
    font-size: .82rem !important;
    border-radius: 11px !important;
    line-height: 1.15 !important;
  }

  .hero{
    min-height: auto !important;
    display: block !important;
  }

  .hero-content{
    padding: 58px 0 34px !important;
  }

  .hero .eyebrow{
    max-width: 100% !important;
    font-size: .60rem !important;
    padding: 5px 9px !important;
    letter-spacing: .08em !important;
    margin-bottom: 10px !important;
  }

  .hero h1{
    font-size: clamp(1.72rem, 8.6vw, 2.05rem) !important;
    line-height: 1.08 !important;
    margin-bottom: 8px !important;
    max-width: 100% !important;
  }

  .hero p{
    font-size: .86rem !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
  }

  .hero-actions{
    margin-top: 16px !important;
    gap: 8px !important;
    max-width: 86% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-actions .btn{
    min-height: 38px !important;
    padding: 9px 14px !important;
    font-size: .82rem !important;
    border-radius: 18px !important;
  }

  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{
    position: relative !important;
    width: calc(100% - 28px) !important;
    max-width: 340px !important;
    margin: 0 auto 22px !important;
    padding: 12px 12px 13px !important;
    border-radius: 17px !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .hero-emergency-card::before,
  .hero-emergency-card.emergency-card-alt::before{
    height: 3px !important;
  }

  .emergency-card-top{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin-bottom: 9px !important;
  }

  .emergency-pill,
  .emergency-pill-live{
    min-width: 0 !important;
    max-width: calc(100% - 94px) !important;
    padding: 5px 8px !important;
    font-size: .58rem !important;
    line-height: 1 !important;
    letter-spacing: .035em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .emergency-dot{
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
  }

  .emergency-status,
  .emergency-status-alert{
    flex: 0 0 auto !important;
    padding: 5px 8px !important;
    font-size: .62rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .emergency-main-row{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 40px !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .hero-emergency-card strong,
  .emergency-card-alt strong{
    font-size: .86rem !important;
    margin-bottom: 3px !important;
  }

  .hero-hotline-number,
  .emergency-card-alt .hero-hotline-number{
    font-size: 1.28rem !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    letter-spacing: -.04em !important;
    white-space: nowrap !important;
  }

  .emergency-siren-badge{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  .emergency-siren-badge i{
    font-size: .56rem !important;
  }

  .hero-emergency-card p,
  .emergency-card-alt p{
    font-size: .70rem !important;
    line-height: 1.32 !important;
    margin: 8px 0 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .hero-emergency-grid,
  .emergency-card-alt .hero-emergency-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  .hero-emergency-item,
  .emergency-card-alt .hero-emergency-item{
    padding: 7px 4px !important;
    min-height: 46px !important;
    border-radius: 11px !important;
  }

  .hero-emergency-item label{
    font-size: .46rem !important;
    margin-bottom: 2px !important;
    letter-spacing: .04em !important;
  }

  .hero-emergency-item span{
    font-size: .78rem !important;
    line-height: 1 !important;
  }

  .emergency-action-strip{
    display: none !important;
  }

  .gradient-band.section-pad{
    padding-top: 28px !important;
  }
}

@media (max-width: 390px){
  .navbar.container{width: calc(100% - 14px) !important;}
  .brand{max-width: calc(100vw - 66px) !important;padding-right: 6px !important;}
  .brand img{width: 32px !important;height: 32px !important;}
  .brand strong{font-size: .74rem !important;}
  .brand small{display:none !important;}
  .menu-toggle{width: 36px !important;height: 36px !important;flex-basis: 36px !important;}
  .hero-content{padding-top: 54px !important;}
  .hero-actions{max-width: 80% !important;}
  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{width: calc(100% - 34px) !important;max-width: 322px !important;padding: 11px !important;}
  .emergency-pill,
  .emergency-pill-live{max-width: calc(100% - 84px) !important;font-size: .52rem !important;padding: 5px 7px !important;}
  .emergency-status,
  .emergency-status-alert{font-size: .56rem !important;padding: 5px 7px !important;}
  .hero-hotline-number,
  .emergency-card-alt .hero-hotline-number{font-size: 1.18rem !important;}
  .emergency-siren-badge{width: 36px !important;height: 36px !important;min-width: 36px !important;}
}


/* 2026-06-30 v11 mobile header + hero + emergency centering balance fix */
@media (max-width: 480px){
  .site-header{position:sticky;top:0}
  .navbar.container{width:calc(100% - 16px) !important}
  .navbar{
    min-height:64px !important;
    gap:10px !important;
    padding:6px 0 !important;
  }

  .brand{
    max-width:calc(100vw - 76px) !important;
    padding:6px 8px !important;
    gap:8px !important;
    border-radius:16px !important;
  }
  .brand img{
    width:36px !important;
    height:36px !important;
    border-radius:12px !important;
  }
  .brand strong{
    font-size:.82rem !important;
    line-height:1.06 !important;
  }
  .brand small{
    display:block !important;
    font-size:.60rem !important;
    line-height:1.05 !important;
  }

  .menu-toggle{
    width:38px !important;
    height:38px !important;
    flex:0 0 38px !important;
    border-radius:13px !important;
  }
  .menu-toggle span{width:16px !important}

  .hero{
    min-height:auto !important;
    padding-bottom:10px !important;
  }
  .hero-content{
    padding:24px 0 14px !important;
    max-width:100% !important;
  }
  .hero .eyebrow{
    margin-bottom:10px !important;
    font-size:.60rem !important;
    padding:6px 10px !important;
  }
  .hero h1{
    font-size:clamp(1.9rem,9vw,2.2rem) !important;
    line-height:1.06 !important;
    margin-bottom:10px !important;
  }
  .hero p{
    font-size:.88rem !important;
    line-height:1.46 !important;
    margin-bottom:0 !important;
  }
  .hero-actions{
    margin-top:16px !important;
    margin-left:0 !important;
    margin-right:0 !important;
    max-width:100% !important;
    gap:9px !important;
  }
  .hero-actions .btn{
    min-height:40px !important;
    padding:10px 14px !important;
    font-size:.84rem !important;
    border-radius:18px !important;
  }

  .hero-card,
  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    inset:auto !important;
    display:block !important;
    width:min(100%, 330px) !important;
    max-width:330px !important;
    margin:12px auto 14px !important;
    padding:14px 14px 15px !important;
    border-radius:18px !important;
    text-align:left !important;
  }

  .emergency-card-top{
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    margin-bottom:10px !important;
  }
  .emergency-pill,
  .emergency-pill-live,
  .emergency-status,
  .emergency-status-alert{
    max-width:100% !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
  .emergency-pill,
  .emergency-pill-live{
    padding:7px 12px !important;
    font-size:.66rem !important;
    line-height:1.05 !important;
  }
  .emergency-status,
  .emergency-status-alert{
    padding:6px 12px !important;
    font-size:.76rem !important;
  }

  .emergency-main-row{
    grid-template-columns:minmax(0,1fr) 48px !important;
    gap:10px !important;
    align-items:center !important;
  }
  .hero-emergency-card strong,
  .emergency-card-alt strong{
    font-size:.92rem !important;
    margin-bottom:4px !important;
  }
  .hero-hotline-number,
  .emergency-card-alt .hero-hotline-number{
    font-size:1.42rem !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }
  .emergency-siren-badge{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
  }
  .hero-emergency-card p,
  .emergency-card-alt p{
    margin:9px 0 10px !important;
    font-size:.76rem !important;
    line-height:1.4 !important;
    -webkit-line-clamp:3 !important;
  }
  .hero-emergency-grid,
  .emergency-card-alt .hero-emergency-grid{
    gap:7px !important;
    justify-items:stretch !important;
  }
  .hero-emergency-item,
  .emergency-card-alt .hero-emergency-item{
    padding:8px 5px !important;
    min-height:48px !important;
    text-align:center !important;
  }
  .hero-emergency-item label{font-size:.50rem !important}
  .hero-emergency-item span{font-size:.84rem !important}

  .gradient-band.section-pad{
    padding-top:16px !important;
    padding-bottom:22px !important;
  }
}

@media (max-width: 390px){
  .brand{max-width:calc(100vw - 72px) !important}
  .brand img{width:34px !important;height:34px !important}
  .brand strong{font-size:.78rem !important}
  .brand small{font-size:.56rem !important}
  .menu-toggle{width:36px !important;height:36px !important;flex-basis:36px !important}

  .hero-content{padding-top:20px !important;padding-bottom:12px !important}
  .hero h1{font-size:1.82rem !important}
  .hero p{font-size:.84rem !important}
  .hero-actions .btn{font-size:.80rem !important}

  .hero-card,
  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{
    width:calc(100% - 18px) !important;
    max-width:320px !important;
    margin-top:10px !important;
    padding:13px 12px 14px !important;
  }
  .hero-hotline-number,
  .emergency-card-alt .hero-hotline-number{font-size:1.28rem !important}
  .emergency-siren-badge{width:44px !important;height:44px !important;min-width:44px !important}
}


/* 2026-06-30 v12 homepage quick-stats modernization + reduced gap */
.gradient-band,
.gradient-band.section-pad{
  position: relative;
  overflow: hidden;
  padding: 26px 0 38px !important;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.12), transparent 13rem),
    radial-gradient(circle at 86% 22%, rgba(247,201,72,.20), transparent 16rem),
    radial-gradient(circle at 70% 88%, rgba(22,182,135,.18), transparent 15rem),
    linear-gradient(135deg, #071f3f 0%, #1149a8 52%, #0cb9d7 100%) !important;
}

.gradient-band::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.18));
}

.gradient-band::after{
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  right: -120px;
  bottom: -170px;
  background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0) 70%);
  filter: blur(4px);
  animation: statsOrbFloat 12s ease-in-out infinite;
}

.stats-grid{
  position: relative;
  z-index: 2;
  gap: 20px;
  margin-top: 0 !important;
}

.stats-grid div{
  position: relative;
  overflow: hidden;
  min-height: 120px;
  padding: 22px 22px 20px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.10)) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 42px rgba(2, 22, 52, .20) !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
  animation: statsCardFloat 7.5s ease-in-out infinite;
}

.stats-grid div:nth-child(2){animation-delay: .6s}
.stats-grid div:nth-child(3){animation-delay: 1.2s}
.stats-grid div:nth-child(4){animation-delay: 1.8s}

.stats-grid div::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #72d7ff, #ffffff, #f7c948);
  opacity: .95;
}

.stats-grid div::after{
  content: "";
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
  transition: transform .28s ease, opacity .28s ease;
  opacity: .8;
}

.stats-grid div:hover{
  transform: translateY(-7px);
  box-shadow: 0 26px 56px rgba(2, 22, 52, .28) !important;
  border-color: rgba(255,255,255,.38) !important;
  background: linear-gradient(160deg, rgba(255,255,255,.24), rgba(255,255,255,.14)) !important;
}

.stats-grid div:hover::after{
  transform: scale(1.08);
  opacity: 1;
}

.stats-grid strong{
  display: block;
  margin-bottom: 7px;
  color: #ffffff !important;
  font-size: 1.16rem !important;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.stats-grid span{
  color: rgba(237, 247, 255, .92) !important;
  font-size: .95rem !important;
  line-height: 1.45;
}

@keyframes statsCardFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes statsOrbFloat {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(-14px,-10px,0); }
}

@media (max-width: 900px){
  .gradient-band,
  .gradient-band.section-pad{
    padding: 18px 0 28px !important;
  }

  .stats-grid{gap: 14px !important;}

  .stats-grid div{
    min-height: 108px;
    padding: 18px 18px 16px !important;
    border-radius: 20px !important;
  }

  .stats-grid strong{font-size: 1.02rem !important;}
  .stats-grid span{font-size: .88rem !important;}
}

@media (max-width: 480px){
  .gradient-band,
  .gradient-band.section-pad{
    padding: 10px 0 20px !important;
  }

  .gradient-band::before{background-size: 24px 24px;}

  .stats-grid{
    gap: 12px !important;
  }

  .stats-grid div{
    min-height: auto;
    padding: 16px 16px 15px !important;
    border-radius: 18px !important;
    animation-duration: 6.5s;
  }

  .stats-grid strong{
    font-size: 1rem !important;
    margin-bottom: 5px;
  }

  .stats-grid span{
    font-size: .84rem !important;
    line-height: 1.4;
  }
}

@media (prefers-reduced-motion: reduce){
  .gradient-band::after,
  .stats-grid div{
    animation: none !important;
  }
}


/* 2026-06-30 v13 footer spacing balance fix */
.site-footer{
  overflow:hidden;
}

.footer-grid{
  grid-template-columns:minmax(280px,1.25fr) minmax(240px,1fr) minmax(220px,.95fr) !important;
  gap:56px !important;
  align-items:start !important;
  padding:64px 0 54px !important;
}

.footer-grid > div{
  min-width:0;
}

.footer-brand{
  margin-bottom:18px !important;
  gap:14px !important;
}

.footer-brand strong{
  font-size:1.18rem;
  line-height:1.1;
}

.site-footer h3{
  margin-bottom:16px !important;
}

.site-footer p,
.site-footer a,
.footer-links li{
  line-height:1.6;
}

.footer-links{
  gap:10px !important;
}

.footer-links li{
  list-style:none;
}

.footer-email{
  word-break:break-word;
}

@media (max-width: 1100px){
  .footer-grid{
    grid-template-columns:repeat(2,minmax(240px,1fr)) !important;
    gap:34px 42px !important;
    padding:56px 0 46px !important;
  }
}

@media (max-width: 680px){
  .footer-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
    padding:42px 0 34px !important;
  }

  .footer-brand{
    margin-bottom:14px !important;
  }
}


/* 2026-06-30 v14 About page spacing balance fix */
body[data-page="about.html"] main > section.section-pad{
  padding-top:64px !important;
  padding-bottom:64px !important;
}

body[data-page="about.html"] main > section.section-pad + section.section-pad,
body[data-page="about.html"] main > section.section-pad + section.soft-bg,
body[data-page="about.html"] main > section.soft-bg{
  padding-top:46px !important;
  padding-bottom:60px !important;
}

body[data-page="about.html"] .split-layout{
  gap:34px !important;
  align-items:center !important;
}

body[data-page="about.html"] .card-grid.two{
  gap:22px !important;
}

body[data-page="about.html"] .info-card{
  padding:24px !important;
}

@media (max-width:900px){
  body[data-page="about.html"] main > section.section-pad{
    padding-top:46px !important;
    padding-bottom:44px !important;
  }

  body[data-page="about.html"] main > section.section-pad + section.section-pad,
  body[data-page="about.html"] main > section.section-pad + section.soft-bg,
  body[data-page="about.html"] main > section.soft-bg{
    padding-top:34px !important;
    padding-bottom:44px !important;
  }

  body[data-page="about.html"] .split-layout{
    gap:24px !important;
  }
}

@media (max-width:480px){
  body[data-page="about.html"] main > section.section-pad{
    padding-top:34px !important;
    padding-bottom:32px !important;
  }

  body[data-page="about.html"] main > section.section-pad + section.section-pad,
  body[data-page="about.html"] main > section.section-pad + section.soft-bg,
  body[data-page="about.html"] main > section.soft-bg{
    padding-top:24px !important;
    padding-bottom:34px !important;
  }

  body[data-page="about.html"] .card-grid.two{
    gap:14px !important;
  }

  body[data-page="about.html"] .info-card{
    padding:20px !important;
  }
}


/* 2026-06-30 v15 Services + Transparency modernization */
@keyframes civicCardFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes civicGlowPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(21,94,239,.16); }
  50% { box-shadow: 0 0 0 10px rgba(21,94,239,0); }
}

body[data-page="services.html"] .accordion,
body[data-page="transparency.html"] .document-list{
  gap:20px !important;
}

body[data-page="services.html"] .accordion-item,
body[data-page="transparency.html"] .doc-row{
  position:relative;
  overflow:hidden;
  border-radius:28px !important;
  border:1px solid rgba(21,94,239,.10) !important;
  background:linear-gradient(145deg, rgba(255,255,255,.94), rgba(245,250,255,.92)) !important;
  box-shadow:0 18px 46px rgba(6,31,63,.09) !important;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}

body[data-page="services.html"] .accordion-item::before,
body[data-page="transparency.html"] .doc-row::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  background:linear-gradient(90deg,#2f66ff,#19c1e8,#21c38b);
}

body[data-page="services.html"] .accordion-item::after,
body[data-page="transparency.html"] .doc-row::after{
  content:"";
  position:absolute;
  right:-38px;
  top:-38px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(21,94,239,.10), rgba(21,94,239,0) 72%);
  opacity:.9;
  transition:transform .28s ease, opacity .28s ease;
}

body[data-page="services.html"] .accordion-item:hover,
body[data-page="transparency.html"] .doc-row:hover,
body[data-page="services.html"] .accordion-item.open{
  transform:translateY(-6px) !important;
  border-color:rgba(21,94,239,.18) !important;
  box-shadow:0 26px 58px rgba(6,31,63,.14) !important;
}

body[data-page="services.html"] .accordion-item:hover::after,
body[data-page="transparency.html"] .doc-row:hover::after,
body[data-page="services.html"] .accordion-item.open::after{
  transform:scale(1.08);
  opacity:1;
}

body[data-page="services.html"] .accordion-trigger{
  position:relative;
  padding:24px 26px !important;
  background:transparent !important;
  color:#0a285d !important;
  gap:18px;
}

body[data-page="services.html"] .accordion-trigger span{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:1.08rem;
  line-height:1.2;
}

body[data-page="services.html"] .accordion-trigger span::before{
  content:"";
  width:14px;
  height:14px;
  border-radius:50%;
  flex:0 0 14px;
  background:linear-gradient(135deg,#2f66ff,#1ac3e8);
  box-shadow:0 0 0 7px rgba(21,94,239,.10);
  animation:civicGlowPulse 2.8s ease-in-out infinite;
}

body[data-page="services.html"] .accordion-trigger b{
  width:42px !important;
  height:42px !important;
  min-width:42px;
  display:grid !important;
  place-items:center;
  border-radius:16px !important;
  background:linear-gradient(135deg, rgba(47,102,255,.12), rgba(26,195,232,.18)) !important;
  color:#1e57f1 !important;
  font-size:1.55rem !important;
  font-weight:800;
  transition:transform .28s ease, background .28s ease, color .28s ease, box-shadow .28s ease;
  box-shadow:inset 0 0 0 1px rgba(21,94,239,.06);
}

body[data-page="services.html"] .accordion-trigger:hover b,
body[data-page="services.html"] .accordion-item.open .accordion-trigger b{
  transform:rotate(180deg) scale(1.04);
  background:linear-gradient(135deg,#2f66ff,#19c1e8) !important;
  color:white !important;
  box-shadow:0 14px 30px rgba(21,94,239,.24);
}

body[data-page="services.html"] .accordion-content{
  background:linear-gradient(180deg, rgba(247,251,255,.72), rgba(240,252,248,.82));
}

body[data-page="services.html"] .accordion-content.open{
  border-top:1px solid rgba(21,94,239,.08);
}

body[data-page="services.html"] .accordion-content p{
  padding:18px 26px 16px !important;
  color:#5a6d87 !important;
  font-size:.98rem;
  line-height:1.65;
}

body[data-page="services.html"] .service-meta{
  padding:0 26px 26px !important;
  gap:14px !important;
}

body[data-page="services.html"] .service-meta span{
  position:relative;
  padding:16px 16px 16px 18px !important;
  border-radius:18px !important;
  background:linear-gradient(135deg, rgba(255,255,255,.88), rgba(240,247,255,.96)) !important;
  border:1px solid rgba(21,94,239,.08) !important;
  box-shadow:0 10px 24px rgba(6,31,63,.05);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

body[data-page="services.html"] .service-meta span::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,#2f66ff,#21c38b);
}

body[data-page="services.html"] .service-meta span:hover{
  transform:translateY(-3px);
  border-color:rgba(21,94,239,.14) !important;
  box-shadow:0 16px 28px rgba(6,31,63,.08);
}

body[data-page="transparency.html"] .doc-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center !important;
  gap:22px !important;
  padding:24px 28px !important;
}

body[data-page="transparency.html"] .doc-row > div{
  position:relative;
  padding-left:72px;
}

body[data-page="transparency.html"] .doc-row > div::before{
  content:"↓";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:1.25rem;
  font-weight:800;
  color:#155eef;
  background:linear-gradient(135deg, rgba(47,102,255,.14), rgba(26,195,232,.20));
  box-shadow:0 14px 30px rgba(21,94,239,.12);
}

body[data-page="transparency.html"] .doc-row strong{
  font-size:1.18rem !important;
  margin-bottom:6px;
  color:#0a285d !important;
  line-height:1.18;
}

body[data-page="transparency.html"] .doc-row span{
  color:#60748e !important;
  font-size:.97rem !important;
  line-height:1.6;
}

body[data-page="transparency.html"] .doc-row .btn,
body[data-page="transparency.html"] .doc-row .btn-small{
  width:auto !important;
  min-width:138px;
  min-height:46px;
  padding:11px 18px !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,#2f66ff,#18bfdc) !important;
  color:#fff !important;
  font-weight:800 !important;
  box-shadow:0 14px 28px rgba(21,94,239,.20);
  border:0 !important;
  transition:transform .24s ease, box-shadow .24s ease, filter .24s ease;
}

body[data-page="transparency.html"] .doc-row .btn:hover,
body[data-page="transparency.html"] .doc-row .btn-small:hover{
  transform:translateY(-2px);
  filter:saturate(1.05);
  box-shadow:0 18px 34px rgba(21,94,239,.28);
}

body[data-page="services.html"] .accordion-item:nth-child(odd),
body[data-page="transparency.html"] .doc-row:nth-child(odd){
  animation:civicCardFloat 7.2s ease-in-out infinite;
}
body[data-page="services.html"] .accordion-item:nth-child(even),
body[data-page="transparency.html"] .doc-row:nth-child(even){
  animation:civicCardFloat 7.2s ease-in-out infinite;
  animation-delay:1.2s;
}

@media (max-width: 900px){
  body[data-page="services.html"] .accordion,
  body[data-page="transparency.html"] .document-list{gap:16px !important;}

  body[data-page="services.html"] .accordion-trigger{padding:21px 20px !important;}
  body[data-page="services.html"] .accordion-trigger span{font-size:1rem;gap:12px;}
  body[data-page="services.html"] .accordion-content p{padding:16px 20px 14px !important;}
  body[data-page="services.html"] .service-meta{padding:0 20px 20px !important;grid-template-columns:1fr !important;}

  body[data-page="transparency.html"] .doc-row{padding:20px 22px !important;gap:16px !important;}
  body[data-page="transparency.html"] .doc-row > div{padding-left:64px;}
  body[data-page="transparency.html"] .doc-row > div::before{width:46px;height:46px;border-radius:16px;}
  body[data-page="transparency.html"] .doc-row strong{font-size:1.08rem !important;}
}

@media (max-width: 640px){
  body[data-page="services.html"] .accordion-item,
  body[data-page="transparency.html"] .doc-row{border-radius:22px !important;}

  body[data-page="services.html"] .accordion-trigger{padding:18px 16px !important;gap:12px;}
  body[data-page="services.html"] .accordion-trigger span{font-size:.95rem;gap:10px;}
  body[data-page="services.html"] .accordion-trigger span::before{width:12px;height:12px;flex-basis:12px;box-shadow:0 0 0 6px rgba(21,94,239,.10);}
  body[data-page="services.html"] .accordion-trigger b{width:38px !important;height:38px !important;min-width:38px;border-radius:14px !important;font-size:1.35rem !important;}
  body[data-page="services.html"] .accordion-content p{padding:14px 16px 12px !important;font-size:.92rem;}
  body[data-page="services.html"] .service-meta{padding:0 16px 16px !important;gap:10px !important;}
  body[data-page="services.html"] .service-meta span{padding:14px 14px 14px 16px !important;border-radius:16px !important;font-size:.90rem;}

  body[data-page="transparency.html"] .doc-row{
    grid-template-columns:1fr !important;
    align-items:flex-start !important;
    padding:18px 16px !important;
    gap:14px !important;
  }
  body[data-page="transparency.html"] .doc-row > div{padding-left:56px;}
  body[data-page="transparency.html"] .doc-row > div::before{width:42px;height:42px;border-radius:14px;font-size:1.05rem;}
  body[data-page="transparency.html"] .doc-row strong{font-size:1rem !important;}
  body[data-page="transparency.html"] .doc-row span{font-size:.89rem !important;line-height:1.55;}
  body[data-page="transparency.html"] .doc-row .btn,
  body[data-page="transparency.html"] .doc-row .btn-small{width:100% !important;min-width:0;min-height:42px;font-size:.88rem !important;border-radius:14px !important;}
}

@media (prefers-reduced-motion: reduce){
  body[data-page="services.html"] .accordion-item,
  body[data-page="transparency.html"] .doc-row,
  body[data-page="services.html"] .accordion-trigger span::before{
    animation:none !important;
  }
}


/* 2026-06-30 v16 footer logo spacing + single-line email fix */
.footer-grid{
  grid-template-columns:minmax(320px,1.25fr) minmax(300px,1fr) minmax(220px,.95fr) !important;
  gap:72px !important;
}

.footer-grid > div:first-child{
  max-width:340px;
}

.footer-brand{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  margin-bottom:18px !important;
  white-space:nowrap;
}

.footer-brand img{
  width:60px !important;
  height:60px !important;
  flex:0 0 60px !important;
}

.footer-brand strong{
  display:block;
  font-size:1.2rem !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
}

.site-footer p{
  max-width:100%;
}

.footer-email{
  display:inline !important;
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

@media (max-width: 1180px){
  .footer-grid{
    grid-template-columns:minmax(260px,1fr) minmax(260px,1fr) !important;
    gap:40px 48px !important;
  }

  .footer-grid > div:first-child{
    max-width:none;
  }
}

@media (max-width: 820px){
  .footer-grid{
    grid-template-columns:1fr !important;
    gap:26px !important;
  }

  .footer-brand{
    white-space:normal;
  }

  .footer-brand strong{
    white-space:normal !important;
  }

  .footer-email{
    white-space:normal !important;
  }
}


/* 2026-06-30 v17 desktop hero top-gap reduction + footer redesign */
@media (min-width: 901px){
  .hero{
    min-height: 630px !important;
  }

  .hero-content{
    padding: 34px 0 86px !important;
    max-width: 760px !important;
  }

  .hero .eyebrow{
    margin-bottom: 14px !important;
  }

  .hero h1{
    margin-bottom: 14px !important;
  }

  .hero p{
    max-width: 640px !important;
  }

  .hero-actions{
    margin-top: 24px !important;
  }

  .hero-card,
  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{
    bottom: 36px !important;
  }
}

@media (min-width: 1280px){
  .hero{
    min-height: 600px !important;
  }

  .hero-content{
    padding: 26px 0 80px !important;
  }
}

.site-footer{
  position: relative;
  background:
    radial-gradient(circle at 92% -8%, rgba(247,201,72,.14), transparent 13rem),
    radial-gradient(circle at 9% 108%, rgba(21,94,239,.18), transparent 18rem),
    linear-gradient(135deg, #051c3b 0%, #0a3369 50%, #095c67 100%) !important;
}

.site-footer::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 90%);
}

.footer-grid{
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(360px, 1.35fr) minmax(300px, 1fr) minmax(240px, .92fr) !important;
  gap: 28px !important;
  align-items: stretch !important;
  padding: 62px 0 48px !important;
}

.footer-grid > div{
  position: relative;
  min-width: 0;
  padding: 24px 26px !important;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 42px rgba(3, 18, 40, .18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.footer-grid > div:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 24px 50px rgba(3, 18, 40, .24);
}

.footer-grid > div:first-child{
  max-width: none !important;
}

.footer-brand{
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
  white-space: nowrap;
}

.footer-brand img{
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
  border-radius: 18px !important;
}

.footer-brand strong{
  display: block;
  font-size: 1.2rem !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  color: #ffffff !important;
}

.site-footer h3{
  color: #ffffff !important;
  margin-bottom: 14px !important;
  font-size: 1.14rem !important;
  letter-spacing: -.02em;
}

.site-footer p,
.site-footer a,
.footer-links li{
  color: #e5f0ff !important;
  line-height: 1.62;
}

.footer-links{
  gap: 10px !important;
}

.footer-links a{
  display: inline-flex;
  position: relative;
  padding-left: 14px;
}

.footer-links a::before{
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #58d8ff, #f7c948);
}

.footer-links a:hover{
  color: #ffffff !important;
}

.footer-email{
  display: inline !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.footer-bottom{
  position: relative;
  z-index: 1;
  padding: 16px 20px 22px !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  color: #d8e9ff !important;
}

@media (max-width: 1180px){
  .footer-grid{
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    gap: 22px !important;
    padding: 54px 0 42px !important;
  }
}

@media (max-width: 820px){
  .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 40px 0 30px !important;
  }

  .footer-grid > div{
    padding: 20px 18px !important;
    border-radius: 20px;
  }

  .footer-brand{
    white-space: normal;
  }

  .footer-brand strong,
  .footer-email{
    white-space: normal !important;
  }
}


/* 2026-06-30 v18 desktop header logo restore + hero first-screen balance */
@media (min-width: 901px){
  .navbar{
    min-height: 76px !important;
    padding: 10px 0 !important;
    gap: 22px !important;
  }

  .brand{
    gap: 12px !important;
    padding: 9px 14px !important;
    border-radius: 20px !important;
    max-width: none !important;
  }

  .brand img{
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    flex: 0 0 52px !important;
  }

  .brand strong{
    font-size: 1rem !important;
    line-height: 1.06 !important;
    white-space: nowrap !important;
  }

  .brand small{
    display: block !important;
    font-size: .72rem !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
  }

  .hero{
    min-height: 680px !important;
  }

  .hero-content{
    padding: 54px 0 112px !important;
    max-width: 760px !important;
  }

  .hero .eyebrow{
    margin-bottom: 16px !important;
  }

  .hero h1{
    margin-bottom: 16px !important;
  }

  .hero p{
    max-width: 640px !important;
  }

  .hero-actions{
    margin-top: 26px !important;
  }

  .hero-card,
  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{
    bottom: 42px !important;
  }

  .gradient-band,
  .gradient-band.section-pad{
    padding-top: 18px !important;
    padding-bottom: 28px !important;
  }
}

@media (min-width: 1280px){
  .hero{
    min-height: 700px !important;
  }

  .hero-content{
    padding: 58px 0 118px !important;
  }
}


/* 2026-06-30 v19 clean professional footer correction
   Purpose: remove the boxed/card footer design and restore a clean spacious footer layout. */
.site-footer{
  position:relative !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 96% -18%, rgba(255,255,255,.14), transparent 17rem),
    linear-gradient(135deg, #061f3f 0%, #0b356f 54%, #075f55 100%) !important;
}

.site-footer::after{
  display:none !important;
}

.site-footer::before{
  content:"" !important;
  position:absolute !important;
  right:-140px !important;
  top:-170px !important;
  width:360px !important;
  height:360px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.11) !important;
  pointer-events:none !important;
}

.footer-grid{
  position:relative !important;
  z-index:1 !important;
  display:grid !important;
  grid-template-columns: minmax(330px, 1.15fr) minmax(320px, 1fr) minmax(220px, .8fr) !important;
  gap:72px !important;
  align-items:start !important;
  max-width:1100px !important;
  margin:0 auto !important;
  padding:62px 0 54px !important;
}

.footer-grid > div{
  padding:0 !important;
  margin:0 !important;
  max-width:none !important;
  min-width:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transform:none !important;
}

.footer-grid > div:hover{
  transform:none !important;
  box-shadow:none !important;
  border-color:transparent !important;
}

.footer-brand{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin:0 0 18px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  white-space:nowrap !important;
}

.footer-brand img{
  width:58px !important;
  height:58px !important;
  flex:0 0 58px !important;
  border-radius:16px !important;
  background:white !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
}

.footer-brand strong{
  display:block !important;
  color:#ffffff !important;
  font-size:1.25rem !important;
  font-weight:800 !important;
  line-height:1.12 !important;
  white-space:nowrap !important;
}

.site-footer h3{
  color:#ffffff !important;
  font-size:1.12rem !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  margin:0 0 16px !important;
  padding:0 !important;
}

.site-footer p{
  color:#dcebff !important;
  font-size:.98rem !important;
  line-height:1.55 !important;
  margin:0 !important;
  max-width:330px !important;
}

.site-footer a,
.footer-links li{
  color:#dcebff !important;
  font-size:.98rem !important;
  line-height:1.45 !important;
}

.footer-links{
  display:grid !important;
  gap:9px !important;
  padding:0 !important;
  margin:0 !important;
  list-style:none !important;
}

.footer-links a{
  display:inline-block !important;
  padding:0 !important;
  color:#dcebff !important;
  transition:color .2s ease, transform .2s ease !important;
}

.footer-links a::before{
  display:none !important;
}

.footer-links a:hover{
  color:#ffffff !important;
  transform:translateX(3px) !important;
}

.footer-email{
  display:inline !important;
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

.footer-bottom{
  position:relative !important;
  z-index:1 !important;
  padding:18px 20px !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
  color:#c7dcff !important;
  text-align:center !important;
  font-size:.92rem !important;
}

@media (max-width:1180px){
  .footer-grid{
    max-width:calc(100% - 40px) !important;
    grid-template-columns:1.1fr 1fr .8fr !important;
    gap:44px !important;
  }
}

@media (max-width:900px){
  .footer-grid{
    grid-template-columns:1fr 1fr !important;
    gap:34px 42px !important;
    padding:52px 0 44px !important;
  }

  .site-footer p{
    max-width:100% !important;
  }
}

@media (max-width:640px){
  .footer-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
    padding:42px 0 34px !important;
  }

  .footer-brand{
    white-space:normal !important;
  }

  .footer-brand img{
    width:52px !important;
    height:52px !important;
    flex-basis:52px !important;
  }

  .footer-brand strong{
    white-space:normal !important;
    font-size:1.12rem !important;
  }

  .footer-email{
    white-space:normal !important;
  }
}


/* 2026-06-30 v20 footer compact typography + spacing rebalance */
.site-footer .container.footer-grid{
  max-width: 1180px !important;
  grid-template-columns: minmax(320px, 1.2fr) minmax(290px, 1fr) minmax(220px, .82fr) !important;
  gap: 92px !important;
  padding: 56px 0 46px !important;
}

.site-footer .footer-grid > div{
  min-width: 0 !important;
}

.site-footer .footer-grid > div:first-child{
  max-width: 390px !important;
}

.site-footer .footer-brand{
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.site-footer .footer-brand img{
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
}

.site-footer .footer-brand strong{
  font-size: 1.08rem !important;
  line-height: 1.08 !important;
}

.site-footer h3{
  font-size: 1rem !important;
  margin-bottom: 12px !important;
}

.site-footer p,
.site-footer a,
.site-footer .footer-links li{
  font-size: .90rem !important;
  line-height: 1.45 !important;
}

.site-footer p{
  max-width: 100% !important;
}

.site-footer .footer-links{
  gap: 8px !important;
}

.site-footer .footer-email{
  white-space: nowrap !important;
}

.site-footer .footer-bottom{
  font-size: .88rem !important;
  padding: 16px 20px 18px !important;
}

@media (max-width: 1200px){
  .site-footer .container.footer-grid{
    max-width: calc(100% - 44px) !important;
    gap: 54px !important;
    grid-template-columns: minmax(280px, 1.1fr) minmax(260px, 1fr) minmax(200px, .82fr) !important;
  }
}

@media (max-width: 900px){
  .site-footer .container.footer-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 38px !important;
    padding: 46px 0 38px !important;
  }

  .site-footer .footer-grid > div:first-child{
    max-width: none !important;
  }
}

@media (max-width: 640px){
  .site-footer .container.footer-grid{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 38px 0 30px !important;
  }

  .site-footer .footer-brand img{
    width: 50px !important;
    height: 50px !important;
    flex-basis: 50px !important;
  }

  .site-footer .footer-brand strong{
    font-size: 1rem !important;
  }

  .site-footer p,
  .site-footer a,
  .site-footer .footer-links li{
    font-size: .92rem !important;
  }

  .site-footer .footer-email{
    white-space: normal !important;
  }
}


/* 2026-06-30 v21 global mobile page-hero gap reduction */
@media (max-width: 768px){
  .page-hero,
  .page-hero.section-pad-sm{
    min-height: 166px !important;
    padding: 24px 0 20px !important;
    display: flex !important;
    align-items: flex-end !important;
  }

  .page-hero .container{
    width: calc(100% - 24px) !important;
    margin: 0 auto !important;
  }

  .page-hero .eyebrow{
    margin-bottom: 8px !important;
  }

  .page-hero h1{
    margin-bottom: 8px !important;
  }

  .page-hero p{
    margin-bottom: 0 !important;
    max-width: 30ch !important;
  }
}

@media (max-width: 480px){
  .page-hero,
  .page-hero.section-pad-sm{
    min-height: 150px !important;
    padding: 18px 0 16px !important;
  }

  .page-hero .container{
    width: calc(100% - 20px) !important;
  }

  .page-hero .eyebrow{
    margin-bottom: 7px !important;
    padding: 5px 9px !important;
  }

  .page-hero h1{
    margin-bottom: 7px !important;
    font-size: clamp(1.58rem, 7.6vw, 1.88rem) !important;
    line-height: 1.06 !important;
  }

  .page-hero p{
    font-size: .84rem !important;
    line-height: 1.42 !important;
    max-width: 28ch !important;
  }
}

@media (max-width: 380px){
  .page-hero,
  .page-hero.section-pad-sm{
    min-height: 142px !important;
    padding: 16px 0 14px !important;
  }

  .page-hero h1{
    font-size: 1.46rem !important;
  }

  .page-hero p{
    font-size: .80rem !important;
  }
}


/* 2026-06-30 v22 Barangay Services / Service Pledge gap fix */
body[data-page="citizens-charter.html"] main > section.section-pad{
  padding-top:42px !important;
  padding-bottom:50px !important;
}

body[data-page="citizens-charter.html"] .page-hero + .section-pad{
  padding-top:34px !important;
}

body[data-page="citizens-charter.html"] .pledge{
  margin-top:0 !important;
  padding:24px 28px !important;
}

body[data-page="citizens-charter.html"] .pledge + .table-wrap,
body[data-page="citizens-charter.html"] .table-wrap{
  margin-top:18px !important;
}

@media (max-width:900px){
  body[data-page="citizens-charter.html"] main > section.section-pad{
    padding-top:30px !important;
    padding-bottom:40px !important;
  }

  body[data-page="citizens-charter.html"] .page-hero + .section-pad{
    padding-top:24px !important;
  }

  body[data-page="citizens-charter.html"] .pledge{
    padding:22px !important;
  }
}

@media (max-width:480px){
  body[data-page="citizens-charter.html"] main > section.section-pad{
    padding-top:20px !important;
    padding-bottom:30px !important;
  }

  body[data-page="citizens-charter.html"] .page-hero + .section-pad{
    padding-top:16px !important;
  }

  body[data-page="citizens-charter.html"] .pledge{
    padding:18px 16px !important;
    border-radius:18px !important;
  }

  body[data-page="citizens-charter.html"] .pledge h2{
    font-size:1.35rem !important;
    margin-bottom:8px !important;
  }

  body[data-page="citizens-charter.html"] .pledge p{
    font-size:.84rem !important;
    line-height:1.45 !important;
  }

  body[data-page="citizens-charter.html"] .table-wrap{
    margin-top:14px !important;
  }
}


/* 2026-06-30 v23 Global section spacing balance fix
   Applies consistent spacing across all pages without changing content/functionality. */

/* Desktop general section spacing */
main > section.section-pad{
  padding-top:58px !important;
  padding-bottom:58px !important;
}

main > section.section-pad-sm{
  padding-top:46px !important;
  padding-bottom:46px !important;
}

/* Reduce excessive white space directly after page hero banners */
.page-hero + .section-pad,
.page-hero + .section-pad-sm,
.page-hero + section{
  padding-top:42px !important;
}

/* Keep homepage hero/stat band intentional and not affected too much */
body[data-page="index.html"] .hero + .gradient-band,
body[data-page="index.html"] .gradient-band.section-pad{
  padding-top:44px !important;
  padding-bottom:44px !important;
}

/* Consistent spacing for common content blocks */
.section-heading{
  margin-bottom:30px !important;
}

.split-layout{
  gap:34px !important;
}

.card-grid,
.card-grid.three,
.card-grid.two,
.officials-grid,
.profile-grid,
.downloads-grid,
.document-list,
.accordion{
  gap:20px !important;
}

.info-card,
.official-card,
.download-card,
.contact-card,
.contact-form,
.pledge,
.doc-row,
.accordion-item{
  margin-top:0 !important;
}

/* About page spacing */
body[data-page="about.html"] main > section.section-pad{
  padding-top:50px !important;
  padding-bottom:50px !important;
}

body[data-page="about.html"] .section-pad + .section-pad,
body[data-page="about.html"] .section-pad + .soft-bg,
body[data-page="about.html"] .soft-bg{
  padding-top:38px !important;
  padding-bottom:48px !important;
}

/* Officials / Projects / Announcements / Downloads cards */
body[data-page="officials.html"] .officials-grid,
body[data-page="projects.html"] .card-grid,
body[data-page="announcements.html"] .card-grid,
body[data-page="downloads.html"] .downloads-grid{
  gap:18px !important;
}

/* Services and Transparency pages */
body[data-page="services.html"] .page-hero + .section-pad,
body[data-page="transparency.html"] .page-hero + .section-pad{
  padding-top:34px !important;
}

body[data-page="services.html"] .accordion,
body[data-page="transparency.html"] .document-list{
  gap:16px !important;
}

/* Citizen/Barangay Services process page */
body[data-page="citizens-charter.html"] .page-hero + .section-pad{
  padding-top:28px !important;
}

body[data-page="citizens-charter.html"] main > section.section-pad{
  padding-top:38px !important;
  padding-bottom:44px !important;
}

/* Contact page */
body[data-page="contact.html"] .page-hero + .section-pad{
  padding-top:34px !important;
}

body[data-page="contact.html"] .contact-grid{
  gap:24px !important;
}

/* Tablet */
@media (max-width:900px){
  main > section.section-pad{
    padding-top:42px !important;
    padding-bottom:42px !important;
  }

  main > section.section-pad-sm{
    padding-top:34px !important;
    padding-bottom:34px !important;
  }

  .page-hero + .section-pad,
  .page-hero + .section-pad-sm,
  .page-hero + section{
    padding-top:28px !important;
  }

  .section-heading{
    margin-bottom:24px !important;
  }

  .split-layout{
    gap:24px !important;
  }

  .card-grid,
  .card-grid.three,
  .card-grid.two,
  .officials-grid,
  .profile-grid,
  .downloads-grid,
  .document-list,
  .accordion{
    gap:16px !important;
  }

  body[data-page="about.html"] main > section.section-pad,
  body[data-page="citizens-charter.html"] main > section.section-pad{
    padding-top:34px !important;
    padding-bottom:38px !important;
  }

  body[data-page="services.html"] .page-hero + .section-pad,
  body[data-page="transparency.html"] .page-hero + .section-pad,
  body[data-page="contact.html"] .page-hero + .section-pad{
    padding-top:24px !important;
  }
}

/* Mobile */
@media (max-width:480px){
  main > section.section-pad{
    padding-top:28px !important;
    padding-bottom:30px !important;
  }

  main > section.section-pad-sm{
    padding-top:24px !important;
    padding-bottom:24px !important;
  }

  .page-hero + .section-pad,
  .page-hero + .section-pad-sm,
  .page-hero + section{
    padding-top:18px !important;
  }

  .section-heading{
    margin-bottom:18px !important;
  }

  .section-heading h2,
  .split-layout h2,
  .pledge h2{
    margin-bottom:8px !important;
  }

  .split-layout{
    gap:18px !important;
  }

  .card-grid,
  .card-grid.three,
  .card-grid.two,
  .officials-grid,
  .profile-grid,
  .downloads-grid,
  .document-list,
  .accordion{
    gap:14px !important;
  }

  body[data-page="about.html"] main > section.section-pad,
  body[data-page="citizens-charter.html"] main > section.section-pad{
    padding-top:22px !important;
    padding-bottom:28px !important;
  }

  body[data-page="services.html"] .page-hero + .section-pad,
  body[data-page="transparency.html"] .page-hero + .section-pad,
  body[data-page="contact.html"] .page-hero + .section-pad,
  body[data-page="citizens-charter.html"] .page-hero + .section-pad{
    padding-top:16px !important;
  }

  body[data-page="index.html"] .hero + .gradient-band,
  body[data-page="index.html"] .gradient-band.section-pad{
    padding-top:10px !important;
    padding-bottom:20px !important;
  }

  .info-card,
  .official-card,
  .download-card,
  .contact-card,
  .contact-form,
  .pledge,
  .doc-row{
    padding:18px 16px !important;
  }
}


/* 2026-06-30 v24 Contact Us navigation highlight */
.nav-link.nav-contact{
  position: relative;
  color: #ffffff !important;
  background: linear-gradient(135deg, #1d73ff 0%, #18c6d8 100%) !important;
  border: 1px solid rgba(24,198,216,.22) !important;
  border-radius: 999px !important;
  padding-inline: 16px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 24px rgba(17, 92, 216, .18);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, background .22s ease;
}

.nav-link.nav-contact:hover,
.nav-link.nav-contact:focus-visible{
  color: #ffffff !important;
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow: 0 14px 28px rgba(17, 92, 216, .24);
}

.nav-link.nav-contact.active{
  color: #ffffff !important;
  background: linear-gradient(135deg, #155eef 0%, #14b8d4 100%) !important;
  box-shadow: 0 14px 30px rgba(17, 92, 216, .28);
}

@media (max-width: 900px){
  .nav-link.nav-contact{
    width: 100%;
    justify-content: center;
    min-height: 42px;
    border-radius: 14px !important;
    padding: 10px 14px !important;
    box-shadow: 0 8px 18px rgba(17, 92, 216, .16);
  }
}


/* 2026-06-30 v25 standard subtle scrollbar fix */
html{
  scrollbar-width: thin;
  scrollbar-color: rgba(90, 106, 126, .45) rgba(245, 248, 252, .85);
}

body{
  scrollbar-width: thin;
  scrollbar-color: rgba(90, 106, 126, .45) rgba(245, 248, 252, .85);
}

/* Chromium / Edge / Safari */
::-webkit-scrollbar{
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track{
  background: rgba(245, 248, 252, .85);
}

::-webkit-scrollbar-thumb{
  background: rgba(90, 106, 126, .42);
  border-radius: 999px;
  border: 2px solid rgba(245, 248, 252, .85);
}

::-webkit-scrollbar-thumb:hover{
  background: rgba(70, 86, 105, .58);
}

::-webkit-scrollbar-corner{
  background: rgba(245, 248, 252, .85);
}

/* Keep internal horizontal scroll areas clean and less visible */
.table-wrap,
.charter-scroll,
.process-table-wrapper{
  scrollbar-width: thin;
  scrollbar-color: rgba(90, 106, 126, .38) rgba(245, 248, 252, .7);
}

.table-wrap::-webkit-scrollbar,
.charter-scroll::-webkit-scrollbar,
.process-table-wrapper::-webkit-scrollbar{
  height: 7px;
  width: 7px;
}

.table-wrap::-webkit-scrollbar-track,
.charter-scroll::-webkit-scrollbar-track,
.process-table-wrapper::-webkit-scrollbar-track{
  background: rgba(245, 248, 252, .65);
  border-radius: 999px;
}

.table-wrap::-webkit-scrollbar-thumb,
.charter-scroll::-webkit-scrollbar-thumb,
.process-table-wrapper::-webkit-scrollbar-thumb{
  background: rgba(90, 106, 126, .35);
  border-radius: 999px;
  border: 2px solid rgba(245, 248, 252, .65);
}


/* 2026-06-30 v26 force footer email single-line on desktop/tablet */
@media (min-width: 641px){
  .site-footer .container.footer-grid{
    max-width: 1240px !important;
    grid-template-columns: minmax(300px, 1fr) minmax(380px, 1.18fr) minmax(230px, .82fr) !important;
    gap: 70px !important;
  }

  .site-footer .footer-grid > div:nth-child(2){
    min-width: 380px !important;
  }

  .site-footer .footer-grid > div:nth-child(2) p{
    max-width: none !important;
    width: max-content !important;
    min-width: 380px !important;
  }

  .site-footer .footer-email{
    display: inline-block !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}

@media (min-width: 641px) and (max-width: 900px){
  .site-footer .container.footer-grid{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .site-footer .footer-grid > div:nth-child(2){
    min-width: 0 !important;
  }

  .site-footer .footer-grid > div:nth-child(2) p{
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 640px){
  .site-footer .footer-email{
    white-space: normal !important;
  }
}


/* 2026-06-30 v27 footer desktop gap rebalance fix */
@media (min-width: 901px){
  .site-footer .container.footer-grid{
    max-width: 980px !important;
    grid-template-columns: minmax(250px, .95fr) minmax(300px, 1.02fr) minmax(190px, .72fr) !important;
    column-gap: 36px !important;
    row-gap: 18px !important;
    justify-content: center !important;
    padding: 48px 0 40px !important;
  }

  .site-footer .footer-grid > div{
    justify-self: start !important;
  }

  .site-footer .footer-grid > div:first-child{
    max-width: 290px !important;
  }

  .site-footer .footer-grid > div:nth-child(2){
    min-width: 0 !important;
  }

  .site-footer .footer-grid > div:nth-child(2) p{
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .site-footer .footer-grid > div:nth-child(3){
    min-width: 0 !important;
  }

  .site-footer .footer-email{
    white-space: nowrap !important;
  }
}


/* 2026-06-30 v28 footer width + horizontal spacing refinement */
@media (min-width: 901px){
  .site-footer .container.footer-grid{
    max-width: 1140px !important;
    grid-template-columns: minmax(320px, 1.15fr) minmax(340px, 1fr) minmax(220px, .78fr) !important;
    column-gap: 64px !important;
    row-gap: 18px !important;
    justify-content: stretch !important;
    padding: 48px 0 40px !important;
  }

  .site-footer .footer-grid > div{
    justify-self: stretch !important;
  }

  .site-footer .footer-grid > div:first-child{
    max-width: 360px !important;
  }

  .site-footer .footer-grid > div:first-child p{
    max-width: 340px !important;
  }

  .site-footer .footer-grid > div:nth-child(2){
    min-width: 340px !important;
  }

  .site-footer .footer-grid > div:nth-child(2) p{
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .site-footer .footer-grid > div:nth-child(3){
    min-width: 210px !important;
  }

  .site-footer .footer-brand{
    margin-bottom: 16px !important;
  }

  .site-footer p,
  .site-footer a,
  .site-footer .footer-links li{
    line-height: 1.5 !important;
  }

  .site-footer .footer-email{
    display: inline-block !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px){
  .site-footer .container.footer-grid{
    max-width: calc(100% - 56px) !important;
    grid-template-columns: minmax(290px, 1.05fr) minmax(310px, 1fr) minmax(200px, .76fr) !important;
    column-gap: 44px !important;
  }

  .site-footer .footer-grid > div:first-child{
    max-width: 320px !important;
  }

  .site-footer .footer-grid > div:first-child p{
    max-width: 300px !important;
  }

  .site-footer .footer-grid > div:nth-child(2){
    min-width: 300px !important;
  }
}


/* 2026-06-30 v29 footer vertical balance fix
   Keeps current horizontal spacing, but removes excess empty blue space below. */
@media (min-width: 901px){
  .site-footer .container.footer-grid{
    padding-top: 46px !important;
    padding-bottom: 34px !important;
    align-items: center !important;
  }

  .site-footer .footer-brand{
    margin-bottom: 14px !important;
  }

  .site-footer h3{
    margin-bottom: 10px !important;
  }

  .site-footer .footer-links{
    gap: 7px !important;
  }

  .site-footer .footer-bottom{
    padding-top: 12px !important;
    padding-bottom: 14px !important;
  }
}

@media (max-width: 900px){
  .site-footer .container.footer-grid{
    padding-top: 38px !important;
    padding-bottom: 28px !important;
  }

  .site-footer .footer-bottom{
    padding-top: 12px !important;
    padding-bottom: 14px !important;
  }
}

@media (max-width: 640px){
  .site-footer .container.footer-grid{
    padding-top: 34px !important;
    padding-bottom: 24px !important;
  }
}


/* 2026-06-30 v30 extra subtle scrollbar fix
   Makes the browser scrollbar more standard, thinner, and less distracting. */
html,
body{
  scrollbar-width: thin !important;
  scrollbar-color: rgba(120, 132, 148, .28) rgba(248, 250, 252, .95) !important;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar{
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track{
  background: rgba(248, 250, 252, .95) !important;
}

::-webkit-scrollbar-thumb{
  background: rgba(120, 132, 148, .26) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(248, 250, 252, .95) !important;
}

::-webkit-scrollbar-thumb:hover{
  background: rgba(100, 116, 139, .38) !important;
}

::-webkit-scrollbar-corner{
  background: rgba(248, 250, 252, .95) !important;
}

/* Internal scroll areas */
.table-wrap,
.charter-scroll,
.process-table-wrapper,
.nav-menu{
  scrollbar-width: thin !important;
  scrollbar-color: rgba(120, 132, 148, .22) rgba(248, 250, 252, .88) !important;
}

.table-wrap::-webkit-scrollbar,
.charter-scroll::-webkit-scrollbar,
.process-table-wrapper::-webkit-scrollbar,
.nav-menu::-webkit-scrollbar{
  width: 5px !important;
  height: 5px !important;
}

.table-wrap::-webkit-scrollbar-track,
.charter-scroll::-webkit-scrollbar-track,
.process-table-wrapper::-webkit-scrollbar-track,
.nav-menu::-webkit-scrollbar-track{
  background: rgba(248, 250, 252, .88) !important;
}

.table-wrap::-webkit-scrollbar-thumb,
.charter-scroll::-webkit-scrollbar-thumb,
.process-table-wrapper::-webkit-scrollbar-thumb,
.nav-menu::-webkit-scrollbar-thumb{
  background: rgba(120, 132, 148, .20) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(248, 250, 252, .88) !important;
}

/* Hide horizontal scrollbar unless it is truly needed by content */
body{
  overflow-x: hidden !important;
}


/* 2026-06-30 v31 footer column top-alignment fix
   Aligns all footer columns evenly so Contact Information is not visually lower. */
@media (min-width: 901px){
  .site-footer .container.footer-grid{
    align-items: start !important;
  }

  .site-footer .footer-grid > div{
    align-self: start !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .site-footer .footer-grid > div:nth-child(2),
  .site-footer .footer-grid > div:nth-child(3){
    padding-top: 2px !important;
  }

  .site-footer .footer-brand{
    margin-top: 0 !important;
  }

  .site-footer h3{
    margin-top: 0 !important;
    line-height: 1.12 !important;
  }

  .site-footer p,
  .site-footer .footer-links{
    margin-top: 0 !important;
  }
}

@media (max-width: 900px){
  .site-footer .footer-grid > div{
    align-self: start !important;
    margin-top: 0 !important;
  }

  .site-footer h3{
    margin-top: 0 !important;
  }
}


/* 2026-06-30 v32 footer final column ratio balance
   Goal: first column wider, second medium, third narrower, with consistent gaps. */
@media (min-width: 901px){
  .site-footer .container.footer-grid{
    max-width: 1120px !important;
    grid-template-columns: minmax(360px, 1.25fr) minmax(320px, .95fr) minmax(210px, .65fr) !important;
    column-gap: 48px !important;
    row-gap: 18px !important;
    justify-content: center !important;
    align-items: start !important;
    padding-top: 46px !important;
    padding-bottom: 34px !important;
  }

  .site-footer .footer-grid > div{
    justify-self: start !important;
    align-self: start !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .site-footer .footer-grid > div:first-child{
    width: 100% !important;
  }

  .site-footer .footer-grid > div:first-child p{
    max-width: 350px !important;
  }

  .site-footer .footer-grid > div:nth-child(2){
    width: 100% !important;
  }

  .site-footer .footer-grid > div:nth-child(2) p{
    max-width: 320px !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .site-footer .footer-grid > div:nth-child(3){
    width: 100% !important;
    max-width: 220px !important;
  }

  .site-footer .footer-email{
    display: inline-block !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px){
  .site-footer .container.footer-grid{
    max-width: calc(100% - 56px) !important;
    grid-template-columns: minmax(330px, 1.18fr) minmax(310px, .95fr) minmax(200px, .65fr) !important;
    column-gap: 36px !important;
  }

  .site-footer .footer-grid > div:first-child p{
    max-width: 330px !important;
  }

  .site-footer .footer-grid > div:nth-child(2) p{
    max-width: 310px !important;
  }
}


/* 2026-06-30 v33 homepage Quick Access visibility fix
   Brings the Quick Access / Barangay Services heading closer to the hero area. */
body[data-page="index.html"] .hero + .gradient-band{
  padding-bottom: 18px !important;
}

body[data-page="index.html"] .gradient-band + .section-pad{
  padding-top: 26px !important;
}

body[data-page="index.html"] .gradient-band + .section-pad .section-heading{
  margin-bottom: 26px !important;
}

body[data-page="index.html"] .gradient-band + .section-pad .section-heading .eyebrow{
  margin-bottom: 8px !important;
}

body[data-page="index.html"] .gradient-band + .section-pad .section-heading h2{
  margin-bottom: 8px !important;
}

@media (min-width: 901px){
  body[data-page="index.html"] .hero{
    min-height: 660px !important;
  }

  body[data-page="index.html"] .gradient-band,
  body[data-page="index.html"] .gradient-band.section-pad{
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  body[data-page="index.html"] .gradient-band + .section-pad{
    padding-top: 22px !important;
  }

  body[data-page="index.html"] .gradient-band + .section-pad .section-heading{
    margin-bottom: 22px !important;
  }
}

@media (max-width: 900px){
  body[data-page="index.html"] .gradient-band,
  body[data-page="index.html"] .gradient-band.section-pad{
    padding-bottom: 16px !important;
  }

  body[data-page="index.html"] .gradient-band + .section-pad{
    padding-top: 20px !important;
  }
}

@media (max-width: 480px){
  body[data-page="index.html"] .gradient-band,
  body[data-page="index.html"] .gradient-band.section-pad{
    padding-top: 10px !important;
    padding-bottom: 14px !important;
  }

  body[data-page="index.html"] .gradient-band + .section-pad{
    padding-top: 16px !important;
  }

  body[data-page="index.html"] .gradient-band + .section-pad .section-heading{
    margin-bottom: 16px !important;
  }
}


/* 2026-06-30 v34 homepage Quick Access below-hero correction
   Moves Quick Access back below the first hero view. */
@media (min-width: 901px){
  body[data-page="index.html"] .hero{
    min-height: 720px !important;
  }

  body[data-page="index.html"] .hero + .gradient-band,
  body[data-page="index.html"] .gradient-band.section-pad{
    padding-top: 22px !important;
    padding-bottom: 34px !important;
  }

  body[data-page="index.html"] .gradient-band + .section-pad{
    padding-top: 72px !important;
  }

  body[data-page="index.html"] .gradient-band + .section-pad .section-heading{
    margin-bottom: 34px !important;
  }
}

@media (min-width: 1280px){
  body[data-page="index.html"] .hero{
    min-height: 735px !important;
  }

  body[data-page="index.html"] .gradient-band + .section-pad{
    padding-top: 82px !important;
  }
}

@media (max-width: 900px){
  body[data-page="index.html"] .gradient-band + .section-pad{
    padding-top: 42px !important;
  }
}

@media (max-width: 480px){
  body[data-page="index.html"] .gradient-band + .section-pad{
    padding-top: 30px !important;
  }
}


/* 2026-06-30 v35 footer tighter vertical padding
   Slightly reduces empty blue space above and below footer content. */
@media (min-width: 901px){
  .site-footer .container.footer-grid{
    padding-top: 40px !important;
    padding-bottom: 28px !important;
  }

  .site-footer .footer-bottom{
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }
}

@media (max-width: 900px){
  .site-footer .container.footer-grid{
    padding-top: 34px !important;
    padding-bottom: 24px !important;
  }

  .site-footer .footer-bottom{
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }
}

@media (max-width: 640px){
  .site-footer .container.footer-grid{
    padding-top: 30px !important;
    padding-bottom: 20px !important;
  }
}


/* 2026-06-30 v36 minor mobile-only hero/emergency/stat refinements
   Scope: mobile sizing only. Header intentionally left unchanged. */
@media (max-width: 768px){
  body[data-page="index.html"] .hero{
    min-height: auto !important;
    padding-bottom: 6px !important;
  }

  body[data-page="index.html"] .hero-content{
    padding-top: 22px !important;
    padding-bottom: 12px !important;
  }

  body[data-page="index.html"] .hero h1{
    font-size: clamp(1.76rem, 8.2vw, 2.08rem) !important;
    line-height: 1.06 !important;
    margin-bottom: 8px !important;
    font-weight: 900 !important;
  }

  body[data-page="index.html"] .hero p{
    font-size: .84rem !important;
    line-height: 1.42 !important;
  }

  body[data-page="index.html"] .hero-actions{
    margin-top: 14px !important;
    gap: 7px !important;
  }

  body[data-page="index.html"] .hero-actions .btn{
    min-height: 36px !important;
    height: auto !important;
    padding: 8px 13px !important;
    font-size: .80rem !important;
    border-radius: 17px !important;
  }

  body[data-page="index.html"] .hero-emergency-card,
  body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
    max-width: 318px !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    padding: 12px 12px 13px !important;
    border-radius: 17px !important;
    box-shadow: 0 16px 34px rgba(8, 38, 77, .16) !important;
  }

  body[data-page="index.html"] .emergency-card-top{
    gap: 6px !important;
    margin-bottom: 8px !important;
  }

  body[data-page="index.html"] .emergency-pill,
  body[data-page="index.html"] .emergency-pill-live{
    padding: 5px 10px !important;
    font-size: .60rem !important;
  }

  body[data-page="index.html"] .emergency-status,
  body[data-page="index.html"] .emergency-status-alert{
    padding: 5px 10px !important;
    font-size: .68rem !important;
  }

  body[data-page="index.html"] .emergency-main-row{
    grid-template-columns: minmax(0,1fr) 40px !important;
    gap: 8px !important;
  }

  body[data-page="index.html"] .hero-emergency-card strong,
  body[data-page="index.html"] .emergency-card-alt strong{
    font-size: .86rem !important;
  }

  body[data-page="index.html"] .hero-hotline-number,
  body[data-page="index.html"] .emergency-card-alt .hero-hotline-number{
    font-size: 1.24rem !important;
    line-height: 1.04 !important;
  }

  body[data-page="index.html"] .emergency-siren-badge{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    box-shadow: 0 10px 22px rgba(255, 90, 65, .22) !important;
  }

  body[data-page="index.html"] .emergency-siren-badge i{
    font-size: .54rem !important;
  }

  body[data-page="index.html"] .hero-emergency-card p,
  body[data-page="index.html"] .emergency-card-alt p{
    font-size: .70rem !important;
    line-height: 1.32 !important;
    margin: 7px 0 8px !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-page="index.html"] .hero-emergency-grid,
  body[data-page="index.html"] .emergency-card-alt .hero-emergency-grid{
    gap: 6px !important;
  }

  body[data-page="index.html"] .hero-emergency-item,
  body[data-page="index.html"] .emergency-card-alt .hero-emergency-item{
    min-height: 42px !important;
    padding: 6px 4px !important;
    border-radius: 10px !important;
  }

  body[data-page="index.html"] .hero-emergency-item label{
    font-size: .45rem !important;
    margin-bottom: 2px !important;
  }

  body[data-page="index.html"] .hero-emergency-item span{
    font-size: .76rem !important;
  }

  body[data-page="index.html"] .gradient-band,
  body[data-page="index.html"] .gradient-band.section-pad{
    padding-top: 8px !important;
    padding-bottom: 16px !important;
  }

  body[data-page="index.html"] .stats-grid{
    gap: 10px !important;
  }

  body[data-page="index.html"] .stats-grid div{
    min-height: auto !important;
    padding: 13px 14px 12px !important;
    border-radius: 16px !important;
  }

  body[data-page="index.html"] .stats-grid strong{
    font-size: .92rem !important;
    margin-bottom: 3px !important;
  }

  body[data-page="index.html"] .stats-grid span{
    font-size: .78rem !important;
    line-height: 1.32 !important;
  }
}

@media (max-width: 480px){
  body[data-page="index.html"] .hero-content{
    padding-top: 18px !important;
    padding-bottom: 10px !important;
  }

  body[data-page="index.html"] .hero .eyebrow{
    font-size: .56rem !important;
    padding: 5px 9px !important;
    margin-bottom: 8px !important;
  }

  body[data-page="index.html"] .hero h1{
    font-size: clamp(1.62rem, 8vw, 1.92rem) !important;
    margin-bottom: 7px !important;
  }

  body[data-page="index.html"] .hero p{
    font-size: .80rem !important;
    line-height: 1.38 !important;
  }

  body[data-page="index.html"] .hero-actions .btn{
    min-height: 34px !important;
    padding: 7px 12px !important;
    font-size: .76rem !important;
  }

  body[data-page="index.html"] .hero-emergency-card,
  body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
    width: calc(100% - 24px) !important;
    max-width: 304px !important;
    padding: 11px !important;
    margin-top: 7px !important;
  }

  body[data-page="index.html"] .hero-hotline-number,
  body[data-page="index.html"] .emergency-card-alt .hero-hotline-number{
    font-size: 1.14rem !important;
  }

  body[data-page="index.html"] .emergency-siren-badge{
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  body[data-page="index.html"] .hero-emergency-card p,
  body[data-page="index.html"] .emergency-card-alt p{
    font-size: .66rem !important;
  }

  body[data-page="index.html"] .hero-emergency-item,
  body[data-page="index.html"] .emergency-card-alt .hero-emergency-item{
    min-height: 39px !important;
    padding: 5px 3px !important;
  }

  body[data-page="index.html"] .stats-grid div{
    padding: 12px 13px 11px !important;
  }
}

@media (max-width: 380px){
  body[data-page="index.html"] .hero h1{
    font-size: 1.54rem !important;
  }

  body[data-page="index.html"] .hero-emergency-card,
  body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
    max-width: 292px !important;
  }

  body[data-page="index.html"] .hero-hotline-number,
  body[data-page="index.html"] .emergency-card-alt .hero-hotline-number{
    font-size: 1.06rem !important;
  }
}


/* 2026-06-30 v37 final mobile polishing pass
   Scope: mobile-only polish. Header intentionally unchanged. */
@media (max-width: 768px){

  /* Unified mobile page hero/banner polishing */
  .page-hero,
  .page-hero.section-pad-sm{
    min-height: 146px !important;
    padding-top: 18px !important;
    padding-bottom: 15px !important;
  }

  .page-hero .eyebrow{
    margin-bottom: 7px !important;
    padding: 5px 9px !important;
    font-size: .54rem !important;
  }

  .page-hero h1{
    font-size: clamp(1.52rem, 7.1vw, 1.86rem) !important;
    line-height: 1.06 !important;
    margin-bottom: 7px !important;
  }

  .page-hero p{
    font-size: .82rem !important;
    line-height: 1.42 !important;
    max-width: 30ch !important;
  }

  /* Unified mobile section spacing */
  main > section.section-pad{
    padding-top: 24px !important;
    padding-bottom: 26px !important;
  }

  main > section.section-pad-sm{
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  .page-hero + .section-pad,
  .page-hero + .section-pad-sm,
  .page-hero + section{
    padding-top: 16px !important;
  }

  .section-heading{
    margin-bottom: 16px !important;
  }

  .section-heading h2,
  .split-layout h2,
  .pledge h2{
    font-size: clamp(1.36rem, 6vw, 1.68rem) !important;
    line-height: 1.12 !important;
    margin-bottom: 7px !important;
  }

  .section-heading p,
  .split-layout p,
  .pledge p{
    font-size: .84rem !important;
    line-height: 1.45 !important;
  }

  /* Unified card/grid spacing */
  .card-grid,
  .card-grid.three,
  .card-grid.two,
  .officials-grid,
  .profile-grid,
  .downloads-grid,
  .document-list,
  .accordion{
    gap: 12px !important;
  }

  .info-card,
  .official-card,
  .download-card,
  .contact-card,
  .contact-form,
  .pledge,
  .doc-row,
  .accordion-item,
  .image-card,
  .profile-item{
    border-radius: 17px !important;
  }

  /* Officials page: keep look, reduce length */
  .official-card{
    padding: 14px 12px !important;
  }

  .official-card img,
  .official-photo{
    width: 72px !important;
    height: 72px !important;
    margin-bottom: 10px !important;
  }

  .official-card h3{
    font-size: .94rem !important;
    line-height: 1.18 !important;
    margin-bottom: 5px !important;
  }

  .official-card span,
  .official-card .position{
    font-size: .80rem !important;
    line-height: 1.2 !important;
  }

  .official-card p,
  .official-card .subtitle{
    font-size: .74rem !important;
    line-height: 1.35 !important;
    margin-top: 5px !important;
  }

  /* Community Initiatives / Announcements image area */
  .image-card img,
  .image-card::after,
  .card-visual{
    height: 116px !important;
    max-height: 116px !important;
    object-fit: cover !important;
  }

  .image-card img + div,
  .image-card > div{
    padding: 13px 14px 14px !important;
  }

  .image-card h3{
    font-size: .94rem !important;
    line-height: 1.18 !important;
    margin-bottom: 5px !important;
  }

  .image-card p{
    font-size: .78rem !important;
    line-height: 1.38 !important;
  }

  .status{
    padding: 5px 9px !important;
    font-size: .66rem !important;
    margin-bottom: 8px !important;
  }

  /* Downloads: reduce blank space and unify button sizing */
  .download-card{
    padding: 13px 14px !important;
    gap: 10px !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
  }

  .download-card .icon{
    width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
    font-size: 1rem !important;
    margin-bottom: 0 !important;
  }

  .download-card h3{
    font-size: .92rem !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
  }

  .download-card p{
    font-size: .78rem !important;
    line-height: 1.38 !important;
  }

  .download-card .btn,
  .download-card .btn-small,
  .download-card .btn-primary,
  .doc-row .btn,
  .doc-row .btn-small,
  .contact-form .btn,
  .btn{
    min-height: 36px !important;
    padding: 8px 13px !important;
    border-radius: 16px !important;
    font-size: .78rem !important;
  }

  /* Transparency rows */
  body[data-page="transparency.html"] .doc-row{
    padding: 15px 14px !important;
    gap: 11px !important;
  }

  body[data-page="transparency.html"] .doc-row > div{
    padding-left: 48px !important;
  }

  body[data-page="transparency.html"] .doc-row > div::before{
    width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
    font-size: .95rem !important;
  }

  body[data-page="transparency.html"] .doc-row strong{
    font-size: .93rem !important;
    line-height: 1.18 !important;
    margin-bottom: 4px !important;
  }

  body[data-page="transparency.html"] .doc-row span{
    font-size: .78rem !important;
    line-height: 1.38 !important;
  }

  /* Barangay Services accordion: reduce item height but keep tap target usable */
  body[data-page="services.html"] .accordion,
  body[data-page="citizens-charter.html"] .accordion{
    gap: 11px !important;
  }

  body[data-page="services.html"] .accordion-trigger,
  body[data-page="citizens-charter.html"] .accordion-trigger{
    min-height: 48px !important;
    padding: 13px 14px !important;
    gap: 10px !important;
  }

  body[data-page="services.html"] .accordion-trigger span,
  body[data-page="citizens-charter.html"] .accordion-trigger span{
    font-size: .88rem !important;
    line-height: 1.18 !important;
    gap: 9px !important;
  }

  body[data-page="services.html"] .accordion-trigger span::before,
  body[data-page="citizens-charter.html"] .accordion-trigger span::before{
    width: 10px !important;
    height: 10px !important;
    flex-basis: 10px !important;
  }

  body[data-page="services.html"] .accordion-trigger b,
  body[data-page="citizens-charter.html"] .accordion-trigger b{
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 12px !important;
    font-size: 1.2rem !important;
  }

  body[data-page="services.html"] .accordion-content p,
  body[data-page="citizens-charter.html"] .accordion-content p{
    padding: 12px 14px 10px !important;
    font-size: .80rem !important;
    line-height: 1.42 !important;
  }

  body[data-page="services.html"] .service-meta,
  body[data-page="citizens-charter.html"] .service-meta{
    padding: 0 14px 14px !important;
    gap: 9px !important;
  }

  body[data-page="services.html"] .service-meta span,
  body[data-page="citizens-charter.html"] .service-meta span{
    padding: 12px 12px 12px 14px !important;
    border-radius: 14px !important;
    font-size: .80rem !important;
    line-height: 1.38 !important;
  }

  /* Homepage stat cards: Public Service / Transparency / Community / Safety */
  body[data-page="index.html"] .stats-grid{
    gap: 9px !important;
  }

  body[data-page="index.html"] .stats-grid div{
    padding: 12px 13px 11px !important;
    border-radius: 15px !important;
    min-height: auto !important;
  }

  body[data-page="index.html"] .stats-grid strong{
    font-size: .90rem !important;
    margin-bottom: 3px !important;
  }

  body[data-page="index.html"] .stats-grid span{
    font-size: .76rem !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 480px){
  .page-hero,
  .page-hero.section-pad-sm{
    min-height: 138px !important;
    padding-top: 15px !important;
    padding-bottom: 13px !important;
  }

  .page-hero h1{
    font-size: clamp(1.42rem, 7vw, 1.72rem) !important;
  }

  .page-hero p{
    font-size: .78rem !important;
    line-height: 1.38 !important;
    max-width: 28ch !important;
  }

  main > section.section-pad{
    padding-top: 22px !important;
    padding-bottom: 24px !important;
  }

  .official-card{
    padding: 13px 11px !important;
  }

  .official-card img,
  .official-photo{
    width: 68px !important;
    height: 68px !important;
  }

  .image-card img,
  .image-card::after,
  .card-visual{
    height: 108px !important;
    max-height: 108px !important;
  }

  .download-card{
    padding: 12px 13px !important;
  }

  .download-card .btn,
  .download-card .btn-small,
  .download-card .btn-primary,
  .doc-row .btn,
  .doc-row .btn-small,
  .btn{
    min-height: 34px !important;
    padding: 7px 12px !important;
    border-radius: 15px !important;
    font-size: .74rem !important;
  }
}

@media (max-width: 380px){
  .page-hero,
  .page-hero.section-pad-sm{
    min-height: 132px !important;
  }

  .page-hero h1{
    font-size: 1.36rem !important;
  }

  .image-card img,
  .image-card::after,
  .card-visual{
    height: 102px !important;
    max-height: 102px !important;
  }
}


/* 2026-06-30 v38 mobile menu refinement only
   Scope: opened mobile menu panel/items only. Header/logo/menu button untouched. */
@media (max-width: 900px){
  .nav-menu{
    background: rgba(255, 255, 255, .985) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(21, 94, 239, .12) !important;
    box-shadow: 0 18px 44px rgba(6, 31, 63, .18) !important;
    padding: 10px !important;
    gap: 6px !important;
    border-radius: 18px !important;
  }

  .nav-menu.open{
    background: rgba(255, 255, 255, .99) !important;
  }

  .nav-link{
    min-height: 36px !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    font-size: .82rem !important;
    line-height: 1.15 !important;
    color: #0b2a5b !important;
    background: rgba(245, 249, 255, .72) !important;
    border: 1px solid rgba(21, 94, 239, .06) !important;
  }

  .nav-link:hover{
    background: rgba(21, 94, 239, .09) !important;
    color: #155eef !important;
  }

  .nav-link.active{
    color: #ffffff !important;
    background: linear-gradient(135deg, #155eef, #18bfdc) !important;
    border-color: rgba(21, 94, 239, .18) !important;
    box-shadow: 0 8px 18px rgba(21, 94, 239, .20) !important;
  }

  .nav-link.nav-contact{
    color: #ffffff !important;
    background: linear-gradient(135deg, #16b8f3, #14c9c4) !important;
    border-color: rgba(20, 201, 196, .24) !important;
    box-shadow: 0 8px 18px rgba(20, 184, 243, .22) !important;
    font-weight: 900 !important;
  }

  .nav-link.nav-contact:hover,
  .nav-link.nav-contact.active{
    color: #ffffff !important;
    background: linear-gradient(135deg, #129ee8, #12bfb7) !important;
    box-shadow: 0 10px 22px rgba(20, 184, 243, .26) !important;
  }
}

@media (max-width: 480px){
  .nav-menu{
    left: 10px !important;
    right: 10px !important;
    padding: 9px !important;
    gap: 5px !important;
    border-radius: 16px !important;
  }

  .nav-link{
    min-height: 34px !important;
    padding: 8px 11px !important;
    font-size: .78rem !important;
    border-radius: 11px !important;
  }

  .nav-link.nav-contact{
    min-height: 36px !important;
  }
}


/* 2026-06-30 v39 mobile header logo refinement only
   Scope: mobile header branding only. Menu panel/button, desktop, content, links, and functionality unchanged. */
@media (max-width: 768px){
  .brand{
    gap: 9px !important;
    padding-left: 7px !important;
    padding-right: 9px !important;
  }

  .brand img{
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 12px !important;
  }

  .brand span{
    min-width: 0 !important;
  }

  .brand strong{
    line-height: 1.05 !important;
  }

  .brand small{
    line-height: 1.05 !important;
  }
}

@media (max-width: 480px){
  .brand{
    gap: 8px !important;
    padding-left: 6px !important;
    padding-right: 8px !important;
  }

  .brand img{
    width: 35px !important;
    height: 35px !important;
    flex-basis: 35px !important;
    border-radius: 11px !important;
  }
}

@media (max-width: 380px){
  .brand img{
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .brand{
    gap: 7px !important;
  }
}


/* 2026-06-30 v40 very minor mobile emergency label polish
   Scope: mobile emergency label only. Header, menu, cards, desktop, content, and functionality unchanged. */
@media (max-width: 768px){
  body[data-page="index.html"] .emergency-pill,
  body[data-page="index.html"] .emergency-pill-live{
    font-size: .55rem !important;
    padding: 5px 9px !important;
    letter-spacing: .055em !important;
  }
}

@media (max-width: 480px){
  body[data-page="index.html"] .emergency-pill,
  body[data-page="index.html"] .emergency-pill-live{
    font-size: .52rem !important;
    padding: 4px 8px !important;
    letter-spacing: .05em !important;
  }
}


/* 2026-06-30 v41 mobile card image/overlay text visibility fix
   Scope: Community Initiatives and Announcements mobile cards only. */
@media (max-width: 768px){

  /* Give the image/header area enough height for the overlay title block */
  body[data-page="projects.html"] .image-card img,
  body[data-page="projects.html"] .image-card::after,
  body[data-page="projects.html"] .card-visual,
  body[data-page="announcements.html"] .image-card img,
  body[data-page="announcements.html"] .image-card::after,
  body[data-page="announcements.html"] .card-visual{
    height: 142px !important;
    max-height: 142px !important;
    object-fit: cover !important;
  }

  /* Keep rounded image style, but do not clip the title overlay */
  body[data-page="projects.html"] .image-card,
  body[data-page="announcements.html"] .image-card{
    overflow: visible !important;
  }

  body[data-page="projects.html"] .image-card img,
  body[data-page="announcements.html"] .image-card img,
  body[data-page="projects.html"] .card-visual,
  body[data-page="announcements.html"] .card-visual{
    border-radius: 17px 17px 0 0 !important;
  }

  /* Move title/overlay content up and add safe spacing */
  body[data-page="projects.html"] .image-card .status,
  body[data-page="announcements.html"] .image-card .status{
    margin-bottom: 9px !important;
  }

  body[data-page="projects.html"] .image-card img + div,
  body[data-page="projects.html"] .image-card > div,
  body[data-page="announcements.html"] .image-card img + div,
  body[data-page="announcements.html"] .image-card > div{
    padding: 15px 15px 16px !important;
    overflow: visible !important;
  }

  body[data-page="projects.html"] .image-card h3,
  body[data-page="announcements.html"] .image-card h3{
    display: block !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    white-space: normal !important;
    font-size: .96rem !important;
    line-height: 1.22 !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
  }

  body[data-page="projects.html"] .image-card p,
  body[data-page="announcements.html"] .image-card p{
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  /* If the card uses an overlay block inside the visual area, keep it safely inside */
  body[data-page="projects.html"] .image-card .overlay,
  body[data-page="projects.html"] .image-card .card-overlay,
  body[data-page="projects.html"] .image-card .image-overlay,
  body[data-page="announcements.html"] .image-card .overlay,
  body[data-page="announcements.html"] .image-card .card-overlay,
  body[data-page="announcements.html"] .image-card .image-overlay{
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    padding: 10px 12px !important;
    border-radius: 13px !important;
    overflow: visible !important;
    max-height: none !important;
  }

  body[data-page="projects.html"] .image-card .overlay h3,
  body[data-page="projects.html"] .image-card .card-overlay h3,
  body[data-page="projects.html"] .image-card .image-overlay h3,
  body[data-page="announcements.html"] .image-card .overlay h3,
  body[data-page="announcements.html"] .image-card .card-overlay h3,
  body[data-page="announcements.html"] .image-card .image-overlay h3{
    line-height: 1.2 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 480px){
  body[data-page="projects.html"] .image-card img,
  body[data-page="projects.html"] .image-card::after,
  body[data-page="projects.html"] .card-visual,
  body[data-page="announcements.html"] .image-card img,
  body[data-page="announcements.html"] .image-card::after,
  body[data-page="announcements.html"] .card-visual{
    height: 136px !important;
    max-height: 136px !important;
  }

  body[data-page="projects.html"] .image-card img + div,
  body[data-page="projects.html"] .image-card > div,
  body[data-page="announcements.html"] .image-card img + div,
  body[data-page="announcements.html"] .image-card > div{
    padding: 14px 14px 15px !important;
  }

  body[data-page="projects.html"] .image-card .overlay,
  body[data-page="projects.html"] .image-card .card-overlay,
  body[data-page="projects.html"] .image-card .image-overlay,
  body[data-page="announcements.html"] .image-card .overlay,
  body[data-page="announcements.html"] .image-card .card-overlay,
  body[data-page="announcements.html"] .image-card .image-overlay{
    bottom: 11px !important;
    left: 11px !important;
    right: 11px !important;
    padding: 9px 11px !important;
  }
}

@media (max-width: 380px){
  body[data-page="projects.html"] .image-card img,
  body[data-page="projects.html"] .image-card::after,
  body[data-page="projects.html"] .card-visual,
  body[data-page="announcements.html"] .image-card img,
  body[data-page="announcements.html"] .image-card::after,
  body[data-page="announcements.html"] .card-visual{
    height: 132px !important;
    max-height: 132px !important;
  }

  body[data-page="projects.html"] .image-card h3,
  body[data-page="announcements.html"] .image-card h3{
    font-size: .92rem !important;
    line-height: 1.2 !important;
  }
}


/* 2026-06-30 v42 mobile initiatives/announcements overlay subtitle readability fix
   Scope: Community Initiatives and Announcements mobile cards only. */
@media (max-width: 768px){

  body[data-page="projects.html"] .image-card img,
  body[data-page="projects.html"] .image-card::after,
  body[data-page="projects.html"] .card-visual,
  body[data-page="announcements.html"] .image-card img,
  body[data-page="announcements.html"] .image-card::after,
  body[data-page="announcements.html"] .card-visual{
    height: 162px !important;
    max-height: 162px !important;
    object-fit: cover !important;
  }

  body[data-page="projects.html"] .image-card,
  body[data-page="announcements.html"] .image-card{
    overflow: hidden !important;
    border-radius: 17px !important;
  }

  body[data-page="projects.html"] .image-card img,
  body[data-page="announcements.html"] .image-card img,
  body[data-page="projects.html"] .card-visual,
  body[data-page="announcements.html"] .card-visual{
    border-radius: 17px 17px 0 0 !important;
  }

  body[data-page="projects.html"] .image-card img + div,
  body[data-page="projects.html"] .image-card > div,
  body[data-page="announcements.html"] .image-card img + div,
  body[data-page="announcements.html"] .image-card > div{
    padding: 16px 15px 18px !important;
  }

  body[data-page="projects.html"] .image-card h3,
  body[data-page="announcements.html"] .image-card h3{
    font-size: .98rem !important;
    line-height: 1.22 !important;
    margin-bottom: 7px !important;
    overflow: visible !important;
    max-height: none !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  body[data-page="projects.html"] .image-card p,
  body[data-page="announcements.html"] .image-card p{
    font-size: .82rem !important;
    line-height: 1.44 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    max-height: none !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  /* For cards using a white overlay box inside the image/header area */
  body[data-page="projects.html"] .image-card .overlay,
  body[data-page="projects.html"] .image-card .card-overlay,
  body[data-page="projects.html"] .image-card .image-overlay,
  body[data-page="announcements.html"] .image-card .overlay,
  body[data-page="announcements.html"] .image-card .card-overlay,
  body[data-page="announcements.html"] .image-card .image-overlay{
    bottom: 18px !important;
    left: 13px !important;
    right: 13px !important;
    padding: 11px 13px 12px !important;
    border-radius: 14px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-page="projects.html"] .image-card .overlay p,
  body[data-page="projects.html"] .image-card .card-overlay p,
  body[data-page="projects.html"] .image-card .image-overlay p,
  body[data-page="announcements.html"] .image-card .overlay p,
  body[data-page="announcements.html"] .image-card .card-overlay p,
  body[data-page="announcements.html"] .image-card .image-overlay p{
    font-size: .76rem !important;
    line-height: 1.3 !important;
    margin-top: 4px !important;
  }
}

@media (max-width: 480px){
  body[data-page="projects.html"] .image-card img,
  body[data-page="projects.html"] .image-card::after,
  body[data-page="projects.html"] .card-visual,
  body[data-page="announcements.html"] .image-card img,
  body[data-page="announcements.html"] .image-card::after,
  body[data-page="announcements.html"] .card-visual{
    height: 154px !important;
    max-height: 154px !important;
  }

  body[data-page="projects.html"] .image-card img + div,
  body[data-page="projects.html"] .image-card > div,
  body[data-page="announcements.html"] .image-card img + div,
  body[data-page="announcements.html"] .image-card > div{
    padding: 15px 14px 17px !important;
  }

  body[data-page="projects.html"] .image-card p,
  body[data-page="announcements.html"] .image-card p{
    font-size: .80rem !important;
    line-height: 1.42 !important;
  }

  body[data-page="projects.html"] .image-card .overlay,
  body[data-page="projects.html"] .image-card .card-overlay,
  body[data-page="projects.html"] .image-card .image-overlay,
  body[data-page="announcements.html"] .image-card .overlay,
  body[data-page="announcements.html"] .image-card .card-overlay,
  body[data-page="announcements.html"] .image-card .image-overlay{
    bottom: 16px !important;
    left: 12px !important;
    right: 12px !important;
    padding: 10px 12px 11px !important;
  }
}

@media (max-width: 380px){
  body[data-page="projects.html"] .image-card img,
  body[data-page="projects.html"] .image-card::after,
  body[data-page="projects.html"] .card-visual,
  body[data-page="announcements.html"] .image-card img,
  body[data-page="announcements.html"] .image-card::after,
  body[data-page="announcements.html"] .card-visual{
    height: 150px !important;
    max-height: 150px !important;
  }

  body[data-page="projects.html"] .image-card h3,
  body[data-page="announcements.html"] .image-card h3{
    font-size: .94rem !important;
  }

  body[data-page="projects.html"] .image-card p,
  body[data-page="announcements.html"] .image-card p{
    font-size: .78rem !important;
  }
}


/* 2026-06-30 v43 final mobile overlay spacing polish
   Scope: Announcements and Community Initiatives mobile card overlay only. */
@media (max-width: 768px){
  body[data-page="projects.html"] .image-card .overlay,
  body[data-page="projects.html"] .image-card .card-overlay,
  body[data-page="projects.html"] .image-card .image-overlay,
  body[data-page="announcements.html"] .image-card .overlay,
  body[data-page="announcements.html"] .image-card .card-overlay,
  body[data-page="announcements.html"] .image-card .image-overlay{
    bottom: 24px !important;
    padding: 11px 13px 12px !important;
  }

  /* Mobile only: keep overlay cleaner by showing the main title clearly */
  body[data-page="projects.html"] .image-card .overlay p,
  body[data-page="projects.html"] .image-card .card-overlay p,
  body[data-page="projects.html"] .image-card .image-overlay p,
  body[data-page="announcements.html"] .image-card .overlay p,
  body[data-page="announcements.html"] .image-card .card-overlay p,
  body[data-page="announcements.html"] .image-card .image-overlay p{
    display: none !important;
  }

  body[data-page="projects.html"] .image-card .overlay h3,
  body[data-page="projects.html"] .image-card .card-overlay h3,
  body[data-page="projects.html"] .image-card .image-overlay h3,
  body[data-page="announcements.html"] .image-card .overlay h3,
  body[data-page="announcements.html"] .image-card .card-overlay h3,
  body[data-page="announcements.html"] .image-card .image-overlay h3{
    margin-bottom: 0 !important;
    line-height: 1.22 !important;
  }
}

@media (max-width: 480px){
  body[data-page="projects.html"] .image-card .overlay,
  body[data-page="projects.html"] .image-card .card-overlay,
  body[data-page="projects.html"] .image-card .image-overlay,
  body[data-page="announcements.html"] .image-card .overlay,
  body[data-page="announcements.html"] .image-card .card-overlay,
  body[data-page="announcements.html"] .image-card .image-overlay{
    bottom: 22px !important;
    padding: 10px 12px 11px !important;
  }
}


/* 2026-06-30 v44 final mobile overlay subtitle-only polish
   Scope: subtitle inside Community Initiatives and Announcements mobile image overlays only.
   Keeps current overlay position, spacing, card height, colors, layout, desktop, content, and functionality unchanged. */
@media (max-width: 768px){
  body[data-page="projects.html"] .image-card .overlay p,
  body[data-page="projects.html"] .image-card .card-overlay p,
  body[data-page="projects.html"] .image-card .image-overlay p,
  body[data-page="announcements.html"] .image-card .overlay p,
  body[data-page="announcements.html"] .image-card .card-overlay p,
  body[data-page="announcements.html"] .image-card .image-overlay p{
    display: none !important;
  }

  body[data-page="projects.html"] .image-card .overlay h3,
  body[data-page="projects.html"] .image-card .card-overlay h3,
  body[data-page="projects.html"] .image-card .image-overlay h3,
  body[data-page="announcements.html"] .image-card .overlay h3,
  body[data-page="announcements.html"] .image-card .card-overlay h3,
  body[data-page="announcements.html"] .image-card .image-overlay h3{
    margin-bottom: 0 !important;
  }
}


/* 2026-06-30 v45 minor desktop hero refinement only
   Scope: desktop homepage hero positioning only. Mobile, content, colors, navigation, workflow, and functionality unchanged. */
@media (min-width: 901px){
  body[data-page="index.html"] .hero .container,
  body[data-page="index.html"] .hero-grid,
  body[data-page="index.html"] .hero-content{
    align-items: center !important;
  }

  body[data-page="index.html"] .hero-content{
    transform: translateY(-18px) !important;
  }

  body[data-page="index.html"] .hero-visual,
  body[data-page="index.html"] .hero-emergency-card,
  body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
    transform: translateX(-22px) !important;
  }

  body[data-page="index.html"] .hero + .gradient-band,
  body[data-page="index.html"] .gradient-band.section-pad{
    padding-top: 20px !important;
    padding-bottom: 30px !important;
  }

  body[data-page="index.html"] .stats-grid{
    margin-top: 0 !important;
  }
}

@media (min-width: 1280px){
  body[data-page="index.html"] .hero-content{
    transform: translateY(-22px) !important;
  }

  body[data-page="index.html"] .hero-visual,
  body[data-page="index.html"] .hero-emergency-card,
  body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
    transform: translateX(-30px) !important;
  }
}


/* 2026-06-30 v46 desktop header refinement only
   Scope: desktop header alignment/spacing only.
   Mobile header/menu, content, navigation items, workflow, and functionality unchanged. */
@media (min-width: 901px){
  .site-header .container,
  .site-header .nav-container,
  .site-header .navbar,
  header .container{
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .site-header .container{
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .nav-menu{
    gap: 8px !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  .nav-link{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .nav-link.nav-contact{
    margin-left: 6px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (min-width: 1366px){
  .site-header .container,
  .site-header .nav-container,
  .site-header .navbar,
  header .container{
    max-width: 1200px !important;
  }
}

@media (min-width: 1600px){
  .site-header .container,
  .site-header .nav-container,
  .site-header .navbar,
  header .container{
    max-width: 1220px !important;
  }
}

@media (min-width: 1900px){
  .site-header .container,
  .site-header .nav-container,
  .site-header .navbar,
  header .container{
    max-width: 1240px !important;
  }
}


/* 2026-06-30 v47 services-to-announcements spacing refinement
   Scope: homepage Barangay Services and Announcements section spacing only.
   Colors, content, navigation, workflow, and functionality unchanged. */

/* Keep homepage service cards visually even */
body[data-page="index.html"] .service-card,
body[data-page="index.html"] .quick-card,
body[data-page="index.html"] .info-card{
  height: 100% !important;
}

/* Desktop / laptop refinement */
@media (min-width: 901px){
  body[data-page="index.html"] .gradient-band + .section-pad{
    padding-bottom: 46px !important;
  }

  body[data-page="index.html"] .gradient-band + .section-pad + .section-pad,
  body[data-page="index.html"] .gradient-band + .section-pad + .section-pad-sm{
    padding-top: 34px !important;
  }

  body[data-page="index.html"] .gradient-band + .section-pad + .section-pad .section-heading,
  body[data-page="index.html"] .gradient-band + .section-pad + .section-pad-sm .section-heading{
    margin-bottom: 22px !important;
  }

  body[data-page="index.html"] .gradient-band + .section-pad + .section-pad .card-grid,
  body[data-page="index.html"] .gradient-band + .section-pad + .section-pad-sm .card-grid{
    margin-top: 0 !important;
  }

  body[data-page="index.html"] .section-actions,
  body[data-page="index.html"] .view-all-wrap,
  body[data-page="index.html"] .view-all{
    margin-top: 22px !important;
  }
}

/* Tablet and mobile spacing balance */
@media (max-width: 900px){
  body[data-page="index.html"] .gradient-band + .section-pad{
    padding-bottom: 28px !important;
  }

  body[data-page="index.html"] .gradient-band + .section-pad + .section-pad,
  body[data-page="index.html"] .gradient-band + .section-pad + .section-pad-sm{
    padding-top: 22px !important;
  }

  body[data-page="index.html"] .gradient-band + .section-pad + .section-pad .section-heading,
  body[data-page="index.html"] .gradient-band + .section-pad + .section-pad-sm .section-heading{
    margin-bottom: 16px !important;
  }

  body[data-page="index.html"] .gradient-band + .section-pad + .section-pad .card-grid,
  body[data-page="index.html"] .gradient-band + .section-pad + .section-pad-sm .card-grid{
    gap: 12px !important;
  }

  body[data-page="index.html"] .section-actions,
  body[data-page="index.html"] .view-all-wrap,
  body[data-page="index.html"] .view-all{
    margin-top: 18px !important;
  }

  body[data-page="index.html"] a[href*="announcements"],
  body[data-page="index.html"] .view-all a,
  body[data-page="index.html"] .section-actions a{
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px){
  body[data-page="index.html"] .gradient-band + .section-pad{
    padding-bottom: 24px !important;
  }

  body[data-page="index.html"] .gradient-band + .section-pad + .section-pad,
  body[data-page="index.html"] .gradient-band + .section-pad + .section-pad-sm{
    padding-top: 18px !important;
  }

  body[data-page="index.html"] .gradient-band + .section-pad + .section-pad .section-heading,
  body[data-page="index.html"] .gradient-band + .section-pad + .section-pad-sm .section-heading{
    margin-bottom: 14px !important;
  }

  body[data-page="index.html"] .section-actions,
  body[data-page="index.html"] .view-all-wrap,
  body[data-page="index.html"] .view-all{
    margin-top: 16px !important;
  }
}


/* 2026-06-30 v48 desktop header layout fix
   Scope: desktop/laptop header only.
   Fixes brand text overlap/cutoff and keeps hero properly below header.
   Mobile header/menu, page content, colors, workflow, and functionality unchanged. */
@media (min-width: 901px){
  .site-header{
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  .site-header .container,
  .site-header .nav-container,
  .site-header .navbar,
  header .container{
    max-width: 1240px !important;
    width: min(100% - 48px, 1240px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .site-header .container,
  .site-header .navbar{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 28px !important;
  }

  .brand{
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    flex: 0 0 260px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .brand img{
    flex: 0 0 auto !important;
  }

  .brand span{
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .brand strong,
  .brand small{
    display: block !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .nav-menu{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .nav-link{
    flex: 0 0 auto !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    white-space: nowrap !important;
  }

  .nav-link.nav-contact{
    margin-left: 6px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    align-self: center !important;
  }

  body[data-page="index.html"] .hero,
  .page-hero{
    padding-top: var(--header-safe-space, 0px) !important;
  }
}

/* 1366px and smaller laptops: keep full menu fitting cleanly */
@media (min-width: 901px) and (max-width: 1420px){
  .site-header .container,
  .site-header .nav-container,
  .site-header .navbar,
  header .container{
    width: min(100% - 36px, 1188px) !important;
    max-width: 1188px !important;
  }

  .site-header .container,
  .site-header .navbar{
    gap: 22px !important;
  }

  .brand{
    width: 248px !important;
    min-width: 248px !important;
    max-width: 248px !important;
    flex-basis: 248px !important;
  }

  .nav-menu{
    gap: 4px !important;
  }

  .nav-link{
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: .86rem !important;
  }

  .nav-link.nav-contact{
    margin-left: 5px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
}

/* 1536px / 1440px refinement */
@media (min-width: 1421px) and (max-width: 1599px){
  .site-header .container,
  .site-header .nav-container,
  .site-header .navbar,
  header .container{
    width: min(100% - 44px, 1210px) !important;
    max-width: 1210px !important;
  }

  .brand{
    width: 256px !important;
    min-width: 256px !important;
    max-width: 256px !important;
    flex-basis: 256px !important;
  }

  .nav-menu{
    gap: 6px !important;
  }
}

/* Large desktop: prevent excessive stretching */
@media (min-width: 1600px){
  .site-header .container,
  .site-header .nav-container,
  .site-header .navbar,
  header .container{
    width: min(100% - 64px, 1240px) !important;
    max-width: 1240px !important;
  }
}


/* 2026-06-30 v49 desktop header spacing final refinement
   Scope: desktop header spacing only.
   Mobile layout/menu, colors, content, workflow, and functionality unchanged. */
@media (min-width: 901px){
  .site-header .container,
  .site-header .nav-container,
  .site-header .navbar,
  header .container{
    max-width: 1260px !important;
    width: min(100% - 56px, 1260px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .site-header .container,
  .site-header .navbar{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 42px !important;
  }

  .brand{
    width: 246px !important;
    min-width: 246px !important;
    max-width: 246px !important;
    flex: 0 0 246px !important;
    overflow: visible !important;
  }

  .brand span,
  .brand strong,
  .brand small{
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .nav-menu{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .nav-link{
    white-space: nowrap !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .nav-link.nav-contact{
    margin-left: 8px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    align-self: center !important;
  }
}

/* Laptop width refinement: keep more space after brand while preserving one-line nav */
@media (min-width: 901px) and (max-width: 1420px){
  .site-header .container,
  .site-header .nav-container,
  .site-header .navbar,
  header .container{
    max-width: 1208px !important;
    width: min(100% - 40px, 1208px) !important;
  }

  .site-header .container,
  .site-header .navbar{
    gap: 34px !important;
  }

  .brand{
    width: 238px !important;
    min-width: 238px !important;
    max-width: 238px !important;
    flex-basis: 238px !important;
  }

  .nav-menu{
    gap: 3px !important;
  }

  .nav-link{
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: .84rem !important;
  }

  .nav-link.nav-contact{
    margin-left: 7px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
}

/* 1440px / 1536px refinement */
@media (min-width: 1421px) and (max-width: 1599px){
  .site-header .container,
  .site-header .nav-container,
  .site-header .navbar,
  header .container{
    max-width: 1236px !important;
    width: min(100% - 48px, 1236px) !important;
  }

  .site-header .container,
  .site-header .navbar{
    gap: 40px !important;
  }

  .brand{
    width: 242px !important;
    min-width: 242px !important;
    max-width: 242px !important;
    flex-basis: 242px !important;
  }
}

/* Large desktop: centered, not stretched */
@media (min-width: 1600px){
  .site-header .container,
  .site-header .nav-container,
  .site-header .navbar,
  header .container{
    max-width: 1260px !important;
    width: min(100% - 64px, 1260px) !important;
  }

  .site-header .container,
  .site-header .navbar{
    gap: 44px !important;
  }
}


/* 2026-06-30 v50 desktop header minor polish only
   Scope: desktop header brand/menu spacing only.
   Mobile layout/menu, colors, content, workflow, and functionality unchanged. */
@media (min-width: 901px){
  .site-header .container,
  .site-header .nav-container,
  .site-header .navbar,
  header .container{
    max-width: 1256px !important;
    width: min(100% - 56px, 1256px) !important;
  }

  .site-header .container,
  .site-header .navbar{
    gap: 40px !important;
  }

  .brand{
    width: 238px !important;
    min-width: 238px !important;
    max-width: 238px !important;
    flex: 0 0 238px !important;
    padding-left: 12px !important;
    padding-right: 13px !important;
  }

  .brand img{
    width: inherit;
  }

  .brand span,
  .brand strong,
  .brand small{
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .nav-menu{
    gap: 4px !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  .nav-link{
    white-space: nowrap !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .nav-link.nav-contact{
    margin-left: 7px !important;
    align-self: center !important;
  }
}

@media (min-width: 901px) and (max-width: 1420px){
  .site-header .container,
  .site-header .nav-container,
  .site-header .navbar,
  header .container{
    max-width: 1204px !important;
    width: min(100% - 40px, 1204px) !important;
  }

  .site-header .container,
  .site-header .navbar{
    gap: 32px !important;
  }

  .brand{
    width: 234px !important;
    min-width: 234px !important;
    max-width: 234px !important;
    flex-basis: 234px !important;
    padding-left: 11px !important;
    padding-right: 12px !important;
  }

  .nav-menu{
    gap: 3px !important;
  }

  .nav-link{
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

@media (min-width: 1421px) and (max-width: 1599px){
  .site-header .container,
  .site-header .nav-container,
  .site-header .navbar,
  header .container{
    max-width: 1232px !important;
    width: min(100% - 48px, 1232px) !important;
  }

  .brand{
    width: 236px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    flex-basis: 236px !important;
  }
}

@media (min-width: 1600px){
  .site-header .container,
  .site-header .nav-container,
  .site-header .navbar,
  header .container{
    max-width: 1256px !important;
    width: min(100% - 64px, 1256px) !important;
  }
}


/* 2026-06-30 v51 desktop header-to-hero gap fix
   Scope: desktop header/hero vertical spacing only.
   Keeps current header logo, navigation spacing, Contact Us button, mobile layout, content, workflow, and functionality unchanged. */
@media (min-width: 901px){
  /* Remove unnecessary spacing between sticky header and hero */
  .site-header{
    margin-bottom: 0 !important;
  }

  .site-header + main,
  header + main,
  main{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body[data-page="index.html"] .hero{
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-height: calc(100vh - 72px) !important;
  }

  body[data-page="index.html"] .hero .container,
  body[data-page="index.html"] .hero-grid{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Keep hero content visible sooner without changing design */
  body[data-page="index.html"] .hero-content{
    transform: translateY(-30px) !important;
  }

  body[data-page="index.html"] .hero-visual,
  body[data-page="index.html"] .hero-emergency-card,
  body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
    transform: translate(-30px, -10px) !important;
  }

  body[data-page="index.html"] .hero + .gradient-band,
  body[data-page="index.html"] .gradient-band.section-pad{
    margin-top: 0 !important;
  }
}

@media (min-width: 1366px) and (max-width: 1599px){
  body[data-page="index.html"] .hero{
    min-height: calc(100vh - 70px) !important;
  }

  body[data-page="index.html"] .hero-content{
    transform: translateY(-28px) !important;
  }

  body[data-page="index.html"] .hero-visual,
  body[data-page="index.html"] .hero-emergency-card,
  body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
    transform: translate(-26px, -8px) !important;
  }
}

@media (min-width: 1600px){
  body[data-page="index.html"] .hero{
    min-height: calc(100vh - 74px) !important;
  }

  body[data-page="index.html"] .hero-content{
    transform: translateY(-32px) !important;
  }

  body[data-page="index.html"] .hero-visual,
  body[data-page="index.html"] .hero-emergency-card,
  body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
    transform: translate(-32px, -10px) !important;
  }
}


/* 2026-06-30 v52 restore hero image behind feature cards
   Scope: homepage hero/stat band only.
   Restores the original look where the hero image continues behind the feature cards. */
@media (min-width: 901px){
  body[data-page="index.html"] .hero{
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }

  body[data-page="index.html"] .hero + .gradient-band,
  body[data-page="index.html"] .gradient-band.section-pad{
    margin-top: -122px !important;
    padding-top: 24px !important;
    padding-bottom: 26px !important;
    background: linear-gradient(90deg, rgba(8, 45, 95, .86), rgba(20, 188, 211, .72)) !important;
    position: relative !important;
    z-index: 3 !important;
  }

  body[data-page="index.html"] .stats-grid{
    position: relative !important;
    z-index: 4 !important;
  }
}

@media (min-width: 1366px) and (max-width: 1599px){
  body[data-page="index.html"] .hero + .gradient-band,
  body[data-page="index.html"] .gradient-band.section-pad{
    margin-top: -116px !important;
  }
}

@media (min-width: 1600px){
  body[data-page="index.html"] .hero + .gradient-band,
  body[data-page="index.html"] .gradient-band.section-pad{
    margin-top: -126px !important;
  }
}

/* Keep mobile from being affected by this desktop restoration */
@media (max-width: 900px){
  body[data-page="index.html"] .hero + .gradient-band,
  body[data-page="index.html"] .gradient-band.section-pad{
    margin-top: 0 !important;
  }
}


/* 2026-06-30 v53 desktop hero separation fix
   Scope: desktop homepage hero / emergency card / feature cards only.
   Separates the emergency card from the feature cards and removes overlap. */
@media (min-width: 901px){

  /* Keep the hero self-contained with enough height */
  body[data-page="index.html"] .hero{
    min-height: 700px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    overflow: hidden !important;
  }

  /* Keep the left hero content in a stable, readable position */
  body[data-page="index.html"] .hero-content{
    max-width: 58% !important;
    padding: 92px 0 118px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Keep the emergency card fully inside the hero area and away from the feature cards */
  body[data-page="index.html"] .hero-card,
  body[data-page="index.html"] .hero-emergency-card,
  body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
    position: absolute !important;
    top: 122px !important;
    right: 5.2% !important;
    bottom: auto !important;
    transform: none !important;
    width: min(340px, 30vw) !important;
    z-index: 3 !important;
  }

  /* Give the feature cards their own clean section below the hero */
  body[data-page="index.html"] .hero + .gradient-band,
  body[data-page="index.html"] .gradient-band.section-pad{
    margin-top: 0 !important;
    padding-top: 28px !important;
    padding-bottom: 30px !important;
    background: linear-gradient(90deg, rgba(8,45,95,.96), rgba(19,92,188,.95), rgba(25,180,210,.94)) !important;
    position: relative !important;
    z-index: 1 !important;
  }

  body[data-page="index.html"] .stats-grid{
    margin-top: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  body[data-page="index.html"] .stats-grid div{
    height: 100% !important;
  }
}

/* Common laptop screens */
@media (min-width: 1366px) and (max-width: 1535px){
  body[data-page="index.html"] .hero{
    min-height: 680px !important;
  }

  body[data-page="index.html"] .hero-content{
    max-width: 57% !important;
    padding: 86px 0 112px !important;
  }

  body[data-page="index.html"] .hero-card,
  body[data-page="index.html"] .hero-emergency-card,
  body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
    top: 114px !important;
    right: 4.6% !important;
    width: min(332px, 31vw) !important;
  }
}

/* 1440 / 1536 balance */
@media (min-width: 1536px) and (max-width: 1919px){
  body[data-page="index.html"] .hero{
    min-height: 700px !important;
  }

  body[data-page="index.html"] .hero-content{
    max-width: 58% !important;
    padding: 92px 0 118px !important;
  }

  body[data-page="index.html"] .hero-card,
  body[data-page="index.html"] .hero-emergency-card,
  body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
    top: 122px !important;
    right: 5.2% !important;
    width: min(340px, 29vw) !important;
  }
}

/* Large desktop */
@media (min-width: 1920px){
  body[data-page="index.html"] .hero{
    min-height: 720px !important;
  }

  body[data-page="index.html"] .hero-content{
    max-width: 57% !important;
    padding: 96px 0 122px !important;
  }

  body[data-page="index.html"] .hero-card,
  body[data-page="index.html"] .hero-emergency-card,
  body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
    top: 126px !important;
    right: 6% !important;
    width: 340px !important;
  }
}

/* Preserve the established mobile behavior */
@media (max-width: 900px){
  body[data-page="index.html"] .hero + .gradient-band,
  body[data-page="index.html"] .gradient-band.section-pad{
    margin-top: 0 !important;
  }
}


/* 2026-06-30 v54 desktop brand container only fix
   Scope: desktop logo/brand container only.
   Mobile layout/menu, hero section, colors, content, navigation items, workflow, and functionality unchanged. */
@media (min-width: 901px){
  .site-header .container,
  .site-header .navbar{
    gap: 34px !important;
  }

  .brand{
    width: auto !important;
    min-width: 214px !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding-left: 8px !important;
    padding-right: 12px !important;
    gap: 9px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .brand img{
    flex: 0 0 auto !important;
  }

  .brand span{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .brand strong,
  .brand small{
    display: block !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .nav-menu{
    margin-left: 10px !important;
    align-items: center !important;
  }

  .nav-link:first-child{
    margin-left: 0 !important;
  }
}

/* Laptop spacing: keep brand compact while preserving a clean Home gap */
@media (min-width: 901px) and (max-width: 1420px){
  .site-header .container,
  .site-header .navbar{
    gap: 28px !important;
  }

  .brand{
    min-width: 208px !important;
    padding-left: 7px !important;
    padding-right: 10px !important;
    gap: 8px !important;
  }

  .nav-menu{
    margin-left: 8px !important;
  }
}

/* Wider desktops: keep the brand natural, not bulky */
@media (min-width: 1421px){
  .brand{
    min-width: 212px !important;
    padding-left: 8px !important;
    padding-right: 11px !important;
  }

  .nav-menu{
    margin-left: 12px !important;
  }
}


/* 2026-06-30 v55 desktop brand padding final tune
   Scope: desktop logo/brand container spacing only.
   Keeps logo size, mobile, hero, colors, content, navigation items, workflow, and functionality unchanged. */
@media (min-width: 901px){
  .brand{
    width: fit-content !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding-left: 7px !important;
    padding-right: 8px !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  .brand img{
    flex: 0 0 auto !important;
  }

  .brand span{
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .brand strong,
  .brand small{
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .nav-menu{
    margin-left: 16px !important;
    align-items: center !important;
  }
}

@media (min-width: 901px) and (max-width: 1420px){
  .brand{
    padding-left: 6px !important;
    padding-right: 7px !important;
    gap: 8px !important;
  }

  .nav-menu{
    margin-left: 14px !important;
  }
}

@media (min-width: 1421px){
  .brand{
    padding-left: 7px !important;
    padding-right: 8px !important;
  }

  .nav-menu{
    margin-left: 18px !important;
  }
}


/* 2026-06-30 v56 very small desktop brand padding polish
   Scope: desktop logo/brand container padding only.
   Hero, mobile layout, colors, content, navigation, workflow, and functionality unchanged. */
@media (min-width: 901px){
  .brand{
    padding-left: 5px !important;
    padding-right: 6px !important;
    gap: 8px !important;
    width: fit-content !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    overflow: visible !important;
    align-items: center !important;
  }

  .brand img{
    flex: 0 0 auto !important;
  }

  .brand span,
  .brand strong,
  .brand small{
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .nav-menu{
    margin-left: 16px !important;
  }
}

@media (min-width: 901px) and (max-width: 1420px){
  .brand{
    padding-left: 5px !important;
    padding-right: 6px !important;
  }

  .nav-menu{
    margin-left: 14px !important;
  }
}


/* 2026-06-30 v57 desktop brand tight container final
   Scope: desktop logo/brand container only.
   Mobile layout/menu, hero section, colors, content, navigation, workflow, and functionality unchanged. */
@media (min-width: 901px){
  .brand{
    box-sizing: border-box !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;

    /* Tight, clean breathing space only */
    padding-left: 4px !important;
    padding-right: 5px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    gap: 7px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  .brand img{
    flex: 0 0 auto !important;
    width: var(--brand-logo-size, 48px) !important;
    height: var(--brand-logo-size, 48px) !important;
  }

  .brand span{
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  .brand strong,
  .brand small{
    display: block !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* Keep a clear separation before Home without making the brand box bulky */
  .nav-menu{
    margin-left: 18px !important;
    align-items: center !important;
  }
}

@media (min-width: 901px) and (max-width: 1420px){
  .brand{
    padding-left: 4px !important;
    padding-right: 5px !important;
    gap: 7px !important;
  }

  .nav-menu{
    margin-left: 16px !important;
  }
}

@media (min-width: 1421px){
  .nav-menu{
    margin-left: 20px !important;
  }
}


/* 2026-06-30 Contact page information/form vertical alignment fix
   Scope: Contact page Barangay Information and Inquiry Form alignment only.
   Content, colors, navigation, workflow, functionality, mobile menu, and other sections unchanged. */

@media (min-width: 901px){
  body[data-page="contact.html"] .contact-grid,
  body[data-page="contact.html"] .contact-layout,
  body[data-page="contact.html"] .split-layout,
  body[data-page="contact.html"] .form-grid{
    align-items: start !important;
  }

  body[data-page="contact.html"] .contact-grid > *,
  body[data-page="contact.html"] .contact-layout > *,
  body[data-page="contact.html"] .split-layout > *,
  body[data-page="contact.html"] .form-grid > *{
    margin-top: 0 !important;
  }

  body[data-page="contact.html"] .contact-card,
  body[data-page="contact.html"] .info-card,
  body[data-page="contact.html"] .form-card,
  body[data-page="contact.html"] .inquiry-form{
    align-self: start !important;
  }

  body[data-page="contact.html"] .contact-card h2,
  body[data-page="contact.html"] .info-card h2,
  body[data-page="contact.html"] .form-card h2,
  body[data-page="contact.html"] .inquiry-form h2{
    margin-top: 0 !important;
  }
}

/* Preserve mobile stacking/layout */
@media (max-width: 900px){
  body[data-page="contact.html"] .contact-grid,
  body[data-page="contact.html"] .contact-layout,
  body[data-page="contact.html"] .split-layout,
  body[data-page="contact.html"] .form-grid{
    align-items: initial !important;
  }
}


/* 2026-06-30 Contact page Information / Inquiry Form card consistency fix
   Scope: Contact page Barangay Information and Inquiry Form cards only.
   Content, colors, navigation, workflow, functionality, mobile menu, and other sections unchanged. */

@media (min-width: 901px){
  /* Keep both contact columns starting from the same top line */
  body[data-page="contact.html"] .contact-grid,
  body[data-page="contact.html"] .contact-layout,
  body[data-page="contact.html"] .split-layout,
  body[data-page="contact.html"] .form-grid{
    align-items: stretch !important;
    gap: clamp(22px, 2.2vw, 34px) !important;
  }

  body[data-page="contact.html"] .contact-grid > *,
  body[data-page="contact.html"] .contact-layout > *,
  body[data-page="contact.html"] .split-layout > *,
  body[data-page="contact.html"] .form-grid > *{
    margin-top: 0 !important;
    align-self: stretch !important;
  }

  /* Match card shell treatment for Barangay Information and Inquiry Form */
  body[data-page="contact.html"] .contact-card,
  body[data-page="contact.html"] .info-card,
  body[data-page="contact.html"] .form-card,
  body[data-page="contact.html"] .inquiry-form{
    margin-top: 0 !important;
    align-self: stretch !important;
    height: 100% !important;
    border-radius: 24px !important;
    padding: clamp(24px, 2vw, 32px) !important;
    box-shadow: 0 18px 45px rgba(8, 38, 77, .10) !important;
    border: 1px solid rgba(21, 94, 239, .10) !important;
    overflow: hidden !important;
  }

  /* Match header spacing/style treatment without changing typography family or colors */
  body[data-page="contact.html"] .contact-card h2,
  body[data-page="contact.html"] .info-card h2,
  body[data-page="contact.html"] .form-card h2,
  body[data-page="contact.html"] .inquiry-form h2,
  body[data-page="contact.html"] .contact-card h3,
  body[data-page="contact.html"] .info-card h3,
  body[data-page="contact.html"] .form-card h3,
  body[data-page="contact.html"] .inquiry-form h3{
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    line-height: 1.15 !important;
  }

  body[data-page="contact.html"] .contact-card > p:first-of-type,
  body[data-page="contact.html"] .info-card > p:first-of-type,
  body[data-page="contact.html"] .form-card > p:first-of-type,
  body[data-page="contact.html"] .inquiry-form > p:first-of-type{
    margin-top: 0 !important;
  }

  /* Keep internal form/list spacing consistent, not vertically offset */
  body[data-page="contact.html"] .contact-card form,
  body[data-page="contact.html"] .info-card form,
  body[data-page="contact.html"] .form-card form,
  body[data-page="contact.html"] .inquiry-form form{
    margin-top: 18px !important;
  }

  body[data-page="contact.html"] .contact-list,
  body[data-page="contact.html"] .contact-info-list{
    margin-top: 18px !important;
  }
}

/* Preserve mobile layout/stacking; only keep same visual card treatment if already stacked */
@media (max-width: 900px){
  body[data-page="contact.html"] .contact-card,
  body[data-page="contact.html"] .info-card,
  body[data-page="contact.html"] .form-card,
  body[data-page="contact.html"] .inquiry-form{
    border-radius: 22px !important;
  }
}


/* 2026-06-30 Barangay Hall Information animation refinement
   Scope: Contact page Barangay Hall / Barangay Information card decorative animation only.
   Content, colors, layout, navigation, workflow, functionality, mobile menu, and form behavior unchanged. */

/* Remove the oblong decorative animation from the Barangay Information / Barangay Hall card */
body[data-page="contact.html"] .contact-card::after,
body[data-page="contact.html"] .info-card::after{
  content: none !important;
  display: none !important;
}

/* Replace it with a subtle clean pulse-ring accent that does not overlap the text area */
body[data-page="contact.html"] .contact-card::before,
body[data-page="contact.html"] .info-card::before{
  content: "" !important;
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(21, 94, 239, .18) !important;
  background:
    radial-gradient(circle at center, rgba(21, 94, 239, .12) 0 26%, transparent 27%),
    radial-gradient(circle at center, rgba(25, 180, 210, .10) 0 52%, transparent 53%) !important;
  opacity: .9 !important;
  pointer-events: none !important;
  animation: barangayInfoPulse 3.8s ease-in-out infinite !important;
}

@keyframes barangayInfoPulse{
  0%, 100%{
    opacity: .55;
    transform: scale(.96);
  }
  50%{
    opacity: .95;
    transform: scale(1.06);
  }
}

/* Keep the replacement accent smaller on mobile so it stays out of the content */
@media (max-width: 900px){
  body[data-page="contact.html"] .contact-card::before,
  body[data-page="contact.html"] .info-card::before{
    width: 34px !important;
    height: 34px !important;
    top: 14px !important;
    right: 14px !important;
  }
}


/* 2026-06-30 Contact page card animation refinement
   Scope: Barangay Hall Information and Inquiry Form card decorative animation only.
   Content, colors, layout, navigation, workflow, functionality, mobile menu, and form behavior unchanged. */

/* Remove previous oblong / pulse decorative accents from both contact cards */
body[data-page="contact.html"] .contact-card::before,
body[data-page="contact.html"] .contact-card::after,
body[data-page="contact.html"] .info-card::before,
body[data-page="contact.html"] .info-card::after,
body[data-page="contact.html"] .form-card::before,
body[data-page="contact.html"] .form-card::after,
body[data-page="contact.html"] .inquiry-form::before,
body[data-page="contact.html"] .inquiry-form::after{
  content: none !important;
  display: none !important;
}

/* Subtle animated top highlight for Barangay Hall / Information card */
body[data-page="contact.html"] .contact-card,
body[data-page="contact.html"] .info-card{
  position: relative !important;
  overflow: hidden !important;
  background-image:
    linear-gradient(90deg, rgba(21,94,239,.16), rgba(25,180,210,.14), rgba(21,94,239,.16)),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.98)) !important;
  background-size: 220% 4px, 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: 0 0, 0 0 !important;
  animation: contactCardTopFlow 7s ease-in-out infinite !important;
}

/* Subtle animated top highlight for Inquiry Form card */
body[data-page="contact.html"] .form-card,
body[data-page="contact.html"] .inquiry-form{
  position: relative !important;
  overflow: hidden !important;
  background-image:
    linear-gradient(90deg, rgba(25,180,210,.14), rgba(21,94,239,.16), rgba(25,180,210,.14)),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.98)) !important;
  background-size: 220% 4px, 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: 100% 0, 0 0 !important;
  animation: inquiryCardTopFlow 7s ease-in-out infinite !important;
}

/* Clean hover lift only on pointer devices */
@media (hover: hover) and (pointer: fine){
  body[data-page="contact.html"] .contact-card,
  body[data-page="contact.html"] .info-card,
  body[data-page="contact.html"] .form-card,
  body[data-page="contact.html"] .inquiry-form{
    transition: transform .25s ease, box-shadow .25s ease !important;
  }

  body[data-page="contact.html"] .contact-card:hover,
  body[data-page="contact.html"] .info-card:hover,
  body[data-page="contact.html"] .form-card:hover,
  body[data-page="contact.html"] .inquiry-form:hover{
    transform: translateY(-3px) !important;
    box-shadow: 0 22px 50px rgba(8, 38, 77, .13) !important;
  }
}

@keyframes contactCardTopFlow{
  0%, 100%{
    background-position: 0 0, 0 0;
  }
  50%{
    background-position: 100% 0, 0 0;
  }
}

@keyframes inquiryCardTopFlow{
  0%, 100%{
    background-position: 100% 0, 0 0;
  }
  50%{
    background-position: 0 0, 0 0;
  }
}

/* Respect reduced motion settings */
@media (prefers-reduced-motion: reduce){
  body[data-page="contact.html"] .contact-card,
  body[data-page="contact.html"] .info-card,
  body[data-page="contact.html"] .form-card,
  body[data-page="contact.html"] .inquiry-form{
    animation: none !important;
    transition: none !important;
  }
}


/* 2026-06-30 Footer logo padding slight reduction
   Scope: footer logo/brand padding only.
   No changes to layout, content, colors, navigation, workflow, functionality, mobile menu, or footer structure. */

/* Slightly reduce the visible padding around the footer logo/brand only */
.site-footer .footer-brand,
footer .footer-brand{
  padding: 4px 5px !important;
  gap: 8px !important;
}

.site-footer .footer-brand img,
footer .footer-brand img{
  margin: 0 !important;
}

/* Keep mobile safe and compact */
@media (max-width: 900px){
  .site-footer .footer-brand,
  footer .footer-brand{
    padding: 3px 4px !important;
    gap: 7px !important;
  }
}


/* 2026-06-30 Footer logo padding minimal correction
   Scope: footer logo/brand padding only.
   No layout, content, colors, navigation, workflow, functionality, mobile menu, or footer structure changes. */

.site-footer .footer-brand,
footer .footer-brand{
  padding: 1px 2px !important;
  gap: 6px !important;
}

.site-footer .footer-brand img,
footer .footer-brand img{
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 900px){
  .site-footer .footer-brand,
  footer .footer-brand{
    padding: 1px 2px !important;
    gap: 6px !important;
  }
}


/* 2026-06-30 Modern Google Map refinement
   Scope: Contact page map section only.
   Content, colors, navigation, workflow, functionality, mobile menu, contact cards, and footer unchanged. */

body[data-page="contact.html"] .map-section,
body[data-page="contact.html"] .map-section-modern{
  position: relative !important;
}

body[data-page="contact.html"] .map-box,
body[data-page="contact.html"] .map-box-modern,
body[data-page="contact.html"] .map-card,
body[data-page="contact.html"] .map-card-modern{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border: 1px solid rgba(21, 94, 239, .12) !important;
  box-shadow: 0 22px 55px rgba(8, 38, 77, .13) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,247,255,.92)) !important;
}

body[data-page="contact.html"] .map-box iframe,
body[data-page="contact.html"] .map-box-modern iframe,
body[data-page="contact.html"] .map-card iframe,
body[data-page="contact.html"] .map-card-modern iframe{
  display: block !important;
  width: 100% !important;
  min-height: clamp(330px, 38vw, 460px) !important;
  border: 0 !important;
  filter: saturate(1.05) contrast(1.02) !important;
}

body[data-page="contact.html"] .map-location-panel{
  position: absolute !important;
  left: clamp(18px, 2vw, 28px) !important;
  bottom: clamp(18px, 2vw, 28px) !important;
  width: min(360px, calc(100% - 36px)) !important;
  padding: 18px 20px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(21, 94, 239, .12) !important;
  box-shadow: 0 18px 42px rgba(8, 38, 77, .16) !important;
  backdrop-filter: blur(12px) !important;
  z-index: 2 !important;
}

body[data-page="contact.html"] .map-chip{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(21, 94, 239, .10) !important;
  color: #155eef !important;
  font-weight: 800 !important;
  font-size: .72rem !important;
  letter-spacing: .02em !important;
  margin-bottom: 9px !important;
}

body[data-page="contact.html"] .map-location-panel strong{
  display: block !important;
  color: #0b2a5b !important;
  font-size: clamp(1rem, .9vw, 1.14rem) !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
}

body[data-page="contact.html"] .map-location-panel p{
  margin: 0 !important;
  color: #52677f !important;
  font-size: .86rem !important;
  line-height: 1.45 !important;
}

@media (max-width: 900px){
  body[data-page="contact.html"] .map-box,
  body[data-page="contact.html"] .map-box-modern,
  body[data-page="contact.html"] .map-card,
  body[data-page="contact.html"] .map-card-modern{
    border-radius: 22px !important;
  }

  body[data-page="contact.html"] .map-box iframe,
  body[data-page="contact.html"] .map-box-modern iframe,
  body[data-page="contact.html"] .map-card iframe,
  body[data-page="contact.html"] .map-card-modern iframe{
    min-height: 320px !important;
  }

  body[data-page="contact.html"] .map-location-panel{
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    margin: 12px !important;
    padding: 15px 16px !important;
    border-radius: 18px !important;
  }
}


/* 2026-06-30 Google Map modern polish
   Scope: Contact page Google Map section only.
   Removed helper sentence and refined the map visual treatment.
   Content outside the map, colors, navigation, workflow, functionality, mobile menu, contact cards, and footer unchanged. */

body[data-page="contact.html"] .map-box,
body[data-page="contact.html"] .map-box-modern,
body[data-page="contact.html"] .map-card,
body[data-page="contact.html"] .map-card-modern{
  border-radius: 30px !important;
  border: 1px solid rgba(21, 94, 239, .14) !important;
  box-shadow:
    0 24px 60px rgba(8, 38, 77, .14),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,247,255,.94)) !important;
  isolation: isolate !important;
}

body[data-page="contact.html"] .map-box::before,
body[data-page="contact.html"] .map-box-modern::before,
body[data-page="contact.html"] .map-card::before,
body[data-page="contact.html"] .map-card-modern::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(11,42,91,.08), transparent 24%, transparent 76%, rgba(11,42,91,.10)),
    radial-gradient(circle at 18% 18%, rgba(25,180,210,.16), transparent 28%),
    radial-gradient(circle at 82% 82%, rgba(21,94,239,.13), transparent 30%) !important;
  mix-blend-mode: multiply !important;
}

body[data-page="contact.html"] .map-box iframe,
body[data-page="contact.html"] .map-box-modern iframe,
body[data-page="contact.html"] .map-card iframe,
body[data-page="contact.html"] .map-card-modern iframe{
  min-height: clamp(350px, 38vw, 480px) !important;
  filter: saturate(1.08) contrast(1.04) brightness(1.01) !important;
}

body[data-page="contact.html"] .map-location-panel{
  width: min(340px, calc(100% - 36px)) !important;
  padding: 16px 18px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 18px 44px rgba(8, 38, 77, .17) !important;
  z-index: 3 !important;
}

body[data-page="contact.html"] .map-location-panel p{
  display: none !important;
}

body[data-page="contact.html"] .map-location-panel strong{
  margin-bottom: 0 !important;
}

@media (hover: hover) and (pointer: fine){
  body[data-page="contact.html"] .map-box,
  body[data-page="contact.html"] .map-box-modern,
  body[data-page="contact.html"] .map-card,
  body[data-page="contact.html"] .map-card-modern{
    transition: box-shadow .25s ease, transform .25s ease !important;
  }

  body[data-page="contact.html"] .map-box:hover,
  body[data-page="contact.html"] .map-box-modern:hover,
  body[data-page="contact.html"] .map-card:hover,
  body[data-page="contact.html"] .map-card-modern:hover{
    transform: translateY(-2px) !important;
    box-shadow:
      0 28px 68px rgba(8, 38, 77, .17),
      inset 0 1px 0 rgba(255,255,255,.76) !important;
  }
}

@media (max-width: 900px){
  body[data-page="contact.html"] .map-box,
  body[data-page="contact.html"] .map-box-modern,
  body[data-page="contact.html"] .map-card,
  body[data-page="contact.html"] .map-card-modern{
    border-radius: 24px !important;
  }

  body[data-page="contact.html"] .map-location-panel{
    margin: 12px !important;
    width: auto !important;
    padding: 14px 15px !important;
  }
}


/* 2026-06-30 Google Map clean embed update
   Scope: Contact page Google Map iframe/source only and visual polish.
   Replaces Place/review-style embed with a cleaner location map view to avoid showing review UI.
   Other content, colors, navigation, workflow, functionality, mobile menu, contact cards, and footer unchanged. */

body[data-page="contact.html"] .map-box iframe,
body[data-page="contact.html"] .map-box-modern iframe,
body[data-page="contact.html"] .map-card iframe,
body[data-page="contact.html"] .map-card-modern iframe{
  width: 100% !important;
  min-height: clamp(350px, 38vw, 480px) !important;
  border: 0 !important;
  display: block !important;
}


/* 2026-06-30 Contact page form/card text weight balance
   Scope: Contact page Barangay Hall Information and Send an Inquiry text balance only.
   Content, colors, layout, navigation, workflow, functionality, mobile menu, map, and footer unchanged. */

/* Balance the main contact card headings so they are not overly bold */
body[data-page="contact.html"] .contact-card h2,
body[data-page="contact.html"] .info-card h2,
body[data-page="contact.html"] .form-card h2,
body[data-page="contact.html"] .inquiry-form h2,
body[data-page="contact.html"] .contact-form h2{
  font-weight: 750 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.16 !important;
}

/* Balance smaller headers and labels inside both cards */
body[data-page="contact.html"] .contact-card h3,
body[data-page="contact.html"] .info-card h3,
body[data-page="contact.html"] .form-card h3,
body[data-page="contact.html"] .inquiry-form h3,
body[data-page="contact.html"] .contact-info-label,
body[data-page="contact.html"] label{
  font-weight: 650 !important;
  letter-spacing: -0.005em !important;
}

/* Keep body/form text readable and visually lighter */
body[data-page="contact.html"] .contact-card p,
body[data-page="contact.html"] .info-card p,
body[data-page="contact.html"] .form-card p,
body[data-page="contact.html"] .inquiry-form p,
body[data-page="contact.html"] .contact-info-value,
body[data-page="contact.html"] input,
body[data-page="contact.html"] textarea,
body[data-page="contact.html"] select{
  font-weight: 400 !important;
}

/* Keep CTA/button text clear but not too heavy */
body[data-page="contact.html"] .contact-form button,
body[data-page="contact.html"] .inquiry-form button,
body[data-page="contact.html"] .form-card button{
  font-weight: 700 !important;
}

@media (max-width: 900px){
  body[data-page="contact.html"] .contact-card h2,
  body[data-page="contact.html"] .info-card h2,
  body[data-page="contact.html"] .form-card h2,
  body[data-page="contact.html"] .inquiry-form h2,
  body[data-page="contact.html"] .contact-form h2{
    font-weight: 720 !important;
  }

  body[data-page="contact.html"] .contact-card h3,
  body[data-page="contact.html"] .info-card h3,
  body[data-page="contact.html"] .form-card h3,
  body[data-page="contact.html"] .inquiry-form h3,
  body[data-page="contact.html"] .contact-info-label,
  body[data-page="contact.html"] label{
    font-weight: 620 !important;
  }
}


/* 2026-06-30 Contact page lighter text weight correction
   Scope: Contact page Barangay Hall Information and Send an Inquiry text weight only.
   Content, colors, layout, navigation, workflow, functionality, mobile menu, map, and footer unchanged. */

/* Make the main contact headings visibly lighter */
body[data-page="contact.html"] .contact-card h2,
body[data-page="contact.html"] .info-card h2,
body[data-page="contact.html"] .form-card h2,
body[data-page="contact.html"] .inquiry-form h2,
body[data-page="contact.html"] .contact-form h2{
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Make secondary headers and labels lighter */
body[data-page="contact.html"] .contact-card h3,
body[data-page="contact.html"] .info-card h3,
body[data-page="contact.html"] .form-card h3,
body[data-page="contact.html"] .inquiry-form h3,
body[data-page="contact.html"] .contact-info-label,
body[data-page="contact.html"] label{
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* Keep contact values and form text normal weight */
body[data-page="contact.html"] .contact-info-value,
body[data-page="contact.html"] .contact-card p,
body[data-page="contact.html"] .info-card p,
body[data-page="contact.html"] .form-card p,
body[data-page="contact.html"] .inquiry-form p,
body[data-page="contact.html"] input,
body[data-page="contact.html"] textarea,
body[data-page="contact.html"] select{
  font-weight: 400 !important;
}

/* Keep submit button clear but less heavy */
body[data-page="contact.html"] .contact-form button,
body[data-page="contact.html"] .inquiry-form button,
body[data-page="contact.html"] .form-card button{
  font-weight: 600 !important;
}

@media (max-width: 900px){
  body[data-page="contact.html"] .contact-card h2,
  body[data-page="contact.html"] .info-card h2,
  body[data-page="contact.html"] .form-card h2,
  body[data-page="contact.html"] .inquiry-form h2,
  body[data-page="contact.html"] .contact-form h2{
    font-weight: 600 !important;
  }

  body[data-page="contact.html"] .contact-card h3,
  body[data-page="contact.html"] .info-card h3,
  body[data-page="contact.html"] .form-card h3,
  body[data-page="contact.html"] .inquiry-form h3,
  body[data-page="contact.html"] .contact-info-label,
  body[data-page="contact.html"] label{
    font-weight: 500 !important;
  }
}


/* 2026-06-30 Production-safe subtle site animations
   Scope: visual animation only.
   No layout, sizing, spacing, content, colors, navigation, mobile menu, workflow, or functionality changes. */

/* Soft entrance animation for existing reveal elements only */
.reveal{
  animation: safeFadeUp .58s ease both !important;
}

.reveal.delay-1{ animation-delay: .08s !important; }
.reveal.delay-2{ animation-delay: .16s !important; }
.reveal.delay-3{ animation-delay: .24s !important; }

/* Subtle desktop hover lift for existing cards only */
@media (hover: hover) and (pointer: fine){
  .service-card,
  .info-card,
  .official-card,
  .news-card,
  .image-card,
  .download-card,
  .contact-card,
  .form-card,
  .pledge,
  .quick-card,
  .stat-card,
  .accordion-item{
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
  }

  .service-card:hover,
  .info-card:hover,
  .official-card:hover,
  .news-card:hover,
  .image-card:hover,
  .download-card:hover,
  .contact-card:hover,
  .form-card:hover,
  .pledge:hover,
  .quick-card:hover,
  .stat-card:hover,
  .accordion-item:hover{
    transform: translateY(-3px) !important;
    box-shadow: 0 18px 45px rgba(8, 38, 77, .12) !important;
  }

  /* Very subtle CTA interaction only */
  .btn,
  .nav-contact{
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
  }

  .btn:hover,
  .nav-contact:hover{
    transform: translateY(-2px) !important;
    filter: brightness(1.03) !important;
  }
}

/* Gentle icon float, limited to icons already inside cards */
.service-card i,
.info-card i,
.quick-card i,
.stat-card i,
.contact-info-icon{
  animation: safeIconFloat 4.8s ease-in-out infinite !important;
}

/* Keep animation subtle and stable */
@keyframes safeFadeUp{
  from{
    opacity: 0;
    transform: translateY(12px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes safeIconFloat{
  0%, 100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-3px);
  }
}

/* Accessibility: disable motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal,
  .service-card i,
  .info-card i,
  .quick-card i,
  .stat-card i,
  .contact-info-icon{
    animation: none !important;
  }

  .service-card,
  .info-card,
  .official-card,
  .news-card,
  .image-card,
  .download-card,
  .contact-card,
  .form-card,
  .pledge,
  .quick-card,
  .stat-card,
  .accordion-item,
  .btn,
  .nav-contact{
    transition: none !important;
  }
}


/* 2026-06-30 Barangay History photo update - scoped only to About page */
body[data-page="about.html"] .history-photo-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

body[data-page="about.html"] .history-photo-grid img{
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;
  border-radius:22px;
  border:6px solid rgba(255,255,255,.86);
  box-shadow:0 18px 42px rgba(6,31,63,.14);
}

body[data-page="about.html"] .history-photo-grid img:first-child{
  grid-column:span 2;
  height:250px;
}

@media (max-width:900px){
  body[data-page="about.html"] .history-photo-grid img{
    height:180px;
  }

  body[data-page="about.html"] .history-photo-grid img:first-child{
    height:230px;
  }
}

@media (max-width:520px){
  body[data-page="about.html"] .history-photo-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  body[data-page="about.html"] .history-photo-grid img,
  body[data-page="about.html"] .history-photo-grid img:first-child{
    grid-column:auto;
    height:210px;
    border-radius:20px;
  }
}


/* 2026-06-30 Barangay History alignment fix - scoped only to About page */
body[data-page="about.html"] section.section-pad:has(.history-photo-grid) .split-layout{
  align-items:start !important;
}

body[data-page="about.html"] .history-photo-grid{
  align-self:start;
}

/* 2026-06-30 Barangay History photo animation refinement - scoped only to About page */
body[data-page="about.html"] .history-photo-grid img{
  opacity:1;
  transform:translateY(0) scale(1);
  transition:transform .32s ease, box-shadow .32s ease, filter .32s ease;
  will-change:transform, box-shadow, filter, opacity;
}

body[data-page="about.html"] .history-photo-grid.reveal img{
  opacity:0;
  transform:translateY(22px) scale(.975);
}

body[data-page="about.html"] .history-photo-grid.reveal.visible img{
  opacity:1;
}

body[data-page="about.html"] .history-photo-grid.reveal.visible img:nth-child(1){
  animation:historyPhotoReveal .78s cubic-bezier(.22,.78,.18,1) .05s both, historyPhotoFloatA 6.8s ease-in-out .95s infinite alternate, historyPhotoGlow 4.8s ease-in-out 1s infinite alternate;
}

body[data-page="about.html"] .history-photo-grid.reveal.visible img:nth-child(2){
  animation:historyPhotoReveal .78s cubic-bezier(.22,.78,.18,1) .18s both, historyPhotoFloatB 6.2s ease-in-out 1.08s infinite alternate, historyPhotoGlow 5s ease-in-out 1.15s infinite alternate;
}

body[data-page="about.html"] .history-photo-grid.reveal.visible img:nth-child(3){
  animation:historyPhotoReveal .78s cubic-bezier(.22,.78,.18,1) .31s both, historyPhotoFloatC 6.5s ease-in-out 1.22s infinite alternate, historyPhotoGlow 5.2s ease-in-out 1.3s infinite alternate;
}

body[data-page="about.html"] .history-photo-grid img:hover{
  animation-play-state:paused;
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 26px 52px rgba(6,31,63,.22);
  filter:saturate(1.06) brightness(1.02);
}

@keyframes historyPhotoReveal{
  from{
    opacity:0;
    transform:translateY(22px) scale(.975);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes historyPhotoFloatA{
  from{transform:translateY(0) scale(1);}
  to{transform:translateY(-10px) scale(1.006);}
}

@keyframes historyPhotoFloatB{
  from{transform:translateY(0) scale(1);}
  to{transform:translateY(-7px) scale(1.005);}
}

@keyframes historyPhotoFloatC{
  from{transform:translateY(0) scale(1);}
  to{transform:translateY(8px) scale(1.005);}
}

@keyframes historyPhotoGlow{
  from{
    box-shadow:0 18px 42px rgba(6,31,63,.14);
  }
  to{
    box-shadow:0 24px 48px rgba(6,31,63,.2);
  }
}

@media (prefers-reduced-motion:reduce){
  body[data-page="about.html"] .history-photo-grid img,
  body[data-page="about.html"] .history-photo-grid.reveal img,
  body[data-page="about.html"] .history-photo-grid.reveal.visible img{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
    transition:none !important;
  }
}

/* 2026-06-30 Contact page modernization - visual only, scoped to contact page */
body[data-page="contact.html"] .contact-card,
body[data-page="contact.html"] .form-card{
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(20, 94, 180, .14) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(31, 143, 255, .12), transparent 28%),
    radial-gradient(circle at 88% 6%, rgba(18, 196, 220, .14), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.94)) !important;
  box-shadow:
    0 24px 60px rgba(6, 31, 63, .12),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

body[data-page="contact.html"] .contact-card::before,
body[data-page="contact.html"] .form-card::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(120deg, rgba(255,255,255,.55), transparent 34%, rgba(34, 211, 238, .11) 52%, transparent 72%),
    repeating-linear-gradient(90deg, rgba(30, 124, 255, .035) 0 1px, transparent 1px 42px) !important;
  opacity: .8 !important;
}

body[data-page="contact.html"] .contact-card::after,
body[data-page="contact.html"] .form-card::after{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 26px !important;
  right: 26px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9, #22d3ee) !important;
  opacity: .9 !important;
}

body[data-page="contact.html"] .contact-card > *,
body[data-page="contact.html"] .form-card > *{
  position: relative !important;
  z-index: 1 !important;
}

body[data-page="contact.html"] .contact-card .eyebrow,
body[data-page="contact.html"] .form-card .eyebrow{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(219, 234, 254, .95), rgba(207, 250, 254, .88)) !important;
  color: #1d4ed8 !important;
  letter-spacing: .08em !important;
  box-shadow: 0 10px 24px rgba(29, 78, 216, .08) !important;
}

body[data-page="contact.html"] .contact-card .eyebrow::before,
body[data-page="contact.html"] .form-card .eyebrow::before{
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #22d3ee !important;
  box-shadow: 0 0 0 5px rgba(34,211,238,.18) !important;
}

body[data-page="contact.html"] .contact-card h2,
body[data-page="contact.html"] .form-card h2{
  margin-top: 14px !important;
  letter-spacing: -.04em !important;
  background: linear-gradient(135deg, #0b2d63, #145ee8 55%, #0ea5e9) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

body[data-page="contact.html"] .contact-card > p,
body[data-page="contact.html"] .form-card > p{
  max-width: 92% !important;
  color: #55709b !important;
}

body[data-page="contact.html"] .contact-list{
  display: grid !important;
  gap: 12px !important;
  margin-top: 22px !important;
}

body[data-page="contact.html"] .contact-list li{
  position: relative !important;
  display: grid !important;
  grid-template-columns: 132px 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 15px 16px !important;
  border: 1px solid rgba(20, 94, 180, .12) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.74) !important;
  box-shadow: 0 10px 26px rgba(6, 31, 63, .06) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
}

body[data-page="contact.html"] .contact-list li::before{
  content: "" !important;
  width: 7px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #1d4ed8, #22d3ee) !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: .72 !important;
}

body[data-page="contact.html"] .contact-list li:hover{
  transform: translateY(-3px) !important;
  border-color: rgba(14, 165, 233, .28) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 16px 34px rgba(6, 31, 63, .1) !important;
}

body[data-page="contact.html"] .contact-list strong{
  color: #0b3b82 !important;
  font-weight: 800 !important;
}

body[data-page="contact.html"] .contact-list span{
  color: #536b95 !important;
}

body[data-page="contact.html"] .form-grid{
  gap: 16px !important;
}

body[data-page="contact.html"] .form-group label{
  color: #153e79 !important;
  font-weight: 750 !important;
  margin-bottom: 8px !important;
}

body[data-page="contact.html"] .form-group input,
body[data-page="contact.html"] .form-group textarea{
  border: 1px solid rgba(20, 94, 180, .14) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,251,255,.92)) !important;
  box-shadow:
    0 10px 22px rgba(6, 31, 63, .045),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}

body[data-page="contact.html"] .form-group input:focus,
body[data-page="contact.html"] .form-group textarea:focus{
  outline: none !important;
  border-color: rgba(14, 165, 233, .7) !important;
  box-shadow:
    0 0 0 4px rgba(14, 165, 233, .12),
    0 14px 30px rgba(6, 31, 63, .08) !important;
  transform: translateY(-1px) !important;
}

body[data-page="contact.html"] .form-card .btn-primary,
body[data-page="contact.html"] .form-card button[type="submit"]{
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  color: #052447 !important;
  background: linear-gradient(135deg, #1d8cff, #18c7dc, #6ee7f9) !important;
  box-shadow: 0 16px 32px rgba(14, 165, 233, .24) !important;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
}

body[data-page="contact.html"] .form-card .btn-primary:hover,
body[data-page="contact.html"] .form-card button[type="submit"]:hover{
  transform: translateY(-3px) !important;
  filter: saturate(1.06) brightness(1.02) !important;
  box-shadow: 0 22px 42px rgba(14, 165, 233, .32) !important;
}

@media (max-width: 760px){
  body[data-page="contact.html"] .contact-card,
  body[data-page="contact.html"] .form-card{
    border-radius: 24px !important;
  }

  body[data-page="contact.html"] .contact-list li{
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  body[data-page="contact.html"] .contact-card > p,
  body[data-page="contact.html"] .form-card > p{
    max-width: 100% !important;
  }
}

/* 2026-06-30 Header brand padding balance refinement - scoped to header logo card only */
.site-header .brand{
  padding: 4px 10px 4px 6px !important;
  gap: 7px !important;
  border-radius: 18px !important;
  min-height: auto !important;
}

.site-header .brand img{
  width: 50px !important;
  height: 50px !important;
}

.site-header .brand span{
  line-height: 1.05 !important;
}

.site-header .brand strong{
  line-height: 1.05 !important;
}

.site-header .brand small{
  margin-top: 2px !important;
  line-height: 1.05 !important;
}

@media (max-width: 640px){
  .site-header .brand{
    padding: 4px 8px 4px 6px !important;
    gap: 6px !important;
    border-radius: 16px !important;
  }

  .site-header .brand img{
    width: 46px !important;
    height: 46px !important;
  }
}

/* 2026-06-30 Barangay Information stacked format - scoped only to contact page left info card */
body[data-page="contact.html"] .contact-card-modern .contact-info-stack{
  display:grid !important;
  gap:18px !important;
  margin-top:24px !important;
}

body[data-page="contact.html"] .contact-card-modern .info-stack-item{
  display:grid !important;
  grid-template-columns:56px 1fr !important;
  align-items:start !important;
  gap:16px !important;
}

body[data-page="contact.html"] .contact-card-modern .info-stack-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:56px !important;
  height:56px !important;
  border-radius:16px !important;
  font-size:22px !important;
  font-weight:700 !important;
  color:#1d4ed8 !important;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,246,255,.9)) !important;
  border:1px solid rgba(20,94,180,.14) !important;
  box-shadow:0 12px 26px rgba(6,31,63,.08), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body[data-page="contact.html"] .contact-card-modern .info-stack-content{
  padding-top:3px !important;
}

body[data-page="contact.html"] .contact-card-modern .info-stack-title{
  display:block !important;
  margin-bottom:8px !important;
  font-size:.88rem !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:.16em !important;
  color:#1d4ed8 !important;
}

body[data-page="contact.html"] .contact-card-modern .info-stack-content p{
  margin:0 !important;
  color:#39567f !important;
  font-size:1.08rem !important;
  line-height:1.65 !important;
}

body[data-page="contact.html"] .contact-card-modern .info-stack-item + .info-stack-item{
  padding-top:6px !important;
  border-top:1px solid rgba(20,94,180,.08) !important;
}

@media (max-width:640px){
  body[data-page="contact.html"] .contact-card-modern .info-stack-item{
    grid-template-columns:50px 1fr !important;
    gap:14px !important;
  }

  body[data-page="contact.html"] .contact-card-modern .info-stack-icon{
    width:50px !important;
    height:50px !important;
    border-radius:14px !important;
    font-size:20px !important;
  }

  body[data-page="contact.html"] .contact-card-modern .info-stack-content p{
    font-size:1rem !important;
  }
}

/* 2026-06-30 Barangay Information icon modernization and social refresh */
body[data-page="contact.html"] .contact-card-modern .info-stack-item{
  grid-template-columns:60px 1fr !important;
  gap:18px !important;
}

body[data-page="contact.html"] .contact-card-modern .info-stack-icon{
  position:relative !important;
  width:60px !important;
  height:60px !important;
  border-radius:18px !important;
  color:#145ee8 !important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(236,245,255,.9)) !important;
  border:1px solid rgba(20,94,180,.14) !important;
  box-shadow:0 14px 28px rgba(6,31,63,.08), inset 0 1px 0 rgba(255,255,255,.97) !important;
}

body[data-page="contact.html"] .contact-card-modern .info-stack-icon::after{
  content:"" !important;
  position:absolute !important;
  inset:10px !important;
  border-radius:14px !important;
  background:linear-gradient(135deg, rgba(29,78,216,.08), rgba(34,211,238,.14)) !important;
}

body[data-page="contact.html"] .contact-card-modern .info-stack-icon svg{
  position:relative !important;
  z-index:1 !important;
  width:24px !important;
  height:24px !important;
  display:block !important;
}

body[data-page="contact.html"] .contact-card-modern .info-stack-title{
  margin-bottom:7px !important;
}

body[data-page="contact.html"] .contact-card-modern .contact-social-block{
  margin-top:18px !important;
  padding-top:22px !important;
  border-top:1px solid rgba(20,94,180,.08) !important;
}

body[data-page="contact.html"] .contact-card-modern .contact-social-icons{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:14px !important;
}

body[data-page="contact.html"] .contact-card-modern .contact-social-icon{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:56px !important;
  height:56px !important;
  border-radius:16px !important;
  color:#145ee8 !important;
  text-decoration:none !important;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(236,245,255,.9)) !important;
  border:1px solid rgba(20,94,180,.14) !important;
  box-shadow:0 14px 28px rgba(6,31,63,.08), inset 0 1px 0 rgba(255,255,255,.97) !important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease !important;
}

body[data-page="contact.html"] .contact-card-modern .contact-social-icon::after{
  content:"" !important;
  position:absolute !important;
  inset:9px !important;
  border-radius:13px !important;
  background:linear-gradient(135deg, rgba(29,78,216,.08), rgba(34,211,238,.14)) !important;
}

body[data-page="contact.html"] .contact-card-modern .contact-social-icon svg{
  position:relative !important;
  z-index:1 !important;
  width:22px !important;
  height:22px !important;
  display:block !important;
}

body[data-page="contact.html"] .contact-card-modern .contact-social-icon:hover{
  transform:translateY(-4px) !important;
  color:#0b3b82 !important;
  border-color:rgba(14,165,233,.3) !important;
  box-shadow:0 20px 38px rgba(6,31,63,.12), inset 0 1px 0 rgba(255,255,255,.97) !important;
}

@media (max-width:640px){
  body[data-page="contact.html"] .contact-card-modern .info-stack-item{
    grid-template-columns:54px 1fr !important;
    gap:15px !important;
  }
  body[data-page="contact.html"] .contact-card-modern .info-stack-icon{
    width:54px !important;
    height:54px !important;
    border-radius:16px !important;
  }
  body[data-page="contact.html"] .contact-card-modern .contact-social-icon{
    width:52px !important;
    height:52px !important;
    border-radius:15px !important;
  }
}

/* =====================================================================
   RESPONSIVE SYSTEM — Unified Breakpoint Cleanup
   Breakpoints: 1400+, 769-1179, 600-768, 480-599, <480
   ===================================================================== */

/* 1. Large Monitors (>=1400px) */
@media (min-width:1400px){
  :root{ --container:1280px }
  .section-pad{ padding:100px 0 !important }
  .section-pad-sm{ padding:78px 0 !important }
  .hero .container{ width:min(1480px,calc(100% - 100px)) !important; max-width:1480px !important }
  .hero-card{ right:7% !important; width:360px !important }
  .footer-grid{ grid-template-columns:1.4fr 1fr 0.9fr 0.9fr !important }
}

/* 2. Small Desktop / Tablet Landscape (769px-1179px) */
@media (min-width:769px) and (max-width:1179px){
  .card-grid,.card-grid.two{ grid-template-columns:repeat(2,1fr) !important }
  .card-grid.three{ grid-template-columns:repeat(2,1fr) !important }
  .stats-grid{ grid-template-columns:repeat(2,1fr) !important }
  .officials-grid{ grid-template-columns:repeat(2,1fr) !important }
  .profile-grid{ grid-template-columns:repeat(2,1fr) !important }
  .downloads-grid{ grid-template-columns:1fr 1fr !important }
  .footer-grid{ grid-template-columns:repeat(2,1fr) !important }
  .section-pad{ padding:72px 0 !important }
  .section-pad-sm{ padding:56px 0 !important }
  .hero-content{ max-width:620px !important }
}

/* 3. Tablet Portrait (600px-768px) - restore 2-col where it fits */
@media (min-width:600px) and (max-width:768px){
  .card-grid,.card-grid.two,.card-grid.three,.stats-grid,.officials-grid,.profile-grid,.downloads-grid{ grid-template-columns:repeat(2,1fr) !important; gap:14px !important }
  .footer-grid{ grid-template-columns:repeat(2,1fr) !important; gap:20px !important }
  .service-meta{ grid-template-columns:repeat(2,1fr) !important }
  .section-heading{ text-align:center !important }
}

/* 4. Large Mobile (480px-599px) */
@media (min-width:480px) and (max-width:599px){
  .card-grid,.card-grid.two,.card-grid.three,.stats-grid{ grid-template-columns:repeat(2,1fr) !important; gap:12px !important }
  .officials-grid,.profile-grid,.downloads-grid{ grid-template-columns:1fr !important }
  .footer-grid{ grid-template-columns:1fr !important }
}

/* 5. Mobile (<=479px) */
@media (max-width:479px){
  .card-grid,.card-grid.two,.card-grid.three,.stats-grid,.officials-grid,.profile-grid,.downloads-grid,.service-meta,.form-row,.footer-grid{ grid-template-columns:1fr !important; gap:12px !important }
  .split-layout,.contact-grid{ grid-template-columns:1fr !important }
  .section-pad{ padding:40px 0 !important }
  .section-pad-sm{ padding:34px 0 !important }
  .gradient-band{ padding:26px 0 !important }
  .hero-content{ padding:28px 0 16px !important }
  .hero-actions{ margin-top:16px !important; gap:8px !important }
  .container{ width:calc(100% - 18px) !important; max-width:calc(100% - 18px) !important }
}

/* 6. Section heading centering */
@media (min-width:769px){
  .section-heading{ text-align:center !important }
}

/* 7. Stats band — comfortable padding inside gradient section */
body[data-page="index.html"] .gradient-band.section-pad{ padding:44px 0 !important }
@media (max-width:768px){ body[data-page="index.html"] .gradient-band.section-pad{ padding:32px 0 !important } .stats-grid div{ min-height:auto !important } }
@media (max-width:479px){ body[data-page="index.html"] .gradient-band.section-pad{ padding:24px 0 !important } }

/* 8. Hero card - clean positioning at each breakpoint */
@media (min-width:901px){
  .hero-card{ position:absolute !important; right:6% !important; bottom:72px !important; width:min(340px,calc(50% - 40px)) !important; max-width:340px !important }
}
@media (min-width:769px) and (max-width:900px){
  .hero-card{ position:relative !important; right:auto !important; bottom:auto !important; width:min(380px,calc(100% - 32px)) !important; max-width:380px !important; margin:-60px auto 36px !important }
}
@media (max-width:768px){
  .hero-card{ position:relative !important; right:auto !important; bottom:auto !important; width:calc(100% - 24px) !important; max-width:340px !important; margin:14px auto 24px !important }
}

/* 9. Downloads grid: 2-col on 600px+ */
@media (min-width:600px){ .downloads-grid{ grid-template-columns:repeat(2,1fr) !important } }

/* 10. Table wrap horizontal scroll */
.table-wrap{ overflow-x:auto !important }
table{ min-width:min(700px,100%) }

/* 11. Image card heights by breakpoint */
@media (max-width:599px){ .image-card img{ height:180px !important; width:100% !important } }
@media (min-width:600px) and (max-width:768px){ .image-card img{ height:200px !important } }

/* 12. Footer bottom */
.footer-bottom{ text-align:center !important; padding:20px !important }

/* 13. Prevent horizontal overflow */
html,body{ max-width:100vw; overflow-x:hidden }
.hero,.page-hero,section,.site-header,.site-footer{ max-width:100%; overflow-x:hidden }

/* 14. Page hero height */
@media (min-width:1024px){ .page-hero{ padding:110px 0 76px !important; min-height:280px } }
@media (min-width:769px) and (max-width:1023px){ .page-hero{ padding:88px 0 60px !important; min-height:240px !important } }
@media (min-width:600px) and (max-width:768px){ .page-hero{ padding:60px 0 44px !important; min-height:220px !important } }

/* 15. Page hero headings — single line on tablet and up */
@media (min-width:600px){
  .page-hero h1 {
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    font-size: clamp(1.9rem, 3.6vw, 3.6rem) !important;
    letter-spacing: -0.04em !important;
  }
}

/* 15. Form row */
@media (min-width:480px){ .form-row{ grid-template-columns:repeat(2,1fr) !important } }
@media (max-width:479px){ .form-row{ grid-template-columns:1fr !important } }

/* 16. Official mini on small screens */
@media (max-width:599px){ .official-mini{ flex-direction:column !important; text-align:center !important; align-items:center !important } .official-mini img{ width:110px !important; height:110px !important } }

/* 17. Nav menu mobile */
@media (max-width:768px){ .nav-menu{ grid-template-columns:1fr !important; left:10px !important; right:10px !important } }

/* 18. Hero orbs - no overflow on mobile */
@media (max-width:768px){ .hero:after,.page-hero:after{ right:-80px !important; width:200px !important; height:200px !important } }

/* 19. Reduced motion */
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none !important; transition:none !important } }

/* =====================================================================
   EMERGENCY CARD + GRID FINAL FIXES
   ===================================================================== */

/* Emergency card — mobile/tablet: center it below hero content */
@media (max-width:900px){
  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{
    position:relative !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    display:block !important;
    margin:18px auto 32px !important;
    width:min(400px,calc(100% - 28px)) !important;
    max-width:400px !important;
  }
}
@media (max-width:479px){
  .hero-emergency-card,
  .hero-emergency-card.emergency-card-alt{
    margin:12px auto 24px !important;
    width:calc(100% - 20px) !important;
    max-width:100% !important;
  }
}

/* Stats grid — restore 2-col at 600-900px */
@media (min-width:600px) and (max-width:900px){
  .stats-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:14px !important;
  }
  .stats-grid div{ min-height:auto !important }
}

/* Card grids — restore 2-col at 600-768px */
@media (min-width:600px) and (max-width:768px){
  .card-grid,
  .card-grid.two,
  .card-grid.three,
  .officials-grid,
  .profile-grid,
  .downloads-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:14px !important;
  }
}

/* Hero section: block layout on mobile so card flows naturally */
@media (max-width:900px){
  .hero{ display:block !important }
  .hero-content{ width:100% }
}

/* =====================================================================
   FINAL CARD FIX — uses body[data-page] for higher specificity (0,2,0)
   Overrides all previous right/margin conflicts at <=900px
   ===================================================================== */
@media (max-width:900px){
  body[data-page="index.html"] .hero-emergency-card,
  body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
    position:relative !important;
    inset:auto !important;
    right:auto !important;
    left:auto !important;
    bottom:auto !important;
    top:auto !important;
    display:block !important;
    margin:16px auto 28px !important;
    width:min(360px,calc(100% - 28px)) !important;
    max-width:360px !important;
    transform:none !important;
  }
}
@media (max-width:479px){
  body[data-page="index.html"] .hero-emergency-card,
  body[data-page="index.html"] .hero-emergency-card.emergency-card-alt{
    width:calc(100% - 20px) !important;
    max-width:100% !important;
    margin:10px auto 20px !important;
  }
}

/* =====================================================================
   LARGE-SCREEN CONTAINER FIX
   Override the max-width:1200px cap set at min-width:1440px earlier.
   This must be at the end so later source order wins.
   ===================================================================== */
@media (min-width:1400px){
  .container{
    max-width:1280px !important;
    width:min(1280px,calc(100% - 40px)) !important;
  }
}
@media (min-width:1920px){
  .container{
    max-width:1400px !important;
    width:min(1400px,calc(100% - 60px)) !important;
  }
}

/* =====================================================================
   HERO CONTENT ALIGNMENT FIX
   Problem: at large screens, hero heading is shifted right because
   max-width:58% with margin:auto centers it in the full hero width,
   but content sections below left-align to the container edge.
   Fix: align hero-content left edge with the container left margin.
   ===================================================================== */
@media (min-width:1400px){
  body[data-page="index.html"] .hero .hero-content{
    /* Left-align to match the regular container (1280px) positioning */
    margin-left: max(calc((100vw - 1280px) / 2), 20px) !important;
    margin-right: 0 !important;
    width: min(55vw, 720px) !important;
    max-width: min(55vw, 720px) !important;
  }
}
@media (min-width:1920px){
  body[data-page="index.html"] .hero .hero-content{
    /* Adjust for 1400px container at 1920px+ */
    margin-left: max(calc((100vw - 1400px) / 2), 20px) !important;
    width: min(50vw, 760px) !important;
    max-width: min(50vw, 760px) !important;
  }
}

/* =====================================================================
   BARANGAY HULO — MODERN POLISH & PROFESSIONAL ANIMATIONS
   LGU/public-service grade: subtle, trustworthy, citizen-friendly.
   Rules: transform + opacity only — no layout shifts.
   All effects suppressed under prefers-reduced-motion.
   ===================================================================== */

/* ------------------------------------------------------------------
   1. ENHANCED REVEAL ANIMATIONS
   Smoother easing, slight stagger support via existing delay classes
   ------------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.reveal.visible { opacity: 1; transform: none !important; }

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.reveal-left.visible { opacity: 1; transform: none !important; }

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.reveal-right.visible { opacity: 1; transform: none !important; }

.reveal-zoom {
  opacity: 0;
  transform: scale(0.96) translateY(14px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.reveal-zoom.visible { opacity: 1; transform: none !important; }

/* Stagger delays — already applied via .delay-1 / .delay-2 / .delay-3 */
.delay-1 { transition-delay: 0.10s !important; }
.delay-2 { transition-delay: 0.20s !important; }
.delay-3 { transition-delay: 0.30s !important; }

/* ------------------------------------------------------------------
   2. HEADER — scrolled elevation
   ------------------------------------------------------------------ */
.site-header {
  transition: box-shadow 0.32s ease, background 0.32s ease !important;
}
.site-header.scrolled {
  box-shadow: 0 2px 20px rgba(8,38,77,0.09) !important;
}
.nav-link {
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}

/* ------------------------------------------------------------------
   3. BUTTONS — lift + glow
   ------------------------------------------------------------------ */
.btn {
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.22s ease,
              background 0.22s ease,
              color 0.22s ease !important;
  will-change: transform;
}
.btn:hover {
  transform: translateY(-2px) !important;
}
.btn:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 0.1s !important;
}
.btn-primary:hover {
  box-shadow: 0 10px 26px rgba(13,71,161,0.30) !important;
}
.btn-soft:hover {
  box-shadow: 0 6px 18px rgba(13,71,161,0.12) !important;
}
.back-to-top {
  transition: transform 0.24s ease,
              box-shadow 0.24s ease,
              opacity 0.3s ease,
              pointer-events 0s !important;
}
.back-to-top:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px rgba(13,71,161,0.34) !important;
}

/* ------------------------------------------------------------------
   4. SERVICE / INFO CARDS — lift + icon bounce
   ------------------------------------------------------------------ */
.info-card {
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.28s ease,
              border-color 0.28s ease !important;
  will-change: transform;
}
.info-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 44px rgba(8,38,77,0.13) !important;
  border-color: rgba(21,101,216,0.22) !important;
}
.info-card .icon {
  display: inline-block;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.info-card:hover .icon {
  transform: scale(1.20) translateY(-3px) !important;
}

/* ------------------------------------------------------------------
   5. IMAGE CARDS — lift + subtle zoom on photo
   ------------------------------------------------------------------ */
.image-card {
  transition: transform 0.30s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.30s ease !important;
  overflow: hidden;
  will-change: transform;
}
.image-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 22px 46px rgba(8,38,77,0.15) !important;
}
.image-card img {
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1) !important;
}
.image-card:hover img {
  transform: scale(1.05) !important;
}

/* ------------------------------------------------------------------
   6. OFFICIAL CARDS — lift + photo scale
   ------------------------------------------------------------------ */
.official-card {
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.28s ease !important;
  will-change: transform;
}
.official-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 22px 46px rgba(8,38,77,0.14) !important;
}
.official-card img,
.profile-item img {
  transition: transform 0.40s cubic-bezier(0.22,1,0.36,1) !important;
}
.official-card:hover img,
.profile-item:hover img {
  transform: scale(1.05) !important;
}

/* ------------------------------------------------------------------
   7. DOWNLOAD CARDS
   ------------------------------------------------------------------ */
.download-card {
  transition: transform 0.26s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.26s ease,
              background 0.26s ease !important;
}
.download-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 34px rgba(8,38,77,0.12) !important;
}

/* ------------------------------------------------------------------
   8. STATS GRID — lift with subtle glow
   ------------------------------------------------------------------ */
.stats-grid > div {
  transition: transform 0.26s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.26s ease !important;
}
.stats-grid > div:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.14) !important;
}

/* ------------------------------------------------------------------
   9. DOCUMENT ROWS & ACCORDIONS
   ------------------------------------------------------------------ */
.doc-row {
  transition: background 0.2s ease, transform 0.2s ease !important;
}
.doc-row:hover {
  transform: translateX(4px) !important;
}
.accordion-trigger {
  transition: background 0.22s ease, color 0.22s ease !important;
}

/* ------------------------------------------------------------------
   10. CONTACT SOCIAL ICONS
   ------------------------------------------------------------------ */
.contact-social-icon {
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.28s ease !important;
}
.contact-social-icon:hover {
  transform: translateY(-5px) scale(1.10) !important;
  box-shadow: 0 12px 24px rgba(13,71,161,0.20) !important;
}

/* ------------------------------------------------------------------
   11. FOOTER LINKS — slide right micro-interaction
   ------------------------------------------------------------------ */
.footer-links a {
  display: inline-block;
  transition: color 0.2s ease, transform 0.22s ease !important;
}
.footer-links a:hover {
  transform: translateX(5px) !important;
}

/* ------------------------------------------------------------------
   12. TEXT LINK
   ------------------------------------------------------------------ */
.text-link {
  display: inline-block;
  transition: transform 0.22s ease, color 0.2s ease !important;
}
.text-link:hover {
  transform: translateX(4px) !important;
}

/* ------------------------------------------------------------------
   13. MAP EMBED — subtle hover elevation
   ------------------------------------------------------------------ */
.map-embed {
  transition: box-shadow 0.3s ease !important;
}
.map-embed:hover {
  box-shadow: 0 24px 52px rgba(8,38,77,0.14) !important;
}

/* ------------------------------------------------------------------
   14. PAGE HERO — eyebrow accent pulse (once, on load)
   ------------------------------------------------------------------ */
@keyframes bhEyebrowIn {
  from { opacity:0; transform:translateX(-12px); }
  to   { opacity:1; transform:none; }
}
.page-hero .eyebrow,
.hero .eyebrow {
  animation: bhEyebrowIn 0.6s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: 0.2s;
}

/* ------------------------------------------------------------------
   15. SECTION HEADING — underline grow on reveal
   ------------------------------------------------------------------ */
@keyframes bhLineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.section-heading h2 {
  position: relative;
  display: block;
}
.section-heading h2::after {
  display: none;
}

/* ------------------------------------------------------------------
   16. EMERGENCY CARD SOS BADGE — soft pulse
   ------------------------------------------------------------------ */
@keyframes bhSOSPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,82,82,0.35); }
  60%       { box-shadow: 0 0 0 10px rgba(255,82,82,0); }
}
.emergency-siren-badge {
  animation: bhSOSPulse 2.4s ease-in-out infinite;
}

/* ------------------------------------------------------------------
   17. ANNOUNCEMENT MINI-LIST ARTICLES
   ------------------------------------------------------------------ */
.mini-list article {
  transition: transform 0.24s ease, box-shadow 0.24s ease !important;
  border-radius: var(--radius-sm);
}
.mini-list article:hover {
  transform: translateX(4px) !important;
  box-shadow: 0 8px 20px rgba(8,38,77,0.08) !important;
}

/* ------------------------------------------------------------------
   18. CONTACT FORM FOCUS POLISH
   ------------------------------------------------------------------ */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form-modern input:focus,
.contact-form-modern textarea:focus {
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(21,101,216,0.12) !important;
}

/* ------------------------------------------------------------------
   19. STATUS BADGE — soft shimmer on ongoing items
   ------------------------------------------------------------------ */
@keyframes bhStatusShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.status.ongoing {
  background-size: 200% auto;
  animation: bhStatusShimmer 3s linear infinite;
}

/* ------------------------------------------------------------------
   20. ACCESSIBILITY — suppress all animations
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-zoom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .btn, .info-card, .image-card, .official-card, .download-card,
  .stats-grid > div, .contact-social-icon, .footer-links a,
  .text-link, .doc-row, .mini-list article, .back-to-top,
  .official-card img, .profile-item img, .image-card img,
  .accordion-trigger, .map-embed {
    transition: none !important;
    animation: none !important;
  }
  .btn:hover, .info-card:hover, .image-card:hover,
  .official-card:hover, .download-card:hover,
  .stats-grid > div:hover, .contact-social-icon:hover,
  .footer-links a:hover, .text-link:hover, .doc-row:hover,
  .mini-list article:hover, .back-to-top:hover {
    transform: none !important;
  }
  .page-hero .eyebrow, .hero .eyebrow { animation: none !important; opacity: 1 !important; }
  .emergency-siren-badge { animation: none !important; }
  .status.ongoing { animation: none !important; }
}

/* =====================================================================
   ALIGNMENT FIX — Content containers match navbar width (1360px)
   Problem: navbar container = 1360px, content containers = 1280px
   → logo and section headings start at different left positions.
   Fix: unify all containers to 1360px so logo, headings, and
   all sections share the same left/right edge.
   ===================================================================== */
@media (min-width:1400px){
  :root{ --container:1360px }
  .container{
    max-width:1360px !important;
    width:min(1360px,calc(100% - 40px)) !important;
  }
  /* Hero content left edge must match the 1360px container margin */
  body[data-page="index.html"] .hero .hero-content{
    margin-left:max(calc((100vw - 1360px) / 2), 20px) !important;
    width:min(54vw,720px) !important;
    max-width:min(54vw,720px) !important;
    margin-right:0 !important;
  }
}
@media (min-width:1920px){
  :root{ --container:1440px }
  .container{
    max-width:1440px !important;
    width:min(1440px,calc(100% - 60px)) !important;
  }
  body[data-page="index.html"] .hero .hero-content{
    margin-left:max(calc((100vw - 1440px) / 2), 20px) !important;
    width:min(50vw,760px) !important;
    max-width:min(50vw,760px) !important;
  }
}

/* =====================================================================
   NAVBAR + CONTENT ALIGNMENT — unify to 1360px at 1421-1919px
   Root cause: @media(1421-1599px) sets .site-header .navbar to 1232px
   at specificity (0,2,0). Must match that specificity + later source
   order to override. Content container also unified here.
   ===================================================================== */
@media (min-width:1421px) and (max-width:1919px){
  /* Override the navbar 1232px cap — match specificity (0,2,0) */
  .site-header .container,
  .site-header .navbar,
  .navbar.container,
  header .container{
    max-width:1360px !important;
    width:min(calc(100% - 40px),1360px) !important;
  }
  /* All content containers must match */
  .container{
    max-width:1360px !important;
    width:min(calc(100% - 40px),1360px) !important;
  }
  /* Hero content left edge = navbar left edge */
  body[data-page="index.html"] .hero .hero-content{
    margin-left:max(calc((100vw - 1360px) / 2), 20px) !important;
    width:min(54vw,720px) !important;
    max-width:min(54vw,720px) !important;
    margin-right:0 !important;
  }
}
@media (min-width:1920px){
  .site-header .container,
  .site-header .navbar,
  .navbar.container,
  header .container{
    max-width:1440px !important;
    width:min(calc(100% - 60px),1440px) !important;
  }
  .container{
    max-width:1440px !important;
    width:min(calc(100% - 60px),1440px) !important;
  }
  body[data-page="index.html"] .hero .hero-content{
    margin-left:max(calc((100vw - 1440px) / 2), 20px) !important;
    width:min(50vw,760px) !important;
    max-width:min(50vw,760px) !important;
    margin-right:0 !important;
  }
}

/* =====================================================================
   LOGO ↔ SECTIONS ALIGNMENT — remove navbar internal padding at large screens
   The .navbar has padding:24px which offsets the logo 24px right of
   the container edge. Content sections have no such padding, so they
   start 24px earlier. Removing at >=1421px aligns logo with sections.
   ===================================================================== */
@media (min-width:1421px){
  .navbar{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* =====================================================================
   LOGO ↔ SECTIONS PADDING FIX
   Source: @media(901px+) .site-header .container sets padding:24px !important
   specificity (0,2,0). Must match that specificity to override.
   ===================================================================== */
@media (min-width:1421px){
  .site-header .container,
  .site-header .nav-container,
  .site-header .navbar,
  header .container{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* =====================================================================
   HERO CONTENT MARGIN — use 100% (body width, excludes scrollbar)
   instead of 100vw (includes scrollbar) so hero heading aligns exactly
   with logo and section containers.
   ===================================================================== */
@media (min-width:1421px) and (max-width:1919px){
  body[data-page="index.html"] .hero .hero-content{
    margin-left:max(calc((100% - 1360px) / 2), 20px) !important;
  }
}
@media (min-width:1920px){
  body[data-page="index.html"] .hero .hero-content{
    margin-left:max(calc((100% - 1440px) / 2), 20px) !important;
  }
}

/* =====================================================================
   HERO VIEWPORT HEIGHT FIX
   Problem: fixed pixel min-heights (680–720px) let the Barangay Services
   section bleed into the first viewport on tall monitors (1080p, etc.).
   Fix: use calc(100dvh - 160px) so hero always fills the viewport minus
   the navbar (~64px) and the gradient-band feature strip (~96px).
   The max() floor prevents the hero from shrinking too small on short
   viewports or when calc resolves below a usable height.
   ===================================================================== */
/* Hero min-height = viewport minus navbar (92px) minus gradient-band (98px) minus 10px buffer = 200px.
   This ensures hero + feature strip together fill exactly one viewport on any screen height,
   so the Quick Access section starts only after the user scrolls. */
@media (min-width: 901px) {
  body[data-page="index.html"] .hero {
    min-height: max(600px, calc(100dvh - 200px)) !important;
  }
}
@media (min-width: 1920px) {
  body[data-page="index.html"] .hero {
    min-height: max(680px, calc(100dvh - 200px)) !important;
  }
}

/* =====================================================================
   ICT EQUIPMENT CARD — Community Initiatives (index.html)
   ===================================================================== */

/* Banner replaces the <img> slot — same 220px height as image-card img */
.ict-banner {
  height: 220px;
  background: linear-gradient(140deg, #0d3a85 0%, #1565c0 45%, #0097b2 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 20px;
  position: relative;
  overflow: hidden;
}

/* Subtle radial highlight for depth */
.ict-banner::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  pointer-events: none;
}

.ict-banner-icon {
  width: 72px;
  height: 72px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1);
}

.image-card:hover .ict-banner-icon {
  transform: scale(1.12) translateY(-3px);
}

.ict-banner-icon svg {
  width: 100%;
  height: 100%;
}

.ict-banner-label {
  text-align: center;
  color: white;
}

.ict-banner-label strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.96;
}

.ict-banner-label span {
  display: block;
  font-size: 0.72rem;
  opacity: 0.72;
  margin-top: 3px;
  letter-spacing: 0.04em;
}

/* Community Support badge */
.status.community {
  background: #efe8ff;
  color: #5b21b6;
}

/* Hover — same scale as image-card:hover img */
.image-card:hover .ict-banner {
  filter: brightness(1.06);
  transition: filter 0.45s ease;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .image-card:hover .ict-banner-icon {
    transform: none !important;
  }
}

/* Program banner variants — same structure as .ict-banner */
.prog-banner {
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 20px;
  position: relative;
  overflow: hidden;
}
.prog-banner::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  pointer-events: none;
}

/* Clean and Green — forest green → teal */
.prog-banner--green {
  background: linear-gradient(140deg, #0a5c3a 0%, #0e8a52 48%, #00a693 100%);
}

/* Livelihood — deep amber → warm gold */
.prog-banner--gold {
  background: linear-gradient(140deg, #7a3d00 0%, #b85c00 48%, #d4870a 100%);
}

.image-card:hover .prog-banner { filter: brightness(1.07); transition: filter 0.45s ease; }

/* =====================================================================
   LOGO + BRAND + EYEBROW ENHANCEMENT
   ===================================================================== */

/* Navbar logo — larger and crisper */
.site-header .brand img,
header .brand img {
  width: 62px !important;
  height: 62px !important;
  border-radius: 16px !important;
}

/* Brand name — stronger, more presence */
.site-header .brand strong,
header .brand strong {
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
}

/* Brand subtitle */
.site-header .brand small,
header .brand small {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  margin-top: 2px !important;
}

/* Eyebrow captions — more visible and polished */
.eyebrow {
  font-size: 0.85rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.17em !important;
}

/* Hero / page-hero eyebrow pill */
.hero .eyebrow,
.page-hero .eyebrow {
  font-size: 0.82rem !important;
  padding: 9px 16px !important;
  letter-spacing: 0.15em !important;
}

/* Section eyebrows — largest, most prominent */
.section-heading .eyebrow,
.split-layout .eyebrow {
  font-size: 0.90rem !important;
  letter-spacing: 0.22em !important;
  gap: 10px !important;
}
.section-heading .eyebrow::before,
.split-layout .eyebrow::before {
  width: 30px !important;
  height: 3px !important;
}

/* Mobile — keep logo sensible */
@media (max-width: 600px) {
  .site-header .brand img,
  header .brand img {
    width: 46px !important;
    height: 46px !important;
  }
  .site-header .brand strong,
  header .brand strong {
    font-size: 1rem !important;
  }
}

/* =====================================================================
   HERO QUICK-FACTS BAR
   ===================================================================== */
.hero-quick-facts {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  margin-top: 40px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 12px 20px;
  backdrop-filter: blur(8px);
  max-width: 100%;
  overflow: hidden;
}

.hero-fact {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.90);
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 1;
  white-space: nowrap;
  min-width: 0;
  padding: 4px 8px;
}

.hero-fact svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.80;
}

.hero-fact-divider {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,0.20);
  flex-shrink: 0;
}

/* Tablet: 2-column wrap */
@media (max-width: 700px) {
  .hero-quick-facts { flex-wrap: wrap; padding: 10px 16px; }
  .hero-fact-divider { display: none; }
  .hero-fact { flex: 0 0 50%; white-space: normal; padding: 5px 6px; font-size: 0.74rem; }
}

/* Mobile: keep 2-column wrap, just tighten spacing */
@media (max-width: 480px) {
  .hero-quick-facts { margin-top: 16px; padding: 8px 12px; }
  .hero-fact { flex: 0 0 50%; font-size: 0.70rem; padding: 4px 5px; }
}

/* =====================================================================
   CONTACT PAGE — MODERNIZED CARDS
   ===================================================================== */

/* ── Info card: gradient header ───────────────────────────────────── */
body[data-page="contact.html"] .contact-card-modern {
  padding: 0 !important;
  overflow: hidden !important;
  background: white !important;
  border: 1px solid rgba(86,129,216,.12) !important;
  box-shadow: 0 24px 56px rgba(8,38,77,.10) !important;
}

body[data-page="contact.html"] .contact-card-modern .contact-card-header {
  background: linear-gradient(140deg, #0b3880 0%, #1565c0 52%, #0097b2 100%);
  padding: 30px 28px 26px !important;
  margin-bottom: 0 !important;
  position: relative;
  overflow: hidden;
}

/* Decorative circle in header */
body[data-page="contact.html"] .contact-card-modern .contact-card-header::after {
  content: '';
  position: absolute;
  right: -32px; top: -32px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}

body[data-page="contact.html"] .contact-card-modern .contact-chip {
  background: rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}

body[data-page="contact.html"] .contact-card-modern .contact-card-header h2 {
  color: white !important;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important;
}

body[data-page="contact.html"] .contact-card-modern .contact-card-header p {
  color: rgba(255,255,255,0.75) !important;
}

body[data-page="contact.html"] .contact-card-modern .contact-info-stack {
  padding: 22px 28px 28px !important;
}

/* Info stack items — icon colored per type */
body[data-page="contact.html"] .contact-card-modern .info-stack-item {
  padding: 14px 16px !important;
  border-radius: 14px !important;
  background: #f7faff !important;
  border: 1px solid rgba(86,129,216,0.10) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

body[data-page="contact.html"] .contact-card-modern .info-stack-item:hover {
  background: #edf3ff !important;
  box-shadow: 0 4px 16px rgba(21,101,216,0.08) !important;
}

body[data-page="contact.html"] .contact-card-modern .info-stack-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 11px !important;
  flex-shrink: 0 !important;
}

/* Distinct icon colors: phone=blue, email=teal, address=purple, hours=amber */
body[data-page="contact.html"] .contact-info-stack .info-stack-item:nth-child(1) .info-stack-icon { background: linear-gradient(135deg,#1565c0,#1e88e5) !important; }
body[data-page="contact.html"] .contact-info-stack .info-stack-item:nth-child(2) .info-stack-icon { background: linear-gradient(135deg,#00796b,#26c6aa) !important; }
body[data-page="contact.html"] .contact-info-stack .info-stack-item:nth-child(3) .info-stack-icon { background: linear-gradient(135deg,#6a1b9a,#ab47bc) !important; }
body[data-page="contact.html"] .contact-info-stack .info-stack-item:nth-child(4) .info-stack-icon { background: linear-gradient(135deg,#e65100,#ff8f00) !important; }

body[data-page="contact.html"] .contact-card-modern .info-stack-icon svg {
  width: 18px !important; height: 18px !important;
  color: white !important;
}

body[data-page="contact.html"] .contact-card-modern .info-stack-title {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #6b85aa !important;
}

body[data-page="contact.html"] .contact-card-modern .info-stack-content p {
  font-weight: 600 !important;
  color: #112d61 !important;
  font-size: 0.95rem !important;
}

/* Social icons */
body[data-page="contact.html"] .contact-card-modern .contact-social-block {
  margin-top: 20px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(86,129,216,0.12) !important;
}

body[data-page="contact.html"] .contact-card-modern .contact-social-icon {
  width: 42px !important; height: 42px !important;
  border-radius: 12px !important;
  background: #f0f4ff !important;
  color: #1565c0 !important;
  border: 1px solid rgba(86,129,216,0.15) !important;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important;
}

body[data-page="contact.html"] .contact-card-modern .contact-social-icon:hover {
  background: #1565c0 !important;
  color: white !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(21,101,216,0.28) !important;
}

body[data-page="contact.html"] .contact-card-modern .contact-social-icon svg {
  width: 18px !important; height: 18px !important;
  fill: currentColor !important;
}

/* ── Inquiry form: gradient top accent ────────────────────────────── */
body[data-page="contact.html"] .contact-form-modern {
  background: white !important;
  border: 1px solid rgba(86,129,216,.12) !important;
  box-shadow: 0 24px 56px rgba(8,38,77,.10) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body[data-page="contact.html"] .contact-form-modern .contact-card-header {
  background: linear-gradient(140deg, #0b3880 0%, #1565c0 52%, #0097b2 100%);
  padding: 30px 32px 26px !important;
  margin-bottom: 0 !important;
  position: relative;
  overflow: hidden;
}

body[data-page="contact.html"] .contact-form-modern .contact-card-header::after {
  content: '';
  position: absolute;
  right: -32px; top: -32px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}

body[data-page="contact.html"] .contact-form-modern .contact-chip {
  background: rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}

body[data-page="contact.html"] .contact-form-modern .contact-card-header h2 {
  color: white !important;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important;
}

body[data-page="contact.html"] .contact-form-modern .contact-card-header p {
  color: rgba(255,255,255,0.75) !important;
}

/* Form body padding */
body[data-page="contact.html"] .contact-form-modern .form-row,
body[data-page="contact.html"] .contact-form-modern > label,
body[data-page="contact.html"] .contact-form-modern > button {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

body[data-page="contact.html"] .contact-form-modern .form-row:first-of-type {
  margin-top: 28px !important;
}

body[data-page="contact.html"] .contact-form-modern > button {
  margin-bottom: 32px !important;
  width: calc(100% - 64px) !important;
}

/* Input/textarea styling */
body[data-page="contact.html"] .contact-form-modern label {
  font-size: 0.80rem !important;
  font-weight: 700 !important;
  color: #3a5080 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

body[data-page="contact.html"] .contact-form-modern input,
body[data-page="contact.html"] .contact-form-modern textarea {
  background: #f5f8ff !important;
  border: 1.5px solid rgba(86,129,216,0.18) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 0.96rem !important;
  color: #112d61 !important;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease !important;
}

body[data-page="contact.html"] .contact-form-modern input:focus,
body[data-page="contact.html"] .contact-form-modern textarea:focus {
  border-color: #1565c0 !important;
  background: white !important;
  box-shadow: 0 0 0 4px rgba(21,101,216,0.10) !important;
  outline: none !important;
}

/* Submit button */
body[data-page="contact.html"] .contact-form-modern .btn-primary {
  background: linear-gradient(135deg, #0b3880, #1565c0) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 28px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 8px 24px rgba(13,56,128,0.28) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

body[data-page="contact.html"] .contact-form-modern .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(13,56,128,0.36) !important;
}

/* Mobile */
@media (max-width: 600px) {
  body[data-page="contact.html"] .contact-card-modern .contact-card-header,
  body[data-page="contact.html"] .contact-form-modern .contact-card-header {
    padding: 22px 20px 20px !important;
  }
  body[data-page="contact.html"] .contact-card-modern .contact-info-stack {
    padding: 16px 20px 22px !important;
  }
  body[data-page="contact.html"] .contact-form-modern .form-row,
  body[data-page="contact.html"] .contact-form-modern > label,
  body[data-page="contact.html"] .contact-form-modern > button {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
  body[data-page="contact.html"] .contact-form-modern > button {
    width: calc(100% - 40px) !important;
  }
}

/* =====================================================================
   ABOUT PAGE — MODERNIZED PROFILE GRID & MAP
   ===================================================================== */

.about-profile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 36px;
}

.about-profile-card {
  background: white;
  border: 1px solid rgba(86,129,216,0.12);
  border-radius: 18px;
  padding: 24px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 4px 20px rgba(8,38,77,0.06);
  transition: transform 0.26s ease, box-shadow 0.26s ease;
}

.about-profile-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(8,38,77,0.12);
}

.about-profile-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.about-profile-icon svg {
  width: 24px;
  height: 24px;
}

.about-profile-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.about-profile-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #6b85aa;
}

.about-profile-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0d2a5e;
  line-height: 1.3;
}

@media (max-width: 900px) {
  .about-profile-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .about-profile-grid { grid-template-columns: 1fr; }
}

/* Map */
.about-map-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(8,38,77,0.14);
  border: 1px solid rgba(86,129,216,0.12);
  margin-top: 36px;
  height: 420px;
}

.about-map-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.about-map-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: white;
  border-radius: 50px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0d2a5e;
  box-shadow: 0 4px 20px rgba(8,38,77,0.18);
}

.about-map-badge svg {
  width: 16px;
  height: 16px;
  color: #1565c0;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .about-map-wrap { height: 300px; }
}

/* =====================================================================
   COMMUNITY INITIATIVES — MODERNIZED CARD DESIGN
   ===================================================================== */

/* Card shell */
.image-card {
  border-radius: 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(86,129,216,0.10) !important;
  box-shadow: 0 4px 24px rgba(8,38,77,0.07) !important;
  transition: transform 0.28s cubic-bezier(0.34,1.2,0.64,1),
              box-shadow 0.28s ease !important;
  background: white !important;
}

.image-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 20px 52px rgba(8,38,77,0.15) !important;
}

/* Banner: taller + left-aligned layout */
.ict-banner,
.prog-banner {
  height: 200px !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 24px 22px !important;
}

/* Decorative large ring — bottom-right */
.ict-banner::after,
.prog-banner::after {
  content: '';
  position: absolute;
  bottom: -56px;
  right: -56px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 28px solid rgba(255,255,255,0.07);
  pointer-events: none;
}

/* Second smaller ring — top-right */
.ict-banner::before,
.prog-banner::before {
  content: '' !important;
  position: absolute !important;
  top: -24px !important;
  right: 32px !important;
  left: auto !important;
  width: 110px !important;
  height: 110px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.06) !important;
  border: none !important;
  pointer-events: none;
}

/* Floating icon — circle, top-left area */
.ict-banner-icon {
  position: absolute !important;
  top: 22px !important;
  left: 24px !important;
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.18) !important;
  border: 1.5px solid rgba(255,255,255,0.32) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18), 0 0 0 6px rgba(255,255,255,0.07) !important;
  padding: 14px !important;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.32s ease !important;
}

.image-card:hover .ict-banner-icon {
  transform: scale(1.10) translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.22), 0 0 0 8px rgba(255,255,255,0.10) !important;
}

/* Label — sits at bottom-left beside the icon space */
.ict-banner-label {
  text-align: left !important;
  padding-left: 0 !important;
  position: relative;
  z-index: 1;
}

.ict-banner-label strong {
  font-size: 0.80rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.ict-banner-label span {
  font-size: 0.73rem !important;
  opacity: 0.82 !important;
  margin-top: 3px !important;
  letter-spacing: 0.03em !important;
  display: block !important;
  line-height: 1.4 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Card body */
.image-card > div:last-child {
  padding: 18px 22px 22px !important;
}

.image-card > div:last-child h3 {
  font-size: 1.0rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  color: #0d2a5e !important;
  margin-top: 6px !important;
  margin-bottom: 8px !important;
}

.image-card > div:last-child p {
  font-size: 0.875rem !important;
  line-height: 1.65 !important;
  color: #4a5f7a !important;
}

/* =====================================================================
   COMMUNITY INITIATIVES — DIGITAL ACCESS / CISCO WI-FI CARD
   ===================================================================== */

.prog-banner--violet {
  background: linear-gradient(140deg, #3b0764 0%, #5b21b6 48%, #0284c7 100%);
}

.status.implemented {
  background: #d1fae5;
  color: #065f46;
}

/* =====================================================================
   BARANGAY AT A GLANCE — HERO CARD
   ===================================================================== */

.hero-glance-card {
  margin-top: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  max-width: 100%;
  overflow: hidden;
}

.hgc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
}

.hgc-title svg { width: 14px; height: 14px; flex-shrink: 0; color: rgba(255,255,255,0.65); }
.hgc-info { margin-left: 4px; opacity: 0.45; }

.hgc-body {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.hgc-item {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  color: rgba(255,255,255,0.90);
  min-width: 0;
}

.hgc-item svg {
  width: 22px;
  height: 22px;
  color: rgba(255,255,255,0.75);
  flex-shrink: 0;
}

.hgc-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.80);
  line-height: 1.25;
  white-space: nowrap;
}

.hgc-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.hgc-sub {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.58);
  line-height: 1.45;
}

.hgc-divider {
  width: 1px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
  align-self: stretch;
}

/* Tablet: full width, glance card wraps 2×2
   Dividers sit at nth-child positions 2,4,6 so items are at 1,3,5,7 */
@media (max-width: 860px) {
  .hero-glance-card { max-width: 100%; }
  .hgc-body { flex-wrap: wrap; }
  .hgc-divider { display: none; }
  .hgc-item { flex: 0 0 50%; padding: 12px 14px; }
  .hgc-item:nth-child(1),
  .hgc-item:nth-child(3) { border-bottom: 1px solid rgba(255,255,255,0.10); }
  .hgc-item:nth-child(1),
  .hgc-item:nth-child(5) { border-right: 1px solid rgba(255,255,255,0.10); }
}

/* Mobile: 2-column compact grid */
@media (max-width: 480px) {
  .hero-glance-card { margin-top: 12px; }
  .hgc-title { padding: 8px 14px; font-size: 0.65rem; letter-spacing: 0.10em; }
  .hgc-title svg { width: 12px; height: 12px; }
  .hgc-body { flex-wrap: wrap; }
  .hgc-divider { display: none; }
  .hgc-item {
    flex: 0 0 50%;
    padding: 10px 12px;
    gap: 8px;
    border-right: none !important;
    border-bottom: none !important;
  }
  .hgc-item svg { width: 18px; height: 18px; }
  .hgc-label { font-size: 0.72rem; white-space: normal; }
  /* 2×2 internal borders */
  .hgc-item:nth-child(1) {
    border-right: 1px solid rgba(255,255,255,0.12) !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  }
  .hgc-item:nth-child(3) {
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  }
  .hgc-item:nth-child(5) {
    border-right: 1px solid rgba(255,255,255,0.12) !important;
  }
  .hgc-item svg { width: 20px; height: 20px; margin-bottom: 1px; }
  .hgc-label { font-size: 0.68rem; }
  .hgc-value { font-size: 1.15rem; }
  .hgc-sub { font-size: 0.65rem; line-height: 1.35; }
}

/* =====================================================================
   ABOUT PAGE — RESPONSIVE FIXES
   ===================================================================== */

/* Mission/Vision cards: single column at ≤599px
   (line 15902 forces 2-col at 480-599px — this wins because it's later + more specific) */
@media (max-width: 599px) {
  body[data-page="about.html"] .card-grid.two {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* Profile grid: 2-col on tablet, 1-col on mobile */
@media (max-width: 599px) {
  body[data-page="about.html"] .about-profile-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media (max-width: 420px) {
  body[data-page="about.html"] .about-profile-grid {
    grid-template-columns: 1fr !important;
  }
}

/* History story section: reduce gap on mobile */
@media (max-width: 599px) {
  body[data-page="about.html"] section.section-pad:has(.history-photo-grid) .split-layout {
    gap: 20px !important;
  }
}

/* Map: compact on small screens */
@media (max-width: 480px) {
  body[data-page="about.html"] .about-map-wrap { height: 260px !important; }
}

/* Info cards: ensure proper sizing at all widths */
@media (max-width: 599px) {
  body[data-page="about.html"] .info-card .icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.25rem !important;
  }
}

/* =====================================================================
   HERO CONTENT PADDING FIX — restore proper top spacing for index page
   Many layered overrides throughout the file reduce padding-top to ~20px.
   These rules win the cascade by appearing last + high specificity.
   ===================================================================== */
@media (min-width: 1181px) {
  body[data-page="index.html"] .hero .hero-content {
    padding-top: 72px !important;
    padding-bottom: 80px !important;
  }
}
@media (min-width: 901px) and (max-width: 1180px) {
  body[data-page="index.html"] .hero .hero-content {
    padding-top: 64px !important;
    padding-bottom: 70px !important;
  }
}
@media (min-width: 701px) and (max-width: 900px) {
  body[data-page="index.html"] .hero .hero-content {
    padding-top: 56px !important;
    padding-bottom: 60px !important;
  }
}
@media (max-width: 700px) {
  body[data-page="index.html"] .hero .hero-content {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}
@media (max-width: 480px) {
  body[data-page="index.html"] .hero .hero-content {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}

/* =====================================================================
   HERO CARDS — ALIGNMENT + STAGGERED ANIMATIONS
   Both .hero-quick-facts and .hero-glance-card share max-width: 100%
   so they're constrained equally by .hero-content width.
   ===================================================================== */

/* Info bar: each fact slides up + fades in when bar becomes visible */
.hero-quick-facts.visible .hero-fact {
  opacity: 0;
  animation: factReveal 0.5s ease forwards;
}
.hero-quick-facts.visible .hero-fact:nth-child(1) { animation-delay: 0.05s; }
.hero-quick-facts.visible .hero-fact:nth-child(3) { animation-delay: 0.15s; }
.hero-quick-facts.visible .hero-fact:nth-child(5) { animation-delay: 0.25s; }
.hero-quick-facts.visible .hero-fact:nth-child(7) { animation-delay: 0.35s; }
.hero-quick-facts.visible .hero-fact-divider {
  opacity: 0;
  animation: fadeIn 0.4s ease forwards;
}
.hero-quick-facts.visible .hero-fact-divider:nth-child(2) { animation-delay: 0.10s; }
.hero-quick-facts.visible .hero-fact-divider:nth-child(4) { animation-delay: 0.20s; }
.hero-quick-facts.visible .hero-fact-divider:nth-child(6) { animation-delay: 0.30s; }

@keyframes factReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Glance card: title bar slides down, each column rises up in sequence */
.hero-glance-card.visible .hgc-title {
  opacity: 0;
  animation: factReveal 0.45s ease 0.05s forwards;
}
.hero-glance-card.visible .hgc-item {
  opacity: 0;
  animation: hgcItemReveal 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
}
.hero-glance-card.visible .hgc-item:nth-child(1) { animation-delay: 0.18s; }
.hero-glance-card.visible .hgc-item:nth-child(3) { animation-delay: 0.28s; }
.hero-glance-card.visible .hgc-item:nth-child(5) { animation-delay: 0.38s; }
.hero-glance-card.visible .hgc-item:nth-child(7) { animation-delay: 0.48s; }
.hero-glance-card.visible .hgc-divider {
  opacity: 0;
  animation: hgcDividerGrow 0.4s ease forwards;
}
.hero-glance-card.visible .hgc-divider:nth-child(2) { animation-delay: 0.22s; }
.hero-glance-card.visible .hgc-divider:nth-child(4) { animation-delay: 0.32s; }
.hero-glance-card.visible .hgc-divider:nth-child(6) { animation-delay: 0.42s; }

@keyframes hgcItemReveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hgcDividerGrow {
  from { opacity: 0; transform: scaleY(0.3); }
  to   { opacity: 1; transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-quick-facts.visible .hero-fact,
  .hero-quick-facts.visible .hero-fact-divider,
  .hero-glance-card.visible .hgc-title,
  .hero-glance-card.visible .hgc-item,
  .hero-glance-card.visible .hgc-divider {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =====================================================================
   ABOUT PAGE — COMPACT LAYOUT AT ALL DESKTOP SIZES
   Goal: header (93px) + about-hero (~210px) + history (~380px) = ~683px
   so Mission/Vision cards appear within a typical 780px effective viewport.
   ===================================================================== */

/* Photo heights — large desktop (1201px+) */
@media (min-width: 1201px) {
  body[data-page="about.html"] .history-photo-grid img:first-child {
    height: 178px !important;
  }
  body[data-page="about.html"] .history-photo-grid img:not(:first-child) {
    height: 136px !important;
  }
}

/* Photo heights — medium desktop (901–1200px) */
@media (min-width: 901px) and (max-width: 1200px) {
  body[data-page="about.html"] .history-photo-grid img:first-child {
    height: 162px !important;
  }
  body[data-page="about.html"] .history-photo-grid img:not(:first-child) {
    height: 122px !important;
  }
}

/* =====================================================================
   SERVICES PAGE — MODERNIZED ACCORDION
   Icons + chips in closed state, constrained width, clean hierarchy.
   All rules scoped to body[data-page="services.html"].
   ===================================================================== */

/* Constrain accordion to readable width, centered
   Use .container.accordion for higher specificity than .container alone */
body[data-page="services.html"] .container.accordion {
  max-width: 800px !important;
  width: min(800px, calc(100% - 40px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Trigger layout: icon | info | + button */
body[data-page="services.html"] .accordion-trigger {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 22px !important;
}

/* Service icon circle
   Use .accordion-trigger .svc-icon for specificity (0,3,2) to beat
   the existing .accordion-trigger span rule at (0,2,2)             */
body[data-page="services.html"] .accordion-trigger .svc-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 16px !important;
  font-size: 0 !important;
  gap: 0 !important;
  position: static !important;
  line-height: 0 !important;
  flex-shrink: 0 !important;
}

/* Remove the old pulsing dot — use .accordion-trigger context for specificity */
body[data-page="services.html"] .accordion-trigger .svc-icon::before,
body[data-page="services.html"] .accordion-trigger .svc-info::before,
body[data-page="services.html"] .accordion-trigger .svc-name::before,
body[data-page="services.html"] .accordion-trigger .svc-chips::before,
body[data-page="services.html"] .accordion-trigger .svc-chip::before {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Info block: name + chips stacked */
body[data-page="services.html"] .accordion-trigger .svc-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  font-size: inherit !important;
  position: static !important;
}

/* Service name */
body[data-page="services.html"] .svc-name {
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  color: #0a285d !important;
  line-height: 1.25 !important;
  display: block !important;
}

/* Chips row */
body[data-page="services.html"] .svc-chips {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* Base chip */
body[data-page="services.html"] .svc-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  line-height: 1.6 !important;
}

/* Time chip — blue */
body[data-page="services.html"] .svc-chip-time {
  background: rgba(47,102,255,0.08) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(47,102,255,0.15) !important;
}

/* Free chip — green */
body[data-page="services.html"] .svc-chip-free {
  background: rgba(22,163,74,0.08) !important;
  color: #15803d !important;
  border: 1px solid rgba(22,163,74,0.18) !important;
}

/* Paid chip — amber */
body[data-page="services.html"] .svc-chip-paid {
  background: rgba(217,119,6,0.08) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217,119,6,0.18) !important;
}

/* Emergency chip — red */
body[data-page="services.html"] .svc-chip-emergency {
  background: rgba(220,38,38,0.08) !important;
  color: #b91c1c !important;
  border: 1px solid rgba(220,38,38,0.18) !important;
}

/* Mobile: compact icon, hide chips if space is tight */
@media (max-width: 480px) {
  body[data-page="services.html"] .svc-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 13px !important;
  }
  body[data-page="services.html"] .svc-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  body[data-page="services.html"] .svc-name {
    font-size: 0.92rem !important;
  }
  body[data-page="services.html"] .svc-chip {
    font-size: 0.62rem !important;
    padding: 1px 7px !important;
  }
}

/* Section padding — all desktop (901px+)
   Overrides line 10190 which sets 46px/60px using a high-specificity
   adjacent-sibling selector. Mirror that exact selector here so we win
   by position (later in file = same specificity, later wins).           */
@media (min-width: 901px) {
  body[data-page="about.html"] section.section-pad:has(.history-photo-grid) {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  body[data-page="about.html"] main > section.section-pad + section.section-pad,
  body[data-page="about.html"] main > section.section-pad + section.soft-bg,
  body[data-page="about.html"] main > section.soft-bg {
    padding-top: 32px !important;
    padding-bottom: 40px !important;
  }
}

/* =====================================================================
   HOMEPAGE HERO — MOBILE LAYOUT OVERHAUL (≤ 640px)
   Goal: clean, organized flow — title → info bar → glance card →
   emergency card. No overcrowding, no excessive min-height, no overlap.
   All rules scoped to body[data-page="index.html"] for safety.
   ===================================================================== */

/* 1. Hero: remove the min-height clamp that forces 600-760px on mobile */
@media (max-width: 640px) {
  body[data-page="index.html"] .hero {
    min-height: 0 !important;
  }
}

/* 2. H1: slightly tighter on very small screens (360px) */
@media (max-width: 380px) {
  body[data-page="index.html"] .hero h1 {
    font-size: 2.15rem !important;
    line-height: 1.15 !important;
  }
}

/* 3. Hero description: compact line-height and size */
@media (max-width: 640px) {
  body[data-page="index.html"] .hero .hero-content > p {
    font-size: 0.93rem !important;
    line-height: 1.55 !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }
}

/* 4. Buttons: reduce gap and padding to save ~20px vertical space */
@media (max-width: 640px) {
  body[data-page="index.html"] .hero .hero-actions {
    gap: 8px !important;
    margin-top: 16px !important;
  }
  body[data-page="index.html"] .hero .hero-actions .btn {
    padding: 10px 16px !important;
    min-height: 44px !important;
    font-size: 0.9rem !important;
  }
}

/* 5. Emergency card: properly centered, full-width, cleaner mobile layout */
@media (max-width: 640px) {
  body[data-page="index.html"] .hero-card.hero-emergency-card,
  body[data-page="index.html"] .hero-card.hero-emergency-card.emergency-card-alt {
    position: relative !important;
    inset: auto !important;
    width: calc(100% - 28px) !important;
    max-width: 100% !important;
    margin: 14px auto 22px !important;
    border-radius: 20px !important;
  }
}

/* 6. Emergency main row: restore side-by-side on mobile (saves ~60px height) */
@media (max-width: 640px) {
  body[data-page="index.html"] .emergency-main-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  body[data-page="index.html"] .emergency-siren-badge {
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
}

/* 7. Emergency number grid: 3 columns on mobile (saves ~60px height) */
@media (max-width: 640px) {
  body[data-page="index.html"] .hero-emergency-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  body[data-page="index.html"] .hero-emergency-item {
    padding: 8px 6px !important;
    text-align: center !important;
  }
}

/* 8. Emergency action strip: keep in row on mobile */
@media (max-width: 640px) {
  body[data-page="index.html"] .emergency-action-strip {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* CONTACT PAGE — SK FACEBOOK FEATURED CARD */
.contact-social-block {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}
.contact-social-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.contact-social-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6b7ea8;
}
.contact-social-featured {
  flex: 1;
  min-width: 180px;
}
.contact-social-page-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f8faff;
  border: 1px solid #e2e8f5;
  border-radius: 14px;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
  cursor: pointer;
}
.contact-social-page-card:hover {
  background: #eef3ff;
  border-color: #bfcfef;
  box-shadow: 0 2px 10px rgba(24,119,242,0.08);
}
.cspf-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cspf-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cspf-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0a285d;
  line-height: 1.2;
}
.cspf-sub {
  font-size: 0.75rem;
  color: #6b7ea8;
  line-height: 1.2;
}
.cspf-arrow {
  color: #9caed0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* HOMEPAGE — VALUES STRIP COMPACT (≥ 900px) */
@media (min-width: 900px) {
  body[data-page="index.html"] .gradient-band.section-pad {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  body[data-page="index.html"] .stats-grid div {
    min-height: auto !important;
    height: auto !important;
    padding: 14px 20px !important;
    border-radius: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  body[data-page="index.html"] .stats-grid strong {
    font-size: 0.93rem !important;
    margin-bottom: 3px !important;
    display: block !important;
  }
  body[data-page="index.html"] .stats-grid span {
    font-size: 0.79rem !important;
    line-height: 1.35 !important;
    display: block !important;
  }
  /* Spacing between gradient band and next section */
  body[data-page="index.html"] .gradient-band + .section-pad {
    padding-top: 48px !important;
    margin-top: 0px !important;
  }
}

/* HOMEPAGE — Spacing below feature strip on desktop */
@media (min-width: 1024px) {
  body[data-page="index.html"] .gradient-band + .section-pad {
    padding-top: 56px !important;
  }
}

/* HOMEPAGE HERO — DESKTOP SCALE-DOWN (≥ 900px) */
@media (min-width: 900px) {
  body[data-page="index.html"] .hero h1 {
    font-size: clamp(2.4rem, 3.8vw, 3.6rem) !important;
    letter-spacing: -0.045em !important;
    line-height: 1.05 !important;
  }
  body[data-page="index.html"] .hero-card.hero-emergency-card,
  body[data-page="index.html"] .hero-card.hero-emergency-card.emergency-card-alt {
    width: min(310px, calc(100% - 40px)) !important;
    right: 3% !important;
    padding: 16px 18px 14px !important;
  }
  body[data-page="index.html"] .emergency-pill,
  body[data-page="index.html"] .emergency-pill-live {
    font-size: 0.68rem !important;
    padding: 5px 9px !important;
    gap: 6px !important;
  }
  body[data-page="index.html"] .emergency-dot {
    width: 7px !important;
    height: 7px !important;
  }
  body[data-page="index.html"] .emergency-status,
  body[data-page="index.html"] .emergency-status-alert {
    font-size: 0.68rem !important;
    padding: 4px 9px !important;
  }
  body[data-page="index.html"] .hero-hotline-number {
    font-size: 1.5rem !important;
  }
  body[data-page="index.html"] .hero-emergency-grid {
    gap: 5px !important;
  }
  body[data-page="index.html"] .emergency-card-alt p {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
  }
}

/* ═══════════════════════════════════════════════════
   SITE-WIDE RESPONSIVE POLISH
   Targeted fixes across all pages and breakpoints.
   No content removed, no layout redesigned.
═══════════════════════════════════════════════════ */

/* ── Prevent any horizontal scroll ── */
html, body { overflow-x: hidden; max-width: 100%; }

/* ── Footer copyright: allow clean wrap on mobile ── */
.footer-bottom {
  white-space: normal;
  word-break: break-word;
  line-height: 1.55;
  padding: 16px 20px;
}

/* ── About page: disable justify on mobile (avoids uneven spacing) ── */
@media (max-width: 640px) {
  p[style*="text-align: justify"] { text-align: left !important; }
}

/* ── Quick info bar: tighten font at very small screens ── */
@media (max-width: 380px) {
  .hero-fact { font-size: 0.63rem !important; }
  .hero-fact svg { width: 12px !important; height: 12px !important; }
}

/* ── Officials page: 2-column card grid at mobile (less scrolling) ── */
@media (max-width: 640px) {
  body[data-page="officials.html"] .officials-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  body[data-page="officials.html"] .official-card img {
    width: 90px !important;
    height: 90px !important;
  }
  body[data-page="officials.html"] .official-card h3 {
    font-size: 0.88rem !important;
  }
  body[data-page="officials.html"] .official-card span,
  body[data-page="officials.html"] .official-card p {
    font-size: 0.78rem !important;
  }
}

/* ── Services page: keep trigger aligned when name wraps ── */
@media (max-width: 480px) {
  body[data-page="services.html"] .accordion-trigger {
    padding: 14px 16px !important;
    gap: 12px !important;
  }
  body[data-page="services.html"] .svc-chips {
    gap: 4px !important;
  }
}

/* ── Hero at tablet (768–900px): prevent card overlap ── */
@media (min-width: 641px) and (max-width: 900px) {
  body[data-page="index.html"] .hero-content {
    padding-bottom: 160px !important;
  }
  body[data-page="index.html"] .hero-card.hero-emergency-card {
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── Announcements & projects: cards full-width on mobile ── */
@media (max-width: 640px) {
  .card-grid { grid-template-columns: 1fr !important; }
  .image-card { border-radius: 20px !important; }
}

/* ── Citizens charter steps: prevent overflow on tiny screens ── */
@media (max-width: 480px) {
  .step-card, [class*="step-"] {
    padding: 14px 16px !important;
  }
}

/* ── Contact social block: stack on very narrow ── */
@media (max-width: 420px) {
  .contact-social-block {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .contact-social-featured { width: 100% !important; min-width: 0 !important; }
  .contact-social-page-card { width: 100% !important; }
}

/* ── Nav menu: ensure it never overflows viewport ── */
@media (max-width: 480px) {
  .nav-menu {
    left: 10px !important;
    right: 10px !important;
    padding: 12px !important;
  }
}

/* ── Page hero: reduce height on small tablets ── */
@media (min-width: 641px) and (max-width: 900px) {
  .page-hero { padding: 52px 0 44px !important; }
}

/* ── Glance card: ensure 2-column on tablet ── */
@media (min-width: 481px) and (max-width: 860px) {
  .hgc-body { flex-wrap: wrap !important; }
  .hgc-divider { display: none !important; }
  .hgc-item { flex: 0 0 50% !important; }
}

/* ── Large screens (≥1440px): cap content width gracefully ── */
@media (min-width: 1440px) {
  body[data-page="index.html"] .hero-card.hero-emergency-card,
  body[data-page="index.html"] .hero-card.hero-emergency-card.emergency-card-alt {
    right: max(3%, calc(50vw - 590px)) !important;
  }
}

/* ═══════════════════════════════════════════════════
   SERVICES PAGE — ACCORDION SECTION BACKGROUND
   Soft official blue tint behind the accordion list.
   Cards stay white/light. No dark treatment.
═══════════════════════════════════════════════════ */
.svc-accordion-section {
  background:
    radial-gradient(circle at 8% 15%, rgba(21,94,239,0.05) 0%, transparent 35%),
    radial-gradient(circle at 92% 85%, rgba(22,182,135,0.05) 0%, transparent 35%),
    linear-gradient(160deg, #eef5ff 0%, #f6fafe 45%, #edfaf5 100%) !important;
  position: relative;
}

.svc-accordion-section .container.accordion {
  position: relative;
  z-index: 1;
}

/* Keep accordion items white/glassy — ensure no dark override */
body[data-page="services.html"] .accordion-item {
  background: #fff !important;
  border: 1px solid rgba(21,94,239,0.08) !important;
  box-shadow: 0 2px 12px rgba(21,94,239,0.06), 0 1px 3px rgba(0,0,0,0.04) !important;
}

body[data-page="services.html"] .accordion-item:hover {
  box-shadow: 0 6px 24px rgba(21,94,239,0.10), 0 2px 6px rgba(0,0,0,0.05) !important;
  transform: translateY(-1px);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* ═══════════════════════════════════════════════════
   COMMUNITY INITIATIVES — 3-COLUMN GRID & CARD FIX
   Balanced 6-card layout, consistent banner heights.
═══════════════════════════════════════════════════ */
/* Shared proj-card rules — used on both index.html and projects.html */
.proj-card-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
}

.proj-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
}

.proj-card-banner {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: unset !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 20px 22px !important;
  box-sizing: border-box !important;
}

/* Fully rounded banner block — floats inside the card */
.proj-card-banner {
  border-radius: 18px !important;
  overflow: hidden !important;
  margin: 12px 12px 0 !important;
  width: calc(100% - 24px) !important;
  box-sizing: border-box !important;
}

/* Image-based banners: full-bleed photo */
.proj-card-banner.proj-card-banner-img {
  padding: 0 !important;
  overflow: hidden !important;
}

.proj-card-banner.proj-card-banner-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 18px !important;
}

.proj-card-banner .ict-banner-icon {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.proj-card-banner .ict-banner-icon svg {
  width: 44px !important;
  height: 44px !important;
  display: block !important;
}

.proj-card-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px 20px 22px !important;
}

.proj-card-body h3 {
  margin-top: 8px !important;
  margin-bottom: 10px !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
}

.proj-card-body p {
  font-size: 0.875rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.proj-read-more {
  margin-top: auto !important;
  padding-top: 14px !important;
  align-self: flex-start !important;
}

/* Blue road banner */
.prog-banner--blue {
  background: linear-gradient(135deg, #1565c0 0%, #1e88e5 60%, #42a5f5 100%);
}

/* Teal youth banner */
.prog-banner--teal {
  background: linear-gradient(135deg, #00695c 0%, #00897b 60%, #26a69a 100%);
}

/* Status: Upcoming */
.status.upcoming {
  background: rgba(255, 167, 38, 0.12);
  color: #e65100;
  border: 1px solid rgba(230, 81, 0, 0.22);
}

/* Status: Implemented */
.status.implemented {
  background: rgba(21, 101, 216, 0.10);
  color: #1565d8;
  border: 1px solid rgba(21, 101, 216, 0.22);
}

/* Tablet: 2 columns — applies to all pages using proj-card-grid */
@media (max-width: 900px) {
  .proj-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile: 1 column — applies to all pages using proj-card-grid */
@media (max-width: 560px) {
  .proj-card-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════
   HOMEPAGE HERO — SUBTLE ENTRANCE ANIMATIONS
   Smooth, professional, no layout shift.
   All animations respect prefers-reduced-motion.
═══════════════════════════════════════════════════ */

/* Keyframes */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeRight {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.82; transform: scale(1.06); }
}
@keyframes heroBgZoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1.0); }
}

/* Hero background subtle zoom */
body[data-page="index.html"] .hero-overlay {
  animation: heroBgZoom 9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Hero content children — staggered fade-up */
body[data-page="index.html"] .hero-content .eyebrow {
  animation: heroFadeUp 0.6s ease both;
  animation-delay: 0.1s;
}
body[data-page="index.html"] .hero-content h1 {
  animation: heroFadeUp 0.65s ease both;
  animation-delay: 0.22s;
}
body[data-page="index.html"] .hero-content > p {
  animation: heroFadeUp 0.65s ease both;
  animation-delay: 0.35s;
}
body[data-page="index.html"] .hero-content .hero-actions {
  animation: heroFadeUp 0.6s ease both;
  animation-delay: 0.48s;
}

/* Quick info bar */
body[data-page="index.html"] .hero-quick-facts {
  animation: heroFadeIn 0.7s ease both;
  animation-delay: 0.6s;
}

/* Barangay at a Glance — card fade-up, items stagger */
body[data-page="index.html"] .hgc-item:nth-child(1) {
  animation: heroFadeIn 0.5s ease both;
  animation-delay: 0.85s;
}
body[data-page="index.html"] .hgc-item:nth-child(3) {
  animation: heroFadeIn 0.5s ease both;
  animation-delay: 1.0s;
}
body[data-page="index.html"] .hgc-item:nth-child(5) {
  animation: heroFadeIn 0.5s ease both;
  animation-delay: 1.15s;
}
body[data-page="index.html"] .hgc-item:nth-child(7) {
  animation: heroFadeIn 0.5s ease both;
  animation-delay: 1.3s;
}

/* Emergency card — slide from right on desktop */
@media (min-width: 900px) {
  body[data-page="index.html"] .hero-card.hero-emergency-card:not(.visible) {
    transform: translateX(20px) !important;
  }
  body[data-page="index.html"] .hero-card.hero-emergency-card {
    transition: opacity 0.65s ease, transform 0.65s ease !important;
    transition-delay: 0.25s !important;
  }
}

/* SOS badge — slow professional pulse */
body[data-page="index.html"] .emergency-siren-badge {
  animation: heroPulse 2.8s ease-in-out infinite;
  animation-delay: 1.8s;
}

/* Hero buttons — hover lift on desktop */
@media (hover: hover) {
  body[data-page="index.html"] .hero-actions .btn {
    transition: transform 0.22s ease, box-shadow 0.22s ease,
                background 0.22s ease, color 0.22s ease,
                border-color 0.22s ease !important;
  }
  body[data-page="index.html"] .hero-actions .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2) !important;
  }
}

/* Feature cards strip — hover lift on desktop */
@media (hover: hover) {
  body[data-page="index.html"] .stats-grid div {
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
  }
  body[data-page="index.html"] .stats-grid div:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 28px rgba(21, 94, 239, 0.18) !important;
  }
}

/* Reduced motion — disable all hero animations */
@media (prefers-reduced-motion: reduce) {
  body[data-page="index.html"] .hero-overlay,
  body[data-page="index.html"] .hero-content .eyebrow,
  body[data-page="index.html"] .hero-content h1,
  body[data-page="index.html"] .hero-content > p,
  body[data-page="index.html"] .hero-content .hero-actions,
  body[data-page="index.html"] .hero-quick-facts,
  body[data-page="index.html"] .hgc-item,
  body[data-page="index.html"] .hero-card.hero-emergency-card,
  body[data-page="index.html"] .emergency-siren-badge {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* About Us — Mission/Vision section grows to fill the remaining viewport height
   so Barangay Profile always starts below the fold on any desktop screen size.
   The section's soft background expands naturally (no blank white gap).
   Cards are vertically centered within the taller section on large monitors.
   772px is the section's stable top offset across all desktop widths.          */
@media (min-width: 901px) {
  body[data-page="about.html"] main > section.soft-bg.section-pad:not(.page-hero):not(.hero) {
    min-height: calc(100vh - 772px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  body[data-page="about.html"] main > section.soft-bg.section-pad:not(.page-hero):not(.hero) > .container {
    width: 100% !important;
  }
  body[data-page="about.html"] .about-profile-section {
    margin-top: 0 !important;
  }
}

/* Emergency card — vertically center beside hero content on all desktop sizes. */
@media (min-width: 901px) {
  body[data-page="index.html"] .hero-card.hero-emergency-card,
  body[data-page="index.html"] .hero-card.hero-emergency-card.emergency-card-alt {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
}

/* =================================================================
   HOMEPAGE HERO — STAGGERED ENTRANCE + AMBIENT ANIMATIONS
   On desktop: each element enters individually with timing offsets
   instead of the bulk reveal-class fade. The reveal class on
   .hero-content is disabled (opacity forced to 1) so the children
   control their own entrance.
   ================================================================= */

@keyframes hHeroEyebrow {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hHeroTitle {
  from { opacity: 0; transform: translateY(48px) scale(0.93); }
  to   { opacity: 1; transform: none; }
}
@keyframes hHeroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hHeroBtnPop {
  0%   { opacity: 0; transform: scale(0.78) translateY(16px); }
  65%  { transform: scale(1.07) translateY(-4px); }
  100% { opacity: 1; transform: none; }
}
@keyframes hCardFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Float via margin-top: doesn't conflict with top:50%!important or transform:translateY(-50%)!important */
@keyframes hCardFloat {
  0%, 100% { margin-top: 0px; }
  50%       { margin-top: -10px; }
}
@keyframes hDotBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.8); }
}
@keyframes hSosPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.12); }
}
@keyframes hHotlineShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@media (min-width: 901px) {
  /* Disable bulk-reveal on the hero-content container so children animate */
  body[data-page="index.html"] .hero-content {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Eyebrow badge — drops in from slightly above */
  body[data-page="index.html"] .hero-content .eyebrow {
    animation: hHeroEyebrow 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
  }

  /* H1 — large upward rise with subtle scale for impact */
  body[data-page="index.html"] .hero-content h1 {
    animation: hHeroTitle 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
  }

  /* Description paragraph */
  body[data-page="index.html"] .hero-content > p {
    animation: hHeroFadeUp 0.7s ease 0.44s both;
  }

  /* Buttons — each pops in with spring, staggered 120ms apart */
  body[data-page="index.html"] .hero-actions a:nth-child(1) {
    animation: hHeroBtnPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
  }
  body[data-page="index.html"] .hero-actions a:nth-child(2) {
    animation: hHeroBtnPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.72s both;
  }
  body[data-page="index.html"] .hero-actions a:nth-child(3) {
    animation: hHeroBtnPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.84s both;
  }

  /* Info bar and glance card */
  body[data-page="index.html"] .hero-quick-facts {
    animation: hHeroFadeUp 0.65s ease 0.98s both;
    transition: none !important;
  }
  body[data-page="index.html"] .hero-glance-card {
    animation: hHeroFadeUp 0.65s ease 1.14s both;
    transition: none !important;
  }

  /* Emergency card — fades in (centered position held by !important rules above),
     then gently bobs via margin-top which doesn't conflict with top/transform.
     !important needed to beat .reveal { animation: safeFadeUp !important }    */
  body[data-page="index.html"] .hero-card.hero-emergency-card {
    animation: hCardFadeIn 0.8s ease 0.3s both,
               hCardFloat 5s ease-in-out 1.4s infinite !important;
    transition: none !important;
  }
}

/* Ambient: live indicator dot pulses */
body[data-page="index.html"] .emergency-dot {
  animation: hDotBlink 1.5s ease-in-out infinite !important;
}

/* Ambient: SOS text bounces */
body[data-page="index.html"] .emergency-siren-badge > i {
  animation: hSosPulse 2.2s ease-in-out infinite;
}

/* Ambient: hotline number sweeps a light shimmer across */
body[data-page="index.html"] .hero-hotline-number {
  background: linear-gradient(
    90deg,
    #1d4ed8 0%,
    #1d4ed8 30%,
    #93c5fd 50%,
    #1d4ed8 70%,
    #1d4ed8 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hHotlineShimmer 4s linear 2.5s infinite;
}

/* Fix: On the homepage, the selector a[href*="announcements"] inadvertently
   catches the Announcements nav-link, overriding justify-content to center
   and min-height to 38px. This restores it to match all other nav buttons. */
@media (max-width: 900px) {
  body[data-page="index.html"] .nav-menu .nav-link[href*="announcements"] {
    justify-content: flex-start !important;
  }
}
@media (max-width: 480px) {
  body[data-page="index.html"] .nav-menu .nav-link[href*="announcements"] {
    min-height: 34px !important;
  }
}

/* =====================================================================
   CONTACT PAGE — MOBILE SPACING & ALIGNMENT CLEANUP
   Scoped entirely to body[data-page="contact.html"].
   Desktop layout (≥ 601px) is untouched.
   Targets: hero height, card header padding, info stack spacing,
   icon sizing, text wrap, and social block layout.
   ===================================================================== */
@media (max-width: 600px) {

  /* 1. Hero — slightly tighter so card reaches the screen sooner */
  body[data-page="contact.html"] .page-hero {
    padding: 42px 0 34px !important;
  }

  /* 2. Blue gradient card header — reduce generous 30px padding on mobile */
  body[data-page="contact.html"] .contact-card-modern .contact-card-header {
    padding: 22px 20px 20px !important;
  }

  /* 3. Info stack wrapper — remove excess margin-top and reduce side padding
        so content has more room on narrow screens                          */
  body[data-page="contact.html"] .contact-card-modern .contact-info-stack {
    padding: 16px 14px 18px !important;
    gap: 10px !important;
    margin-top: 0 !important;
  }

  /* 4. Each info row — smaller icon column, tighter padding, center-align icon */
  body[data-page="contact.html"] .contact-card-modern .info-stack-item {
    grid-template-columns: 42px 1fr !important;
    gap: 12px !important;
    padding: 11px 12px !important;
    align-items: center !important;
  }

  /* 5. Remove the extra top-border spacing between items — gap handles it */
  body[data-page="contact.html"] .contact-card-modern .info-stack-item + .info-stack-item {
    padding-top: 0 !important;
    border-top: none !important;
  }

  /* 6. Icon — reduce from 60px to 42px */
  body[data-page="contact.html"] .contact-card-modern .info-stack-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
    font-size: 18px !important;
  }

  /* 7. Icon SVG */
  body[data-page="contact.html"] .contact-card-modern .info-stack-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  /* 8. Label (PHONE / EMAIL / etc.) */
  body[data-page="contact.html"] .contact-card-modern .info-stack-title {
    font-size: 0.63rem !important;
    margin-bottom: 3px !important;
    letter-spacing: 0.11em !important;
  }

  /* 9. Value text — slightly smaller, wraps cleanly without overflow */
  body[data-page="contact.html"] .contact-card-modern .info-stack-content p {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* 10. Social block — tighter top spacing, always stacked on mobile */
  body[data-page="contact.html"] .contact-card-modern .contact-social-block {
    margin-top: 14px !important;
    padding-top: 14px !important;
    gap: 12px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  body[data-page="contact.html"] .contact-social-featured {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 11. Social icon buttons — slightly smaller on mobile */
  body[data-page="contact.html"] .contact-card-modern .contact-social-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }

  /* 12. SK Facebook Page card — ensure it fills width and text doesn't clip */
  body[data-page="contact.html"] .contact-social-featured {
    width: 100% !important;
    min-width: 0 !important;
  }
  body[data-page="contact.html"] .contact-social-page-card {
    width: 100% !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
  }
}

/* Extra-tight for 360–380px screens */
@media (max-width: 380px) {
  body[data-page="contact.html"] .page-hero {
    padding: 36px 0 28px !important;
  }
  body[data-page="contact.html"] .contact-card-modern .contact-card-header {
    padding: 18px 16px 16px !important;
  }
  body[data-page="contact.html"] .contact-card-modern .contact-info-stack {
    padding: 14px 12px 16px !important;
  }
  body[data-page="contact.html"] .contact-card-modern .info-stack-item {
    padding: 10px 10px !important;
    grid-template-columns: 38px 1fr !important;
    gap: 10px !important;
  }
  body[data-page="contact.html"] .contact-card-modern .info-stack-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }
  /* Email address: force break on very narrow screens to prevent overflow */
  body[data-page="contact.html"] .contact-card-modern .info-stack-content p {
    font-size: 0.83rem !important;
    word-break: break-all !important;
  }
}

/* =====================================================================
   OFFICIALS PAGE — FEATURED PUNONG BARANGAY + COUNCIL GRID
   Scoped to body[data-page="officials.html"]. No other pages affected.
   ===================================================================== */

/* ── Section vertical spacing ───────────────────────────────────── */
body[data-page="officials.html"] .officials-section {
  padding-top: 28px !important;
  padding-bottom: 80px !important;
}

/* ── Featured Punong Barangay card ──────────────────────────────── */
body[data-page="officials.html"] .officials-feature-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* ── Featured Punong Barangay card ──────────────────────────────── */
body[data-page="officials.html"] .officials-feature-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* Horizontal layout: photo left, details right */
body[data-page="officials.html"] .official-featured {
  background: #fff;
  border: 1px solid rgba(21, 101, 216, .12);
  border-radius: 18px;
  box-shadow: 0 10px 32px rgba(8, 38, 77, .10);
  padding: 20px 28px;
  max-width: 520px;
  width: fit-content;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
}

/* Blue gradient top accent bar */
body[data-page="officials.html"] .official-featured::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #0b3880 0%, #1565c0 55%, #0097b2 100%);
}

/* Subtle decorative circle — right side */
body[data-page="officials.html"] .official-featured::after {
  content: '';
  position: absolute;
  right: -50px;
  top: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21,101,216,.06), transparent 70%);
  pointer-events: none;
}

body[data-page="officials.html"] .official-featured .ofc-photo {
  flex-shrink: 0;
  margin-bottom: 0;
}

body[data-page="officials.html"] .official-featured .ofc-photo img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ddeeff;
  box-shadow: 0 6px 20px rgba(13, 71, 161, .15);
  display: block;
  transition: transform 0.3s ease;
}

/* Right-side text container */
body[data-page="officials.html"] .ofc-details {
  flex: 1;
  min-width: 0;
}

body[data-page="officials.html"] .ofc-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(21,101,216,.11), rgba(0,151,178,.08));
  border: 1px solid rgba(21,101,216,.15);
  color: #1565c0;
  font-size: .70rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

body[data-page="officials.html"] .ofc-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0d2d63;
  letter-spacing: -.03em;
  line-height: 1.2;
  margin: 0 0 8px;
}

/* Subtle divider under the name */
body[data-page="officials.html"] .ofc-divider {
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, #1565c0, #0097b2);
  border-radius: 2px;
  margin-bottom: 8px;
}

body[data-page="officials.html"] .ofc-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #607595;
  font-size: .88rem;
  margin: 0;
  line-height: 1.5;
}

/* People icon before "Overall Barangay Leadership" */
body[data-page="officials.html"] .ofc-role::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23607595' d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: .7;
}

/* ── Section divider before council grid ────────────────────────── */
body[data-page="officials.html"] .officials-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  color: #7a94bc;
  font-size: .73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
body[data-page="officials.html"] .officials-divider::before,
body[data-page="officials.html"] .officials-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(86, 129, 216, .18);
}

/* ── Council grid — 5 columns desktop ──────────────────────────── */
body[data-page="officials.html"] .officials-council-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  max-width: 1220px;
  margin: 0 auto;
}

/* 5 columns only on 1200px+ */
@media (min-width: 1200px) {
  body[data-page="officials.html"] .officials-section .officials-council-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

/* Compact card sizing for the council grid */
body[data-page="officials.html"] .officials-council-grid .official-card {
  padding: 20px 14px 18px !important;
  border-radius: 16px !important;
  text-align: center;
  min-height: auto !important;
}

body[data-page="officials.html"] .officials-council-grid .official-card img {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 4px solid #ddeeff !important;
  box-shadow: 0 8px 20px rgba(13, 71, 161, .13) !important;
  display: block !important;
  margin: 0 auto 10px !important;
}

body[data-page="officials.html"] .officials-council-grid .official-card h3 {
  font-size: .94rem !important;
  font-weight: 700 !important;
  color: #0d2d63 !important;
  letter-spacing: -.015em !important;
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
}

body[data-page="officials.html"] .officials-council-grid .official-card span {
  font-size: .72rem !important;
  font-weight: 800 !important;
  color: #1565c0 !important;
  display: block !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
}

body[data-page="officials.html"] .officials-council-grid .official-card p {
  font-size: .80rem !important;
  color: #607595 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* ── Responsive breakpoints ─────────────────────────────────────── */

/* 900px–1199px: 3 columns, featured card stacked */
@media (max-width: 1199px) {
  body[data-page="officials.html"] .officials-section .officials-council-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    max-width: 860px !important;
  }
}

/* 768px–899px: 3 columns, featured stacked */
@media (max-width: 899px) {
  body[data-page="officials.html"] .officials-section .officials-council-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    max-width: 680px !important;
  }
}

/* Below 768px: stack featured card vertically, 2-column council grid */
@media (max-width: 767px) {
  body[data-page="officials.html"] .officials-feature-wrap {
    margin-bottom: 28px;
  }
  body[data-page="officials.html"] .official-featured {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 20px 20px;
    gap: 14px;
    width: 100%;
    max-width: 420px;
  }
  body[data-page="officials.html"] .official-featured .ofc-photo img {
    width: 88px;
    height: 88px;
  }
  body[data-page="officials.html"] .ofc-divider {
    margin: 8px auto;
  }
  body[data-page="officials.html"] .ofc-role {
    justify-content: center;
  }
  body[data-page="officials.html"] .ofc-name {
    font-size: 1.15rem;
  }
  body[data-page="officials.html"] .officials-section .officials-council-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    max-width: 100% !important;
  }
}

/* Below 480px: tighten further */
@media (max-width: 480px) {
  body[data-page="officials.html"] .official-featured {
    padding: 18px 16px 16px;
    gap: 12px;
    max-width: 100%;
  }
  body[data-page="officials.html"] .official-featured .ofc-photo img {
    width: 76px;
    height: 76px;
  }
  body[data-page="officials.html"] .ofc-name {
    font-size: 1.05rem;
  }
  body[data-page="officials.html"] .ofc-quote {
    font-size: .84rem;
  }
  body[data-page="officials.html"] .ofc-feature-item span {
    display: none;
  }
  body[data-page="officials.html"] .ofc-watermark {
    display: none;
  }
  body[data-page="officials.html"] .officials-council-grid .official-card img {
    width: 64px !important;
    height: 64px !important;
  }
  body[data-page="officials.html"] .officials-council-grid .official-card {
    padding: 14px 10px 12px !important;
  }
}

/* =====================================================================
   OFFICIALS PAGE — SUBTLE ENHANCEMENTS
   Entrance animations · Hover lift · Badge icon · Divider icon
   Reduced-motion safe. Desktop hover only.
   ===================================================================== */

/* ── Entrance animation keyframes ───────────────────────────────── */
@keyframes ofcFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Featured card entrance — !important to beat .reveal { animation: safeFadeUp !important } */
body[data-page="officials.html"] .official-featured {
  animation: ofcFadeUp 0.65s cubic-bezier(.22,.8,.36,1) 0.1s both !important;
}

/* Council cards entrance — staggered via nth-child */
body[data-page="officials.html"] .officials-council-grid .official-card {
  animation: ofcFadeUp 0.55s cubic-bezier(.22,.8,.36,1) both !important;
}
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(1)  { animation-delay: 0.30s !important; }
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(2)  { animation-delay: 0.38s !important; }
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(3)  { animation-delay: 0.46s !important; }
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(4)  { animation-delay: 0.54s !important; }
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(5)  { animation-delay: 0.62s !important; }
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(6)  { animation-delay: 0.70s !important; }
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(7)  { animation-delay: 0.78s !important; }
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(8)  { animation-delay: 0.86s !important; }
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(9)  { animation-delay: 0.94s !important; }
body[data-page="officials.html"] .officials-council-grid .official-card:nth-child(10) { animation-delay: 1.02s !important; }

/* ── Desktop-only hover: featured card + council cards ───────────── */
@media (hover: hover) and (min-width: 769px) {
  /* Featured card hover lift */
  body[data-page="officials.html"] .official-featured {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
  }
  body[data-page="officials.html"] .official-featured:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 50px rgba(8, 38, 77, .15) !important;
  }
  /* Photo zoom on featured card hover */
  body[data-page="officials.html"] .official-featured:hover .ofc-photo img {
    transform: scale(1.06);
  }
  /* Council card hover lift */
  body[data-page="officials.html"] .officials-council-grid .official-card {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    will-change: transform;
  }
  body[data-page="officials.html"] .officials-council-grid .official-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 18px 40px rgba(8, 38, 77, .18) !important;
  }
  /* Photo zoom on council card hover */
  body[data-page="officials.html"] .officials-council-grid .official-card img {
    transition: transform 0.3s ease !important;
  }
  body[data-page="officials.html"] .officials-council-grid .official-card:hover img {
    transform: scale(1.08) !important;
  }
}

/* ── Subtle badge glow on page load ─────────────────────────────── */
@keyframes ofcBadgeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21, 101, 216, 0); }
  50%       { box-shadow: 0 0 8px 2px rgba(21, 101, 216, .18); }
}
body[data-page="officials.html"] .ofc-badge {
  animation: ofcBadgeGlow 2.8s ease-in-out 1.2s 2;
}

/* ── Star/seal icon in Punong Barangay badge ─────────────────────── */
body[data-page="officials.html"] .ofc-badge::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 6px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231565c0' d='M12 2l2.6 5.26 5.8.84-4.2 4.09.99 5.77L12 15.27l-5.19 2.69.99-5.77L3.6 8.1l5.8-.84Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── People icon in divider label ────────────────────────────────── */
body[data-page="officials.html"] .officials-divider span::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 7px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237a94bc' d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── Respect reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body[data-page="officials.html"] .official-featured,
  body[data-page="officials.html"] .ofc-badge,
  body[data-page="officials.html"] .officials-council-grid .official-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body[data-page="officials.html"] .official-featured:hover,
  body[data-page="officials.html"] .officials-council-grid .official-card:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }
  body[data-page="officials.html"] .official-featured:hover .ofc-photo img,
  body[data-page="officials.html"] .officials-council-grid .official-card:hover img {
    transform: none !important;
  }
}

/* ── MacBook Air/Pro 13" · 1200px–1440px → 4 columns ───────────── */
/* Covers: 1280px (Air 13"), 1366px generic laptop, 1440px (some 13") */
@media (min-width: 1200px) and (max-width: 1440px) {
  /* Compact hero to give cards more room */
  body[data-page="officials.html"] .page-hero {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: auto !important;
  }
  body[data-page="officials.html"] .page-hero .eyebrow { display: none !important; }
  body[data-page="officials.html"] .page-hero h1 {
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin-bottom: 4px !important;
  }
  body[data-page="officials.html"] .page-hero p {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }
  body[data-page="officials.html"] .officials-section { padding-top: 40px !important; }
  body[data-page="officials.html"] .officials-feature-wrap { margin-bottom: 20px !important; }
  body[data-page="officials.html"] .official-featured {
    padding: 12px 20px !important;
    gap: 14px !important;
  }
  body[data-page="officials.html"] .official-featured .ofc-photo img {
    width: 72px !important;
    height: 72px !important;
  }
  body[data-page="officials.html"] .officials-divider { margin-bottom: 24px !important; }
  /* 4-column grid */
  body[data-page="officials.html"] .officials-section .officials-council-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    max-width: 960px !important;
  }
  body[data-page="officials.html"] .officials-council-grid .official-card {
    padding: 18px 14px 16px !important;
    min-height: auto !important;
  }
  body[data-page="officials.html"] .officials-council-grid .official-card img {
    width: 80px !important;
    height: 80px !important;
    margin-bottom: 8px !important;
  }
}

/* ── MacBook Pro 14" · 1441px–1599px → 5 columns ───────────────── */
/* Covers: 1512px (MBP 14") CSS viewport */
@media (min-width: 1441px) and (max-width: 1599px) {
  body[data-page="officials.html"] .page-hero {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: auto !important;
  }
  body[data-page="officials.html"] .page-hero .eyebrow { display: none !important; }
  body[data-page="officials.html"] .page-hero h1 {
    font-size: 28px !important;
    line-height: 1.15 !important;
    margin-bottom: 4px !important;
  }
  body[data-page="officials.html"] .page-hero p {
    font-size: 14px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }
  body[data-page="officials.html"] .officials-section { padding-top: 44px !important; }
  body[data-page="officials.html"] .officials-feature-wrap { margin-bottom: 20px !important; }
  body[data-page="officials.html"] .official-featured {
    padding: 14px 22px !important;
    gap: 16px !important;
  }
  body[data-page="officials.html"] .official-featured .ofc-photo img {
    width: 80px !important;
    height: 80px !important;
  }
  body[data-page="officials.html"] .officials-divider { margin-bottom: 24px !important; }
  /* 5-column grid with comfortable spacing */
  body[data-page="officials.html"] .officials-section .officials-council-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px !important;
    max-width: 1200px !important;
  }
  body[data-page="officials.html"] .officials-council-grid .official-card {
    padding: 20px 14px 18px !important;
    min-height: auto !important;
  }
  body[data-page="officials.html"] .officials-council-grid .official-card img {
    width: 86px !important;
    height: 86px !important;
    margin-bottom: 9px !important;
  }
}

/* ── Large screen (1600px+) ──────────────────────────────────────── */
@media (min-width: 1600px) {
  body[data-page="officials.html"] .officials-section {
    padding-top: 48px !important;
    padding-bottom: 180px !important;
  }
  body[data-page="officials.html"] .officials-council-grid {
    max-width: 1320px !important;
    gap: 26px !important;
    grid-template-columns: repeat(5, 1fr) !important;
  }
  body[data-page="officials.html"] .officials-council-grid .official-card {
    padding: 22px 16px 18px !important;
  }
  body[data-page="officials.html"] .officials-council-grid .official-card img {
    width: 98px !important;
    height: 98px !important;
  }
}

/* ── Very large screen (1920px+) ─────────────────────────────────── */
@media (min-width: 1920px) {
  body[data-page="officials.html"] .officials-section {
    padding-top: 56px !important;
    padding-bottom: 220px !important;
  }
  body[data-page="officials.html"] .officials-council-grid {
    max-width: 1460px !important;
    gap: 26px !important;
    grid-template-columns: repeat(5, 1fr) !important;
  }
  body[data-page="officials.html"] .officials-council-grid .official-card {
    padding: 24px 18px 20px !important;
  }
  body[data-page="officials.html"] .officials-council-grid .official-card img {
    width: 106px !important;
    height: 106px !important;
  }
}

/* =====================================================================
   HOME PAGE — OFFICIAL PREVIEW CARD (OPC)
   Simple clean card: photo + identity + faint watermark.
   Scoped to body[data-page="index.html"] to avoid bleed.
   ===================================================================== */

/* ── Official-strip: cap width and use balanced columns ─────────── */
body[data-page="index.html"] .official-strip .container {
  max-width: 1180px !important;
}
body[data-page="index.html"] .official-strip .split-layout {
  grid-template-columns: 0.8fr 1.4fr !important;
  gap: 32px !important;
  align-items: center !important;
}

/* ── Card shell ─────────────────────────────────────────────────── */
body[data-page="index.html"] .opc-card {
  display: flex;
  align-items: center;
  gap: 0;
  background: linear-gradient(135deg, #f0f5ff 0%, #e8effc 100%);
  border-radius: 18px;
  border: 1px solid rgba(37, 99, 255, .10);
  box-shadow: 0 8px 32px rgba(6, 31, 63, .08);
  padding: 24px 28px;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 860px;
}

/* ── Photo ──────────────────────────────────────────────────────── */
body[data-page="index.html"] .opc-photo {
  flex-shrink: 0;
  margin-right: 28px;
}
body[data-page="index.html"] .opc-photo img {
  width: 110px !important;
  height: 110px !important;
  border-radius: 16px !important;
  object-fit: cover !important;
  border: 4px solid #ffffff !important;
  box-shadow: 0 6px 20px rgba(6, 31, 63, .15) !important;
  display: block !important;
}

/* ── Identity block ─────────────────────────────────────────────── */
body[data-page="index.html"] .opc-identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}
body[data-page="index.html"] .opc-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0d2357;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin: 0 0 4px;
  white-space: nowrap;
}
body[data-page="index.html"] .opc-position {
  font-size: .88rem;
  font-weight: 700;
  color: #2563ff;
  margin: 0 0 10px;
}
body[data-page="index.html"] .opc-divider {
  width: 36px;
  height: 2px;
  background: #c0d0ea;
  border-radius: 2px;
  margin-bottom: 12px;
}
body[data-page="index.html"] .opc-role {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .81rem;
  color: #6b7fa8;
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
}
body[data-page="index.html"] .opc-role-icon {
  fill: #8ba4cc;
  flex-shrink: 0;
  display: block;
}

/* ── Vertical divider ───────────────────────────────────────────── */
body[data-page="index.html"] .opc-vdivider {
  width: 1px;
  align-self: stretch;
  background: rgba(37, 99, 255, .13);
  flex-shrink: 0;
  margin: 0 20px;
}

/* ── Right panel ────────────────────────────────────────────────── */
body[data-page="index.html"] .opc-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  position: relative;
}

/* Quote block */
body[data-page="index.html"] .opc-quote-wrap {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  position: relative;
  z-index: 1;
}
body[data-page="index.html"] .opc-qmark {
  flex-shrink: 0;
  opacity: .7;
  margin-top: 2px;
}
body[data-page="index.html"] .opc-quote {
  font-size: .80rem;
  font-style: italic;
  color: #3d5280;
  line-height: 1.55;
  margin: 0;
  border: none;
  padding: 2px 0 2px 10px;
  border-left: 2px solid #5b8dee;
  min-width: 0;
}

/* Features row */
body[data-page="index.html"] .opc-features {
  display: flex;
  align-items: center;
  gap: 0;
}
body[data-page="index.html"] .opc-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: none;
}
body[data-page="index.html"] .opc-feat-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b8dee;
}
body[data-page="index.html"] .opc-feature-item span {
  font-size: .65rem;
  font-weight: 600;
  color: #6b7fa8;
  text-align: center;
  line-height: 1.25;
}
body[data-page="index.html"] .opc-feat-sep {
  width: 1px;
  height: 40px;
  background: rgba(37, 99, 255, .15);
  flex-shrink: 0;
  margin: 0 20px;
  align-self: center;
}

/* Watermark seal — true overlay at far right, behind all content */
body[data-page="index.html"] .opc-watermark {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 120px;
  opacity: .045;
  pointer-events: none;
  z-index: 0;
}
body[data-page="index.html"] .opc-watermark img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Ensure quote and features sit above watermark */
body[data-page="index.html"] .opc-quote-wrap,
body[data-page="index.html"] .opc-features {
  position: relative;
  z-index: 1;
}

/* ── Responsive ─────────────────────────────────────────────────── */

/* Tablet (≤960px): tighten gaps */
@media (max-width: 960px) {
  body[data-page="index.html"] .opc-card { padding: 20px 22px; }
  body[data-page="index.html"] .opc-photo { margin-right: 20px; }
  body[data-page="index.html"] .opc-vdivider { margin: 0 18px; }
  body[data-page="index.html"] .opc-feat-sep { margin: 0 14px; }
  body[data-page="index.html"] .opc-watermark { width: 100px; height: 100px; right: 8px; }
}

/* Narrow tablet (≤900px): hide right panel — card is too narrow for quote+icons */
@media (max-width: 900px) {
  body[data-page="index.html"] .opc-vdivider { display: none; }
  body[data-page="index.html"] .opc-right { display: none; }
}

/* Mobile (≤640px): stack split to single column, stack card content */
@media (max-width: 640px) {
  body[data-page="index.html"] .official-strip .split-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  body[data-page="index.html"] .opc-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 18px;
  }
  body[data-page="index.html"] .opc-photo { margin-right: 0; }
  body[data-page="index.html"] .opc-name { white-space: normal; }
  body[data-page="index.html"] .opc-role { white-space: normal; }
}

/* Small mobile (≤400px): shrink photo */
@media (max-width: 400px) {
  body[data-page="index.html"] .opc-photo img {
    width: 88px !important;
    height: 88px !important;
  }
  body[data-page="index.html"] .opc-name { font-size: 1.05rem; }
}

/* ── Community Initiatives grid — responsive (index + projects) ── */
/* Tablet ≤900px → 2 columns */
@media (max-width: 900px) {
  body[data-page="index.html"] .proj-card-grid,
  body[data-page="projects.html"] .proj-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
}

/* Mobile ≤560px → 1 column, taller banners for label visibility */
@media (max-width: 560px) {
  body[data-page="index.html"] .proj-card-grid,
  body[data-page="projects.html"] .proj-card-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Anchor photo-based banners — keep subject centered */
  body[data-page="index.html"] .proj-card-banner-img img,
  body[data-page="projects.html"] .proj-card-banner-img img {
    object-position: center center !important;
  }
  /* Push label right so icon circle doesn't overlap text */
  body[data-page="index.html"] .proj-card-banner .ict-banner-label,
  body[data-page="projects.html"] .proj-card-banner .ict-banner-label {
    padding-left: 80px !important;
  }
}

/* ── Logo: remove white background box ── */
.brand{background:transparent!important;border:none!important;box-shadow:none!important;padding:8px 14px!important}
.brand img,
.site-header .brand img,
header .brand img,
.footer-brand img,
.site-footer .footer-brand img{border-radius:0!important;filter:none!important;background:transparent!important;box-shadow:none!important}

/* ── Emergency strip: prevent text wrapping ── */
.emergency-action-label,
.emergency-action-chip{white-space:nowrap!important}
.emergency-action-strip,
body[data-page="index.html"] .emergency-action-strip{flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important}

/* ── Officials cards: prevent name/title wrapping at 360px ── */
@media (max-width: 360px) {
  body[data-page="officials.html"] .officials-council-grid .official-card h3{
    font-size: 12.5px !important;
  }
  body[data-page="officials.html"] .officials-council-grid .official-card p{
    font-size: 10.5px !important;
  }
}

/* ── AQI Hero fact — clickable, cursor pointer ── */
.hero-aqi-fact{cursor:pointer;outline:none}
.hero-aqi-fact:hover{opacity:.85}
.hero-aqi-fact:focus-visible{outline:2px solid rgba(255,255,255,.6);border-radius:4px}

/* ── Advisory hero fact ── */
.hero-advisory-fact{outline:none}

/* ── Hero info bar: animation delays for advisory (child 8 = divider, child 9 = fact) ── */
.hero-quick-facts.visible .hero-fact:nth-child(9){animation-delay:0.45s}
.hero-quick-facts.visible .hero-fact-divider:nth-child(8){animation-delay:0.40s}

/* ── Hero status card: date + time icons — soft light blue ── */
.hero-quick-facts .hero-fact:not(.hero-weather-fact):not(.hero-aqi-fact):not(.hero-advisory-fact):not(.hero-tide-high-fact):not(.hero-tide-low-fact) svg{
  color:rgba(179,212,245,.90)!important;opacity:1!important
}

/* ── Hero status card: full responsive layout ── */

/* Laptop / small desktop 1024–1439px: wrap if needed, dividers hidden */
@media (max-width:1439px) and (min-width:1024px){
  .hero-quick-facts{flex-wrap:wrap!important;gap:4px 0!important;padding:10px 16px!important}
  .hero-fact-divider{display:none!important}
  .hero-fact{font-size:.72rem!important;padding:4px 10px!important;white-space:nowrap!important}
}

/* Tablet 768–1023px: 2-column grid, advisory spans full width */
@media (max-width:1023px) and (min-width:768px){
  .hero-quick-facts{flex-wrap:wrap!important;row-gap:2px!important;padding:10px 18px!important}
  .hero-fact-divider{display:none!important}
  .hero-fact{flex:0 0 50%!important;font-size:.73rem!important;padding:5px 6px!important;white-space:normal!important;word-break:break-word!important}
  .hero-advisory-fact{flex:0 0 100%!important;justify-content:center!important;font-size:.73rem!important;padding:5px 6px 4px!important;border-top:1px solid rgba(255,255,255,.12)!important;margin-top:2px!important}
}

/* Mobile <768px: 2-column grid, advisory hidden */
@media (max-width:767px){
  .hero-quick-facts{flex-wrap:wrap!important;row-gap:2px!important;padding:10px 14px!important;background:rgba(0,0,0,.18)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}
  .hero-fact-divider{display:none!important}
  .hero-fact{flex:0 0 50%!important;font-size:.70rem!important;font-weight:500!important;padding:4px 5px!important;white-space:normal!important;word-break:break-word!important;gap:5px!important}
  .hero-advisory-fact,.hero-advisory-divider{display:none!important}
}
@media (max-width:390px){
  .hero-fact{font-size:.67rem!important}
}
@media (max-width:360px){
  .hero-quick-facts{padding:8px 10px!important}
  .hero-fact{font-size:.62rem!important;gap:4px!important}
  .hero-fact svg{width:11px!important;height:11px!important}
}

/* ── Barangay at a Glance: subtle icon color coding ── */
.hgc-body .hgc-item:nth-child(1) svg { color:#7dd3fc!important } /* Population: sky blue */
.hgc-body .hgc-item:nth-child(3) svg { color:#5eead4!important } /* Resident Assistance: teal */
.hgc-body .hgc-item:nth-child(5) svg { color:#93c5fd!important } /* Public Documents: light blue */
.hgc-body .hgc-item:nth-child(7) svg { color:#6ee7b7!important } /* Community Programs: green */

/* ── Tide: animation delays (child 10 = divider, child 11 = fact) ── */
.hero-quick-facts.visible .hero-fact:nth-child(11){animation-delay:0.55s}
.hero-quick-facts.visible .hero-fact-divider:nth-child(10){animation-delay:0.50s}

/* ── Tide mini-card (mobile only) ── */
.tide-mini-card{
  display:none; /* shown only on mobile via media query */
  align-items:center;
  gap:8px;
  margin-top:8px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  padding:8px 16px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:rgba(255,255,255,.92);
  font-size:.73rem;
  font-weight:600;
  max-width:100%;
}
.tide-mini-card svg{
  width:14px;height:14px;flex-shrink:0;
  color:#38bdf8;opacity:1;
}

/* ── Two-row status bar: enable flex-wrap + row break ── */
.hero-quick-facts{flex-wrap:wrap!important;overflow:visible!important;align-items:center!important}
.hero-facts-break{flex-basis:100%!important;height:4px!important;pointer-events:none!important;flex-shrink:0!important}

/* ── Tide icon color: cyan (override the date/time light-blue rule) ── */
.hero-tide-high-fact svg,.hero-tide-low-fact svg{color:#38bdf8!important;opacity:1!important}

/* ── ≥768px: ALL facts auto-width so the break splits rows cleanly ── */
@media (min-width:768px){
  .hero-quick-facts{justify-content:flex-start!important}
  .hero-fact{flex:0 0 auto!important;white-space:nowrap!important}
  .hero-advisory-fact{border-top:none!important;margin-top:0!important}
}

/* ── Tablet 768–1023px: hide tide dividers, reduce break height ── */
@media (max-width:1023px) and (min-width:768px){
  .hero-tide-high-divider,.hero-tide-low-divider{display:none!important}
  .hero-facts-break{height:2px!important}
}

/* ── Mobile <768px: hide break + tide bar items; show mini-card ── */
@media (max-width:767px){
  .hero-facts-break{display:none!important}
  .hero-tide-high-fact,.hero-tide-high-divider,
  .hero-tide-low-fact,.hero-tide-low-divider{display:none!important}
  .tide-mini-card{display:flex!important}
}

/* ── Tide mini-card: two-row layout ── */
.tide-mini-card{flex-direction:column!important;gap:5px!important;align-items:flex-start!important}
.tide-mini-row{display:flex;align-items:center;gap:6px;line-height:1.3}
.tide-mini-row svg{width:14px;height:14px;flex-shrink:0;color:#38bdf8;opacity:1}

/* ── AQI Advisory Section ── */
.aqi-panel{
  background:#fff;
  border:1px solid var(--stroke,#e2eaf6);
  border-radius:20px;
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:28px;
  box-shadow:0 4px 24px rgba(21,66,140,.07);
}
.aqi-main-block{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap}
.aqi-score-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.aqi-score-ring{
  width:96px;height:96px;border-radius:50%;
  border:4px solid #16a34a;
  background:rgba(22,163,74,.1);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  flex-shrink:0;
  transition:border-color .4s,background .4s;
}
.aqi-score-num{font-size:2rem;font-weight:800;color:var(--civic-navy,#08264D);line-height:1}
.aqi-score-label{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#6b7ea3);margin-top:2px}
.aqi-status-wrap{display:flex;flex-direction:column;gap:8px}
.aqi-status-badge{
  display:inline-block;
  padding:5px 14px;border-radius:999px;
  font-size:.82rem;font-weight:700;
  background:rgba(22,163,74,.12);color:#16a34a;
  width:fit-content;
  transition:background .4s,color .4s;
}
.aqi-health-msg{font-size:.93rem;color:var(--civic-navy,#08264D);max-width:500px;line-height:1.5;margin:0}
.aqi-updated{font-size:.78rem;color:var(--muted,#6b7ea3);margin:0}
.aqi-pollutants{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}
.aqi-pollutant-item{
  background:var(--soft-bg,#f4f7fb);
  border-radius:12px;
  padding:14px 10px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  text-align:center;
}
.aqi-poll-name{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#6b7ea3)}
.aqi-poll-val{font-size:1.25rem;font-weight:800;color:var(--civic-navy,#08264D)}
.aqi-poll-unit{font-size:.65rem;color:var(--muted,#6b7ea3)}
.aqi-footer-row{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  padding-top:16px;
  border-top:1px solid var(--stroke,#e2eaf6);
}
.aqi-source{font-size:.78rem;color:var(--muted,#6b7ea3)}
.aqi-report-btn{font-size:.84rem!important;padding:9px 18px!important}

/* ── AQI responsive ── */
@media(max-width:900px){
  .aqi-pollutants{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .aqi-panel{padding:20px 16px;gap:20px}
  .aqi-pollutants{grid-template-columns:repeat(3,1fr);gap:8px}
  .aqi-pollutant-item{padding:10px 6px}
  .aqi-poll-val{font-size:1rem}
  .aqi-score-ring{width:80px;height:80px}
  .aqi-score-num{font-size:1.6rem}
  .aqi-health-msg{font-size:.86rem}
  .aqi-footer-row{flex-direction:column;align-items:flex-start}
}
@media(max-width:430px){
  .aqi-pollutants{grid-template-columns:repeat(2,1fr)}
}

/* ─── Announcements page: image fills top of card, card clips top corners ─── */
body[data-page="announcements.html"] .image-card img {
  width: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* ── Announcement card image wrapper — inset so all 4 corners are rounded ── */
.ann-img-wrap {
  overflow: hidden;
  margin: 10px 10px 0;
  line-height: 0;
  flex-shrink: 0;
  border-radius: 20px;
}
.ann-img-wrap img {
  width: 100%;
  height: 185px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0;
}
@media (max-width: 768px) {
  .ann-img-wrap img { height: 160px; }
}
@media (max-width: 480px) {
  .ann-img-wrap img { height: 140px; }
}

/* ── Initiative banner — inset so all 4 corners are rounded ── */
.bhob-banner {
  overflow: hidden !important;
  margin: 10px 10px 0 !important;
  width: calc(100% - 20px) !important;
  height: 200px !important;
  aspect-ratio: unset !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  border-radius: 20px !important;
  padding: 0 !important;
}
.bhob-banner img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 0 !important;
}

/* ── Download Forms cards — unique classes, no cascade conflicts ── */
.dl-forms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.dl-form-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #ffffff;
  border-radius: 20px;
  padding: 24px 28px;
  box-shadow: 0 8px 28px rgba(15,47,87,.09);
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.dl-form-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(15,47,87,.14);
}
.dl-form-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 4px;
  background: linear-gradient(90deg, #0b5ed7, #06b6d4, #22c55e);
  border-radius: 0 0 6px 6px;
}
.dl-form-icon {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(21,94,239,.10), rgba(22,182,135,.13));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dl-form-content {
  flex: 1;
  min-width: 0;
}
.dl-form-content h3 {
  margin: 0 0 6px;
  font-size: .97rem;
  font-weight: 700;
  color: #0f2f57;
  line-height: 1.25;
}
.dl-form-content p {
  margin: 0;
  font-size: .85rem;
  color: #536b8d;
  line-height: 1.55;
}
.dl-form-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 999px;
  padding: 11px 22px;
  background: linear-gradient(135deg, #0b5ed7, #12a8e8);
  color: #ffffff;
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.dl-form-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11,94,215,.35);
}
@media (max-width: 768px) {
  .dl-forms-grid { grid-template-columns: 1fr; }
  .dl-form-card { padding: 20px 22px; gap: 16px; }
}
@media (max-width: 480px) {
  .dl-form-card { flex-wrap: wrap; }
  .dl-form-btn { width: 100%; justify-content: center; }
}


/* =====================================================================
   Targeted fix: rounded public card image edges only
   Scope: Announcements and Community Initiatives public cards.
   Do not use these rules for admin panels, downloads, navigation, or other sections.
   ===================================================================== */

/* Announcements page: uploaded/default announcement image wrapper */
body[data-page="announcements.html"] .image-card .ann-img-wrap {
  border-radius: 24px !important;
  overflow: hidden !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  line-height: 0 !important;
}

body[data-page="announcements.html"] .image-card .ann-img-wrap img {
  border-radius: 24px !important;
  overflow: hidden !important;
  display: block !important;
  width: 100% !important;
  height: 185px !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Keep any card overlay from visually squaring the image area */
body[data-page="announcements.html"] .image-card::after {
  border-radius: 24px !important;
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  overflow: hidden !important;
}

/* Community Initiatives page: default/generated and uploaded header image blocks */
body[data-page="projects.html"] .image-card .bhob-banner,
body[data-page="projects.html"] .image-card .proj-card-banner,
body[data-page="projects.html"] .image-card .prog-banner,
body[data-page="projects.html"] .image-card .ict-banner {
  border-radius: 24px !important;
  overflow: hidden !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

body[data-page="projects.html"] .image-card .bhob-banner img,
body[data-page="projects.html"] .image-card .proj-card-banner img,
body[data-page="projects.html"] .image-card .prog-banner img,
body[data-page="projects.html"] .image-card .ict-banner img {
  border-radius: 24px !important;
  overflow: hidden !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Home page community initiatives preview only, if it uses the same card classes */
body[data-page="index.html"] .image-card .bhob-banner,
body[data-page="index.html"] .image-card .proj-card-banner,
body[data-page="index.html"] .image-card .prog-banner,
body[data-page="index.html"] .image-card .ict-banner {
  border-radius: 24px !important;
  overflow: hidden !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

body[data-page="index.html"] .image-card .bhob-banner img,
body[data-page="index.html"] .image-card .proj-card-banner img,
body[data-page="index.html"] .image-card .prog-banner img,
body[data-page="index.html"] .image-card .ict-banner img {
  border-radius: 24px !important;
  overflow: hidden !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 768px) {
  body[data-page="announcements.html"] .image-card .ann-img-wrap img {
    height: 160px !important;
  }
}

@media (max-width: 480px) {
  body[data-page="announcements.html"] .image-card .ann-img-wrap img {
    height: 140px !important;
  }
}

/* =====================================================================
   Targeted fix: Community Initiatives banner text alignment only
   Scope: public Community Initiatives cards and Home preview cards.
   Keeps rounded image/header edges intact and avoids touching other sections.
   ===================================================================== */
body[data-page="projects.html"] .image-card .bhob-banner:not(.proj-card-banner-img),
body[data-page="projects.html"] .image-card .proj-card-banner:not(.proj-card-banner-img),
body[data-page="projects.html"] .image-card .prog-banner,
body[data-page="index.html"] .image-card .bhob-banner:not(.proj-card-banner-img),
body[data-page="index.html"] .image-card .proj-card-banner:not(.proj-card-banner-img),
body[data-page="index.html"] .image-card .prog-banner {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  padding: 0 28px 28px !important;
  text-align: left !important;
}

body[data-page="projects.html"] .image-card .bhob-banner .ict-banner-label,
body[data-page="projects.html"] .image-card .proj-card-banner .ict-banner-label,
body[data-page="projects.html"] .image-card .prog-banner .ict-banner-label,
body[data-page="index.html"] .image-card .bhob-banner .ict-banner-label,
body[data-page="index.html"] .image-card .proj-card-banner .ict-banner-label,
body[data-page="index.html"] .image-card .prog-banner .ict-banner-label {
  position: relative !important;
  z-index: 2 !important;
  max-width: calc(100% - 12px) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  text-align: left !important;
  overflow: visible !important;
}

body[data-page="projects.html"] .image-card .bhob-banner .ict-banner-label strong,
body[data-page="projects.html"] .image-card .proj-card-banner .ict-banner-label strong,
body[data-page="projects.html"] .image-card .prog-banner .ict-banner-label strong,
body[data-page="index.html"] .image-card .bhob-banner .ict-banner-label strong,
body[data-page="index.html"] .image-card .proj-card-banner .ict-banner-label strong,
body[data-page="index.html"] .image-card .prog-banner .ict-banner-label strong {
  display: block !important;
  margin: 0 0 6px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

body[data-page="projects.html"] .image-card .bhob-banner .ict-banner-label span,
body[data-page="projects.html"] .image-card .proj-card-banner .ict-banner-label span,
body[data-page="projects.html"] .image-card .prog-banner .ict-banner-label span,
body[data-page="index.html"] .image-card .bhob-banner .ict-banner-label span,
body[data-page="index.html"] .image-card .proj-card-banner .ict-banner-label span,
body[data-page="index.html"] .image-card .prog-banner .ict-banner-label span {
  display: block !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}
/* =====================================================================
   Targeted fix: Announcement card image spacing refinement only
   Scope: public Announcements cards.
   Keeps existing card design, rounded corners, content, backend, and admin unchanged.
   ===================================================================== */
body[data-page="announcements.html"] .image-card .ann-img-wrap {
  padding: 0 !important;
  margin: 16px 16px 0 !important;
  width: calc(100% - 32px) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  line-height: 0 !important;
  box-sizing: border-box !important;
}

body[data-page="announcements.html"] .image-card .ann-img-wrap img {
  width: 100% !important;
  height: 185px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 24px !important;
}

@media (max-width: 768px) {
  body[data-page="announcements.html"] .image-card .ann-img-wrap {
    margin: 14px 14px 0 !important;
    width: calc(100% - 28px) !important;
  }

  body[data-page="announcements.html"] .image-card .ann-img-wrap img {
    height: 160px !important;
  }
}

@media (max-width: 480px) {
  body[data-page="announcements.html"] .image-card .ann-img-wrap {
    margin: 12px 12px 0 !important;
    width: calc(100% - 24px) !important;
  }

  body[data-page="announcements.html"] .image-card .ann-img-wrap img {
    height: 140px !important;
  }
}

/* =====================================================================
   Targeted fix: Community Initiatives uploaded image quality refinement
   Scope: public Community Initiatives cards and Home preview cards only.
   Keeps card layout, rounded corners, admin, data, downloads, and routes unchanged.
   ===================================================================== */
body[data-page="projects.html"] .image-card .proj-card-banner-img.bhob-banner,
body[data-page="index.html"] .image-card .proj-card-banner-img.bhob-banner {
  border-radius: 24px !important;
  overflow: hidden !important;
  background: transparent !important;
  padding: 0 !important;
  transform: none !important;
  filter: none !important;
  box-sizing: border-box !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

body[data-page="projects.html"] .image-card .proj-card-banner-img.bhob-banner img,
body[data-page="index.html"] .image-card .proj-card-banner-img.bhob-banner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 24px !important;
  image-rendering: auto !important;
  transform: none !important;
  filter: none !important;
  backface-visibility: hidden !important;
}