:root{
  --sea:#123FAE;          /* deep royal from the seal */
  --sea-bright:#1E52D6;
  --ink:#0E1E3A;          /* navy ink text */
  --ink-soft:#3C4A66;
  --gold:#E29A00;
  --gold-soft:#F4C542;
  --reef:#3E9B46;         /* map green */
  --reef-deep:#2F7A37;
  --shell:#F6F3EA;        /* warm paper background */
  --paper:#FFFFFF;
  --line:rgba(14,30,58,.12);
  --line-strong:rgba(14,30,58,.22);
  --shadow:0 1px 2px rgba(14,30,58,.06),0 8px 24px rgba(14,30,58,.08);
  --maxw:1320px;
  --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:"Public Sans",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--shell);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:"Bricolage Grotesque",Georgia,serif;line-height:1.08;margin:0;letter-spacing:-.01em;color:var(--ink)}
p{margin:0 0 1rem}
a{color:var(--sea)}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,5vw,48px)}

/* Accessibility helpers */
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:100;background:rgba(246,243,234,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:18px;min-height:74px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand img{width:46px;height:46px;flex:none;object-fit:contain;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
.brand .b-name{font-family:"Bricolage Grotesque";font-weight:700;font-size:1.02rem;line-height:1.05}
.brand .b-sub{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
nav.primary{display:flex;gap:4px}
nav.primary a{font-weight:600;font-size:.95rem;text-decoration:none;color:var(--ink);padding:9px 13px;border-radius:9px}
nav.primary a:hover{background:rgba(18,63,174,.08);color:var(--sea)}
.cta{background:var(--sea);color:#fff;text-decoration:none;font-weight:700;padding:11px 18px;border-radius:999px;font-size:.92rem;white-space:nowrap;box-shadow:var(--shadow)}
.cta:hover{background:var(--sea-bright)}
.cta.alt{background:var(--gold);color:var(--ink)}
.cta.alt:hover{background:var(--gold-soft)}
.menu-btn{display:none;background:none;border:1px solid var(--line-strong);border-radius:10px;padding:9px 12px;font-size:1.25rem;line-height:1;color:var(--ink);cursor:pointer}

@media (max-width:920px){
  nav.primary{position:absolute;top:74px;left:0;right:0;flex-direction:column;background:var(--paper);border-bottom:1px solid var(--line);padding:10px clamp(18px,5vw,40px);gap:2px;display:none;box-shadow:var(--shadow)}
  nav.primary.open{display:flex}
  nav.primary a{padding:13px 10px;border-radius:8px;border-bottom:1px solid var(--line)}
  nav.primary a:last-child{border-bottom:0}
  .menu-btn{display:inline-block}
  .bar .cta.header-cta{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:
    radial-gradient(1200px 500px at 82% -8%,rgba(30,82,214,.16),transparent 60%),
    linear-gradient(180deg,#fff 0%,var(--shell) 100%);
  border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding-top:clamp(48px,7vw,84px);padding-bottom:clamp(48px,7vw,84px)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sea);background:rgba(18,63,174,.08);padding:7px 14px;border-radius:999px;margin-bottom:22px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--reef)}
.hero h1{font-size:clamp(2.3rem,5.4vw,3.9rem);font-weight:800;margin-bottom:18px}
.hero h1 .hl{color:var(--sea);position:relative}
.lede{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-soft);max-width:34ch;margin-bottom:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.stats{display:flex;flex-wrap:wrap;gap:26px 40px;border-top:1px solid var(--line);padding-top:24px}
.stat .n{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.9rem;color:var(--ink);line-height:1}
.stat .l{font-size:.83rem;color:var(--ink-soft);font-weight:500;margin-top:5px;max-width:18ch}

/* Hero seal / motif */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center}
.seal-frame{position:relative;width:min(360px,80vw);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.seal-frame::before{content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,rgba(226,154,0,.3),transparent 70%);filter:blur(28px);z-index:0}
.seal-frame img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;position:relative;z-index:2}
.seal-ring{position:absolute;inset:-14px;border-radius:50%;border:2px dashed rgba(226,154,0,.6);animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.seal-ring{animation:none}}

@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .hero-visual{order:-1}
  .seal-frame{width:min(240px,62vw)}
  .lede{max-width:46ch}
}

/* ---------- Section scaffolding ---------- */
section{padding:clamp(56px,8vw,96px) 0}
.sec-head{max-width:640px;margin-bottom:44px}
.kicker{font-weight:700;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--reef-deep);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:26px;height:2px;background:var(--gold);display:inline-block}
.sec-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:700;margin-bottom:14px}
.sec-head p{color:var(--ink-soft);font-size:1.05rem;margin:0}

