/* ==========================================================================
   Snow Removal Canada — Sub-pages (Privacy · Terms · Accessibility · 404)
   Layers on top of style.css: same tokens, same nav, same footer.
   ========================================================================== */

/* ---------- page shell ---------- */
.page{
  position:relative; z-index:3;
  padding:calc(var(--nav-h) + clamp(36px,6vw,84px)) 0 clamp(72px,8vw,120px);
}
.page__head{
  max-width:56rem;
  padding-bottom:clamp(28px,3.5vw,44px);
  margin-bottom:clamp(36px,5vw,64px);
  border-bottom:1px solid var(--line);
}
.page__title{
  font-family:var(--f-display);
  font-size:clamp(2.2rem, 1.35rem + 3.6vw, 4.1rem);
  font-weight:700; line-height:1.04; letter-spacing:-.035em;
  color:var(--frost);
}
.page__title .serif{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  letter-spacing:-.005em;
  background:var(--grad-ice);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.page__lede{
  margin-top:18px; max-width:62ch;
  font-size:clamp(1rem, .95rem + .25vw, 1.12rem); color:var(--frost-3);
}
.page__meta{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  margin-top:24px; font-size:.8rem; color:var(--frost-3);
}
.page__meta span{ display:inline-flex; align-items:center; gap:8px; }
.page__meta i{ width:6px; height:6px; border-radius:50%; background:var(--ember); box-shadow:0 0 10px rgba(240,148,61,.8); }
.page__meta b{ color:var(--frost-2); font-weight:500; }

/* ---------- two-column body: sticky index + article ---------- */
.page__grid{
  display:grid; grid-template-columns:240px minmax(0,1fr);
  gap:clamp(36px,6vw,96px); align-items:start;
}
.toc{ position:sticky; top:calc(var(--nav-h) + 6px); }
.toc h2{
  font-family:var(--f-display); font-size:.7rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--frost);
  margin-bottom:14px;
}
.toc ol{ display:grid; }
.toc a{
  display:block; padding:8px 0 8px 16px; margin-left:1px;
  border-left:1px solid var(--line);
  font-size:.84rem; line-height:1.4; color:var(--frost-3);
  transition:color .3s, border-color .3s, padding-left .3s var(--ease);
}
.toc a:hover{ color:var(--frost); }
.toc a.is-active{ color:var(--frost); border-left-color:var(--red-hot); padding-left:20px; }
.toc__more{ margin-top:26px; display:grid; gap:8px; font-size:.8rem; }
.toc__more a{ color:var(--frost-3); transition:color .3s; }
.toc__more a:hover, .toc__more a[aria-current="page"]{ color:var(--ice); }

/* ---------- article typography ---------- */
.article{ max-width:74ch; min-width:0; counter-reset:sec; }
.article > section{ scroll-margin-top:calc(var(--nav-h) + 14px); }
.article > section + section{ margin-top:clamp(40px,5vw,60px); }
.article h2{
  display:flex; gap:16px; align-items:baseline;
  font-family:var(--f-display);
  font-size:clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  font-weight:700; letter-spacing:-.025em; line-height:1.15;
  color:var(--frost); margin-bottom:16px;
}
.article h2::before{
  content:counter(sec, decimal-leading-zero); counter-increment:sec;
  flex:none; font-size:.7rem; font-weight:600; letter-spacing:.2em;
  color:var(--ice); transform:translateY(-.35em);
}
.article h3{
  font-family:var(--f-display); font-size:1.02rem; font-weight:600;
  color:var(--frost); margin:24px 0 8px; letter-spacing:-.01em;
}
.article p{ margin:0 0 14px; color:var(--frost-2); font-size:.98rem; }
.article p:last-child{ margin-bottom:0; }
.article ul{ display:grid; gap:9px; margin:0 0 16px; }
.article ul li{ position:relative; padding-left:24px; color:var(--frost-2); font-size:.96rem; }
.article ul li::before{
  content:''; position:absolute; left:0; top:.78em; width:11px; height:1px;
  background:linear-gradient(90deg, var(--ice), transparent);
}
.article ul li strong, .article p strong{ color:var(--frost); font-weight:600; }
.article a{
  color:var(--ice); text-decoration:underline;
  text-decoration-color:rgba(143,196,239,.35); text-underline-offset:3px;
  transition:text-decoration-color .3s;
}
.article a:hover{ text-decoration-color:var(--ice); }

.note{
  margin:18px 0 22px; padding:18px 22px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); font-size:.92rem; color:var(--frost-2);
}
.note p{ font-size:inherit; margin:0; }
.note--red{ border-color:rgba(216,19,36,.35); background:rgba(216,19,36,.07); }
.note--ice{ border-color:rgba(143,196,239,.35); background:rgba(143,196,239,.06); }

