/* Zola Property Management. Type: Libre Caslon Text Bold for H1 and H2 (Stanley chose it on October 19, 2026,
   over Playfair Display and the old sans headings) and the system UI font for everything else, so the site has two
   typefaces and loads one font file. Article text in guides stays Georgia. Sizes in rem so text follows each
   visitor's browser setting. Phones first (under 768px). Colours: black and gold from the logo. */
@font-face {
  font-family: "Libre Caslon Text";
  src: url("/assets/fonts/libre-caslon-text-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* Until the font arrives, headings show in Times New Roman Bold scaled to Caslon's widths (measured over every H1
   and H2 on the site), so lines break in the same places and nothing shifts when Caslon swaps in. */
@font-face {
  font-family: "Caslon fallback";
  src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("LiberationSerif-Bold");
  font-weight: 700;
  size-adjust: 121.6%;
  ascent-override: 79.8%;
  descent-override: 21.4%;
  line-gap-override: 0%;
}

:root {
  --font-display: "Libre Caslon Text", "Caslon fallback", Georgia, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-read: Georgia, "Times New Roman", serif;
  --h1: 2rem; --h2: 1.625rem; --h3: 1.25rem; --stat: 2rem;
  --lead: 1.1875rem; --body: 1.0625rem; --article: 1.125rem;
  --small: 0.9375rem; --table: 0.9375rem;
  --lh-body: 1.55; --lh-h1: 1.14;

  /* Zola's palette: a muted brand with one vivid action colour (Stanley chose sample A, Oct 19 2026).
     Gold 500 is for buttons only (black text, 10.8:1), so a button is the one vivid thing on every screen; on white
     and cream it gets a gold deep edge (5.0:1 against white) and a soft shadow. Everything else is muted:
     gold muted for lines, borders, badges and bars; gold deep for stars and ticks on white and cream (5.0:1 / 4.7:1);
     gold ink for small gold text on white and cream (6.0:1 / 5.6:1); gold 300 for small gold text on black (10.1:1).
     Links are black with a muted gold underline. */
  --black: #0B0B0C;
  --black-2: #151517;
  --black-3: #26262A;
  --ink: #1A1A1D;
  --muted: #55565B;
  --line: #E6E0D2;
  --paper: #FFFFFF;
  --cream: #FAF7F0;
  --gold-500: #F2B705;
  --gold-600: #E39A06;
  --gold-deep: #8C6A1E;
  --gold-muted: #C9A253;
  --gold-ink: #76603A;
  --gold-300: #D4B676;
  --pain: #9B2C2C;   /* deep red for the homepage problem cards only (7.5:1 on white) */
  --on-black: #F5F3EE;
  --on-black-muted: #C9C5BC;
  --focus: #2F6FED;
  --radius: 10px;
  --gutter: 16px;
  --max: 1200px;
}
@media (min-width: 768px) {
  :root {
    --h1: 2.75rem; --h2: 2rem; --h3: 1.375rem; --stat: 2.5rem;
    --lead: 1.375rem; --body: 1.125rem; --article: 1.25rem; --table: 1rem;
    --lh-body: 1.6;
    --gutter: 32px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; font: 400 var(--body)/var(--lh-body) var(--font-ui); color: var(--ink); background: var(--paper); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { color: var(--black); margin: 0 0 .5em; }
h1 { font: 700 var(--h1)/var(--lh-h1) var(--font-display); letter-spacing: -0.01em; }
h2 { font: 700 var(--h2)/1.2 var(--font-display); letter-spacing: -0.01em; margin-top: 0; }
h1, h2 { text-wrap: balance; }   /* even line lengths, no single word left on the last line */
h3 { font: 600 var(--h3)/1.3 var(--font-ui); }
p, li { max-width: 66ch; }
p { margin: 0 0 1em; }
a { color: var(--black); text-decoration-color: var(--gold-muted); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--black); text-decoration-color: var(--black); }
body { overflow-wrap: break-word; }   /* long words (an email address in a sentence) wrap instead of widening the page */
a[href^="mailto:"] { overflow-wrap: anywhere; }   /* the long email address wraps on narrow phones instead of widening the page */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
strong { font-weight: 600; }
.small, .micro { font-size: var(--small); line-height: 1.45; }
.lead { font-size: var(--lead); line-height: 1.45; }
.eyebrow { font: 600 0.8125rem/1.25 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-300); margin: 0 0 .75rem; }
.eyebrow--dark { color: var(--gold-ink); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--paper); color: var(--black); padding: 12px 16px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: calc(700px + 2 * var(--gutter)); }

/* Buttons: one bright button per decision (gold, black text); secondary actions are outlines (template rule 1).
   On white and cream the gold button gets a dark gold edge and a soft shadow so it reads as pressable; on black
   sections it stays flat (the gold alone is 10.8:1 against black). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 3.5rem; padding: 0 1.4rem;
  font: 600 1.0625rem/1.2 var(--font-ui); border-radius: 8px; border: 2px solid transparent; text-decoration: none; cursor: pointer; text-align: center; }
.btn-primary { background: var(--gold-500); color: var(--black); border-color: var(--gold-deep);
  box-shadow: inset 0 -2px 0 rgba(11, 11, 12, .14), 0 1px 2px rgba(11, 11, 12, .16), 0 8px 18px -8px rgba(11, 11, 12, .5); }
.btn-primary:hover { background: var(--gold-600); color: var(--black); border-color: #7A5C14; }
.hero .btn-primary, .cta-band .btn-primary, .site-header .btn-primary, .mobile-panel .btn-primary, .site-footer .btn-primary {
  border-color: transparent; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
.hero .form-card .btn-primary, .cta-band .form-card .btn-primary { border-color: var(--gold-deep);
  box-shadow: inset 0 -2px 0 rgba(11, 11, 12, .14), 0 1px 2px rgba(11, 11, 12, .16), 0 8px 18px -8px rgba(11, 11, 12, .5); }
.btn-ghost { background: transparent; color: var(--black); border-color: var(--black); }
.btn-ghost:hover { background: var(--black); color: var(--on-black); }
.btn-ghost-light { background: transparent; color: var(--on-black); border-color: rgba(245, 243, 238, .55); }
.btn-ghost-light:hover { background: var(--on-black); color: var(--black); }
.btn-block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.5rem 0 .75rem; }
@media (max-width: 559px) { .btn-row .btn { flex: 1 1 100%; } }
.more { font-weight: 600; text-decoration: none; }
.more::after { content: " →"; }
/* "Full pricing details" on the homepage (Stanley, October 19, 2026): a richer gold than gold ink, which read as
   mustard; #946B00 is 4.8:1 on white, so it passes for normal-size text. */
