/* ============================================================
   Ottawa Property Guide — design system
   Palette: Capital Navy #17324D · Rideau Teal #2B7A78 ·
   Limestone #F5F1E8 · Copper #C66A3D · Snow #FFFFFF · Ink #18232D
   Balance: ~55% Limestone/Snow, 30% Navy, 10% Teal, 5% Copper.
   Type: DM Serif Display (Georgia fallback) headings, Inter body.
   ============================================================ */

/* ---- Fonts ---- */
@font-face {
  font-family: 'Inter var';
  src: url('/assets/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
/* Self-hosted since 2026-08-04 (19-3): the --serif token promised this font
   from day one but no @font-face ever backed it, so every heading rendered
   the Georgia fallback. SIL OFL licence; latin subset, 400 only — the face
   has no other weights. */
@font-face {
  font-family: 'DM Serif Display';
  src: url('/assets/fonts/dm-serif-display-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  --navy: #17324D;
  --navy-deep: #10253a;
  --teal: #2B7A78;
  --teal-dark: #226260;      /* AA on limestone for large text/borders */
  --limestone: #F5F1E8;
  --limestone-dark: #EAE3D3;
  --copper: #C66A3D;
  --copper-dark: #A8552F;    /* AA-safe copper for text on light */
  --snow: #FFFFFF;
  --ink: #18232D;
  --ink-soft: #44505b;

  --serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter var', Inter, Arial, sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.06rem);
  --step-1: clamp(1.19rem, 1.13rem + 0.3vw, 1.33rem);
  --step-2: clamp(1.42rem, 1.32rem + 0.5vw, 1.66rem);
  --step-3: clamp(1.7rem, 1.53rem + 0.85vw, 2.07rem);
  --step-4: clamp(2.03rem, 1.77rem + 1.3vw, 2.59rem);
  --step-5: clamp(2.43rem, 2.03rem + 2vw, 3.4rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem; --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4.5rem;

  /* ---- Corner radii: THREE TIERS, and that is the whole system ----
     Collapsed from five values on 2026-08-03 (#16 item 4). There were 10px,
     16px, 18px, 20px and 999px in play; 16 and 20 sit within 2px of 18, which
     is invisible on screen but a coin-flip every time someone adds a
     component. --radius-lg and --radius-panel are retired into --radius-card.

     THE TIER IS CHOSEN BY THE ELEMENT'S HEIGHT, not by how important it is.
     `.gloss-az a` is ~30px tall, so 18px on it is 15px short of a full pill --
     a blanket "raise everything to 18" would have turned the glossary A-Z
     buttons into circles. Short controls keep the small radius. */
  --radius-sm: 10px;      /* short controls: inputs, pagination, chips, icon buttons */
  --shadow: 0 1px 3px rgba(23, 50, 77, 0.08), 0 8px 24px rgba(23, 50, 77, 0.07);
  --container: 72rem;
  --container-narrow: 46rem;

  /* ---- round-1 redesign additions (design/handover/HANDOFF.md §2) ---- */
  --radius-pill: 999px;   /* buttons and chips */
  --radius-card: 18px;    /* every container and panel */

  --space-9: 5.25rem;
  --space-10: 6.5rem;

  --hairline: #EEE9DC;
  --border-soft: #EAE3D3;
  --border-strong: #D5CCB8;
  --limestone-mid: #E6DFCE;
  --teal-soft: #E4EEED;
  --copper-soft: #FBF6F1;
  --copper-tint: #F3E1D7;
  --copper-light: #E8B79B;

  /* The sticky header's height — .site-header__inner's min-height plus its
     1px bottom border. The home hero subtracts this to size itself against the
     space actually left on screen. Keep the two in step. */
  --header-h: calc(4.25rem + 1px);
}

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* The header is sticky, so ANY element jumped to by a #fragment lands under it
   unless it says otherwise. This was being fixed one id at a time, which meant
   every new anchor arrived broken and stayed broken until someone happened to
   click it — /buying/#situations, linked from the land transfer tax
   calculator, sat behind the header for exactly that reason.
   A default fixes the whole site at once, including anchors nobody has added
   yet. It is deliberately weak — an attribute selector, placed early — so the
   per-context values later in this file still win: .step's own clearance, the
   170px on step lists at narrow widths, the 72px under .ftb-nav. */
[id] { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--limestone);
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p, ul, ol { margin: 0 0 var(--space-4); }
a { color: var(--teal-dark); text-underline-offset: 2px; }
a:hover { color: var(--navy); }
:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 2px;
  border-radius: 2px;
}
::selection { background: var(--teal); color: var(--snow); }

/* ---- Skip link ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--snow);
  padding: var(--space-3) var(--space-5); z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0; text-decoration: none;
}
.skip-link:focus { left: 0; color: var(--snow); }

/* ---- Layout ---- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--space-7); }
.section--tight { padding-block: var(--space-6); }
.grid { display: grid; gap: var(--space-5); }
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Header ---- */
.site-header {
  background: var(--snow);
  border-bottom: 1px solid var(--limestone-dark);
  position: sticky; top: 0; z-index: 50;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); min-height: 4.25rem;
}
.site-logo { display: inline-flex; align-items: center; }
.site-logo img { height: 56px; width: auto; }
.site-nav ul { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: inline-block; padding: 0.6875rem 0.875rem;
  color: var(--navy); text-decoration: none; font-weight: 550;
  font-size: var(--step--1); border-radius: var(--radius-pill);
}
/* .is-section is a child page of this nav item — /tools/mortgage-payment/ under
   Tools. It looks identical to the current page on purpose: that is how the nav
   read before the destination was fixed, and only the destination was wrong. */
.site-nav a:hover, .site-nav a[aria-current="page"], .site-nav a.is-section { background: var(--limestone); color: var(--navy); }
.site-nav a[aria-current="page"], .site-nav a.is-section { font-weight: 600; box-shadow: inset 0 -2px 0 var(--copper); }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--limestone-dark);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  color: var(--navy); cursor: pointer;
}
.header-search {
  display: inline-flex; align-items: center; padding: var(--space-2);
  color: var(--navy); border-radius: var(--radius-sm);
}
/* The bar copy of the search icon exists for mobile only — on desktop the
   in-nav one shows and this one hides; below 900px they swap. */
.header-search--bar { display: none; }
@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: var(--space-2); }
  /* margin-left:auto soaks up the space-between slack so the icon sits
     beside the Menu button instead of floating mid-bar. */
  .header-search--bar {
    display: inline-flex; justify-content: center;
    min-width: 44px; min-height: 44px; margin-left: auto;
  }
  .site-nav .nav-search-item { display: none; }
  .site-nav {
    display: none; position: absolute; inset-inline: 0; top: 100%;
    background: var(--snow); border-bottom: 1px solid var(--limestone-dark);
    box-shadow: var(--shadow); padding: var(--space-4) var(--space-5) var(--space-5);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { display: block; padding: var(--space-3); font-size: var(--step-0); }
}

/* ---- Footer ---- */
.site-footer { background: var(--navy-deep); color: #cfd9e2; margin-top: var(--space-8); }
.site-footer a { color: var(--snow); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--snow); }
.site-footer__main { display: grid; gap: var(--space-6); padding-block: var(--space-7); }
@media (min-width: 800px) { .site-footer__main { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-footer h2 { color: var(--snow); font-size: var(--step-1); margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--space-2); font-size: var(--step--1); }
.site-footer__logo img { height: 55px; margin-bottom: var(--space-4); }
.site-footer__blurb { font-size: var(--step--1); max-width: 34ch; }
.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-block: var(--space-5);
  font-size: var(--step--1);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
}
.site-footer__disclaimer { font-size: 0.8rem; color: #a9b8c5; max-width: 70ch; }

/* ---- Hero ---- */
.hero { background: var(--navy); color: var(--snow); position: relative; overflow: hidden; }
.hero .container { position: relative; padding-block: var(--space-8); }
.hero h1 { color: var(--snow); max-width: 18ch; }
.hero__kicker {
  font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase;
  color: #9fd8d6; font-weight: 600; margin-bottom: var(--space-3);
}
.hero__lede { font-size: var(--step-1); max-width: 52ch; color: #dbe4ec; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.hero--page { background: var(--snow); color: var(--ink); border-bottom: 1px solid var(--limestone-dark); }
/* v3 compact headers: only the homepage hero keeps the tall band + step-5 h1 */
.hero:not(.hero--home) .container { padding-block: var(--space-6); }
.hero:not(.hero--home) h1 { font-size: var(--step-4); }
.hero:not(.hero--home) .hero__lede { font-size: var(--step-0); }
.hero--page .container { padding-block: var(--space-5); }
.hero--page h1 { color: var(--navy); }
.hero--page .hero__lede { color: var(--ink-soft); }
.hero--page .hero__kicker { color: var(--teal-dark); }
/* doorway motif: a subtle arch in the hero corner */
.hero__motif { position: absolute; right: -4rem; bottom: -6rem; opacity: 0.08; pointer-events: none; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.7rem 1.25rem; border-radius: 999px;
  font-family: var(--sans); font-size: var(--step--1); font-weight: 600;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn--primary { background: var(--copper); color: #fff; }
.btn--primary:hover { background: var(--copper-dark); color: #fff; }
.btn--secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--secondary:hover { background: var(--navy); color: var(--snow); }
.hero .btn--secondary { color: var(--snow); border-color: rgba(255,255,255,0.6); }
.hero .btn--secondary:hover { background: rgba(255,255,255,0.12); color: var(--snow); }
.btn--ghost { background: transparent; color: var(--teal-dark); padding-inline: var(--space-2); }
.btn--ghost:hover { color: var(--navy); }

/* ---- Series label / tags ---- */
.series-label {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.25rem 0.6rem; border-radius: 4px;
}
.series-label--teal { background: #e2efee; color: var(--teal-dark); }
.series-label--navy { background: #e3e9ef; color: var(--navy); }
.series-label--copper { background: #f6e5db; color: var(--copper-dark); }
.tag {
  display: inline-block; font-size: 0.78rem; font-weight: 550;
  background: var(--limestone); color: var(--ink-soft);
  border: 1px solid var(--limestone-dark);
  padding: 0.15rem 0.6rem; border-radius: 999px;
}

/* ---- Cards ---- */
.card {
  background: var(--snow); border-radius: var(--radius-card);
  box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(23,50,77,0.1), 0 14px 34px rgba(23,50,77,0.12); }
.card__media { aspect-ratio: 4 / 3; background: var(--limestone-dark); position: relative; }
.card__media--placeholder {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); font-size: var(--step--1); text-align: center;
  padding: var(--space-4); background:
    linear-gradient(135deg, var(--limestone) 0%, var(--limestone-dark) 100%);
}
.card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.card__title { font-size: var(--step-1); margin: 0; }
.card__title a { color: var(--navy); text-decoration: none; }
.card__title a:hover { color: var(--teal-dark); }
.card__title a::after { content: ""; position: absolute; inset: 0; } /* whole-card click */
.card { position: relative; }
.card__excerpt { font-size: var(--step--1); color: var(--ink-soft); margin: 0; flex: 1; }
.card__meta { font-size: 0.78rem; color: var(--ink-soft); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.card__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); position: relative; z-index: 1; }

/* ---- Breadcrumbs ---- */
.breadcrumbs { font-size: var(--step--1); color: var(--ink-soft); padding-block: var(--space-2); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.breadcrumbs li + li::before { content: "›"; margin-right: var(--space-2); color: var(--ink-soft); }
.breadcrumbs a { color: var(--teal-dark); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* ---- Article / prose ---- */
.prose { max-width: var(--container-narrow); }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); }
.prose li { margin-bottom: var(--space-2); }
.prose blockquote {
  border-left: 4px solid var(--teal); margin: var(--space-5) 0;
  padding: var(--space-3) var(--space-5); background: var(--snow);
  border-radius: 0 var(--radius-card) var(--radius-card) 0; font-family: var(--serif);
  font-size: var(--step-1); color: var(--navy);
}
.prose blockquote cite { display: block; font-family: var(--sans); font-size: var(--step--1); color: var(--ink-soft); margin-top: var(--space-2); font-style: normal; }
.note {
  background: var(--snow); border-left: 4px solid var(--teal);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: var(--space-4) var(--space-5); margin: var(--space-5) 0;
  font-size: var(--step--1);
}
.note--verify { border-left-color: var(--copper); background: #fdf6f1; }
.article-header { max-width: var(--container-narrow); }
/* ---- Article layout: reading column + sticky contents rail ----
   An article used to be a narrow column pinned to the left of a wide
   container, with the related-guides grids below running full width — so the
   page read as though it had slipped sideways. The rail turns that empty band
   into navigation instead of just balancing it, reusing the language of the
   .step-rail on the journey pages so it looks like the same site.
   Single column below 1000px, where the rail would crowd the text. */
.article-layout { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
.article-main { min-width: 0; }
/* Round 1 of the 19-4 redesign (Template D): a measured reading column.
   These were `max-width: none` — the prose filled whatever the grid column
   gave it, ~85 characters a line on a 1440 screen. 48rem holds the line at
   roughly 75 characters; the empty right gutter inside the column is the
   editorial breathing room the concept asks for, not waste. */
.article-main .prose,
.article-main .article-header { max-width: 48rem; }
/* Articles read at 17px — the brief's floor for long-form. Scoped to the
   article page rather than every .prose so tool/explainer density is
   untouched until their own rounds. */
.article-page .prose { font-size: 1.0625rem; }
@media (min-width: 1000px) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; }
}

/* ---- In-flow contents on narrow screens (Template D) ----
   The <details> under the header IS the phone contents; the rail keeps the
   desktop contents. Exactly one renders per viewport — the other is
   display:none, so the accessibility tree never carries the list twice. */
.article-toc {
  margin: var(--space-4) 0 var(--space-5);
  background: var(--snow); border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
}
.article-toc summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); cursor: pointer; list-style: none;
  padding: var(--space-3) var(--space-4);
  font-size: var(--step--1); font-weight: 650; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.article-toc summary::-webkit-details-marker { display: none; }
.article-toc summary::after {
  content: ''; flex: 0 0 auto; width: 0.5rem; height: 0.5rem;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.article-toc[open] summary::after { transform: rotate(225deg); }
.article-toc summary:focus-visible { outline: 3px solid var(--copper-dark); outline-offset: -3px; border-radius: var(--radius-card); }
.article-toc__list {
  margin: 0; padding: 0 var(--space-4) var(--space-3); list-style: none;
  border-top: 1px solid var(--hairline);
}
.article-toc__list li + li { border-top: 1px solid var(--hairline); }
.article-toc__list a {
  display: block; padding: 0.55rem 0; min-height: 44px; box-sizing: border-box;
  color: var(--ink-soft); text-decoration: none; font-size: var(--step--1);
}
.article-toc__list a:hover { color: var(--navy); }
@media (min-width: 1000px) {
  .article-toc { display: none; }
}
@media (max-width: 999px) {
  /* The rail's contents duplicate the in-flow TOC below this width; its
     series card, glossary link and Back to top stay. Scoped to articles —
     other rail consumers keep their full rail until their own rounds. */
  .article-page .article-rail__head,
  .article-page .article-rail__list { display: none; }
}
.article-rail { font-size: var(--step--1); }
@media (min-width: 1000px) {
  /* 90px clears the sticky site header */
  .article-rail { position: sticky; top: 90px; }
}
.article-rail__head {
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft); margin: 0 0 var(--space-3);
}
.article-rail__list { list-style: none; margin: 0 0 var(--space-5); padding: 0; border-left: 2px solid var(--limestone-dark); }
.article-rail__list a {
  display: block; padding: 0.35rem 0 0.35rem var(--space-3); margin-left: -2px;
  border-left: 2px solid transparent; text-decoration: none; color: var(--ink-soft);
}
.article-rail__list a:hover { color: var(--navy); }
.article-rail__list .is-here a { border-left-color: var(--teal-dark); color: var(--navy); font-weight: 600; }
.article-rail__card {
  background: var(--snow); border: 1px solid var(--border-soft);
  border-radius: var(--radius-card); padding: var(--space-4);
}
.article-rail__card p { margin: 0 0 0.4rem; }
.article-rail__card p:last-child { margin-bottom: 0; }
/* Deliberately quiet: a way out for a reader who is stuck on one word, not a
   call to action competing with the rail card above it. Same muted ink as the
   contents list, and it sits between the card and Back to top. */
.article-rail__gloss { margin: var(--space-4) 0 0; }
.article-rail__gloss a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--ink-soft); text-decoration: none;
}
.article-rail__gloss a:hover { color: var(--navy); text-decoration: underline; }
.article-rail__gloss-icon { flex: none; }
.article-rail__top { margin: var(--space-4) 0 0; }
/* The dek — was an inline-styled .hero__lede; a real class since Round 1. */
.article-header__dek {
  font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft);
  margin: var(--space-3) 0 0; max-width: 60ch;
}
.article-header__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4);
  font-size: var(--step--1); color: var(--ink-soft);
  padding-block: var(--space-4); border-top: 1px solid var(--limestone-dark);
  margin-top: var(--space-5);
}

