:root {
  --n-950: #141414;
  --n-900: #22231f;
  --n-800: #30312b;
  --n-600: #65675f;
  --n-400: #9b9c92;
  --n-200: #d4d2c7;
  --n-100: #e9e6dc;
  --n-50: #f7f5ed;
  --white: #fff;
  --font-display: "Syncopate", "Arial Black", "Helvetica Neue", sans-serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --container: min(1240px, calc(100vw - 96px));
  --readable: 66ch;
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4.5rem;
  --s-8: 6.5rem;
  --s-9: 9rem;
  --step--1: 0.75rem;
  --step-0: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.35vw, 1.375rem);
  --step-2: clamp(1.5rem, 1.32rem + 0.8vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.55rem + 1.45vw, 2.65rem);
  --step-4: clamp(2.35rem, 1.8rem + 2.4vw, 3.65rem);
  --step-5: clamp(2.75rem, 1.95rem + 3.6vw, 4.7rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--n-50);
  color: var(--n-950);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
}

body, button, input, select, textarea { font-family: var(--font-body); }
button, input, select, textarea { font-size: 16px; }
button, summary, select { cursor: pointer; }
button, input, select, textarea { border-radius: 0; }
img { display: block; height: auto; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 var(--s-4); max-width: var(--readable); }
figure, blockquote { margin: 0; }

h1, h2, h3 {
  margin: 0;
  text-wrap: balance;
}

.home-hero h1,
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.13;
  text-transform: uppercase;
}

h2 {
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1.22;
}

h3 {
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.35;
}

:focus-visible {
  outline: 3px solid #141414;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #fff;
}

.surface-dark :focus-visible,
.photo-surface :focus-visible,
.site-header[data-surface="dark"] :focus-visible,
.site-header:not(.is-scrolled) :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #141414;
}

.skip-link {
  background: var(--white);
  color: var(--n-950);
  font-size: 13px;
  font-weight: 600;
  left: var(--s-3);
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  position: fixed;
  top: -120px;
  z-index: 1000;
}

.skip-link:focus { top: var(--s-3); }
.container { margin-inline: auto; width: var(--container); }
.section { padding-block: var(--s-8); }
.surface-light { background: var(--white); color: var(--n-950); }
.surface-warm { background: var(--n-100); color: var(--n-950); }
.surface-dark { background: var(--n-950); color: var(--n-50); }

.eyebrow,
.functional-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin-bottom: var(--s-3);
  text-transform: uppercase;
}

.section-heading { margin-bottom: var(--s-6); }
.section-heading h2 { max-width: 22ch; }
.section-heading > p:last-child { margin-top: var(--s-3); }

.button {
  align-items: center;
  border: 1px solid currentColor;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.1em;
  line-height: 1.2;
  min-height: 50px;
  padding: 0.9rem 1.4rem;
  text-align: center;
  text-transform: uppercase;
}

.button-primary {
  background: var(--n-950);
  border-color: var(--n-950);
  color: var(--white);
}

/* Every linkable box changes color on hover (Greg 2026-08-31). */
.button-primary:hover { background: var(--n-800); border-color: var(--n-800); }
.button-outline:hover { background: var(--n-950); border-color: var(--n-950); color: var(--white); }
.surface-dark .button-outline:hover,
.photo-surface .button-outline:hover { background: var(--n-50); border-color: var(--n-50); color: var(--n-950); }

.photo-surface .button-primary,
.surface-dark .button-primary {
  background: var(--n-50);
  border-color: var(--n-50);
  color: var(--n-950);
}

.button-outline { background: transparent; color: inherit; }
.text-link {
  /* Underline appears on hover only, like the primary-nav links (Greg 2026-08-31). */
  border-bottom: 1px solid transparent;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  min-height: 44px;
  padding-block: 0.55rem;
  text-transform: uppercase;
}

.text-link:hover { border-bottom-color: currentColor; }

.site-header {
  align-items: center;
  /* Solid by default so the nav survives with JavaScript disabled. The transparent
     overlay is opt-in via html[data-js], which an inline head script sets before paint. */
  background: var(--n-50);
  border-bottom: 1px solid var(--n-200);
  color: var(--n-950);
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto auto;
  height: 84px;
  inset: 0 0 auto;
  padding-inline: max(24px, calc((100vw - 1240px) / 2));
  position: fixed;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  z-index: 100;
}

html[data-js] .site-header {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--white);
}

html[data-js] .site-header.is-scrolled {
  background: var(--n-50);
  border-bottom-color: var(--n-200);
  color: var(--n-950);
}

/* data-surface is set by site.js from the block under the bar, so the returning
   header matches the section it sits over instead of always going n-50. */
html[data-js] .site-header.is-scrolled[data-surface="light"] { background: var(--white); }

html[data-js] .site-header.is-scrolled[data-surface="warm"] { background: var(--n-100); }

html[data-js] .site-header.is-scrolled[data-surface="dark"] {
  background: var(--n-950);
  border-bottom-color: var(--n-800);
  color: var(--n-50);
}

.wordmark-logo {
  color: currentColor;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  min-height: 44px;
}

.wordmark-logo[aria-current="page"] { border-bottom: 2px solid currentColor; }

