/* =========================================================
   Global Apostille Canada Inc. — site styles
   Palette taken from the logo: navy #00193E, maple #B20214.
   Brass #A8823C stands in for the notarial seal / embosser.
   ========================================================= */

/* ---------- fonts ----------
   Self-hosted, latin subset, woff2 only. Downloaded once by
   build/fetch-fonts.js and committed, so the site makes no request to a
   Google server: nothing about a visitor reaches a third party, and the
   Content-Security-Policy needs no external origin at all.

   font-display:swap paints the fallback immediately and swaps when the
   face arrives, so text is readable from the first frame. Georgia and the
   system sans in the stacks below are the faces that show in the meantime.

   Only the weights the stylesheet uses. The one font-weight:300 rule —
   the +/- marker on the FAQ — resolves to 400, which is right for a
   single glyph and saves a 39 KB face. */

@font-face{
  font-family:"Spectral"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/spectral-400.woff2") format("woff2");
}
@font-face{
  font-family:"Spectral"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/assets/fonts/spectral-500.woff2") format("woff2");
}
@font-face{
  font-family:"Spectral"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/assets/fonts/spectral-600.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-600.woff2") format("woff2");
}

:root{
  --ink:        #00193E;
  --ink-2:      #0B2A57;
  --ink-3:      #133566;
  --maple:      #B20214;
  --maple-lit:  #D6162B;
  --brass:      #A8823C;
  --brass-lit:  #C9A25A;
  --paper:      #F3F5F9;
  --paper-2:    #E9EDF4;
  --card:       #FFFFFF;
  --rule:       #D8DFEA;
  --rule-soft:  #E9EDF4;
  --slate:      #55607A;
  --slate-2:    #7C879C;
  --on-dark:    #C9D4E6;

  --max: 1180px;
  --gut: clamp(20px, 5vw, 56px);

  --f-serif: "Spectral", Georgia, "Times New Roman", serif;
  --f-sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:var(--ink-3); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--maple); }

h1,h2,h3,h4{ font-family:var(--f-serif); font-weight:600; line-height:1.16; letter-spacing:-.012em; margin:0; }
h1{ font-size:clamp(2.3rem, 1.5rem + 3.1vw, 3.9rem); font-weight:500; }
h2{ font-size:clamp(1.7rem, 1.25rem + 1.7vw, 2.5rem); }
h3{ font-size:1.22rem; }
p{ margin:0 0 1rem; max-width:68ch; }

:focus-visible{ outline:2.5px solid var(--brass); outline-offset:3px; border-radius:2px; }

[id]{ scroll-margin-top:96px; }
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.lede{ font-size:1.09rem; color:var(--slate); }
.tight{ margin-bottom:.35rem; }
.center{ text-align:center; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- header ---------- */
.masthead{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--rule);
}
/* The header band is wider than the article column below it. At the shared
   1180px the French header fits by 0.6px — brand 296 + nav 642 + language
   73 + gaps against 1068 available — so any difference in font rendering
   tips it over and the flex items start shrinking. Widened again when Blog
   joined the nav, which cost French about 70px. Slack is measured after
   every nav change; French is the one that runs out first, because its
   labels are longer. */
.masthead .wrap{ display:flex; align-items:center; gap:24px; min-height:74px; max-width:1360px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; }

/* The logo is wrapped in <picture> for the WebP source, which makes
   <picture> the flex item rather than <img>. It renders correctly either
   way — the img keeps its ratio from height:38px + width:auto — but the
   wrapper was left unstyled, so give it the box the img used to have.
   Matters because the French header has only about 4px of slack. */
.brand picture{ display:block; flex:none; line-height:0; }
.brand img{ height:38px; width:auto; flex:none; }
.brand b{ font-family:var(--f-serif); font-size:1.02rem; font-weight:600; color:var(--ink); line-height:1.15; display:block; }
.brand span{ font-size:.735rem; color:var(--slate-2); letter-spacing:.02em; display:block; white-space:nowrap; }
@media (max-width:1240px){ .brand > span > span{ display:none; } }
@media (max-width:620px){
  .brand > span{ display:none; }          /* mark alone below 620px */
  .brand img{ height:42px; }
  .masthead .wrap{ gap:14px; min-height:66px; }
}