/* ---- Sources (Round 1, Template D) ----
   The same heading, labels and URLs as always — set off by a thin editorial
   rule and quieter type so the list reads as an appendix, not a section of
   the argument. */
.article-sources { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border-strong); }
.article-sources h2 {
  margin: 0 0 var(--space-3); font-family: var(--sans);
  font-size: var(--step--1); font-weight: 650;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.article-sources ul { margin: 0; padding-left: 1.1rem; }
.article-sources li { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: var(--space-2); }
.article-sources a { color: var(--teal-dark); }
.article-dates { font-size: var(--step--1); color: var(--ink-soft); }

/* ---- Factbox ---- */
.factbox {
  background: var(--snow); border-radius: var(--radius-card);
  box-shadow: var(--shadow); padding: var(--space-5); margin: var(--space-5) 0;
}
.factbox h3 { font-size: var(--step-1); margin-bottom: var(--space-3); }
.factbox dl { margin: 0; display: grid; gap: var(--space-2); }
.factbox .fact { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: var(--space-3); font-size: var(--step--1); }
.factbox dt { color: var(--ink-soft); font-weight: 550; }
.factbox dd { margin: 0; }
.factbox .fact--verify dd { color: var(--copper-dark); }
.factbox__source { font-size: 0.78rem; color: var(--ink-soft); margin-top: var(--space-3); }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; margin: var(--space-5) 0; border-radius: var(--radius-card); box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; background: var(--snow); font-size: var(--step--1); }
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--limestone-dark); vertical-align: top; }
thead th { background: var(--navy); color: var(--snow); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }

/* ---- Glossary (queue 10-B) ----
   One page, 102 terms. Groups are filters rather than sections, so a term in
   several journeys renders once and carries several tags. */
.gloss-controls { margin: var(--space-5) 0 var(--space-4); }
.gloss-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gloss-chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.45rem 0.9rem; font: inherit; font-size: var(--step--1); font-weight: 600;
  color: var(--navy); background: var(--snow);
  border: 1.5px solid var(--limestone-dark); border-radius: 999px; cursor: pointer;
}
.gloss-chip:hover { background: var(--limestone); }
.gloss-chip.is-on { background: var(--navy); color: var(--snow); border-color: var(--navy); }
.gloss-chip__n { font-weight: 500; opacity: 0.7; font-variant-numeric: tabular-nums; }
.gloss-chip.is-on .gloss-chip__n { opacity: 0.8; }

.gloss-search { margin-top: var(--space-3); }
.gloss-search input {
  width: 100%; max-width: 34rem; padding: 0.65rem 0.9rem; font: inherit;
  border: 1.5px solid var(--limestone-dark); border-radius: var(--radius-sm); background: var(--snow);
}
.gloss-status { min-height: 1.4em; margin: var(--space-1) 0 0; font-size: var(--step--1); color: var(--ink-soft); }

.gloss-az { display: flex; flex-wrap: wrap; gap: 0.15rem; margin-top: var(--space-3); }
.gloss-az a, .gloss-az span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.85rem; padding: 0.25rem 0.3rem;
  font-size: var(--step--1); font-weight: 600; border-radius: var(--radius-sm);
}
.gloss-az a { color: var(--navy); text-decoration: none; }
.gloss-az a:hover { background: var(--navy); color: var(--snow); }
.gloss-az span { color: var(--limestone-dark); }

.gloss-list { margin: 0; }
.gloss-letter {
  margin: var(--space-5) 0 var(--space-2); padding-bottom: var(--space-1);
  font-family: var(--font-display); font-size: var(--step-2); color: var(--copper);
  border-bottom: 2px solid var(--limestone-dark);
  /* Offset so an anchored jump does not tuck the heading under the sticky header. */
  scroll-margin-top: 5rem;
}
.gloss-item { padding: var(--space-3) 0; border-bottom: 1px solid var(--limestone); scroll-margin-top: 5rem; }
.gloss-item:target { background: var(--limestone); box-shadow: 0 0 0 var(--space-3) var(--limestone); border-radius: 2px; }
.gloss-term { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-1); }
.gloss-term__link { font-weight: 700; color: var(--navy); text-decoration: none; font-size: var(--step-0); }
.gloss-term__link:hover { text-decoration: underline; }
.gloss-tags { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.gloss-tag {
  padding: 0.1rem 0.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink-soft); background: var(--limestone); border-radius: 999px; white-space: nowrap;
}
.gloss-def { margin: 0; }
.gloss-def p { margin: 0 0 var(--space-1); max-width: 62ch; }
.gloss-also, .gloss-see { font-size: var(--step--1); }
.gloss-also { color: var(--ink-soft); }
.gloss-see a { color: var(--copper); font-weight: 600; text-decoration: none; }
.gloss-see a:hover { text-decoration: underline; }
.gloss-empty { margin: var(--space-5) 0; font-size: var(--step-0); color: var(--ink-soft); }

/* Builder grid — the numbered, four-across list of every builder on
   /new-builds/. A table rather than a card grid so no builder gets visual
   weight the others don't: equal cells, alphabetical, read left to right.
   Cells are sized by percentage so a short final row still lines up. */
.builder-grid td { width: 25%; padding: 0; border-bottom: 1px solid var(--limestone-dark); }
.builder-grid td:empty { border-bottom: none; }
.builder-grid tr:last-child td { border-bottom: none; }
.builder-grid td + td { border-left: 1px solid var(--limestone-dark); }
.builder-grid a {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-weight: 600; text-decoration: none; color: var(--navy);
  min-height: 100%;
}
.builder-grid a:hover, .builder-grid a:focus-visible { background: var(--limestone); text-decoration: underline; }
.builder-grid__n {
  flex: none; font-variant-numeric: tabular-nums; font-weight: 500;
  font-size: var(--step--1); color: var(--ink-soft);
}
/* Two across on phones. Width alone cannot do this — table cells do not
   reflow, so four 25% columns stayed four columns and overflowed a 375px
   viewport into a sideways scroll inside .table-wrap. Each row becomes a
   two-column grid instead, so a 4-cell row renders as 2x2. The explicit
   roles above keep the table's semantics once display is overridden. */
@media (max-width: 700px) {
  .builder-grid tr { display: grid; grid-template-columns: 1fr 1fr; }
  .builder-grid td { width: auto; }
  .builder-grid td:empty { display: none; }
  .builder-grid td:nth-child(odd) { border-left: none; }
  .builder-grid tr:last-child td { border-bottom: 1px solid var(--limestone-dark); }
  .builder-grid tr:last-child td:last-of-type { border-bottom: none; }
}

/* ---- Forms ---- */
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-weight: 600; font-size: var(--step--1); margin-bottom: var(--space-1); color: var(--navy); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.65rem 0.85rem; font: inherit; font-size: var(--step--1);
  border: 1.5px solid var(--limestone-dark); border-radius: var(--radius-sm);
  background: var(--snow); color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 3px solid var(--copper); outline-offset: 1px; border-color: var(--copper);
}
.field__hint { font-size: 0.8rem; color: var(--ink-soft); margin-top: var(--space-1); }
.field--error input, .field--error textarea { border-color: #b3261e; }
.field__error { color: #b3261e; font-size: 0.8rem; margin-top: var(--space-1); font-weight: 550; }
.hp-field { position: absolute; left: -9999px; height: 0; overflow: hidden; } /* honeypot */

/* ---- Alerts ---- */
.alert { padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); margin-bottom: var(--space-5); font-size: var(--step--1); }
.alert--success { background: #e2efee; border-left: 4px solid var(--teal); color: #174b49; }
.alert--error { background: #fbeae8; border-left: 4px solid #b3261e; color: #7a1a14; }

/* ---- Newsletter module ---- */
.newsletter {
  background: var(--navy); color: var(--snow);
  border-radius: var(--radius-card); padding: var(--space-6);
}
.newsletter h2, .newsletter h3 { color: var(--snow); }
.newsletter p { color: #dbe4ec; font-size: var(--step--1); }
.newsletter form { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.newsletter input[type="email"] {
  flex: 1 1 16rem; padding: 0.7rem 1rem; font: inherit;
  border: none; border-radius: 999px;
}
.newsletter__consent { font-size: 0.78rem; color: #a9b8c5; margin-top: var(--space-3); }
/* The consent line runs on both dark backgrounds — the navy module and the
   footer. Underlined because .site-footer a strips underlines, and a bare
   colour shift is not enough to find a link inside small muted text. */
.newsletter__consent a { color: #dbe4ec; text-decoration: underline; }
.newsletter__consent a:hover { color: var(--snow); text-decoration: underline; }
.newsletter--inline { margin-block: var(--space-7); }

/* ---- Filters ---- */
.filters {
  background: var(--snow); border-radius: var(--radius-card); box-shadow: var(--shadow);
  padding: var(--space-5); margin-bottom: var(--space-6);
}
.filters fieldset { border: none; margin: 0 0 var(--space-3); padding: 0; }
.filters legend { font-weight: 650; font-size: var(--step--1); color: var(--navy); margin-bottom: var(--space-2); }
.filters .choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filters .choice { position: relative; }
.filters .choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.filters .choice span {
  display: inline-block; padding: 0.3rem 0.8rem; border-radius: 999px;
  border: 1.5px solid var(--limestone-dark); font-size: var(--step--1); cursor: pointer;
  background: var(--snow);
}
.filters .choice input:checked + span { background: var(--teal); border-color: var(--teal); color: #fff; }
.filters .choice input:focus-visible + span { outline: 3px solid var(--copper); outline-offset: 2px; }

/* ---- Empty states / pagination ---- */
.empty-state { text-align: center; padding: var(--space-8) var(--space-5); color: var(--ink-soft); }
.empty-state h2 { color: var(--navy); }

/* ---- Site search (queue #9) ---------------------------------------- */
.search-form { max-width: 34rem; margin-top: 1.25rem; display: flex; gap: var(--space-2); }
.search-form input {
  flex: 1; min-width: 0; padding: 0.7rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--limestone-dark); font: inherit; background: var(--snow);
}
.search-form__hint { margin-top: var(--space-2); font-size: var(--step--1); }
.search-note {
  border-left: 3px solid var(--gold, var(--navy)); padding: var(--space-2) var(--space-4);
  background: var(--limestone); border-radius: 0 var(--radius-card) var(--radius-card) 0;
  margin-bottom: var(--space-5);
}
/* The honest answer when someone searches for listings. Styled as an answer,
   not as an error — it is the most useful thing on the page for that query. */
.search-answer {
  border: 1px solid var(--limestone-dark); border-radius: var(--radius-card);
  background: var(--snow); padding: var(--space-6); margin-bottom: var(--space-7);
}
.search-answer h2 { margin: 0 0 var(--space-3); color: var(--navy); font-size: var(--step-2); }
.search-answer p { margin: 0 0 var(--space-3); color: var(--ink-soft); }
.search-answer__links { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.search-answer__links a { font-weight: 600; }

.search-results { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.search-result {
  padding: var(--space-5); border: 1px solid var(--limestone-dark);
  border-radius: var(--radius-card); background: var(--snow);
}
.search-result__cat {
  margin: 0 0 var(--space-1); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 700;
}
.search-result__title { margin: 0 0 var(--space-2); font-size: var(--step-1); }
.search-result__title a { text-decoration: none; }
.search-result__title a:hover { text-decoration: underline; }
.search-result__desc { margin: 0 0 var(--space-2); color: var(--ink-soft); font-size: var(--step--1); }
.search-result__url { margin: 0; font-size: 0.78rem; color: var(--ink-soft); word-break: break-word; }
.pagination { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-7); flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: 0.45rem 0.9rem; border-radius: var(--radius-sm); text-decoration: none;
  font-size: var(--step--1); border: 1px solid var(--limestone-dark); background: var(--snow);
}
.pagination [aria-current="page"] { background: var(--navy); color: var(--snow); border-color: var(--navy); }

/* ---- Image slots (placeholder-aware) ---- */
.image-slot { margin: var(--space-5) 0; border-radius: var(--radius-card); overflow: hidden; }
.image-slot--placeholder {
  background: linear-gradient(135deg, var(--limestone) 0%, var(--limestone-dark) 100%);
  border: 1.5px dashed var(--limestone-dark);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--ink-soft); padding: var(--space-6);
  font-size: var(--step--1); gap: var(--space-2);
}
.image-slot--placeholder .ratio-note { font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; }
.image-slot figcaption { font-size: 0.8rem; color: var(--ink-soft); padding: var(--space-2) var(--space-4); }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3 { aspect-ratio: 4 / 3; }

/* ---- Section headers ---- */
.section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head p { margin: var(--space-2) 0 0; color: var(--ink-soft); max-width: 60ch; }
/* A heading that carries more than one control. `align-items: end` on the
   parent lines the group up with the baseline of the heading text; the
   back-to-top link's own `margin-left: auto` would push it away from the
   button here, so it is cancelled inside this group. */
.section-head__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.section-head__actions .back-to-top { margin-left: 0; }
.kicker { font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-dark); font-weight: 650; }

/* ---- Path list (advantages / tradeoffs / who-for) ---- */
.pathlist { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.pathlist li { position: relative; padding-left: 1.6rem; margin-bottom: var(--space-2); }
.pathlist li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.7rem; height: 0.7rem; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: var(--teal);
}
.pathlist--trade li::before { background: var(--copper); border-radius: 2px; transform: none; top: 0.6em; }

/* ---- Disclaimer strip ---- */
.disclaimer-strip {
  background: var(--limestone-dark); font-size: var(--step--1); color: var(--ink-soft);
  padding: var(--space-4) 0; text-align: center;
}
.disclaimer-strip .container { max-width: 60rem; }

/* ============================================================
   v3 — full-guide IA (Stage 1): nav subscribe button, compact
   page headers, homepage hero band, journey accordion, pathway
   panels, principles strip, spine step lists, tools link hub.
   ============================================================ */

/* ---- Nav subscribe button ---- */
.site-nav .nav-subscribe {
  padding: 0.45rem 1.1rem; margin-left: var(--space-2);
  color: #fff; font-size: var(--step--1);
}
.site-nav .nav-subscribe:hover { background: var(--copper-dark); color: #fff; }
.site-nav a.nav-subscribe[aria-current="page"] { box-shadow: none; border-radius: 999px; }
@media (max-width: 899px) {
  .site-nav .nav-subscribe { display: inline-flex; margin: var(--space-3) 0 0; }
}

.article-header h1 { font-size: var(--step-4); }

/* ---- Compact page header (replaces tall hero--page) ---- */
.page-hero { background: var(--snow); border-bottom: 1px solid var(--limestone-dark); }
.page-hero .container { padding-block: var(--space-5) var(--space-5); }
.page-hero h1 { font-size: var(--step-4); color: var(--navy); margin: 0 0 var(--space-2); max-width: 28ch; }
.page-hero__kicker {
  font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-dark); font-weight: 650; margin: 0 0 var(--space-1);
}
.page-hero__lede { font-size: var(--step-0); color: var(--ink-soft); max-width: 62ch; margin: 0; }
.page-hero__verified {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--step--1); color: var(--teal-dark); margin: var(--space-2) 0 0;
}
.breadcrumbs--in-hero { padding-block: 0; margin-bottom: var(--space-2); }
.breadcrumbs--in-hero .container { padding-inline: 0; }
.page-hero + .section, .page-hero + .container.section { padding-top: var(--space-5); }

/* ---- Homepage hero: photo/video backdrop + navy overlay ---- */
.hero--home { position: relative; background: var(--navy); }
.hero--home .hero__media {
  position: absolute; inset: 0; overflow: hidden;
}
.hero--home .hero__media img, .hero--home .hero__media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero--home .hero__media video { position: absolute; inset: 0; }
/* Phones and reduced-motion users get the still poster, not the video */
@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  .hero--home .hero__media video { display: none; }
}
.hero--home .hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(23, 50, 77, 0.72);
}
.hero--home .container { position: relative; padding-block: var(--space-7); }
.hero--home h1 { max-width: 22ch; }
@media (max-width: 700px) {
  .hero--home .hero__actions .btn { width: 100%; justify-content: center; }
}

/* ---- Journey accordion (four questions) ---- */
.journey details {
  background: var(--snow); border: 1px solid var(--limestone-dark);
  border-radius: var(--radius-card); margin-bottom: var(--space-3);
}
.journey summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-weight: 650; color: var(--navy); font-size: var(--step-1);
}
.journey summary::-webkit-details-marker { display: none; }
.journey summary::after { content: "+"; font-size: 1.4em; color: var(--teal-dark); line-height: 1; }
.journey details[open] summary::after { content: "–"; }
.journey .journey__answers { padding: 0 var(--space-5) var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-block; padding: 0.45rem 1rem; border-radius: 999px;
  background: var(--limestone); color: var(--navy); text-decoration: none;
  font-size: var(--step--1); font-weight: 550; border: 1px solid var(--limestone-dark);
}
.chip:hover { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ---- Pathway panels (the five doors) ---- */
.pathway {
  background: var(--snow); border: 1px solid var(--limestone-dark);
  border-radius: var(--radius-card); padding: var(--space-5); display: flex;
  flex-direction: column; gap: var(--space-3);
}
.pathway__icon { color: var(--teal-dark); }
.pathway h3 { margin: 0; font-size: var(--step-2); }
.pathway__tagline { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.pathway ul { list-style: none; margin: 0; padding: 0; font-size: var(--step--1); }
.pathway li { padding-block: 0.3rem; border-bottom: 1px dashed var(--limestone-dark); }
.pathway li:last-child { border-bottom: none; }
.pathway a { color: var(--navy); text-decoration: none; }
.pathway a:hover { color: var(--teal-dark); text-decoration: underline; }
.pathway .btn { margin-top: auto; align-self: start; }
.coming {
  color: var(--ink-soft); font-style: italic;
}
.coming::after {
  content: "publishing soon"; font-style: normal; font-size: 0.72rem;
  background: var(--limestone); border: 1px solid var(--limestone-dark);
  border-radius: 999px; padding: 0.1rem 0.5rem; margin-left: var(--space-2);
  color: var(--ink-soft); white-space: nowrap;
}

/* ---- Principles strip (why OPG) ---- */
.principles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 700px) { .principles { grid-template-columns: repeat(2, 1fr); } }
.principles li { display: flex; gap: var(--space-3); align-items: start; }
.principles li svg { color: var(--teal-dark); flex-shrink: 0; margin-top: 0.15em; }

/* ---- Spine pages: numbered step-by-step ---- */
.spine-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-4); }
.spine-steps { counter-reset: spine; list-style: none; margin: 0; padding: 0; }
.spine-steps > li {
  counter-increment: spine; position: relative;
  padding: var(--space-5) 0 var(--space-5) 4rem;
  border-top: 1px solid var(--limestone-dark);
}
.spine-steps > li::before {
  content: counter(spine); position: absolute; left: 0; top: var(--space-5);
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--navy); color: var(--snow); font-family: var(--serif);
  font-size: var(--step-1); display: flex; align-items: center; justify-content: center;
}
.spine-steps h3 { margin: 0 0 var(--space-2); font-size: var(--step-2); }
.spine-steps p { margin: 0 0 var(--space-2); color: var(--ink); max-width: 70ch; }
.spine-steps .spine-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

