:root{
  --red:#D32F2F;              /* Canadian red */
  --red-ink: rgba(211,47,47,.18);

  --blue:#1E88E5;             /* Lighter accent blue (accessible on white) */
  --blue-dark:#1565C0;        /* Hover/active */
  --ring: rgba(30,136,229,.35);

  --ink:#0a0a0a;
  --muted:#6b7280;            /* slate-500 */
  --bg:#ffffff;
  --card:#f8fafc;             /* slate-50 */
  --shadow: 0 10px 25px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.05);
}

/* Base */
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.container{max-width:1120px; padding:0 1.25rem; margin:0 auto;}
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#fff; border:2px solid var(--blue); z-index:1000;}

/* Header */
.site-header{
  background:var(--bg);
  color:var(--ink);
  padding-bottom:2rem;
  border-bottom:1px solid #e5e7eb;
  position:relative;
}
.site-header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:6px;
  background:linear-gradient(90deg, var(--red) 0%, var(--blue) 100%);
}
.header-inner{display:flex; align-items:center; min-height:112px;}
.brand{display:flex; align-items:center; gap:1rem; width:100%;}

/* Logo placeholder — replace <div.logo-box> with your <img> when ready. */
.logo-box{
  width:96px; height:96px; flex:0 0 auto;
  border:2px dashed rgba(211,47,47,.45);
  border-radius:16px; display:grid; place-items:center; text-align:center; padding:.5rem;
  font-size:.75rem; color:var(--red);
  background:rgba(211,47,47,.06);
}
.logo-box:hover{background:rgba(211,47,47,.10)}
.logo-box span{opacity:.9}

.title h1{margin:0; font-size:clamp(1.25rem, 2vw + 1rem, 2rem); letter-spacing:.2px; font-weight:800}
.title .accent{color:var(--red); font-weight:800}
.tagline{margin:.25rem 0 0; color:var(--muted)}

/* Status banner (floating card under the white header) */
.status-banner{
  margin:0 auto 1.25rem;
  position:relative;
  transform:translateY(-1.25rem);
}
.status-card{
  background:#fff; border-radius:18px; box-shadow:var(--shadow);
  padding:1rem 1.25rem; display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; border:1px solid #eef2f7;
}

/* Pills */
.pill{display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; padding:.4rem .8rem; border:1px solid #e6eefb}
.pill .dot{width:10px; height:10px; border-radius:50%; background:#16a34a; box-shadow:0 0 0 4px rgba(22,163,74,.12)}
.pill strong{font-weight:700}

/* Buttons & links */
.actions a{display:inline-block; text-decoration:none; font-weight:700;}
.btn{border-radius:12px; padding:.65rem .9rem; border:1px solid var(--blue);}
.btn.primary{background:var(--blue); color:#fff}
.btn.primary:hover{background:var(--blue-dark); border-color:var(--blue-dark)}
.btn.ghost{background:transparent; color:var(--blue)}
.btn.ghost:hover{background:rgba(30,136,229,.08)}
.btn:focus{outline:3px solid var(--ring); outline-offset:2px}

/* Cards */
.grid{display:grid; grid-template-columns:repeat(12, 1fr); gap:1rem;}
.card{grid-column:span 12; background:var(--card); border:1px solid #e5e7eb; border-radius:18px; padding:1rem 1.25rem; box-shadow:var(--shadow)}
.card h2{margin:.25rem 0 .5rem; font-size:1.1rem}
.card p{margin:.25rem 0 .5rem; color:#334155}
.card .meta{color:var(--muted); font-size:.95rem}

/* Contact */
.contact{margin:1.25rem 0 0}
.contact .panel{background:#fff; border:1px solid #e5e7eb; border-radius:18px; padding:1rem 1.25rem; box-shadow:var(--shadow)}
.contact ul{list-style:none; padding:0; margin:.25rem 0 0;}
.contact li{margin:.25rem 0}
.contact a{color:var(--blue); font-weight:700; text-decoration:none; border-bottom:1px solid rgba(30,136,229,.25)}
.contact a:hover{border-bottom-color:var(--blue)}

/* Footer */
.site-footer{margin:2rem 0 0; padding:1rem 0 2rem; color:var(--muted);}
.site-footer .bar{height:4px; background:linear-gradient(90deg, var(--red) 0%, var(--blue) 100%); border-radius:999px}
.site-footer .copy{margin:.75rem 0 0; font-size:.95rem}

/* Responsive adjustments */
@media (min-width:720px){
  .card{grid-column:span 4}
  .site-header{padding-bottom:3rem}
  .status-banner{transform:translateY(-1.75rem);}
}

/* Utility */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}