/* alphaseed.ca
   Design plan
   Color: paper #F4F6F8 (cool near-white), ink #131A2B, line #D6DBE3, muted #5E6778, signal #F2C230.
          One accent only (the yellow), used for "answered" marks, the ledger rule and the sample grid.
          Links are ink with an underline. Buttons are ink. Rank grid uses the trade's own scale (green/yellow/orange/grey).
   Type:  Bricolage Grotesque for display (700, tight), Instrument Sans for everything else. Tabular figures in every table.
   Layout: a 12-column grid. Every section is a label column (4 cols, sticky) + a content column (8 cols).
           The hero breaks the pattern once: full-width headline, then lead left / call ledger right.
   Motion: one easing family (expo-out), three speeds. Every animation shows something the business does:
           calls being answered (ledger), a scan spreading from the shop (rank grid), demand by month (season bars),
           the assistant speaking (sample call). The rest of the site only draws its rules and settles content into place.
           Everything is gated behind html.motion, which is set only when the visitor has not asked for reduced motion.
   Single light theme by choice. */

:root {
  --paper: #F4F6F8;
  --paper-2: #FFFFFF;
  --ink: #131A2B;
  --ink-2: #333B4D;
  --muted: #5E6778;
  --line: #D6DBE3;
  --line-strong: #131A2B;
  --signal: #F2C230;
  --signal-ink: #4A3A00;
  --signal-soft: #FBEFC3;
  --g1: #1E6B4A;   /* rank 1–3  */
  --g2: #F2C230;   /* rank 4–10 */
  --g3: #E08A3C;   /* rank 11–20 */
  --g4: #C9CFD8;   /* 20+ / not found */
  --water: #A9C2D9; /* rivers and the reservoir on the Calgary map */
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --wrap: 1180px;
  --gutter: 24px;
  --col-gap: 32px;
  --measure: 62ch;
  --sec: clamp(3.5rem, 8vw, 6.5rem);
  --hdr-h: 69px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.motion { scroll-padding-top: calc(var(--hdr-h) + 12px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 1.4rem + 4.6vw, 4.6rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem); }
h3 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--muted); transition: text-decoration-color 0.2s ease, color 0.2s ease; }
a:hover { text-decoration-color: var(--ink); }
strong { font-weight: 600; }
ul, ol { padding-left: 1.25em; margin: 0 0 1em; }
li { margin: 0 0 0.35em; }
li::marker { color: var(--muted); }
img, svg { max-width: 100%; height: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 0.5rem 0.75rem; z-index: 100; }
.skip:focus { left: 8px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.measure { max-width: var(--measure); }
.source-note { color: var(--muted); font-size: 0.875rem; line-height: 1.5; max-width: var(--measure); margin: 1rem 0 0; }
.optional { color: var(--muted); font-weight: 400; }

/* ---------- buttons ---------- */
.button {
  display: inline-block; font-family: var(--body); font-weight: 600; font-size: 1rem; line-height: 1.2;
  background-color: var(--ink); color: var(--paper); text-decoration: none;
  padding: 0.8rem 1.25rem; border: 1.5px solid var(--ink); border-radius: 2px; cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.25s ease, background-size 0.45s var(--ease-out), transform 0.12s ease;
}
.button:hover { background-color: var(--ink-2); border-color: var(--ink-2); color: var(--paper); }
.button:active { transform: translate3d(0, 1px, 0); }
/* secondary: ink rises from the bottom edge on hover */
.button.secondary {
  background-color: transparent; color: var(--ink);
  background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0%;
}
.button.secondary:hover { background-color: transparent; border-color: var(--ink); background-size: 100% 100%; color: var(--paper); }
.button[disabled] { opacity: 0.6; cursor: wait; }
.button[aria-busy="true"] { position: relative; overflow: hidden; }
.button[aria-busy="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40%; height: 2px; background: var(--signal); animation: as-busy 1s ease-in-out infinite; }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); z-index: 40; view-transition-name: site-header; }
.motion .site-header { position: sticky; top: 0; transition: transform 0.45s var(--ease-out); }
.motion .site-header.hdr-hidden { transform: translate3d(0, -101%, 0); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; flex-wrap: wrap; }
.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.wordmark .mark { width: 14px; height: 14px; background: var(--signal); flex: none; border-radius: 1px; transition: transform 0.45s var(--ease-back); }
.wordmark:hover .mark { transform: rotate(90deg); }
.wordmark-text { font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; }
.nav-toggle { background: none; border: 1px solid var(--line-strong); color: var(--ink); border-radius: 2px; padding: 0.45rem 0.8rem; font: inherit; font-weight: 600; cursor: pointer; min-width: 4.6rem; }

/* mobile: the menu opens by growing its row, links arrive one after another */
.site-nav { width: 100%; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s var(--ease-out); }
.site-nav > ul { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear 0.42s; }
.site-nav.open { grid-template-rows: 1fr; }
.site-nav.open > ul { visibility: visible; transition: visibility 0s; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-nav li { margin: 0; opacity: 0; transform: translate3d(0, -6px, 0); transition: opacity 0.2s ease, transform 0.3s var(--ease-out); }
.site-nav.open li { opacity: 1; transform: none; transition-delay: calc(var(--n, 0) * 35ms + 80ms); }
.site-nav a { display: block; color: var(--ink); text-decoration: none; font-weight: 500; padding: 0.65rem 0; border-top: 1px solid var(--line); }
.site-nav a[aria-current]::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; background: var(--signal); margin-right: 0.55rem; vertical-align: 1px; border-radius: 1px; }
.site-nav .nav-cta { margin: 0.9rem 0 1.1rem; }
.site-nav .nav-cta a { display: inline-block; border-top: 1.5px solid var(--ink); padding: 0.6rem 1rem; color: var(--paper); }
.site-nav .nav-cta a::before { display: none; }

@media (min-width: 920px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; width: auto; }
  .site-nav > ul { overflow: visible; visibility: visible; flex-direction: row; align-items: center; gap: 1.6rem; }
  .site-nav li { opacity: 1; transform: none; }
  .site-nav a { padding: 0.3rem 0; border-top: 0; position: relative; }
  .site-nav a[aria-current]::before { display: none; }
  /* underline draws in from the left, leaves to the right */
  .site-nav a:not(.button)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.38s var(--ease-out); }
  .site-nav a:not(.button):hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); transform-origin: 0 50%; }
  .site-nav .nav-cta { margin: 0 0 0 0.6rem; }
  .site-nav .nav-cta a { border-top-width: 1.5px; }
}