/* ---- Tools: official-links hub ---- */
.linkhub { display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .linkhub { grid-template-columns: repeat(2, 1fr); } }
.linkhub__item {
  background: var(--snow); border: 1px solid var(--limestone-dark);
  border-radius: var(--radius-card); padding: var(--space-4) var(--space-5);
}
.linkhub__item h3 { margin: 0 0 var(--space-1); font-size: var(--step-1); }
.linkhub__item p { margin: 0 0 var(--space-2); font-size: var(--step--1); color: var(--ink-soft); }
.linkhub__item a { font-size: var(--step--1); }

/* Registry-driven entries: issuer, editorial note, per-link verified date */
.linkhub__item .link-issuer {
  margin: 0 0 var(--space-2); font-size: var(--step--2);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); font-weight: 600;
}
.linkhub__item .link-note {
  margin: 0 0 var(--space-2); font-size: var(--step--2);
  border-left: 2px solid var(--copper-dark); padding-left: var(--space-3);
}
.linkhub__item .link-verified {
  margin: var(--space-2) 0 0; font-size: var(--step--2); color: var(--ink-soft);
  display: flex; align-items: center; gap: .35em;
}
/* Jump-list at the top of the hub reads as navigation, not as content */
.linkhub--jump { margin-bottom: var(--space-6); }
@media (min-width: 900px) { .linkhub--jump { grid-template-columns: repeat(3, 1fr); } }

/* ---- Calculators ---- */
.calc {
  background: var(--snow); border: 1px solid var(--limestone-dark);
  border-radius: var(--radius-card); padding: var(--space-6);
}
.calc .field { margin-bottom: var(--space-4); }
.calc label { display: block; font-weight: 600; font-size: var(--step--1); color: var(--navy); margin-bottom: var(--space-1); }
.calc input[type="text"], .calc input[type="number"] {
  width: 100%; max-width: 16rem; padding: 0.55rem 0.85rem;
  border: 1.5px solid var(--limestone-dark); border-radius: var(--radius-sm); font: inherit;
}
.calc input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.calc .field--check label { display: inline-flex; gap: var(--space-2); align-items: center; font-weight: 550; }
.calc__grid { display: grid; gap: var(--space-2) var(--space-5); }
@media (min-width: 700px) { .calc__grid { grid-template-columns: 1fr 1fr; } }
.calc__results {
  margin-top: var(--space-4); padding: var(--space-4) var(--space-5);
  background: var(--limestone); border-radius: var(--radius-card);
}
/* ---- Template H (19-4 R4): two-column calculator on desktop ----
   Inputs left, the results summary right and STICKY, so on long forms
   (cash-flow has 12 fields) the numbers stay in view while you type.
   Mobile keeps the single column, inputs first — the source order.
   All seven calculators share one skeleton (one grid, one results dl,
   1–2 privacy lines), so one generic rule covers the set; the child
   default keeps any future extra element in the input column rather
   than letting grid auto-flow drop it beside the results. */
.container--calc { max-width: 64rem; }
/* The explainer prose under a calculator keeps its old reading measure —
   the container widened for the calculator, not the text. */
.container--calc .prose { max-width: var(--container-narrow); }
@media (min-width: 900px) {
  .calc {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: var(--space-6);
    align-items: start;
  }
  .calc > * { grid-column: 1; }
  .calc > .calc__results {
    grid-column: 2; grid-row: 1;
    position: sticky; top: 90px;
    margin-top: 0;
  }
}
.calc__results dt { font-size: var(--step--1); color: var(--ink-soft); margin-top: var(--space-3); }
.calc__results dt:first-child { margin-top: 0; }
.calc__results dd { margin: 0; font-size: var(--step-1); font-weight: 650; color: var(--navy); font-variant-numeric: tabular-nums; }
.calc__privacy { font-size: var(--step--1); color: var(--ink-soft); margin-top: var(--space-3); }

/* ---- Printables ---- */
.checklist { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.checklist li { display: flex; gap: var(--space-3); align-items: start; padding-block: 0.4rem; border-bottom: 1px dashed var(--limestone-dark); }
.checklist li::before {
  content: ""; flex-shrink: 0; width: 1.05rem; height: 1.05rem; margin-top: 0.15rem;
  border: 1.5px solid var(--navy); border-radius: 4px;
}
/* ---- Printed checklist sheet — partials/print-checklist.php ----
   The sheet renders ONLY on the dedicated print document (/print/checklist/,
   queue 20-18); this base rule is the safety net if it is ever included
   anywhere else. Sizes are in pt/mm so Letter and A4 both come out
   unclipped. */
.print-sheet { display: none; }

@page { size: auto; margin: 14mm 12mm; }

/* ============================================================================
   PRINTING (rebuilt 20-18, 2026-08-04 — replaced 18-3's class switch)

   Owner rule, site-wide: **printing a page gives you that page. The checklist
   sheet is its own document at /print/checklist/?list=…, and the "Print the
   checklist" links simply go there.**

   18-3 enforced the same rule with a JS-managed `.is-printing-checklist`
   class revealing the sheet at print time — and what printed depended on that
   transient class being alive at rasterization. Mobile printing is
   asynchronous: afterprint and the safety timer stripped the class before the
   phone rendered, so the button printed the 11-page ordinary page (20-18).
   Now WHAT PRINTS IS A PROPERTY OF THE DOCUMENT and cannot race: source pages
   do not carry the sheet at all, and the print document carries only it.

   Two groups remain:
   1. @media print, below — ordinary print hygiene for EVERY page: chrome that
      means nothing on paper, and base type.
   2. Sheet styling, further down, OUTSIDE any media query — the sheet exists
      only on the print document, where the screen preview should look exactly
      like the paper.
   ============================================================================ */

/* ---- 1. Every print, including Ctrl+P ---- */
@media print {
  .site-header, .site-footer, .breadcrumbs, .newsletter, .disclaimer-strip,
  .print-link, .print-toolbar { display: none !important; }
  /* Photo hero (19-2): an ordinary print gets the hero's TEXT, not a page of
     photograph — the image, overlay and journey panel stay on screen, and the
     white-on-navy copy flips to black-on-paper. Scoped checklist printing is
     untouched: on step pages the whole hero carries .step-hero and block 2
     hides it entirely. */
  .photo-hero__media, .photo-hero__overlay, .photo-hero__bar,
  .ftb-hero__media, .ftb-hero__scrim { display: none !important; }
  .photo-hero { min-height: 0; background: none; }
  .photo-hero__content { padding-bottom: 0; max-width: none; }
  .photo-hero h1, .photo-hero .page-hero__lede, .photo-hero .page-hero__kicker,
  .photo-hero .page-hero__verified, .photo-hero .page-hero__verified svg,
  .photo-hero .step-hero__badges, .photo-hero .step-hero__badges svg { color: #000 !important; }
  /* Home hero v6 prints the same way: its text, not a page of photograph.
     The doors and the search form are navigation and do nothing on paper.
     The lede's mobile-hidden tail is restored — paper is not a phone. */
  .home-hero__frame, .journey-tabs, .hero-search { display: none !important; }
  .home-hero { min-height: 0; background: none; }
  .home-hero__eyebrow, .home-hero h1, .home-hero__lede { color: #000 !important; text-shadow: none; }
  .home-hero__lede-more { display: inline !important; }
  .page-hero { border-bottom: 2px solid #000; }
  .page-hero .container, .container { padding-inline: 0; }
  body { font-size: 11pt; }
  a { text-decoration: none; color: inherit; }
  .checklist li { break-inside: avoid; }
}

/* ---- 2. The print document (/print/checklist/) ---- */
/* Screen scaffolding: a paper-toned backdrop, the sheet on a white "page",
   and a toolbar (back link + reprint button) that group 1 above hides from
   the printer. */
.print-doc { background: var(--limestone); }
.print-toolbar {
  max-width: 210mm; margin: 0 auto; padding: 0.7rem 8mm;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.print-doc__page {
  max-width: 210mm; margin: 0 auto 2rem; padding: 10mm 8mm;
  background: #fff; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
}

/* Sheet styling — deliberately OUTSIDE @media print (the sheet exists only on
   the print document, and the screen preview should be the artifact; mm/pt
   render proportionally on screen). Descendant rules need no scoping: they
   only ever apply inside a .print-sheet. */
.print-doc .print-sheet {
  display: block; background: #fff; color: #000;
  font-family: var(--sans); font-size: 10pt; line-height: 1.35;
}
.print-sheet > *:last-child { margin-bottom: 0; }

/* Header: logo lockup + wordmark fallback, title, subject, printed date */
.print-sheet__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8mm; margin-bottom: 5mm; padding-bottom: 2.5mm; border-bottom: 2pt solid #000;
}
.print-sheet__brand { flex: 0 0 auto; }
.print-sheet__logo { display: block; width: 44mm; height: auto; }
.print-sheet__brandline { display: block; margin-top: 1mm; font-size: 8.5pt; font-weight: 600; }
.print-sheet__ident { flex: 1 1 auto; text-align: right; }
.print-sheet__title { font-family: var(--serif); font-size: 15pt; line-height: 1.15; margin: 0 0 1.5mm; }
.print-sheet__lede { font-size: 8.5pt; margin: 0 0 1.5mm auto; max-width: 92mm; }
.print-sheet__subject { font-size: 9.5pt; font-weight: 700; margin: 0 0 1mm; }
.print-sheet__subject span { font-weight: 400; }
.print-sheet__date { font-size: 9pt; font-weight: 700; margin: 0; }
.print-sheet__empty { font-size: 10pt; }

/* One section per journey phase. (Multi-list sheets print one list when the
   URL asks for it — rent-lease's ?block= — but that filter is applied
   server-side now, so there is no [hidden] rule to fight specificity.) */
.print-block { margin-bottom: 5mm; }
.print-block__head {
  font-family: var(--serif); font-size: 12pt; margin: 0 0 1.5mm;
  padding-bottom: 1mm; border-bottom: 1pt solid #000;
  break-after: avoid; page-break-after: avoid;
}
.print-block__head span { font-family: var(--sans); font-size: 8.5pt; font-weight: 400; }
.print-block__head span::before { content: " \2014  "; }

.print-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.print-col--box { width: 9mm; }
.print-col--n { width: 11mm; }
.print-col--status { width: 21mm; }
.print-table thead { display: table-header-group; }
/* Override the site's navy thead fill (thead th, ~line 324). Its white text
   would print invisibly whenever the reader has background graphics off,
   which is Chrome's default — the header must not depend on a fill. */
.print-table th {
  text-align: left; padding: 0 2mm 1mm 0; border-bottom: 1pt solid #000;
  background: none; color: #000;
  font-size: 7.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.print-sheet table { background: none; }
.print-table td {
  padding: 1.6mm 2mm 1.6mm 0; border-bottom: 0.5pt solid #777;
  vertical-align: top; overflow-wrap: break-word;
}
.print-table tr { break-inside: avoid; page-break-inside: avoid; }
.print-td--n { font-size: 9pt; font-variant-numeric: tabular-nums; }
.print-action { display: block; font-size: 10pt; font-weight: 600; }
.print-need { display: block; margin-top: 0.6mm; font-size: 8.5pt; }
.print-need span { font-weight: 600; }
.print-td--status { font-size: 9pt; font-weight: 700; white-space: nowrap; }

/* Checked/unchecked are two stroked vectors, not a background colour, so
   they stay distinguishable in greyscale print and in saved PDFs. */
.print-box-wrap { display: inline-block; line-height: 0; }
.print-box { display: none; }
.print-box--todo { display: inline; }
tr.is-done .print-box--todo { display: none; }
tr.is-done .print-box--done { display: inline; }

.print-summary { margin-top: 6mm; break-inside: avoid; page-break-inside: avoid; }
.print-summary h2 { font-family: var(--serif); font-size: 12pt; margin: 0 0 2mm; }
.print-summary__table { border-collapse: collapse; min-width: 68mm; }
.print-summary__table th, .print-summary__table td {
  text-align: left; padding: 1mm 6mm 1mm 0; border-bottom: 0.5pt solid #777; font-size: 9.5pt;
}
.print-summary__table th { font-weight: 400; }
.print-summary__table td { font-weight: 700; }
/* Supplementary only — the percentage is printed as text as well. */
.print-bar {
  width: 80mm; max-width: 100%; height: 3.5mm; margin-top: 3mm;
  border: 1pt solid #000; border-radius: 1mm; overflow: hidden;
}
.print-bar__fill {
  display: block; width: 0; height: 100%; background: #000;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.print-sheet__foot {
  margin-top: 6mm; padding-top: 2mm; border-top: 1pt solid #000;
  font-size: 8pt; break-inside: avoid;
}
.print-sheet__foot p { margin: 0 0 0.8mm; }

/* On paper the screen scaffolding goes: no backdrop, no card shadow, no
   max-width — the sheet fills the @page margins alone. (The toolbar is
   hidden in print group 1 above.) */
@media print {
  .print-doc { background: none; }
  .print-doc__page {
    max-width: none; margin: 0; padding: 0;
    background: none; box-shadow: none;
  }
}

/* ============================================================
   Round 1 redesign (design/handover/HANDOFF.md) — homepage journey
   tabs + phase filter, the step template, footer socials.
   ============================================================ */

/* ---- Footer socials + copyright row ---- */
.site-footer__main { align-items: start; }
@media (min-width: 800px) { .site-footer__main { grid-template-columns: 1.4fr 1.7fr 1fr; } }
.footer-nav-cols { display: grid; gap: var(--space-3) var(--space-6); }
@media (min-width: 500px) { .footer-nav-cols { grid-template-columns: 1fr 1fr; } }
.footer-nav-cols a { font-size: var(--step--1); }
.footer-secondary { display: flex; flex-direction: column; gap: var(--space-6); }
.footer-social { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.28); color: var(--snow);
}
.footer-social a:hover { background: rgba(255,255,255,0.1); text-decoration: none; }
.site-footer__copyright {
  border-top: 1px solid rgba(255,255,255,0.15); padding-block: var(--space-4);
  font-size: var(--step--1); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
}

/* ---- Home hero v6 — cinematic photo-first, 2026-08-04 (#19 homepage pass) --
   Mock A (owner-approved 2026-08-04) merged with the Redesign-3 "Concept 1 —
   Editorial Authority" master brief. The photograph runs full-bleed under a
   navy scrim — bottom-up on phones, left-to-right on desktop — with the copy
   in white directly on it, the four doors as translucent glass cards and the
   search as a white pill with a copper ring. The v5 frosted panel and copper
   dock retired here.

   Two structural decisions carried over from v5 unchanged, because each was
   paid for with an owner-reported bug:

   - z-index: 1 + isolation. The suggestions dropdown must paint OVER the
     phase-filter strip below: its scroller is position:relative and later in
     the document, so at z-index:auto it wins (owner screenshots 2026-08-02).
     Do not raise above 50 — the sticky header must still pass over the hero.
   - The <picture class="home-hero__frame"> is the clipping box for the
     photograph, NOT the hero itself — overflow:hidden on .home-hero clipped
     the suggestions dropdown at the hero's bottom edge. The scrim is the
     frame's ::after so it clips with the photo and needs no extra markup. */
.home-hero {
  position: relative;
  isolation: isolate;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* Phones: the copy stack rides the scrim at the photograph's foot, leaving
     the top half of the screen to the photo — the point of the redesign. */
  justify-content: flex-end;
  min-height: min(46rem, calc(100svh - var(--header-h)));
  /* Paints before the photo decodes, and it is the colour the scrim fades to,
     so a slow image arrives into the same composition. */
  background: var(--navy-deep);
  padding-block: 1.25rem 1.15rem;
}

.home-hero__frame {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  overflow: hidden;
}

.home-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

/* The scrim — the same grammar as .photo-hero__overlay on the 19-2 section
   heroes, which is deliberate: home and the section pages read as one family.
   The desktop block flips it left-to-right. */
.home-hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(16, 37, 58, 0) 34%,
    rgba(16, 37, 58, 0.38) 58%,
    rgba(16, 37, 58, 0.86) 82%,
    rgba(16, 37, 58, 0.95) 100%);
}

/* .container supplies margin:auto and the inline padding; the max-width is
   tightened to a phone/tablet column here and widened again on desktop. */
.home-hero__inner {
  position: relative;
  /* width: 100% is load-bearing: the hero is a flex column and .container's
     auto inline margins DISABLE flex stretching, so without it this grid
     shrinks to fit-content and floats centred at whatever width its own
     children happen to want. */
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "copy"
    "doors"
    "search";
  align-content: end;
  max-width: 44rem;
}

.home-hero__copy { grid-area: copy; }

.home-hero__eyebrow {
  margin: 0;
  color: var(--copper-light);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* The separators are real "·" characters, not CSS dots, so the badge reads as
   "Independent · Educational · Ottawa only" to a screen reader rather than
   running together into one word. */
.home-hero__eyebrow span { margin-inline: 0.45rem; }

/* White serif on the photograph — DM Serif Display, self-hosted 2026-08-04
   (19-3). The 26ch cap is a guard; text-wrap: balance picks the break. */
.home-hero h1 {
  max-width: 26ch;
  text-wrap: balance;
  margin: 0.5rem 0 0;
  color: var(--snow);
  font-family: var(--serif);
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  font-weight: 400;
  line-height: 1.12;
  text-shadow: 0 1px 14px rgba(16, 37, 58, 0.45);
}

.home-hero__lede {
  max-width: 55ch;
  margin: 0.6rem 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Sentences two and three of the approved lede — painted from 901px up only;
   the phone composition budgets its screen for headline + doors + search.
   The words never leave the DOM (see home.php). */
.home-hero__lede-more { display: none; }

/* ---- Journey doors (homepage) ----
   The class names are load-bearing: site.js finds .js-journey-tabs, walks
   .journey-tab, reads data-journey and toggles .is-active to drive the journey
   preview further down the page. Restyle freely; do not rename.

   v6: translucent glass cards in a 2×2 grid on the photograph — the v5 frosted
   band (and its DO-NOT-NARROW constraint, which existed to keep the band
   attached to a panel that no longer exists) retired with the panel. */
.journey-tabs {
  grid-area: doors;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 1rem;
}

.journey-tab {
  display: flex;
  align-items: center;
  justify-content: start;
  text-align: left;
  gap: 0.6rem;
  min-width: 0;
  min-height: 3.3rem;
  padding: 0.55rem 0.8rem;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--snow);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.journey-tab__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--snow);
  opacity: 0.9;
}

.journey-tab__title { min-width: 0; }

.journey-tab:hover { background: rgba(255, 255, 255, 0.2); }

/* The selected door: brighter glass, copper base — colour is not the only
   signal (the underline travels with it). */
.journey-tab.is-active {
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--copper-light);
  box-shadow: inset 0 -2px 0 var(--copper);
}

.journey-tab:hover .journey-tab__title,
.journey-tab.is-active .journey-tab__title {
  text-decoration: underline;
  text-decoration-color: var(--copper-light);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* Snow, not the global copper ring — copper all but vanishes on the scrim. */
.journey-tab:focus-visible { outline: 3px solid var(--snow); outline-offset: 2px; }

/* ---- Search ----
   v6: a white pill with a copper ring and a navy submit — the copper dock
   retired. `position: relative` is required: the suggestions panel is
   absolutely positioned against this. */
.hero-search {
  position: relative;
  grid-area: search;
  margin-top: 0.8rem;
}

.hero-search__box {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 3.5rem;
  padding: 0.35rem 0.35rem 0.35rem 1rem;
  border: 2px solid var(--copper);
  border-radius: var(--radius-pill);
  background: var(--snow);
  box-shadow: 0 10px 30px rgba(16, 37, 58, 0.35);
}

.hero-search__icon {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--copper-dark);
}

.hero-search__box input {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
}

.hero-search__box input::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

/* The ring goes on the whole field: the input fills it edge to edge, so an
   outline on the input alone draws inside the pill and reads as a glitch.
   Snow, because the ring sits on the dark scrim. */
.hero-search__box:focus-within {
  outline: 3px solid var(--snow);
  outline-offset: 3px;
}

.hero-search__submit {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding-inline: 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--snow);
  font-size: 0.95rem;
  font-weight: 600;
}