@supports ((-webkit-mask: url("../brand/steve-thielsen-wordmark.svg")) or (mask: url("../brand/steve-thielsen-wordmark.svg"))) {
  .wordmark-logo {
    background: currentColor;
    height: 44px;
    overflow: hidden;
    text-indent: -9999px;
    width: 194px;
    -webkit-mask: url("../brand/steve-thielsen-wordmark.svg") no-repeat left center / contain;
    mask: url("../brand/steve-thielsen-wordmark.svg") no-repeat left center / contain;
  }

  .wordmark-logo[aria-current="page"] { box-shadow: inset 0 -2px currentColor; border-bottom: 0; }

  .site-footer .wordmark-logo { height: 38px; width: 168px; }
}

.primary-nav { align-items: center; display: flex; gap: clamp(var(--s-1), 1vw, var(--s-3)); }

.primary-nav a {
  align-items: center;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  min-height: 44px;
  position: relative;
  text-transform: uppercase;
}

.primary-nav a::after {
  background: currentColor;
  bottom: 6px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 0;
}

.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after { width: 100%; }
.mobile-menu { display: none; }

.home-hero {
  color: var(--white);
  min-height: 100svh;
  overflow: hidden;
  position: relative;
}

.hero-media,
.hero-scrim,
.page-hero-media,
.page-hero-scrim {
  inset: 0;
  position: absolute;
}

.hero-media img,
.page-hero-media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.home-hero .hero-media img { object-position: 52% 54%; }
.hero-scrim,
.page-hero-scrim {
  /* Two layers, solved together: a curtain over the text column plus a header band.
     Alphas account for multiplicative compositing (~56% of the photo's light survives). */
  background:
    linear-gradient(90deg, rgba(20, 20, 20, .48) 0%, rgba(20, 20, 20, .48) 70%, rgba(20, 20, 20, .06) 100%),
    linear-gradient(180deg, rgba(20, 20, 20, .54) 0%, rgba(20, 20, 20, 0) 13%);
}

.hero-content {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding-block: 7rem var(--s-7);
  position: relative;
  z-index: 2;
}

.home-hero h1 {
  font-size: var(--step-4);
  margin-bottom: var(--s-4);
  max-width: 14ch;
  text-shadow: 0 2px 12px rgba(20, 20, 20, .92), 0 1px 3px rgba(20, 20, 20, 1);
}

.hero-content .eyebrow,
.hero-content .hero-lede,
.hero-content .hero-trust {
  text-shadow: 0 2px 8px rgba(20, 20, 20, 1), 0 1px 2px rgba(20, 20, 20, 1);
}

.hero-lede { font-size: var(--step-0); margin-bottom: var(--s-4); max-width: 56ch; }
.hero-actions { align-items: stretch; display: inline-flex; flex-direction: column; gap: var(--s-2); }
/* The outline button sits on the photograph: a light scrim behind it keeps the label legible. */
.home-hero .button-outline { background: rgba(20, 20, 20, .35); }
.hero-trust { font-size: 13px; font-weight: 600; margin: var(--s-2) 0 0; }
.hero-trust a { border-bottom: 1px solid currentColor; display: inline-flex; min-height: 44px; padding-top: 0.65rem; }

.metric-grid strong,
.metric-grid span { display: block; }
.metric-grid strong { font-size: var(--step-2); font-weight: 500; line-height: 1.25; }
.metric-grid span { font-size: 13px; font-weight: 500; margin-top: var(--s-2); }

.about-grid,
.editorial-grid,
.contact-grid {
  align-items: start;
  display: grid;
  gap: var(--s-7);
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
}

.portrait { margin: 0; position: relative; }
.portrait img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

.about-copy h2,
.editorial-copy h2,
.contact-copy h2 { margin-bottom: var(--s-4); }
.about-copy .text-link { margin-top: var(--s-2); }

.record-list { border-top: 1px solid rgba(255, 255, 255, .34); }
.record-row {
  align-items: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, .24);
  display: grid;
  gap: var(--s-4);
  grid-template-columns: minmax(145px, .35fr) minmax(0, 1fr);
  padding-block: var(--s-4);
}

.record-row span { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.record-row strong { font-size: var(--step-0); font-weight: 500; }
a.record-row:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.surface-light .record-list { border-top-color: var(--n-200); }
.surface-light .record-row { border-bottom-color: var(--n-200); }

/* Home answers: eight real questions from the library as bordered cards sharing hairlines
   (Greg 2026-09-01: staging card chrome, question-led content). Inversion hover per the
   sitewide policy below. */
.question-card-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--s-5);
}

.question-card {
  border: 1px solid rgba(255, 255, 255, .28);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: -1px 0 0 -1px;
  min-height: 200px;
  min-width: 0;
  padding: var(--s-4);
}

.question-topic { color: var(--n-400); font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.question-card strong { font-size: var(--step-0); font-weight: 500; line-height: 1.45; }
.question-open { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; margin-top: auto; padding-top: var(--s-3); text-transform: uppercase; }

/* Home area tiles: large 2x2 photo tiles with the caption set on the photograph
   (Greg 2026-09-01, staging treatment carrying the landscape photography). */
.areas-home-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--s-4); }
.area-tile { display: block; overflow: hidden; position: relative; }
.area-tile img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.area-tile::after {
  background: linear-gradient(180deg, rgba(20, 20, 20, 0) 38%, rgba(20, 20, 20, .74) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.area-tile-caption { bottom: 0; color: var(--n-50); display: grid; gap: 2px; left: 0; padding: var(--s-4); position: absolute; z-index: 1; }
.area-tile-caption small { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.area-tile-caption strong { font-size: var(--step-1); font-weight: 500; letter-spacing: .03em; }
.area-tile:hover .area-tile-caption strong { text-decoration: underline; text-underline-offset: 3px; }

/* Sitewide hover policy (Greg 2026-09-01): a linkable text tile inverts on hover - near-black
   with light text on light surfaces, white with dark text on the dark surface. Photo tiles
   keep the zoom-and-underline treatment instead; imagery cannot invert. */
a.topic-card:hover,
.answers-cross a:hover,
a.guide-card:hover {
  background: var(--n-950);
  border-color: var(--n-950);
  color: var(--white);
}
a.topic-card:hover .topic-count,
a.topic-card:hover p,
a.guide-card:hover .guide-card-step,
a.guide-card:hover p,
.answers-cross a:hover span { color: inherit; }
.question-card:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--n-950);
  z-index: 1;
}
.question-card:hover .question-topic { color: var(--n-600); }
.community-card { overflow: hidden; }
.community-card:hover img,
.area-tile:hover img { transform: scale(1.02); }

.section-head,
.area-section-head {
  align-items: end;
  display: flex;
  gap: var(--s-5);
  justify-content: space-between;
}

.section-head { margin-bottom: var(--s-6); }
.area-section-head { margin-bottom: var(--s-5); }
.section-head > div,
.area-section-head > div { max-width: var(--readable); }
.section-head h2 + p { margin: var(--s-3) 0 0; }
.property-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.property-card { background: var(--white); color: var(--n-950); min-width: 0; }
.property-media { aspect-ratio: 16 / 10.5; overflow: hidden; position: relative; }
.property-media img { height: 100%; object-fit: cover; width: 100%; }
.property-card:nth-child(2) .property-media img,
.property-card:nth-child(5) .property-media img { object-position: 50% 42%; }
.sold-label {
  background: var(--n-50);
  color: var(--n-950);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: var(--s-2) var(--s-3);
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: 0;
}

.property-meta { border: 1px solid var(--n-200); border-top: 0; padding: var(--s-4); }
.property-meta small,
.property-meta p { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.property-meta small { display: block; }
.property-meta h3 { margin-block: var(--s-1); }
.property-meta p { margin: 0; }

/* Home portfolio rail: the four sold cards ride a swipeable scroll-snap carousel,
   two cards per view on desktop, one on phones; site.js adds < > steppers like the
   review rail. Without JS it is a plain swipeable rail. */
.property-rail {
  display: grid;
  gap: var(--s-5);
  grid-auto-columns: calc(50% - var(--s-5) / 2);
  grid-auto-flow: column;
  overflow-x: auto;
  padding-bottom: var(--s-3);
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--n-200) transparent;
  scrollbar-width: thin;
}

.property-rail .property-card { scroll-snap-align: start; }

.property-rail-shell.has-controls {
  align-items: center;
  display: grid;
  gap: var(--s-3);
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.property-rail-shell.has-controls .property-rail { min-width: 0; }
.property-rail-shell .tile-rail-step { margin-top: 0; }

.review-rail {
  display: grid;
  gap: var(--s-4);
  grid-auto-columns: minmax(340px, 1fr);
  grid-auto-flow: column;
  overflow-x: auto;
  padding: 6px 6px var(--s-4);
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--n-400) transparent;
}

.review-card {
  border: 1px solid rgba(255, 255, 255, .32);
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: var(--s-5);
  scroll-snap-align: start;
}

.review-label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.review-card blockquote { display: flex; flex: 1; flex-direction: column; }
.review-card blockquote p { font-size: var(--step-1); line-height: 1.65; }
.review-card blockquote p::before { content: "\201C"; }
.review-card blockquote p::after { content: "\201D"; }
.review-card blockquote footer { font-size: 13px; font-weight: 600; margin-top: auto; }
.review-source { color: var(--n-200); font-size: 13px; margin-top: var(--s-4); }

.cta-band { border-top: 1px solid var(--n-200); }
.cta-grid { align-items: center; display: grid; gap: var(--s-5); grid-template-columns: 1fr auto; }
.cta-grid h2 { margin-bottom: var(--s-3); max-width: 24ch; }
.cta-grid p { margin: 0; }
.library-cross-link .section-head,
.library-cross-link .area-section-head { margin-bottom: 0; }
.error-page { min-height: 72vh; padding-top: calc(var(--s-8) + 84px); }
.error-page h1 { font-size: var(--step-4); line-height: 1.15; margin-bottom: var(--s-4); }

.page-hero {
  color: var(--white);
  /* min-height, not height: a fixed box with flex-end overflows out of the TOP
     when generated copy runs long, pushing content under the fixed header. */
  min-height: clamp(340px, 34vw, 420px);
  overflow: hidden;
  position: relative;
}

.page-hero-content {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(340px, 34vw, 420px);
  padding-bottom: var(--s-5);
  padding-top: 6.5rem;
  position: relative;
  z-index: 2;
}

.page-hero h1 {
  font-size: var(--step-3);
  margin-bottom: var(--s-2);
  text-shadow: 0 2px 12px rgba(20, 20, 20, .94), 0 1px 3px rgba(20, 20, 20, 1);
}

.page-hero h2 {
  font-size: var(--step-1);
  font-weight: 500;
  margin-bottom: var(--s-1);
  text-shadow: 0 2px 8px rgba(20, 20, 20, 1), 0 1px 2px rgba(20, 20, 20, 1);
}

.page-hero p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  max-width: 62ch;
  text-shadow: 0 2px 8px rgba(20, 20, 20, 1), 0 1px 2px rgba(20, 20, 20, 1);
}

.page-hero .eyebrow { font-size: 12px; margin-bottom: var(--s-2); }
.hero-sell img { object-position: 50% 60%; }
.hero-buy img { object-position: 50% 45%; }
.hero-properties img { object-position: 50% 56%; }
.hero-about img { object-position: 50% 52%; }
.hero-contact img { object-position: 50% 44%; }

.editorial-copy > p:last-child,
.contact-copy > p:last-child { margin-bottom: 0; }
.process-grid { display: grid; gap: 1px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section > .container > .process-grid { margin-top: var(--s-7); }
/* The buy/sell representation grids are themselves the .container, directly after the
   editorial copy: they need the same breathing room (Greg 2026-08-31). */
.section > .process-grid.container { margin-top: var(--s-7); }
.process-card,
.process-grid > article { border: 1px solid var(--n-200); margin: -1px 0 0 -1px; padding: var(--s-5); }
.process-card { display: flex; flex-direction: column; min-height: 320px; }
.process-card h3 { margin-bottom: var(--s-3); }
.process-card p { font-size: 17px; margin: 0; }

.prototype-form { display: grid; gap: var(--s-4); }
.form-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prototype-form label { display: grid; font-size: 13px; font-weight: 600; gap: var(--s-1); letter-spacing: 0.07em; text-transform: uppercase; }
.prototype-form input,
.prototype-form select,
.prototype-form textarea {
  background: var(--n-900);
  border: 1px solid var(--n-400);
  color: var(--white);
  font-size: 16px;
  font-weight: 400;
  min-height: 50px;
  padding: 0.75rem;
  resize: vertical;
  text-transform: none;
  width: 100%;
}

.prototype-form textarea { min-height: 130px; }
.prototype-form select { color-scheme: dark; }
.prototype-form ::placeholder { color: var(--n-200); opacity: 1; }
.prototype-form .button { justify-self: start; }

/* The home contact section (the retired /contact page's content) carries the note form
   on the light surface, so the dark-surface form chrome above is recolored here. */
.surface-light .prototype-form input,
.surface-light .prototype-form select,
.surface-light .prototype-form textarea { background: var(--white); border-color: var(--n-400); color: var(--n-950); }
.surface-light .prototype-form select { color-scheme: light; }
.surface-light .prototype-form ::placeholder { color: var(--n-600); }
.surface-light .form-note { color: var(--n-600); }
.form-note { color: var(--n-200); font-size: 13px; line-height: 1.6; margin: 0; }
.direct-links { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.direct-links a { align-items: center; display: inline-flex; font-size: 15px; font-weight: 600; min-height: 44px; text-decoration: underline; text-underline-offset: 0.25em; }

.proof-links { margin-top: var(--s-5); }
.cross-links { display: grid; gap: var(--s-1); justify-items: start; }

.theme-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-6); }
.theme-card { border: 1px solid var(--n-200); display: flex; flex-direction: column; padding: var(--s-5); }
.theme-count { font-size: var(--step-2); font-weight: 500; line-height: 1.25; }
.theme-card h3 { margin: var(--s-2) 0 var(--s-3); }
.theme-card blockquote { display: flex; flex: 1; flex-direction: column; margin: 0; }
.theme-card blockquote p,
.record-voice blockquote p { font-size: var(--step-1); line-height: 1.65; }
/* Quotation marks live in CSS so the text nodes stay verbatim against the review corpus. */
.theme-card blockquote p::before,
.record-voice blockquote p::before { content: "\201C"; }
.theme-card blockquote p::after,
.record-voice blockquote p::after { content: "\201D"; }
.theme-card blockquote.trimmed p::after { content: "\00A0\2026\201D"; }
.theme-card blockquote footer { font-size: 13px; font-weight: 600; margin-top: auto; padding-top: var(--s-3); }
.theme-note { border-top: 1px solid var(--n-200); color: var(--n-800); font-size: 13px; margin-top: var(--s-5); padding-top: var(--s-4); }

/* Client fragments sit at the card base as quiet corroboration: a swipeable scroll-snap
   rail (same no-JS idiom as the home review rail) with full-width slides. site.js adds
   previous/next step buttons as an enhancement; without JS the rail simply swipes. */
.tile-rail-shell { margin-top: auto; }
.tile-rail {
  display: grid;
  gap: var(--s-5);
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  overflow-x: auto;
  padding-top: var(--s-5);
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--n-200) transparent;
  scrollbar-width: thin;
}

