/* Hallmark · shape: Photographic · genre: editorial · theme: Loom (deal 1/3, seed shalomdem-nagement-international-pour-103c·33c1aa23·2026-11-12·r0) · job: hire · draw: 6086d4
 * hero: Poster (swap from Index: the material is photographic) · nav: edge-aligned (swap from search-led: five real destinations) · footer: index columns · imagery: photographs, Wikimedia Commons 7, natural · signature: the quote form as a ruled pattern-book sheet, four steps · loom: ecru
 * axes: light/roman-serif/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: no moving photo in the library, the move itself is told in ruled rows and a week scale */
/* waive 58: the four-step quote form (labels, tiles) and the folded FAQ answers are the page's job; the long explanations live on methode, alya and villes */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- chrome ---------- */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-modal); background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-sm) var(--space-md); }
.skip:focus-visible { top: var(--space-md); }

.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-ink) solid var(--color-rule-ink); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; }
.wordmark { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; text-decoration: none; color: var(--color-ink); letter-spacing: var(--tracking-display); }
.wordmark:hover { color: var(--color-accent); }
.nav__links { display: flex; align-items: center; gap: var(--space-xl); list-style: none; margin: 0; padding: 0; }
.nav__links a:not(.btn) { font-size: var(--text-sm); font-weight: 500; text-decoration: none; padding-block: var(--space-2xs); border-bottom: 2px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.nav__links a:not(.btn):hover, .nav__links a[aria-current="page"] { border-color: var(--color-accent); }
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; font-size: var(--text-md); font-weight: 500; padding: var(--space-sm) 0; min-height: 44px; display: flex; align-items: center; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:focus-visible { outline: 2px solid var(--color-focus); }
.menu ul { position: absolute; left: 0; right: 0; top: 100%; list-style: none; margin: 0; padding: var(--space-md) var(--gutter) var(--space-xl); background: var(--color-paper); border-bottom: var(--rule-ink) solid var(--color-rule-ink); display: grid; gap: var(--space-xs); }
.menu ul a { display: block; padding: var(--space-sm) 0; font-size: var(--text-lg); text-decoration: none; border-bottom: 1px solid var(--color-rule); }
@media (max-width: 60rem) {
  .nav__links { display: none; }
  .menu { display: block; }
  .nav__inner { position: relative; }
}

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-height: 48px; padding: var(--space-md) var(--space-lg); font: 500 var(--text-md)/1 var(--font-body); background: var(--color-accent); color: var(--color-accent-ink); border: 0; border-radius: var(--radius-pill); text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.btn:hover { background: var(--color-accent-2); }
.btn:active { background: var(--color-ink); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn--small { min-height: 44px; padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); }
.link { font-weight: 500; padding-block: var(--space-2xs); border-bottom: 2px solid currentColor; text-decoration: none; transition: border-color var(--dur-short) var(--ease-out); }
.link:hover { border-color: var(--color-accent); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.btn-ghost { background: none; border: 0; padding: var(--space-md) 0; font: 500 var(--text-md)/1 var(--font-body); color: var(--color-ink); cursor: pointer; border-bottom: 2px solid currentColor; min-height: 44px; transition: border-color var(--dur-short) var(--ease-out); }
.btn-ghost:hover { border-color: var(--color-accent); }
.btn-ghost:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* ---------- sections ---------- */
.section { padding-block: var(--section-gap); }
.section--s { padding-block: var(--section-gap-s); }
.band { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.band--indigo { background: var(--color-accent); color: var(--color-accent-ink); padding-block: var(--section-gap-s); }
.band--indigo .btn { background: var(--color-paper); color: var(--color-accent); }
.band--indigo .btn:hover { background: var(--color-paper-2); }
.band--indigo .link { color: var(--color-accent-ink); }
.band--indigo .link:hover { border-color: var(--color-paper-3); }
.band--indigo :focus-visible { outline-color: var(--color-accent-ink); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head h2 { grid-column: 1 / 7; }
.head .lead { grid-column: 8 / 13; color: var(--color-muted); }
.lead { color: var(--color-muted); }
.stack-md > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg) var(--space-xl); }
@media (max-width: 60rem) {
  .head { display: block; }
  .head .lead { margin-top: var(--space-md); }
}

/* ---------- hero: poster ---------- */
.hero { position: relative; min-height: calc(100dvh - 74px); display: grid; align-items: end; color: var(--color-accent-ink); isolation: isolate; }
.hero__photo { position: absolute; inset: 0; z-index: 0; }
.hero__photo > img { object-position: 30% 60%; }
.hero__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, color-mix(in oklab, var(--color-ink) 70%, transparent) 0%, color-mix(in oklab, var(--color-ink) 35%, transparent) 55%, transparent 80%), linear-gradient(0deg, color-mix(in oklab, var(--color-ink) 55%, transparent) 0%, transparent 45%); }
.hero__body { position: relative; z-index: 3; padding-block: var(--space-3xl) var(--space-3xl); }
.hero h1 { font-size: clamp(3rem, 6.2vw, 6rem); line-height: 1; max-width: 13ch; }
.hero .lead { color: var(--color-accent-ink); margin-top: var(--space-lg); max-width: 34ch; }
.hero .actions { margin-top: var(--space-xl); }
.hero .btn { background: var(--color-paper); color: var(--color-accent); }
.hero .btn:hover { background: var(--color-paper-2); }
.hero .link { color: var(--color-accent-ink); }
.hero .link:hover { border-color: var(--color-paper-3); }
.hero :focus-visible { outline-color: var(--color-accent-ink); }
.hero__caption { position: absolute; z-index: 3; right: var(--gutter); bottom: var(--space-lg); font-size: var(--text-sm); color: color-mix(in oklab, var(--color-accent-ink) 85%, transparent); }
@media (max-width: 60rem) { .hero { min-height: 88dvh; } .hero__caption { display: none; } }

/* page hero (inner pages) */
.phero { padding-block: var(--space-3xl) var(--space-2xl); border-bottom: 1px solid var(--color-rule); }
.phero .grid12 { align-items: end; }
.phero h1 { grid-column: 1 / 8; }
.phero .lead { grid-column: 8 / 13; }
@media (max-width: 60rem) { .phero .grid12 { display: block; } .phero .lead { margin-top: var(--space-lg); } }

/* ---------- ruled rows (pattern-book sheet) ---------- */
.rows { list-style: none; margin: 0; padding: 0; border-top: var(--rule-ink) solid var(--color-rule-ink); }
.rows > li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); padding-block: var(--space-xl); border-bottom: 1px solid var(--color-rule); align-items: baseline; }
.rows h3 { grid-column: 1 / 6; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; font-weight: 400; }
.rows p { grid-column: 6 / 12; color: var(--color-ink-2); }
.rows .num { grid-column: 12 / 13; justify-self: end; font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) {
  .rows > li { display: block; padding-block: var(--space-lg); }
  .rows p { margin-top: var(--space-sm); }
  .rows .num { display: none; }
}

/* ---------- statement (indigo band) ---------- */
.statement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.statement blockquote, .statement .say { grid-column: 1 / 10; margin: 0; font-family: var(--font-display); font-size: var(--text-section); line-height: 1.1; letter-spacing: var(--tracking-display); max-width: 26ch; text-wrap: balance; }
.statement .aside { grid-column: 10 / 13; }
.statement .aside p { color: color-mix(in oklab, var(--color-accent-ink) 82%, transparent); margin-bottom: var(--space-lg); }
@media (max-width: 60rem) { .statement { display: block; } .statement .aside { margin-top: var(--space-xl); } }

