/* Settlement information site: CFM Lawyers brand
   Tokens lifted from cfmlawyers.ca: #103441 dominant, #69023F accent (logo),
   #5F123E deep accent, #BEC6C4 / #E4EFF5 neutrals, Montserrat + Work Sans.
   Targets: WCAG 2.1 AA, sub-500KB, no JS. */

:root {
  --teal: #103441;
  --teal-mid: #26454f;
  --teal-soft: #4a5a60;
  --burgundy: #69023F;
  --burgundy-dark: #5F123E;
  --grey-green: #BEC6C4;
  --pale: #E4EFF5;
  --ink: #1a1a1a;
  --body: #333333;
  --tint: #faf8f9;
  --focus: #0b5fff;
  --head: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

body {
  margin: 0;
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--body);
  background: #fff;
}

.skip { position: absolute; left: -9999px; background: var(--burgundy); color: #fff; padding: .75rem 1rem; z-index: 100; }
.skip:focus { left: 0; top: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- masthead ---------- */

header.site { background: var(--teal); color: #fff; }
header.site .inner {
  max-width: 76rem; margin: 0 auto; padding: 1.25rem 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
}
header.site .eyebrow {
  margin: 0 0 .2rem; font-family: var(--head); font-size: .6875rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--grey-green); font-weight: 600;
}
header.site .sitename { margin: 0; font-family: var(--head); font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
header.site .sitename a { color: #fff; text-decoration: none; }
header.site .sitename a:hover { text-decoration: underline; }
header.site .phone { font-family: var(--head); text-align: right; }
header.site .phone span {
  display: block; font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grey-green); font-weight: 500;
}
header.site .phone a { font-size: 1.1875rem; font-weight: 600; color: #fff; text-decoration: none; }
header.site .phone a:hover { text-decoration: underline; }

/* the burgundy hairline: CFM's logo colour as a rule */
.rule { height: 4px; background: var(--burgundy); }

/* phone-first call band: visible only on small screens */
.callband { display: none; background: var(--burgundy); text-decoration: none; }

/* ---------- navigation ---------- */

nav.site { border-bottom: 1px solid var(--grey-green); background: #fff; }
nav.site ul {
  max-width: 76rem; margin: 0 auto; padding: 0 1.5rem;
  list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.75rem;
}
nav.site a {
  display: inline-block; padding: .9rem 0;
  font-family: var(--head); font-size: .875rem; font-weight: 500;
  color: var(--teal-soft); text-decoration: none;
  border-bottom: 3px solid transparent;
}
nav.site a:hover { color: var(--teal); text-decoration: underline; }
nav.site a[aria-current="page"] { color: var(--teal); font-weight: 600; border-bottom-color: var(--burgundy); }

/* ---------- layout ---------- */

.wrap {
  max-width: 76rem; margin: 0 auto; padding: 2.5rem 1.5rem 3.5rem;
  display: flex; gap: 3.5rem; align-items: flex-start;
}
main { flex-grow: 1; max-width: 42rem; min-width: 0; }
aside.rail { width: 19rem; flex-shrink: 0; }

h1, h2, h3 { font-family: var(--head); color: var(--teal); line-height: 1.25; }
h1 { font-size: 2.125rem; font-weight: 700; margin: 0 0 1.125rem; }
h2 { font-size: 1.5rem; font-weight: 600; margin: 2.5rem 0 1rem; }
h3 { font-size: 1.125rem; font-weight: 600; margin: 1.75rem 0 .625rem; }

p, li { max-width: 38rem; }
p { margin: 0 0 1rem; }
a { color: var(--burgundy); }
a:hover { color: var(--burgundy-dark); }
ul, ol { padding-left: 1.5rem; }
li { margin-bottom: .5rem; }
strong { font-weight: 600; }

/* ---------- components ---------- */

.lead {
  font-size: 1.25rem; font-weight: 300; line-height: 1.6; color: var(--teal-mid);
  border-left: 4px solid var(--burgundy); padding-left: 1.25rem; margin-bottom: 2.25rem;
}

.keyfact {
  background: var(--tint); border-left: 5px solid var(--burgundy);
  padding: 1.375rem 1.625rem; margin: 1.75rem 0;
}
.keyfact p:last-child { margin-bottom: 0; }
.keyfact .big {
  display: block; font-family: var(--head); font-size: 2rem; font-weight: 700;
  color: var(--burgundy); line-height: 1.15; margin-bottom: .375rem;
}

/* teal panel: for statements of reassurance rather than figures */
.panel {
  background: var(--pale); border-left: 5px solid var(--teal);
  padding: 1.25rem 1.5rem; margin: 1.75rem 0;
}
.panel p { margin: 0; color: var(--teal); font-weight: 500; }

.tbc {
  background: #fff4d6; border: 2px dashed #b8860b;
  padding: 1rem 1.25rem; margin: 1.5rem 0; font-weight: 600; color: #4a3a06;
}

.cards { display: grid; gap: 1rem; margin: 1.75rem 0 2.5rem; }
@media (min-width: 34rem) { .cards { grid-template-columns: 1fr 1fr; } }
.card { border: 1px solid var(--grey-green); border-top: 3px solid var(--teal); padding: 1.25rem 1.375rem; }
.card h3 { margin: 0 0 .5rem; font-size: 1.0625rem; }
.card p { margin-bottom: .625rem; font-size: .9375rem; color: var(--teal-soft); line-height: 1.6; }
.card a { font-size: .9375rem; font-weight: 500; }

table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: 1rem; }
th, td { text-align: left; padding: .75rem 1rem; border: 1px solid var(--grey-green); vertical-align: top; }
th { background: var(--pale); font-family: var(--head); font-weight: 600; color: var(--teal); }

.qa { border-top: 1px solid var(--grey-green); padding-top: 1.25rem; margin-top: 1.25rem; }
.qa h3 { margin-top: 0; }

/* ---------- sidebar rail ---------- */

.rail-deadline { background: var(--teal); color: #fff; padding: 1.5rem; margin-bottom: 1.25rem; }
.rail-deadline .label {
  font-family: var(--head); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grey-green); font-weight: 600; margin: 0 0 .625rem;
}
.rail-deadline .date {
  font-family: var(--head); font-size: 1.5rem; font-weight: 700;
  line-height: 1.25; margin: 0 0 .625rem; color: #fff;
}
.rail-deadline p { font-size: .9375rem; line-height: 1.55; color: var(--pale); margin: 0; max-width: none; }

.rail-help { border: 1px solid var(--grey-green); padding: 1.375rem; }
.rail-help h2 { font-family: var(--head); font-size: 1rem; font-weight: 600; color: var(--teal); margin: 0 0 .625rem; }
.rail-help p { font-size: .9375rem; line-height: 1.6; color: var(--teal-soft); margin: 0 0 .75rem; max-width: none; }
.rail-help .num { font-family: var(--head); font-size: 1.3125rem; font-weight: 700; color: var(--burgundy); text-decoration: none; }
.rail-help .num:hover { text-decoration: underline; }

/* ---------- footer ---------- */

footer.site { background: var(--teal); color: var(--pale); margin-top: 3rem; }
footer.site .inner {
  max-width: 76rem; margin: 0 auto; padding: 2rem 1.5rem;
  display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between;
}
footer.site p { font-size: .9375rem; line-height: 1.7; margin: 0 0 .75rem; max-width: 30rem; }
footer.site strong { font-family: var(--head); color: #fff; font-weight: 600; }
footer.site .fine { color: var(--grey-green); font-size: .875rem; }
footer.site a { color: #fff; }

/* ---------- small screens ---------- */

@media (max-width: 60rem) {
  .wrap { flex-direction: column; gap: 2.5rem; }
  aside.rail { width: 100%; }
  header.site .phone { display: none; }        /* replaced by the tap band */
  .callband { display: block; padding: .9375rem 1.5rem; }
  .callband span {
    display: block; font-family: var(--head); font-size: .6875rem; letter-spacing: .12em;
    text-transform: uppercase; color: #f0dde8; font-weight: 600; margin-bottom: .125rem;
  }
  .callband strong { display: block; font-family: var(--head); font-size: 1.375rem; font-weight: 700; color: #fff; }
  h1 { font-size: 1.75rem; }
  .lead { font-size: 1.125rem; }
}

/* ---------- print ---------- */

@media print {
  nav.site, .skip, .callband, aside.rail { display: none; }
  header.site, footer.site { background: #fff; color: #000; }
  header.site .sitename a, footer.site strong { color: #000; }
  body { font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ---------- additions, 9 Sep 2026 ---------- */

/* plain notice panel: teal border, normal-weight body text */
.notice { background: var(--pale); border-left: 5px solid var(--teal); padding: 1.25rem 1.5rem; margin: 1.75rem 0; }
.notice p { margin: 0; }
.notice p + p { margin-top: .75rem; }

/* an email address given as a key fact */
.keyfact .email { font-family: var(--head); font-size: 1.25rem; font-weight: 600; }

/* long addresses must be allowed to wrap on narrow screens */
.keyfact a, .notice a, footer.site a { overflow-wrap: anywhere; }

/* visually hidden but still read by screen readers (table captions) */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }