/* ============================================================
   Eric Lombardi for Ontario — The Platform (web)
   Design system: PP Watch / PP Pangram Sans, brand red #E81E25
   ============================================================ */

@font-face { font-family:'PP Watch'; src:url('fonts/PPWatch-Black.otf') format('opentype'); font-weight:900; font-display:swap; }
@font-face { font-family:'PP Watch'; src:url('fonts/PPWatch-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'PP Watch'; src:url('fonts/PPWatch-Semibold.otf') format('opentype'); font-weight:600; font-display:swap; }
@font-face { font-family:'PP Watch'; src:url('fonts/PPWatch-Medium.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'PP Pangram Sans'; src:url('fonts/PPPangramSans-Extrabold.otf') format('opentype'); font-weight:800; font-display:swap; }
@font-face { font-family:'PP Pangram Sans'; src:url('fonts/PPPangramSans-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'PP Pangram Sans'; src:url('fonts/PPPangramSans-Semibold.otf') format('opentype'); font-weight:600; font-display:swap; }
@font-face { font-family:'PP Pangram Sans'; src:url('fonts/PPPangramSans-Medium.otf') format('opentype'); font-weight:500; font-display:swap; }
@font-face { font-family:'PP Pangram Sans'; src:url('fonts/PPPangramSans-Regular.otf') format('opentype'); font-weight:400; font-display:swap; }

:root{
  --red:#E81E25; --red-dk:#C9191F; --red-tint:#FCEBEC;
  --ink:#101010; --near-black:#0E0E10; --charcoal:#2D2D2D; --soft:#4A4E55;
  --mute:#6B7280; --line:#E4E6EA; --tint:#F4F5F7; --tint2:#F9FAFB; --paper:#FFFFFF;
  --green:#15803D; --green-tint:#E9F5EE;
  --ink-on-dark:#F4F3F1; --mute-on-dark:#9BA0A8; --line-on-dark:rgba(255,255,255,.16);
  --sans:'PP Pangram Sans',-apple-system,'Segoe UI',Roboto,sans-serif;
  --disp:'PP Watch','PP Pangram Sans',sans-serif;
  --maxw:1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper); line-height:1.5; }
img{ max-width:100%; }
a{ color:inherit; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 22px; }

.kicker{ font-weight:700; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); }
.kicker::before{ content:''; display:inline-block; width:5px; height:5px; background:var(--red);
  transform:rotate(45deg); margin-right:10px; vertical-align:2px; }
.kicker.grey{ color:var(--mute); }
h1,h2,h3{ font-family:var(--disp); font-weight:700; letter-spacing:-0.015em; margin:0; line-height:1.06; }

/* ---------- top nav ---------- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(14,14,16,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08); }
.nav .wrap{ display:flex; align-items:center; gap:18px; height:60px; }
.nav .mark{ display:flex; align-items:center; gap:9px; color:#fff; text-decoration:none;
  font-family:var(--disp); font-weight:700; font-size:16px; letter-spacing:.01em; white-space:nowrap; }
.nav .mark .dot{ width:8px; height:8px; background:var(--red); transform:rotate(45deg); flex-shrink:0; }
.nav .links{ display:flex; gap:20px; margin-left:8px; }
.nav .links a{ color:var(--mute-on-dark); text-decoration:none; font-size:13.5px; font-weight:600; }
.nav .links a:hover{ color:#fff; }
.nav .cta{ margin-left:auto; display:flex; gap:10px; }
.btn{ display:inline-block; text-decoration:none; font-weight:700; font-size:13.5px; border-radius:999px;
  padding:9px 18px; line-height:1; white-space:nowrap; }
.btn.red{ background:var(--red); color:#fff; }
.btn.red:hover{ background:var(--red-dk); }
.btn.ghost{ color:#fff; border:1px solid rgba(255,255,255,.35); }
.btn.ghost:hover{ border-color:#fff; }
/* hamburger + mobile menu */
.burger{ display:none; background:none; border:0; cursor:pointer; padding:10px 4px 10px 10px; margin-left:2px; }
.burger span{ display:block; width:22px; height:2px; background:#fff; margin:5px 0; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease; }
.nav.open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .burger span:nth-child(2){ opacity:0; }
.nav.open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mnav{ display:none; }
@media (max-width:720px){
  .nav .links{ display:none; }
  .nav .cta .btn.ghost{ display:none; }
  .nav .wrap{ gap:10px; }
  .nav .mark > span:not(.dot){ display:none; }  /* drop the "· for Ontario" subtitle */
  .burger{ display:block; }
  .nav.open .mnav{ display:flex; flex-direction:column; padding:6px 22px 18px;
    border-top:1px solid rgba(255,255,255,.08); }
  .mnav a{ color:var(--ink-on-dark); text-decoration:none; font-weight:600; font-size:15.5px;
    padding:11px 0; border-bottom:1px solid rgba(255,255,255,.06); }
  .mnav a:last-of-type{ border-bottom:0; }
  .mnav a:hover{ color:#fff; }
  .mnav .msign{ color:#fff; font-weight:700; }
  .mnav .msign::after{ content:' →'; color:var(--red); }
}

/* ---------- dark hero with deco corners ---------- */
.hero{ position:relative; background:var(--near-black); color:var(--ink-on-dark); overflow:hidden; }
.hero .inner{ position:relative; max-width:var(--maxw); margin:0 auto; padding:84px 22px 72px; }
.hero h1{ color:#fff; font-size:clamp(38px,6.4vw,72px); letter-spacing:-0.02em; }
.hero .tagline{ font-size:clamp(16px,2.2vw,20px); line-height:1.55; color:var(--ink-on-dark); max-width:720px; margin-top:20px; }
.hero .meta{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; }
.deco{ position:absolute; inset:16px; border:1px solid rgba(255,255,255,.16); pointer-events:none; }
.deco .di{ position:absolute; inset:6px; border:1px solid rgba(255,255,255,.07); }
.deco .dc{ position:absolute; width:46px; height:46px; }
.deco .dc svg{ width:100%; height:100%; display:block; }
.deco .dc.tl{ top:-1px; left:-1px; } .deco .dc.tr{ top:-1px; right:-1px; transform:scaleX(-1); }
.deco .dc.br{ bottom:-1px; right:-1px; transform:scale(-1,-1); } .deco .dc.bl{ bottom:-1px; left:-1px; transform:scaleY(-1); }
.deco .dd{ position:absolute; left:50%; width:8px; height:8px; margin-left:-4px; background:var(--red); transform:rotate(45deg); }
.deco .dd.t{ top:-4.5px; } .deco .dd.b{ bottom:-4.5px; }
@media (max-width:720px){ .deco{ inset:10px; } .deco .dc{ width:32px; height:32px; } }

.tag{ display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.03em;
  border:1px solid var(--line-on-dark); border-radius:999px; padding:7px 14px; color:var(--ink-on-dark); }
.tag.solid{ background:var(--red); border-color:var(--red); color:#fff; font-weight:700; }

/* fiscal badge */
.fisc{ display:inline-block; font-size:12.5px; font-weight:700; border-radius:8px; padding:6px 11px; }
.fisc.cost{ background:var(--red-tint); color:var(--red-dk); }
.fisc.save{ background:var(--green-tint); color:var(--green); }
.fisc.ondark.cost{ background:rgba(232,30,37,.18); color:#FF8A8E; }
.fisc.ondark.save{ background:rgba(21,128,61,.22); color:#7BD79A; }

/* ---------- landing: PDF download card ---------- */
.dlstrip{ background:var(--paper); padding:54px 0; border-bottom:1px solid var(--line); }
.dlcard{ display:flex; gap:36px; align-items:center; }
.dlthumb{ flex-shrink:0; display:block; width:200px; border-radius:10px; overflow:hidden;
  box-shadow:0 8px 20px rgba(16,16,16,.14), 0 22px 48px rgba(16,16,16,.16);
  border:1px solid var(--line); transition:transform .18s ease; }
.dlthumb:hover{ transform:translateY(-3px); }
.dlthumb img{ display:block; width:100%; }
@media (max-width:640px){ .dlcard{ flex-direction:column; text-align:center; }
  .dlthumb{ width:170px; } .dltext p{ margin-left:auto; margin-right:auto; } }

/* ---------- landing: foreword ---------- */
.foreword{ background:var(--tint2); border-bottom:1px solid var(--line); }
.foreword .inner{ max-width:820px; margin:0 auto; padding:64px 22px; }
.foreword .lead{ font-family:var(--disp); font-weight:500; font-size:clamp(20px,3vw,26px); line-height:1.35; color:var(--ink); margin-top:14px; }
.foreword p{ font-size:16px; line-height:1.65; color:var(--charcoal); margin:14px 0 0; }
.foreword details{ margin-top:6px; }
.foreword summary{ cursor:pointer; color:var(--red); font-weight:700; font-size:14px; margin-top:14px; list-style:none; }
.foreword summary::-webkit-details-marker{ display:none; }
.foreword summary::after{ content:' ↓'; }
.foreword details[open] summary::after{ content:' ↑'; }
.sig{ margin-top:20px; font-family:var(--disp); font-weight:700; font-size:18px; }

/* ---------- landing: section grid ---------- */
.gridsec{ padding:70px 0 84px; }
.gridsec .head{ max-width:var(--maxw); margin:0 auto 10px; padding:0 22px; }
.cards{ max-width:var(--maxw); margin:28px auto 0; padding:0 22px; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; }
@media (max-width:400px){ .cards{ grid-template-columns:1fr; } }
.card{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:22px 22px 20px; text-decoration:none; color:var(--ink);
  box-shadow:0 1px 2px rgba(16,16,16,.03), 0 8px 22px rgba(16,16,16,.05);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.card:hover{ transform:translateY(-3px); border-color:#d6d9de; box-shadow:0 4px 10px rgba(16,16,16,.05), 0 16px 34px rgba(16,16,16,.09); }
.card{ overflow:hidden; }
.card .cimg{ margin:-22px -22px 16px; height:120px; overflow:hidden; background:var(--tint); }
.card .cimg img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.92);
  transition:transform .25s ease; }
.card:hover .cimg img{ transform:scale(1.04); }
.card .cnum{ font-family:var(--disp); font-weight:700; font-size:15px; color:var(--red); }
.card .ctheme{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin-top:2px; }
.card h3{ font-size:21px; line-height:1.14; margin-top:8px; letter-spacing:-0.01em; }
.card .ctag{ font-size:13.5px; line-height:1.5; color:var(--soft); margin-top:9px; }
.card .cgoals{ margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.card .cgoals span{ position:relative; padding-left:16px; font-size:13px; font-weight:600; color:var(--charcoal); line-height:1.35; }
.card .cgoals span::before{ content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--red); }
.card .cfoot{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.card .go{ font-weight:700; font-size:13.5px; color:var(--red); }

/* ---------- section page ---------- */
.crumb{ font-size:13px; font-weight:600; }
.crumb a{ color:var(--mute-on-dark); text-decoration:none; }
.crumb a:hover{ color:#fff; }
.hero .num{ font-family:var(--disp); font-weight:700; font-size:clamp(15px,2vw,18px); color:var(--red); letter-spacing:.06em; }

.stripe{ padding:58px 0; }
.stripe.alt{ position:relative; background:var(--tint2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
/* deco finial: a small diamond seated on the section boundary, echoing the hero frame */
.stripe.alt::before, .stripe.alt::after{ content:''; position:absolute; left:50%; width:7px; height:7px;
  margin-left:-3.5px; background:var(--red); transform:rotate(45deg); }
.stripe.alt::before{ top:-4px; }
.stripe.alt::after{ bottom:-4px; }
.stripe .head{ margin-bottom:22px; }
.stripe h2{ font-size:clamp(24px,3.4vw,32px); margin-top:6px; }

/* at a glance */
.glance{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:24px; }
.gcard{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.gcard .gn{ font-family:var(--disp); font-weight:700; font-size:15px; color:var(--red); }
.gcard h3{ font-family:var(--sans); font-weight:700; font-size:16.5px; line-height:1.25; margin-top:5px; letter-spacing:0; }
.gcard p{ font-size:13.5px; line-height:1.5; color:var(--mute); margin:8px 0 0; }

/* the case */
.case{ max-width:780px; }
.case p{ font-size:16.5px; line-height:1.7; color:var(--charcoal); margin:0 0 18px; }
.case p:first-child::first-letter{ font-family:var(--disp); font-weight:700; font-size:3.1em; float:left;
  line-height:.85; padding-right:10px; color:var(--red); }

/* plan roll-ups */
.plan{ display:flex; flex-direction:column; gap:14px; margin-top:8px; }
details.pg{ background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
details.pg summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:18px 22px; }
details.pg summary::-webkit-details-marker{ display:none; }
details.pg summary .pt{ flex:1; }
details.pg summary .pt .pn{ font-family:var(--sans); font-weight:700; font-size:16.5px; color:var(--ink); line-height:1.25; }
details.pg summary .pt .pm{ font-size:12.5px; color:var(--mute); font-weight:600; margin-top:3px; }
details.pg summary .chev{ flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--red); font-weight:800; font-size:14px;
  transition:transform .18s ease; }
details.pg[open] summary .chev{ transform:rotate(180deg); background:var(--red); border-color:var(--red); color:#fff; }
details.pg .pbody{ padding:2px 22px 20px; }
details.pg .pintro{ font-size:14.5px; line-height:1.55; color:var(--soft); margin:0 0 14px; }
.pbullets{ display:flex; flex-direction:column; gap:12px; }
.pbullets .pb{ position:relative; padding-left:20px; font-size:14.5px; line-height:1.55; color:var(--charcoal); }
.pbullets .pb::before{ content:''; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--red); }
.pbullets .pb strong{ color:var(--ink); }
.expandall{ background:none; border:1px solid var(--line); border-radius:999px; color:var(--red); font-family:var(--sans);
  font-weight:700; font-size:13px; padding:8px 16px; cursor:pointer; }
.expandall:hover{ border-color:var(--red); }

/* costs table */
.tscroll{ overflow-x:auto; }
table.fin{ width:100%; border-collapse:collapse; font-size:14px; min-width:520px; }
table.fin th{ text-align:left; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mute); padding:10px 14px; border-bottom:2px solid var(--ink); }
table.fin th.r, table.fin td.r{ text-align:right; white-space:nowrap; }
table.fin td{ padding:11px 14px; border-bottom:1px solid var(--line); color:var(--charcoal); }
table.fin tr.total td{ font-weight:800; color:var(--ink); background:var(--tint); }
table.fin td a{ color:inherit; text-decoration:none; font-weight:600; }
table.fin td a:hover{ color:var(--red); }
table.fin td.neg{ color:var(--red-dk); font-weight:600; }
table.fin td.pos{ color:var(--green); font-weight:600; }
.finnote{ font-size:12.5px; color:var(--mute); margin-top:12px; line-height:1.5; }
@media (max-width:620px){
  table.fin{ min-width:0; font-size:13px; }
  table.fin th, table.fin td{ padding:9px 8px; }
}

/* assumptions */
details.fa{ border:1px solid var(--line); border-radius:14px; background:var(--paper); overflow:hidden; }
details.fa > summary{ list-style:none; cursor:pointer; padding:18px 22px; display:flex; align-items:center; gap:14px; }
details.fa > summary::-webkit-details-marker{ display:none; }
details.fa .fabody{ padding:0 22px 20px; }
table.fa{ width:100%; border-collapse:collapse; font-size:13px; min-width:640px; }
table.fa th{ text-align:left; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); padding:8px 10px; border-bottom:2px solid var(--line); }
table.fa td{ padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--charcoal); line-height:1.45; }
table.fa td.r{ text-align:right; white-space:nowrap; }
.fagroup{ font-family:var(--sans); font-weight:800; font-size:13px; color:var(--ink); margin:18px 0 8px; }

/* regions */
details.region{ background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.regions{ display:flex; flex-direction:column; gap:14px; }

/* pager */
.pager{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:var(--maxw); margin:0 auto; padding:0 22px 70px; }
.pager a{ display:block; border:1px solid var(--line); border-radius:14px; padding:18px 20px; text-decoration:none; color:var(--ink); }
.pager a:hover{ border-color:var(--red); }
.pager .pl{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.pager .pt2{ font-family:var(--disp); font-weight:700; font-size:17px; margin-top:6px; line-height:1.2; }
.pager a.next{ text-align:right; }
@media (max-width:620px){ .pager{ grid-template-columns:1fr; } }

/* interactives */
.inters{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:26px; }
.inter{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line);
  border-radius:16px; padding:22px; text-decoration:none; color:var(--ink);
  box-shadow:0 1px 2px rgba(16,16,16,.03), 0 8px 22px rgba(16,16,16,.05);
  transition:transform .15s ease, border-color .15s ease; }
.inter:hover{ transform:translateY(-3px); border-color:var(--red); }
.inter .ik{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--red); }
.inter h3{ font-family:var(--disp); font-weight:700; font-size:22px; margin-top:8px; letter-spacing:-0.01em; }
.inter p{ font-size:14px; line-height:1.55; color:var(--mute); margin:9px 0 0; }
.inter .go{ margin-top:16px; font-weight:700; font-size:13.5px; color:var(--red); }

/* footer */
.foot{ position:relative; background:var(--near-black); color:var(--mute-on-dark); margin-top:0; }
.foot::before{ content:''; position:absolute; top:-4px; left:50%; width:7px; height:7px;
  margin-left:-3.5px; background:var(--red); transform:rotate(45deg); }
.foot .inner{ max-width:var(--maxw); margin:0 auto; padding:46px 22px; display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between; }
.foot .fm{ font-family:var(--disp); font-weight:700; color:#fff; font-size:17px; display:flex; align-items:center; gap:9px; }
.foot .fm .dot{ width:8px; height:8px; background:var(--red); transform:rotate(45deg); }
.foot nav{ display:flex; flex-wrap:wrap; gap:18px; }
.foot a{ color:var(--mute-on-dark); text-decoration:none; font-size:13.5px; font-weight:600; }
.foot a:hover{ color:#fff; }
.foot .fine{ width:100%; font-size:11.5px; letter-spacing:.05em; color:#6c7078; }

/* card banner focal points — keep faces/subjects in frame */
.card .cimg img[src$="health.jpg"]{ object-position:50% 22%; }
.card .cimg img[src$="youth.jpg"]{ object-position:50% 25%; }
.card .cimg img[src$="justice.jpg"]{ object-position:50% 30%; }

/* deterministic column widths — Lower/Upper align across all tables and pages */
table.fin{ table-layout:fixed; }
table.fin th.r, table.fin td.r{ width:110px; }
table.fa{ table-layout:fixed; }
table.fa th:first-child, table.fa td:first-child{ width:26%; }
table.fa th.r, table.fa td.r{ width:82px; }
@media (max-width:620px){ table.fin th.r, table.fin td.r{ width:88px; } }


/* socials */
.socials{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.socials a{ text-decoration:none; font-weight:700; font-size:13px; color:var(--ink-on-dark);
  border:1px solid var(--line-on-dark); border-radius:999px; padding:9px 16px; }
.socials a:hover{ border-color:var(--red); color:#fff; }

/* dark connect band */
.connect{ background:var(--near-black); color:var(--ink-on-dark); position:relative; overflow:hidden; }
.connect .inner{ position:relative; max-width:var(--maxw); margin:0 auto; padding:70px 22px; }
.connect h2{ color:#fff; font-size:clamp(28px,4.4vw,44px); }
.connect .cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px; margin-top:34px; }
.connect .col h3{ font-family:var(--sans); font-weight:800; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mute-on-dark); letter-spacing:.14em; }
.connect .col p{ font-size:14px; color:var(--mute-on-dark); line-height:1.55; margin:10px 0 14px; }

/* centre the case column (and its heading) within the page */
.case{ margin:0 auto; }
.wrap:has(> .case) > .head{ max-width:780px; margin-left:auto; margin-right:auto; }

/* breathing room between hero text and the deco frame */
.hero .inner{ padding-left:56px; padding-right:56px; }
@media (max-width:720px){ .hero .inner{ padding-left:34px; padding-right:34px; } }

/* pin the fiscal pill row to the card bottom — equal-height cards, gap above the divider */
.card .cgoals{ margin-bottom:16px; }
.card .cfoot{ margin-top:auto; }