.tile-rail-shell.has-controls,
.review-rail-shell.has-controls {
  /* Anchored to the shell base: rails pin to the card bottom (margin-top auto), so the
     bottom edge is the one plane every card in a row shares regardless of quote length.
     Centering or top-offsetting drifts whenever one rail holds a longer quote. */
  align-items: end;
  display: grid;
  gap: var(--s-3);
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.tile-rail-shell.has-controls .tile-rail,
.review-rail-shell.has-controls .review-rail { min-width: 0; }
.review-rail-shell.has-controls { align-items: center; }
.review-all { margin: var(--s-5) 0 0; }
/* Rail steppers, all rails: bordered 44x48 buttons (Greg 2026-08-31, replacing the
   bare glyphs he found too small to see), filling on hover like the other buttons. */
.tile-rail-step {
  align-items: center;
  background: transparent;
  border: 1px solid var(--n-400);
  color: var(--n-950);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  height: 48px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 44px;
}
.tile-rail-step:hover:not(:disabled) { background: var(--n-950); border-color: var(--n-950); color: var(--white); }
.tile-rail-step:disabled { border-color: var(--n-200); color: var(--n-200); cursor: default; }
/* The home reviews rail sits on the dark surface: near-black chrome vanishes there. */
.surface-dark .tile-rail-step { border-color: rgba(255, 255, 255, .32); color: var(--n-50); }
.surface-dark .tile-rail-step:hover:not(:disabled) { background: var(--white); border-color: var(--white); color: var(--n-950); }
.surface-dark .tile-rail-step:disabled { border-color: var(--n-800); color: var(--n-600); }
.tile-quote { display: flex; flex-direction: column; margin: 0; scroll-snap-align: start; }
/* Fixed four-line quote block (4 x 24px at 15px/1.6) so every rail in a card row is the
   same height and quotes, steppers, and attributions align across the row. */
.tile-quote p { color: var(--n-800); font-size: 15px; line-height: 1.6; margin: 0; min-height: 96px; }
.tile-quote .q::before { content: "\201C"; }
.tile-quote .q::after { content: "\201D"; }
.tile-quote footer { color: var(--n-800); font-size: 12px; font-weight: 600; letter-spacing: .07em; margin-top: auto; padding-top: var(--s-2); text-transform: uppercase; }

.loyalty-strip { border: 1px solid var(--n-200); margin-top: var(--s-4); padding: var(--s-5); }
.loyalty-strip h3 { margin: 0 0 var(--s-4); }
.loyalty-quotes { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.loyalty-quotes blockquote { margin: 0; }
.loyalty-quotes blockquote p { font-size: 15px; line-height: 1.65; }
.loyalty-quotes blockquote p::before { content: "\201C"; }
.loyalty-quotes blockquote p::after { content: "\201D"; }
.loyalty-quotes blockquote footer { font-size: 13px; font-weight: 600; margin-top: var(--s-2); }
.record-voice { border-top: 1px solid var(--n-400); margin-top: var(--s-6); max-width: var(--readable); padding-top: var(--s-5); }
.record-voice blockquote { margin: var(--s-2) 0 0; }
.record-voice blockquote footer { font-size: 13px; font-weight: 600; margin-top: var(--s-3); }

.properties-page { background: var(--n-100); }
.properties-intro { margin-bottom: var(--s-6); }
.properties-intro h2 { margin-bottom: var(--s-3); }
.properties-note { border-top: 1px solid var(--n-400); margin-top: var(--s-6); padding-top: var(--s-4); }

.bio-grid { align-items: start; display: grid; gap: var(--s-7); grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); }
.bio-copy h2 { margin-bottom: var(--s-4); }
.bio-cta { margin-top: var(--s-4); }

.record-group {
  border-top: 1px solid rgba(255, 255, 255, .24);
  display: grid;
  gap: var(--s-4) var(--s-7);
  grid-template-columns: 200px minmax(0, 1fr);
  padding: var(--s-5) 0;
}
#credentials .section-heading { margin-bottom: var(--s-5); }
.record-group-label { font-size: 13px; font-weight: 600; letter-spacing: .08em; margin: 0; text-transform: uppercase; }
.path-entry { display: grid; gap: var(--s-1) var(--s-6); grid-template-columns: 130px minmax(0, 1fr); padding: var(--s-3) 0; }
.path-entry + .path-entry { border-top: 1px solid rgba(255, 255, 255, .12); }
.path-entry:first-child { padding-top: 0; }
.path-entry:last-child { padding-bottom: 0; }
.path-years { color: var(--n-200); font-size: var(--step-1); font-weight: 400; letter-spacing: .04em; }
.path-entry strong { display: block; font-size: 17px; font-weight: 500; }
.path-entry div > span { color: var(--n-200); display: block; font-size: 14px; }
.record-items { display: grid; gap: var(--s-4); }
.record-item > span { color: var(--n-200); display: block; font-size: 12px; font-weight: 600; letter-spacing: .07em; margin-bottom: var(--s-1); text-transform: uppercase; }
.record-item strong { font-size: 16px; font-weight: 500; line-height: 1.55; }
.recognition-stats { display: grid; gap: var(--s-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recognition-stat strong { display: block; font-size: var(--step-4); font-weight: 400; line-height: 1.05; }
.recognition-stat span { color: var(--n-200); display: block; font-size: 13px; letter-spacing: .06em; margin-top: var(--s-2); text-transform: uppercase; }
.award-ledger { color: var(--n-200); font-size: 13px; line-height: 1.8; margin: var(--s-4) 0 0; max-width: 72ch; }
/* Home contact ledger: the retired /contact page's details as quiet record rows. */
.contact-ledger { margin-top: var(--s-4); }
.contact-ledger .record-row { grid-template-columns: minmax(96px, .28fr) minmax(0, 1fr); padding-block: var(--s-3); }
.contact-ledger strong { line-height: 1.55; }

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.area-page,
.answers-page { overflow-wrap: anywhere; }

.answers-hero .page-hero-scrim,
.area-hub-hero .page-hero-scrim {
  /* Short hero over a photo. Solved against all twelve hero images in use:
     worst-case text contrast 5.40:1, ~41% of the photograph's light survives. */
  background:
    linear-gradient(90deg, rgba(20, 20, 20, .58) 0%, rgba(20, 20, 20, .58) 98%, rgba(20, 20, 20, .05) 100%),
    linear-gradient(180deg, rgba(20, 20, 20, .34) 0%, rgba(20, 20, 20, 0) 18%);
}

/* The About hero photograph (sequoia garden) is bright and busy; the shared scrim left the white
   headline hard to read across the pergola (2026-09-08 sweep). Heavier, About only. */
.hero-about .page-hero-scrim {
  background:
    linear-gradient(90deg, rgba(20, 20, 20, .68) 0%, rgba(20, 20, 20, .68) 70%, rgba(20, 20, 20, .18) 100%),
    linear-gradient(180deg, rgba(20, 20, 20, .6) 0%, rgba(20, 20, 20, 0) 13%);
}

.area-page-hero .page-hero-scrim {
  /* Shaped for the 420px area hero: a flat veil here crushed the photograph to a slab.
     Solved against the area imagery and measured text boxes (~46% of light survives). */
  background:
    linear-gradient(90deg, rgba(20, 20, 20, .54) 0%, rgba(20, 20, 20, .54) 88%, rgba(20, 20, 20, .18) 100%),
    linear-gradient(180deg, rgba(20, 20, 20, .40) 0%, rgba(20, 20, 20, 0) 20%);
}

.area-local-nav,
.answers-nav {
  background: var(--n-50);
  border-bottom: 1px solid var(--n-200);
  border-top: 1px solid var(--n-200);
  margin-inline: auto;
  position: sticky;
  top: 84px;
  width: var(--container);
  z-index: 90;
}

.area-local-nav {
  display: grid;
  grid-template-columns: minmax(150px, .32fr) minmax(0, 1.68fr);
}

.area-nav-intro {
  align-content: center;
  border-right: 1px solid var(--n-200);
  display: grid;
  padding: var(--s-3);
}

.area-nav-intro strong,
.area-nav-intro span,
.area-nav-links a,
.answers-nav a,
.area-nav-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
}

.area-nav-intro span { color: var(--n-600); }
.area-nav-links { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.area-nav-links a {
  align-items: center;
  border-right: 1px solid var(--n-200);
  display: grid;
  gap: var(--s-1);
  min-height: 72px;
  padding: var(--s-2);
}

.area-nav-links a:last-child { border-right: 0; }
.area-nav-index { color: var(--n-600); }
.area-nav-links a[aria-current="page"],
.answers-nav a[aria-current="page"] {
  background: var(--n-950);
  color: var(--n-50);
}
.area-nav-links a[aria-current="page"] .area-nav-index { color: var(--n-200); }

.area-section,
.section-pad {
  padding: var(--s-8) max(48px, calc((100% - 1240px) / 2));
  width: 100%;
}

.area-section + .area-section { border-top: 1px solid var(--n-200); }
.area-shell,
.answers-shell { background: var(--n-50); }
.area-section-faint { background: var(--n-100); }
.area-guide-directory .answer-copy,
.area-sources .answer-copy { margin-bottom: var(--s-5); }
.area-sources { background: var(--white); }
.area-market-lead .opportunity-grid,
.area-demographics .metric-grid { margin-top: var(--s-5); }
.metric-grid-demographic { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.answer-copy { font-size: var(--step-0); }
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--s-5);
}

.metric-grid article {
  border: 1px solid var(--n-200);
  margin: -1px 0 0 -1px;
  min-height: 170px;
  padding: var(--s-4);
}

.metric-grid span,
.data-caveat,
.scope-note {
  font-size: 13px;
  line-height: 1.65;
}

.data-caveat,
.scope-note {
  border-top: 1px solid var(--n-400);
  margin: var(--s-5) 0 0;
  padding-top: var(--s-3);
}

.data-caveat a,
.source-list a,
.answer-verify a { text-decoration: underline; text-underline-offset: .22em; }
.opportunity-grid,
.guide-detail-grid,
.guide-card-grid,
.tool-grid,
.lifestyle-grid,
.content-grid,
.topic-grid,
.answers-cross {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.opportunity-grid article,
.guide-detail-card,
.guide-card,
.tool-card,
.lifestyle-grid article,
.content-card,
.topic-card,
.answers-cross a {
  border: 1px solid var(--n-200);
  min-width: 0;
  padding: var(--s-5);
}

.opportunity-grid h3,
.guide-detail-card h3,
.tool-card h3,
.content-card h3,
.topic-card h3 { margin-bottom: var(--s-3); }
.opportunity-grid p:last-of-type,
.guide-detail-card p,
.tool-card p,
.content-card p,
.topic-card p { margin-bottom: 0; }
.opportunity-grid a,
.guide-card strong,
.tool-card strong,
.topic-card > strong,
.answers-cross span,
.answers-cross strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-top: var(--s-3);
  text-decoration: underline;
  text-underline-offset: .22em;
}

.guide-card { display: grid; }
.guide-card-step,
.topic-count {
  color: var(--n-600);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  margin-bottom: var(--s-2);
  text-transform: uppercase;
}

.guide-card > span:nth-child(2) { font-size: var(--step-1); font-weight: 500; }
.guide-card p { margin-block: var(--s-3) 0; }
.process-grid > article { min-width: 0; }

.process-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.process-grid > article > strong {
  display: block;
  font-size: 13px;
  margin-bottom: var(--s-2);
}
.process-grid > article p { margin: 0; }
.tool-card,
.community-card,
.topic-card,
.answers-cross a { display: block; }
.split-editorial {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
}

.source-list {
  border-top: 1px solid var(--n-200);
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
}

.source-list li { border-bottom: 1px solid var(--n-200); }
.source-list a {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 52px;
  padding-block: var(--s-2);
}

.faq-list,
.answer-block { border-top: 1px solid var(--n-200); }
.faq-list details,
.answer-block details { border-bottom: 1px solid var(--n-200); }
.faq-list summary,
.answer-block summary {
  font-size: var(--step-0);
  font-weight: 600;
  list-style-position: outside;
  min-height: 56px;
  padding: var(--s-3) var(--s-4);
}
.answer-block summary h3 { display: inline; font-size: inherit; font-weight: inherit; line-height: inherit; }

.faq-list details > p,
.answer-body { padding: 0 var(--s-4) var(--s-4); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.communities-section { padding-block: var(--s-8); }
.community-tier {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  margin-bottom: var(--s-3);
  text-transform: uppercase;
}

.community-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--s-6);
}

.community-grid:last-child { margin-bottom: 0; }
.community-card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.community-card > span {
  background: var(--n-950);
  color: var(--n-50);
  display: grid;
  padding: var(--s-4);
}
.community-card small { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.community-card strong { font-size: var(--step-1); font-weight: 500; }

.area-hub-hero h2,
.answers-hero h2 { color: var(--n-100); }
.answers-hero {
  height: auto;
  min-height: 420px;
}
.answers-hero .page-hero-content { min-height: 420px; }
.answers-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.answers-nav a,
.area-nav-label {
  align-items: center;
  border-right: 1px solid var(--n-200);
  display: inline-flex;
  min-height: 48px;
  padding: var(--s-2) var(--s-3);
}
.answers-nav > :nth-child(-n + 6) { border-bottom: 1px solid var(--n-200); }
.answers-nav > :nth-child(6n) { border-right: 0; }
.area-nav-label { color: var(--n-600); }
.answer-filter {
  align-items: center;
  display: grid;
  gap: var(--s-3);
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: var(--s-5);
}

.answer-filter input {
  background: var(--white);
  border: 1px solid var(--n-400);
  color: var(--n-950);
  min-height: 52px;
  padding: var(--s-3);
  width: 100%;
}

.answer-filter span { font-size: 13px; font-weight: 600; }
.answer-body { max-width: var(--readable); }
.answer-lead { font-size: var(--step-0); font-weight: 500; }
.answer-detail { color: var(--n-800); }
.answer-verify {
  border-left: 2px solid var(--n-400);
  display: grid;
  font-size: 13px;
  gap: var(--s-1);
  margin: var(--s-4) 0 0;
  padding-left: var(--s-3);
}
.answer-verify strong { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.answers-empty { border: 1px solid var(--n-400); padding: var(--s-4); }
.answers-cross a span { color: var(--n-600); margin-top: 0; }
.answers-cross a strong { font-size: var(--step-1); text-decoration: none; }

.site-footer {
  background: var(--n-950);
  border-top: 1px solid var(--n-800);
  color: var(--n-50);
  padding-block: var(--s-7) var(--s-5);
}

.footer-grid { display: grid; gap: var(--s-6); grid-template-columns: 1.15fr .75fr 1fr 1fr; }
.footer-column { display: flex; flex-direction: column; }
.footer-brand { gap: var(--s-3); }
.footer-brand span { font-size: 13px; }
.footer-label { color: var(--n-400); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; margin-bottom: var(--s-2); text-transform: uppercase; }
.footer-column a,
.footer-column span { font-size: 13px; line-height: 1.8; }
.footer-column a { align-items: center; display: inline-flex; min-height: 44px; }
.footer-column a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.footer-legal { border-top: 1px solid var(--n-800); margin-top: var(--s-6); padding-top: var(--s-4); }
.footer-legal p { color: var(--n-200); font-size: 12px; margin: 0; max-width: none; }

@media (max-width: 980px) {
  .primary-nav { display: none; }
  :root { --container: min(100% - 48px, 900px); }
  .site-header { grid-template-columns: 1fr auto; padding-inline: 24px; }
  .mobile-menu { display: block; }
  .mobile-menu > summary {
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: grid;
    height: 46px;
    justify-items: center;
    list-style: none;
    padding: 12px;
    position: relative;
    width: 46px;
    z-index: 202;
  }
  .mobile-menu > summary::-webkit-details-marker { display: none; }
  .mobile-menu > summary span { background: currentColor; display: block; height: 2px; width: 20px; }
  .mobile-menu[open] > summary { color: var(--white); position: fixed; right: 24px; top: 19px; }
  .mobile-menu[open] > summary span:first-child { position: absolute; transform: rotate(45deg); }
  .mobile-menu[open] > summary span:last-child { position: absolute; transform: rotate(-45deg); }
  .menu-panel {
    background: var(--n-950);
    color: var(--white);
    display: flex;
    flex-direction: column;
    inset: 0;
    min-height: 100dvh;
    overflow-y: auto;
    padding: 6.5rem 24px 2rem;
    position: fixed;
    z-index: 200;
  }
  .menu-panel nav { border-top: 1px solid var(--n-800); display: grid; }
  .menu-panel nav a { border-bottom: 1px solid var(--n-800); font-size: var(--step-1); font-weight: 500; min-height: 54px; padding-block: var(--s-2); }
  .menu-panel nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
  .menu-contact { display: grid; gap: var(--s-2); margin-top: var(--s-5); }
  .menu-contact a { align-items: center; display: inline-flex; font-size: 15px; min-height: 44px; }
  .question-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-grid, .editorial-grid, .contact-grid, .bio-grid { gap: var(--s-6); grid-template-columns: 1fr; }
  .portrait { max-width: 560px; }
  .record-group { gap: var(--s-4); grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-local-nav,
  .answers-nav { position: static; }
  .area-local-nav { grid-template-columns: 1fr; }
  .area-nav-intro { border-bottom: 1px solid var(--n-200); border-right: 0; }
  .area-nav-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .area-nav-links a:nth-child(3) { border-right: 0; }
  .area-nav-links a:nth-child(n + 4) { border-top: 1px solid var(--n-200); }
  .answers-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  :root {
    --container: calc(100% - 32px);
    --s-7: 3.5rem;
    --s-8: 4.75rem;
  }
  html { scroll-padding-top: 68px; }
  .site-header { height: 68px; padding-inline: 16px; }
  .hero-scrim,
  .page-hero-scrim,
  .hero-about .page-hero-scrim,
  .answers-hero .page-hero-scrim,
  .area-hub-hero .page-hero-scrim,
  .area-page-hero .page-hero-scrim {
    /* Must list the (0,2,0) short-hero selectors explicitly: specificity beats both
       source order and the media query, so a bare .page-hero-scrim never wins here. */
    background:
      linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, .54) 10%, rgba(20, 20, 20, .54) 100%),
      linear-gradient(180deg, rgba(20, 20, 20, .52) 0%, rgba(20, 20, 20, 0) 16%);
  }
  .mobile-menu[open] > summary { right: 16px; top: 11px; }
  .home-hero h1 { font-size: clamp(1.5rem, 6.7vw, 1.75rem); max-width: 17ch; }
  .hero-content { padding-block: 5.5rem 1.5rem; }
  .hero-lede { font-size: 17px; line-height: 1.55; margin-bottom: var(--s-3); }
  .hero-content .eyebrow { margin-bottom: var(--s-2); }
  .hero-trust { margin-top: var(--s-1); }
  .section-head { align-items: flex-start; flex-direction: column; }
  .question-card-grid { grid-template-columns: 1fr; }
  .question-card { min-height: 0; }
  .property-grid, .process-grid, .form-grid, .cta-grid, .theme-grid, .loyalty-quotes { grid-template-columns: 1fr; }
  .areas-home-grid { gap: var(--s-4); grid-template-columns: 1fr; }
  .process-card { min-height: 0; }
  .review-rail { grid-auto-columns: min(88vw, 100%); }
  .property-rail { grid-auto-columns: min(88vw, 100%); }
  /* Phones: the 44px steppers would crush flanked slides, so they move to a row
     below the rail and the slides keep the full width. */
  /* Two max-content tracks keep the pair adjacent; the 1fr track absorbs the rail's width. */
  .tile-rail-shell.has-controls,
  .review-rail-shell.has-controls,
  .property-rail-shell.has-controls { grid-template-columns: repeat(2, max-content) 1fr; justify-content: start; }
  .tile-rail-shell.has-controls .tile-rail,
  .review-rail-shell.has-controls .review-rail,
  .property-rail-shell.has-controls .property-rail { grid-column: 1 / -1; grid-row: 1; }
  .has-controls .tile-rail-step { grid-row: 2; margin-top: 0; }
  .review-card { min-height: 335px; padding: var(--s-4); }
  .page-hero,
  .page-hero-content { min-height: 390px; }
  .page-hero h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
  .page-hero-content { padding-bottom: var(--s-4); padding-top: 5.5rem; }
  .page-hero p { font-size: 15px; line-height: 1.5; }
  .path-entry { gap: var(--s-1); grid-template-columns: 1fr; }
  .recognition-stats { gap: var(--s-5); grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .area-nav-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-nav-links a:nth-child(3) { border-right: 1px solid var(--n-200); }
  .area-nav-links a:nth-child(even) { border-right: 0; }
  .area-nav-links a:nth-child(n + 3) { border-top: 1px solid var(--n-200); }
  .area-section,
  .section-pad { padding: var(--s-8) 16px; }
  .area-section-head { align-items: flex-start; flex-direction: column; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opportunity-grid,
  .guide-detail-grid,
  .guide-card-grid,
  .tool-grid,
  .lifestyle-grid,
  .content-grid,
  .topic-grid,
  .answers-cross,
  .community-grid,
  .split-editorial,
  .process-grid-four { grid-template-columns: 1fr; }
  .cta-actions { align-items: stretch; flex-direction: column; }
  .answer-filter { grid-template-columns: 1fr; }
  .answers-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .answers-nav .area-nav-label { grid-column: 1 / -1; }
  .answers-nav a { border-bottom: 1px solid var(--n-200); }
  .answers-nav a:nth-child(odd) { border-right: 0; }
  .answers-hero,
  .answers-hero .page-hero-content { min-height: 520px; }
}

@media (prefers-reduced-motion: no-preference) {
  .button,
  .text-link,
  .tile-rail-step,
  .topic-card,
  .answers-cross a,
  .guide-card,
  .question-card,
  .primary-nav a::after { transition: background .2s ease, color .2s ease, border-color .2s ease, width .2s ease; }
  .property-media img,
  .community-card img,
  .area-tile img { transition: transform .45s ease; }
  .property-card:hover .property-media img { transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header { transition: none; }
}