/* ---------- week scale ---------- */
.scale { --cols: 10; width: 100%; border-collapse: collapse; table-layout: fixed; }
.scale th, .scale td { padding: 0; border-bottom: 1px solid var(--color-rule); height: 76px; }
.scale thead th { height: auto; padding-bottom: var(--space-sm); border-bottom: var(--rule-ink) solid var(--color-rule-ink); font: 400 var(--text-sm)/1 var(--font-outlier); color: var(--color-muted); text-align: left; }
.scale thead th:first-child { font-family: var(--font-body); font-weight: 500; width: 32%; }
.scale tbody th { text-align: left; font-weight: 500; font-size: var(--text-lg); padding-right: var(--space-lg); }
.scale tbody th small { display: block; font-size: var(--text-sm); color: var(--color-muted); font-weight: 400; margin-top: var(--space-2xs); }
.scale td { border-left: 1px solid var(--color-rule); position: relative; }
.scale col.label { width: 32%; }
.bar { position: absolute; left: 0; right: 0; top: 50%; height: 18px; transform: translateY(-50%); background: var(--color-paper-3); }
.bar--ink { height: 3px; background: var(--color-accent); }
.bar--dot { width: 12px; height: 12px; background: var(--color-ink); left: 0; right: auto; }
.bar.start { left: 0; } .bar.end { right: 0; }
.scale-note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.scale-wrap { overflow-x: auto; }
@media (max-width: 60rem) { .scale { min-width: 720px; } }

