/* PABEA-COBALT redesign — loaded AFTER style.css. Only visual layers; layout hooks used by main.js are untouched. */
:root{
  /* >>> Set these 4 to your existing style.css palette to keep the exact theme <<< */
  --c-primary:#0b3d91;   /* main brand colour (headers, hero overlay) */
  --c-accent:#f2a900;    /* buttons / highlights */
  --c-ink:#14213d;       /* body text */
  --c-soft:#f3f6fb;      /* light section background */
  --c-deep:color-mix(in srgb,var(--c-primary) 70%,#000);
  --radius:18px;
}
body{font-family:'Montserrat',system-ui,sans-serif;color:var(--c-ink);line-height:1.65;background:#fff}
main{display:block}
h1,h2,h3{line-height:1.15;letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:3.5rem auto 1.5rem;max-width:1100px;padding:0 1.25rem}
:focus-visible{outline:3px solid var(--c-accent);outline-offset:3px}

/* Header */
header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.6rem 1.25rem;padding-top:calc(.6rem + env(safe-area-inset-top,0px));background:#fff;border-bottom:3px solid var(--c-accent);box-shadow:0 4px 18px rgba(0,0,0,.08)}
header img{height:52px;width:auto;display:block;border-radius:6px}
#nav{display:flex;flex-wrap:wrap;gap:.25rem}
#nav a{padding:.5rem .9rem;border-radius:999px;font-weight:600;font-size:.92rem;color:var(--c-ink);text-decoration:none;transition:background .2s,color .2s}
#nav a:hover{background:var(--c-soft)}
#nav a.on{background:var(--c-primary);color:#fff}

/* Hero slider (visual only) */
.slider{position:relative;overflow:hidden}
.slide{min-height:clamp(380px,62vh,600px);padding:clamp(2rem,6vw,5rem) clamp(1.25rem,8vw,7rem);color:#fff;
  display:flex;flex-direction:column;justify-content:center;gap:1rem;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c-deep) 92%,transparent) 0%,color-mix(in srgb,var(--c-primary) 55%,transparent) 55%,rgba(0,0,0,.1) 100%),var(--img,none) center/cover no-repeat,var(--c-primary)}
.slide h1{font-size:clamp(1.9rem,5vw,3.4rem);font-weight:800;max-width:18ch}
.slide h2{font-size:clamp(1.3rem,2.6vw,2rem);margin:0;padding:0;max-width:26ch}
.slide p{font-size:clamp(1rem,1.5vw,1.2rem);max-width:52ch;margin:0}
.slide .big{font-size:clamp(3.5rem,11vw,8rem);font-weight:800;line-height:.95;color:var(--c-accent);text-shadow:0 2px 18px rgba(0,0,0,.35)}
.btn{display:inline-block;padding:.85rem 1.7rem;border-radius:999px;background:var(--c-accent);color:#1a1a1a;font-weight:800;text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.25);transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:#fff;border:2px solid #fff;box-shadow:none}
.ctrl{position:absolute;bottom:1rem;left:0;right:0;display:flex;justify-content:center;gap:.5rem;z-index:5}

/* Presidential banner */
.banner{max-width:1100px;margin:-2.2rem auto 0;position:relative;z-index:6;background:#fff;border-left:8px solid var(--c-accent);
  border-radius:var(--radius);padding:1.4rem 1.8rem;font-weight:600;box-shadow:0 14px 40px rgba(0,0,0,.14)}

/* Photo cards */
.grid{max-width:1100px;margin:0 auto;padding:0 1.25rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid #e3e8f0;box-shadow:0 8px 24px rgba(20,33,61,.07);display:flex;flex-direction:column}
.card .ph{aspect-ratio:4/3;background:var(--img,none) center/cover no-repeat,linear-gradient(135deg,var(--c-primary),var(--c-accent))}
.card .body{padding:1.25rem 1.4rem 1.6rem}
.card h3{margin:0 0 .5rem;font-size:1.15rem;color:var(--c-primary)}
.card p{margin:0}
.card a{color:var(--c-primary);font-weight:600}
.contact-grid .card{padding:1.4rem}
.contact-grid .card h3{display:flex;align-items:center;gap:.6rem}
.contact-grid svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--c-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Awareness block */
.aware{max-width:1100px;margin:4rem auto 0;padding:0 1.25rem;display:grid;grid-template-columns:1.1fr 1fr;gap:0;border-radius:var(--radius);overflow:hidden}
.aware .ph{min-height:340px;background:var(--img,none) center/cover no-repeat,var(--c-primary)}
.aware .txt{background:var(--c-deep);color:#fff;padding:clamp(1.5rem,4vw,3rem);display:flex;flex-direction:column;justify-content:center;gap:1rem}
.aware h2{margin:0;padding:0;font-size:clamp(1.5rem,2.8vw,2.2rem)}
.aware strong{color:var(--c-accent)}

/* Page hero (inner pages) */
.page-hero{min-height:260px;display:flex;align-items:flex-end;padding:2rem clamp(1.25rem,8vw,7rem);color:#fff;
  background:linear-gradient(0deg,color-mix(in srgb,var(--c-deep) 90%,transparent),rgba(0,0,0,.15)),var(--img,none) center/cover no-repeat,var(--c-primary)}
.page-hero h1{margin:0;font-size:clamp(2rem,5vw,3.2rem);font-weight:800}
.page-hero p{margin:.3rem 0 0;max-width:50ch}
.contact-grid{margin-top:2.5rem}

/* CTA band + footer */
.cta{margin:4rem 0 0;padding:3rem 1.25rem;text-align:center;background:var(--c-soft)}
.cta h2{margin:0 auto 1rem;padding:0}
footer{margin-top:0;padding:2.5rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom,0px));background:var(--c-deep);color:#e8edf7;text-align:center;font-size:.9rem;line-height:1.8}
footer img{height:56px;border-radius:6px;margin-bottom:.8rem}

@media (max-width:760px){.aware{grid-template-columns:1fr}.aware .ph{min-height:240px}.slide h1{max-width:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}