/*
  CanTransform design standard. Everything on the site sits on these scales.

  Type     One family: Archivo. Weights 400 and 600 only.
           Scale 13 / 16 / 20 / 32 / 56 px (hero steps down to 36 on phones).
           Line height 1.55 body, 1.15 headings.
           Kickers, table headers and meta are the 13px uppercase step.
  Space    8px scale: 4 8 12 16 24 32 48 64 96.
           Sections 96 apart (64 on phones). Cards padded 24. Table cells 12 by 16.
  Colour   Paper, ink, two ink tints, Canada red. Red carries the brand, the
           primary action and the stat band. Spruce marks anything open.
  Photos   Square corners, no filters. Text only sits on a photo over an ink scrim.
  Surface  One card style, one table style, one note style. No shadows or glows.
  Motion   150ms on hover states. Nothing else moves.
*/

:root {
  --paper: #f6f6f3;
  --white: #ffffff;
  --ink: #101c1e;
  --ink-2: #3d4a4c;
  --ink-3: #6b7678;
  --rule: rgba(16, 28, 30, 0.14);
  --rule-strong: rgba(16, 28, 30, 0.8);
  --red: #c8102e;
  --red-dark: #a00d25;
  --spruce-1: #173f3a;
  --spruce-4: #dbe7e3;

  --t-meta: 13px;
  --t-body: 16px;
  --t-lead: 20px;
  --t-h2: 32px;
  --t-hero: 56px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --wrap: 1200px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

[id] { scroll-margin-top: 80px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
button, input { font: inherit; color: inherit; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

/* ---------- Type ---------- */

h1 {
  font-size: var(--t-hero);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--t-lead);
  font-weight: 600;
  line-height: 1.25;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--ink-2);
}

.kicker,
.meta,
th {
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.muted { color: var(--ink-2); }

.small {
  font-size: var(--t-meta);
  line-height: 1.5;
  color: var(--ink-3);
}

.small a { text-underline-offset: 2px; }

.more {
  display: inline-block;
  font-weight: 600;
  text-underline-offset: 4px;
}

.more:hover { color: var(--red); }

/* ---------- Flag strip and header ---------- */

.strip {
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-meta);
  font-weight: 600;
  padding: var(--s-2) 0;
}

.strip .wrap {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.flag {
  width: 24px;
  height: 12px;
  flex: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: 72px;
}

.wordmark {
  font-size: var(--t-lead);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.wordmark .can { color: var(--red); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.nav a {
  text-decoration: none;
  color: var(--ink-2);
  transition: color 150ms ease-out;
}

.nav a:hover { color: var(--ink); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--s-5);
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

.btn:hover { background: var(--ink); color: var(--paper); }

.btn.primary {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.btn.primary:hover { background: var(--red-dark); border-color: var(--red-dark); }

.nav .btn { height: 40px; padding: 0 var(--s-4); color: var(--white); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ---------- Sections ---------- */

section { padding: var(--s-9) 0; }

.band-white { background: var(--white); }

.head { max-width: 720px; }
.kicker + h1, .kicker + h2 { margin-top: var(--s-3); }
h1 + .lead, h2 + .lead { margin-top: var(--s-4); }
.head + * { margin-top: var(--s-7); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-8);
  align-items: center;
}

.split.top { align-items: start; }

/* ---------- Hero ---------- */

.hero { padding: var(--s-8) 0 var(--s-9); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s-8);
  align-items: center;
}

.hero .lead { max-width: 28em; }
.hero .actions { margin-top: var(--s-6); }

.collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 2fr 1fr;
  gap: var(--s-3);
  aspect-ratio: 1 / 1;
}

.collage .wide { grid-column: 1 / -1; }
.collage figure { overflow: hidden; }

/* ---------- Stat band ---------- */

.stats {
  padding: var(--s-7) 0;
  background: var(--red);
  color: var(--white);
}

.stats .wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-7);
}

.stat strong {
  display: block;
  font-size: var(--t-hero);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.stat p { margin-top: var(--s-2); font-size: var(--t-lead); line-height: 1.25; }
.stat .small { margin-top: var(--s-2); font-size: var(--t-meta); line-height: 1.5; color: var(--white); opacity: 0.8; }

/* ---------- Industry tiles ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
}

.tile-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}

.tile-photo.big { grid-column: span 2; aspect-ratio: auto; }

.tile-photo .scrim {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-8) var(--s-5) var(--s-5);
  background: linear-gradient(to top, rgba(16, 28, 30, 0.92), rgba(16, 28, 30, 0));
}

.tile-photo p { margin-top: var(--s-1); }

/* ---------- Before and after ---------- */

.photo { aspect-ratio: 4 / 5; overflow: hidden; }
.photo.wide { aspect-ratio: 4 / 3; }

.shift { border-top: 1px solid var(--rule-strong); margin-top: var(--s-6); }

.shift li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
}

.shift .was { color: var(--ink-3); }
.shift .arrow { color: var(--red); font-weight: 600; }
.shift .now { font-size: var(--t-lead); font-weight: 600; line-height: 1.25; }

/* ---------- Steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6);
}

.step {
  padding-top: var(--s-4);
  border-top: 2px solid var(--ink);
}

.step .n {
  display: block;
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: 1.15;
  color: var(--red);
}

.step h3 { margin-top: var(--s-3); }
.step p { margin-top: var(--s-2); color: var(--ink-2); }

/* ---------- Card (one style) ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
  padding: var(--s-5);
}

.card h3 { margin-top: var(--s-4); }
.card p { margin-top: var(--s-2); color: var(--ink-2); }

.cards + .more { margin-top: var(--s-6); }

.tag {
  display: inline-block;
  padding: 2px var(--s-2);
  border: 1px solid var(--rule);
  font-size: var(--t-meta);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--ink-2);
}

.tag.open { border-color: var(--spruce-1); color: var(--spruce-1); background: var(--spruce-4); }
.tag.kind { border-color: var(--ink); color: var(--ink); }

/* ---------- Province picker ---------- */

.tilemap {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--s-1);
  max-width: 420px;
  margin-top: var(--s-6);
}