.more--gold, .link-gold { color: #946B00; }
/* The free LTB record search, offered under the homepage benefits (Stanley, October 19, 2026): a box in the same
   2px gold outline as the area chips, so it reads as a link to a tool, not a second main button. */
/* The three cost cards on the homepage in capitals (Stanley, October 19, 2026). Done in CSS so the words stay in
   sentence case in the page, which screen readers and search snippets read more naturally. */
.cards--caps h3 { text-transform: uppercase; letter-spacing: .03em; }
/* The cost cards marked as problems (Stanley chose sample A, October 19, 2026): one muted deep red, 7.5:1 on white,
   on an x badge, the heading and a top line. The text stays black and the red is used nowhere else; the x shape
   carries the meaning for colour-blind readers, who see the red as a dark olive. Phones drop the top line. */
.cards--pain .card { border-top: 4px solid var(--pain); }
.cards--pain h3 { color: var(--pain); }
.cards--pain h3::before { content: ""; display: block; width: 30px; height: 30px; margin-bottom: 12px; border-radius: 50%;
  background: var(--pain) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 3l8 8M11 3l-8 8' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
@media (forced-colors: active) { .cards--pain h3::before { display: none; } }
/* The money-lost meter under the cost cards (Stanley, October 19, 2026): a thermometer that fills month by month in
   the same deep red. The page carries the final figures; site.js runs it up from zero once it scrolls into view. */
.loss-meter { margin: 1.75rem 0 0; padding: 14px 16px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); }   /* slim, full width (Stanley, October 19, 2026) */
.loss-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 8px; }   /* the amount right after the label */
.loss-label { font: 700 1.0625rem/1.3 var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.loss-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.loss-amount { font: 700 1.625rem/1.1 var(--font-ui); color: var(--pain); font-variant-numeric: tabular-nums; }
.loss-after { font-size: var(--small); color: var(--muted); }
.loss-tube { display: flex; align-items: center; height: 26px; }
/* The total sits at the end of the bar (Stanley, October 19, 2026); the month scale lines up under the bar. Phones put
   it just above the end of the bar, so the six months keep the full width. */
.loss-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center; }
.loss-body .loss-tube { grid-column: 1; grid-row: 1; }
.loss-body .loss-total { grid-column: 2; grid-row: 1; margin: 0; }
.loss-body .loss-scale { grid-column: 1; grid-row: 2; }
@media (max-width: 639px) {
  .loss-body { grid-template-columns: minmax(0, 1fr); }
  .loss-body .loss-total { grid-column: 1; grid-row: 1; justify-self: end; margin-bottom: 2px; }
  .loss-body .loss-tube { grid-row: 2; }
  .loss-body .loss-scale { grid-row: 3; }
}
.loss-bulb { flex: none; position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; background: var(--pain); box-shadow: 0 0 0 3px var(--cream); }
.loss-track { flex: 1; height: 12px; margin-left: -8px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-left: 0; border-radius: 0 6px 6px 0; }
.loss-fill { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #B8463F, var(--pain)); }
.loss-scale { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 4px 0 0 18px; padding: 0; }
.loss-scale li { max-width: none; padding: 2px 5px 0 0; text-align: right; border-right: 2px solid var(--line); font-size: .8125rem; line-height: 1.3; }
.loss-mo { display: block; color: var(--muted); }
.loss-amt { display: block; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.loss-scale li.is-on { border-right-color: var(--pain); }
.loss-scale li.is-on .loss-amt { color: var(--pain); }
.loss-short { display: none; }
@media (max-width: 639px) {
  .loss-meter { padding: 16px; }
  .loss-scale li { padding-right: 4px; font-size: .8125rem; }
  .loss-cur { display: none; }   /* the total above already says it's dollars */
  .loss-full { display: none; }
  .loss-short { display: inline; }
}
.loss-note { margin: 14px 0 0; font-size: var(--small); color: var(--muted); }
.loss-zola { margin: 10px 0 0; font-size: var(--small); font-weight: 700; color: var(--black); }   /* bold (Stanley, October 20, 2026) */
.loss-toggle { min-height: 44px; margin-top: 0; font-weight: 600; font-size: var(--small); color: var(--black); text-decoration-color: var(--gold-muted); text-underline-offset: 4px; }
.loss-toggle::before { content: "❚❚ "; font-size: .8em; }   /* pause: the meter moves nonstop (WCAG 2.2.2) */
.loss-toggle[data-state="paused"]::before { content: "▶ "; }
/* An underlined word for emphasis in a heading ("trust", Stanley, October 19, 2026): thicker and lower than a link's
   underline, so it reads as an accent rather than something to click. */
.accent-u { text-decoration: underline; text-decoration-color: var(--gold-muted); text-decoration-thickness: 4px;
  text-underline-offset: 6px; text-decoration-skip-ink: none; }
.tool-callout { margin: 1.75rem 0 0; max-width: none; }
.tool-callout a { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 14px 20px; min-height: 56px;
  border: 2px solid var(--gold-muted); border-radius: var(--radius); background: var(--paper); color: var(--black);
  font-weight: 600; text-decoration: none; }
.tool-callout a:hover { border-color: #946B00; }
.tool-kind { font: 600 .8125rem/1.25 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: #946B00; }
.tool-text::after { content: " →"; color: #946B00; }
.more--gold:hover { text-decoration: underline; text-decoration-color: var(--gold-muted); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* Header: logo left, five menu items, phone, one button (template block 1). Phones: logo, a call icon,
   a Menu button with the word on it, and a scrollable row of the most-used pages. */
.site-header { background: var(--black); color: var(--on-black); position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--black-3); }
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; padding: 10px 0; flex: 0 0 auto; }
.brand img { height: 38px; width: auto; }
.main-nav { display: none; gap: 2px; margin-left: auto; }
.main-nav a { color: var(--on-black); text-decoration: none; font: 500 1rem/1.25 var(--font-ui); padding: 10px 11px; border-radius: 6px; }
.main-nav a:hover, .main-nav a[aria-current="page"] { background: rgba(255,255,255,.08); color: #fff; }
.main-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold-muted); }
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* The phone number matches the footer tagline's gold (Stanley, October 19, 2026). */
.header-phone { display: none; color: var(--gold-300); font: 600 1rem/1.2 var(--font-ui); text-decoration: none; white-space: nowrap; align-items: center; gap: 8px; }
.header-phone:hover { color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px; }
.header-phone svg { color: var(--gold-300); }
.header-phone--always { display: inline-flex; margin-left: auto; min-height: 44px; }
.header-btn { display: none; min-height: 44px; padding: 0 1rem; font-size: 1rem; white-space: nowrap; }
.call-icon { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--gold-500); text-decoration: none;
  font: 700 .9375rem/1 var(--font-ui); white-space: nowrap; }   /* "Call →" then the yellow button (phones, Oct 20 2026) */
.call-box { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; color: var(--black); background: var(--gold-500); }
.mobile-nav summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 8px; color: var(--on-black); font: 600 1rem/1 var(--font-ui); cursor: pointer; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -6px; } .menu-icon::after { top: 6px; }
.mobile-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--black); padding: 8px var(--gutter) 24px;
  display: grid; gap: 2px; border-top: 1px solid var(--black-3); box-shadow: 0 12px 24px rgba(0,0,0,.35); max-height: calc(100vh - 64px); overflow-y: auto; }
.mobile-panel a { color: var(--on-black); text-decoration: none; padding: 14px 4px; font: 500 1.125rem/1.33 var(--font-ui); border-bottom: 1px solid var(--black-3); }
.mobile-panel .btn { margin-top: 12px; border-bottom-width: 2px; font-weight: 600; }
.mobile-panel .btn-primary { color: var(--black); }
.quick-nav { border-top: 1px solid var(--black-3); }
.quick-nav .container { display: flex; gap: 8px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; scrollbar-width: none; }
.quick-nav .container::-webkit-scrollbar { display: none; }
.quick-nav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 18px;
  border: 1px solid var(--black-3); color: var(--on-black); text-decoration: none; font: 500 .9375rem/1.2 var(--font-ui); }
