:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial;color:#152b34;background:#f4f7f8}*{box-sizing:border-box}body{margin:0}a{color:#176e79}button,.btn,.navbutton{display:inline-block;border:0;border-radius:11px;padding:12px 19px;background:#086c76;color:white;text-decoration:none;font:inherit;font-weight:700;cursor:pointer}.btn.secondary{background:white;color:#174451;border:1px solid #c6d5d9}.top{display:flex;justify-content:space-between;align-items:center;padding:18px max(24px,calc((100vw - 1120px)/2));background:white;gap:16px}.top nav{display:flex;gap:18px;align-items:center}.top nav a:not(.navbutton){text-decoration:none}.brand{font-size:24px;font-weight:900;text-decoration:none;color:#123b47;letter-spacing:-1px}.brand span{color:#008d91}main{min-height:calc(100vh - 145px)}footer{padding:26px;text-align:center;color:#63767e;font-size:13px}.wrap{max-width:1120px;margin:36px auto;padding:0 24px}.panel{background:white;border:1px solid #dce7ea;border-radius:18px;padding:28px;margin:18px 0;box-shadow:0 8px 25px #163b4809}.narrow{max-width:520px;margin:55px auto;padding:0 20px}label{display:block;font-weight:650;margin:17px 0 7px}input,select,textarea{width:100%;padding:13px;border:1px solid #b9cbd0;border-radius:9px;font:inherit;background:white}input[type=file]{padding:10px}textarea{min-height:90px}small,.muted{color:#647a82}.error{color:#a52331}.success{color:#0b6d4c}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.stat{background:white;border:1px solid #dce7ea;border-radius:14px;padding:22px}.stat strong{display:block;font-size:30px}table{width:100%;border-collapse:collapse;background:white}th,td{text-align:left;padding:12px;border-bottom:1px solid #e5edef;vertical-align:top}td img{max-width:130px;max-height:75px}.tablewrap{overflow:auto}.hero{background:linear-gradient(160deg,#eaf6f5,#f7fafb 60%,#e5eef2);padding:45px 24px 65px}.hero-inner{max-width:1100px;margin:auto;text-align:center}.eyebrow{text-transform:uppercase;letter-spacing:2.5px;color:#147a83;font-weight:800;font-size:12px}.billboard{position:relative;margin:35px auto 15px;max-width:930px;border:12px solid #273b44;border-radius:8px;background:#fff;box-shadow:0 22px 0 -10px #4e646d,0 30px 60px #1b4e5b35;padding:55px 28px 65px;overflow:hidden}.billboard:before,.billboard:after{content:'';position:absolute;top:0;bottom:0;width:9px;background:#e4edef}.billboard:before{left:12px}.billboard:after{right:12px}.billboard h1{font-size:clamp(48px,8vw,104px);line-height:1;margin:0;letter-spacing:-.065em;color:#153e4a}.billboard h1 span{color:#00a1a2}.billboard p{font-size:clamp(18px,2.4vw,28px);margin:23px auto;color:#345b65}.billboard .pill{display:inline-block;background:#e5f8f3;color:#0c766a;border-radius:50px;padding:9px 16px;font-weight:700}.support{display:flex;justify-content:center;gap:26px;max-width:580px;margin:auto}.support>div{height:42px;width:22px;background:linear-gradient(#334b56,#677c84);border-radius:0 0 5px 5px}.intro{max-width:700px;margin:30px auto;color:#4c6570;line-height:1.6}.features{max-width:1100px;margin:0 auto;padding:35px 24px 70px}.features h2{text-align:center}.features .stat{line-height:1.55}.features .stat h3{margin-top:0}@media(max-width:700px){.top{padding:15px}.top nav{gap:10px}.grid{grid-template-columns:1fr}.billboard{padding:35px 15px 45px;border-width:7px}.billboard h1{font-size:clamp(40px,10vw,70px)}.wrap{margin:20px auto}.panel{padding:19px}}

/* Public landing page only. The photograph fills the browser width; the
   original billboard remains white and the supplied wordmark is unmodified. */