.nav{ display:flex; align-items:center; gap:clamp(14px,1.8vw,26px); }
.nav a{ font-size:.93rem; white-space:nowrap; color:var(--ink); text-decoration:none; padding:6px 0; border-bottom:2px solid transparent; }
.nav a:hover,.nav a[aria-current="page"]{ border-bottom-color:var(--maple); color:var(--ink); }

.langbtn{
  font-family:var(--f-sans); font-size:.8rem; font-weight:600; letter-spacing:.06em;
  background:none; border:1px solid var(--rule); color:var(--slate);
  padding:6px 11px; border-radius:999px; cursor:pointer;
}
.langbtn:hover{ border-color:var(--ink); color:var(--ink); }

.burger{ display:none; background:none; border:1px solid var(--rule); border-radius:6px; padding:9px 10px; cursor:pointer; }
.burger span{ display:block; width:19px; height:2px; background:var(--ink); margin:3.5px 0; }

@media (max-width:1080px){
  .burger{ display:block; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--rule);
    padding:8px var(--gut) 18px; display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:13px 0; border-bottom:1px solid var(--rule-soft); }
  .nav a:hover,.nav a[aria-current="page"]{ border-bottom-color:var(--rule-soft); color:var(--maple); }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-sans); font-size:.97rem; font-weight:600;
  padding:14px 28px; border-radius:999px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:background .16s, color .16s, border-color .16s;
}

/* Navy rather than maple. Red reads as a warning, which is the wrong
   signal on the one action we want people to take, and it matches the
   rounded language switch beside it in the header. */
