/* assessmentcheck.ca theme (2026-11-07): night blue + canola, Bricolage Grotesque.
   Every selector the templates use is kept; new ones are for the home page hero, timeline and steps. */
:root { --night:#102845; --night-2:#173759; --ink:#16304f; --muted:#5b6b80; --line:#d8e1ec; --sky:#e3eef8; --bg:#f8fafc; --card:#ffffff;
        --accent:#17457a; --accent-soft:#e3eef8; --canola:#f4c542; --canola-dark:#c99a12; --up:#c2410c; --down:#1b7f4b; --bar-ms:1200ms; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-variation-settings:"opsz" 14, "wdth" 100; }
a { color:var(--accent); }
a:hover { text-decoration-thickness:2px; }
select:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline:3px solid var(--canola); outline-offset:2px; }
.wrap { max-width:66rem; margin:0 auto; padding:0 1.25rem; }
.narrow { max-width:44rem; }

header.top { background:var(--night); color:#fff; }
header.top .wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1.25rem; padding-top:1rem; padding-bottom:1rem; }
.brand { font-weight:700; font-size:1.15rem; color:#fff; text-decoration:none; letter-spacing:-.01em; }
.brand span { color:var(--canola); }
nav.main a { color:#c9d6e6; text-decoration:none; margin-left:1.25rem; font-size:.95rem; }
nav.main a:first-child { margin-left:0; }
nav.main a:hover, nav.main a:focus-visible { color:#fff; }

main { padding:2rem 0 3rem; }
h1 { font-size:1.9rem; line-height:1.2; margin:0 0 .75rem; letter-spacing:-.025em; font-weight:800; font-variation-settings:"opsz" 96, "wdth" 92; }
h2 { font-size:1.35rem; margin:2rem 0 .6rem; letter-spacing:-.02em; font-weight:700; font-variation-settings:"opsz" 40; }
h2 small { display:block; font-size:1rem; font-weight:400; color:var(--muted); margin-top:.15rem; letter-spacing:0; }
h3 { font-size:1.05rem; margin:1.5rem 0 .4rem; }
.lead { font-size:1.12rem; color:var(--muted); margin-top:0; }
.muted, .small { color:var(--muted); }
.small { font-size:.88rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.1rem 1.25rem; margin:1rem 0; }
.grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr)); }
.stat { background:var(--card); border:1px solid var(--line); border-left:5px solid var(--canola); border-radius:12px; padding:.9rem 1rem; }
.stat b { display:block; font-size:1.45rem; line-height:1.2; font-variant-numeric:tabular-nums; }
.stat span { color:var(--muted); font-size:.9rem; }
.up { color:var(--up); } .down { color:var(--down); }