.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  aspect-ratio: 1;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--white);
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

.tile:hover { border-color: var(--ink); color: var(--ink); }

.tile[aria-pressed="true"] {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.tile.c1 { grid-column: 1; } .tile.c2 { grid-column: 2; } .tile.c3 { grid-column: 3; } .tile.c4 { grid-column: 4; }
.tile.c5 { grid-column: 5; } .tile.c6 { grid-column: 6; } .tile.c7 { grid-column: 7; } .tile.c8 { grid-column: 8; }
.tile.r1 { grid-row: 1; } .tile.r2 { grid-row: 2; } .tile.r3 { grid-row: 3; }

.results-head {
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule-strong);
}

.result {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
}

.result p { margin-top: var(--s-1); color: var(--ink-2); }
.results + .more { margin-top: var(--s-5); }

/* ---------- Note (one style) ---------- */

.note {
  margin-top: var(--s-5);
  padding-left: var(--s-4);
  border-left: 2px solid var(--red);
  color: var(--ink-2);
}

/* ---------- Table (one style) ---------- */

.table-scroll { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--rule-strong);
}

th, td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}

th:last-child, td:last-child { padding-right: 0; }
td strong { font-weight: 600; }
td .small { display: block; margin-top: var(--s-1); }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.chip {
  height: 32px;
  padding: 0 var(--s-3);
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: transparent;
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.chip:hover { border-color: var(--ink); color: var(--ink); }

.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--rule-strong); }
.faq details { border-bottom: 1px solid var(--rule); }

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  font-size: var(--t-lead);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; color: var(--ink-3); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: var(--s-5); max-width: 40em; color: var(--ink-2); }

/* ---------- Closing band and footer ---------- */

.closing {
  position: relative;
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}

.closing .bg {
  position: absolute;
  inset: 0;
  opacity: 0.35;
}

.closing .wrap { position: relative; }
.closing .lead { color: var(--white); }
.closing .actions { margin-top: var(--s-6); }