html:has(body.billboard-landing){height:100%;background:#eaf3f7}
body.billboard-landing{margin:0;min-height:100dvh;overflow:hidden;background:#eaf3f7;font-family:Inter,ui-sans-serif,system-ui,Arial,sans-serif}
.billboard-stage{width:100vw;height:100dvh;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;margin:0}
/* At landscape sizes fill the full horizontal viewport, not a height-constrained strip. */
.billboard-scene{position:relative;flex:0 0 auto;width:100vw;aspect-ratio:2048/1736;container-type:inline-size}
.billboard-photo{display:block;width:100%;height:100%;object-fit:fill}
.billboard-screen{position:absolute;left:11.9%;top:16.5%;width:75.1%;height:35.9%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2%;padding:1.2% 2.5%;overflow:hidden;text-align:center;color:#111}
/* The black-and-white artwork is displayed exactly as supplied. Its black
   backing belongs to the logo itself, not to the entire billboard. */
.billboard-wordmark{display:block;width:60%;height:58%;object-fit:contain;flex:0 1 auto;min-height:0}
.billboard-tagline{margin:0;color:#141414;font-size:clamp(9px,1.4cqw,23px);line-height:1.2;font-weight:700}
.billboard-actions{display:flex;justify-content:center;align-items:center;gap:clamp(5px,1cqw,18px);margin-top:1%;flex-wrap:nowrap}
.billboard-button{display:inline-flex;justify-content:center;align-items:center;border-radius:8px;padding:clamp(5px,.8cqw,13px) clamp(8px,1.3cqw,22px);font-size:clamp(10px,1.2cqw,18px);font-weight:800;text-decoration:none;line-height:1.15;min-height:28px;white-space:nowrap}
.billboard-button.primary{background:#111;color:#fff;border:1px solid #111}
.billboard-button.secondary{background:#fff;color:#111;border:1px solid #111}
.billboard-button:focus-visible{outline:3px solid #087b83;outline-offset:3px}
/* On portrait/mobile screens, keep the billboard usable rather than shrinking
   its links to unreadable sizes. The landscape photo is cropped at its sides. */
@media(max-width:700px){
 .billboard-scene{width:max(100vw,660px)}
 .billboard-wordmark{width:58%;height:55%}
 .billboard-tagline{font-size:11px}
 .billboard-button{font-size:11px;padding:6px 9px;min-height:30px}
}

/* 12 Oct correction: retain the photo's own white billboard, and keep the
   overlay ABOVE the officers' hats. The image is anchored at the top so its
   upper frame is not lost to vertical centering on short browser windows. */
body.billboard-landing{overflow-x:hidden;overflow-y:auto}
.billboard-stage{height:auto;min-height:100dvh;align-items:flex-start;justify-content:center;overflow:visible}
.billboard-scene{margin:0 auto}
/* The photo already contains the entire white billboard. The overlay covers
   only the upper part containing the brand and links; below it the untouched
   photograph is visible, including the hats and heads. */
.billboard-screen{top:16.5%;height:28%;gap:1%;padding:0.5% 2.5%;justify-content:center}
.billboard-wordmark{width:55%;height:56%;flex:0 1 auto}
.billboard-tagline{line-height:1.1}
.billboard-actions{margin-top:0}
@media(max-width:700px){
  .billboard-stage{overflow:hidden;min-height:100dvh}
  .billboard-scene{margin:0;left:50%;transform:translateX(-50%)}
  .billboard-screen{height:28%}
  .billboard-wordmark{height:53%}
}

/* 12 Oct 2026 — billboard content alignment only.
   Do not alter scene framing, photo, artwork or navigation destinations. */
.billboard-screen{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2%;
  padding:0.5% 2.5%;
}
.billboard-wordmark{
  width:78%;
  height:72%;
  flex:0 0 72%;
  min-height:0;
  object-fit:contain;
}
.billboard-tagline{margin:0;flex:0 0 auto}
.billboard-actions{margin:0;flex:0 0 auto}
@media(max-width:700px){
  .billboard-wordmark{width:78%;height:72%;flex-basis:72%}
}

/* 12 October final adjustment: 25% larger artwork, equal optical gaps,
   and centred content. Background framing and links remain untouched. */
.billboard-screen{
  gap:0;
  padding:0 2.5%;
  justify-content:center;
}
.billboard-wordmark{
  width:97.5%; /* 78% x 1.25 */
  height:75%;
  flex:0 0 75%;
  object-fit:contain;
}
.billboard-tagline{
  margin:0;
  flex:0 0 auto;
  line-height:1.1;
}
.billboard-actions{
  margin-top:clamp(5px,0.7cqw,12px);
  flex:0 0 auto;
}
@media(max-width:700px){
  .billboard-wordmark{width:97.5%;height:75%;flex-basis:75%}
}

/* 12 October: enforce identical, visible spacing above and below the tagline.
   The two row gaps are the same CSS value, rather than a separate button margin. */
.billboard-screen{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  row-gap:clamp(7px,0.85cqw,13px);
  padding:0 2.5%;
}
.billboard-wordmark{
  width:97.5%;height:70%;flex:0 1 70%;min-height:0;
  object-fit:contain;
}
.billboard-tagline{margin:0;flex:0 0 auto;line-height:1.1}
.billboard-actions{margin:0;flex:0 0 auto}
@media(max-width:700px){.billboard-wordmark{width:97.5%;height:70%;flex-basis:70%}}

/* Definitive billboard layout: fixed optical gaps, not percentage-sized flex gaps.
   The previous 70%-height logo consumed space that the gaps needed. */
body.billboard-landing .billboard-screen{
  top:16.5%;
  height:35.9%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:clamp(15px,2.45cqw,24px);
  padding:0 2.5%;
}
body.billboard-landing .billboard-wordmark{
  display:block;
  flex:0 0 48%;
  width:97.5%;
  height:48%;
  min-height:0;
  object-fit:contain;
}
body.billboard-landing .billboard-tagline{
  flex:0 0 auto;
  margin:0;
  line-height:1.1;
}
body.billboard-landing .billboard-actions{
  flex:0 0 auto;
  margin:0;
}
@media(max-width:700px){
  body.billboard-landing .billboard-screen{height:35.9%;gap:clamp(12px,2.1cqw,19px)}
  body.billboard-landing .billboard-wordmark{height:48%;flex-basis:48%}
}