/* ---------- photographs ---------- */
.photo { margin: 0; }
.photo [data-slot] img { outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.photo figcaption { margin-top: var(--space-sm); font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.split--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--rev > :first-child { order: 2; }
.split [data-slot] { aspect-ratio: 4 / 3; min-height: 440px; }
.facts { margin: 0; border-top: var(--rule-ink) solid var(--color-rule-ink); }
.facts div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.facts dt { font-weight: 500; }
.facts dd { margin: 0; color: var(--color-ink-2); }
@media (max-width: 60rem) {
  .split, .split--rev { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .split--rev > :first-child { order: 0; }
  .split [data-slot] { min-height: 0; }
}

.cities { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.cities .photo:nth-child(1) { grid-column: 1 / 8; }
.cities .photo:nth-child(2) { grid-column: 8 / 13; }
.cities .photo:nth-child(3) { grid-column: 1 / 13; }
.cities .photo:nth-child(1) [data-slot] { aspect-ratio: 3 / 2; }
.cities .photo:nth-child(2) [data-slot] { height: calc(100% - 3.5rem); min-height: 360px; }
.cities .photo:nth-child(3) [data-slot] { aspect-ratio: 21 / 7; }
.cities a { text-decoration: none; display: block; height: 100%; }
.cities a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.cities h3 { font-family: var(--font-display); font-size: var(--text-2xl); margin-top: var(--space-md); }
.cities a:hover h3 { color: var(--color-accent); }
@media (max-width: 60rem) {
  .cities .photo:nth-child(n) { grid-column: 1 / 13; }
  .cities .photo:nth-child(2) [data-slot] { height: auto; aspect-ratio: 4 / 3; min-height: 0; }
  .cities .photo:nth-child(3) [data-slot] { aspect-ratio: 16 / 9; }
}

/* ---------- quote form ---------- */
.quote { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.quote__intro { grid-column: 1 / 5; position: sticky; top: 120px; }
.quote__intro h2 { margin-bottom: var(--space-lg); }
.quote__intro .facts { margin-top: var(--space-xl); }
.quote__form { grid-column: 6 / 13; background: var(--color-paper); padding: var(--space-xl); border-top: var(--rule-ink) solid var(--color-rule-ink); }
@media (max-width: 60rem) {
  .quote { display: block; }
  .quote__intro { position: static; margin-bottom: var(--space-xl); }
  .quote__form { padding: var(--space-lg) var(--space-md); }
}

.progress { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); margin-bottom: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.progress__steps { display: flex; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.progress__steps li[aria-current="step"] { color: var(--color-ink); font-weight: 500; }
.progress__bar { height: 3px; background: var(--color-rule); margin-bottom: var(--space-xl); overflow: hidden; }
.progress__bar span { display: block; height: 100%; background: var(--color-accent); transform-origin: left; transform: scaleX(var(--p, 0.25)); transition: transform var(--dur-long) var(--ease-out); }
.js .progress, .js .progress__bar { display: flex; }
.progress, .progress__bar { display: none; }
.js .progress__bar { display: block; }
@media (max-width: 40rem) { .progress__steps { display: none; } }

.step { border: 0; margin: 0; padding: 0; min-width: 0; }
.step + .step { margin-top: var(--space-2xl); }
.js .step + .step { margin-top: 0; }
.js .step:not(.is-active) { display: none; }
.step legend { padding: 0; font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.1; margin-bottom: var(--space-xs); }
.step__hint { color: var(--color-muted); margin-bottom: var(--space-xl); }
.group { border: 0; margin: 0 0 var(--space-xl); padding: 0; min-width: 0; }
.group > legend, .field > label, .label { display: block; font-weight: 500; font-size: var(--text-md); margin-bottom: var(--space-sm); padding: 0; }
.optional { font-weight: 400; color: var(--color-muted); }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { position: relative; display: block; cursor: pointer; }
.tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tile span { display: block; height: 100%; padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); background: var(--color-paper); transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.tile b { display: block; font-weight: 500; font-size: var(--text-lg); }
.tile small { display: block; margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.4; }
.tile:hover span { border-color: var(--color-ink-2); }
.tile input:checked + span { border-color: var(--color-accent); background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-accent); }
.tile input:checked + span b { color: var(--color-accent); }
.tile input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tile input:disabled + span { opacity: 0.55; cursor: not-allowed; }
.tiles--compact .tile span { padding: var(--space-sm) var(--space-md); }
.tiles--compact .tile b { font-size: var(--text-md); }
@media (max-width: 40rem) { .tiles, .tiles--3 { grid-template-columns: minmax(0, 1fr); } }

.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-md); }
.field { margin-bottom: var(--space-lg); min-width: 0; }
.field--full { grid-column: 1 / -1; }
.input { width: 100%; min-height: 52px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); border-radius: 0; background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); transition: border-color var(--dur-short) var(--ease-out); }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.5; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-ink) 50%), linear-gradient(135deg, var(--color-ink) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: var(--space-xl); }
.input:hover { border-color: var(--color-ink-2); }
.input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; border-color: var(--color-focus); }
.input::placeholder { color: var(--color-muted); opacity: 1; }
.input[aria-invalid="true"] { border-color: var(--color-error); }
.err { min-height: 1lh; font-size: var(--text-sm); color: var(--color-error); margin-top: var(--space-2xs); }
.check { display: flex; gap: var(--space-sm); align-items: flex-start; cursor: pointer; font-size: var(--text-md); padding-block: var(--space-xs); }
.check input { width: 20px; height: 20px; margin: var(--space-3xs) 0 0; flex-shrink: 0; accent-color: var(--color-accent); }
.check input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-lg); }
.consent { font-size: var(--text-sm); color: var(--color-ink-2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.form-nav .btn { margin-left: auto; }
.js-only { display: none; }
.js .js-only { display: inline-flex; }
.js .nojs-only { display: none; }
.form-status { margin-top: var(--space-md); font-size: var(--text-md); }
.form-status[data-state="error"] { color: var(--color-error); }
.done h3 { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.1; margin-bottom: var(--space-md); }
.done p + p { margin-top: var(--space-md); }
@media (max-width: 40rem) { .fields, .checks { grid-template-columns: minmax(0, 1fr); } .input { font-size: var(--text-md); } }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.faq > h2 { grid-column: 1 / 5; }
.faq > div { grid-column: 5 / 13; border-top: var(--rule-ink) solid var(--color-rule-ink); }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); font-size: var(--text-lg); font-weight: 500; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-outlier); color: var(--color-muted); flex-shrink: 0; }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--color-accent); }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); max-width: 62ch; }
@media (max-width: 60rem) { .faq { display: block; } .faq > div { margin-top: var(--space-xl); } }