.hero-search__submit:hover { background: var(--navy-deep); }

/* ---- Live suggestions (owner 2026-08-02, replaced the four static chips) ----
   Absolutely positioned so opening the list never reflows the hero — a dropdown
   that pushes the page down as you type is worse than no dropdown. Sits under
   the field, matched to its width. */
.hero-search__suggest {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.45rem);
  left: 0;
  right: 0;
  overflow: hidden;
  border: 1px solid rgba(23, 50, 77, 0.14);
  border-radius: 1rem;
  background: var(--snow);
  box-shadow: 0 18px 40px rgba(16, 37, 58, 0.26);
}

.hero-search__suggest-list {
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  max-height: min(24rem, 50vh);
  overflow-y: auto;
}

.hero-search__suggest-item a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.7rem;
  color: var(--navy);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  font-weight: 600;
  text-decoration: none;
}

/* One rule for hover and keyboard, so a moused row and an arrowed row never
   look different — .is-active is set by site.js as the listbox moves. */
.hero-search__suggest-item:hover a,
.hero-search__suggest-item.is-active a {
  background: rgba(239, 139, 65, 0.16);
  outline: 2px solid var(--copper);
  outline-offset: -2px;
}

.hero-search__suggest-title { min-width: 0; }

.hero-search__suggest-kind {
  flex: 0 0 auto;
  color: var(--ink-soft, #5a6b7d);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Suggestion rows sit on the white dropdown, so the global copper ring works
   there; the submit button is navy on a white pill, so a navy ring with an
   offset draws on the white and stays visible. */
.hero-search a:focus-visible { outline: 3px solid var(--copper-dark); outline-offset: 2px; }
.hero-search__submit:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .journey-tab, .hero-search__suggest-item a, .hero-search__submit { transition: 160ms ease; }
  .journey-tab:hover { transform: translateY(-1px); }
}

/* ---- Desktop: the copy column rides the left of the photograph ----
   The scrim flips to left-to-right (the 19-2 grammar) and the whole stack —
   copy, doors, search — becomes one left column over the darkened side, with
   the photograph clear on the right. The v5 measured-column machinery (the
   34/50%/42rem clamp and its per-viewport door-width table) retired with the
   frosted panel: the doors are now a 2×2 grid inside a fixed 38rem column, so
   the label-width arithmetic that table protected no longer exists. */
@media (min-width: 901px) {
  .home-hero {
    justify-content: center;
    min-height: min(44rem, calc(100svh - var(--header-h)));
    padding-block: 3rem;
  }

  .home-hero__frame::after {
    background: linear-gradient(90deg,
      rgba(16, 37, 58, 0.9) 0%,
      rgba(16, 37, 58, 0.72) 34%,
      rgba(16, 37, 58, 0.28) 58%,
      rgba(16, 37, 58, 0.08) 100%);
  }

  .home-hero__photo { object-position: center; }

  .home-hero__inner {
    max-width: var(--container);
    align-content: center;
    justify-items: start;
  }

  .home-hero__copy,
  .journey-tabs,
  .hero-search { width: 100%; max-width: 38rem; }

  .home-hero h1 { font-size: clamp(2.4rem, 3.4vw, 3.2rem); }

  .home-hero__lede { font-size: 1.05rem; line-height: 1.55; }
  .home-hero__lede-more { display: inline; }

  .journey-tabs { gap: 0.7rem; margin-top: 1.4rem; }
  .journey-tab { min-height: 3.6rem; font-size: 0.98rem; }

  .hero-search { margin-top: 1.1rem; }
}

/* Short phones — the stack is bottom-anchored and compact, so unlike v5 there
   is no height crisis to manage; this only eases the type a little. The 44px
   touch minimum on the doors and the Search button is untouched. */
@media (max-width: 680px) and (max-height: 720px) {
  .home-hero h1 { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .journey-tab { min-height: 3rem; }
}
/* ---- Phase filter ("where you are") ---- */
.phase-filter {
  background: var(--snow); border-block: 1px solid var(--hairline);
  padding-block: var(--space-4);
}
.phase-filter__inner { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.phase-filter__label { display: flex; flex-direction: column; gap: 0.2rem; white-space: nowrap; }
.phase-filter__label span:first-child {
  font-size: 0.72rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7580;
}
.phase-filter__label span:last-child { font-size: var(--step--1); color: var(--ink-soft); }
/* Sub-type chooser. The item count varies by journey (buying and selling have
   four, renting and commercial three), so auto-fit rather than a fixed three
   columns — a hardcoded repeat(3) dropped the fourth onto its own row. */
.phase-filter__scroller { flex: 1; min-width: 0; position: relative; }
/* Only ever shown at the width where the strip actually scrolls — the mobile
   block below turns it on. `visibility` rather than `display` once it has been
   obeyed, so dismissing it does not make the row jump. */
.phase-filter__hint {
  display: none; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; color: var(--ink-soft);
}
.phase-filter__hint svg { flex: 0 0 auto; color: var(--copper); }
.phase-filter__hint.is-done { visibility: hidden; }
.phase-filter__items {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}
/* The item is a WRAPPER now, not the link: it holds the category link plus the
   "First Time Home Buyer" checkbox. The link keeps the styling the item used to
   carry, so the strip looks unchanged apart from the new box beneath. */
.phase-filter__item {
  display: flex; flex-direction: column; gap: var(--space-2); text-align: left; min-width: 0;
}
.phase-filter__link {
  display: flex; align-items: flex-start; gap: 0.7rem; text-align: left; min-width: 0;
  background: none; border: none; padding: 0.25rem 0; font: inherit; cursor: pointer;
  text-decoration: none;
}
/* Concept-1 package, owner 2026-08-04: the accent bar became an accent-coloured
   outline icon per category. The colour cycles by POSITION, not by meaning, so
   every journey's strip gets the same four-colour rhythm as the package's
   mobile mock (orange, green, blue, purple) with no per-category data. */
.phase-filter__item:nth-child(4n+1) { --cat-accent: var(--copper-dark); }
.phase-filter__item:nth-child(4n+2) { --cat-accent: var(--teal-dark); }
.phase-filter__item:nth-child(4n+3) { --cat-accent: #3D6FA8; }
.phase-filter__item:nth-child(4n+4) { --cat-accent: #7A5EA8; }
.phase-filter__icon {
  flex: 0 0 auto; display: inline-flex; margin-top: 0.1rem;
  color: var(--cat-accent, var(--copper-dark));
}
.phase-filter__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
/* These are links, so they need a hover state — the old buttons had none,
   which is part of why the strip did not read as something you could click. */
.phase-filter__link strong { font-size: 0.95rem; color: var(--navy); font-weight: 600; }
.phase-filter__link:hover strong,
.phase-filter__item.is-active .phase-filter__link strong { color: var(--copper-dark); }
.phase-filter__item.is-active .phase-filter__link strong {
  text-decoration: underline; text-decoration-color: var(--copper);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
/* Scoped to the text column — a bare `.phase-filter__link span` also catches
   .phase-filter__icon (a span) at higher specificity and greys the accents. */
.phase-filter__text span { font-size: var(--step--1); color: var(--ink-soft); }

/* Hidden unless scripting is available: without JS the tick would change
   nothing, and a control that does nothing is a dead click. */
.phase-filter__ftb { display: none; }
.js .phase-filter__ftb {
  display: flex; align-items: center; gap: 0.45rem; cursor: pointer;
  font-size: 0.78rem; color: var(--ink-soft); line-height: 1.25;
}
.phase-filter__ftb input { flex: 0 0 auto; margin: 0; accent-color: var(--copper); cursor: pointer; width: 1rem; height: 1rem; }
/* The label is the tap target, and at its natural height it was 16px — far
   under the ~44px a finger needs. Keyed to WIDTH rather than `pointer: coarse`
   because the strip already becomes a touch carousel at this breakpoint, and a
   coarse-pointer query cannot be verified in a desktop browser at a narrow
   viewport. Padding rather than a fixed height so the text can still wrap. */
@media (max-width: 767px) {
  .js .phase-filter__ftb { min-height: 44px; padding-block: 0.4rem; }
}
.phase-filter__ftb:hover { color: var(--copper-dark); }
.phase-filter__item.is-ftb .phase-filter__ftb { color: var(--copper-dark); font-weight: 600; }

/* ---- Audience band ----
   A prominent hand-off from a general journey to an audience-specific one.
   Sits directly under the hero rather than in a grid at the foot of the page:
   the whole point is that a first-time buyer should not have to reach the
   bottom of the general spine to discover the guide written for them. */
.audience-band {
  background: var(--limestone); border-block: 1px solid var(--hairline);
  padding-block: var(--space-5);
}
.audience-band__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap;
}
.audience-band__kicker {
  font-size: 0.72rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--copper-dark); margin: 0 0 0.35rem;
}
.audience-band__text { margin: 0; max-width: 64ch; color: var(--ink-soft); font-size: var(--step--1); }
.audience-band .btn { flex: 0 0 auto; }

/* ---- Builder directory ----
   A summary row per builder that expands to its communities. Built on <details>
   rather than a JS-toggled <table> so a row still opens with JavaScript off,
   which a real table row cannot do without script. The header strip and each
   summary share one grid template so the columns line up like a table without
   being one. */
.builder-list { margin: var(--space-6) 0; border: 1px solid var(--border-soft); border-radius: var(--radius-card); overflow: hidden; }
.builder-list__head,
.builder-row > summary {
  display: grid; align-items: center; gap: var(--space-4);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr) minmax(0, 0.7fr) auto;
  padding: var(--space-4) var(--space-5);
}
.builder-list__head {
  background: var(--navy); color: #fff;
  font-size: 0.72rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase;
}
.builder-row { border-top: 1px solid var(--hairline); background: var(--snow); }
.builder-row:first-of-type { border-top: none; }
.builder-row > summary { cursor: pointer; list-style: none; }
.builder-row > summary::-webkit-details-marker { display: none; }
.builder-row > summary:hover { background: var(--limestone); }
.builder-row > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.builder-row__name { font-weight: 650; color: var(--navy); min-width: 0; }
.builder-row__areas,
.builder-row__checked { font-size: var(--step--1); color: var(--ink-soft); min-width: 0; }
.builder-row__chev { display: inline-flex; color: var(--ink-soft); transition: transform 0.18s ease; }
.builder-row[open] > summary { background: var(--limestone); }
.builder-row[open] .builder-row__chev { transform: rotate(180deg); }
.builder-row__body { padding: 0 var(--space-5) var(--space-5); border-top: 1px dashed var(--border-soft); }
.builder-row__subhead { font-size: var(--step-0); margin: var(--space-5) 0 0; }
.builder-row__site { margin: var(--space-4) 0 0; font-size: var(--step--1); }
.builder-row__body .table-wrap { margin-block: var(--space-3) var(--space-4); }

/* Stack the summary on narrow screens: four columns of a table header do not
   survive 375px, and the communities table inside already scrolls on its own. */
@media (max-width: 720px) {
  .builder-list__head { display: none; }
  .builder-row > summary {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name chev" "areas chev" "checked chev";
    gap: 0.15rem var(--space-4);
  }
  .builder-row__name    { grid-area: name; }
  .builder-row__areas   { grid-area: areas; }
  .builder-row__checked { grid-area: checked; }
  .builder-row__chev    { grid-area: chev; align-self: center; }
  .builder-row__checked::before { content: "Checked "; }
}

/* ---- Guide preview (journey detail below the fold on home) ---- */
/* Sticky header height + breathing room. `:not(.step)` because buying.json's
   step 03 also has id="journey" — without it this homepage rule leaks onto that
   step and beats the step's own clearance rule on specificity (ID over class). */
#where-you-are, #journey:not(.step) { scroll-margin-top: 88px; }
/* Same measure as .newbuild-band and .tools-band — the three panels share one
   edge down the page. */
#journey .container { max-width: 78rem; }
/* Owner's mockup (Process Step.png), 2026-07-31. One grid, two rows: photo and
   copy take a column each on row one, the step strip spans both on row two.
   Same construction as .newbuild-panel, which is what lets the photo bleed to
   the panel's left and top edges with no gutter. */
.guide-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--snow);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
}
@media (min-width: 900px) { .guide-preview { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); } }
.guide-preview__photo { display: block; }
.guide-preview__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.guide-preview__intro {
  display: flex; flex-direction: column; gap: var(--space-3);
  justify-content: center;
  background: var(--limestone);
  padding: clamp(1.35rem, 2.6vw, 2.5rem);
}
.guide-preview__intro .kicker { margin-bottom: 0; }
.guide-preview__intro h2 { font-size: clamp(1.75rem, 2.75vw, 2.4rem); line-height: 1.12; margin-bottom: 0; }
.guide-preview__intro > p { margin-bottom: 0; }
.guide-preview__note {
  display: flex; gap: var(--space-3);
  font-size: var(--step--1); color: var(--ink-soft);
}
.guide-preview__note svg { flex: 0 0 auto; color: var(--teal-dark); margin-top: 0.15em; }
/* The resale / new-build fork, shown with the buying preview only. Copper
   rather than the note's limestone, so it reads as a branch in the journey and
   not as another reassurance panel. */