.quick-nav a[aria-current="page"] { border-color: var(--gold-muted); color: #fff; }
.site-header--min .header-inner { justify-content: space-between; }
/* Phone header with "Call →" (October 20, 2026): tighter gaps, and the logo shrinks a little on narrow phones so the
   logo, "Call →", the call button and "Menu" fit on one line down to 360 px; below that, "Menu" shows as the icon only. */
@media (max-width: 1099px) {
  .header-inner { gap: 12px; }
  .header-actions { gap: 8px; }
  .mobile-nav summary { padding: 0 10px; gap: 6px; }
  .brand img { height: clamp(24px, calc((100vw - 236px) * .2303), 38px); }
}
@media (max-width: 359px) {
  .menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .brand img { height: clamp(24px, calc((100vw - 190px) * .2303), 38px); }
}
@media (min-width: 1100px) {
  .main-nav { display: flex; }
  .header-actions { margin-left: 4px; }
  .header-phone, .header-btn { display: inline-flex; }
  .mobile-nav, .call-icon, .quick-nav { display: none; }
  .brand img { height: 46px; }
}

/* Breadcrumb strip (service template block 1) */
.crumb-bar { background: var(--black); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 12px 0 0; font-size: var(--small); color: var(--on-black-muted); }
.breadcrumbs li { max-width: none; }
.breadcrumbs li + li::before { content: "›"; margin: 0 6px 0 2px; color: var(--on-black-muted); }
.breadcrumbs a { color: var(--on-black); }
.hero .breadcrumbs { margin-bottom: 16px; }
.breadcrumbs li[aria-current] { color: var(--on-black); }

/* Hero (template block 2): headline, lead, one main button, a quieter call link, reassurance and the rating. */
.hero { background: var(--black); color: var(--on-black); padding: 32px 0 40px; position: relative; }
.hero h1 { color: #fff; max-width: 15.6em; }   /* 685px at desktop size, the line length of the approved sample */
.hero .lead { color: var(--on-black); max-width: 46ch; }
/* The homepage headline's "triple-A tenant", explained right under it (Stanley, October 19, 2026). */
.hero-def { color: var(--on-black); max-width: 52ch; margin: -.25rem 0 1rem; font-size: 1rem; line-height: 1.55; }
.hero-def strong { color: var(--gold-300); font-weight: 600; }
.nowrap { white-space: nowrap; }
.hero .lead a, .hero-promise a { color: var(--on-black); }
.hero .lead a:hover, .hero-promise a:hover { color: #fff; }
.hero .micro { color: var(--on-black-muted); margin: 0 0 .5rem; }
.hero-grid { display: grid; gap: 32px; align-items: center; }
.hero-copy { min-width: 0; position: relative; }
.hero-promise { font-weight: 600; color: var(--on-black); }
.trust { font-size: var(--small); line-height: 1.45; color: var(--muted); margin: .5rem 0 0; }
.trust a { color: inherit; font-weight: 600; text-decoration-thickness: 1px; }
.micro--btn { color: var(--muted); margin: 0 0 .25rem; }
.cta-band .micro--btn, .hero .micro--btn { color: var(--on-black-muted); }
.trust--dark { color: var(--on-black-muted); }
.trust--dark a { color: var(--on-black); }
.stars { color: var(--gold-deep); letter-spacing: 1px; }
.trust--dark .stars, .hero .stars, .cta-band .stars { color: var(--gold-300); }
.page-meta { font-size: var(--small); color: var(--on-black-muted); margin-top: 1rem; }
@media (min-width: 768px) {
  .hero { padding: 48px 0 64px; }
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; }
}
.hero--guide { padding-bottom: 32px; }
.byline { font-size: var(--small); color: var(--on-black-muted); margin: 0; }
.byline a { color: var(--on-black); }

/* Homepage hero photo (swap S4). Phones: under the text. Wide screens: behind the text, dark on the left. */
.hero--home { padding-bottom: 0; overflow: hidden; }
.hero--home .container { position: relative; z-index: 1; }
.hero--home .hero-copy { padding-bottom: 28px; }
.hero-media { display: block; }
.hero-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 767px) {
  .hero--home { display: flex; flex-direction: column; }
  .hero--home .hero-media { order: 2; }
}
@media (min-width: 768px) {
  .hero--home { padding: 72px 0 88px; min-height: 560px; }
  .hero--home .hero-copy { padding-bottom: 0; max-width: 640px; }
  .hero-media { position: absolute; inset: 0; z-index: 0; }
  .hero-media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 70% 50%; }
  .hero-media::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(11,11,12,.96) 0%, rgba(11,11,12,.9) 38%, rgba(11,11,12,.55) 62%, rgba(11,11,12,.15) 100%); }
}

/* Proof bar (home block 3, ad landing block 3; swap S3) */
.proof-bar { background: var(--cream); border-bottom: 1px solid var(--line); }
.proof-list { list-style: none; margin: 0; padding: 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.proof-list li { max-width: none; }
.proof-list a, .proof-list div { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); padding: 10px 0; }
.proof-list strong { font: 700 1rem/1.3 var(--font-ui); color: var(--black); }
.proof-list span { font-size: var(--small); color: var(--muted); }
.proof-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.proof-bar .trust { padding-bottom: 14px; margin: 0; }
@media (min-width: 900px) { .proof-list { grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 18px 0; } .proof-list li:last-child:nth-child(odd) { grid-column: auto; } }

/* Sections */
.section { padding: 48px 0; }
.section--alt { background: var(--cream); }
.section--tight { padding: 24px 0; }
@media (min-width: 768px) { .section { padding: 72px 0; } .section--tight { padding: 32px 0; } }
.split { display: grid; gap: 32px; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.sub-h { margin-top: 1.75rem; }
.sub-h2 { margin-top: 2.5rem; }

/* Cards. Phones: a single column; plain cards read as a list. */
.cards { display: grid; gap: 16px; margin: 1.5rem 0; }
@media (min-width: 640px) { .cards--2, .cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card h3 { margin-bottom: .4rem; }
.card p:last-child { margin-bottom: 0; }
.cards--plain .card { border: 0; border-top: 3px solid var(--gold-muted); border-radius: 0; background: transparent; padding: 16px 0 0; }
@media (max-width: 639px) {
  .cards--3 > .card:not(.card--link):not(.option), .cards--2 > .card:not(.card--link) { border-width: 0 0 1px; border-radius: 0; background: transparent; padding: 0 0 16px; }
  .cards--3 > .card:not(.card--link):not(.option):last-child { border-bottom: 0; padding-bottom: 0; }
}
.card--link { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); transition: border-color .15s; }
.card--link:hover { border-color: var(--gold-muted); color: var(--ink); }
.card--link .more { margin-top: auto; color: var(--gold-ink); }
.card-kind { font: 600 .8125rem/1.25 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: .5rem; }
.card-price { font-weight: 600; color: var(--black); }
.service-card h3 { color: var(--black); }

/* Lists */
.ticks, .crosses { list-style: none; padding: 0; margin: 0 0 1rem; }
.ticks li, .crosses li { position: relative; padding-left: 28px; margin-bottom: .5rem; }
.ticks li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 12px; height: 7px; border-left: 2.5px solid var(--gold-deep); border-bottom: 2.5px solid var(--gold-deep); transform: rotate(-45deg); }
/* Not-included items get an x (Stanley, October 19, 2026), drawn with two bars so it matches the ticks */
.crosses li::before, .crosses li::after { content: ""; position: absolute; left: 4px; top: .72em; width: 13px; height: 2.5px; border-radius: 2px; background: var(--muted); }
.crosses li::before { transform: rotate(45deg); }
.crosses li::after { transform: rotate(-45deg); }
.ticks--light li::before, .cta-band .ticks li::before { border-color: var(--gold-300); }
.ticks--small li { font-size: var(--small); margin-bottom: .3rem; }
.link-list { padding-left: 1.2em; }
.link-list li { margin-bottom: .4rem; }
.link-list--rows { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.link-list--rows li { margin: 0; max-width: none; }
.link-list--rows a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 8px 4px; border-bottom: 1px solid var(--line); font-weight: 600; text-decoration: none; color: var(--black); }
.link-list--rows a::after { content: "→"; color: var(--gold-ink); margin-left: 12px; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1rem; }
.chips li { max-width: none; }
.chips a, .chips--static li { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 22px; text-decoration: none; color: var(--black); background: var(--paper); font-size: var(--small); }
/* Area chips (Stanley chose sample C, the gold outline, October 19, 2026): a 2px gold outline and bold black text so
   they stand out, while the vivid gold buttons stay the boldest thing on the page. Stanley asked for the same outline
   on the places under "Where we work in <city>" on every city page (.chips--static); those aren't links, so they get
   no hover. */