/* ---------- section scaffold: label column + content column ---------- */
.sec { padding: var(--sec) 0 0; }
.sec.last { padding-bottom: var(--sec); }
.sec-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem var(--col-gap); align-items: start; }
.sec-label h2 { margin: 0; }
.sec-label p { color: var(--muted); margin: 0.75rem 0 0; max-width: 34ch; }
.sec-body { min-width: 0; }
.sec-body > :first-child { margin-top: 0; }
@media (min-width: 920px) {
  .sec-grid { grid-template-columns: 4fr 8fr; }
  .sec-label { position: sticky; top: 1.5rem; }
  .motion .sec-label { top: calc(var(--hdr-h) + 1.5rem); }
}

/* ---------- hero ---------- */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 0; }
.hero h1 { max-width: 15ch; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.hero-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem var(--col-gap); align-items: start; }
@media (min-width: 920px) { .hero-row { grid-template-columns: 5fr 7fr; } }
.lead { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem); line-height: 1.4; color: var(--ink-2); max-width: 30ch; margin-bottom: 1.5rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
.hero-fine { color: var(--muted); font-size: 0.95rem; max-width: 40ch; }

/* The ledger: the one loud element. A night's call log with a yellow rule. */
.ledger { margin: 0; border-top: 2px solid var(--line-strong); min-width: 0; }
.ledger-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; font-size: 0.875rem; color: var(--muted); padding: 0.75rem 0 0.5rem; }
.ledger-tally { color: var(--ink-2); }
.tally-n { display: inline-block; font-family: var(--display); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ledger ol { list-style: none; margin: 0; padding: 0; }
.ledger-row { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.85rem 0; border-top: 1px solid var(--line); margin: 0; position: relative; isolation: isolate; }
.ledger-row::after { content: ""; position: absolute; top: 0; bottom: 0; left: -0.6rem; right: -0.6rem; background: var(--signal-soft); opacity: 0; z-index: -1; pointer-events: none; }
.ledger-time { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; padding-top: 0.1rem; font-variant-numeric: tabular-nums; }
.ledger-body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.ledger-caller { color: var(--ink); }
.ledger-outcome { font-size: 0.92rem; color: var(--ink-2); padding-left: 1.2rem; position: relative; }
.ledger-outcome::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 0.65rem; height: 0.65rem; background: var(--signal); border-radius: 1px; }
.ledger-row.transfer .ledger-outcome::before { background: var(--ink); }
.ledger-outcome .ring { position: absolute; left: 1.2rem; top: 0; color: var(--muted); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.ledger-outcome .done { transition: opacity 0.4s ease 0.08s; }
.ledger figcaption { font-size: 0.875rem; color: var(--muted); padding-top: 0.85rem; border-top: 1px solid var(--line); }

/* ---------- structural rules, drawn as pseudo-elements so they can animate ---------- */
.pillar, .plan, .run-item, .listing > li, .facts > div, .commitments > div, .closing .inner, .lead-form, .notes > li { position: relative; }
.pillar::before, .plan::before, .run-item::before, .listing > li::before, .facts > div::before, .commitments > div::before, .closing .inner::before, .lead-form::before, .notes > li::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--rule-w, 1px); background: var(--rule-c, var(--line-strong)); transform-origin: 0 50%;
}
.plan, .closing .inner, .lead-form { --rule-w: 2px; }
.commitments > div { --rule-c: var(--line); }