.preview-fork {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin: 0; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--copper-tint); border-radius: var(--radius-card);
  background: transparent; font-size: var(--step--1); color: var(--ink);
}
.preview-fork[hidden] { display: none; }
.preview-fork svg { flex: 0 0 auto; color: var(--teal-dark); margin-top: 0.15em; }
.preview-fork a { color: var(--copper-dark); font-weight: 600; text-decoration: underline; }

/* The strip. Cards size to their content rather than to a fixed column count —
   the mockup shows the buying journey's four, but the phases across the four
   journeys run from one step to six, and a hard five-column grid would break
   on every one of them. The tail is the strip's last cell.

   NAVY since 2026-08-04, owner instruction on the Concept-1 package ("the
   bottom of the steps have to be changed colour"): the strip is the package's
   dark navy band, desktop and mobile, with the accent cycling per step the
   way the tools strip cycles per tool. The CONTENT is unchanged — still the
   selected phase's real steps — and whether these items stay wired to the
   actual steps is an owner decision deliberately left open. */
.preview-strip {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  background: var(--navy-deep);
}
.preview-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  padding: var(--space-4) 0 var(--space-4) var(--space-4);
}
/* The divider belongs to the gap rather than to either card — one rule, and
   it never appears before the first. */
.preview-step { position: relative; padding: var(--space-1) var(--space-4) var(--space-1) var(--space-3); }
.preview-step + .preview-step::before {
  content: ''; position: absolute; left: 0; top: 12%; bottom: 12%;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
/* The same four-accent rhythm as .tool-row, cycling by position. */
.preview-step:nth-child(4n+1) { --step-accent: #E8912B; }
.preview-step:nth-child(4n+2) { --step-accent: #3DB39E; }
.preview-step:nth-child(4n+3) { --step-accent: #4C93D8; }
.preview-step:nth-child(4n+4) { --step-accent: #E4674A; }
.preview-step__head { display: flex; align-items: center; gap: var(--space-3); }
.preview-step__n {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 2.3rem; height: 2.3rem; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--serif); font-size: var(--step--1); color: var(--step-accent, #E8B79B);
}
.preview-step__title { font-family: var(--serif); font-size: var(--step-0); line-height: 1.2; color: #F3EFE4; }
.preview-step__body { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-2); }
.preview-step__icon { flex: 0 0 auto; color: var(--step-accent, #E8B79B); }
.preview-step__desc { font-size: var(--step--1); line-height: 1.45; color: #9DB0C2; }
.preview-tail {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: var(--space-3);
  min-width: 9.5rem; padding: var(--space-4) var(--space-5);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.preview-tail__mark {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.1); color: #E8B79B;
}
.preview-tail a { font-weight: 700; color: #E8B79B; text-decoration: none; line-height: 1.25; }
.preview-tail a:hover { color: var(--snow); }
.preview-tail a:focus-visible { outline: 3px solid var(--snow); outline-offset: 2px; }

@media (max-width: 899px) {
  .preview-strip { grid-template-columns: minmax(0, 1fr); }
  .preview-steps { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .preview-step { padding-inline: 0; }
  .preview-step + .preview-step { margin-top: var(--space-4); padding-top: var(--space-4); }
  .preview-step + .preview-step::before { left: 0; right: 0; top: 0; bottom: auto; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .preview-tail { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
}

/* ---- New Build band (homepage) ----
   Was a navy full-bleed band until 2026-07-31; the owner's screenshot replaced
   it with this light panel. Nothing else in the site uses these classes, so the
   navy rules were removed rather than kept as a variant. */
/* Owner instruction 2026-07-31: white either side of the panel, the way the
   Tools section sat before the two traded places. */
.newbuild-band { background: var(--snow); padding-block: var(--space-9); }
/* Owner check 2026-07-31: the panel sits wider than the site's 72rem measure.
   Only this section breaks the grid — the sections above and below stay on the
   standard container, which is what makes the panel read as the flagship. */
.newbuild-band .container { max-width: 78rem; }

/* One grid, two rows. Row 1 is copy | photo; row 2 is the stage strip spanning
   both. The photo is a grid item rather than a background so it can bleed into
   the panel's top-right corner while still being a real <img> with alt text —
   overflow:hidden on the panel is what clips it to the rounded corner. */
.newbuild-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--snow);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.newbuild-panel__copy {
  display: flex; flex-direction: column; justify-content: center;
  background: var(--limestone);
  padding: clamp(1.5rem, 2.9vw, 2.5rem);
}
.newbuild-band .kicker { color: var(--copper-dark); margin-bottom: 0.625rem; }
/* Larger than the site's default h2 so it holds the panel's left half at the
   three lines the mockup breaks to. The ch cap does the breaking, not luck —
   and because ch scales with font-size, the three lines survive every step of
   the clamp rather than only at the size this was tuned at. */
.newbuild-panel__copy h2 {
  font-size: clamp(1.8rem, 2.85vw, 2.45rem);
  line-height: 1.1;
  max-width: 18ch;
  margin-bottom: 0.625rem;
}
.newbuild-panel__copy p { color: var(--ink-soft); max-width: 46ch; margin-bottom: var(--space-3); }
.newbuild-panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-1); }
.newbuild-panel__photo { display: block; width: 100%; height: 100%; object-fit: cover; }

.stage-grid {
  grid-column: 1 / -1;
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: var(--space-3);
  border-top: 1px solid var(--border-soft);
}
@media (min-width: 700px) { .stage-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.stage-card {
  display: flex; flex-direction: column;
  background: var(--snow);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 0.35rem;
}
/* Letterbox, not 4:3. The mockup's thumbnails are roughly 2.2:1, and that ratio
   is doing most of the work of keeping the strip — and so the whole panel —
   short. Do not "restore" this to 4:3 without re-measuring the panel height. */
.stage-card img { border-radius: 10px; aspect-ratio: 12/5; object-fit: cover; width: 100%; display: block; }
.stage-card span { padding: 0.5rem 0.45rem 0.3rem; font-size: 0.8rem; font-weight: 650; color: var(--navy); }
.stage-card--more {
  justify-content: center; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-4);
}
.stage-card__mark {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; padding: 0;
  border: 2px solid var(--copper); border-radius: 999px; color: var(--copper);
}
.stage-card__title { padding: 0; font-family: var(--serif); font-size: var(--step-1); font-weight: 400; }
.stage-card--more a {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--copper-dark); font-size: 0.8rem; font-weight: 600; text-decoration: none;
}
.stage-card--more a:hover { color: var(--navy); }
/* Stacked, the photo has no column to take its height from — height:100% would
   resolve against a row the image itself is sizing. Give it a ratio instead. */
@media (max-width: 767px) {
  .newbuild-panel { grid-template-columns: minmax(0, 1fr); }
  .newbuild-panel__photo { height: auto; aspect-ratio: 16 / 10; }
}

/* ---- Know Ottawa (homepage) ----
   Was a two-column text list until 2026-08-01; the owner's mockup replaced it
   with photo cards — four large, then four compact, then the growth panel.
   One .community-card serves both rows; --compact only re-lays the grid. */
/* Same measure as the three panels above it, so the page keeps one edge. */
#know-ottawa .container { max-width: 78rem; }
.section-head__link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 600; white-space: nowrap;
}
.community-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--space-4);
}
@media (min-width: 900px) { .community-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.community-card {
  display: flex; flex-direction: column;
  background: var(--snow); border: 1px solid var(--border-soft); border-radius: var(--radius-card);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.community-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.community-card:hover .community-card__name { color: var(--teal-dark); }
.community-card__media { display: block; background: var(--limestone-dark); }
.community-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.community-card:not(.community-card--compact) .community-card__media img { aspect-ratio: 16 / 10; }
/* The arrow sits on its own row at the foot of the body, so it lines up across
   cards whose taglines run to different line counts. */
.community-card__body {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  flex: 1 1 auto; gap: 0 var(--space-3);
  padding: var(--space-4);
}
.community-card__name {
  grid-column: 1 / -1;
  font-family: var(--serif); font-size: var(--step-2); color: var(--navy); line-height: 1.15;
}
.community-card__type {
  grid-column: 1 / -1; margin-top: 0.45rem;
  font-size: 0.68rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7580;
}
.community-card__desc { font-size: var(--step--1); line-height: 1.45; color: var(--ink-soft); margin-top: 0.5rem; }
.community-card__go { align-self: end; color: var(--teal-dark); padding-bottom: 0.15rem; }

/* Compact row: the photo takes a fixed column at the card's left rather than
   the full width, and the card sizes to the tallest tagline in the row — so
   the photo column is kept narrow deliberately. Widen it and the longest
   tagline gains a line, every card in the row grows to match, and the photo
   then has to crop harder to fill the height it just caused. */
.community-card--compact { flex-direction: row; align-items: stretch; }
.community-card--compact .community-card__media { flex: 0 0 6rem; }
.community-card--compact .community-card__name { font-size: var(--step-1); }
.community-card--compact .community-card__body { padding: var(--space-3); }

.also-covered {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--limestone); border: 1px solid var(--border-soft);
  border-radius: var(--radius-card); padding: clamp(1.25rem, 2.1vw, 1.9rem);
}
.also-covered__head { display: flex; flex-direction: column; gap: 0.35rem; }
.also-covered__title { font-family: var(--serif); font-size: var(--step-3); color: var(--navy); }
.also-covered__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.also-covered__chips a {
  padding: 0.7rem 1.35rem; border-radius: var(--radius-pill); white-space: nowrap; text-decoration: none;
  background: var(--snow); border: 1px solid var(--limestone-mid); color: var(--navy);
  font-size: var(--step--1); font-weight: 550;
}
.also-covered__chips a:hover { border-color: var(--border-strong); }
/* The CTA is pushed to the end of the row rather than sitting in the chip flow
   — it is a destination, not another "planned" label. */
.also-covered__chips a.is-cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-left: auto; padding: 0.9rem 1.6rem;
  background: var(--navy); border-color: var(--navy); color: var(--snow); font-weight: 600;
}
.also-covered__chips a.is-cta:hover { background: var(--navy-deep); border-color: var(--navy-deep); }

@media (max-width: 899px) {
  .community-card--compact .community-card__media { flex-basis: 6.5rem; }
  .also-covered__chips a.is-cta { margin-left: 0; }
}

/* ---- Tools panel (homepage) ----
   Was a four-up .tool-card grid until 2026-07-31; the owner's mockup replaced
   it with this dark panel — intro column, hairline rule, four accented rows.
   Home-only classes, and it now carries the dark weight the New Build band used
   to give the page, which is why that band could go light. */
/* Owner instruction 2026-07-31: the colour runs to the screen edges rather than
   stopping at a rounded card — this section took over the full-bleed dark band
   the New Build section used to be. The band carries the background; the panel
   is only a grid now, so the content still stops at the measure. */
.tools-band { background: var(--navy-deep); padding-block: var(--space-8); }
/* Matched to .newbuild-band so the two sections share an edge down the page. */
.tools-band .container { max-width: 78rem; }
.tools-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.64fr) minmax(0, 1.36fr);
  gap: clamp(1.5rem, 3.2vw, 3.25rem);
}
.tools-band .kicker { color: var(--snow); letter-spacing: 0.16em; font-weight: 700; margin-bottom: var(--space-4); }
.tools-panel__intro h2 {
  color: #F3EFE4;
  font-size: clamp(1.8rem, 2.85vw, 2.45rem);
  line-height: 1.12;
  max-width: 13ch;
  margin-bottom: var(--space-4);
}
.tools-panel__intro p { color: #9DB0C2; max-width: 34ch; margin: 0; }
.tools-panel__all {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4);
  color: var(--snow); font-weight: 600; text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.35); padding-bottom: 0.2rem;
  align-self: flex-start;
}
.tools-panel__all:hover { color: #E8B79B; border-bottom-color: #E8B79B; }

.tool-rows {
  list-style: none; margin: 0;
  padding: 0 0 0 clamp(1.25rem, 2.4vw, 2.75rem);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.tool-row {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) minmax(0, 1.1fr) auto;
  align-items: center;
  gap: clamp(0.7rem, 1.5vw, 1.65rem);
  padding-block: clamp(0.65rem, 1.25vw, 1.05rem);
}
.tool-row + .tool-row { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.tool-row__num { font-size: 1.15rem; color: #55708A; font-variant-numeric: tabular-nums; }
.tool-row__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; color: var(--tool-accent); }
.tool-row__title { margin: 0; font-size: var(--step-2); font-weight: 400; color: #F3EFE4; }
.tool-row__title a { color: inherit; text-decoration: none; }
/* Stretched over the row so the target is the whole strip, not one word. The
   row is position:relative for exactly this. */
.tool-row__title a::after { content: ''; position: absolute; inset: 0; border-radius: 10px; }
.tool-row:hover .tool-row__title { color: var(--tool-accent); }
.tool-row__desc { margin: 0; font-size: var(--step--1); line-height: 1.55; color: #9DB0C2; }
.tool-row__cta {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--step--1); font-weight: 700; color: var(--snow); white-space: nowrap;
}
.tool-row__go {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border: 2px solid var(--tool-accent); border-radius: 999px; color: var(--tool-accent);
  transition: background-color 0.15s, color 0.15s;
}
.tool-row:hover .tool-row__go { background: var(--tool-accent); color: var(--navy-deep); }
/* One accent per row, read by the icon, the ring and the title's hover. */
.tool-row--amber { --tool-accent: #E8912B; }
.tool-row--teal  { --tool-accent: #3DB39E; }
.tool-row--blue  { --tool-accent: #4C93D8; }
.tool-row--coral { --tool-accent: #E4674A; }

@media (max-width: 900px) {
  .tools-panel { grid-template-columns: minmax(0, 1fr); }
  .tools-panel__intro h2, .tools-panel__intro p { max-width: none; }
  .tool-rows { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
}
/* Two rows of content per tool on a phone: the numeral is decoration and the
   "Open"/"Print" word is already in the link's accessible name, so both go
   rather than squeezing five columns into 375px. */
@media (max-width: 700px) {
  .tool-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 0.3rem; }
  .tool-row__num, .tool-row__ctaword { display: none; }
  .tool-row__icon { grid-column: 1; grid-row: 1 / span 2; }
  .tool-row__title { grid-column: 2; grid-row: 1; font-size: var(--step-1); }
  .tool-row__desc { grid-column: 2; grid-row: 2; }
  .tool-row__cta { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---- Trust grid (homepage / "why trust this site") ---- */
.trust-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .trust-grid { grid-template-columns: 1fr 1fr; } }
.trust-grid li { display: flex; gap: var(--space-3); list-style: none; }
.trust-grid svg { flex: 0 0 auto; margin-top: 0.2em; color: var(--teal); }

/* ---- Dark newsletter panel (homepage "Ottawa Market Minute") ---- */
.newsletter--panel {
  background: var(--navy-deep); color: var(--snow);
  border-radius: var(--radius-card); padding: var(--space-7) var(--space-6);
  display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 800px) { .newsletter--panel { grid-template-columns: 1fr 1fr; } }
.newsletter--panel h2 { color: var(--snow); }
.newsletter--panel p { color: #cfd9e2; }
.newsletter--panel .kicker { color: var(--copper-light); }
.newsletter--panel form { display: flex; gap: var(--space-2); margin-top: 0; }
.newsletter--panel input[type="email"] {
  flex: 1; min-width: 0; padding: 0.9rem 1.2rem; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: var(--snow); font: inherit;
}
.newsletter--panel input[type="email"]::placeholder { color: #a9b8c5; }
.newsletter--panel button { flex: 0 0 auto; }

/* ============================================================
   The step template — buying/selling/rent-lease/new-build spines.
   Three states: collapsed (details, closed), open (details, open),
   current (open + copper border + "You are here").
   ============================================================ */
.step-list { display: flex; flex-direction: column; gap: var(--space-4); }
.step { border: 1px solid var(--border-soft); border-radius: var(--radius-card); }
/* Anchor jumps (rail links, the path chooser, "next step") must clear the
   sticky header, or the step lands at y=0 with its number badge and title
   hidden underneath it. Same 88px the homepage anchors already use: 69px of
   header plus breathing room. Applies to scrollIntoView() too. */
.step { scroll-margin-top: 88px; }
.step > summary {
  list-style: none; cursor: pointer;
  padding: 1.4rem var(--space-6); display: flex; align-items: center; gap: var(--space-4);
}
.step > summary::-webkit-details-marker { display: none; }
.step > summary .step__chevron { margin-left: auto; flex: 0 0 auto; color: var(--ink-soft); transition: transform .15s; }
.step[open] > summary .step__chevron { transform: rotate(180deg); }
.step__n {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); font-family: var(--serif); font-size: var(--step-1); color: var(--ink-soft);
}
.step[open] .step__n { width: 52px; height: 52px; background: var(--teal-soft); color: var(--teal-dark); border: none; font-size: var(--step-2); }
.step__summary-body { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 0; }
.step__summary-title { font-family: var(--serif); font-size: var(--step-2); color: var(--navy); }
.step__summary-line { font-size: var(--step--1); color: var(--ink-soft); }
.step__body { padding: 0 var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.step__head { display: flex; flex-direction: column; gap: 0.6rem; }
.step__eyebrow-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.step__phase {
  font-size: 0.68rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-dark);
}
.step__done-badge, .step__here-badge {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 650;
  background: var(--teal-soft); color: var(--teal-dark);
}
.step__done-badge[hidden], .step__here-badge[hidden] { display: none; }
.step__here-badge { background: none; padding: 0; color: var(--copper-dark); letter-spacing: 0.12em; text-transform: uppercase; }
.step__title { font-size: var(--step-3); margin: 0; }
.step__desc { font-size: var(--step-0); color: var(--ink-soft); max-width: 62ch; margin: 0; }
.step__meta { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .step__meta { grid-template-columns: repeat(3, 1fr); } }
.step__meta dt {
  font-size: 0.68rem; font-weight: 650; letter-spacing: 0.11em; text-transform: uppercase; color: #6b7580;
  margin-bottom: 0.4rem;
}
.step__meta dd { margin: 0; font-size: var(--step--1); color: var(--ink); }
.step__gotcha {
  display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card); background: var(--copper-soft); border: 1px solid var(--copper-tint);
}
.step__gotcha svg { flex: 0 0 auto; margin-top: 0.15em; color: var(--copper-dark); }
.step__gotcha strong { display: block; font-size: var(--step--1); color: var(--copper-dark); margin-bottom: 0.2rem; }
.step__gotcha p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.step__guides { display: flex; flex-direction: column; gap: var(--space-2); }
.step__guides a {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); text-decoration: none;
}
.step__guides img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.step__guides span { font-size: var(--step--1); font-weight: 550; color: var(--navy); }
.step__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
/* Optional stage photo inside a step (new-builds) */
.step__figure { margin: 0; }
.step__figure img {
  display: block; width: 100%; height: auto; border-radius: var(--radius-card);
  background: var(--limestone);
}
.step__figure figcaption { margin-top: var(--space-2); font-size: var(--step--1); color: var(--ink-soft); }
.step--current { border: 2px solid var(--copper); box-shadow: 0 14px 34px rgba(198,106,61,.14); }
.step--current .step__n { background: var(--copper); color: var(--snow); }

/* Progress strip ("the journey") above the step list */
.step-progress { display: flex; align-items: center; gap: var(--space-4); }
.step-progress__label {
  font-size: 0.7rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7580;
  white-space: nowrap;
}
.step-progress__meter { flex: 1; display: flex; gap: var(--space-2); }
.step-progress__seg { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--limestone-mid); }
.step-progress__seg.is-done { background: var(--teal); }
.step-progress__seg.is-current { background: var(--copper); }
.step-progress__phases { font-size: var(--step--1); color: var(--navy); font-weight: 550; white-space: nowrap; }

/* Step-guide hero: kicker/h1/lede + verified/read-time badges + actions */
.step-hero__grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) { .step-hero__grid { grid-template-columns: 1.3fr 1fr; } }
.step-hero__badges { display: flex; flex-wrap: wrap; gap: var(--space-5); font-size: var(--step--1); font-weight: 550; color: var(--ink-soft); }
.step-hero__badges span { display: inline-flex; align-items: center; gap: 0.5rem; }
.step-hero__badges svg { color: var(--teal-dark); }
.step-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.step-hero__switcher { margin-top: var(--space-5); }

/* Journey switcher pills on a spine page header */
.journey-switcher { display: flex; flex-direction: column; gap: var(--space-3); }
.journey-switcher__label {
  font-size: 0.7rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7580;
}
.journey-switcher__pills { display: flex; gap: var(--space-2); padding: 0.35rem; border-radius: var(--radius-pill);
  background: var(--snow); border: 1px solid var(--limestone-mid); align-self: flex-start; flex-wrap: wrap; overflow-x: auto; }
.journey-switcher__pills a {
  display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap;
  padding: 0.8rem 1.3rem; border-radius: var(--radius-pill); font-size: var(--step--1); font-weight: 550;
  color: var(--navy); text-decoration: none;
}
.journey-switcher__pills a.is-active { background: var(--navy); color: var(--snow); font-weight: 600; }

/* Step-guide layout: sticky rail + step list */
.step-guide { display: grid; gap: var(--space-8); grid-template-columns: 1fr; padding-block: var(--space-8); }
@media (min-width: 1000px) { .step-guide { grid-template-columns: 320px minmax(0,1fr); } }
.step-rail { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 1000px) { .step-rail { position: sticky; top: 1.5rem; align-self: start; } }
.step-rail__label {
  font-size: 0.7rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7580;
}
.step-rail__list { display: flex; flex-direction: column; }
.step-rail__item {
  display: grid; grid-template-columns: 2.1rem 1fr; gap: var(--space-3); align-items: center;
  padding: 0.8rem 0 0.8rem 1rem; border-left: 2px solid var(--limestone-mid); text-decoration: none;
}
.step-rail__item span:first-child { font-size: 0.8rem; font-weight: 650; color: var(--ink-soft); }
.step-rail__item span:last-child { font-size: var(--step--1); font-weight: 550; color: var(--navy); line-height: 1.35; }
.step-rail__item.is-done { border-left-color: var(--teal); }
.step-rail__item.is-done span:first-child { color: var(--teal-dark); }
.step-rail__item.is-current {
  border-left: 3px solid var(--copper); padding-left: calc(1rem - 1px); background: var(--copper-soft);
}
.step-rail__item.is-current span:first-child { color: var(--copper-dark); }
.step-rail__item.is-viewing:not(.is-current) { background: var(--limestone); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.rail-card { padding: var(--space-5); border-radius: var(--radius-card); }
.rail-card--tint { background: var(--limestone); }
.rail-card--outline { border: 1px solid var(--border-soft); }
.rail-card--dashed { border: 1px dashed var(--border-strong); }
.rail-card h3 { font-size: var(--step-1); margin: 0 0 0.4rem; }
.rail-card p { font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 var(--space-3); }
.rail-card__links { display: flex; flex-direction: column; gap: 0.7rem; }
.rail-card__links a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  font-size: var(--step--1); font-weight: 550; text-decoration: none; color: var(--navy);
}
.rail-progress-pill {
  display: inline-flex; align-self: flex-start; padding: 0.6rem 1rem; border-radius: var(--radius-pill);
  background: var(--snow); border: 1px solid var(--border-strong); font-size: 0.78rem; font-weight: 650; color: var(--navy);
}

/* ============================================================
   The path template — non-sequenced spines (rent-lease).
   Same chrome as .step, minus everything that implies an order:
   no progress meter, no current state, no done ticks. The letter
   badge is teal-outlined rather than filled, so an open path never
   reads as "the step you are on".
   ============================================================ */
.step-list--paths { gap: var(--space-5); }
.step--path[open] { border-color: var(--border-strong); }
.step--path .step__n--letter,
.step--path[open] .step__n--letter {
  width: 46px; height: 46px; background: none; border: 2px solid var(--teal);
  color: var(--teal-dark); font-size: var(--step-1); font-weight: 600;
}
.step--path .step__phase { display: inline-flex; align-items: center; gap: 0.45rem; }
.step--path .step__phase svg { flex: 0 0 auto; }

/* Key points — the path equivalent of the step's need/cost/duration grid */
.path-points { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); margin: 0; }
@media (min-width: 720px) { .path-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.path-points > div {
  padding: var(--space-4); border-radius: var(--radius-card); background: var(--limestone); min-width: 0;
}
.path-points dt {
  display: flex; align-items: flex-start; gap: 0.45rem; margin: 0 0 0.4rem;
  font-size: var(--step--1); font-weight: 650; color: var(--navy);
}
.path-points dt svg { flex: 0 0 auto; margin-top: 0.1em; color: var(--teal-dark); }
.path-points dd { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

/* "Close" inside an open step or path — same quiet voice as back-to-top, so
   the pair reads as ways out of the section rather than calls to action. It
   takes over the push-right when both are present. */
.step-close {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto;
  font-family: inherit; font-size: var(--step--1); font-weight: 550;
  color: var(--ink-soft); background: none; border: 0; padding: 0; cursor: pointer;
}
.step-close:hover { color: var(--teal-dark); text-decoration: underline; }
.step-close + .back-to-top { margin-left: 0; }
@media (max-width: 520px) { .step-close { margin-left: 0; } }

/* "Back to top" inside a collapsible section. Sits at the end of the actions
   row and pushes right on wide rows, so it reads as a way out of the section
   rather than a fourth call to action. */
.back-to-top {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto;
  font-size: var(--step--1); font-weight: 550; color: var(--ink-soft); text-decoration: none;
}
.back-to-top:hover { color: var(--teal-dark); text-decoration: underline; }
.back-to-top__icon { transform: rotate(180deg); flex: 0 0 auto; }
@media (max-width: 520px) { .back-to-top { margin-left: 0; } }

/* Official-source list inside a path block */
.path-links { display: flex; flex-direction: column; gap: var(--space-2); }
.path-links__label {
  font-size: 0.68rem; font-weight: 650; letter-spacing: 0.11em; text-transform: uppercase; color: #6b7580;
}
.path-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.path-links a {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem;
  border: 1px solid var(--border-soft); border-radius: var(--radius-pill);
  font-size: var(--step--1); font-weight: 550; color: var(--navy); text-decoration: none;
}
.path-links a:hover { border-color: var(--teal); color: var(--teal-dark); }
.path-links svg { flex: 0 0 auto; }

/* Checklist picker — one audience's list at a time. The panels are visible by
   default so the page is complete without JS; site.js hides all but the
   selected one, and hides the matching block in the printed sheet too. */
.checklist-picker {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4);
  padding: var(--space-5); margin-bottom: var(--space-6);
  border: 1px solid var(--border-soft); border-radius: var(--radius-card); background: var(--limestone);
}
.checklist-picker__field { margin-bottom: 0; flex: 1 1 18rem; min-width: 0; }
.checklist-picker__field select { width: 100%; }
.checklist-panel + .checklist-panel { margin-top: var(--space-6); }
.checklist-panel[hidden] { display: none; }
.checklist-panel__head {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  font-size: var(--step-1); margin: 0 0 var(--space-4);
}
.checklist-panel__head svg { flex: 0 0 auto; color: var(--teal-dark); }
.checklist-panel__head span {
  font-family: var(--sans); font-size: var(--step--1); font-weight: 500; color: var(--ink-soft);
}
.checklist-panel__head span::before { content: "\2014\00a0"; }
.checklist-panel__note { font-size: var(--step--1); margin: 0; }
.checklist-panel__foot { margin: 0 0 var(--space-6); }
.checklist__need {
  display: block; margin-top: 0.2rem; font-size: var(--step--1); color: var(--ink-soft);
}

/* ---- Forms hub (/tools/forms/) ----
   A view over links.json. Each entry is a small record card rather than a bare
   link, because the explainer is the point: the form code, the issuer, what it
   commits you to, and when we last checked it. */
.linkhub-jump {
  display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6);
}
.linkhub-jump .chip span { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.form-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.form-item {
  padding: var(--space-5); border: 1px solid var(--border-soft);
  border-radius: var(--radius-card); background: var(--limestone);
}
.form-item__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3);
}
.form-item__head h3 { margin: 0; font-size: var(--step-0); }
.form-item__code {
  flex: 0 0 auto; font-family: var(--mono, ui-monospace, monospace);
  font-size: var(--step--2); font-weight: 600; letter-spacing: 0.02em;
  padding: 0.15rem 0.5rem; border-radius: 999px;
  background: var(--navy); color: #fff;
}
.form-item__issuer {
  margin: 0.25rem 0 var(--space-3); font-size: var(--step--1); color: var(--ink-soft);
}
.form-item p { margin: 0 0 var(--space-3); }
/* The note is the "where people trip" line — the most useful sentence in the
   card, so it is set apart rather than run in with the description. */
.form-item__note {
  padding-left: var(--space-3); border-left: 2px solid var(--copper, var(--teal-dark));
  font-size: var(--step--1); color: var(--ink-soft);
}
.form-item__links {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  margin-bottom: 0;
}
.form-item__links .link-verified { margin: 0; }

/* ---- Tickable checklist — partials/checklist-block.php ----
   A real checkbox replaces the decorative .checklist li::before box, so the
   list is operable by keyboard and by screen reader rather than just looking
   like a checklist. Ticks write to the same record the print sheet reads. */
.checklist--tick li { padding-block: 0; border-bottom: 1px dashed var(--limestone-dark); }
.checklist--tick li::before { content: none; }
.checklist--tick label {
  display: flex; gap: var(--space-3); align-items: flex-start; width: 100%;
  padding-block: 0.55rem; cursor: pointer;
}
.checklist--tick input[type="checkbox"] {
  flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; cursor: pointer;
  accent-color: var(--teal-dark);
}
.checklist__n {
  flex: 0 0 auto; min-width: 2.1rem; font-variant-numeric: tabular-nums;
  font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); margin-top: 0.1rem;
}
.checklist__text { flex: 1 1 auto; min-width: 0; }
/* Ticked rows recede rather than strike through — the text still has to be
   readable on site, where the reader is checking what they already did. */
.checklist--tick input:checked ~ .checklist__text { color: var(--ink-soft); }
.checklist--tick input:checked ~ .checklist__n { color: var(--teal-dark); }
.checklist--tick label:hover { background: var(--limestone); }
/* Touch targets on small screens — the same 44px floor the FTB checkbox uses. */
@media (max-width: 767px) {
  .checklist--tick label { min-height: 44px; }
}
.checklist-picker__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.checklist-progress { margin: 0.2rem 0 0; font-size: var(--step--1); color: var(--ink-soft); }
/* Hidden unless scripting is available: without JS these controls would do
   nothing at all, and a control that does nothing is a dead click. The boxes
   themselves stay — they still tick, they just do not persist. */
.js-only { display: none; }
.js .js-only { display: inline-flex; }

/* "Which side are you on?" chooser — the path page's answer to the
   sequenced pages' progress strip. Visible on mobile, where .step-rail
   is hidden and there is no step bar to replace it. */
#paths { scroll-margin-top: 88px; } /* "Pick your side" in the hero — same sticky-header clearance */
.path-chooser { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-6); }
.path-chooser__label {
  font-size: 0.7rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7580;
}
.path-chooser__cards { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .path-chooser__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.path-chooser__card {
  display: flex; align-items: center; gap: var(--space-3); min-width: 0;
  padding: var(--space-4) var(--space-5); border: 1px solid var(--border-soft);
  border-radius: var(--radius-card); background: var(--snow); text-decoration: none;
}
.path-chooser__card:hover { border-color: var(--teal); }
.path-chooser__card > svg { margin-left: auto; flex: 0 0 auto; color: var(--ink-soft); }
.path-chooser__n {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--teal-soft);
  font-family: var(--serif); font-size: var(--step-0); color: var(--teal-dark);
}
.path-chooser__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.path-chooser__text strong { font-size: var(--step--1); font-weight: 650; color: var(--navy); }
.path-chooser__text span { font-size: var(--step--1); color: var(--ink-soft); }

/* Mobile sticky step bar — replaces the rail below 768px */
.step-bar { display: none; }
@media (max-width: 767px) {
  .step-rail { display: none; }
  /* On a sequenced page this bar is a SECOND layer of sticky chrome under the
     header (69px + 88px), so those steps need more anchor clearance than the
     88px baseline. Path pages have no step bar, so they keep the baseline. */
  .step-list:not(.step-list--paths) .step { scroll-margin-top: 170px; }
  .step-bar {
    display: flex; flex-direction: column; gap: var(--space-3);
    position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--hairline); padding: var(--space-3) var(--space-5);
  }
  .step-bar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .step-bar__current { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
  .step-bar__current span:first-child {
    font-size: 0.68rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7580;
  }
  .step-bar__current span:last-child {
    font-size: 0.95rem; font-weight: 600; color: var(--navy);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .step-bar__jump {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.75rem 1rem; border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
    font-size: 0.8rem; font-weight: 650; color: var(--navy); background: none;
  }
  .step-bar__meter { display: flex; gap: 0.3rem; }
  .step-bar__seg { flex: 1; height: 5px; border-radius: var(--radius-pill); background: var(--limestone-mid); }
  .step-bar__seg.is-done { background: var(--teal); }
  .step-bar__seg.is-current { background: var(--copper); }
}

/* ---- Mobile: single column below 768px (HANDOFF §7) ---- */
@media (max-width: 767px) {
  html { font-size: 16px; }
  .container { padding-inline: 20px; }
  /* .home-hero deliberately NOT in this rule any more. The hero now sizes its
     own type with clamp() and breaks at 900px and 680px, not 767px — leaving
     it here would have overridden the clamp between 681px and 767px with a
     flat 2.125rem. Every hero rule that used to live in this block moved into
     the hero's own section above. */
  .hero--home h1, .page-hero h1 { font-size: 2.125rem; }
  /* Concept-1 package, owner 2026-08-04 ("please follow the mobile pic of the
     mock up given"): the phone strip is a STACKED LIST — one white card, each
     category a full-width row with its accent icon, a hairline between rows
     and a chevron on the right — not the horizontal carousel this block used
     to build. The carousel's three scroll cues (edge fades, clipped card,
     "Swipe for more") died with the scrolling; site.js's fade code measures
     zero overflow on a column and never fires, so it needs no change. */
  .phase-filter { background: var(--limestone); }
  .phase-filter__inner { flex-direction: column; align-items: stretch; gap: var(--space-3); flex-wrap: nowrap; }
  .phase-filter__label span:last-child { display: none; }
  .phase-filter__items {
    display: flex; flex-direction: column; gap: 0;
    background: var(--snow); border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    padding: 0.3rem 1rem;
  }
  .phase-filter__item { min-width: 0; padding: 0.55rem 0; }
  .phase-filter__item + .phase-filter__item { border-top: 1px solid var(--hairline); }
  .phase-filter__link { align-items: center; }
  /* The chevron is drawn, not an icon: site.js rebuilds these rows and every
     element the template carries is one more thing to keep mirrored. */
  .phase-filter__link::after {
    content: ''; flex: 0 0 auto; width: 0.5rem; height: 0.5rem;
    margin-left: auto; align-self: center;
    border-right: 2px solid var(--ink-soft); border-top: 2px solid var(--ink-soft);
    transform: rotate(45deg);
  }
  .guide-preview { grid-template-columns: minmax(0, 1fr); }
  .stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: visible; }
  .community-grid { grid-template-columns: minmax(0, 1fr); }
  .trust-grid { grid-template-columns: 1fr; }
  .newsletter--panel { grid-template-columns: minmax(0, 1fr); padding: var(--space-6) var(--space-5); }
  .newsletter--panel form { flex-wrap: wrap; }
  .newsletter--panel input[type="email"] { flex: 1 1 12rem; }
  .newsletter--panel button { flex: 1 1 auto; }
  .site-footer__main { grid-template-columns: 1fr; }
  .footer-nav-cols { grid-template-columns: 1fr 1fr; }
  .step-guide { padding-block: var(--space-6); }
  /* The phase list ("Prepare → Search → …") is nowrap by design on desktop;
     on a phone it has to wrap or it drags the page sideways. Meter drops
     to its own row so the label and phases can share the first one. */
  .step-progress { flex-wrap: wrap; }
  .step-progress__meter { flex: 1 1 100%; order: 3; }
  .step-progress__phases { white-space: normal; }
  .step > summary, .step__body { padding-inline: var(--space-4); }
  .step__meta { grid-template-columns: 1fr; }
  .journey-switcher__pills { overflow-x: auto; scrollbar-width: none; }
  .btn { min-height: 44px; }
  .nav-toggle, .footer-social a, .step__chevron { min-width: 44px; min-height: 44px; }
}

/* ---- Utility ---- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.muted { color: var(--ink-soft); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

/* ============================================================
   First Time Home Buyer page
   Its own chrome, deliberately: this page was built on the shared step
   template and read as one more spine page. Nothing else uses these classes.
   ============================================================ */

/* Photo backdrop since 2026-08-04 (owner image): the hero was already
   white-on-navy, so the photograph slots under the same navy as a scrim and
   every word, the actions and the glass card are untouched. isolation +
   negative z-indexes are the home-hero pattern; no overflow:hidden — the
   media is inset:0 absolute and cannot escape. */
.ftb-hero { position: relative; isolation: isolate; background: var(--navy); color: #fff; padding-block: var(--space-6) var(--space-8); }
.ftb-hero__media { position: absolute; inset: 0; z-index: -2; }
.ftb-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; display: block; }
.ftb-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgba(23, 50, 77, 0.94) 0%, rgba(23, 50, 77, 0.88) 34%,
    rgba(23, 50, 77, 0.62) 62%, rgba(23, 50, 77, 0.38) 100%);
}
@media (max-width: 640px) {
  .ftb-hero__scrim {
    background: linear-gradient(180deg,
      rgba(23, 50, 77, 0.9) 0%, rgba(23, 50, 77, 0.78) 55%, rgba(23, 50, 77, 0.92) 100%);
  }
}
.ftb-hero .breadcrumbs, .ftb-hero .breadcrumbs a { color: rgba(255,255,255,0.75); }
.ftb-hero .breadcrumbs a:hover { color: #fff; }
.ftb-hero__grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .ftb-hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-8); } }
.ftb-hero__kicker {
  font-size: 0.72rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--limestone-mid); margin: 0 0 var(--space-3);
}
.ftb-hero h1 { color: #fff; margin: 0 0 var(--space-4); }
.ftb-hero__lede { font-size: var(--step-1); color: rgba(255,255,255,0.86); margin: 0 0 var(--space-5); max-width: 60ch; }
.ftb-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ftb-hero__note {
  display: flex; align-items: center; gap: 0.45rem;
  margin: var(--space-5) 0 0; font-size: var(--step--1); color: rgba(255,255,255,0.7);
}
.ftb-hero__card {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-card); padding: var(--space-5);
}
.ftb-hero__card h2 { color: #fff; font-size: var(--step-1); margin: 0 0 var(--space-3); }
.ftb-hero__card p { color: rgba(255,255,255,0.85); font-size: var(--step--1); margin: 0 0 var(--space-4); }
.ftb-hero__card strong { color: #fff; }
.ftb-hero__card .chip { background: #fff; border-color: #fff; color: var(--navy); }
.ftb-hero__card .chip:hover { background: var(--limestone); border-color: var(--limestone); color: var(--navy); }

/* Sticky section nav. Scrolls horizontally on narrow screens rather than
   wrapping to three rows and eating the viewport. */
.ftb-nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--snow); border-bottom: 1px solid var(--hairline);
}
.ftb-nav__inner {
  display: flex; gap: var(--space-4); overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding-block: var(--space-3);
}
.ftb-nav__inner::-webkit-scrollbar { display: none; }
.ftb-nav a {
  flex: 0 0 auto; text-decoration: none; white-space: nowrap;
  font-size: var(--step--1); font-weight: 600; color: var(--ink-soft);
  padding: 0.35rem 0.1rem; border-bottom: 2px solid transparent;
}
.ftb-nav a:hover { color: var(--copper-dark); }
.ftb-nav a.is-here { color: var(--navy); border-bottom-color: var(--copper); }

.ftb-band { background: var(--limestone); }
.back-to-top-wrap { margin: var(--space-6) 0 0; }

/* Four opening facts */
.ftb-facts { margin-top: var(--space-5); }
.ftb-fact {
  background: var(--snow); border: 1px solid var(--border-soft);
  border-radius: var(--radius-card); padding: var(--space-5);
}
.ftb-fact__n {
  display: inline-block; font-family: var(--serif); font-size: var(--step-2);
  color: var(--copper); line-height: 1; margin-bottom: var(--space-3);
}
.ftb-fact h3 { font-size: var(--step-0); margin: 0 0 var(--space-2); }
.ftb-fact p { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }

/* The two conflicting definitions, side by side - the page centrepiece */
.ftb-compare { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); margin-top: var(--space-5); }
@media (min-width: 820px) { .ftb-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ftb-compare__card {
  background: var(--snow); border: 1px solid var(--border-soft);
  border-left: 4px solid var(--copper); border-radius: var(--radius-card); padding: var(--space-5);
}
.ftb-compare__who {
  font-size: 0.72rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--copper-dark); margin: 0 0 var(--space-2);
}
.ftb-compare__card h3 { font-size: var(--step-1); margin: 0 0 var(--space-3); }
.ftb-compare__card p { font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 var(--space-3); }
.ftb-compare__verdict { font-weight: 650; color: var(--navy) !important; margin-bottom: 0 !important; }
.ftb-compare__punch {
  margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5);
  background: var(--snow); border-radius: var(--radius-card); border: 1px dashed var(--border-strong);
}