.chips a, .chips--static li { border: 2px solid var(--gold-muted); font-weight: 600; }
.chips a:hover { background: var(--cream); }
.next-list { padding-left: 1.3em; margin: 0 0 1.25rem; }
.next-list li { margin-bottom: .5rem; }

/* Steps (How it works): one column on phones, timing on its own line */
.steps { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 20px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px; } }
.step { display: flex; gap: 14px; max-width: none; }
/* How it works as a timeline (Stanley, October 19, 2026): once all the steps fit in one row they read left to right,
   the number on top and a gold line from each number to the next. Three steps from 900px; four from 1024px (two and
   two below that); five from 1200px (three and two, centred, below that). Phones keep one column. The row switch
   only sets the custom properties below, so the timeline rules are written once. */
.steps--line > .step { flex-direction: var(--step-dir, row); gap: var(--step-gap, 14px); position: relative; }
.steps--line > .step:not(:last-child)::before { content: ""; display: var(--step-line, none); position: absolute; top: 19px;
  left: 20px; width: calc(100% + 24px); height: 2px; background: var(--gold-muted); opacity: .55; }
.steps--line .step-n { position: relative; z-index: 1; }
@media (min-width: 900px) {
  .steps--line.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps--line.steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--line.steps--5 { display: flex; flex-wrap: wrap; justify-content: center; }
  .steps--line.steps--5 > .step { flex: 0 0 calc((100% - 2 * 28px) / 3); }
  .steps--line.steps--3 { --step-dir: column; --step-gap: 12px; --step-line: block; gap: 24px; }
}
@media (min-width: 1024px) {
  .steps--line.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr));
    --step-dir: column; --step-gap: 12px; --step-line: block; gap: 24px; }
}
@media (min-width: 1200px) {
  .steps--line.steps--5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    --step-dir: column; --step-gap: 12px; --step-line: block; gap: 24px; }
}
.step-n { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--black); color: var(--gold-300); display: grid; place-items: center; font: 700 1.0625rem/1 var(--font-ui); }
.step h3 { margin-bottom: .25rem; }
.step-time { font: 600 var(--small)/1.3 var(--font-ui); color: var(--gold-ink); margin: 0 0 .4rem; }

/* Results and stats (home block 7) */
.stats { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stats li { max-width: none; border-left: 3px solid var(--gold-muted); padding-left: 12px; }
@media (max-width: 559px) {
  .stats { grid-template-columns: 1fr; gap: 10px; }
  .stats li { display: flex; align-items: baseline; gap: 12px; }
}
.stat { display: block; font: 700 var(--stat)/1.1 var(--font-ui); color: var(--black); }
.stat-label { font-size: var(--small); color: var(--muted); }

/* Reviews (swap S2): real Google reviews, never italic */
.reviews { display: grid; gap: 16px; margin: 1.5rem 0; }
@media (min-width: 900px) { .reviews { grid-template-columns: repeat(2, 1fr); } }
.review { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; display: flex; flex-direction: column; }
.review-stars { margin: 0 0 .5rem; font-size: 1.125rem; }
.review blockquote { margin: 0 0 .75rem; }
.review blockquote p { font-size: 1.0625rem; line-height: 1.55; color: var(--ink); }
.review figcaption { font-size: var(--small); color: var(--muted); margin-top: auto; }
.review figcaption strong { color: var(--black); }
.review-tags { font-size: var(--small); margin: .5rem 0 0; }

/* Offer (home block 8, pricing block 2; swap S5) */
.offer-grid { display: grid; gap: 16px; margin: 1.5rem 0; }
@media (min-width: 900px) { .offer-grid { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.option { display: flex; flex-direction: column; }
.option--featured { border: 2px solid var(--gold-muted); box-shadow: 0 8px 24px rgba(11, 11, 12, .08); }
.badge { display: inline-block; align-self: flex-start; font: 600 .8125rem/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--black); background: var(--gold-muted); padding: 6px 10px; border-radius: 4px; margin-bottom: .75rem; }
.price { font: 700 var(--stat)/1.1 var(--font-ui); color: var(--black); margin: .25rem 0 .75rem; }
.option-who { color: var(--muted); }
.option-note { font-size: var(--small); color: var(--muted); }
.option .btn { margin-top: .5rem; }
.offer-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin: 2rem 0; }

/* Guarantee */
.guarantee { border: 2px solid var(--black); border-radius: var(--radius); padding: 20px 24px; margin: 0 0 2.5rem; background: var(--paper); }
.guarantee h3 { margin-bottom: .75rem; }
.guarantee ul { margin: 0; }

/* Short answer (SEO + AI search template: answer first, 40-60 words) */
.answer { border-left: 4px solid var(--gold-muted); background: var(--cream); padding: 16px 20px; margin: 0 0 2rem; border-radius: 0 var(--radius) var(--radius) 0; }
.section--alt .answer { background: var(--paper); }
.answer-label { font: 600 .8125rem/1.25 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 .4rem; }
.answer p:last-child { margin-bottom: 0; }
.answer--guide p:not(.answer-label) { font: 400 var(--article)/1.65 var(--font-read); }

/* What's included */
.incl-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .incl-grid { grid-template-columns: repeat(3, 1fr); } }
.incl h3 { font-size: 1.125rem; }
/* What's included in a gold outline, what isn't in a subtle red one with red x marks (Stanley, October 19, 2026).
   The third list ("what we need from you") stays open, padded so its heading lines up with the other two. */
.incl--do, .incl--not { padding: 18px 20px; border-radius: var(--radius); }
.incl--do { background: var(--paper); border: 2px solid var(--gold-muted); }
.incl--not { background: #FDF6F5; border: 2px solid #E8C4C1; }
.incl--not .crosses li::before, .incl--not .crosses li::after { background: var(--pain); }
@media (min-width: 900px) { .incl--need { padding-top: 20px; } }

/* Tables. Wide tables keep their first column and scroll sideways on phones, with a visible cue. */
.table-wrap { width: 100%; margin: 1.5rem 0; }
.table-wrap--scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; font-size: var(--table); line-height: 1.5; background: var(--paper); }
.table caption { text-align: left; font-weight: 600; padding: 0 0 .5rem; color: var(--black); }
.table th, .table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.table thead th { background: var(--black); color: #fff; font-weight: 600; }
.table tbody th { font-weight: 600; color: var(--black); }
.table--compare { min-width: 640px; }
.table--compare th:first-child, .table--compare td:first-child { position: sticky; left: 0; z-index: 1; width: 30%; }
.table--compare tbody th { background: var(--paper); box-shadow: 1px 0 0 var(--line); }
.table--compare thead th:nth-child(2) { background: var(--gold-muted); color: var(--black); }
.table--compare tbody td:nth-child(2) { background: #FFF8E0; font-weight: 600; }
.scroll-cue { font-size: var(--small); color: var(--muted); margin-top: -1rem; }
@media (min-width: 900px) { .scroll-cue { display: none; } }
.price-card .price { margin-top: 0; }

/* FAQ: accordions, closed on phones (opened on wide screens by site.js) */
.faq-list { margin: 1rem 0 0; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: 0 0 auto; font: 600 1.5rem/1 var(--font-ui); color: var(--gold-ink); }
.faq-item[open] summary::after { content: "–"; }
.faq-item h3 { font: 600 1.0625rem/1.41 var(--font-ui); margin: 0; color: var(--black); }
@media (min-width: 768px) { .faq-item h3 { font-size: 1.125rem; line-height: 1.44; } }
.faq-a { padding: 0 0 12px; }
.faq-a p { margin-bottom: .75rem; }
.faq-more { margin-top: 1.25rem; }
.faq-topic { margin-bottom: 3rem; }
.topic-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 1.25rem 0 0; }
.topic-links li { max-width: none; }
.topic-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid rgba(245,243,238,.4); color: var(--on-black); text-decoration: none; font-weight: 600; }
.faq-search { margin-top: 1.25rem; max-width: 520px; }
.faq-search label { display: block; font: 600 1rem/1.4 var(--font-ui); margin-bottom: 6px; }
.faq-item[hidden], .faq-topic[hidden] { display: none; }