.site-footer {
  padding: var(--s-6) 0 var(--s-7);
  background: var(--ink);
  color: var(--paper);
}

.site-footer .wrap {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--s-8);
}

.site-footer .small { color: var(--paper); opacity: 0.7; }
.site-footer .small + .small { margin-top: var(--s-3); }
.site-footer .wordmark { color: var(--paper); }
.site-footer .wordmark + .small { margin-top: var(--s-3); }

.btn:focus-visible,
.chip:focus-visible,
.tile:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  :root { --t-hero: 36px; --t-h2: 26px; --t-lead: 18px; }
  section { padding: var(--s-8) 0; }
  .hero { padding: var(--s-7) 0 var(--s-8); }
  .hero-grid, .split, .site-footer .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .nav a:not(.btn) { display: none; }
  .stats .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-photo.big { aspect-ratio: 4 / 3; }
  .steps, .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo { aspect-ratio: 4 / 3; }
  .wrap { padding: 0 var(--s-4); }
  .table-scroll table { min-width: 880px; }
}

@media (max-width: 560px) {
  .tiles, .steps, .cards { grid-template-columns: minmax(0, 1fr); }
  .tile-photo.big { grid-column: auto; }
  .shift li { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .shift .arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Program and province pages ---------- */

a { text-underline-offset: 2px; }

.crumbs { margin-bottom: var(--s-4); }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

.stack > * + * { margin-top: var(--s-4); }
.stack > h2 { margin-top: var(--s-7); }
.stack > h2:first-child { margin-top: 0; }

table.facts th { width: 200px; }
tr[hidden] { display: none; }

.work { border-top: 1px solid var(--rule-strong); }

.work li {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr);
  gap: var(--s-5);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
}

.work p { color: var(--ink-2); }

.provinces { border-top: 1px solid var(--rule-strong); }

.provinces a {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
  text-decoration: none;
}

.provinces a:hover { color: var(--red); }
.provinces a span:last-child { font-weight: 400; color: var(--ink-3); }

@media (max-width: 900px) {
  .work li { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  table.facts th { width: 120px; }
}

/* ---------- Long-form text (privacy) ---------- */

.prose { max-width: 40em; }
.prose h3 { margin-top: var(--s-6); }
.prose h3:first-child { margin-top: 0; }
.prose p { margin-top: var(--s-2); color: var(--ink-2); }

/* Cookie choice bar. Fixed to the bottom, ink on paper, same button styles. */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--white);
  border-top: 1px solid var(--rule-strong);
  padding: var(--s-4) 0;
}
.consent .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.consent .small { max-width: 640px; color: var(--ink-2); }
.consent[hidden] { display: none; }

/* Contact form. Same type scale and spacing; fields are ink on white, square. */
.lead-form { max-width: 720px; display: grid; gap: var(--s-6); }
.lead-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.lead-form legend { font-size: var(--t-lead); font-weight: 600; margin-bottom: var(--s-3); padding: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); font-size: var(--t-meta); font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--t-body); font-weight: 400; color: var(--ink);
  background: var(--white); border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: var(--s-3); width: 100%; box-sizing: border-box;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-2) var(--s-4); }
.choices label { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-body); }
.choices input { width: 18px; height: 18px; accent-color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status:empty { display: none; }
.lead-form .btn[disabled] { opacity: 0.6; cursor: wait; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

/* Industry tiles link to their pages in drafts. */
a.tile-photo { display: block; color: var(--white); text-decoration: none; }
a.tile-photo img { transition: opacity 150ms; }
a.tile-photo:hover img { opacity: 0.85; }
a.tile-photo:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.card p strong { color: var(--ink); }
.note.example { margin-top: var(--s-6); }
.work h3 .tags { display: inline-flex; margin: 0 0 0 var(--s-2); vertical-align: middle; }

.about-list { margin-top: var(--s-5); padding-left: 1.25em; display: grid; gap: var(--s-2); color: var(--ink-2); }
.about-note { margin-top: var(--s-5); }
.head .lead + .actions { margin-top: var(--s-5); }