/* Route chooser */
.ftb-routes { border: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .ftb-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ftb-route { display: block; cursor: pointer; }
.ftb-route input { position: absolute; opacity: 0; width: 0; height: 0; }
.ftb-route__body {
  display: block; height: 100%; background: var(--snow);
  border: 2px solid var(--border-soft); border-radius: var(--radius-card); padding: var(--space-5);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ftb-route:hover .ftb-route__body { border-color: var(--teal); }
.ftb-route input:focus-visible + .ftb-route__body { outline: 2px solid var(--teal); outline-offset: 2px; }
.ftb-route input:checked + .ftb-route__body { border-color: var(--copper); box-shadow: var(--shadow); }
.ftb-route__icon { display: inline-flex; color: var(--teal-dark); margin-bottom: var(--space-3); }
.ftb-route input:checked + .ftb-route__body .ftb-route__icon { color: var(--copper-dark); }
.ftb-route__body strong { display: block; font-size: var(--step-1); color: var(--navy); }
.ftb-route__sub { display: block; font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.25rem; }
.ftb-route__note {
  display: block; font-size: var(--step--1); color: var(--ink-soft);
  margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--hairline);
}

/* Steps */
.ftb-steps { margin-top: var(--space-5); }
.ftb-steps__phase {
  font-size: 0.72rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); margin: var(--space-6) 0 var(--space-3);
}
.ftb-steps__phase:first-child { margin-top: 0; }
.ftb-step {
  background: var(--snow); border: 1px solid var(--border-soft);
  border-radius: var(--radius-card); margin-bottom: var(--space-3); overflow: hidden;
}
.ftb-step > summary {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none;
}
.ftb-step > summary::-webkit-details-marker { display: none; }
.ftb-step > summary:hover { background: var(--limestone); }
.ftb-step > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.ftb-step[open] > summary { background: var(--limestone); }
.ftb-step__n {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: var(--teal-soft); color: var(--teal-dark);
  font-family: var(--serif); font-size: var(--step-0);
}
.ftb-step[open] .ftb-step__n { background: var(--copper); color: #fff; }
.ftb-step__head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.ftb-step__title { font-weight: 650; color: var(--navy); }
.ftb-step__summary { font-size: var(--step--1); color: var(--ink-soft); }
.ftb-step__tag {
  flex: 0 0 auto; font-size: 0.68rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--copper-dark); background: var(--limestone-mid); border-radius: var(--radius-pill);
  padding: 0.2rem 0.55rem;
}
.ftb-step__chev { flex: 0 0 auto; color: var(--ink-soft); transition: transform 0.18s ease; }
.ftb-step[open] .ftb-step__chev { transform: rotate(180deg); }
.ftb-step__body { padding: 0 var(--space-5) var(--space-5); }
.ftb-step__text { margin: var(--space-4) 0; }
.ftb-step__meta {
  display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr);
  margin: 0 0 var(--space-4); padding: var(--space-4); background: var(--limestone); border-radius: var(--radius-card);
}
@media (min-width: 700px) { .ftb-step__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ftb-step__meta dt {
  font-size: 0.7rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.25rem;
}
.ftb-step__meta dd { margin: 0; font-size: var(--step--1); }
.ftb-step__gotcha {
  display: flex; gap: var(--space-3); padding: var(--space-4);
  background: #FFF6EF; border-left: 3px solid var(--copper); border-radius: var(--radius-card);
  margin-bottom: var(--space-4);
}
.ftb-step__gotcha svg { flex: 0 0 auto; color: var(--copper-dark); }
.ftb-step__gotcha strong { display: block; font-size: var(--step--1); }
.ftb-step__gotcha p { margin: 0.2rem 0 0; font-size: var(--step--1); color: var(--ink-soft); }
.ftb-step__links { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .ftb-step__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ftb-step__links a {
  display: flex; align-items: center; gap: var(--space-3); min-width: 0;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); text-decoration: none; font-size: var(--step--1);
}
.ftb-step__links a:hover { border-color: var(--teal); }
.ftb-step__links svg { flex: 0 0 auto; color: var(--teal-dark); }
.ftb-step__foot { margin: var(--space-4) 0 0; }

/* Checklist */
.ftb-progress {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  margin: var(--space-5) 0; padding: var(--space-4) var(--space-5);
  background: var(--snow); border-radius: var(--radius-card); border: 1px solid var(--border-soft);
}
.ftb-progress__bar { flex: 1; min-width: 10rem; height: 8px; background: var(--limestone-mid); border-radius: var(--radius-pill); overflow: hidden; }
.ftb-progress__bar span { display: block; height: 100%; width: 0; background: var(--teal); border-radius: var(--radius-pill); transition: width 0.2s ease; }
.ftb-progress p { margin: 0; font-size: var(--step--1); font-weight: 650; color: var(--navy); white-space: nowrap; }
/* The in-page nav sticks to the top of the viewport at 61px tall and sits over
   the site header, so an anchored section would otherwise arrive underneath it.
   Scoped through the nav's own sibling selector rather than by id, because
   #steps and #tools are not unique to this page. */
.ftb-nav ~ section[id] { scroll-margin-top: 72px; }

.ftb-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ftb-checklist li {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  background: var(--snow); border: 1px solid var(--border-soft);
  border-radius: var(--radius-card); padding: var(--space-4) var(--space-5);
}
/* The route filter hides off-route items with the `hidden` attribute, whose
   `display: none` comes from the user-agent sheet — so the author rule above
   beat it and off-route items kept rendering. The screen showed all 14 while
   the printed sheet correctly showed 10. */
.ftb-checklist li[hidden] { display: none; }
.ftb-checklist li.is-done { border-color: var(--teal); background: #F6FBFA; }
.ftb-checklist label { display: flex; align-items: center; gap: var(--space-4); flex: 1; min-width: 0; cursor: pointer; }
.ftb-checklist input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; accent-color: var(--teal); cursor: pointer; }
.ftb-checklist__n { flex: 0 0 auto; font-family: var(--serif); color: var(--ink-soft); }
.ftb-checklist__text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ftb-checklist__text strong { color: var(--navy); }
.ftb-checklist li.is-done .ftb-checklist__text strong { text-decoration: line-through; color: var(--ink-soft); }
.ftb-checklist__text span { font-size: var(--step--1); color: var(--ink-soft); }
.ftb-checklist__jump { flex: 0 0 auto; font-size: var(--step--1); white-space: nowrap; }

/* FAQ */
.ftb-faq { margin-top: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-card); overflow: hidden; background: var(--snow); }
.ftb-faq__item + .ftb-faq__item { border-top: 1px solid var(--hairline); }
.ftb-faq__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none;
  font-weight: 650; color: var(--navy);
}
.ftb-faq__item > summary::-webkit-details-marker { display: none; }
.ftb-faq__item > summary:hover { background: var(--limestone); }
.ftb-faq__item > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.ftb-faq__item > summary svg { flex: 0 0 auto; color: var(--ink-soft); transition: transform 0.18s ease; }
.ftb-faq__item[open] > summary svg { transform: rotate(180deg); }
.ftb-faq__body { padding: 0 var(--space-5) var(--space-5); }
.ftb-faq__body p { margin: 0; color: var(--ink-soft); }