/* ---------- pillars (three columns under one label) ---------- */
.pillars { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem var(--col-gap); }
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pillar { padding-top: 0.9rem; min-width: 0; }
.pillar h3 { margin-bottom: 0.4rem; }
.pillar p { color: var(--ink-2); margin-bottom: 0.9rem; }
.linklist { list-style: none; padding: 0; margin: 0; }
.linklist li { margin: 0; border-top: 1px solid var(--line); }
.linklist a { display: block; padding: 0.45rem 0; text-decoration: none; transition: transform 0.35s var(--ease-out); }
.linklist a:hover { transform: translate3d(6px, 0, 0); text-decoration: underline; }

/* ---------- industry rows (home) ---------- */
.ind-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.ind-rows li { margin: 0; border-bottom: 1px solid var(--line); }
.ind-rows a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem 1.5rem; padding: 1rem 0; text-decoration: none; }
@media (min-width: 700px) { .ind-rows a { grid-template-columns: 11rem minmax(0, 1fr) auto; align-items: baseline; } }
.ind-name { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; transition: transform 0.35s var(--ease-out); }
.ind-rows a:hover .ind-name { transform: translate3d(6px, 0, 0); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.15em; }
.ind-stat { color: var(--muted); font-size: 0.95rem; }
.ind-num { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ind-num small { display: block; font-family: var(--body); font-weight: 400; font-size: 0.8rem; color: var(--muted); letter-spacing: 0; }

/* ---------- report table ---------- */
.report { margin: 0; min-width: 0; overflow-x: auto; }
.report figcaption { font-size: 0.875rem; color: var(--muted); padding-bottom: 0.6rem; }
.report table { border-top: 2px solid var(--line-strong); }
.report th, .report td { text-align: left; padding: 0.65rem 0.75rem 0.65rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.report thead th { font-weight: 500; color: var(--muted); font-size: 0.85rem; }
.report tbody th { font-weight: 400; color: var(--ink-2); }
.report td { font-family: var(--display); font-weight: 700; white-space: nowrap; font-size: 1.05rem; }

/* ---------- plans ---------- */
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem var(--col-gap); }
@media (min-width: 700px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan { padding-top: 1rem; display: flex; flex-direction: column; min-width: 0; }
.plan-name { margin-bottom: 0.2rem; font-size: 1.35rem; }
.plan-price { font-family: var(--display); margin-bottom: 0.75rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.plan-price .amount { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan-price .unit { color: var(--muted); font-family: var(--body); font-size: 0.95rem; }
.plan-summary { color: var(--ink-2); }
.plan-fit { color: var(--muted); font-size: 0.95rem; margin-bottom: 0; }
.plans.detailed .plan-fit { margin-bottom: 1rem; }
.plan-terms { color: var(--muted); font-size: 0.9rem; margin-top: auto; padding-top: 0.5rem; }
.plans.detailed .button { align-self: flex-start; margin-top: 0.75rem; }
.plans-note { color: var(--muted); font-size: 0.9rem; margin: 1.25rem 0 0; max-width: var(--measure); }
.checklist { padding-left: 1.2em; margin: 0 0 1rem; }
.checklist li { margin-bottom: 0.45rem; }
.checklist p { margin: 0; }

/* ---------- commitments / facts ---------- */
.commitments { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem var(--col-gap); }
@media (min-width: 700px) { .commitments { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.commitments > div { padding-top: 0.8rem; min-width: 0; }
.commitments dt { font-family: var(--display); font-weight: 700; font-size: 1.1rem; margin-bottom: 0.3rem; letter-spacing: -0.01em; }
.commitments dd { margin: 0; color: var(--ink-2); font-size: 0.98rem; }
.facts { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem var(--col-gap); }
@media (min-width: 700px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facts > div { padding-top: 0.75rem; min-width: 0; }
.facts dt { color: var(--muted); font-size: 0.9rem; }
.facts dd { margin: 0; }
.fact-value { display: block; font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1.05; letter-spacing: -0.03em; margin: 0.25rem 0 0.4rem; font-variant-numeric: tabular-nums; }
.fact-note { color: var(--ink-2); font-size: 0.95rem; }

/* ---------- forms ---------- */
.lead-form { padding-top: 1.25rem; min-width: 0; }
.field { margin-bottom: 1rem; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
label { display: block; font-weight: 500; margin-bottom: 0.3rem; font-size: 0.95rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 2px; padding: 0.7rem 0.75rem;
  transition: border-color 0.18s ease, box-shadow 0.25s var(--ease-out);
}
input::placeholder, textarea::placeholder { color: #9AA3B2; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--signal-soft); }
textarea { resize: vertical; }
.consent { margin: 0.5rem 0 1.25rem; display: grid; gap: 0.6rem; }
.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: start; font-weight: 400; font-size: 0.9rem; color: var(--ink-2); }
.check input { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--ink); }
.check em { color: var(--muted); font-style: normal; }
.form-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.lead-form .cf-turnstile { margin: 0 0 1rem; }
.form-note { margin: 0; color: var(--muted); font-size: 0.875rem; }
.form-status { margin: 0.75rem 0 0; font-weight: 500; min-height: 1em; }
.form-status.in { animation: as-status 0.4s var(--ease-out) both; }
.form-status.error { color: #9B2C18; }
.form-status.ok { color: var(--g1); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #9B2C18; }
.field.invalid { animation: as-nudge 0.35s ease; }

/* ---------- page head & prose ---------- */
.page-head { padding: clamp(2rem, 5vw, 3.5rem) 0 0; }
.page-head h1 { max-width: 18ch; font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.6rem); }
.crumbs { font-size: 0.875rem; color: var(--muted); margin-bottom: 1.25rem; }
.crumbs a { color: var(--muted); }
.crumbs span[aria-hidden] { padding: 0 0.35rem; }
.summary { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); line-height: 1.45; color: var(--ink-2); max-width: var(--measure); margin-top: 1rem; }
.intro { max-width: var(--measure); }
.article-meta { color: var(--muted); font-size: 0.875rem; margin-top: 0.5rem; }
.prose { max-width: var(--measure); }
.prose h2 { font-size: 1.5rem; margin-top: 2.25rem; }
.prose h3 { margin-top: 1.75rem; }
.prose table { font-size: 0.95rem; margin: 1rem 0 1.5rem; display: block; overflow-x: auto; border-top: 2px solid var(--line-strong); }
.prose th, .prose td { text-align: left; padding: 0.55rem 0.75rem 0.55rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose thead th { font-weight: 500; color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.prose blockquote { margin: 1.5rem 0; padding: 0.1rem 0 0.1rem 1.25rem; border-left: 3px solid var(--signal); color: var(--ink-2); }
.prose code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; background: var(--paper-2); border: 1px solid var(--line); padding: 0.05em 0.35em; border-radius: 2px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.prose .note { border-left: 3px solid var(--signal); padding: 0.1rem 0 0.1rem 1.25rem; }
.prose > :first-child { margin-top: 0; }

/* reading progress on long guides (scroll-driven, no script; hidden where unsupported) */
.readbar { display: none; position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .motion .readbar { display: block; animation: as-grow linear both; animation-timeline: scroll(root block); }
}

/* ---------- data tables ---------- */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data { border-top: 2px solid var(--line-strong); }
@media (max-width: 599px) {
  .data th:nth-child(4), .data td:nth-child(4) { display: none; }
  .data tbody th { white-space: normal; font-size: 0.95rem; }
  .data th, .data td { padding-right: 0.6rem; }
  .data td:nth-child(2), .data td:nth-child(3) { font-size: 1rem; }
}
.data th, .data td { text-align: left; padding: 0.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.data thead th { font-weight: 500; color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.data tbody th { font-weight: 500; white-space: nowrap; }
.data td:nth-child(2), .data td:nth-child(3) { font-family: var(--display); font-weight: 700; white-space: nowrap; font-size: 1.05rem; }
.data td:last-child { color: var(--ink-2); font-size: 0.95rem; }

/* ---------- season chart (inline SVG) ---------- */
.season { margin: 1.75rem 0 0; min-width: 0; }
.season figcaption { font-size: 0.875rem; color: var(--muted); margin-bottom: 0.5rem; }
.season svg { width: 100%; height: auto; display: block; overflow: visible; }
.season .sb { fill: var(--ink); transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.8s var(--ease-out) calc(var(--m, 0) * 55ms + var(--s, 0) * 45ms); }
.season .sb.alt { fill: var(--signal); }
.season .axis { stroke: var(--line); stroke-width: 1; }
.season text { font-family: var(--body); font-size: 11px; fill: var(--muted); }
@media (max-width: 600px) { .season text { font-size: 19px; } }
.season .val { fill: var(--ink); font-weight: 600; transition: opacity 0.4s ease calc(var(--m, 0) * 55ms + 650ms); }
.season-key { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: 0.875rem; color: var(--muted); margin-top: 0.5rem; }
.season-key span::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; background: var(--ink); margin-right: 0.4rem; vertical-align: -1px; }
.season-key span.alt::before { background: var(--signal); }

/* ---------- rank grid (inline SVG) ---------- */
.rankgrid { margin: 0; min-width: 0; }
.rankgrid svg { width: 100%; max-width: 360px; height: auto; display: block; }
.rankgrid figcaption { font-size: 0.875rem; color: var(--muted); margin-top: 0.6rem; max-width: 40ch; }
.rankgrid .cell { stroke: var(--paper); stroke-width: 2; transition: fill 0.55s ease calc(var(--d, 0) * 100ms + 120ms); }
.rankgrid .r1 { fill: var(--g1); } .rankgrid .r2 { fill: var(--g2); } .rankgrid .r3 { fill: var(--g3); } .rankgrid .r4 { fill: var(--g4); }
.rankgrid text { font-family: var(--display); font-weight: 700; font-size: 13px; fill: var(--ink); text-anchor: middle; dominant-baseline: central; transition: opacity 0.45s ease calc(var(--d, 0) * 100ms + 260ms); }
.rankgrid text.w { fill: #fff; }
.rankgrid .pin { fill: none; stroke: var(--ink); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.rankgrid .sweep { fill: none; stroke: var(--ink); stroke-opacity: 0.45; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.rank-key { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.85rem; color: var(--muted); margin-top: 0.75rem; }
.rank-key span::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.35rem; vertical-align: -1px; border-radius: 1px; }
.rank-key .k1::before { background: var(--g1); } .rank-key .k2::before { background: var(--g2); } .rank-key .k3::before { background: var(--g3); } .rank-key .k4::before { background: var(--g4); }
.scan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem var(--col-gap); align-items: start; }
@media (min-width: 920px) { .scan-grid { grid-template-columns: 5fr 7fr; } }
.scan-grid .prose p:last-child { margin-bottom: 1.5rem; }

/* ---------- what we run / transcript ---------- */
.run-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem var(--col-gap); }
@media (min-width: 700px) { .run-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.run-item { padding-top: 0.8rem; min-width: 0; }
.run-item h3 { margin-bottom: 0.35rem; }
.run-item p { color: var(--ink-2); margin: 0; font-size: 0.98rem; }
.transcript { margin: 0; border-left: 3px solid var(--signal); padding: 0.1rem 0 0.1rem 1.25rem; min-width: 0; }
.transcript figcaption { font-size: 0.875rem; color: var(--muted); padding-bottom: 0.6rem; }
.transcript dl { margin: 0; }
.transcript .line { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--line); transition: opacity 0.45s ease calc(var(--i, 0) * 300ms), transform 0.6s var(--ease-out) calc(var(--i, 0) * 300ms); }
.transcript dt { font-weight: 500; color: var(--muted); font-size: 0.875rem; padding-top: 0.15rem; white-space: nowrap; }
.transcript .ai dt { color: var(--signal-ink); }
.transcript dd { margin: 0; }
.transcript .caller dd { color: var(--ink-2); }
.voice { display: inline-flex; align-items: flex-end; gap: 2px; height: 0.7rem; margin-left: 0.4rem; vertical-align: -1px; }
.voice i { display: block; width: 2px; height: 100%; background: currentColor; border-radius: 1px; transform-origin: 50% 100%; transform: scaleY(var(--h)); }
.voice i:nth-child(1) { --h: 0.45; --k: 0; }
.voice i:nth-child(2) { --h: 1; --k: 1; }
.voice i:nth-child(3) { --h: 0.65; --k: 2; }

/* ---------- listing ---------- */
.listing { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem var(--col-gap); }
@media (min-width: 700px) { .listing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.listing > li { padding-top: 0.8rem; margin: 0; min-width: 0; }
.listing a { text-decoration: none; }
.listing-title { display: inline-block; font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; transition: transform 0.35s var(--ease-out); }
.listing a:hover .listing-title { text-decoration: underline; transform: translate3d(4px, 0, 0); }
.listing p { color: var(--ink-2); margin: 0.35rem 0 0; font-size: 0.98rem; }
.listing-stat { color: var(--muted); font-size: 0.9rem; }

/* ---------- faq ---------- */
.faq-list { display: grid; gap: 0; max-width: var(--measure); }
.faq-item { border-top: 1px solid var(--line); padding: 1rem 0 1.1rem; }
.faq-item:first-child { border-top: 1px solid var(--line-strong); }
.faq-item h3 { margin-bottom: 0.4rem; font-size: 1.1rem; }
.faq-item p { color: var(--ink-2); }
.faq-item p:last-child { margin-bottom: 0; }

/* ---------- closing ---------- */
.closing { padding: var(--sec) 0; }
.closing .inner { padding-top: 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem var(--col-gap); align-items: start; }
@media (min-width: 920px) { .closing .inner { grid-template-columns: 8fr 4fr; } }
.closing h2 { max-width: 22ch; margin-bottom: 0.5rem; }
.closing p { color: var(--ink-2); max-width: 52ch; margin: 0; }
.closing .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (min-width: 920px) { .closing .actions { justify-content: flex-end; } }

/* ---------- contact ---------- */
.contact-card { border-top: 1px solid var(--line-strong); padding-top: 1rem; margin-top: 1.5rem; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line-strong); padding: 2.5rem 0 2rem; font-size: 0.95rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem var(--col-gap); }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 920px) { .footer-grid { grid-template-columns: 4fr 2.6fr 2.6fr 2.8fr; } }
.footer-name { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.footer-about p { color: var(--ink-2); max-width: 36ch; }
.footer-about address { color: var(--ink-2); }
.footer-title { font-weight: 600; margin-bottom: 0.5rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.4rem; }
.site-footer li a { color: var(--ink-2); text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; }
.footer-legal { color: var(--muted); font-size: 0.85rem; line-height: 1.5; margin: 2.5rem 0 0; max-width: 90ch; border-top: 1px solid var(--line); padding-top: 1rem; }

.muted { color: var(--muted); }

/* ---------- the founder: a short letter, signed, with Calgary time ---------- */
.founder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem var(--col-gap); align-items: start; }
@media (min-width: 700px) { .founder.with-photo { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); } }
.founder-photo { margin: 0; min-width: 0; }
.founder-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; background: var(--paper-2); }
.founder-photo.slot { position: relative; aspect-ratio: 4 / 5; max-width: 100%; border: 1.5px dashed var(--g4); border-radius: 2px; background: var(--paper-2); display: flex; align-items: flex-end; padding: 1rem; }
.founder-photo.slot .slot-mark { position: absolute; top: 1rem; left: 1rem; width: 14px; height: 14px; background: var(--signal); border-radius: 1px; }
.founder-photo.slot figcaption { font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
.founder-note { min-width: 0; max-width: var(--measure); }
.letter p { color: var(--ink-2); }
.letter p:first-child { font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.6rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 1rem; }
.signoff { border-top: 1px solid var(--line); padding-top: 0.9rem; margin-top: 1.25rem; }
.signoff p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.signoff .signoff-name { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 0.15rem; }
.localtime { display: flex; gap: 0.6rem; align-items: baseline; margin: 1rem 0 0; font-size: 0.92rem; color: var(--ink-2); max-width: 52ch; }
.lt-dot { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 1px; background: var(--g4); transform: translateY(0.05em); }
.localtime.is-open .lt-dot { background: var(--signal); }
.site-footer .localtime { font-size: 0.85rem; color: var(--muted); }

/* ---------- where we work: the Calgary map + the list of areas ---------- */
.areas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem var(--col-gap); align-items: start; }
@media (min-width: 760px) { .areas { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.cmap { margin: 0; min-width: 0; }
.cmap svg { display: block; width: 100%; height: auto; max-width: 520px; }
.cmap figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; max-width: 48ch; }
.cmap .ring { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.cmap .city { fill: var(--paper-2); stroke: var(--ink-2); stroke-width: 1.25; }
.cmap .axes line { stroke: var(--muted); stroke-width: 0.8; stroke-dasharray: 2 4; opacity: 0.7; }
.cmap .lake { fill: var(--water); }
.cmap .river { fill: none; stroke: var(--water); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.cmap text { font-family: var(--body); }
.cmap .quad { font-family: var(--display); font-weight: 700; font-size: 15px; fill: var(--ink-2); letter-spacing: 0.02em; }
.cmap .hoods circle { fill: var(--muted); }
.cmap .hoods text { font-size: 11px; fill: var(--muted); }
.cmap .town circle { fill: var(--ink); }
.cmap .town text { font-size: 13px; font-weight: 600; fill: var(--ink); }
.cmap .km { font-weight: 400; fill: var(--muted); }
.cmap .office rect { fill: var(--signal); stroke: var(--ink); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.cmap .office text { font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.cmap .edm path { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cmap .edm text { font-size: 12.5px; font-weight: 600; fill: var(--ink-2); }
@media (max-width: 520px) { .cmap .hoods text { font-size: 13px; } .cmap .town text, .cmap .office text, .cmap .edm text { font-size: 15px; } }
.area-list { min-width: 0; }
.area-list dl { margin: 0; }
.area-list dl > div { border-top: 1px solid var(--line); padding: 0.6rem 0; }
.area-list dl > div:first-child { border-top-color: var(--line-strong); }
.area-list dt { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.area-list dd { margin: 0.15rem 0 0; color: var(--ink-2); font-size: 0.95rem; }
.area-rule { margin: 1rem 0 0; padding-left: 0.9rem; border-left: 3px solid var(--signal); color: var(--ink); }
.area-more { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.92rem; }

/* ---------- dated local notes ---------- */
.notes { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem var(--col-gap); }
.sec-body > .notes:first-child { margin-top: 0; }
@media (min-width: 760px) { .notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.notes > li { margin: 0; padding-top: 0.8rem; min-width: 0; }
.note-when { margin: 0 0 0.3rem; font-family: var(--display); font-weight: 700; font-size: 0.95rem; color: var(--signal-ink); letter-spacing: -0.005em; }
.notes h3 { margin-bottom: 0.4rem; }
.note-text p { color: var(--ink-2); font-size: 0.98rem; margin: 0 0 0.5rem; }
.note-source { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.45; }

/* ---------- about: find us ---------- */
.find { display: grid; gap: 0.5rem; max-width: var(--measure); }
.find .contact-card { margin-top: 0; }
.find-events { color: var(--ink-2); margin: 0.75rem 0 0; }
.byline { color: var(--muted); font-size: 0.9rem; margin-top: 0.5rem; }
.byline a { color: var(--ink); }

/* =====================================================================
   MOTION
   ===================================================================== */

/* 1. Reveal on scroll. site.js adds these classes only to content that is below the fold when the page loads,
      so nothing a visitor can already see is ever hidden, and nothing is hidden without JavaScript. */
.rv { opacity: 0; transform: translate3d(0, 18px, 0); }
.rv.is-in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-out) var(--rv-delay, 0ms), transform 0.9s var(--ease-out) var(--rv-delay, 0ms); }
.rv-rule::before { transform: scaleX(0); }
.rv-rule > * { opacity: 0; transform: translate3d(0, 14px, 0); }
.rv-rule.is-in::before { transform: scaleX(1); transition: transform 1s var(--ease-out) var(--rv-delay, 0ms); }
.rv-rule.is-in > * { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-out) calc(var(--rv-delay, 0ms) + 140ms), transform 0.9s var(--ease-out) calc(var(--rv-delay, 0ms) + 140ms); }
.rv-rows tbody tr { opacity: 0; }
.rv-rows.is-in tbody tr { opacity: 1; transition: opacity 0.5s ease calc(var(--r, 0) * 70ms + var(--rv-delay, 0ms) + 120ms); }

/* 2. The call log plays a night: every call rings, then gets answered, and the tally counts up. */
.motion .ledger:not(.live) .ledger-tally { visibility: hidden; }
.motion .ledger-row:not(.answered) .done { opacity: 0; }
.motion .ledger-row:not(.answered) .ring { opacity: 1; animation: as-pulse 1.1s ease-in-out infinite; }
.motion .ledger-row:not(.answered) .ledger-outcome::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); animation: as-pulse 1.1s ease-in-out infinite; }
.motion .ledger-row.answered .ledger-outcome::before { animation: as-pop 0.5s var(--ease-back) both; }
.motion .ledger-row.answered::after { animation: as-flash 1.6s ease-out both; }

/* 3. The rank grid fills from the shop outward, like the scan it stands for. */
.motion .rankgrid:not(.is-in) .cell { fill: #E4E8EE; }
.motion .rankgrid:not(.is-in) text { opacity: 0; }
.motion .rankgrid.is-in .sweep { animation: as-sweep 1.2s cubic-bezier(0.2, 0.6, 0.3, 1) both; }
.motion .rankgrid.is-in .pin { animation: as-ping 0.7s var(--ease-back) both; }

/* 4. Season bars grow month by month; peak labels arrive last. */
.motion .season:not(.is-in) .sb { transform: scaleY(0); }
.motion .season:not(.is-in) .val { opacity: 0; }

/* 5. The sample call plays line by line; the assistant's voice mark moves while it speaks. */
.motion .transcript:not(.is-in) .line { opacity: 0; transform: translate3d(0, 10px, 0); }
.motion .transcript.is-in .voice i { animation: as-voice 0.5s ease-in-out 3 alternate; animation-delay: calc(var(--i, 0) * 300ms + var(--k, 0) * 110ms); }

/* 6. The Calgary map draws itself: the city, then the rivers, then the towns and the office. */
.cmap .city, .cmap .lake, .cmap .axes, .cmap .hoods, .cmap .quad { transition: opacity 0.6s ease; }
.cmap .ring { transition: opacity 0.8s ease calc(var(--k, 0) * 120ms + 200ms); }
.cmap .river { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(0.3, 0, 0.2, 1) 0.25s; }
.cmap .town { transition: opacity 0.5s ease calc(var(--k, 0) * 140ms + 900ms), transform 0.6s var(--ease-out) calc(var(--k, 0) * 140ms + 900ms); }
.cmap .office, .cmap .edm { transition: opacity 0.5s ease 0.5s; }
.motion .cmap:not(.is-in) .city, .motion .cmap:not(.is-in) .lake, .motion .cmap:not(.is-in) .axes { opacity: 0; }
.motion .cmap:not(.is-in) .hoods, .motion .cmap:not(.is-in) .quad, .motion .cmap:not(.is-in) .ring,
.motion .cmap:not(.is-in) .office, .motion .cmap:not(.is-in) .edm { opacity: 0; }
.motion .cmap:not(.is-in) .river { stroke-dashoffset: 1; }
.motion .cmap:not(.is-in) .town { opacity: 0; transform: translate3d(0, 6px, 0); }
.motion .cmap .hoods, .motion .cmap .quad { transition-delay: 0.7s; }
.motion .cmap.is-in .office rect { animation: as-ping 0.7s var(--ease-back) 0.5s both; }
.motion .localtime.is-open .lt-dot { animation: as-pulse 2.4s ease-in-out infinite; }

/* 7. Page to page: the header stays put, the page underneath cross-fades and settles. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(site-header) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
::view-transition-old(root) { animation: as-vt-out 0.18s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: as-vt-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes as-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes as-pop { from { transform: scale(0.2); } to { transform: scale(1); } }
@keyframes as-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes as-sweep { from { transform: scale(0.11); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
@keyframes as-ping { 0% { transform: scale(0.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes as-voice { from { transform: scaleY(calc(var(--h, 1) * 0.3)); } to { transform: scaleY(var(--h, 1)); } }
@keyframes as-grow { to { transform: scaleX(1); } }
@keyframes as-busy { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes as-status { from { opacity: 0; transform: translate3d(0, -4px, 0); } to { opacity: 1; transform: none; } }
@keyframes as-nudge { 0%, 100% { transform: none; } 30% { transform: translateX(-4px); } 60% { transform: translateX(3px); } }
@keyframes as-vt-out { to { opacity: 0; } }
@keyframes as-vt-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
}
@media print {
  .site-header { position: static !important; transform: none !important; }
  .rv, .rv-rule > *, .rv-rows tbody tr, .motion .transcript .line { opacity: 1 !important; transform: none !important; }
  .rv-rule::before, .motion .season .sb { transform: none !important; }
  .motion .cmap * { opacity: 1 !important; stroke-dashoffset: 0 !important; transform: none !important; }
  .founder-photo.slot { display: none !important; }
  .readbar, .nav-toggle { display: none !important; }
}