/* Helper (services hub block 3) */
.helper { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 10px; }
@media (min-width: 900px) { .helper { grid-template-columns: repeat(3, 1fr); } }
.helper li { max-width: none; }
.helper a { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 56px; padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); font: 600 1.0625rem/1.4 var(--font-ui); }
.helper a:hover { border-color: var(--gold-muted); }
.helper .go { font: 400 var(--small)/1.3 var(--font-ui); color: var(--gold-ink); }
.helper .go::after { content: " →"; }
.helper-out { font-weight: 600; }
.service-links { list-style: none; padding: 0; display: grid; gap: 0 40px; }
@media (min-width: 900px) { .service-links { grid-template-columns: repeat(2, 1fr); } }
.service-links li { max-width: none; }
.service-links a { display: flex; flex-direction: column; min-height: 56px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--black); }
.service-links span { font-size: var(--small); color: var(--muted); }

/* Areas we serve (/areas/): regions with their area pages as rows, then the smaller places served */
.chips--jump { margin: 1rem 0 2rem; }
.region { padding: 28px 0 8px; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.region h3 { font-size: var(--h3); }
@media (min-width: 1100px) { .area-links { grid-template-columns: repeat(3, 1fr); } }
.area-links a strong { font-weight: 600; }
/* Areas page (Stanley, October 19, 2026): each city is a box with the same 2px gold outline as the area chips. */
.area-links { gap: 12px; margin: 1rem 0; }
.area-links a { border: 2px solid var(--gold-muted); border-radius: var(--radius); padding: 12px 16px; min-height: 0; height: 100%; }
.area-links a:hover { background: var(--cream); }
.also, .nearby { font-size: var(--small); color: var(--ink); margin: 1rem 0 1.25rem; }
/* Average asking rents on area pages and in the rent guide */
.rent-box { margin-top: 2rem; padding: 20px; background: var(--cream); border-radius: var(--radius); }
.section--alt .rent-box { background: var(--paper); }
.rent-box h3 { margin-bottom: .25rem; }
.rent-box .table-wrap { margin: 1rem 0; }
.rent-box p { margin-bottom: .5rem; }
.rent-box .src { font-size: var(--small); color: var(--muted); margin: 0; }
.rent-box th[scope="row"] { white-space: nowrap; }
.table--rents { min-width: 640px; }
.table--measures { min-width: 600px; }
@media (min-width: 900px) { .table--rents, .table--measures { min-width: 0; } }
.table--rents th:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); box-shadow: 1px 0 0 var(--line); }
.table--rents thead th:first-child { background: var(--black); }