/* ---------- Directorates ---------- */
.band-tinted{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:var(--shell);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;transition:transform .25s ease,box-shadow .25s ease}
.band-tinted .card{background:var(--shell)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .ic{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:rgba(18,63,174,.1)}
.card:nth-child(2) .ic{background:rgba(62,155,70,.14)}
.card:nth-child(3) .ic{background:rgba(226,154,0,.16)}
.card:nth-child(4) .ic{background:rgba(18,63,174,.1)}
.card .ic svg{width:24px;height:24px}
.card h3{font-size:1.14rem;font-weight:700;margin-bottom:9px}
.card p{font-size:.93rem;color:var(--ink-soft);margin:0}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.cards{grid-template-columns:1fr}}

/* ---------- Signature: the island spine ---------- */
.spine-sec{background:linear-gradient(180deg,var(--shell),#eef2f6)}
.spine-grid{display:grid;grid-template-columns:300px 1fr;gap:clamp(30px,5vw,64px);align-items:start}
.spine-visual{position:sticky;top:96px;display:flex;justify-content:center}
.spine-visual svg{width:100%;max-width:260px;height:auto;filter:drop-shadow(0 14px 26px rgba(14,30,58,.18))}
.tiers{display:flex;flex-direction:column;gap:16px}
.tier{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--sea);border-radius:12px;padding:22px 24px;display:flex;gap:18px;align-items:flex-start}
.tier:nth-child(2){border-left-color:var(--reef)}
.tier:nth-child(3){border-left-color:var(--gold)}
.tier:nth-child(4){border-left-color:var(--ink)}
.tier .step{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.1rem;color:var(--sea);background:rgba(18,63,174,.08);min-width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.tier:nth-child(2) .step{color:var(--reef-deep);background:rgba(62,155,70,.12)}
.tier:nth-child(3) .step{color:var(--gold);background:rgba(226,154,0,.14)}
.tier:nth-child(4) .step{color:var(--ink);background:rgba(14,30,58,.08)}
.tier h3{font-size:1.12rem;margin-bottom:5px}
.tier p{margin:0;font-size:.94rem;color:var(--ink-soft)}
@media (max-width:760px){
  .spine-grid{grid-template-columns:1fr}
  .spine-visual{position:static;margin-bottom:8px}
  .spine-visual svg{max-width:150px}
}

/* ---------- Patient services chips ---------- */
.services-list{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:11px 18px;font-weight:600;font-size:.94rem}
.chip .b{width:9px;height:9px;border-radius:50%;background:var(--reef);flex:none}

/* ---------- Programs ---------- */
.programs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prog{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.prog .top{padding:20px 22px 0}
.prog .tag{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--reef-deep);padding:5px 11px;border-radius:999px;display:inline-block;margin-bottom:14px}
.prog:nth-child(2) .tag{background:var(--sea)}
.prog:nth-child(3) .tag{background:var(--gold);color:var(--ink)}
.prog h3{font-size:1.2rem;margin-bottom:10px}
.prog p{font-size:.94rem;color:var(--ink-soft);padding:0 22px}
.prog .foot{margin-top:auto;padding:16px 22px 22px;font-size:.85rem;color:var(--ink-soft);border-top:1px solid var(--line);font-weight:500}
@media (max-width:840px){.programs{grid-template-columns:1fr}}

/* ---------- Leadership ---------- */
.lead-band{background:var(--ink);color:#fff}
.lead-band .sec-head h2{color:#fff}
.lead-band .kicker{color:var(--gold-soft)}
.lead-band .sec-head p{color:rgba(255,255,255,.75)}
.lead-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.leader{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:26px}
.leader .role{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-soft);font-weight:700;margin-bottom:8px}
.leader h3{color:#fff;font-size:1.35rem;margin-bottom:10px}
.leader p{color:rgba(255,255,255,.78);font-size:.95rem;margin:0}
.gov-note{margin-top:26px;background:rgba(226,154,0,.12);border:1px solid rgba(226,154,0,.35);border-radius:12px;padding:18px 22px;font-size:.95rem;color:rgba(255,255,255,.9)}
@media (max-width:640px){.lead-grid{grid-template-columns:1fr}}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:start}
.contact-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow)}
.cline{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.cline:last-child{border-bottom:0}
.cline .ic{width:40px;height:40px;flex:none;border-radius:10px;background:rgba(18,63,174,.09);display:flex;align-items:center;justify-content:center}
.cline .ic svg{width:20px;height:20px}
.cline .lab{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:700;margin-bottom:2px}
.cline .val{font-weight:500}
.cline a{color:var(--sea);text-decoration:none;font-weight:600}
.cline a:hover{text-decoration:underline}
.emergency{background:linear-gradient(160deg,var(--sea),#0c2f86);color:#fff;border-radius:var(--r);padding:30px;box-shadow:var(--shadow)}
.emergency h3{color:#fff;font-size:1.5rem;margin-bottom:12px}
.emergency p{color:rgba(255,255,255,.85);margin-bottom:18px}
.emergency .big{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.9rem;color:var(--gold-soft);letter-spacing:.01em}
.note{font-size:.82rem;color:var(--ink-soft);background:rgba(226,154,0,.12);border:1px dashed rgba(226,154,0,.5);border-radius:10px;padding:12px 14px;margin-top:16px}
.emergency .note{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08)}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
footer.site{background:#0b1830;color:rgba(255,255,255,.72);padding:56px 0 30px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-brand{display:flex;gap:14px;align-items:flex-start}
.foot-brand img{width:54px;height:54px;flex:none;object-fit:contain;border-radius:50%}
.foot-brand .n{font-family:"Bricolage Grotesque";font-weight:700;color:#fff;font-size:1.05rem;line-height:1.15}
.foot-brand p{font-size:.9rem;margin-top:10px;max-width:34ch}
/* Footer column headings. They are <h2> so the page outline never skips a
   level (most pages end on an h2), and styled small rather than marked up small. */
footer h4,.foot-h{color:#fff;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  font-family:"Bricolage Grotesque",Georgia,serif;font-weight:700;line-height:1.08;margin:0 0 14px}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
footer a{color:rgba(255,255,255,.72);text-decoration:none;font-size:.94rem}
footer a:hover{color:#fff}
.foot-bottom{padding-top:22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.83rem;color:rgba(255,255,255,.55)}
@media (max-width:760px){.foot-top{grid-template-columns:1fr;gap:28px}}

/* reveal animation */
/* Only hide content when JS is available to reveal it again. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ============================================================
   Shared additions for the multi-page site
   ============================================================ */

/* Current page in nav */
nav.primary a[aria-current="page"]{background:rgba(18,63,174,.1);color:var(--sea)}
footer a[aria-current="page"]{color:#fff;text-decoration:underline}

/* Mobile menu: keep the CTA reachable inside the panel */
.nav-cta{display:none}
@media (max-width:920px){
  .nav-cta{display:block;margin-top:10px;text-align:center}
  nav.primary a.nav-cta{background:var(--sea);color:#fff;border-bottom:0;font-weight:700}
  nav.primary a.nav-cta:hover{background:var(--sea-bright);color:#fff}
}

/* ---------- Page hero band (all inner pages) ---------- */
.page-hero{
  background:
    radial-gradient(900px 380px at 85% -20%,rgba(30,82,214,.18),transparent 60%),
    linear-gradient(180deg,#fff 0%,var(--shell) 100%);
  border-bottom:1px solid var(--line);
  padding:clamp(30px,5vw,52px) 0 clamp(38px,6vw,62px);
}
.page-hero h1{font-size:clamp(2rem,4.6vw,3.1rem);font-weight:800;margin-bottom:16px;max-width:20ch}
.page-hero .lede{margin-bottom:0;max-width:62ch}
.page-hero.dark{background:linear-gradient(160deg,var(--ink),#0a1730);border-bottom:0}
.page-hero.dark h1,.page-hero.dark .kicker{color:#fff}
.page-hero.dark .kicker{color:var(--gold-soft)}
.page-hero.dark .lede{color:rgba(255,255,255,.8)}
.page-hero.dark .crumbs,.page-hero.dark .crumbs a{color:rgba(255,255,255,.72)}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:.86rem;color:var(--ink-soft);margin-bottom:20px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}
.crumbs li::after{content:"/";margin-left:6px;color:var(--line-strong)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-soft);text-decoration:none;font-weight:600}
.crumbs a:hover{color:var(--sea);text-decoration:underline}
.crumbs [aria-current="page"]{font-weight:600}

/* ---------- Prose blocks ---------- */
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 14px}
.prose h3{font-size:1.18rem;margin:28px 0 8px}
.prose p,.prose li{color:var(--ink-soft);font-size:1.02rem}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1rem}
.prose li{margin-bottom:.5rem}
.prose strong{color:var(--ink)}
.prose a{font-weight:600}

/* Two-column content + aside */
.split{display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(28px,5vw,56px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* ---------- Generic panels & grids ---------- */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.panel h3,.panel .panel-h{font-size:1.1rem;margin-bottom:10px}
/* A side panel is a top-level section of its page, so its heading is an
   <h2> kept at panel size — the outline stays intact without a size jump. */
.panel-h{font-family:"Bricolage Grotesque",Georgia,serif;font-weight:700;line-height:1.08}
.panel p:last-child{margin-bottom:0}
.panel.sticky{position:sticky;top:96px}
@media (max-width:860px){.panel.sticky{position:static}}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Linked card (whole card is a link target) */
a.card-link{text-decoration:none;color:inherit;display:block}
a.card-link:hover h3{color:var(--sea)}
.card .more{display:inline-block;margin-top:14px;font-weight:700;font-size:.9rem;color:var(--sea)}
.card .more::after{content:" →"}

/* ---------- Value / fact tiles ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fact{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.fact .n{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.7rem;line-height:1.05}
.fact .l{font-size:.88rem;color:var(--ink-soft);margin-top:6px}
@media (max-width:900px){.facts{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.facts{grid-template-columns:1fr}}

/* ---------- List rows (facilities, vacancies, news) ---------- */
.rows{display:flex;flex-direction:column;gap:16px}
.row-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;display:flex;gap:20px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.row-item h3{font-size:1.12rem;margin-bottom:6px}
.row-item p{margin:0;font-size:.94rem;color:var(--ink-soft);max-width:62ch}
.row-meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:10px;font-size:.85rem;color:var(--ink-soft);font-weight:600}
.pill{display:inline-block;background:rgba(18,63,174,.08);color:var(--sea);border-radius:999px;padding:5px 12px;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.pill.green{background:rgba(62,155,70,.14);color:var(--reef-deep)}
.pill.gold{background:rgba(226,154,0,.18);color:#7a5300}

/* ---------- Empty state ---------- */
.empty{background:var(--paper);border:1px dashed var(--line-strong);border-radius:var(--r);padding:34px;text-align:center}
.empty h3{margin-bottom:8px}
.empty p{color:var(--ink-soft);margin:0 auto;max-width:52ch}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(160deg,var(--sea),#0c2f86);color:#fff;border-radius:var(--r);padding:clamp(28px,5vw,44px);display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:var(--shadow)}
.cta-band h2{color:#fff;font-size:clamp(1.4rem,3vw,2rem);margin-bottom:8px}
.cta-band p{color:rgba(255,255,255,.85);margin:0;max-width:52ch}
.cta-band .cta{background:var(--gold);color:var(--ink)}
.cta-band .cta:hover{background:var(--gold-soft)}

/* ---------- Map ---------- */
.map-frame{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper)}
.map-frame iframe{display:block;width:100%;height:380px;border:0}
@media (max-width:540px){.map-frame iframe{height:280px}}

/* ---------- Footer credit ---------- */
.foot-credit{margin-top:14px;font-size:.83rem;color:rgba(255,255,255,.55)}
.foot-credit a{color:rgba(255,255,255,.8);font-weight:700;text-decoration:underline;text-underline-offset:2px;font-size:inherit}
.foot-credit a:hover{color:#fff}

/* ---------- 404 ---------- */
.center-narrow{max-width:620px;margin:0 auto;text-align:center}
.center-narrow .hero-actions{justify-content:center}

/* ---------- Small-screen tuning (tested at 360px) ---------- */
@media (max-width:560px){
  .brand .b-name{font-size:.92rem}
  .brand img{width:40px;height:40px}
  .bar{min-height:66px;gap:12px}
  nav.primary{top:66px}
  .stats{gap:20px 26px}
  .stat .n{font-size:1.6rem}
  .contact-card,.emergency,.panel{padding:22px}
  .row-item{padding:20px}
  .cta-band{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   Reflow safety — WCAG 1.4.4 / 1.4.10
   Grid and flex children default to min-width:auto, which stops
   them shrinking below their content at large text sizes. These
   rules keep every page free of horizontal scroll at 320px and
   at 200% text size.
   ============================================================ */
.hero .wrap > *,.split > *,.spine-grid > *,.contact-grid > *,.cta-band > *,
.cline > *,.tier > *,.row-item > *,.cards > *,.grid-2 > *,.grid-3 > *,
.facts > *,.programs > *,.lead-grid > *,.foot-top > *,.foot-brand > *{min-width:0}

/* ch-based measures must never exceed the column they sit in */
.lede{max-width:min(34ch,100%)}
.page-hero h1{max-width:min(20ch,100%)}
.page-hero .lede{max-width:min(62ch,100%)}
.stat .l{max-width:min(18ch,100%)}
.foot-brand p{max-width:min(34ch,100%)}
.prose{max-width:min(68ch,100%)}
.cta-band p{max-width:min(52ch,100%)}
.empty p{max-width:min(52ch,100%)}
.row-item p{max-width:min(62ch,100%)}

/* Buttons wrap rather than push the page sideways */
.cta{white-space:normal;max-width:100%}

/* Long addresses, emails and URLs break instead of overflowing */
p,li,h1,h2,h3,h4,.val,.cline,.crumbs{overflow-wrap:break-word}

/* ---------- Header refinements ---------- */
/* The wordmark parts are inline spans in the prototype markup, which made
   the location line run on after "Health Authority" and squeeze the nav. */
.brand .b-name,.brand .b-sub{display:block}
.brand .b-l1,.brand .b-l2{display:block}
nav.primary a{white-space:nowrap}
.header-cta{white-space:nowrap}
/* Tighten the nav a little before the hamburger breakpoint so eight items fit */
@media (max-width:1180px){
  nav.primary{gap:0}
  nav.primary a{padding:9px 10px;font-size:.92rem}
}
@media (max-width:920px){
  nav.primary a{white-space:normal}
}
/* Keep each wordmark line whole rather than letting it break after "New
   Ireland". Below this the nav is competing for the same room, so the
   earlier wrapping stands and the small-screen layouts are untouched. */
@media (min-width:1100px){
  .brand .b-name,.brand .b-sub{white-space:nowrap}
}
/* Wide enough that the whole name fits beside eight nav items and the button,
   so it runs straight across as one line. Measured against the widest the nav
   gets: below this it would collide with "Find care". */
@media (min-width:1400px){
  .brand .b-l1,.brand .b-l2{display:inline}
  .brand .b-l2::before{content:"\00a0"}
}

/* ---------- Facility map (Leaflet) ---------- */
.map-block{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:start}
@media (max-width:860px){.map-block{grid-template-columns:1fr}}
.facility-map{height:460px;border:1px solid var(--line);border-radius:var(--r);background:#e8eef4;position:relative;z-index:0}
.facility-map.small{height:320px}
@media (max-width:640px){.facility-map{height:340px}.facility-map.small{height:260px}}
.map-fallback{padding:20px;font-size:.92rem;color:var(--ink-soft)}
.leaflet-container{border-radius:var(--r);font-family:inherit}
.leaflet-popup-content{font-size:.9rem;line-height:1.45}

/* Map legend + facility list beside the map */
.map-key{display:flex;flex-wrap:wrap;gap:10px 18px;margin:14px 0 0;padding:0;list-style:none;font-size:.86rem;color:var(--ink-soft);font-weight:600}
.map-key li{display:flex;align-items:center;gap:8px}
.map-key .k{width:14px;height:14px;border-radius:50%;flex:none;border:2px solid}
.map-key .k-hospital{background:var(--gold);border-color:var(--ink)}
.map-key .k-health-centre{background:var(--sea);border-color:#fff;box-shadow:0 0 0 1px var(--line-strong)}
.map-key .k-clinic{background:var(--sea-bright);border-color:#fff;box-shadow:0 0 0 1px var(--line-strong)}
.map-key .k-aid-post{background:#fff;border-color:var(--reef-deep)}

.fac-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;max-height:460px;overflow-y:auto}
@media (max-width:860px){.fac-list{max-height:none}}
.fac-list li{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.fac-list .fn{font-weight:700;font-size:.95rem}
.fac-list .fm{font-size:.82rem;color:var(--ink-soft);margin-top:3px}
.fac-list:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ============================================================
   Photographic hero (home page)
   A full-bleed image sits behind the copy, with a dark veil over
   it so the text keeps AA contrast whatever the photo is doing
   underneath. The veil is a real element rather than a filter on
   the image, so it never affects the picture's own colours.
   ============================================================ */
.hero-photo{position:relative;isolation:isolate;border-bottom:0}
.hero-photo .hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 38%;
  z-index:-2;
}
.hero-photo .hero-veil{
  position:absolute;inset:0;z-index:-1;
  /* Heavy where the copy sits, then falls away so the photograph is
     actually visible on the right. Only one layer — stacking a second
     full-width wash on top turned the whole picture into a navy block. */
  background:linear-gradient(100deg,
    rgba(10,23,48,.93) 0%,
    rgba(10,23,48,.88) 34%,
    rgba(10,23,48,.62) 56%,
    rgba(10,23,48,.34) 76%,
    rgba(10,23,48,.22) 100%);
}
@media (max-width:820px){
  /* Copy runs full width on small screens, so the veil must be even everywhere. */
  .hero-photo .hero-veil{background:linear-gradient(180deg,rgba(10,23,48,.78),rgba(10,23,48,.9))}
}

/* Light-on-dark treatment for the hero contents */
.hero-photo h1,.hero-photo .stat .n{color:#fff}
.hero-photo h1 .hl{color:var(--gold-soft)}
.hero-photo .lede{color:rgba(255,255,255,.9)}
.hero-photo .eyebrow{color:#fff;background:rgba(255,255,255,.16)}
.hero-photo .stats{border-top-color:rgba(255,255,255,.25)}
.hero-photo .stat .l{color:rgba(255,255,255,.82)}
.hero-photo .cta{background:var(--gold);color:var(--ink)}
.hero-photo .cta:hover{background:var(--gold-soft)}
.hero-photo .cta.alt{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.55)}
.hero-photo .cta.alt:hover{background:rgba(255,255,255,.26)}
.hero-photo :focus-visible{outline-color:var(--gold-soft)}
.hero-photo .seal-frame::before{background:radial-gradient(circle,rgba(244,197,66,.42),transparent 70%);filter:blur(34px)}

/* ---------- Provincial flag ---------- */
.flag-line{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.flag{width:44px;height:auto;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.35),0 2px 8px rgba(14,30,58,.35);flex:none}
.flag-line .fl-label{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.flag-line.on-light .fl-label{color:var(--ink-soft)}
.flag-line.on-light .flag{box-shadow:0 0 0 1px var(--line-strong),0 2px 8px rgba(14,30,58,.14)}
.flag-figure{margin:0}
.flag-figure img{width:100%;max-width:200px;height:auto;border-radius:6px;box-shadow:0 0 0 1px var(--line-strong),0 8px 22px rgba(14,30,58,.14)}
.flag-figure figcaption{font-size:.85rem;color:var(--ink-soft);margin-top:10px;max-width:36ch}

@media (max-width:820px){
  /* With a photograph behind it, the headline should lead on small screens —
     not a full-screen seal. The seal drops below the copy and shrinks; it is
     still present in the header and footer of every page. */
  .hero-photo .hero-visual{order:0}
  .hero-photo .seal-frame{width:min(150px,42vw)}
  .hero-photo .wrap{gap:24px}
}

/* ============================================================================
   CMS additions
   Components the static build did not need: share buttons, the contact form,
   pagination, article bodies, the site-wide alert and social links.
   Everything below reuses the tokens at the top of this file — no new colours.
   ========================================================================= */

/* ---------- Site-wide alert ---------- */
.site-alert{background:var(--gold-soft);border-bottom:1px solid var(--line-strong);padding:14px 0;color:var(--ink)}
.site-alert-title{font-family:"Bricolage Grotesque",Georgia,serif;font-weight:700;margin:0 0 4px}
.site-alert-body p:last-child{margin-bottom:0}
.site-alert a{color:var(--ink);font-weight:600}

/* ---------- Social links in the footer ---------- */
.social-heading{margin-top:22px}
.social-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px}
.social-links a{display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.social-links a:hover span{text-decoration:underline}
.soc-ic{flex:none}

/* ---------- Share bar ---------- */
.share{margin-top:38px;padding-top:22px;border-top:1px solid var(--line)}
.share-label{display:block;font-weight:700;font-size:.9rem;margin-bottom:12px;color:var(--ink-soft)}
.share-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.share-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);
  font:inherit;font-size:.88rem;font-weight:600;text-decoration:none;cursor:pointer;line-height:1.2}
.share-btn:hover{background:rgba(18,63,174,.07);border-color:var(--sea);color:var(--sea)}
.share-btn:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){.share-btn:active{transform:none}}
/* Copy-link needs script; hide it when script never ran. */
html:not(.js) .share-copy-item{display:none}
.share-status:not(.visually-hidden){display:block;margin-top:10px;font-size:.88rem;color:var(--reef-deep);font-weight:600}

/* ---------- Article bodies ---------- */
.article-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--ink-soft);
  font-size:.92rem;font-weight:600;margin:0 0 14px}
.article-figure-band{padding-top:clamp(24px,4vw,40px);padding-bottom:0}
.article-figure{margin:0}
.article-figure img{width:100%;height:auto;border-radius:var(--r);box-shadow:var(--shadow)}
.article-figure figcaption{margin-top:10px;font-size:.88rem;color:var(--ink-soft)}
.article-figure .credit{display:block;font-style:italic}
.article-body{max-width:68ch}
.article-body img{border-radius:var(--r);margin:22px 0}
.article-body blockquote{margin:22px 0;padding:4px 0 4px 20px;border-left:4px solid var(--gold);
  font-size:1.08rem;color:var(--ink-soft)}
.row-title{font-size:1.15rem}

.plain-list{list-style:none;margin:0 0 14px;padding:0}
.plain-list li{padding:8px 0;border-bottom:1px solid var(--line)}
.plain-list li:last-child{border-bottom:0}
.partner-role{display:block;font-size:.85rem;color:var(--ink-soft)}

.detail-list{margin:0}
.detail-list dt{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-top:14px}
.detail-list dt:first-child{margin-top:0}
.detail-list dd{margin:2px 0 0}
.file-meta{color:var(--ink-soft);font-weight:400}

.closed-banner,.closing-banner{display:inline-block;padding:11px 16px;border-radius:var(--r);font-weight:600;margin-top:8px}
.closed-banner{background:rgba(226,154,0,.15);border:1px solid var(--gold)}
.closing-banner{background:rgba(62,155,70,.12);border:1px solid var(--reef)}

.leader-photo{border-radius:50%;width:96px;height:96px;object-fit:cover;margin-bottom:14px}
.partner-logo{margin-bottom:14px;height:auto}
.note-on-dark{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08)}

/* ---------- Pagination ---------- */
.pagination-wrap{margin-top:32px}
.pager ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.pager-link{display:inline-block;min-width:44px;text-align:center;padding:10px 14px;border-radius:10px;
  border:1px solid var(--line-strong);text-decoration:none;color:var(--ink);font-weight:600}
.pager-link:hover{background:rgba(18,63,174,.08);border-color:var(--sea);color:var(--sea)}
.pager-link.is-current{background:var(--sea);border-color:var(--sea);color:#fff}
.pager-link.is-disabled{opacity:.45;cursor:default}
.pager-gap{display:inline-block;padding:10px 6px;color:var(--ink-soft)}

/* ---------- Contact form ---------- */
.form-wrap{max-width:760px}
.contact-form{margin-top:8px}
.field{margin-bottom:20px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media (max-width:640px){.field-row{grid-template-columns:1fr}}
.field label{display:block;font-weight:700;margin-bottom:6px;font-size:.95rem}
.field .opt{font-weight:400;color:var(--ink-soft)}
.field .req{color:var(--reef-deep)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line-strong);border-radius:10px;
  background:var(--paper);color:var(--ink);font:inherit;font-size:1rem}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-color:var(--sea)}
.field textarea{resize:vertical;min-height:150px}
.field-help{margin:6px 0 0;font-size:.88rem;color:var(--ink-soft)}
.field-err{margin:6px 0 0;font-size:.9rem;font-weight:600;color:#A4231F}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#A4231F;border-width:2px}
.field-note{font-size:.88rem;color:var(--ink-soft)}
.form-success{background:rgba(62,155,70,.12);border:1px solid var(--reef);border-radius:var(--r);
  padding:16px 18px;margin-bottom:24px}
.form-success p{margin:0;font-weight:600}
.form-errors{background:rgba(164,35,31,.08);border:1px solid #A4231F;border-radius:var(--r);
  padding:16px 18px;margin-bottom:24px}
.form-errors h3{font-size:1.05rem;margin-bottom:8px;color:#A4231F}
.form-errors ul{margin:0;padding-left:20px}
.form-emergency{background:rgba(226,154,0,.14);border-left:4px solid var(--gold);padding:12px 16px;border-radius:0 10px 10px 0}
/* Honeypot: off-screen for sighted users, hidden from assistive tech via aria-hidden. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Accordion ---------- */
.accordion{max-width:820px}
.acc-item{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);margin-bottom:12px}
.acc-item summary{cursor:pointer;padding:16px 20px;font-weight:700;font-family:"Bricolage Grotesque",Georgia,serif}
.acc-item summary:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;border-radius:var(--r)}
.acc-item[open] summary{border-bottom:1px solid var(--line)}
.acc-item .prose{padding:16px 20px}

/* ---------- Emergency phone ---------- */
.emergency-phone{margin-top:14px;font-size:1.15rem;font-weight:700}
.emergency-phone a{color:inherit}

/* ---------- Featured story ---------- */
.featured-story{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);margin-bottom:26px}
.featured-media{display:block;margin:0}
/* One link, stretched over the card. The picture is clickable without being a
   second link that a screen reader has to announce and skip. */
.featured-copy h3 a::after{content:"";position:absolute;inset:0}
.featured-copy h3 a:focus-visible::after{outline:3px solid var(--gold);outline-offset:-3px;border-radius:var(--r)}
/* Anything else in the card has to sit above that overlay to stay clickable. */
.featured-copy .row-meta a,.featured-copy .row-meta .pill{position:relative;z-index:1}
.featured-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.featured-copy{padding:clamp(22px,3vw,34px);align-self:center}
.featured-flag{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--sea);padding:5px 11px;border-radius:999px;margin-bottom:14px}
.featured-copy h3{font-size:clamp(1.3rem,2.6vw,1.75rem);margin-bottom:12px}
.featured-copy h3 a{color:inherit;text-decoration:none}
.featured-copy h3 a:hover{color:var(--sea);text-decoration:underline}
@media (max-width:760px){
  .featured-story{grid-template-columns:1fr}
  .featured-media img{aspect-ratio:16/9}
}

/* ---------- Category & tag links ---------- */
.pill-link{text-decoration:none}
.pill-link:hover{filter:brightness(1.12);text-decoration:underline}
.chip-link{text-decoration:none;color:var(--ink)}
.chip-link:hover{border-color:var(--sea);color:var(--sea)}

/* ---------- Author biography under an article ---------- */
.byline-card{display:flex;gap:18px;align-items:flex-start;margin-top:34px;padding:22px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);max-width:68ch}
.byline-card img{width:64px;height:64px;flex:none;border-radius:50%;object-fit:cover}
.byline-card p{margin-bottom:0}
.byline-role{font-size:.85rem;color:var(--ink-soft);font-weight:600;margin-bottom:8px}

/* ---------- Publications / documents ---------- */
.doc-group-h{font-size:1.15rem;margin:32px 0 14px}
.doc-group-h:first-of-type{margin-top:0}
.doc-list{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:12px}
.doc-item{display:flex;gap:16px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.doc-icon{flex:none;width:34px;height:34px;display:grid;place-items:center;
  background:rgba(18,63,174,.08);border-radius:9px}
.doc-icon svg{width:19px;height:19px}
.doc-body{min-width:0}
.doc-title{font-size:1.05rem;margin-bottom:6px}
.doc-title a{text-decoration:none}
.doc-title a:hover{text-decoration:underline}
.doc-meta{font-family:"Public Sans",system-ui,sans-serif;font-weight:600;font-size:.82rem;
  color:var(--ink-soft);white-space:nowrap}
.doc-pending{color:var(--ink-soft);font-style:italic}
@media (max-width:520px){.doc-item{padding:18px}.doc-meta{white-space:normal}}

/* ---------- Search ---------- */
.search-form{margin-top:22px;max-width:640px}
.search-label{display:block;font-weight:700;margin-bottom:8px}
.search-row{display:flex;gap:10px;flex-wrap:wrap}
.search-row input[type="search"]{flex:1 1 260px;min-width:0;padding:13px 16px;font:inherit;font-size:1rem;
  border:1px solid var(--line-strong);border-radius:10px;background:var(--paper);color:var(--ink)}
.search-row input[type="search"]:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-color:var(--sea)}
.search-row button{border:0;cursor:pointer}
.results-heading{font-size:clamp(1.2rem,2.4vw,1.5rem);margin-bottom:8px}
.results-group-h{font-size:1.05rem;margin:30px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.results-count{color:var(--ink-soft);font-family:"Public Sans",system-ui,sans-serif;font-weight:600;font-size:.85rem}
.results-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.result-item p{margin-bottom:0}
.result-title{font-size:1.02rem;margin-bottom:4px}
.result-meta{font-size:.85rem;color:var(--ink-soft);margin-top:4px}

/* ============================================================================
   Print
   Staff print vacancies, facility directories and the accessibility statement.
   The screen layout wastes ink and drops link destinations, so printing gets
   its own treatment: navigation and controls removed, colour flattened, and
   the address of every link written out beside it.
   ========================================================================= */
@media print {
  :root{--ink:#000;--ink-soft:#333;--shell:#fff;--paper:#fff;--line:#bbb;--line-strong:#888;--shadow:none}

  body{background:#fff;color:#000;font-size:11pt;line-height:1.45}

  /* Things that cannot be used on paper. */
  header.site, footer.site .foot-top, .menu-btn, nav.primary, .share, .search-form,
  .site-alert, .facility-map, .map-key, .pagination-wrap, .hero-actions, .cta-band a.cta,
  .crumbs, .skip, .hero-visual, .hero-veil, .featured-media{display:none !important}

  /* Reveal animations must never leave printed content invisible. */
  .js .reveal, .reveal{opacity:1 !important;transform:none !important}

  main#main{padding-top:0}
  section{padding:0 0 14pt !important;break-inside:avoid}
  .wrap{max-width:none;padding:0}

  h1{font-size:20pt;margin-bottom:6pt}
  h2{font-size:14pt;margin-top:12pt}
  h3{font-size:12pt}
  h1,h2,h3,h4{break-after:avoid}
  p,li{orphans:3;widows:3}

  .card, .panel, .prog, .row-item, .doc-item, .contact-card, .emergency, .leader,
  .empty, .featured-story{border:1px solid #bbb;box-shadow:none;break-inside:avoid;
    background:#fff !important;color:#000 !important}
  .lead-band, .band-tinted, .spine-sec, .hero{background:#fff !important;color:#000 !important}
  .emergency, .emergency *{color:#000 !important}

  a{color:#000;text-decoration:underline}
  /* Write out where an external link actually goes — a printed page cannot be
     clicked, and "read more" tells a reader on paper nothing. */
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#333;word-break:break-all}
  main a[href^="mailto:"]::after{content:" (" attr(href) ")";font-size:9pt;color:#333}
  main a[href^="/"]::after, main a[href^="#"]::after{content:""}

  .note{border:1px dashed #888;color:#333}
  .pill, .chip, .tag{border:1px solid #888;background:#fff !important;color:#000 !important}

  /* A printed page should say where it came from. */
  main#main::after{content:"Printed from the New Ireland Provincial Health Authority website — nipha.gov.pg";
    display:block;margin-top:18pt;padding-top:8pt;border-top:1px solid #bbb;font-size:9pt;color:#333}

  @page{margin:16mm}
}

/* ---------- Directory filters ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;margin-bottom:14px}
.filter-field{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 200px}
.filter-field label{font-weight:700;font-size:.9rem}
.filter-field select{padding:11px 14px;font:inherit;font-size:.98rem;
  border:1px solid var(--line-strong);border-radius:10px;background:var(--paper);color:var(--ink)}
.filter-field select:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-color:var(--sea)}
.filter-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.filter-actions button{border:0;cursor:pointer}
.filter-clear{font-weight:600;font-size:.92rem}
.filter-count{font-weight:600;color:var(--ink-soft);margin-bottom:20px}
@media (max-width:560px){
  .filter-bar{flex-direction:column;align-items:stretch}
  .filter-actions{justify-content:space-between}
}