:root{
  --bg: #f5f5f5;
  --surface: #ffffff;

  --text: #1b1b1b;
  --muted: #616161;

  --border: #e5e5e5;

  --primary: #0067b8;
  --primary-2: #005a9e;

  --radius: 12px;
  --max: 1200px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", SegoeUI, system-ui, Arial, sans-serif;

  /* consistent sizing across pages */
  --header-h: 68px;
  --hero-h: 400px;

  /* ---- design system v2: shared by the rebuilt service pages ---- */
  --ink: #12161c;
  --mut: #5c6470;
  --faint: #8b929c;
  --paper: #ffffff;
  --wash: #f6f7f9;
  --line: #e6e8ec;
  --navy: #08243f;

  --ok: #0f7a45;
  --amber: #b4750a;
  --danger: #b3261e;

  --btn-r: 999px;
  --r: 18px;
  --r-lg: 26px;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", SegoeUI, system-ui, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height:1.6;
}

/* Default links (content links) */
main a{ color: var(--primary); text-decoration:none; }
main a:hover{ text-decoration:underline; text-underline-offset:3px; }

img{ max-width:100%; height:auto; display:block; }

/* Standard container helpers */
.page-wrap{ max-width: var(--max); margin: 0 auto; padding: 18px 16px 40px; }
.section{ padding: 22px 0; }

/* Buttons (used across site) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:10px; /* matches your header look */
  border:1px solid #d0d0d0;
  background:#fff;
  font-weight:600;
  white-space:nowrap;
  color: var(--text);
}
.btn:hover{
  background:#f7f7f7;
  border-color:#c2c2c2;
  text-decoration:none;
}

/* Alias for your header markup: class="btn btn-primary" */
.btn-primary{
  background: var(--primary);
  border-color: var(--primary);
  color:#fff;
}
.btn-primary:hover{
  background: var(--primary-2);
  border-color: var(--primary-2);
}

/* Book button label swap (you already use this in header.php) */
.btn-book .short{ display:none; }
@media (max-width: 420px){
  .btn-book{ padding:10px 12px; }
  .btn-book .full{ display:none; }
  .btn-book .short{ display:inline; }
}

/* Header sizing consistency (only applies if your header uses these classes) */
.site-header, .chk-header{ min-height: var(--header-h); }
.site-header .header-inner,
.chk-header .header-inner,
.site-header .nav-inner,
.chk-header .nav-inner{
  min-height: var(--header-h);
  display:flex;
  align-items:center;
}

/* ---------------------------------------------------------------------
   Shared hero (one hero image per page).

   SCOPED with :has() so it only styles the legacy photo-hero markup
   (.hero > .hero-media). Without this, any page using class="hero" as a
   plain layout wrapper inherited a border, radius and 56px shadow it did
   not ask for — a collision that bit three separate rebuilds.

   If an old page loses its hero frame after this change, either add a
   .hero-media wrapper to its image or drop the :has() below.
   --------------------------------------------------------------------- */
.hero:has(.hero-media){
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
  box-shadow: 0 16px 56px rgba(0,0,0,.12);
}
.hero-media{ position:relative; }
.hero-media img{
  width:100%;
  height: var(--hero-h);
  max-height: var(--hero-h);
  object-fit:cover;
  background:#e9e9e9;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(7,18,30,.74) 0%, rgba(7,18,30,.40) 42%, rgba(7,18,30,.10) 70%, rgba(7,18,30,0) 100%),
    radial-gradient(700px 360px at 18% 45%, rgba(0,103,184,.18), rgba(0,103,184,0) 65%);
  display:flex;
  align-items:flex-end;
}
.hero-content{
  padding:18px;
  max-width:860px;
  color:#fff;
}
.hero-kicker{
  display:inline-flex;
  padding:7px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.2px;
  backdrop-filter: blur(6px);
}
.hero-title{
  margin-top:12px;
  font-weight:950;
  letter-spacing:-.6px;
  font-size: clamp(24px, 3vw, 40px);
  line-height:1.1;
}
.hero-text{
  margin-top:10px;
  color: rgba(255,255,255,.92);
  font-size: 15.5px;
  max-width: 70ch;
}
.hero-actions{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.hero-actions .btn{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.14);
  color:#fff;
}
.hero-actions .btn:hover{ background: rgba(255,255,255,.20); }

/* hero size is consistent by breakpoint */
/* CHK-HEROFIX 2026 : this base rule was trapped inside the 900px media query, so on
   desktop the hero had no max-width and no side padding (the H1 sat flush at x:0).
   1180 - (2 x 22) = 1136 inner width, matching .chk-qwrap / .svcx / .sm-in. */
.chk-hero-in{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:56px 22px 62px;box-sizing:border-box;}
@media (max-width:900px){
  .chk-hero-in{padding:70px 22px 74px;min-height:var(--chk-hero-h,360px);display:flex;flex-direction:column;justify-content:center;}
  .chk-hero-copy{max-width:100%;}
  .chk-hero-art{top:auto;bottom:-10px;right:-8px;transform:none;opacity:.16;}
  .chk-hero-art svg{width:170px;max-width:44vw;}
  .chk-hero h1{font-size:clamp(27px,7vw,36px);}
}
@media (max-width: 520px){
  :root{ --hero-h: 260px; }
}

/* ============================================================
   CHK-COMPONENTS 2026 : shared hero + q-card grid + icon system
   (site-wide, injected via theme.php heredoc)
   ============================================================ */
:root{
  --chk-blue:#0067b8; --chk-purple:#6d28d9; --chk-teal:#0d9488;
  --chk-green:#15803d; --chk-amber:#b45309; --chk-red:#be123c;
  --chk-cardbg:#f5f5f7; --chk-ink:#1d1d1f; --chk-mut:#5c6470; --chk-line:#e6e8ec;
}

/* ---- HERO : never splits, image locked beside copy ---- */
.chk-hero{position:relative;border:0;outline:0;margin:0;padding:0;background:transparent;isolation:isolate;}
.chk-hero-copy{position:relative;z-index:2;max-width:640px;}
.chk-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--chk-accent,var(--chk-blue));margin:0 0 14px}
.chk-hero-eyebrow .chk-i{width:16px;height:16px;flex:0 0 auto}
.chk-hero h1{font-size:clamp(32px,4.6vw,50px);font-weight:700;letter-spacing:-.02em;line-height:1.06;color:var(--chk-ink);margin:0 0 16px}
.chk-hero h1 em{font-style:normal;color:var(--chk-accent,var(--chk-blue))}
.chk-hero-lede{font-size:18px;line-height:1.55;color:var(--chk-mut);max-width:560px;margin:0}
.chk-hero-art{position:absolute;top:50%;right:2%;transform:translateY(-50%);z-index:1;pointer-events:none;opacity:.92;}
.chk-hero-art svg{width:300px;height:auto;max-width:38vw;display:block;}
/* legacy mobile hero block removed - unified hero handles mobile */

/* ---- Q-CARD GRID (shared, homepage style) ---- */
.chk-qwrap{max-width:1180px;margin:0 auto;padding:0 22px}
.chk-qsec{padding:34px 0 6px}
.chk-qsec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-top:1px solid var(--chk-line);padding-top:24px;margin-bottom:20px}
.chk-qsec-head h2{font-size:23px;font-weight:700;letter-spacing:-.01em;color:var(--chk-ink);margin:0;display:flex;align-items:center;gap:10px}
.chk-qsec-head h2 .chk-i{width:22px;height:22px;color:var(--chk-accent,var(--chk-blue));flex:0 0 auto}
.chk-qsec-head p{font-size:14.5px;color:var(--chk-mut);margin:0;max-width:520px;text-align:right}
.chk-qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.chk-qcard{position:relative;display:flex;flex-direction:column;background:var(--chk-cardbg);border:1px solid transparent;border-radius:20px;padding:24px 24px 20px;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;min-height:150px}
.chk-qcard:hover{background:#fff;border-color:var(--chk-line);box-shadow:0 12px 34px rgba(18,22,28,.09);transform:translateY(-3px)}
.chk-qcard .chk-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--chk-accent,var(--chk-blue)) 12%,#fff);color:var(--chk-accent,var(--chk-blue));margin-bottom:14px}
.chk-qcard .chk-ic .chk-i{width:19px;height:19px}
.chk-qcard .bk{font-size:11.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--chk-accent,var(--chk-blue));margin:0 0 8px}
.chk-qcard .bt{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--chk-ink);line-height:1.2;margin:0 0 8px}
.chk-qcard .bd{font-size:14.5px;line-height:1.5;color:var(--chk-mut);margin:0 0 16px;flex:1}
.chk-qcard .bl{font-size:14.5px;font-weight:600;color:var(--chk-accent,var(--chk-blue));display:inline-flex;align-items:center;gap:6px;margin-top:auto}
.chk-qcard .bl .chev{transition:transform .18s ease}
.chk-qcard:hover .bl .chev{transform:translateX(4px)}
.chk-i{display:inline-block;vertical-align:middle;stroke:currentColor;fill:none}
/* accent helpers */
.acc-blue{--chk-accent:var(--chk-blue)} .acc-purple{--chk-accent:var(--chk-purple)}
.acc-teal{--chk-accent:var(--chk-teal)} .acc-green{--chk-accent:var(--chk-green)}
.acc-amber{--chk-accent:var(--chk-amber)} .acc-red{--chk-accent:var(--chk-red)}
@media(max-width:900px){.chk-qgrid{grid-template-columns:repeat(2,1fr)}.chk-qsec-head{flex-direction:column;align-items:flex-start;gap:6px}.chk-qsec-head p{text-align:left}}
@media(max-width:560px){.chk-qgrid{grid-template-columns:1fr}}