/* A draft page (Zola's rental report before it's published) */
.draft-note { background: #FFF3CD; color: #1A1A1A; border: 1px solid #E8C55A; border-radius: var(--radius); padding: 10px 14px; font-size: var(--small); margin: .75rem 0 1rem; }

/* Area pages: the rent box and the local rules at a glance, side by side on wide screens */
.local-data { display: grid; gap: 24px; margin-top: 2rem; }
@media (min-width: 900px) { .local-data--two { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.local-data .rent-box { margin-top: 0; }
.glance { padding: 20px; background: var(--cream); border-radius: var(--radius); border-left: 3px solid var(--gold-muted); }
.glance h3 { margin-bottom: .5rem; }
.glance .table-wrap { margin: 1rem 0; }
.glance .src { font-size: var(--small); color: var(--muted); margin: 0; }
.table--glance th[scope="row"] { width: 34%; }
.table--glance p, .table--rules p { margin: 0 0 .35rem; max-width: none; }
.table--glance p:last-child, .table--rules p:last-child { margin-bottom: 0; }
.src-link { font-size: var(--small); white-space: nowrap; }
.compare-link { margin: 0; }
/* The rules-by-city guide: one table per kind of rule */
.table--rules th[scope="row"] { width: 28%; }
@media (max-width: 599px) { .table--rules th, .table--rules td { padding: 10px; } .table--rules th[scope="row"] { width: 34%; } }

/* Local rules (location pages; swap S11) */
.rules { list-style: none; padding: 0; display: grid; gap: 16px; margin: 1.5rem 0; }
@media (min-width: 900px) { .rules { grid-template-columns: repeat(2, 1fr); } }
.rules li { max-width: none; display: flex; flex-direction: column; gap: 4px; border-left: 3px solid var(--gold-muted); padding: 2px 0 2px 16px; }
.rules strong { font: 600 1.0625rem/1.4 var(--font-ui); color: var(--black); }
.rules .src { font-size: var(--small); color: var(--muted); }

/* Reviews page summary (the rating is the page's proof; template: link each platform) */
.rating-summary { background: var(--black-2); border: 1px solid var(--black-3); border-radius: var(--radius); padding: 24px; }
.rating-big { font: 700 3rem/1 var(--font-ui); color: #fff; margin: 0 0 .5rem; display: flex; align-items: center; gap: 12px; }
.rating-big .stars { font-size: 1.5rem; }
/* Recently leased (/leased/): the records summary in the hero, then the wall of leases, newest first. */
.leased-summary .eyebrow { margin-bottom: .25rem; }
.stats--dark { grid-template-columns: 1fr; gap: 10px; margin: .75rem 0 1rem; }
.stats--dark li { display: flex; align-items: baseline; gap: 12px; }
.stats--dark .stat { color: #fff; font-size: 2rem; }
.stats--dark .stat-label { color: var(--on-black-muted); }
.leased-summary-note { margin: 0; font-size: var(--small); color: var(--on-black-muted); }
.leases { list-style: none; display: grid; gap: 20px; margin: 1.5rem 0 0; padding: 0; }
@media (min-width: 640px) { .leases { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .leases { grid-template-columns: repeat(3, 1fr); } }
.lease { max-width: none; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.lease[hidden] { display: none; }
.lease-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; background: var(--cream); }
.lease-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lease-badge { position: absolute; top: 12px; left: 12px; padding: 7px 10px; border-radius: 4px; background: var(--black); color: var(--gold-300); font: 700 .8125rem/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.lease-body { padding: 16px 18px 18px; }
.lease h3 { margin: 0 0 .15rem; }
.lease-where { margin: 0 0 .4rem; }
.lease-meta { margin: 0; font-size: var(--small); color: var(--muted); }
.lease-rent { margin: .4rem 0 0; font-weight: 600; }
.lease-quote { margin: .9rem 0 0; padding-left: 12px; border-left: 3px solid var(--gold-muted); }
.lease-quote p { margin: 0 0 .25rem; }
.lease-quote footer { font-size: var(--small); color: var(--muted); }
.lease-filter { margin: 1.25rem 0 0; }
.lease-filter[hidden] { display: none; }
.lease-filter-label { margin: 0 0 .5rem; font-weight: 600; }
.chips button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; cursor: pointer;
  background: var(--paper); color: var(--black); border: 2px solid var(--gold-muted); border-radius: 22px; font: 600 var(--small)/1 var(--font-ui); }
.chips button:hover { background: var(--cream); }
.chips button[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: #fff; }
.chip-n { font-weight: 400; opacity: .8; }
@media (max-width: 639px) {
  .chips--filter { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; }
  .chips--filter li { flex: none; }
}
.leases-empty { margin-top: 1.5rem; padding: 24px; background: var(--cream); border: 2px dashed var(--line); border-radius: var(--radius); }
.leases + p { margin-top: 1.5rem; }
.featured-lease .stat { margin: 0; }
.featured-lease .stat-label { display: block; margin: 0 0 1rem; }
.featured-lease .lease-meta { margin-bottom: .6rem; }
.bars { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 6px; font-size: var(--small); color: var(--on-black-muted); }
.bars li { display: grid; grid-template-columns: 4.5em 1fr 1.5em; align-items: center; gap: 10px; max-width: none; }
.bar { height: 8px; background: var(--black-3); border-radius: 4px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--gold-muted); width: 0; }
.bar-fill--10 { width: 10%; } .bar-fill--20 { width: 20%; } .bar-fill--30 { width: 30%; } .bar-fill--40 { width: 40%; }
.bar-fill--50 { width: 50%; } .bar-fill--60 { width: 60%; } .bar-fill--70 { width: 70%; } .bar-fill--80 { width: 80%; }
.bar-fill--90 { width: 90%; } .bar-fill--100 { width: 100%; }

/* About */
.prose { max-width: 66ch; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.3em; }
.creds { list-style: none; padding: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .creds { grid-template-columns: repeat(2, 1fr); gap: 18px 40px; } }
.creds li { display: flex; flex-direction: column; border-left: 3px solid var(--gold-muted); padding-left: 14px; max-width: none; }
.creds strong { color: var(--black); }
.creds span { font-size: var(--small); color: var(--muted); }

/* Guides */
.article { font: 400 var(--article)/1.65 var(--font-read); }
.article p, .article li { max-width: 66ch; }
.article h2 { margin-top: 2.25rem; }
.article h3 { margin-top: 1.5rem; font-size: 1.1875rem; }
.article ul, .article ol { padding-left: 1.3em; }
.article li { margin-bottom: .4rem; }
.article table, .article .table { font-family: var(--font-ui); }
.article .table-wrap { overflow-x: auto; }
.sources { font: 400 var(--small)/1.5 var(--font-ui); }
.toc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; }
.toc h2 { font-size: 1.125rem; margin-bottom: .5rem; }
.toc ol { margin: 0; padding-left: 1.3em; }
.toc li { margin-bottom: .3rem; }
.service-box { border: 2px solid var(--gold-muted); border-radius: var(--radius); padding: 20px 24px; background: var(--cream); }
.service-box h3 { margin-bottom: .5rem; }
.author { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.author h2 { font-size: 1.25rem; }
.last-cta { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin: 1.5rem 0 2.5rem; }

/* Final call to action (black band with the short form) */
.cta-band { background: var(--black); color: var(--on-black); padding: 48px 0; }
.cta-band h2 { color: var(--gold-300); }   /* gold headline on the black call-to-action band (Stanley, October 19, 2026); 10.1:1 */
.cta-band h3.cta-sub { color: #fff; font-size: 1.125rem; margin-top: 1.5rem; }
.cta-band .lead { color: var(--on-black); }
.cta-band .micro { color: var(--on-black-muted); }
.cta-band a:not(.btn) { color: var(--on-black); }
.cta-grid { display: grid; gap: 28px; }
.cta-top .lead { margin-bottom: 0; }
@media (min-width: 960px) {
  .cta-band { padding: 72px 0; }
  .cta-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; grid-template-areas: "top form" "bottom form"; gap: 24px 56px; align-items: start; }
  .cta-top { grid-area: top; } .cta-grid > .form-card { grid-area: form; } .cta-bottom { grid-area: bottom; }
}
.cta-call { font-weight: 600; }
.cta-call a { color: #fff; }
.form-card { background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 24px; }
.form-card a:not(.btn) { color: var(--black); }
.form-card--line { border: 1px solid var(--line); }
.form-card h2, .form-card h3 { margin-bottom: 1rem; }
.form-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .field.full { grid-column: 1 / -1; } }
.book-form--landing .form-grid { grid-template-columns: 1fr; }
.field label { display: block; font: 600 1rem/1.4 var(--font-ui); color: var(--black); margin-bottom: 6px; }
.opt { font-weight: 400; color: var(--muted); }
.hint { font-size: var(--small); color: var(--muted); margin: -2px 0 6px; }
input, select, textarea { width: 100%; font: 400 1.0625rem/1.4 var(--font-ui); color: var(--ink); background: #fff; border: 1px solid #8E8A80; border-radius: 8px; padding: 12px 14px; min-height: 48px; }
select { appearance: auto; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 0; }
.book-form .btn { margin-top: 20px; }
.book-form .micro { color: var(--muted); margin: 10px 0 0; }
.hp { position: absolute; left: -9999px; }

/* Ad landing pages: no menu, the form in the first screen */
.hero--lp { padding: 24px 0 32px; }
.lp-grid { display: grid; gap: 24px; }
.lp-form { padding: 20px; }
.form-h { font-size: 1.25rem; margin-bottom: .75rem; }
.lp-call { margin: 12px 0 0; font-weight: 600; }
.hero--lp .ticks { margin: 1rem 0 0; }
.hero--lp .ticks li { color: var(--on-black); }
@media (max-width: 767px) {
  .hero--lp .lead { font-size: 1.0625rem; margin-bottom: .5rem; }
  .hero--lp h1 { font-size: 1.75rem; }
  .hero--lp .ticks { display: none; }
}
@media (min-width: 900px) { .lp-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: start; } .hero--lp { padding: 48px 0 64px; } }

/* Contact: a big tap-to-call row first on phones, then the short form */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }   /* minmax: narrow phones don't scroll sideways */
.contact-grid > * { min-width: 0; }
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; grid-template-areas: "call form" "rows form"; gap: 16px 56px; align-items: start; }
  .contact-grid > .channel--call { grid-area: call; } .contact-grid > .form-card { grid-area: form; } .contact-grid > .channels { grid-area: rows; }
}
.channels { display: grid; gap: 12px; }
.channel { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--black); min-height: 60px; }
.channel:hover { border-color: var(--gold-muted); }
.channel--call { background: var(--black); color: var(--on-black); border-color: var(--black); }
/* The call button's words in the brand gold, like the header phone number (Stanley, October 19, 2026). */
.channel.channel--call .big-phone, .channel.channel--call .small, .channel.channel--call .channel-k { color: var(--gold-300); }
.channel--call { min-height: 60px; }
.channel-k { font: 600 .8125rem/1.25 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
.big-phone { font: 700 1.625rem/1.25 var(--font-ui); color: var(--black); text-decoration: none; }
.channel .small { color: var(--muted); }

/* Rental application (/apply/): one long form in numbered parts, beside what to have ready and the direct channels.
   Phones: what to have ready, then the form, then call and email rows. */
.apply-grid { display: grid; gap: 24px; }
@media (min-width: 960px) {
  .apply-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); grid-template-rows: auto 1fr; grid-template-areas: "form prep" "form rows"; gap: 24px 48px; align-items: start; }
  .apply-grid > .app-prep { grid-area: prep; } .apply-grid > .app-card { grid-area: form; } .apply-grid > .app-channels { grid-area: rows; }
}
.apply-grid > * { min-width: 0; }
.app-channels .channel > span { overflow-wrap: anywhere; }
@media (min-width: 640px) { .form-grid > .app-group { grid-column: 1 / -1; } }
.app-prep { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.app-prep h2, .app-card > h2 { font-size: 1.375rem; }
.app-fair { color: var(--muted); margin-bottom: 0; }
.app-help { font-weight: 600; color: var(--black); margin: 0; }
.app-note { font-size: var(--small); color: var(--muted); margin: -4px 0 4px; }
.app-step { border: 0; margin: 0; padding: 20px 0 0; min-width: 0; }
.app-step + .app-step { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.app-step > legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; padding: 0; margin: 0 0 16px; }
.app-step > legend + * { clear: both; }
.app-step h3 { margin: 0; }
.app-n { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--black); color: var(--gold-300); display: grid; place-items: center; font: 700 1rem/1 var(--font-ui); }
.app-intro { margin: 0 0 12px; }
.app-group, .choice-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.app-group { margin-top: 8px; }
.app-group > legend { padding: 0; margin: 0 0 8px; font: 600 1.125rem/1.35 var(--font-ui); color: var(--black); }
.app-group > .hint { margin: 0 0 12px; }
.choice-group > legend { padding: 0; margin: 0 0 6px; font: 600 1rem/1.4 var(--font-ui); color: var(--black); }
.choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.choice-group .choice { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 10px 14px; border: 1px solid #8E8A80; border-radius: 8px; background: #fff; cursor: pointer; font: 400 1.0625rem/1.3 var(--font-ui); }
.choice-group .choice:has(input:checked) { border-color: var(--black); background: var(--cream); box-shadow: inset 0 0 0 1px var(--black); }
.app-form input[type="radio"], .app-form input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: var(--black); }
.field .check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; margin: 0; font: 600 1.0625rem/1.4 var(--font-ui); cursor: pointer; }
.app-form .check input { margin-top: 1px; }
.app-form [hidden] { display: none !important; }
.applicant-group > legend, .app-group > legend { font-size: 1.125rem; }
.app-step .app-group + .app-group { margin-top: 12px; }
@media (min-width: 640px) { .repeat-item .form-grid { grid-template-columns: 2fr 2fr 1fr; } .repeat-item .field.full { grid-column: auto; } }
.repeat-item { padding-bottom: 4px; }
.repeat-remove { margin-top: 8px; min-height: 44px; color: var(--gold-ink); font-weight: 600; }
.repeat-add { min-height: 48px; }
/* One part per screen (site.js adds .is-stepped): the progress line, then Next (bright) and Back (quiet). */
.app-progress { margin: 4px 0 20px; }
.app-progress-label { font: 600 var(--small)/1.4 var(--font-ui); color: var(--muted); margin: 0 0 8px; }
.app-progress progress { display: block; width: 100%; height: 8px; border: 0; border-radius: 99px; background: var(--line); overflow: hidden; appearance: none; -webkit-appearance: none; }
.app-progress progress::-webkit-progress-bar { background: var(--line); border-radius: 99px; }
.app-progress progress::-webkit-progress-value { background: var(--gold-muted); border-radius: 99px; }
.app-progress progress::-moz-progress-bar { background: var(--gold-muted); border-radius: 99px; }
.app-form.is-stepped .app-step { margin-top: 0; padding-top: 0; border-top: 0; }
.step-nav { display: grid; gap: 8px; margin-top: 28px; }
.app-send:not([hidden]) + .step-nav { margin-top: 12px; }
.step-nav .step-back { justify-self: start; min-height: 44px; padding: 0 2px; font-weight: 600; color: var(--black); }
.app-step h3:focus { outline: none; }
.consent-box { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
.consent-box p:last-child { margin-bottom: 0; }
.money { position: relative; }
.money span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.money input { padding-left: 30px; }
textarea { min-height: 120px; resize: vertical; }
.app-form .btn { margin-top: 24px; }
.app-form .btn[disabled] { opacity: .75; cursor: progress; }
.app-form .micro { color: var(--muted); margin: 10px 0 0; }
/* Bank verification (/verify-income/): the same card as the rental application, one consent box, a working note
   with an indeterminate bar while Plaid collects the history, and a done message in place of the form. */
.verify-form .check { display: flex; align-items: flex-start; gap: 12px; margin: 0; font: 400 var(--small)/1.5 var(--font-ui); cursor: pointer; }
.verify-form input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; padding: 0; margin: 1px 0 0; flex: none; accent-color: var(--black); }
.verify-form .consent-box { margin: 20px 0 0; }
.verify-form .app-send { margin-top: 20px; }
.verify-form .app-send .micro { margin: 10px 0 0; }
.verify-form .btn[disabled] { opacity: .6; cursor: progress; }
.verify-working { margin-top: 20px; padding: 14px 16px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); }
.verify-working p { margin: 0 0 10px; }
.verify-working progress { display: block; width: 100%; height: 8px; accent-color: var(--gold-muted); }
.verify-form [hidden], .verify-done[hidden], .verify-form[hidden] { display: none !important; }
.verify-form .form-status a { color: #7A271A; font-weight: 600; }
.verify-done { padding: 4px 0; }
.verify-done:focus { outline: none; }
.verify-done h3 { margin-bottom: .5rem; }
.verify-again .linklike { min-height: 44px; font-weight: 600; color: var(--black); }
/* Staff tool: LTB record search (/staff/ltb-search/). */
.ltb-grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .ltb-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: 48px; } }
.ltb-grid > * { min-width: 0; }
.ltb-card .btn { margin-top: 16px; width: 100%; }
.ltb-form .form-grid { grid-template-columns: 1fr; }
.ltb-card .micro { margin: 10px 0 0; }
.ltb-results > h2 { font-size: 1.5rem; }
.ltb-block { margin: 0 0 1.5rem; }
.ltb-block h3 { font-size: 1.125rem; overflow-wrap: anywhere; }
.ltb-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: 10px; }
.ltb-item { max-width: none; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: var(--paper); overflow-wrap: anywhere; }
.ltb-item p { margin: 0 0 4px; max-width: none; }
.ltb-tag { display: inline-block; margin-left: 4px; font: 600 .75rem/1.2 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; padding: 3px 6px; border-radius: 4px; background: var(--cream); border: 1px solid var(--line); color: var(--ink); }
.ltb-tag--strong { background: var(--black); color: #fff; border-color: var(--black); }
.ltb-more { margin-top: 12px; }
.ltb-more summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.ltb-btn { min-height: 44px; padding: 0 14px; font-size: .9375rem; }
.ltb-btn[disabled] { opacity: .6; cursor: progress; }
/* "Email this order" under each order: the button opens a one-line email box; the order's PDF is never opened here. */
.ltb-send { margin-top: 8px; }
.ltb-send-form { margin-top: 10px; }
.ltb-send-label { display: block; font: 600 .9375rem/1.4 var(--font-ui); color: var(--black); margin-bottom: 6px; }
.ltb-consent { margin-top: 10px; }
.ltb-consent .check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; margin: 0; font: 400 .9375rem/1.45 var(--font-ui); color: var(--ink); cursor: pointer; }
.ltb-consent input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 2px 0 0; flex: none; accent-color: var(--black); }
.ltb-consent-id { margin: 2px 0 0 30px; color: var(--muted); overflow-wrap: anywhere; }
.ltb-send-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ltb-send-row input { flex: 1 1 220px; width: auto; min-width: 0; }
.ltb-send-status { margin-top: 6px; }
.ltb-send-status:empty { display: none; }
.ltb-send-status.is-error { color: #B42318; font-weight: 600; }
.form-status { margin-top: 24px; padding: 14px 16px; border: 2px solid #B42318; border-radius: 8px; background: #FEF3F2; color: #7A271A; }
.form-status p { margin: 0; }
.app-form .form-status a { color: #7A271A; font-weight: 600; }

/* Careers: the job facts in the hero, job cards, the apply box */
.job-facts { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
@media (min-width: 768px) { .job-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.job-facts li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--black-3); border-radius: 8px; max-width: none; }
.job-facts span { font: 600 .75rem/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-300); }
.job-facts strong { color: #fff; font-weight: 600; font-size: var(--small); line-height: 1.35; }
.hero .page-meta { margin-top: 1rem; }
.job-where { font-weight: 600; color: var(--black); margin-bottom: .5rem; }
.job-card h3 { margin-bottom: .25rem; }
.apply-box { border: 2px solid var(--gold-muted); border-radius: var(--radius); padding: 20px 24px; background: var(--cream); margin: 2rem 0 1.5rem; }
.apply-box h2 { font-size: 1.375rem; margin-bottom: .5rem; }
.apply-box .small { color: var(--muted); margin-bottom: 0; }

/* 404 search */
.site-search label { display: block; font-weight: 600; margin: 1rem 0 6px; }
.search-row { display: flex; gap: 8px; max-width: 560px; }

/* Footer (template block 13): call, email and area rows first on phones, then the links */
.site-footer { background: var(--black); color: var(--on-black-muted); font-size: .9375rem; line-height: 1.6; padding: 40px 0 32px; border-top: 1px solid var(--black-3); }
.site-footer a { color: var(--on-black); }
.site-footer h2 { font: 600 .9375rem/1.6 var(--font-ui); color: #fff; margin-bottom: .5rem; letter-spacing: .02em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .35rem; }
.footer-contact { display: grid; gap: 8px; margin-bottom: 32px; }
.footer-row { display: flex; flex-direction: column; padding: 12px 16px; border: 1px solid var(--black-3); border-radius: var(--radius); text-decoration: none; min-height: 56px; justify-content: center; }
.footer-row span { font-size: .8125rem; color: var(--on-black-muted); text-transform: uppercase; letter-spacing: .06em; }
.footer-row strong { color: #fff; font-weight: 600; }
@media (min-width: 900px) { .footer-contact { grid-template-columns: repeat(3, 1fr); } }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .footer-brand { grid-column: auto; } }
.footer-brand .brand img { width: 168px; height: auto; }
.footer-tag { color: var(--gold-300); margin: .75rem 0; }
.footer-legal { border-top: 1px solid var(--black-3); margin-top: 32px; padding-top: 24px; }
.footer-legal p { max-width: 90ch; }
.biz-line strong { color: #fff; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 1rem !important; }
.site-footer--min { padding: 28px 0 96px; }

/* Phone: pinned bottom bar with Call and the main button (template), 56px tall. */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 88px 1fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(11,11,12,.1); transition: transform .2s ease; }
.mobile-bar .btn { min-height: 56px; padding: 0 10px; font-size: 1rem; line-height: 1.2; }
.mobile-bar--slim { grid-template-columns: 1fr; padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.mobile-bar--slim .btn { min-height: 48px; }
.mobile-bar.is-hidden { transform: translateY(110%); }
.mobile-bar[hidden] { display: none; }
.btn-call { background: var(--paper); color: var(--black); border-color: var(--black); }
body.has-bar { padding-bottom: 76px; }
@media (min-width: 768px) { .mobile-bar { display: none !important; } body.has-bar { padding-bottom: 0; } .site-footer--min { padding-bottom: 28px; } }

/* Cookie choices (only when analytics is configured): a bar, never a pop-up over the page. */
.consent { position: fixed; left: 12px; right: 12px; bottom: 84px; z-index: 60; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
@media (min-width: 768px) { .consent { bottom: 16px; max-width: 560px; } }

/* Line chart (Toronto rent guide): series colours validated for colour-blind separation on white (gold ink, blue);
   text stays in ink and muted grey; HTML labels so they keep their size on phones; CSS-only hover readout. */
.chart { margin: 1.75rem 0; font-family: var(--font-ui); }
.chart-cap strong { display: block; font-family: var(--font-ui); font-size: 1.0625rem; line-height: 1.35; color: var(--black); }
.chart-cap > span { display: block; margin-top: .25rem; font-size: var(--small); line-height: 1.45; color: var(--muted); }
.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: .875rem 0 .25rem; padding: 0; font-size: var(--small); color: var(--ink); }
.chart-legend li { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.key { display: inline-block; width: 18px; height: 0; border-top: 2px solid currentColor; border-radius: 2px; flex: 0 0 auto; }
.key--one { color: #865A00; } .key--two { color: #2A78D6; }
.chart-box { position: relative; padding: 12px 58px 30px 54px; }
.chart-plot { position: relative; height: 230px; }
@media (min-width: 640px) { .chart-plot { height: 290px; } .chart-box { padding-right: 66px; } }
.chart-grid div { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.chart-grid span, .chart-x span { position: absolute; font-size: 12px; line-height: 1; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-grid span { right: calc(100% + 8px); transform: translateY(-50%); }
.chart-x { position: absolute; left: 0; right: 0; top: calc(100% + 10px); }
.chart-x span { transform: translateX(-50%); }
@media (max-width: 599px) { .chart-x .x-minor { display: none; } }
.chart-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ln { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ln--one { stroke: #865A00; } .ln--two { stroke: #2A78D6; }
.dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--paper); }
.dot--one { background: #865A00; } .dot--two { background: #2A78D6; }
.end { position: absolute; left: calc(100% + 10px); transform: translateY(-50%); font-size: 13px; font-weight: 600; line-height: 1; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-cols { position: absolute; inset: 0; }
.chart-cols .col { position: absolute; top: 0; bottom: 0; }
.chart-cols .col::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--c); border-left: 1px solid var(--muted); opacity: 0; }
.chart-cols .tip { position: absolute; top: 2px; z-index: 2; display: grid; gap: 2px; padding: 6px 9px; border-radius: 6px; background: var(--black); color: #fff; font-size: 12px; line-height: 1.3; white-space: nowrap; opacity: 0; pointer-events: none; font-variant-numeric: tabular-nums; }
.chart-cols .tip span { display: flex; align-items: center; gap: 6px; }
.chart-cols .tip .key--one { color: #C98500; } .chart-cols .tip .key--two { color: #3987E5; }
.col--l .tip { left: calc(var(--c) + 8px); } .col--r .tip { right: calc(100% - var(--c) + 8px); }
.chart-cols .col:hover::before, .chart-cols .col:hover .tip { opacity: 1; }
.chart-data { margin-top: .75rem; }
.chart-data summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--small); font-weight: 600; color: var(--gold-ink); }
.chart-data .table-wrap { margin: .5rem 0 0; }

html.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media print { .site-header, .mobile-bar, .cta-band form, .site-footer nav, .hero-media { display: none; } .hero, .cta-band, .site-footer { background: #fff; color: #000; } }

/* /apply/: the rental application, shown in a frame from its own address */

/* Generated by build.py from content/data/toronto-market.toml (Toronto rent guide chart) */
.cc .cc-g0{top:100.00%}
.cc .cc-g1{top:83.33%}
.cc .cc-g2{top:66.67%}
.cc .cc-g3{top:50.00%}
.cc .cc-g4{top:33.33%}
.cc .cc-g5{top:16.67%}
.cc .cc-g6{top:0.00%}
.cc .cc-x0{left:0.00%}
.cc .cc-x1{left:9.09%}
.cc .cc-x2{left:18.18%}
.cc .cc-x3{left:27.27%}
.cc .cc-x4{left:36.36%}
.cc .cc-x5{left:45.45%}
.cc .cc-x6{left:54.55%}
.cc .cc-x7{left:63.64%}
.cc .cc-x8{left:72.73%}
.cc .cc-x9{left:81.82%}
.cc .cc-x10{left:90.91%}
.cc .cc-x11{left:100.00%}
.cc .cc-c0{left:0.00%;width:4.55%;--c:0.0%}
.cc .cc-c1{left:4.55%;width:9.09%;--c:50.0%}
.cc .cc-c2{left:13.64%;width:9.09%;--c:50.0%}
.cc .cc-c3{left:22.73%;width:9.09%;--c:50.0%}
.cc .cc-c4{left:31.82%;width:9.09%;--c:50.0%}
.cc .cc-c5{left:40.91%;width:9.09%;--c:50.0%}
.cc .cc-c6{left:50.00%;width:9.09%;--c:50.0%}
.cc .cc-c7{left:59.09%;width:9.09%;--c:50.0%}
.cc .cc-c8{left:68.18%;width:9.09%;--c:50.0%}
.cc .cc-c9{left:77.27%;width:9.09%;--c:50.0%}
.cc .cc-c10{left:86.36%;width:9.09%;--c:50.0%}
.cc .cc-c11{left:95.45%;width:4.55%;--c:100.0%}
.cc .cc-d1{left:100%;top:36.58%}
.cc .cc-d2{left:100%;top:12.92%}
.cc .cc-e1{top:36.58%}
.cc .cc-e2{top:12.92%}