/* ---------- prose pages ---------- */
.prose { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.prose__toc { grid-column: 1 / 4; position: sticky; top: 112px; align-self: start; font-size: var(--text-sm); }
.prose__toc ol { list-style: none; margin: 0; padding: 0; border-top: var(--rule-ink) solid var(--color-rule-ink); }
.prose__toc a { display: block; padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); text-decoration: none; font-weight: 500; }
.prose__toc a:hover { color: var(--color-accent); }
.prose__body { grid-column: 5 / 12; }
.prose__body section + section { margin-top: var(--space-3xl); }
.prose__body h2 { font-size: var(--text-3xl); margin-bottom: var(--space-lg); }
.prose__body h3 { font-weight: 500; font-family: var(--font-body); font-size: var(--text-lg); margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.prose__body p, .prose__body li { line-height: 1.7; color: var(--color-ink-2); max-width: 66ch; }
.prose__body p + p { margin-top: var(--space-md); }
.prose__body ul { padding-left: 1.2em; margin: var(--space-md) 0 0; }
.prose__body li + li { margin-top: var(--space-xs); }
.prose__body .photo { margin-block: var(--space-xl); }
.prose__body .photo [data-slot] { aspect-ratio: 16 / 10; }
.prose__body .facts { margin-top: var(--space-lg); }
.note { margin-top: var(--space-xl); padding: var(--space-lg); background: var(--color-paper-2); font-size: var(--text-md); color: var(--color-ink-2); }
@media (max-width: 60rem) { .prose { display: block; } .prose__toc { position: static; margin-bottom: var(--space-2xl); } }

/* city index */
.index { list-style: none; margin: 0; padding: 0; border-top: var(--rule-ink) solid var(--color-rule-ink); }
.index > li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); padding-block: var(--space-2xl); border-bottom: 1px solid var(--color-rule); align-items: start; }
.index h2 { grid-column: 1 / 5; }
.index .body { grid-column: 5 / 9; }
.index .body p + p { margin-top: var(--space-md); }
.index .body p { color: var(--color-ink-2); }
.index .photo { grid-column: 9 / 13; }
.index .photo [data-slot] { aspect-ratio: 4 / 3; }
.index dl { margin: var(--space-lg) 0 0; }
@media (max-width: 60rem) { .index > li { display: block; } .index .body, .index .photo { margin-top: var(--space-lg); } }

/* ---------- footer ---------- */
.footer { background: var(--color-paper-2); padding-block: var(--space-3xl) var(--space-xl); margin-top: 0; }
.footer__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.footer__brand { grid-column: 1 / 6; }
.footer__brand .wordmark { font-size: var(--text-3xl); }
.footer__brand p { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 38ch; }
.footer__col { grid-column: span 2; }
.footer__col:first-of-type { grid-column: 7 / 9; }
.footer__col h2 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); margin-bottom: var(--space-md); }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.footer__col a { text-decoration: none; }
.footer__col a:hover { color: var(--color-accent); text-decoration: underline; }
.footer__legal { margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); display: grid; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.footer__legal a { color: inherit; }
@media (max-width: 60rem) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; margin-bottom: var(--space-xl); }
  .footer__col, .footer__col:first-of-type { grid-column: span 1; }
}

/* mobile sticky quote action */
.sticky-cta { display: none; }
@media (max-width: 40rem) {
  .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); padding: var(--space-sm) var(--gutter); background: var(--color-paper); border-top: 1px solid var(--color-rule); }
  .sticky-cta .btn { width: 100%; }
  body.has-sticky { padding-bottom: 76px; }
}

/* comparison table */
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: var(--space-md) var(--space-sm); border-bottom: 1px solid var(--color-rule); text-align: left; }
.compare thead th { border-bottom: var(--rule-ink) solid var(--color-rule-ink); font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); white-space: nowrap; }
.compare thead th:first-child { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); vertical-align: bottom; }
.compare tbody th { font-weight: 500; width: 40%; }
.compare td { color: var(--color-ink-2); }
@media (max-width: 40rem) { .compare { min-width: 560px; } }

/* city rows without a photograph */
.index > li:not(:has(.photo)) .body { grid-column: 5 / 12; }

/* a fact still to fill */
.fill { color: var(--color-muted); outline: 1px dashed var(--color-rule); outline-offset: 2px; padding-inline: var(--space-2xs); }