.btn-primary{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-primary:hover{ background:var(--ink-3); border-color:var(--ink-3); color:#fff; }

/* .nav a sets a colour for the plain nav links, and beats .btn-primary on
   specificity — which is why the label was navy on the old red button, at
   about 1.5:1. On a navy button it would be invisible outright. */
.nav a.btn-primary,
.nav a.btn-primary:hover{ color:#fff; }

/* The hero and the closing band are themselves navy, so the primary
   button inverts there instead of disappearing into the background. */
.hero .btn-primary,
.band .btn-primary{ background:#fff; color:var(--ink); border-color:#fff; }
.hero .btn-primary:hover,
.band .btn-primary:hover{ background:var(--paper-2); border-color:var(--paper-2); color:var(--ink); }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#fff; }
.btn-onDark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn-onDark:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

/* ---------- hero ---------- */
.hero{
  background:var(--ink);
  color:#fff;
  position:relative;
  overflow:hidden;
  padding:clamp(56px,7vw,96px) 0 clamp(96px,10vw,132px);
}
/* faint guilloche, like security paper */
.hero::before{
  content:""; position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:
    repeating-linear-gradient(58deg, rgba(255,255,255,.22) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-58deg, rgba(255,255,255,.14) 0 1px, transparent 1px 19px);
  mask-image:radial-gradient(120% 90% at 78% 40%, #000 10%, transparent 72%);
}
.hero .wrap{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; }
@media (max-width:940px){ .hero .wrap{ grid-template-columns:1fr; } }

.hero h1{ color:#fff; margin-bottom:18px; }
.hero p{ color:var(--on-dark); font-size:1.1rem; max-width:52ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 30px; }
.hero .disclaimer{
  border-top:1px solid rgba(255,255,255,.18); padding-top:16px;
  font-size:.85rem; line-height:1.55; color:#8DA0BF; max-width:52ch; margin:0;
}

/* the chain — the one loud element on the page */
.chain{ display:grid; gap:0; }
.stage{
  display:grid; grid-template-columns:56px 1fr; gap:20px;
  padding:19px 0; position:relative;
  border-top:1px solid rgba(255,255,255,.14);
}
.stage:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }
.stage .seal{
  width:56px; height:56px; position:relative; flex:none;
  display:grid; place-items:center;
  font-family:var(--f-serif); font-size:1.16rem; color:var(--brass-lit);
}
.stage .seal svg{ position:absolute; inset:0; width:100%; height:100%; }
.stage h3{ color:#fff; font-size:1.16rem; margin-bottom:3px; }
.stage p{ margin:0; color:#9FB0CB; font-size:.9rem; max-width:38ch; line-height:1.5; }
.stage .tag{
  display:inline-block; margin-top:7px; font-size:.72rem; letter-spacing:.05em;
  color:var(--brass-lit); border:1px solid rgba(201,162,90,.4); border-radius:999px; padding:2px 9px;
}

/* one orchestrated load: seals emboss in, in order */
@media (prefers-reduced-motion: no-preference){
  .chain .stage{ opacity:0; animation:stamp .6s cubic-bezier(.2,.7,.3,1) forwards; }
  .chain .stage:nth-child(1){ animation-delay:.15s; }
  .chain .stage:nth-child(2){ animation-delay:.33s; }
  .chain .stage:nth-child(3){ animation-delay:.51s; }
  .chain .stage:nth-child(4){ animation-delay:.69s; }
  @keyframes stamp{
    from{ opacity:0; transform:translateY(9px) scale(.985); }
    to  { opacity:1; transform:none; }
  }
}

/* ---------- the destination checker ---------- */
.checker-shell{ margin-top:calc(-1 * clamp(56px,6vw,78px)); position:relative; z-index:5; }
.checker{
  background:var(--card); border:1px solid var(--rule);
  border-top:3px solid var(--brass);
  padding:clamp(26px,3.4vw,40px);
}
.checker h2{ font-size:1.6rem; margin-bottom:8px; }
@media (min-width:940px){
  .checker{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,4vw,60px); align-items:start; }
  .checker-intro .lede{ margin-bottom:0; }
  .checker-body .result{ border-top:1px solid var(--rule); }
  .checker-body .field-row{ max-width:none; }
}
.checker .lede{ margin-bottom:22px; }
.field-row{ display:grid; grid-template-columns:1fr auto; gap:12px; max-width:640px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }

label.lbl{ display:block; font-size:.83rem; font-weight:600; color:var(--slate); margin-bottom:7px; }
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%; font-family:var(--f-sans); font-size:1rem; color:var(--ink);
  background:#fff; border:1px solid var(--rule); border-radius:3px;
  padding:13px 14px; transition:border-color .15s;
}
input:focus,select:focus,textarea:focus{ border-color:var(--ink-3); outline-offset:1px; }
textarea{ min-height:120px; resize:vertical; line-height:1.55; }
select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),linear-gradient(135deg,var(--slate) 50%,transparent 50%); background-position:calc(100% - 19px) 22px, calc(100% - 13px) 22px; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:42px; }

.result{ margin-top:26px; border-top:1px solid var(--rule); padding-top:24px; display:none; }
.result.show{ display:block; }
.result .verdict{ font-family:var(--f-serif); font-size:1.3rem; margin-bottom:6px; }
.route{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 4px; align-items:stretch; }
.step-pill{
  flex:1 1 170px; min-width:150px; border:1px solid var(--rule); border-radius:3px;
  padding:13px 15px; background:var(--paper); position:relative;
}
.step-pill.on{ background:#fff; border-color:var(--ink); border-left:3px solid var(--brass); }
.step-pill.off{ opacity:.5; }
.step-pill b{ display:block; font-family:var(--f-serif); font-size:1.02rem; font-weight:600; }
.step-pill small{ color:var(--slate); font-size:.79rem; }
.step-pill small{ display:block; line-height:1.45; margin-bottom:7px; }
.step-pill em{ display:block; font-style:normal; color:var(--maple); font-size:.74rem; font-weight:600; letter-spacing:.01em; }
.step-pill.off em{ color:var(--slate-2); }
.note{ font-size:.85rem; color:var(--slate-2); margin-top:16px; }

/* ---------- sections ---------- */
section{ padding:clamp(56px,7vw,92px) 0; }
section.on-paper{ background:var(--paper); }
section.on-white{ background:#fff; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.sec-head{ max-width:60ch; margin-bottom:clamp(30px,4vw,48px); }
.sec-head p{ color:var(--slate); margin-top:13px; }

/* stage detail rows */
.rows{ border-top:1px solid var(--rule); }
.row{
  display:grid; grid-template-columns:64px 1.15fr 1fr; gap:clamp(18px,3vw,44px);
  padding:30px 0; border-bottom:1px solid var(--rule); align-items:start;
}
@media (max-width:820px){ .row{ grid-template-columns:44px 1fr; } .row .row-aside{ grid-column:2; } }
.row .idx{ font-family:var(--f-serif); font-size:1.55rem; color:var(--brass); line-height:1; padding-top:3px; }
.row h3{ margin-bottom:7px; }
.row p{ color:var(--slate); margin-bottom:0; font-size:.97rem; }
.row-aside{ font-size:.9rem; color:var(--slate); }
.row-aside b{ color:var(--ink); display:block; font-size:.8rem; margin-bottom:5px; font-weight:600; }
.row-aside ul{ margin:0; padding-left:17px; }
.row-aside li{ margin-bottom:3px; }

/* document grid */
/* Cell borders rather than a coloured background showing through 1px
   gaps. The gap trick paints every empty cell in the last row grey, and
   with six items in a four-column layout that is two grey rectangles
   sitting in the page. Borders on the cells themselves cannot do that,
   because a cell that does not exist draws nothing.

   Column counts that divide six exactly, so the last row is always full. */
.docgrid{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--rule); border-width:1px 0 0 1px;
}
.docgrid div{
  background:#fff; padding:20px 22px;
  border:1px solid var(--rule); border-width:0 1px 1px 0;
}
@media (max-width:900px){ .docgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .docgrid{ grid-template-columns:1fr; } }
.docgrid b{ display:block; font-family:var(--f-serif); font-size:1.03rem; font-weight:600; margin-bottom:4px; }
.docgrid small{ color:var(--slate); font-size:.84rem; line-height:1.5; display:block; }

/* three reasons */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,52px); }
@media (max-width:820px){ .trio{ grid-template-columns:1fr; } }
.trio h3{ margin-bottom:8px; padding-top:14px; border-top:2px solid var(--brass); }
.trio p{ color:var(--slate); font-size:.96rem; margin:0; }

/* FAQ */
.faq{ border-top:1px solid var(--rule); max-width:840px; }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  cursor:pointer; list-style:none; padding:20px 40px 20px 0; position:relative;
  font-family:var(--f-serif); font-size:1.09rem; font-weight:600;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:17px; font-size:1.5rem; color:var(--brass); font-family:var(--f-sans); font-weight:300; line-height:1;
}
.faq details[open] summary::after{ content:"–"; }
.faq .ans{ padding:0 40px 22px 0; color:var(--slate); font-size:.97rem; }
.faq .ans p:last-child{ margin-bottom:0; }

/* CTA band.

   It sits directly against the footer and both are the same navy, so the
   seam between them is invisible and their vertical padding stacks into a
   single void: 91px from the band plus 44px from the footer left 135px of
   empty colour between the last button and the first footer column. They
   read as one block, so they are spaced as one, with a hairline to make
   the division deliberate rather than accidental. */
.band{ background:var(--ink); color:#fff; padding-bottom:clamp(30px,3vw,38px); }
.band + footer{ padding-top:clamp(26px,2.8vw,34px); border-top:1px solid rgba(255,255,255,.12); }
.band h2{ color:#fff; }
.band p{ color:var(--on-dark); }
.band .wrap{ display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between; }
.band .btns{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- forms / wizard ---------- */
.formpage{ padding-top:44px; }
.pagehead{ background:var(--ink); color:#fff; padding:clamp(40px,5vw,62px) 0; }
.pagehead h1{ color:#fff; font-size:clamp(2rem,1.3rem + 2.4vw,3rem); }
.pagehead p{ color:var(--on-dark); margin:12px 0 0; }
.crumb{ font-size:.82rem; color:#8FA1BE; margin-bottom:14px; }
.crumb a{ color:#8FA1BE; }

.panel{ background:#fff; border:1px solid var(--rule); padding:clamp(24px,3.6vw,44px); max-width:820px; }
.progress{ display:flex; gap:6px; margin-bottom:30px; }
.progress i{ height:3px; flex:1; background:var(--rule); border-radius:2px; }
.progress i.done{ background:var(--brass); }
.progress i.now{ background:var(--ink); }
.stepno{ font-size:.8rem; color:var(--slate-2); letter-spacing:.04em; margin-bottom:6px; }

fieldset{ border:0; padding:0; margin:0 0 22px; }
legend{ font-family:var(--f-serif); font-size:1.35rem; font-weight:600; margin-bottom:6px; padding:0; }
.hint{ font-size:.88rem; color:var(--slate); margin:0 0 18px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:620px){ .grid2{ grid-template-columns:1fr; } }
.fld{ margin-bottom:18px; }

.choices{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.choice{
  display:flex; gap:11px; align-items:flex-start;
  border:1px solid var(--rule); border-radius:3px; padding:13px 15px; cursor:pointer; background:#fff;
  transition:border-color .14s, background .14s;
}
.choice:hover{ border-color:var(--slate-2); }
.choice input{ margin:3px 0 0; accent-color:var(--ink); flex:none; }
.choice span{ font-size:.94rem; line-height:1.4; }
.choice small{ display:block; color:var(--slate); font-size:.8rem; }
.choice:has(input:checked){ border-color:var(--ink); background:var(--paper); box-shadow:inset 3px 0 0 var(--brass); }

/* ---------- blog ---------- */
.postlist{ list-style:none; margin:0; padding:0; display:grid; gap:16px; max-width:820px; }
.postcard a{
  display:block; background:#fff; border:1px solid var(--rule);
  border-left:3px solid var(--brass); padding:22px 26px;
  text-decoration:none; transition:border-color .14s, transform .14s;
}
.postcard a:hover{ border-color:var(--ink); }
.postcard-meta{ display:block; font-size:.78rem; color:var(--slate-2); letter-spacing:.02em; margin-bottom:8px; }
.postcard b{ display:block; font-family:var(--f-serif); font-size:1.28rem; font-weight:600; color:var(--ink); line-height:1.25; margin-bottom:8px; }
.postcard small{ display:block; color:var(--slate); font-size:.93rem; line-height:1.55; }

.post-date{ font-size:.85rem; color:#8FA1BE; margin:0 0 10px; }
.post{ max-width:70ch; }
.post-lede{ font-size:1.12rem; color:var(--slate); border-left:3px solid var(--brass); padding-left:18px; margin-bottom:30px; }
.post h2{ font-size:1.5rem; margin:38px 0 12px; }
.post p{ margin-bottom:1.05rem; }
.post-list{ margin:0 0 1.2rem; padding-left:20px; color:var(--slate); }
.post-list li{ margin-bottom:7px; }
.post-note{
  background:var(--paper); border:1px solid var(--rule); border-left:3px solid var(--brass);
  padding:16px 20px; font-size:.93rem; color:var(--slate); margin:26px 0 0;
}
.post-cta{ max-width:70ch; margin:48px 0 0; padding-top:30px; border-top:1px solid var(--rule); }
.post-cta h2{ font-size:1.35rem; margin-bottom:8px; }
.post-more{ margin-top:48px; }
.post-more h2{ font-size:1.1rem; font-family:var(--f-sans); letter-spacing:.03em;
  text-transform:uppercase; color:var(--slate); margin-bottom:14px; }

/* ---------- the per-document repeater ---------- */
.docrow{
  border:1px solid var(--rule); border-left:3px solid var(--brass);
  background:#fff; padding:20px 22px 6px; margin-bottom:14px;
}
.docrow-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:16px;
}
.docrow-n{ font-family:var(--f-serif); font-size:1.05rem; font-weight:600; }
.docrow-del{
  background:none; border:0; color:var(--slate); cursor:pointer;
  font-family:var(--f-sans); font-size:.83rem; padding:4px 0;
}
.docrow-del:hover{ color:var(--maple); }
.fld-hint{ display:block; color:var(--slate-2); font-size:.78rem; margin-top:5px; }
.btn-add{ padding:11px 22px; font-size:.9rem; }

.drop{
  border:1.5px dashed var(--rule); border-radius:4px; padding:30px 22px; text-align:center;
  background:var(--paper); cursor:pointer; transition:border-color .15s, background .15s;
}
.drop.over{ border-color:var(--brass); background:#fff; }
.drop b{ display:block; font-size:.98rem; margin-bottom:4px; }
.drop small{ color:var(--slate); font-size:.84rem; }
.filelist{ margin-top:12px; font-size:.88rem; }
.filelist div{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--rule-soft); }
.filelist button{ background:none; border:0; color:var(--maple); cursor:pointer; font-size:.84rem; }

.wizard-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:30px; padding-top:24px; border-top:1px solid var(--rule); }
.summary-box{ background:var(--paper); border:1px solid var(--rule); padding:20px 22px; margin-bottom:22px; font-size:.92rem; }
.summary-box dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 20px; }
.summary-box dt{ color:var(--slate); }
.summary-box dd{ margin:0; }

.msg{ padding:15px 18px; border-radius:3px; font-size:.93rem; margin-bottom:18px; display:none; }
.msg.show{ display:block; }
.msg.err{ background:#FDF1F2; border:1px solid #EDC6CB; color:#7E0912; }
.msg.ok{ background:#F0F6F0; border:1px solid #C6DCC6; color:#1E5427; }

.ref{ font-family:var(--f-serif); font-size:1.9rem; color:var(--ink); letter-spacing:.02em; }

/* tracking */
.track-result{ margin-top:28px; display:none; }
.track-result.show{ display:block; }
.timeline{ border-left:2px solid var(--rule); margin-left:9px; padding-left:26px; }
.tl{ position:relative; padding-bottom:26px; }
.tl::before{ content:""; position:absolute; left:-37px; top:4px; width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid var(--rule); }
.tl.done::before{ background:var(--brass); border-color:var(--brass); }
.tl.now::before{ background:#fff; border-color:var(--ink); box-shadow:0 0 0 4px rgba(0,25,62,.1); }
.tl b{ font-family:var(--f-serif); font-size:1.05rem; }
.tl small{ display:block; color:var(--slate); font-size:.85rem; }

/* contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,56px); align-items:start; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.infolist{ list-style:none; margin:0; padding:0; }
.infolist li{ padding:16px 0; border-bottom:1px solid var(--rule); }
.infolist b{ display:block; font-size:.79rem; color:var(--slate); font-weight:600; margin-bottom:3px; }
.infolist a{ font-size:1.02rem; text-decoration:none; }

/* ---------- footer ---------- */
/* The band above already ends in generous whitespace, so the footer does
   not need to open with another 64px of it. The bigger problem was mobile:
   collapsing four blocks into one column made the footer 922px tall, a
   screen and a half of it. Two columns hold down to phone widths because
   the link labels are short; only the brand block, which carries the
   disclaimer paragraph, needs the full width. */
footer{ background:var(--ink); color:var(--on-dark); padding:clamp(34px,3.4vw,44px) 0 22px; font-size:.9rem; }
footer .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:26px 32px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.15); }
@media (max-width:820px){ footer .cols{ grid-template-columns:1fr 1fr; gap:24px 28px; } }
/* Four blocks in two columns pair up evenly. Spanning the brand across
   both looked tidier but left the fourth block alone in a half-empty row,
   which cost about 100px of height for nothing. */
@media (max-width:620px){
  footer .cols{ grid-template-columns:1fr 1fr; gap:22px 24px; }
}
footer picture{ display:block; }
footer img{ height:34px; width:auto; margin-bottom:11px; }
footer h4{ font-family:var(--f-sans); font-size:.79rem; font-weight:600; color:#fff; margin:0 0 10px; letter-spacing:.03em; }
footer ul{ list-style:none; margin:0; padding:0; }
footer li{ margin-bottom:6px; }
footer a{ color:var(--on-dark); text-decoration:none; }
footer a:hover{ color:#fff; text-decoration:underline; }
footer p{ color:#8FA1BE; font-size:.82rem; line-height:1.5; margin-bottom:0; }
.legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding-top:16px; color:#8296B5; font-size:.82rem; }

/* ---------- generated pages ----------
   Added when build/build.js took over rendering. Two jobs: give the
   country and province landing pages the few components they need, and
   replace the inline style attributes the hand-written pages carried, so
   the Content-Security-Policy can drop 'unsafe-inline' for styles. */

/* form honeypot — off-screen, never shown, never announced */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; }

.btn-nav{ padding:10px 18px; }
.band-p{ margin:10px 0 0; }
.mb-20{ margin-bottom:20px; }
.summary-h{ margin:14px 0 6px; font-weight:600; }
.note-spaced{ margin-top:22px; }

/* the checker's "convention in force on ..." line, hidden until it applies */
.pending{ display:none; color:var(--maple); font-size:.9rem; }

/* standalone verdict, outside the homepage checker */
.verdict-block{ max-width:68ch; margin-bottom:26px; }
.verdict-block .verdict{
  font-family:var(--f-serif); font-size:1.3rem; font-weight:600;
  color:var(--ink); margin-bottom:8px;
}
.verdict-block .pending{ display:block; }

.crumb span{ color:#B7C4D8; }

/* link lists: other destinations, provinces, related pages */
.linkgrid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  border:1px solid var(--rule); border-width:1px 0 0 1px;
}
.linkgrid a{
  display:block; background:#fff; padding:15px 18px; height:100%;
  border:1px solid var(--rule); border-width:0 1px 1px 0;
  text-decoration:none; transition:background .14s;
}
.linkgrid a:hover{ background:var(--paper); }
.linkgrid b{ display:block; font-family:var(--f-serif); font-size:1.02rem; font-weight:600; }
.linkgrid small{ display:block; color:var(--slate); font-size:.82rem; line-height:1.45; margin-top:2px; }

/* the one aside on a landing page */
.callout{
  margin-top:34px; max-width:68ch;
  background:var(--paper); border:1px solid var(--rule); border-left:3px solid var(--brass);
  padding:22px 26px;
}
.callout h3{ font-size:1.05rem; margin-bottom:7px; }
.callout p{ margin:0; color:var(--slate); font-size:.96rem; }

/* the standalone /services page: same rows as the homepage, but each
   stage carries a heading and a callout rather than a single line */
.rows-deep .row{ padding:38px 0; }
.rows-deep h2{ font-size:1.5rem; margin-bottom:9px; }
.rows-deep .callout{ margin-top:20px; }
.rows-deep .callout h3{ font-size:.82rem; letter-spacing:.04em; text-transform:uppercase;
  font-family:var(--f-sans); color:var(--slate); margin-bottom:6px; }

/* the standalone /faq page */
.faq-page{ max-width:840px; }
.faq-page summary{ font-size:1.05rem; }

/* privacy and terms
.prose h2{ font-size:1.28rem; margin:30px 0 8px; }
.prose h2:first-of-type{ margin-top:22px; }
.ownernote{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--rule);
  color:var(--slate); font-size:.9rem;
}

/* 404 */
.notfound{ min-height:70vh; display:grid; place-items:center; }
/* Centre the mark with flex rather than margin:auto. The image is a block
   inside a <picture> that had no display of its own, and auto margins on
   that combination do not resolve the same way in every browser — it
   rendered centred here and left-aligned on the reporter's machine.
   justify-content leaves nothing to interpret. */
.notfound picture{ display:flex; justify-content:center; }
.notfound .nf-logo{ height:56px; width:auto; margin:0 0 26px; }
.notfound h2{ font-size:1.5rem; margin-bottom:10px; }
.notfound p{ margin-left:auto; margin-right:auto; }
.nf-links{
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center;
  margin-top:38px; padding-top:26px; border-top:1px solid var(--rule);
  font-size:.93rem;
}

/* ---------- floating contact ----------

   Was a full-width maple pill pinned to the bottom of every phone screen,
   which covered content on every scroll. A circle takes a fraction of the
   space and opens the three things someone actually wants: call, email,
   or start a request.

   The panel is plain markup and plain links, so with JavaScript off it is
   simply always open. That is a worse layout than the toggle, but every
   action still works, which is the right failure. */
body{ padding-bottom:0; }
@media (max-width:1080px){ body{ padding-bottom:82px; } }

.fab{ position:fixed; right:16px; bottom:16px; z-index:70; display:none; }
@media (max-width:1080px){ .fab{ display:block; } }

/* A navy circle disappears against the navy sections it floats over, and
   a white one disappears against the paper ones. The white ring gives it
   an edge on dark backgrounds; the navy fill gives it one on light. */
.fab-btn{
  width:56px; height:56px; border-radius:50%; cursor:pointer;
  background:var(--ink); color:#fff; display:grid; place-items:center;
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  margin-left:auto; transition:background .16s;
}
.fab-btn:hover{ background:var(--ink-3); }
.fab-btn .fab-close{ display:none; }
.fab-btn[aria-expanded="true"] .fab-open{ display:none; }
.fab-btn[aria-expanded="true"] .fab-close{ display:block; }

.fab-menu{
  display:flex; flex-direction:column; gap:8px;
  margin-bottom:10px; align-items:flex-end;
}
/* display:flex on a class beats the browser's [hidden] { display:none },
   so the panel stayed visible with the attribute set. */
.fab-menu[hidden]{ display:none; }
.fab-item{
  display:flex; align-items:center; gap:11px;
  background:#fff; color:var(--ink); text-decoration:none;
  border:1px solid var(--rule); border-radius:999px;
  padding:9px 16px 9px 10px; max-width:78vw;
  box-shadow:0 4px 16px rgba(0,25,62,.16);
}
.fab-item b{ display:block; font-size:.9rem; font-weight:600; line-height:1.25; }
.fab-item small{ display:block; font-size:.76rem; color:var(--slate); line-height:1.3; }
.fab-ico{
  flex:none; width:34px; height:34px; border-radius:50%;
  background:var(--paper); color:var(--ink); display:grid; place-items:center;
}

@media (prefers-reduced-motion: no-preference){
  .fab-menu:not([hidden]){ animation:fabIn .16s ease-out; }
  @keyframes fabIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
}