.tbl-wrap{ overflow-x:auto; margin:6px 0 22px; -webkit-overflow-scrolling:touch; }
.article table{ width:100%; min-width:520px; border-collapse:collapse; font-size:.9rem; }
.article th, .article td{
  text-align:left; padding:12px 12px; vertical-align:top;
  border-bottom:1px solid var(--line); color:var(--frost-2);
}
.article th{
  font-family:var(--f-display); font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--frost);
}
.article td:first-child{ color:var(--frost); font-weight:500; }

/* checklist (accessibility page) */
.checks{ display:grid; gap:10px; margin:0 0 18px; }
.checks li{ display:flex; gap:12px; align-items:flex-start; padding:0; color:var(--frost-2); font-size:.95rem; }
.checks li::before{ display:none; }
.checks svg{ flex:none; width:18px; height:18px; margin-top:3px; color:var(--ice); }

/* contact card at the end of every legal page */
.page__contact{
  margin-top:clamp(40px,5vw,64px); padding:clamp(22px,3vw,32px);
  display:grid; grid-template-columns:1fr auto; gap:22px; align-items:center;
}
.page__contact h2{
  font-family:var(--f-display); font-size:1.15rem; font-weight:700;
  letter-spacing:-.02em; color:var(--frost); margin-bottom:6px;
}
.page__contact p{ font-size:.9rem; color:var(--frost-3); }
.page__contact-links{ display:grid; gap:8px; justify-items:start; }

/* ---------- 404 ---------- */
.nf{
  position:relative; z-index:3; overflow:hidden;
  min-height:100svh; display:flex; align-items:center;
  padding:calc(var(--nav-h) + 30px) 0 80px;
}
.nf__media{ position:absolute; inset:0; z-index:-2; }
.nf__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 40%;
  opacity:.28; filter:var(--ph-grade);
}
.nf__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(760px 420px at 20% 30%, rgba(216,19,36,.14), transparent 60%),
    linear-gradient(180deg, rgba(6,12,22,.6) 0%, rgba(6,12,22,.92) 70%, var(--ink) 100%);
}
.nf__inner{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,72px); align-items:center; }
.nf__code{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(6rem, 22vw, 17rem); line-height:.86; letter-spacing:-.06em;
  background:var(--grad-ice);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 30px 60px rgba(143,196,239,.18));
  margin-bottom:8px;
}
.nf__code i{ font-style:normal; }
.nf__title{
  font-family:var(--f-display);
  font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);
  font-weight:700; line-height:1.05; letter-spacing:-.03em; color:var(--frost);
}
.nf__title .serif{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  background:var(--grad-ice);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.nf__text{ margin-top:16px; max-width:46ch; color:var(--frost-3); font-size:1.02rem; }
.nf__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.nf__links{ margin-top:34px; display:grid; gap:10px; }
.nf__links a{ display:inline-flex; align-items:center; gap:10px; font-size:.9rem; color:var(--frost-2); transition:color .3s; }
.nf__links a:hover{ color:var(--ice); }
.nf__links a::before{ content:''; width:14px; height:1px; background:var(--ice); opacity:.7; }
.nf__panel{ padding:clamp(22px,3vw,34px); }
.nf__panel h2{
  font-family:var(--f-display); font-size:.7rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ice); margin-bottom:18px;
}
.nf__panel ul{ display:grid; gap:14px; }
.nf__panel li{ display:grid; gap:2px; font-size:.9rem; color:var(--frost-3); }
.nf__panel li b{ color:var(--frost); font-weight:600; font-size:1rem; }

.footer--slim{ padding-top:0; border-top:0; }
.footer--slim .footer__bottom{ border-top:1px solid var(--line); }

/* ---------- responsive ---------- */
@media (max-width:900px){
  /* minmax(0,1fr): a wide table inside the article must scroll, not widen the page */
  .page__grid{ grid-template-columns:minmax(0,1fr); gap:34px; }
  .toc{ position:static; }
  .toc ol{ display:flex; flex-wrap:wrap; gap:8px; }
  .toc a{
    border:1px solid var(--line); border-radius:100px; padding:8px 14px; margin:0;
    background:var(--surface); font-size:.8rem;
  }
  .toc a.is-active{ padding-left:14px; border-color:rgba(255,58,70,.5); color:var(--frost); }
  .toc__more{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:18px; }
  .page__contact{ grid-template-columns:1fr; }
  .nf__inner{ grid-template-columns:1fr; }
  .nf__panel{ max-width:520px; }
}
@media (max-width:640px){
  .article h2{ gap:12px; }
  .nf{ padding-bottom:60px; }
  .nf__code{ font-size:clamp(5.4rem, 30vw, 9rem); }
  .nf__actions .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .toc a{ transition:none; }
}