form.search { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0; position:relative; background:#fff; padding:.5rem; border-radius:14px; border:1px solid var(--line); }
select, input[type=text], input[type=email], textarea { font:inherit; padding:.65rem .8rem; border:1px solid #b9c2cc; border-radius:9px; background:#fff; color:var(--ink); }
form.search select, form.search input[type=text] { border-color:transparent; background:var(--sky); font-size:1.02rem; }
form.search input[type=text] { flex:1 1 14rem; min-width:0; }
textarea { width:100%; min-height:8rem; }
button, .button { font:inherit; font-weight:700; padding:.65rem 1.3rem; border-radius:9px; border:1px solid var(--canola); background:var(--canola); color:var(--night); cursor:pointer; text-decoration:none; display:inline-block; transition:transform .12s ease, background .15s; }
button:hover, .button:hover { background:#ffd45a; border-color:#ffd45a; }
button:active, .button:active { transform:scale(.96); }
button.secondary, .button.secondary { background:#fff; color:var(--accent); border-color:var(--accent); }
button[disabled] { opacity:.55; cursor:not-allowed; transform:none; }
.suggest { position:absolute; top:100%; left:0; right:0; z-index:5; background:#fff; border:1px solid var(--line); border-radius:10px; margin:.25rem 0 0; padding:.25rem 0; list-style:none; box-shadow:0 10px 28px rgba(16,40,69,.14); }
.suggest li a { display:block; padding:.4rem .75rem; text-decoration:none; color:var(--ink); }
.suggest li a:hover, .suggest li a:focus { background:var(--accent-soft); }
.suggest li small { color:var(--muted); }

table { border-collapse:collapse; width:100%; font-size:.95rem; }
th, td { text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:.85rem; color:var(--muted); font-weight:600; }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; }
.table-scroll { overflow-x:auto; }
.cols { columns:3 13rem; column-gap:1.5rem; padding:0; list-style:none; }
.cols li { break-inside:avoid; padding:.15rem 0; }
.notice { background:#fff7df; border:1px solid #f0d58c; border-radius:12px; padding:.8rem 1rem; }
.disclaimer { font-size:.92rem; color:var(--muted); border-left:4px solid var(--canola); padding-left:.9rem; }
svg.chart { width:100%; max-width:36rem; height:auto; display:block; margin:.5rem 0 1rem; }
svg.chart rect { fill:var(--accent); }
svg.chart text { font-size:13px; fill:var(--muted); font-family:inherit; }
svg.chart text.v { fill:var(--ink); font-size:12px; }
.crumbs { font-size:.9rem; color:var(--muted); margin-bottom:.6rem; }
.crumbs a { color:var(--muted); }
dl.qa { margin:0; display:grid; gap:.6rem; }
dl.qa dt { font-weight:700; }
dl.qa dd { margin:0 0 .2rem; color:var(--muted); font-size:.95rem; }
label.check { display:flex; gap:.5rem; align-items:flex-start; margin:.75rem 0; }
label.check input { margin-top:.35rem; }

footer.site { background:var(--night); color:#a9bad0; font-size:.88rem; padding:1.75rem 0 2.5rem; }
footer.site b { color:#fff; }
footer.site a { color:#c9d6e6; }
footer.site nav a { margin-right:1rem; }

/* Home page hero: full width, dark, with the example check. */
main.home { padding-top:0; }
.hero { background:var(--night); color:#fff; padding:2.5rem 0 3rem; position:relative; margin-bottom:2.5rem; }
.hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--canola); }
.hero .wrap { display:grid; gap:2.5rem; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; }
.hero h1 { font-size:clamp(2rem, 4.6vw, 3.4rem); line-height:1.05; margin-bottom:1rem; color:#fff; }
.hero .lead { color:#c9d6e6; font-size:1.15rem; max-width:34rem; margin-bottom:1.5rem; }
.hero form.search { border:0; margin:0; }
.hero .small { color:#a9bad0; font-size:.9rem; margin:.9rem 0 0; }
.demo { background:var(--night-2); border-radius:16px; padding:1.4rem 1.5rem 1.5rem; border:1px solid #27507a; }
.demo h2 { margin:0 0 1.1rem; font-size:1rem; font-weight:600; color:#c9d6e6; letter-spacing:0; }
.demo .row { display:grid; grid-template-columns:9.5rem 1fr 4.5rem; gap:.75rem; align-items:center; margin:.6rem 0; }
.demo .lbl { font-size:.95rem; color:#e6eef8; }
.demo .track { height:1.5rem; background:#0c1f36; border-radius:6px; overflow:hidden; }
.demo .bar { height:100%; width:0; border-radius:6px; transition:width var(--bar-ms) cubic-bezier(.2,.7,.2,1); }
.demo .bar.you { background:var(--canola); }
.demo .bar.near { background:#7fb2e3; }
.demo .val { font-size:1.15rem; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; color:#fff; }
.demo.go .bar.you { width:91%; }
.demo.go .bar.near { width:64%; transition-delay:180ms; }
.demo .diff { margin:1.1rem 0 0; padding-top:1rem; border-top:1px solid #27507a; color:#c9d6e6; font-size:.95rem; opacity:0; transform:translateY(6px); transition:opacity .5s ease 1.3s, transform .5s ease 1.3s; }
.demo .diff b { color:var(--canola); font-size:1.25rem; font-variant-numeric:tabular-nums; }
.demo.go .diff { opacity:1; transform:none; }
.demo p.note { margin:.6rem 0 0; font-size:.82rem; color:#8fa4bf; }

/* Home page: cities on a notice-month timeline, numbered steps, light band. */
.timeline { margin-top:1.25rem; }
.months { display:grid; grid-template-columns:repeat(3,1fr); font-size:.9rem; color:var(--muted); border-top:3px solid var(--line); }
.months span { padding:.4rem 0 0 .5rem; border-left:1px solid var(--line); }
.cities { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-top:1rem; }
.cities ul { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; align-content:start; }
.city { display:block; background:var(--card); border:1px solid var(--line); border-left:5px solid var(--canola); border-radius:10px; padding:.8rem 1rem; text-decoration:none; color:var(--ink); }
.city:hover, .city:focus-visible { border-color:var(--night); border-left-color:var(--canola); }
.city b { display:block; font-size:1.05rem; }
.city span { display:block; font-size:.88rem; color:var(--muted); }
.city .roll { color:var(--ink); }
.steps { counter-reset:step; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(15rem,1fr)); }
.step { counter-increment:step; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.1rem 1.2rem 1.1rem 3.6rem; position:relative; }
.step::before { content:counter(step); position:absolute; left:1.1rem; top:1.05rem; width:1.8rem; height:1.8rem; border-radius:50%; background:var(--night); color:var(--canola); font-weight:700; display:grid; place-items:center; font-size:.95rem; }
.step b { display:block; font-size:1.08rem; margin-bottom:.2rem; }
.step span { color:var(--muted); font-size:.95rem; }
.band { background:var(--sky); margin:2.5rem 0 0; padding:2rem 0; }
.band .wrap { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit, minmax(18rem,1fr)); }
.band h2 { font-size:1.2rem; margin:0 0 .4rem; }
.band p { margin:0; }

@media (max-width:52rem) {
  .hero .wrap { grid-template-columns:1fr; gap:1.75rem; }
  .months { display:none; }
  .cities { grid-template-columns:1fr; }
}
@media (max-width:40rem) { h1 { font-size:1.6rem; } nav.main a { margin-left:.75rem; } body { font-size:16px; } .demo .row { grid-template-columns:7rem 1fr 3.8rem; } }
@media (prefers-reduced-motion: reduce) {
  .demo .bar, .demo .diff, button, .button { transition:none !important; }
  .demo .bar.you { width:91%; } .demo .bar.near { width:64%; } .demo .diff { opacity:1; transform:none; }
}