/* CHK-NAV-UNDERLINE : animated underline on top-level header tabs */
.dropdown > .dropdown-toggle, .nav > a{position:relative}
.dropdown > .dropdown-toggle::after, .nav > a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;
  background:var(--chk-blue,#0067b8);border-radius:2px;
  transform:scaleX(0);transform-origin:left center;transition:transform .22s ease;pointer-events:none;
}
.dropdown > .dropdown-toggle:hover::after, .nav > a:hover::after,
.dropdown:hover > .dropdown-toggle::after{transform:scaleX(1)}

/* CHK-NOUNDERLINE : cards + hero content never underline on hover */
main a.chk-qcard:hover,main a.chk-qcard:hover *,
.svx-grid a:hover,.svx-grid a:hover *,
.chk-qcard:hover,.chk-qcard:hover *,
.chk-qcard:hover .chk-qtitle,
.chk-hero-copy a:hover{text-decoration:none !important;}

/* CHK-MOBILE2UP : side-by-side card grid on phones, site-wide */
@media (max-width:560px){
  .chk-qgrid,.svx-grid,.bento{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important;}
  /* bento children carry span-2/span-3 from the 6-col desktop grid; reset so 2-up actually applies */
  .bento > .b{grid-column:span 1 !important;}
  .bento > .b.lg{grid-column:span 2 !important;}
  .chk-qcard,.svx-grid .svcx-card,.bento .b{padding:14px 13px 15px !important;border-radius:14px !important;}
  .chk-qcard .chk-ic,.svx-grid .svcx-card .chk-ic{width:30px;height:30px;border-radius:8px;margin-bottom:8px;}
  .chk-qcard .chk-ic svg,.svx-grid .svcx-card .chk-ic svg{width:16px;height:16px;}
  .chk-qcard .bk,.svx-grid .svcx-card .bk{font-size:9.5px !important;letter-spacing:.06em;margin-bottom:5px;}
  .chk-qcard .bt,.svx-grid .svcx-card .bt{font-size:14.5px !important;line-height:1.25;margin-bottom:5px;}
  .chk-qcard .bd,.svx-grid .svcx-card .bd{font-size:12.5px !important;line-height:1.4;}
  .chk-qcard .bl,.svx-grid .svcx-card .bl{font-size:12.5px !important;margin-top:9px;}
  .bento .bt{font-size:16px !important;}
  .bento .bd{font-size:12.5px !important;}
}
/* very small phones : keep 2-up but tighten further */
@media (max-width:380px){
  .chk-qgrid,.svx-grid,.bento{gap:8px !important;}
  .chk-qcard,.svx-grid .svcx-card,.bento .b{padding:12px 11px 13px !important;}
  .chk-qcard .bt,.svx-grid .svcx-card .bt{font-size:13.5px !important;}
  .chk-qcard .bd,.svx-grid .svcx-card .bd{font-size:12px !important;}
}

/* CHK-PREMIUM : elevated surfaces, motion, focus */
.chk-qcard,.svx-grid .svcx-card{transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .22s ease;will-change:transform;}
.chk-qcard:hover,.svx-grid .svcx-card:hover{transform:translateY(-3px);}
.chk-qcard:focus-visible,.svx-grid .svcx-card:focus-visible{outline:2px solid var(--chk-accent,#0067b8);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){
  .chk-qcard,.svx-grid .svcx-card{transition:none;}
  .chk-qcard:hover,.svx-grid .svcx-card:hover{transform:none;}
}
/* END-CHK-MOBILE2UP */

/* CHK-HEROBLEED : borderless full-width hero band */
.chk-hero::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);
  width:100vw;z-index:0;pointer-events:none;border:0;
  background:linear-gradient(160deg,#fbfcfe 0%,#f2f6fb 55%,#e9f0f8 100%);}
.chk-hero::after{content:"";position:absolute;top:-140px;right:calc(50% - 50vw + 4%);
  width:420px;height:420px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(216,6,33,.07) 0%,rgba(216,6,33,0) 68%);}
.chk-hero-art{z-index:1;}
@media (max-width:900px){ .chk-hero::after{display:none;} }
/* END-CHK-HEROBLEED */

/* ===================================================================
   CHK shared components v3 — breadcrumb, sticky page nav, tabs,
   lead form. Defined once here so every page inherits one environment.
   =================================================================== */

/* photo-hero scrim must never leak onto plain layout wrappers */
.hero-overlay{ background:none; }
.hero-media > .hero-overlay,.hero:has(.hero-media) .hero-overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  background:
    linear-gradient(90deg, rgba(7,18,30,.74) 0%, rgba(7,18,30,.40) 42%, rgba(7,18,30,.10) 70%, rgba(7,18,30,0) 100%),
    radial-gradient(700px 360px at 18% 45%, rgba(0,103,184,.18), rgba(0,103,184,0) 65%);
}

/* ---------- breadcrumb ---------- */
.chk-bc{ max-width:var(--max); margin:0 auto; padding:14px 18px 2px; }
.chk-bc ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:13px; line-height:1.45; }
.chk-bc li{ display:flex; align-items:center; gap:7px; color:var(--mut); }
.chk-bc li+li::before{ content:''; width:5px; height:5px; border-top:1.5px solid #b9bec7; border-right:1.5px solid #b9bec7; transform:rotate(45deg); flex:0 0 auto; }
.chk-bc a{ color:var(--mut); text-decoration:none; border-radius:4px; }
.chk-bc a:hover{ color:var(--primary); text-decoration:underline; }
.chk-bc a:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.chk-bc [aria-current="page"]{ color:var(--ink); font-weight:600; }

/* ---------- sticky in-page nav (site tab language) ---------- */
.chk-pagenav{ position:sticky; top:var(--header-h); z-index:40; background:rgba(255,255,255,.86); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); }
.chk-pagenav-in{ max-width:var(--max); margin:0 auto; padding:0 18px; display:flex; align-items:center; gap:clamp(14px,2.4vw,32px); overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.chk-pagenav-in::-webkit-scrollbar{ display:none; }
.chk-pagenav a{ position:relative; flex:0 0 auto; padding:14px 2px; font-size:14.5px; font-weight:500; letter-spacing:-.022em; color:var(--mut); text-decoration:none; white-space:nowrap; transition:color .2s; }
.chk-pagenav a:hover{ color:var(--ink); text-decoration:none; }
.chk-pagenav a:focus-visible{ outline:2px solid var(--chk-accent,var(--primary)); outline-offset:3px; border-radius:4px; }
.chk-pagenav a::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--chk-accent,var(--primary)); transform:scaleX(0); transition:transform .3s cubic-bezier(.22,1,.36,1); }
.chk-pagenav a[aria-current="true"]{ color:var(--ink); font-weight:600; }
.chk-pagenav a[aria-current="true"]::after{ transform:scaleX(1); }
.chk-pagenav .chk-pn-cta{ margin-left:auto; padding:8px 17px; border-radius:999px; background:var(--chk-accent,var(--primary)); color:#fff; font-weight:600; font-size:13.5px; }
.chk-pagenav .chk-pn-cta::after{ display:none; }
.chk-pagenav .chk-pn-cta:hover{ color:#fff; filter:brightness(.93); }
@media (max-width:820px){ .chk-pagenav .chk-pn-cta{ display:none; } }
@media print{ .chk-pagenav{ display:none; } }

/* ---------- reusable tabs ---------- */
.chk-tabwrap{ margin-top:clamp(18px,2.4vw,28px); }
.chk-tabs{ position:relative; display:flex; justify-content:center; flex-wrap:wrap; gap:0 clamp(14px,3vw,40px); border-bottom:1px solid var(--line); }
.chk-tabs button{ appearance:none; border:0; background:none; font:inherit; cursor:pointer; position:relative; padding:0 2px 13px; font-size:clamp(14.5px,1.7vw,17.5px); font-weight:500; letter-spacing:-.024em; color:var(--mut); transition:color .2s; white-space:nowrap; }
.chk-tabs button:hover{ color:var(--ink); }
.chk-tabs button[aria-selected="true"]{ color:var(--ink); font-weight:600; }
.chk-tabs button::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--chk-accent,var(--primary)); transform:scaleX(0); transition:transform .3s cubic-bezier(.22,1,.36,1); }
.chk-tabs button[aria-selected="true"]::after{ transform:scaleX(1); }
.chk-tabs button:focus-visible{ outline:2px solid var(--chk-accent,var(--primary)); outline-offset:4px; border-radius:4px; }
.chk-tabpanels{ padding-top:clamp(20px,3vw,32px); }
.chk-tabpanel[hidden]{ display:block !important; content-visibility:hidden; }
@media (max-width:640px){
  .chk-tabs{ justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:0 22px; }
  .chk-tabs::-webkit-scrollbar{ display:none; }
}