@media (max-width: 767px) {
  .ftb-hero { padding-block: var(--space-5) var(--space-6); }
  .ftb-step > summary { padding: var(--space-4); gap: var(--space-3); }
  .ftb-step__n { width: 34px; height: 34px; }
  .ftb-step__tag { display: none; }
  .ftb-step__body { padding: 0 var(--space-4) var(--space-4); }
  .ftb-checklist li { padding: var(--space-4); }
  .ftb-checklist__jump { width: 100%; }
}

/* ---- Full-width text ----
   `.prose` and the hero lede are capped at a narrow reading measure, which is
   right for an article but wrong on a page whose main content is a full-width
   table: the paragraphs stopped two-thirds of the way across while the table
   ran to the container edge, so nothing lined up. These modifiers opt a page
   out of the measure and align its text with the table beneath it. */
.page-hero--wide .page-hero__lede { max-width: none; }
.prose--wide { max-width: none; }

/* The directory's standing note. Set apart from the body text rather than
   reading as the page's opening paragraph — it is a how-to-read, not content. */
.directory-note {
  margin: 0; padding: var(--space-4) var(--space-5);
  background: var(--snow); border: 1px solid var(--border-soft);
  border-left: 3px solid var(--teal); border-radius: var(--radius-card);
  font-size: var(--step--1); color: var(--ink-soft);
}
.directory-note strong { color: var(--navy); }