/* ---------- shared conversion form (chk_lead_form) ---------- */
.chk-lead{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-lg,20px); background:linear-gradient(180deg,#ffffff,#fafbfd); box-shadow:0 18px 48px rgba(13,27,42,.07); padding:clamp(24px,3.4vw,42px); display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(24px,3.6vw,46px); align-items:start; }
@media (max-width:900px){ .chk-lead{ grid-template-columns:1fr; } }
.chk-lead::before{ content:''; position:absolute; inset:0 auto 0 0; width:4px; background:var(--chk-accent,var(--primary)); }
.chk-lead .cl-eyebrow{ display:inline-flex; align-items:center; gap:8px; margin:0 0 10px; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--chk-accent,var(--primary)); }
.chk-lead .cl-eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.chk-lead h2,.chk-lead h3{ margin:0 0 10px; font-size:clamp(22px,2.7vw,31px); line-height:1.16; letter-spacing:-.03em; color:var(--ink); font-weight:700; }
.chk-lead .cl-lede{ margin:0 0 18px; color:var(--mut); font-size:15.5px; line-height:1.6; max-width:46ch; }
.chk-lead .cl-points{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.chk-lead .cl-points li{ position:relative; padding-left:26px; font-size:14.5px; line-height:1.55; color:var(--ink); }
.chk-lead .cl-points li::before{ content:''; position:absolute; left:0; top:4px; width:16px; height:16px; border-radius:50%; background:var(--chk-accent,var(--primary)); opacity:.14; }
.chk-lead .cl-points li::after{ content:''; position:absolute; left:5px; top:8px; width:5px; height:8px; border-right:2px solid var(--chk-accent,var(--primary)); border-bottom:2px solid var(--chk-accent,var(--primary)); transform:rotate(42deg); }
.chk-lead .cl-trust{ margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line); font-size:12.5px; line-height:1.55; color:var(--mut); }
.chk-lead form{ display:grid; gap:13px; }
.chk-lead .cl-row{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
@media (max-width:520px){ .chk-lead .cl-row{ grid-template-columns:1fr; } }
.chk-lead label{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.01em; color:var(--ink); margin:0 0 6px; }
.chk-lead label .req{ color:#c0392b; }
.chk-lead input[type=text],.chk-lead input[type=email],.chk-lead input[type=tel],.chk-lead select,.chk-lead textarea{ width:100%; font:inherit; font-size:15px; color:var(--ink); background:#fff; border:1px solid #dfe3ea; border-radius:10px; padding:12px 13px; transition:border-color .18s, box-shadow .18s; }
.chk-lead textarea{ min-height:96px; resize:vertical; }
.chk-lead input:focus,.chk-lead select:focus,.chk-lead textarea:focus{ outline:none; border-color:var(--chk-accent,var(--primary)); box-shadow:0 0 0 3px color-mix(in srgb, var(--chk-accent,var(--primary)) 18%, transparent); }
.chk-lead .cl-consent{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; font-weight:400; line-height:1.5; color:var(--mut); }
.chk-lead .cl-consent input{ margin-top:3px; flex:0 0 auto; accent-color:var(--chk-accent,var(--primary)); }
.chk-lead .cl-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.chk-lead .cl-submit{ appearance:none; border:0; cursor:pointer; font:inherit; font-weight:700; font-size:15px; color:#fff; background:var(--chk-accent,var(--primary)); border-radius:999px; padding:13px 28px; min-height:48px; transition:filter .18s, transform .18s; }
.chk-lead .cl-submit:hover{ filter:brightness(.93); }
.chk-lead .cl-submit:active{ transform:translateY(1px); }
.chk-lead .cl-submit[disabled]{ opacity:.6; cursor:progress; }
.chk-lead .cl-msg{ font-size:13.5px; font-weight:600; }
.chk-lead .cl-msg.err{ color:#c0392b; }
.chk-lead .cl-msg.ok{ color:#1e7e34; }
.chk-lead .cl-alt{ margin:2px 0 0; font-size:12.5px; color:var(--mut); }
.chk-lead .cl-alt a{ color:var(--chk-accent,var(--primary)); font-weight:600; text-decoration:none; }
.chk-lead .cl-alt a:hover{ text-decoration:underline; }
.chk-lead .cl-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- dark mode ----------------------------------------------------
   The card ground was hard-coded to a white gradient while every text token
   it uses (--ink, --mut, --line, --paper) flips to a light value in dark
   mode. The result was pale copy on a white card and black input wells on
   that same white card. Give the card a dark ground so the tokens land the
   way they were designed to, and restate the two status colours, which are
   too dark to read once the card behind them is dark.
   ---------------------------------------------------------------------- */
html[data-theme="dark"] .chk-lead{
  background:linear-gradient(180deg,#171d25,#12171e);
  border-color:#2b3440;
  box-shadow:0 18px 48px rgba(0,0,0,.55);
}
html[data-theme="dark"] .chk-lead label .req{ color:#ff8f86; }
html[data-theme="dark"] .chk-lead .cl-msg.err{ color:#ff8f86; }
html[data-theme="dark"] .chk-lead .cl-msg.ok{ color:#57cf90; }
html[data-theme="dark"] .chk-ctaband{
  background:linear-gradient(180deg,var(--bg),#0d1117);
}


/* ---------- site-wide conversion band (pre-footer) ---------- */
.chk-ctaband{ background:linear-gradient(180deg,var(--bg),#eef1f5); border-top:1px solid var(--line); padding:clamp(38px,5vw,68px) 0; }
.chk-ctaband-in{ max-width:var(--max); margin:0 auto; padding:0 18px; }
.chk-ctaband .chk-lead{ box-shadow:0 22px 60px rgba(13,27,42,.09); }
@media print{ .chk-ctaband{ display:none; } }

/* ============================================================
   CHK-HEROCARD-2026 : unified premium hero card. Matches the
   bespoke hero used on work_permit / iec / citizenship so every
   page in the site reads as one environment.
   ============================================================ */
.chk-heroband{ background:#f5f5f5; padding:clamp(14px,2.4vw,26px) 0 clamp(6px,1.6vw,14px); }
.chk-heroband-in{ max-width:1200px; margin:0 auto; padding:0 clamp(18px,5vw,22px); box-sizing:border-box; }
.chk-heroband .chk-hero{ position:relative; isolation:isolate; overflow:hidden; border-radius:24px;
  border:1px solid rgba(15,23,42,.07);
  background:linear-gradient(152deg,#ffffff 0%,#f7fafd 46%,#eef4fb 100%);
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 18px 46px -28px rgba(15,23,42,.30); }
.chk-heroband .chk-hero::before{ content:""; position:absolute; left:-12%; top:auto; bottom:-40%; right:auto;
  width:460px; height:460px; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--chk-accent,#0067b8) 12%, transparent) 0%, transparent 70%); }
.chk-heroband .chk-hero::after{ content:""; position:absolute; top:-160px; right:-90px; left:auto; bottom:auto;
  width:420px; height:420px; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--chk-accent,#0067b8) 10%, transparent) 0%, transparent 68%); }
.chk-heroband .chk-hero-in{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) 320px;
  align-items:center; gap:clamp(20px,3vw,44px);
  max-width:none; margin:0; padding:clamp(34px,4.6vw,60px) clamp(22px,4vw,54px); box-sizing:border-box; }
.chk-heroband .chk-hero-copy{ max-width:660px; min-width:0; }
.chk-heroband .chk-hero h1{ font-size:clamp(30px,4.3vw,48px); line-height:1.07; margin:0 0 16px; text-wrap:balance; }
.chk-heroband .chk-hero-lede{ font-size:clamp(15.5px,1.35vw,18px); line-height:1.6; max-width:60ch; margin:0; text-wrap:pretty; }
.chk-heroband .chk-hero-art{ position:static; transform:none; opacity:1; z-index:1; justify-self:end; top:auto; right:auto; }
.chk-heroband .chk-hero-art svg{ width:100%; max-width:320px; height:auto; display:block; }
.chk-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 0; }
.chk-hbtn{ display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:999px;
  font-size:15px; font-weight:600; line-height:1; text-decoration:none; border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.chk-hbtn-primary{ background:var(--chk-accent,#0067b8); box-shadow:0 10px 24px -12px rgba(15,23,42,.55); }
.chk-hbtn-soft{ background:#fff; border-color:rgba(15,23,42,.12); }
.chk-hbtn:hover{ transform:translateY(-1px); }
.chk-hbtn-soft:hover{ border-color:color-mix(in srgb, var(--chk-accent,#0067b8) 40%, rgba(15,23,42,.12)); }
.chk-hbtn .chk-i{ width:17px; height:17px; }
.chk-hero .chk-hbtn-primary, .chk-heroband .chk-hbtn-primary{ color:#fff; text-decoration:none; }
.chk-hero .chk-hbtn-soft, .chk-heroband .chk-hbtn-soft{ color:var(--chk-ink,#1d1d1f); text-decoration:none; }
.chk-hero-chips{ display:flex; flex-wrap:wrap; gap:9px; margin:20px 0 0; padding:0; list-style:none; }
.chk-hero-chips li{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,.85); border:1px solid rgba(15,23,42,.09); font-size:12.8px; font-weight:500; }
.chk-hero .chk-hero-chips li, .chk-heroband .chk-hero-chips li{ color:var(--chk-mut,#5c6470); }
.chk-hero-chips li .chk-i{ width:14px; height:14px; flex:0 0 auto; color:var(--chk-accent,#0067b8); }
@media (max-width:900px){
  .chk-heroband .chk-hero-in{ grid-template-columns:1fr; padding:clamp(28px,6vw,40px) clamp(20px,5vw,30px); min-height:0; }
  .chk-heroband .chk-hero-copy{ max-width:100%; }
  .chk-heroband .chk-hero-art{ order:-1; justify-self:start; opacity:.95; bottom:auto; }
  .chk-heroband .chk-hero-art svg{ width:150px; max-width:44vw; }
  .chk-heroband .chk-hero::after{ display:none; }
  .chk-heroband .chk-hero h1{ font-size:clamp(27px,7vw,36px); }
}
@media (max-width:520px){
  .chk-heroband .chk-hero{ border-radius:18px; }
  .chk-hbtn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){ .chk-hbtn:hover{ transform:none; } }
/* END-CHK-HEROCARD-2026 */

/* anchor targets must clear the sticky header AND the sticky page nav */
body:has(.chk-pagenav) section[id],
body:has(.chk-pagenav) [id].sec,
body:has(.chk-pagenav) .chk-tabpanel[id]{ scroll-margin-top: calc(var(--header-h) + 64px); }


/* ==================================================================
   CHK APP SHELL — mobile ("feels like a native app") layer.  2026-08
   Scoped to <=900px so desktop is untouched.  Override-safe: the
   grid rules use !important because per-page <style> blocks load
   after this sheet.
   ================================================================== */

/* ---- 1. platform hygiene ---- */
@media (max-width:900px){
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body{ overscroll-behavior-y:contain; }
  a,button,summary,[role="button"],[role="tab"]{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
  /* 16px minimum stops iOS Safari zooming the page on focus */
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{ font-size:16px !important; }
  /* every interactive row clears the 44px Apple/WCAG target */
  .chk-appbar a,.chk-lead button,.chk-lead select,.chk-lead input,.chk-lead textarea{ min-height:46px; }
  /* horizontal strips scroll like an app, without a visible bar */
  .chk-scroll-x,nav.chk-crumbs,.chk-tabs,.tabs{ -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .chk-scroll-x::-webkit-scrollbar,.chk-tabs::-webkit-scrollbar,.tabs::-webkit-scrollbar{ display:none; }
}

/* ---- 2. the 2-up card grid ----
   Columns are decided at runtime by gridApply() in chk_theme_js(), which
   only promotes a grid to 2-up when its cards are short enough to read at
   ~165px. Everything below simply dresses whatever it promotes. */
@media (max-width:900px){
  [data-chk-g2="2"]{ align-items:stretch; }
  [data-chk-g2="2"] > *{ min-width:0; }
  [data-chk-g2="2"] h2{ font-size:19px !important; line-height:1.18; }
  [data-chk-g2="2"] h3,[data-chk-g2="2"] h4{ font-size:15.5px !important; line-height:1.22; letter-spacing:-.012em; }
  [data-chk-g2="2"] p,[data-chk-g2="2"] li{ font-size:12.8px !important; line-height:1.48; }
  /* keep every promoted card tidy and near-equal height */
  [data-chk-g2="2"] > * > p,[data-chk-g2="2"] > * p.excerpt,[data-chk-g2="2"] > * .bd{
    display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
  }
  [data-chk-g2="2"] .v{ font-size:22px !important; }
  [data-chk-g2="2"] .k{ font-size:11px !important; line-height:1.35; }
  /* press feedback — the strongest "this is an app" cue */
  [data-chk-g2="2"] > *{ transition:transform .13s cubic-bezier(.2,.7,.3,1), box-shadow .13s ease; }
  [data-chk-g2="2"] > *:active{ transform:scale(.978); }
}

/* ---- 3. bottom app bar ---- */
.chk-appbar{ display:none; }
@media (max-width:900px){
  .chk-appbar{
    display:grid; grid-template-columns:repeat(5,1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:9990;
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:saturate(180%) blur(22px);
    backdrop-filter:saturate(180%) blur(22px);
    border-top:1px solid rgba(10,30,56,.08);
    box-shadow:0 -12px 34px rgba(8,26,48,.07);
    padding:6px max(6px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-right));
  }
  .chk-appbar a{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    text-decoration:none; color:#6b7280; border-radius:14px;
    font-size:10px; font-weight:650; letter-spacing:.02em; text-transform:none;
    transition:transform .13s ease, color .13s ease, background .13s ease;
  }
  .chk-appbar a svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .chk-appbar a:active{ transform:scale(.93); }
  .chk-appbar a:focus-visible{ outline:2px solid #0067b8; outline-offset:-2px; }
  .chk-appbar a[aria-current="page"]{ color:#0067b8; background:rgba(0,103,184,.08); }
  .chk-appbar .ab-book{ color:#fff; background:linear-gradient(180deg,#0a74c9,#005ba4); box-shadow:0 6px 16px rgba(0,91,164,.3); }
  .chk-appbar .ab-book[aria-current="page"]{ color:#fff; background:linear-gradient(180deg,#0a74c9,#005ba4); }
  .chk-appbar .ab-book svg{ stroke-width:1.9; }
  /* room for the bar, and lift the chat launcher above it */
  body{ padding-bottom:calc(60px + env(safe-area-inset-bottom)); }
  .float-stack{ bottom:calc(74px + env(safe-area-inset-bottom)) !important; }
  #chkChat{ bottom:calc(70px + env(safe-area-inset-bottom)) !important; max-height:calc(100vh - 150px); }
}
@media (max-width:900px) and (display-mode:standalone){
  /* installed to the home screen: drop the browser-y utility strip */
  .chk-appbar{ box-shadow:0 -14px 40px rgba(8,26,48,.1); }
}
@media (prefers-reduced-motion:reduce){
  .chk-appbar a,.chk-qgrid > *,.bento > *{ transition:none !important; }
}

/* ---- 4. mobile chrome polish ---- */
@media (max-width:900px){
  .chk-crumbs-band .chk-crumbs-in{ padding-top:7px; padding-bottom:7px; }
  nav.chk-crumbs{ font-size:11px; }
  .chk-lead{ border-radius:18px; }
  .chk-lead h2{ font-size:22px; line-height:1.15; letter-spacing:-.02em; }
  .chk-ctaband{ border-radius:20px 20px 0 0; }
  /* sheet-like section separation */
  main > section{ border-radius:0; }
  /* sticky primary action inside long lead forms */
  .chk-lead form button[type="submit"]{ width:100%; }
}


/* ---- 6. floating actions become app-style FABs ---- */
@media (max-width:900px){
  .float-stack .chat-launch{
    width:54px; height:54px; padding:0 !important; border-radius:50% !important;
    display:inline-flex; align-items:center; justify-content:center; gap:0 !important;
  }
  .float-stack .chat-launch .chat-text{ display:none !important; }
  .float-stack .chat-launch .chat-ico{ margin:0 !important; }
  .float-stack .chat-launch .chat-badge{ top:-2px; right:-2px; }
  .qd-tab{
    bottom:calc(78px + env(safe-area-inset-bottom)) !important;
    width:46px; height:46px; padding:0 !important; border-radius:50% !important;
    display:inline-flex !important; align-items:center; justify-content:center;
    font-size:0 !important; line-height:0 !important; gap:0 !important;
  }
  .qd-tab .qd-ic{ width:20px !important; height:20px !important; }
}


/* ================= HERO PHOTOGRAPHY (index.php register) ================= */
.chk-hero--photo .chk-hero-copy{max-width:min(100%,620px);}
.chk-hero-art.has-photo{opacity:1;pointer-events:auto;display:flex;align-items:center;justify-content:flex-end;}
.chk-hero--photo .chk-hero-copy h1{text-wrap:balance;}
.chk-hero-photo{width:clamp(240px,32vw,420px);max-width:100%;margin:0;position:relative;overflow:hidden;border-radius:22px;aspect-ratio:5/4;background:#e9eef4;box-shadow:0 1px 2px rgba(6,32,58,.06),0 22px 50px -20px rgba(6,32,58,.30);}
.chk-hero-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;}
.chk-hero-photo::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(6,32,58,.10);}
.chk-hero-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(210deg,rgba(0,103,184,.16),rgba(0,103,184,0) 58%),linear-gradient(0deg,rgba(6,32,58,.12),rgba(6,32,58,0) 42%);}
@keyframes chkKen{from{transform:scale(1.015)}to{transform:scale(1.085)}}
@media (prefers-reduced-motion: no-preference){.chk-hero-photo img{animation:chkKen 20s ease-in-out infinite alternate;}}
@media (max-width:900px){
  .chk-hero--photo .chk-hero-copy{max-width:100%;}
  .chk-hero-art.has-photo{position:static;transform:none;width:auto;right:auto;top:auto;margin:26px 0 0;opacity:1;justify-content:stretch;}
  .chk-hero--photo .chk-hero-photo{width:100%;}
  .chk-hero-photo{aspect-ratio:16/10;border-radius:18px;}
}
/* =============== END HERO PHOTOGRAPHY =============== */


/* ================= DARK MODE (opt-in via html[data-theme=dark]) ================= */
html[data-theme="dark"]{color-scheme:dark;}
html[data-theme="dark"]:root,html[data-theme="dark"]{
  --bg:#0d1117; --surface:#161b22; --text:#e6edf3; --muted:#9198a1;
  --border:rgba(240,246,252,.12); --primary:#2f81f7; --primary-2:#1f6feb;
  /* dark: complete the palette globally. :root defines these light values and
     page namespaces alias them locally, so any token left undefined here stays
     light in dark mode. Global scope means new pages inherit correct values. */
  --paper:#161b22; --wash:#161b22; --tint:#161b22; --canvas:#0d1117; --panel:#161b22;
  --ink:#e6edf3; --mut:#9198a1; --faint:#8b949e;
  --line:rgba(240,246,252,.12); --hair:rgba(240,246,252,.10);
}
html[data-theme="dark"] body{background:#0d1117;color:#e6edf3;}
/* per-namespace local alias remap (pages alias globals into their own scope) */
html[data-theme="dark"] .aphome,
html[data-theme="dark"] .hub,
html[data-theme="dark"] .ee,
html[data-theme="dark"] .oi,
html[data-theme="dark"] .prp,
html[data-theme="dark"] .prhub,
html[data-theme="dark"] .sp,
html[data-theme="dark"] .sv,
html[data-theme="dark"] .vv,
html[data-theme="dark"] .tre,
html[data-theme="dark"] .vre,
html[data-theme="dark"] .rr,
html[data-theme="dark"] .rcw,
html[data-theme="dark"] .lm,
html[data-theme="dark"] .cxp,
html[data-theme="dark"] .drp,
html[data-theme="dark"] .dsr,
html[data-theme="dark"] .fmw,
html[data-theme="dark"] .cx,
html[data-theme="dark"] .ab,
html[data-theme="dark"] .cz,
html[data-theme="dark"] .hc,
html[data-theme="dark"] .pg,
html[data-theme="dark"] .pnp,
html[data-theme="dark"] .ss,
html[data-theme="dark"] .cblog,
html[data-theme="dark"] .ds-wrap,
html[data-theme="dark"] .svx-grid,
html[data-theme="dark"] .v2-wrap,
html[data-theme="dark"] .svcx,
html[data-theme="dark"] .chk-footer{
  --canvas:#0d1117; --panel:#161b22; --wash:#161b22; --tint:#161b22;
  --ink:#e6edf3; --mut:#9198a1; --faint:#8b949e;
  --line:rgba(240,246,252,.12); --hair:rgba(240,246,252,.10);
  --line-2:rgba(240,246,252,.18); --band-2:#1b2129;
  --acc-soft:color-mix(in srgb,var(--acc,#2f81f7) 18%,#0d1117);
  --rt-job-bg:rgba(47,129,247,.12); --rt-job-line:rgba(47,129,247,.30);
  --rt-doc-bg:rgba(163,113,247,.12); --rt-doc-line:rgba(163,113,247,.30);
  --blue:#2f81f7; --blue-2:#1f6feb; --acc:#2f81f7;
  --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:0 10px 30px -12px rgba(0,0,0,.7);
}
html[data-theme="dark"] .lm{background:#0d1117 !important;}
/* dark: components that hardcode light hex literals rather than tokens, so the
   token remap above cannot reach them. Scoped narrowly and evidence-led: each
   selector below was measured as a real light slab in the dark-mode audit.
   Generic .btn and the white logo chip are deliberately excluded. */
html[data-theme="dark"] :is(.bfeature,.prow,.swidget,.ledger){background:#161b22 !important;color:#e6edf3 !important;border-color:rgba(240,246,252,.14) !important;}
html[data-theme="dark"] :is(.bchip,.fcat){background:#1b2129 !important;color:#e6edf3 !important;border-color:rgba(240,246,252,.14) !important;}
html[data-theme="dark"] :is(.cx,.cxp) section{background:#0d1117 !important;}
/* contact lead block: the page uses an ID selector with !important plus an inline
   style on the form, both of which outrank class-based overrides. */
html[data-theme="dark"] #cx-lead{background:#0d1117 !important;}
/* page CSS loads after theme.php, so equal-specificity !important ties go to
   the page. These selectors are deliberately one step more specific. */
html[data-theme="dark"] .cxp #cx-lead form{background:#161b22 !important;border-color:rgba(240,246,252,.14) !important;}
html[data-theme="dark"] .cxp #cx-lead :is(input,select,textarea){background:#0d1117 !important;color:#e6edf3 !important;border-color:rgba(240,246,252,.18) !important;}
/* updates hub: cards, tables and province rows hardcode light hex literals. */
html[data-theme="dark"] .prhub :is(.card,.tablewrap,.tbl,.prov){background:#161b22 !important;color:#e6edf3 !important;border-color:rgba(240,246,252,.14) !important;}
html[data-theme="dark"] .prhub p.nx{background:rgba(47,129,247,.12) !important;color:#e6edf3 !important;}
html[data-theme="dark"] .prhub :is(article.post,.filterbar,.pbtn,.fchip,.prog-pill){background:#161b22 !important;color:#e6edf3 !important;border-color:rgba(240,246,252,.14) !important;}
html[data-theme="dark"] .prhub #filters{background:#161b22 !important;color:#e6edf3 !important;}
/* dark: text contrast. Footer link colour and the spine step label were literal
   light-mode values, both below 3:1 on a dark surface. */
html[data-theme="dark"] .f-links a{color:#c9d1d9 !important;}
html[data-theme="dark"] .f-links a:hover{color:#ffffff !important;}
html[data-theme="dark"] .chk-spine-label{color:#79c0ff !important;}
/* Service tiles rendered white-on-white in dark mode (white background retained
   from light mode while the label colour is white). Fully illegible, so both are
   set explicitly here. */
html[data-theme="dark"] :is(a.svc,.svc){background:#161b22 !important;border-color:rgba(240,246,252,.14) !important;}
html[data-theme="dark"] :is(a.svc,.svc) :is(b,strong,.svc-t){color:#e6edf3 !important;}
/* breadcrumb current item kept the light-mode ink literal */
html[data-theme="dark"] .chk-cur{color:#e6edf3 !important;}
/* citizenship: figure labels, note copy and status badges use light-mode literals */
html[data-theme="dark"] .cz :is(div.k,p.ro-note){color:#c9d1d9 !important;}
html[data-theme="dark"] .cz :is(span.dtag,span.bdg){color:#ff7b72 !important;}
/* Provincial badges all resolve their colour from --acc2, which each province sets
   to its own dark hue. Rather than flattening them to one blue, lighten each page
   own accent so the provincial identity survives dark mode. Flat fallback first
   for browsers without color-mix. */
html[data-theme="dark"] .pnp :is(.pv-code,.eyebrow,.tag,.pcode){color:#a9c7ff !important;}
html[data-theme="dark"] .pnp :is(.pv-code,.eyebrow,.tag,.pcode){color:color-mix(in srgb,var(--acc2) 45%,#ffffff) !important;}
/* card + panel families that kept light-mode literals */
html[data-theme="dark"] :is(.tcard,.tnext,.tpill,.hcard,.stepper,.picker,.newsbar,.svx-filter,.inst,.inst-top,.thero,.dv,.card.up,.v2-card,.v2-hero,.gd,.rt,.fig,.risk,.cg,.swidget,.ledger,.cmp,.tblwrap,.tbl,.tablewrap){background:#161b22 !important;color:#e6edf3 !important;border-color:rgba(240,246,252,.14) !important;}
/* small chips and tags */
html[data-theme="dark"] :is(.chip,.kicker,.ds-chip,.ds-dw,.src,.rtag,.dbadge,.pill,.sb-live,.mx-badge,.fcat,.titem){background:rgba(240,246,252,.08) !important;color:#e6edf3 !important;border-color:rgba(240,246,252,.16) !important;}
html[data-theme="dark"] :is(.rtag,.dbadge,.mx-badge,.pill):is(.ok,.live,.is-live){color:#56d364 !important;}
html[data-theme="dark"] :is(.rtag,.dbadge,.mx-badge,.pill):is(.warn,.pending){color:#e3b341 !important;}
html[data-theme="dark"] :is(.rtag,.dbadge,.mx-badge,.pill):is(.bad,.emp,.closed){color:#ff7b72 !important;}
/* list rows and table rows that painted themselves white */
html[data-theme="dark"] :is(.oi,.prp) li{background:#161b22 !important;color:#e6edf3 !important;}
html[data-theme="dark"] .lm tr{background:#161b22 !important;}
/* callouts */
html[data-theme="dark"] .alert{background:rgba(248,81,73,.12) !important;color:#e6edf3 !important;border-color:rgba(248,81,73,.35) !important;}
/* toggle-style controls: leave the pressed state to the accent rule below */
html[data-theme="dark"] :is(.ds-mode,.ds-path,.ds-btn-w,.svx-pill,.orb-badge,.fbtn):not([aria-pressed="true"]):not([aria-selected="true"]){background:#161b22 !important;color:#e6edf3 !important;border-color:rgba(240,246,252,.14) !important;}
html[data-theme="dark"] :is(.ds-mode,.ds-path,.svx-pill):is([aria-pressed="true"],[aria-selected="true"]){background:rgba(47,129,247,.18) !important;color:#79c0ff !important;border-color:rgba(47,129,247,.45) !important;}
html[data-theme="dark"] :is(summary,label,.svx-trust-t,.svx-n,.ob-s){color:#e6edf3 !important;}
/* Primary CTAs kept a white background while their label colour followed the dark
   ink token, leaving white-on-white. Restore an accent fill with white text. */
html[data-theme="dark"] :is(.btn.primary,.btn-primary,.svx-btn-p,.chk-hbtn-primary,.btn-onacc,.btn-onblue){background:#1f6feb !important;color:#ffffff !important;border-color:#1f6feb !important;}
/* Provincial pages still carry light-mode colour literals rather than tokens.
   Headings and body copy get the dark ink; accent text keeps its provincial hue. */
html[data-theme="dark"] .pnp :is(h2,h3,.tlab,.tstat,b,strong){color:#e6edf3 !important;}
html[data-theme="dark"] .pnp :is(.hero-kick,.cl-eyebrow,a:not(.btn):not([class*="chk-"])){color:#a9c7ff !important;}
html[data-theme="dark"] .pnp :is(.hero-kick,.cl-eyebrow,a:not(.btn):not([class*="chk-"])){color:color-mix(in srgb,var(--acc2,#2f81f7) 45%,#ffffff) !important;}
html[data-theme="dark"] .dsr b{color:#e6edf3 !important;}
/* Checklist rows and segmented controls had no dark treatment at all. */
html[data-theme="dark"] :is(.ds-lrow,.ds-lcell,.segb,.ds-btn,.ds-tool,.pbtn,.fchip,.bchip,label.chk,button.chip){background:#161b22 !important;color:#e6edf3 !important;border-color:rgba(240,246,252,.14) !important;}
/* These controls animate background, and a transition outranks !important while it
   is running. Some of them never settle (they start life inside collapsed panels),
   which left them painted white over light text. Keep the motion transitions and
   drop only the colour ones so the dark value paints immediately. */
html[data-theme="dark"] :is(.qd-tab,.segb,.ds-lrow,.ds-lcell,.chip,.bchip,.fchip,.pbtn,.ds-mode,.ds-path,.ds-btn,.ds-tool,.svx-pill,.tpill,.fbtn,.chk-pill){transition-property:transform,box-shadow,border-color !important;}
/* final residuals found by the dark-mode audit */
html[data-theme="dark"] :is(.sc,.seg,.sw-b){background:#161b22 !important;color:#e6edf3 !important;border-color:rgba(240,246,252,.14) !important;}
html[data-theme="dark"] :is(.cx,.cxp) label{color:#e6edf3 !important;}
html[data-theme="dark"] :is(.mlab,.ttl,.modenote,.ro-of,.lm .l){color:#c9d1d9 !important;}
html[data-theme="dark"] .prhub :is(table.draws th,table.draws tbody tr){background:#161b22 !important;color:#e6edf3 !important;}
html[data-theme="dark"] :is(.qd-tab,.chk-pill.chk-login,.btn-soft){background:#161b22 !important;color:#e6edf3 !important;border-color:rgba(240,246,252,.14) !important;}
html[data-theme="dark"] :is(.qd-tab,.btn-soft)[aria-selected="true"],
html[data-theme="dark"] :is(.qd-tab,.btn-soft)[aria-pressed="true"],
html[data-theme="dark"] :is(.qd-tab,.btn-soft).on,
html[data-theme="dark"] :is(.qd-tab,.btn-soft).active{background:rgba(47,129,247,.18) !important;color:#79c0ff !important;border-color:rgba(47,129,247,.45) !important;}
html[data-theme="dark"] .prhub{background:
  radial-gradient(1000px 560px at 8% 4%, rgba(47,129,247,.10), rgba(13,17,23,0) 58%),
  radial-gradient(860px 520px at 94% 8%, rgba(63,185,80,.07), rgba(13,17,23,0) 62%),
  #0d1117 !important;}
/* hero band + photo scrim adapt */
html[data-theme="dark"] .chk-hero-photo{background:#161b22;}
html[data-theme="dark"] .chk-hero-photo::before{box-shadow:inset 0 0 0 1px rgba(240,246,252,.14);}
html[data-theme="dark"] .chk-hero-photo::after{background:linear-gradient(210deg,rgba(47,129,247,.18),rgba(47,129,247,0) 58%),linear-gradient(0deg,rgba(0,0,0,.30),rgba(0,0,0,0) 45%);}
/* the toggle control */
.chk-tt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border,#e5e5e5);background:transparent;color:inherit;font:inherit;font-size:12px;font-weight:600;line-height:1;padding:7px 10px;border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.chk-tt:hover{background:rgba(0,0,0,.05);}
html[data-theme="dark"] .chk-tt:hover{background:rgba(255,255,255,.08);}
.chk-tt svg{width:15px;height:15px;display:block;}
.chk-tt .tt-sun{display:none;} html[data-theme="dark"] .chk-tt .tt-sun{display:block;}
.chk-tt .tt-moon{display:block;} html[data-theme="dark"] .chk-tt .tt-moon{display:none;}
.chk-langsw{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;text-decoration:none;color:inherit;border:1px solid var(--border,#e5e5e5);border-radius:999px;padding:6px 10px;line-height:1;}
/* ================= END DARK MODE ================= */


/* ---- dark: shared chk-* components (these ship from theme.php so every page benefits) ---- */
html[data-theme="dark"] .chk-heroband{background:#0d1117;}
html[data-theme="dark"] .chk-heroband-in,html[data-theme="dark"] .chk-hero{background:transparent;}
html[data-theme="dark"] .chk-qcard{background:#161b22;border-color:rgba(240,246,252,.12);color:#e6edf3;}
html[data-theme="dark"] .chk-qcard:hover{background:#1c2330;}
html[data-theme="dark"] .chk-hbtn-soft{background:#21262d;color:#e6edf3;border-color:rgba(240,246,252,.14);}
html[data-theme="dark"] .chk-hero-chips li{background:rgba(255,255,255,.06);border-color:rgba(240,246,252,.12);color:#c9d1d9;}
html[data-theme="dark"] .chk-topbar{background:#010409;border-color:rgba(240,246,252,.10);color:#c9d1d9;}
html[data-theme="dark"] .chk-header{background:rgba(13,17,23,.88);border-color:rgba(240,246,252,.10);}
html[data-theme="dark"] .mobile-panel,html[data-theme="dark"] .menu{background:#0d1117;color:#e6edf3;border-color:rgba(240,246,252,.12);}
html[data-theme="dark"] .chk-footer{background:#010409;color:#c9d1d9;}
html[data-theme="dark"] .chk-pill{border-color:rgba(240,246,252,.16);color:#c9d1d9;}
/* generic surfaces: tables, form controls, breadcrumbs */
html[data-theme="dark"] table{background:transparent;}
html[data-theme="dark"] th{background:#161b22;color:#e6edf3;border-color:rgba(240,246,252,.12);}
html[data-theme="dark"] td{background:#0d1117;color:#c9d1d9;border-color:rgba(240,246,252,.10);}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:#0d1117;color:#e6edf3;border-color:rgba(240,246,252,.18);}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#6e7681;}
html[data-theme="dark"] .chk-breadcrumb,html[data-theme="dark"] .chk-crumb{background:transparent;color:#8b949e;}
/* app bar (mobile bottom nav) */
html[data-theme="dark"] .ab-bar,html[data-theme="dark"] .chk-appbar{background:rgba(13,17,23,.94);border-color:rgba(240,246,252,.12);color:#c9d1d9;}


/* ---- dark: the --chk-* shared token family (drives every chk_* component + accents) ---- */
html[data-theme="dark"]{
  --chk-ink:#e6edf3; --chk-mut:#9198a1; --chk-line:rgba(240,246,252,.14);
  --chk-cardbg:#161b22;
  --chk-blue:#2f81f7; --chk-purple:#a371f7; --chk-teal:#2dd4bf;
  --chk-green:#3fb950; --chk-amber:#d29922; --chk-red:#f85149;
}


/* ---- dark: final surface sweep. !important is deliberate: page CSS loads after
     theme.php, and a user-chosen dark view must beat page defaults. ---- */
/* These active-state pills use background:var(--ink), which is now light in dark
   mode. Invert their text so the label stays legible. */
html[data-theme="dark"] .rcw .fbtn[aria-pressed="true"],
html[data-theme="dark"] .cz .sw-b[aria-pressed="true"],
html[data-theme="dark"] .cz .field-tip,
html[data-theme="dark"] .cz .pin .lbl,
html[data-theme="dark"] .hc .tnav a.on{color:#0d1117 !important;}
html[data-theme="dark"] .chk-crumbs-band{background:#0d1117 !important;border-color:rgba(240,246,252,.10) !important;}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:#0d1117 !important;color:#e6edf3 !important;border-color:rgba(240,246,252,.18) !important;}
html[data-theme="dark"] td{background:#0d1117 !important;color:#c9d1d9 !important;}
html[data-theme="dark"] th{background:#161b22 !important;color:#e6edf3 !important;}
html[data-theme="dark"] .btn.ghost,html[data-theme="dark"] .btn-soft,html[data-theme="dark"] .btn-ghost{background:#21262d !important;color:#e6edf3 !important;border-color:rgba(240,246,252,.16) !important;}
html[data-theme="dark"] [class*="-tile"],
html[data-theme="dark"] [class*="-card"],
html[data-theme="dark"] [class*="-rc"],
html[data-theme="dark"] [class*="-tw"],
html[data-theme="dark"] [class*="-frc"],
html[data-theme="dark"] [class*="-stat"],
html[data-theme="dark"] [class*="-check"],
html[data-theme="dark"] [class*="-fee"],
html[data-theme="dark"] [class*="-box"],
html[data-theme="dark"] [class*="-cell"],
html[data-theme="dark"] [class*="-panel"],
html[data-theme="dark"] [class*="-note"]{
  background:#161b22 !important;
  border-color:rgba(240,246,252,.12) !important;
}
/* keep genuinely dark/branded panels and the photo figure out of the sweep */
html[data-theme="dark"] .chk-hero-photo,html[data-theme="dark"] .chk-hero-photo *{background:transparent !important;}
html[data-theme="dark"] .chk-hero-photo{background:#161b22 !important;}


/* ---- dark: remaining small surfaces found by the contrast audit ---- */
html[data-theme="dark"] .tool,html[data-theme="dark"] .off,html[data-theme="dark"] .qd-tab{background:#161b22 !important;border-color:rgba(240,246,252,.12) !important;color:#e6edf3 !important;}
html[data-theme="dark"] .qd-tab[aria-selected="true"],html[data-theme="dark"] .qd-tab.is-on{background:#2f81f7 !important;color:#fff !important;}
html[data-theme="dark"] a.btn:not(.btn-primary):not([class*="primary"]){background:#21262d !important;color:#e6edf3 !important;border-color:rgba(240,246,252,.16) !important;}
html[data-theme="dark"] .chk-pill.chk-login{background:#21262d !important;color:#e6edf3 !important;border-color:rgba(240,246,252,.18) !important;}


/* ---- dark: keep the brand mark legible without recolouring it.
     A white chip preserves the exact red; inverting would shift it to cyan. ---- */
html[data-theme="dark"] .chk-logo,html[data-theme="dark"] .logo,html[data-theme="dark"] a.brand{background:#ffffff !important;border-radius:10px;padding:6px 10px;}
html[data-theme="dark"] .chk-logo img,html[data-theme="dark"] .logo img,html[data-theme="dark"] a.brand img{filter:none !important;}


/* ================== SPLIT SPINE ==================
   Editorial centre-rail layout. Blocks alternate either side of a
   vertical spine that fills as you scroll. Collapses to a single
   left-rail column on small screens. Dark-mode aware. */
.chk-spine{position:relative;padding:clamp(48px,7vw,96px) 0;}
.chk-spine--soft{background:var(--chk-cardbg,#f5f5f7);}
/* nested inside a page section that already supplies heading + container */
.chk-spine--flush{padding:0;}
.chk-spine--flush > .chk-spine-in{max-width:none;padding:0;}
.chk-spine-in{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,32px);}
.chk-spine-head{max-width:62ch;margin:0 auto clamp(34px,5vw,60px);text-align:center;}
.chk-spine-eyebrow{display:inline-flex;align-items:center;gap:.55rem;margin:0;font-size:12px;font-weight:650;letter-spacing:.10em;text-transform:uppercase;color:var(--chk-accent,#0067b8);}
.chk-spine-eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6;}
.chk-spine-title{margin:.55rem 0 0;font-size:clamp(28px,3.8vw,48px);font-weight:700;letter-spacing:-.025em;line-height:1.1;color:var(--chk-ink,#1d1d1f);text-wrap:balance;}
.chk-spine-intro{margin:.8rem auto 0;max-width:66ch;font-size:clamp(15px,1.4vw,18px);line-height:1.6;color:var(--chk-mut,#5c6470);}

.chk-spine-track{position:relative;}
.chk-spine-track::before{content:"";position:absolute;top:6px;bottom:6px;left:50%;transform:translateX(-50%);width:2px;background:var(--chk-line,#e6e8ec);border-radius:2px;}
.chk-spine-fill{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:2px;height:0;border-radius:2px;background:linear-gradient(180deg,var(--chk-accent,#0067b8),var(--chk-purple,#6d28d9));transition:height .6s cubic-bezier(.22,.61,.36,1);will-change:height;}
.chk-spine-list{list-style:none;margin:0;padding:0;}

.chk-spine-step{position:relative;display:grid;grid-template-columns:1fr clamp(58px,7vw,104px) 1fr;align-items:start;}
.chk-spine-step + .chk-spine-step{margin-top:clamp(20px,3vw,38px);}
.chk-spine-node{grid-row:1;grid-column:2;justify-self:center;position:relative;z-index:2;margin-top:16px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--chk-canvas,#fff);border:1px solid var(--chk-line,#e6e8ec);color:var(--chk-mut,#5c6470);box-shadow:0 1px 2px rgba(16,24,40,.05);transition:background .5s ease,color .5s ease,border-color .5s ease,transform .5s cubic-bezier(.22,.61,.36,1);}
.chk-spine-node .chk-i{width:19px;height:19px;fill:none;stroke:currentColor;}
.chk-spine-step.is-on .chk-spine-node{background:var(--chk-accent,#0067b8);border-color:transparent;color:#fff;transform:scale(1.08);}

.chk-spine-card{grid-row:1;position:relative;background:var(--chk-canvas,#fff);border:1px solid var(--chk-line,#e6e8ec);border-radius:var(--chk-radius,16px);padding:clamp(16px,2vw,24px);box-shadow:0 1px 2px rgba(16,24,40,.04);}
.chk-spine-step[data-side="l"] .chk-spine-card{grid-column:1;}
.chk-spine-step[data-side="r"] .chk-spine-card{grid-column:3;}
.chk-spine-card::after{content:"";position:absolute;top:34px;width:clamp(18px,3.5vw,32px);height:1px;background:var(--chk-line,#e6e8ec);}
.chk-spine-step[data-side="l"] .chk-spine-card::after{left:100%;}
.chk-spine-step[data-side="r"] .chk-spine-card::after{right:100%;}
.chk-spine-label{margin:0;font-size:11.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--chk-accent,#0067b8);}
.chk-spine-h{margin:.35rem 0 0;font-size:clamp(17px,1.7vw,21px);font-weight:650;letter-spacing:-.012em;line-height:1.25;color:var(--chk-ink,#1d1d1f);}
.chk-spine-b{margin:.45rem 0 0;font-size:clamp(14.5px,1.25vw,16px);line-height:1.6;color:var(--chk-mut,#5c6470);}
.chk-spine-meta{display:inline-flex;align-items:center;gap:.4rem;margin:.7rem 0 0;padding:.24rem .6rem;border-radius:999px;background:var(--chk-cardbg,#f5f5f7);border:1px solid var(--chk-line,#e6e8ec);font-size:12.5px;font-weight:600;color:var(--chk-mut,#5c6470);}

/* motion, triple-guarded */
@media (prefers-reduced-motion: no-preference){
  .chk-spine-step{opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);}
  .chk-spine-step[data-side="l"]{transform:translate(-18px,20px);}
  .chk-spine-step[data-side="r"]{transform:translate(18px,20px);}
  .chk-spine-step.is-on{opacity:1;transform:none;}
}
@media (prefers-reduced-motion: reduce){
  .chk-spine-step{opacity:1 !important;transform:none !important;}
  .chk-spine-fill{transition:none !important;}
}

/* single left rail on small screens */
@media (max-width:820px){
  .chk-spine-track::before,.chk-spine-fill{left:20px;transform:none;}
  .chk-spine-step{grid-template-columns:40px minmax(0,1fr);column-gap:clamp(12px,3vw,18px);}
  .chk-spine-step[data-side="l"] .chk-spine-card,
  .chk-spine-step[data-side="r"] .chk-spine-card{grid-column:2;}
  .chk-spine-node{grid-column:1;justify-self:start;}
  .chk-spine-card::after{display:none;}
  .chk-spine-step[data-side="l"],.chk-spine-step[data-side="r"]{transform:translateY(18px);}
}

/* dark mode */
html[data-theme="dark"] .chk-spine--soft{background:#0d1117;}
html[data-theme="dark"] .chk-spine-card,
html[data-theme="dark"] .chk-spine-node{background:#161b22;border-color:rgba(240,246,252,.12);}
html[data-theme="dark"] .chk-spine-meta{background:#0d1117;border-color:rgba(240,246,252,.12);}
html[data-theme="dark"] .chk-spine-track::before,
html[data-theme="dark"] .chk-spine-card::after{background:rgba(240,246,252,.14);}
html[data-theme="dark"] .chk-spine-step.is-on .chk-spine-node{background:#2f81f7;color:#0d1117;}
/* ===== DARK-MODE CONTRAST REPAIRS (audit 2026-08-07) =====
   Each rule below fixes text that stayed at its light-mode colour after the
   surface underneath it flipped dark, or a surface that never flipped at all. */
html[data-theme="dark"] :is(.alert,.callout) :is(p,li,em,b,strong,span){ color:#e6edf3; }
html[data-theme="dark"] :is(.alert,.callout) a{ color:#58a6ff; }
/* oinp route-accent inks are mixed for white cards */
html[data-theme="dark"] .oi{ --rt-job-ink:#79c0ff; --rt-doc-ink:#d2a8ff; }
/* lmia route cards keep a locally scoped --paper:#fff */
html[data-theme="dark"] .lm .route{ background:#161b22; border-color:rgba(240,246,252,.14); }
html[data-theme="dark"] .lm .route b{ color:#e6edf3; }
/* vre segmented control had no dark treatment */
html[data-theme="dark"] .seg > button:not([aria-pressed="true"]):not([aria-selected="true"]):not(.on){ background:#161b22; color:#e6edf3; border-color:rgba(240,246,252,.14); }
/* citizenship file-flag headings and the pressed segment */
html[data-theme="dark"] .cz .flag b{ color:#e6edf3; }
/* :is(.sc,.seg,.sw-b) above forces #161b22 !important on every state, so the
   pressed label (already #0d1117) sat on a dark surface. Give it its accent back. */
html[data-theme="dark"] .cz .sw-b[aria-pressed="true"]{ background:#2f81f7 !important; border-color:#2f81f7 !important; }
/* contact form labels: .cxp #cx-lead label{color:#3a4250!important} is an ID rule,
   so the generic :is(.cx,.cxp) label dark rule could never win. */
html[data-theme="dark"] .cxp #cx-lead label{ color:#c9d1d9 !important; }
/* the same form also carries inline color:#2d3748 on its span labels, which only
   an !important author rule can override. */
html[data-theme="dark"] #cxLeadForm span[style]{ color:#c9d1d9 !important; }
/* services filter counts sit on bright accent chips; light-on-light was unreadable */
html[data-theme="dark"] .svx-pill[class*="acc-"]:not(.is-on) .svx-n{ color:#0d1117 !important; }
/* Pre-footer conversion band + lead card: both backgrounds were hard-coded light
   (.chk-ctaband ends on #eef1f5, .chk-lead is a #ffffff->#fafbfd gradient) while all
   the type inside runs on --ink/--mut, which do flip. Result was white-on-white on
   every page that renders the band. Flip the two surfaces and the type resolves itself. */
html[data-theme="dark"] .chk-ctaband{ background:linear-gradient(180deg,var(--bg),#0b0f14); }
html[data-theme="dark"] .chk-lead{ background:linear-gradient(180deg,#161b22,#12171e); border-color:rgba(240,246,252,.14); box-shadow:0 18px 48px rgba(0,0,0,.45); }
html[data-theme="dark"] .chk-ctaband .chk-lead{ box-shadow:0 22px 60px rgba(0,0,0,.5); }
html[data-theme="dark"] .chk-lead .cl-trust{ border-top-color:rgba(240,246,252,.14); }
/* status inks were picked for white paper */
html[data-theme="dark"] .chk-lead :is(label .req,.cl-msg.err){ color:#ff7b72; }
html[data-theme="dark"] .chk-lead .cl-msg.ok{ color:#3fb950; }

/* ---- Dark mode, round 2 ---------------------------------------------------
   Same root cause as the lead card: these containers bake their paper in as a
   literal light hex, while the type inside runs on --ink and does flip. In dark
   they rendered near-white-on-near-white. Found by running a contrast sweep in
   dark AND in light and keeping only the dark-only regressions, so brand buttons
   and anything already imperfect in light mode are deliberately left alone. */

/* province pages (inc/pnp_render.php) */
html[data-theme="dark"] .pnp section.hero{ background:linear-gradient(180deg,#161b22,#0d1117); }
html[data-theme="dark"] .pnp .pv-code{ background:rgba(47,129,247,.16); border-color:rgba(47,129,247,.34); color:#79c0ff; }
html[data-theme="dark"] .pnp .tag{ background:rgba(47,129,247,.14); border-color:rgba(47,129,247,.30); color:#a9c7ff; }
html[data-theme="dark"] .pnp .tag.light{ background:#161b22; border-color:rgba(240,246,252,.14); color:#c9d1d9; }

/* resources.php checklist rows */
html[data-theme="dark"] .dsr .ds-doc{ background:#161b22; border-color:rgba(240,246,252,.12); }

/* help centre live-data panel */
html[data-theme="dark"] .hc .hc-live{ background:rgba(63,185,80,.10); border-color:rgba(63,185,80,.28); }

/* OINP comparison grid + status strip */
html[data-theme="dark"] .oi .cell.c3{ background:rgba(163,113,247,.12); }
html[data-theme="dark"] .oi .statusbar{ background:#161b22; border-color:rgba(240,246,252,.14); }

/* refusals hero, express entry lead panel */
html[data-theme="dark"] .rr .rhero{ background:linear-gradient(180deg,#161b22,#0d1117); }
html[data-theme="dark"] .ee .lead-copy{ background:#161b22; border-color:rgba(240,246,252,.12); }

/* study permit callout + funds tool */
html[data-theme="dark"] .sp .callout{ background:rgba(210,153,34,.12); border-color:rgba(210,153,34,.30); }
html[data-theme="dark"] .sp .tool-in.alt{ background:#161b22; }

/* citizenship fact tiles */
html[data-theme="dark"] .cz .fact{ background:#161b22; border-color:rgba(240,246,252,.12); }

/* super visa numeric steppers */
html[data-theme="dark"] .sv .stepper button{ background:#161b22; border-color:rgba(240,246,252,.16); color:#e6edf3; }

/* glass CTA sits over a photo hero; the white fill blew out */
html[data-theme="dark"] .cta.cta-glass{ background:rgba(22,27,34,.72); border-color:rgba(240,246,252,.22); color:#e6edf3; }

/* active services filter pill: the count chip was a translucent white wash */
html[data-theme="dark"] .svx-pill.is-on .svx-n{ background:rgba(13,17,23,.45); color:#e6edf3 !important; }


/* ---- Dark mode, round 3: inks rather than surfaces -------------------------
   Each page sets its own --chk-accent (a deep brand blue chosen for white paper).
   Now that the cards behind them are dark, those inks sit at ~3:1. Lighten with
   color-mix so every page keeps its own hue instead of collapsing to one blue. */
html[data-theme="dark"] .chk-lead .cl-eyebrow,
html[data-theme="dark"] .chk-lead .cl-alt a,
html[data-theme="dark"] .lv-stat b{ color:color-mix(in srgb, var(--chk-accent, var(--primary,#2f81f7)) 45%, #ffffff); }

/* RCIP/FCIP purple */
html[data-theme="dark"] :is(.tag.fcip, .stat .v b){ color:#d2a8ff; }
html[data-theme="dark"] .tag.fcip{ background:rgba(163,113,247,.16); border-color:rgba(163,113,247,.34); }

/* province draw-table sub-notes kept the light-mode slate */
html[data-theme="dark"] .pnp :is(.tsub,.tnone){ color:#9198a1; }

/* citizenship residency calculator cells + unpressed segment labels */
html[data-theme="dark"] .cz :is(.ro-cell .v, .ro-n .num){ color:#e6edf3; }
html[data-theme="dark"] .cz .seg-b:not([aria-pressed="true"]) .t{ color:#c9d1d9; }

/* the dark-mode brand fills are lighter than their light-mode counterparts, so a
   white label lands near 2.5:1 — use ink on those two instead */
html[data-theme="dark"] :is(.clbt-btn.p, a.b.p){ color:#0d1117; }
html[data-theme="dark"] .qn{ color:#0d1117; }


/* ---- Dark mode, round 4 ---------------------------------------------------
   Page-level <style> blocks are emitted inside <main>, i.e. AFTER this sheet, so
   at equal specificity the page wins. The leftovers below therefore need either a
   corrected selector (two classes on one element, not a descendant) or !important. */

/* about.php hero still opened on a near-white stop */
html[data-theme="dark"] .ab section.hero{ background-image:radial-gradient(130% 120% at 50% -10%, rgba(47,129,247,.15), rgba(0,0,0,0) 58%), linear-gradient(180deg,#161b22,#0d1117); }

/* visitor records: the outcome strip gradient was two light stops */
html[data-theme="dark"] .path-h{ background-image:linear-gradient(180deg,#161b22,#12171e); }

/* .ro-n and .num are the same element, not nested */
html[data-theme="dark"] .cz .ro-n.num{ color:#e6edf3 !important; }

/* RCIP/FCIP stat figures: .stat and .v are the same element */
html[data-theme="dark"] .stat.v b{ color:#d2a8ff !important; }

/* permanent-residency stat figures lose the tie-break to the page sheet */
html[data-theme="dark"] .lv-stat b{ color:color-mix(in srgb, var(--chk-accent, var(--primary,#2f81f7)) 45%, #ffffff) !important; }

/* temporary resident extensions: the negative marker kept its light-mode red */
html[data-theme="dark"] .mr-v.no{ color:#ff7b72 !important; }

/* citizenship test: the confirm button turns green, so ink beats a white label */
html[data-theme="dark"] .ctq .qfoot .btn-p{ color:#0d1117 !important; }

/* muted lead paragraphs sitting on the dark hero bands */
html[data-theme="dark"] section > .lead{ color:#9198a1; }


/* ---- Dark mode, round 5: the last two clusters ----------------------------
   (a) a literal #0067b8 (the light-mode primary, not the token) used as an ink,
   (b) pale blue chips whose paper never flipped, leaving blue-on-near-white. */
html[data-theme="dark"] :is(.pnp .teyebrow, .cx-eye){ color:#79c0ff !important; }
html[data-theme="dark"] :is(.cx,.cxp) a:not([class*="btn"]):not([class*="cta"]):not(.b){ color:#79c0ff; }
html[data-theme="dark"] :is(.ee,.sp,.oi) :is(.n,.tag,.cap,.kick){ background:rgba(47,129,247,.16); border-color:rgba(47,129,247,.32); color:#79c0ff; }


/* ---- Dark mode, round 6: last singles -------------------------------------- */
/* the outcome strip gradient is set with the background shorthand further down
   the cascade, so background-image alone was being reset */
html[data-theme="dark"] .path-h{ background:linear-gradient(180deg,#161b22,#12171e) !important; }
/* remaining light-mode inks on dark paper */
html[data-theme="dark"] .svx-trust-d{ color:#9198a1 !important; }
html[data-theme="dark"] .mr-v.yes{ color:#56d364 !important; }
html[data-theme="dark"] .cz .badge{ color:#ff7b72 !important; }

/* ===== END DARK-MODE CONTRAST REPAIRS ===== */

/* ================== END SPLIT SPINE ================== */

/* ---- Typography baseline (added 2026-08-12) ----
   One family for the entire document. Declared on the root element too, so no
   node (incl. form controls in the top layer) can fall back to the UA serif. */
html{font-family:var(--font);}
html,body,button,input,select,textarea,optgroup{font-family:var(--font);}
/* ---- end typography baseline ---- */