/* ============================================================================
   Photographic page hero — 19-2 (owner-supplied design, 2026-08-04).
   ONE shared component for Buying, Selling, Rent & Lease and Know Ottawa;
   page differences are data passed to partials/photo-hero.php, never copies
   of these rules. The navy overlay is CSS — the images ship clean.
   Step pages also carry .step-hero so the scoped print rules (18-3) keep
   hiding the hero when the checklist sheet prints; the ordinary-print rules
   for this hero live in print block 1 below, with the other unscoped hygiene.
   ============================================================================ */
.photo-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  min-height: clamp(700px, 78vh, 820px);
  background: var(--navy-deep); border-bottom: 0;
}
.photo-hero__media { position: absolute; inset: 0; z-index: -2; }
.photo-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(16, 37, 58, 0.04) 45%, rgba(16, 37, 58, 0.58) 100%),
    linear-gradient(90deg, rgba(16, 37, 58, 0.98) 0%, rgba(16, 37, 58, 0.92) 30%,
      rgba(16, 37, 58, 0.68) 55%, rgba(16, 37, 58, 0.24) 78%, rgba(16, 37, 58, 0.08) 100%);
}
/* The owner's design uses a WIDER canvas than the site's 72rem container:
   content spans up to 1540px and the journey bar up to 1600px, with
   clamp()ed edge padding (the reference mock and prompt both specify this —
   missing it squeezed everything toward the centre and starved the pill bar
   of width; corrected 2026-08-04 against the mock). */
.photo-hero .container { width: 100%; }
.photo-hero__container {
  max-width: calc(1540px + 2 * clamp(24px, 4.5vw, 80px));
  margin-inline: auto;
  padding-inline: clamp(24px, 4.5vw, 80px);
  padding-block: clamp(3.5rem, 7vh, 6rem) 0;
}
.photo-hero__bar .container {
  max-width: calc(1600px + 2 * clamp(24px, 3vw, 48px));
  margin-inline: auto;
  padding-inline: clamp(24px, 3vw, 48px);
}
.photo-hero__content {
  /* 760px cap since the fold pass: at very wide windows the old 650px cap
     wrapped Know Ottawa's H1 to FOUR 68px lines (286px of title) and pushed
     its rail 54px under the fold at 1800×890. The 48vw term still governs
     mid widths, so nothing changes below ~1580px. */
  max-width: min(760px, 48vw);
  /* Tightened 2026-08-04 evening (owner: the Rent & Lease journey bar was
     cut by the fold on desktop — 81px at 1280×800, measured). On pages
     where the hero is MIN-HEIGHT-bound these paddings were pure slack: the
     bar is pinned to the hero's foot by margin-top:auto, so the auto margin
     absorbs the reduction and NOTHING moves. Only content-tall pages (a
     three-line H1 like Rent & Lease's) compress, which pulls their bar
     above the fold. If a hero ever looks cramped, grow the hero's
     min-height — do not re-grow these paddings, or the fold cut returns. */
  margin-top: clamp(1.25rem, 3vh, 2.25rem);
  padding-bottom: clamp(1.75rem, 3.5vh, 3rem);
}
.photo-hero .breadcrumbs--in-hero, .photo-hero .breadcrumbs--in-hero a { color: rgba(255, 250, 244, 0.82); }
.photo-hero .breadcrumbs--in-hero [aria-current] { color: var(--snow); }
.photo-hero .page-hero__kicker { color: #EBA97B; }
.photo-hero h1 {
  color: var(--snow);
  font-size: clamp(2.625rem, 4vw, 4.25rem); line-height: 1.05;
  max-width: none; text-wrap: balance;
  margin: 0 0 var(--space-4);
}
.photo-hero .page-hero__lede {
  color: rgba(255, 250, 244, 0.94);
  font-size: clamp(1.125rem, 1.35vw, 1.375rem); line-height: 1.55; max-width: 41rem;
}
.photo-hero .step-hero__badges { margin-top: clamp(1.25rem, 2.5vh, 2rem); color: rgba(255, 250, 244, 0.9); }
/* The Last verified line on the scrim (19-2.6 Tools) — same markup page-hero
   renders, recoloured for the dark hero; the check keeps its teal-on-light
   meaning by going snow here so it is not mistaken for a link. */
.photo-hero .page-hero__verified { color: rgba(255, 250, 244, 0.85); }
.photo-hero .page-hero__verified svg { color: var(--snow); }
/* The hero search on Guides/Tools (owner 2026-08-04: the home box, identical).
   The modifier opens the hero's overflow so the suggestions dropdown is not
   clipped at its bottom edge — the home hero's 2026-08-02 bug; safe here
   because the media and overlay are inset:0 absolutes that cannot overflow —
   and z-index: 1 lifts the dropdown above later positioned elements, the
   phase-filter lesson. Keep it below the sticky header's 50. */
.photo-hero--search { overflow: visible; z-index: 1; }
.photo-hero .hero-search { margin-top: clamp(1.5rem, 3.5vh, 2.25rem); }
.photo-hero .step-hero__badges svg { color: #7CC5BE; }
.photo-hero .step-hero__actions { margin-top: clamp(1.75rem, 3vh, 2.1rem); gap: var(--space-4); }
.photo-hero .btn { padding: 0.95rem 1.9rem; font-size: var(--step-0); }
.photo-hero .btn--secondary { color: var(--snow); border-color: rgba(255, 255, 255, 0.85); background: transparent; }
.photo-hero .btn--secondary:hover { background: var(--snow); color: var(--navy); border-color: var(--snow); }

/* The translucent panel at the foot of the hero: five-journey bar or, on
   Know Ottawa, the topic rail. margin-top:auto pins it to the bottom of the
   flex column at every hero height. */
.photo-hero__bar { margin-top: auto; padding-bottom: clamp(1.25rem, 2vh, 1.75rem); }
.photo-hero__bar .journey-switcher {
  background: rgba(16, 37, 58, 0.8);
  -webkit-backdrop-filter: blur(12px) saturate(1.05); backdrop-filter: blur(12px) saturate(1.05);
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 14px;
  padding: 1rem 1.75rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  gap: var(--space-2);
}
.photo-hero__bar .journey-switcher__label { color: rgba(255, 250, 244, 0.72); }
.photo-hero__bar .journey-switcher__pills { background: transparent; border: 0; padding: 0; align-self: stretch; }
.photo-hero__bar .journey-switcher__pills a { color: rgba(255, 250, 244, 0.95); }
.photo-hero__bar .journey-switcher__pills a:hover { background: rgba(255, 255, 255, 0.1); color: var(--snow); }
.photo-hero__bar .journey-switcher__pills a:focus-visible { outline: 2px solid var(--snow); outline-offset: 2px; }
.photo-hero__bar .journey-switcher__pills a.is-active { background: var(--copper); color: var(--snow); }
/* No scrollbar in the journey strip, ever — the owner's "remove the slider"
   (2026-08-04). Desktop fits all five pills instead of scrolling; mobile
   still swipes, just without a visible bar. */
.photo-hero__bar .journey-switcher__pills { scrollbar-width: none; }
.photo-hero__bar .journey-switcher__pills::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) {
  /* overflow-x hidden, not auto: with the fit rules below the five pills fit
     with a pixel to spare, and hidden makes "no slider on desktop" a
     guarantee rather than a measurement — sub-pixel rounding can at worst
     clip a rounded pill edge invisibly, never summon a scrollbar. */
  .photo-hero__bar .journey-switcher__pills { flex-wrap: nowrap; overflow-x: hidden; }
  /* Tightened 2026-08-04 so five pills FIT at every desktop width — at 1280px
     the strip used to overflow by ~7px, which rendered the scrollbar the
     owner reported. Icons return and padding relaxes once there is room. */
  .photo-hero__bar .journey-switcher__pills a { padding-inline: 0.9rem; }
  .photo-hero__bar .journey-switcher__pills svg { display: none; }
  .photo-hero__bar .journey-switcher__pills a + a { border-left: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
  .photo-hero__bar .journey-switcher__pills a + a.is-active,
  .photo-hero__bar .journey-switcher__pills a + a:hover { border-left-color: transparent; border-radius: var(--radius-pill); }
}
@media (min-width: 1280px) {
  /* On the 1600px bar canvas the five pills have ~1148px+ available from
     1280 up, so the mock's full treatment — icons and 1.3rem padding —
     fits everywhere. The compact 1100–1279 fallback above only covers the
     narrow-desktop band. */
  .photo-hero__bar .journey-switcher__pills a { padding-inline: 1.3rem; }
  .photo-hero__bar .journey-switcher__pills svg { display: inline; }
}
/* Know Ottawa carries the longest H1 in the hero family (54 characters vs
   Buying's 38) — at the shared scale it wraps to FOUR 68px lines on wide
   windows and pushes its rail under the fold (owner report 2026-08-04,
   54px cut at 1800×890). One step down in scale holds it to three lines
   everywhere; no other page changes. */
.photo-hero--know-ottawa h1 { font-size: clamp(2.5rem, 3.3vw, 3.75rem); }

/* Topic rail (Know Ottawa): informational page, so a copper underline rather
   than a filled pill — per the owner's prompt. */
.photo-hero__rail a:hover, .photo-hero__rail a:focus-visible {
  background: transparent; color: var(--snow); box-shadow: inset 0 -2px 0 var(--copper);
  border-radius: var(--radius-sm);
}

/* Short desktop windows (the 1366×768 laptop class). Width-only type sizing
   meant a WIDE-but-short window grew the H1 while the height shrank — a
   three-line title like Rent & Lease's pushed the journey bar under the
   fold (owner report 2026-08-04; the home hero learned this same lesson
   with its min(vw,vh) clamps). Height joins the equation here, and the
   hero's min-height stops pretending the viewport is taller than it is —
   700px flat exceeded the 699px a 768 screen leaves under the header. */
@media (min-width: 641px) and (max-height: 800px) {
  .photo-hero { min-height: min(700px, calc(100svh - var(--header-h))); }
  .photo-hero h1 { font-size: clamp(2.25rem, min(4vw, 5.6vh), 4.25rem); }
  .photo-hero .page-hero__lede { font-size: clamp(1.05rem, min(1.35vw, 2.2vh), 1.375rem); }
  .photo-hero__container { padding-block: clamp(1.25rem, 3vh, 3rem) 0; }
  .photo-hero__content {
    margin-top: clamp(0.75rem, 2vh, 1.5rem);
    padding-bottom: clamp(1.25rem, 2.5vh, 2rem);
  }
}

@media (max-width: 1024px) {
  .photo-hero__content { max-width: min(680px, 78vw); }
  .photo-hero__overlay {
    background:
      linear-gradient(180deg, rgba(16, 37, 58, 0.12) 40%, rgba(16, 37, 58, 0.62) 100%),
      linear-gradient(90deg, rgba(16, 37, 58, 0.98) 0%, rgba(16, 37, 58, 0.94) 36%,
        rgba(16, 37, 58, 0.72) 60%, rgba(16, 37, 58, 0.3) 82%, rgba(16, 37, 58, 0.14) 100%);
  }
}
@media (max-width: 640px) {
  .photo-hero { min-height: 0; }
  .photo-hero__container { padding-block: var(--space-6) 0; }
  .photo-hero__container, .photo-hero__bar .container { padding-inline: 20px; }
  .photo-hero__content { max-width: none; padding-bottom: var(--space-6); }
  .photo-hero h1 { font-size: clamp(2.25rem, 10.5vw, 3rem); }
  .photo-hero__overlay {
    background: linear-gradient(180deg, rgba(16, 37, 58, 0.72) 0%, rgba(16, 37, 58, 0.66) 55%, rgba(16, 37, 58, 0.88) 100%);
  }
  .photo-hero .step-hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  /* STACKED LIST since 2026-08-04 evening — the owner's post-rollout
     instruction ("there is a scroll for the button on the hero, which is
     again breaking the sequence — convert those like the home page"),
     superseding the same-day swipe-with-pinned-pill treatment: the pin
     reordered the journeys, which is the sequence-break the owner named.
     One full-width row per pill in NATURAL order, hairlines between,
     nothing hidden off-screen — the pattern approved on the home page's
     category list, in the hero bar's own dark language. Covers the
     five-journey bars AND the topic rails (Know Ottawa's five anchors,
     the guides Start-here rail) — same classes. */
  .photo-hero__bar { padding-bottom: var(--space-4); }
  .photo-hero__bar .journey-switcher { border-radius: var(--radius-card); padding: var(--space-4); }
  .photo-hero__bar .journey-switcher__pills {
    flex-direction: column; flex-wrap: nowrap; gap: 0;
    overflow-x: visible; align-self: stretch;
  }
  .photo-hero__bar .journey-switcher__pills a {
    width: 100%; min-height: 44px; white-space: normal;
    padding: 0.65rem 0.6rem; border-radius: var(--radius-sm);
  }
  .photo-hero__bar .journey-switcher__pills a + a { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .photo-hero__bar .journey-switcher__pills a.is-active { border-radius: var(--radius-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-hero .btn { transition: none; }
}