/* Sonoran Property Co. demo stylesheet (spec 20, v2-demo-property-management;
   build rounds 1 and 2: the ADOBE token layer + the chrome + the Home
   bands, then the six subpage devices).
   Standalone, scoped css for this demo alone: every selector is .spc-
   prefixed. The documented machine-scope exceptions are exactly three
   kinds: the two @font-face rules, the one token block on #demo-main
   (the demo's own serving scope; the one sanctioned machine root,
   which also repaints the machinery body paint for this light sheet,
   the fleet precedent), and the one encoded-chevron svg data uri on
   .spc-select (it carries the ink byte in encoded form only; the
   census's allowed-literal note covers it, documented).

   Machinery contract (demo-base.css, demo-notice.css, layouts.demo)
   is never redefined here: the machinery banner-clearance token is
   consumed at EXACTLY ONE var() site, the demo-owned --spc-clear
   bridge on the .spc-page wrapper; the topbar pays the fixed banner
   clearance, and the sticky nav pins top 0 with its own --spc-clear
   head after the banner clears (the 15/3 medical pattern). The
   machinery favicon pair, the demo notice, the skip link, and the
   consent pair ride the machinery chain untouched. No imports
   anywhere; the sibling demo namespaces and the app bundles are
   absent by construction.

   Faces: two font-face rules live ONLY in this file, self-hosted
   beside their OFL licenses under /demos/property-management/fonts/,
   display swap: DM Serif Display weight 400 ONLY (the family's single
   upright face; the display voice renders through SIZE, never a
   synthetic bold), and Plus Jakarta Sans variable 200 800 (400 body,
   500 nav and captions, 600 buttons, chips and overlines, 700 price
   lines and names). No fixed-pitch face anywhere in the stack.

   Palette law (spec 20, the ADOBE register per plan 01): the nine
   color tokens are the only color literals in the sheet (eight hex
   bytes + the scrim triplet + the inverse line-ink rgba form, all
   inside the token block); light text rides the sand token through
   the var (the token block holds the sheet's single light literal);
   dark washes and the hero veil ride the one neutral scrim triplet
   and are NEVER accent tinted; overlay text rides the sand token at
   full opacity; terracotta paints fills, borders and decorations
   only, it never carries text; the on-fill text byte everywhere
   terracotta appears is ink-deep (5.04:1, the spec 19 ink-deep
   precedent). Elevation is forbidden on the whole sheet: shadows
   never appear; depth comes from the collage overlap + its sand mat
   edge only.

   Media conditions, the only four in this file: 48rem (the chrome
    flip, the band title scale, the search rail row, the grids, the
    board columns, the fee no-lines, the proud figures + their column
    border drop, the mission split, the values grid, the buildings
    grid, the areas page two-up with the spanning reset), 56rem (the
    way split + collage overlap, the metrics split, the approach
    columns, the maintenance row split, the proud display scale),
    64rem (the hero scale, the four-column grids, the band rhythm,
    the numerals, the plate scale, the fee figure, the nudge line,
    the areas page five-up) and the reduced-motion pair at the end.
    Mobile-first, min-width queries only; the machinery's own 768px
   breakpoint never appears. Rotation rides turn units (0.5turn),
   never the banned degree word. */

@font-face {
  font-family: "DM Serif Display";
  src: url("/demos/property-management/fonts/dmdisplay-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/demos/property-management/fonts/jakarta-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* The ADOBE tokens (plan 01's verbatim block): the eight spec-locked
   bytes + the scrim triplet + the inverse line-ink form, one block,
   the sheet's only color literals. */
#demo-main {
  --spc-sand: #e9dcc0;       /* the page base; ALSO the light text byte: text on ink fields, the scrim overlay copy, footer text ride this var (the sheet's single light literal) */
  --spc-tint: #e0d3b2;       /* statement-band panels, chips, the two selects, row-hover wash: the deeper-sand fill */
  --spc-line: #bcaa84;       /* hairlines: tile borders, board dividers, rules; decorative only (1.68:1 on sand, never text on sand); ALSO the muted line on ink fields (6.93:1) */
  --spc-ink: #2a211a;        /* deep warm charcoal: headings, body, nav, board rows, the ink fields (footer, big-number band, hero backdrop washes) */
  --spc-ink-deep: #1e1006;   /* the on-fill text byte: text and icons on terracotta (5.04:1; the spec 19 ink-deep precedent) */
  --spc-terracotta: #c2704a; /* accent FILL only: buttons, the ASU chip, section dots, underlines, collage mat edge accents; NEVER carries text (2.71:1 on sand would fail even the 3:1 large floor) */
  --spc-clay: #8a3f22;       /* accent TEXT byte: the coordinate overlines, link hover, stat labels, city overlines on tiles (5.49:1 on sand, 5.02:1 on tint) */
  --spc-hint: #67573e;       /* muted copy: meta lines, street lines, quote attributions (5.14:1 on sand, 4.70:1 on tint) */
  --spc-scrim: 26, 22, 18;   /* the ink triplet; hero scrim stops + washes + shadows derive from it; NEVER accent tinted */
  --spc-line-ink: rgba(233, 220, 192, 0.22); /* the inverse hairline + rules on ink fields (footer, board headers, numeral band, quote rows); used inside ink fields ONLY */
  color-scheme: light;
  background: var(--spc-sand);
}

/* The page wrapper: the ONE --demo-notice-space var() site (the
   --spc-clear bridge) + the sheet's type + edge tokens + the relative
   sticky-scope root. */
.spc-page {
  --spc-clear: var(--demo-notice-space);
  --spc-display: "DM Serif Display", Georgia, serif;
  --spc-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --spc-radius: 2px;
  position: relative;
  font-family: var(--spc-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--spc-ink);
}

/* The demo-owned groups: border-box, links, the hidden blanket, and
   the focus rings (dark fields invert to sand). The paragraph and
   heading resets ride :where() so they carry ZERO extra specificity:
   every single-class device that declares its own margin or size ties
   the reset and wins by source order (the specificity-leak repair:
   with the old (0,1,1) resets, every single-class margin byte in the
   sheet painted the generic 1rem instead of its own value). */
.spc-page,
.spc-page *,
.spc-page *::before,
.spc-page *::after {
  box-sizing: border-box;
}
.spc-page a {
  color: inherit;
  text-decoration: none;
}
.spc-page a:not([class]) {
  color: var(--spc-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.spc-page [hidden] {
  display: none !important;
}
.spc-page :where(p) {
  margin: 0 0 1rem;
}
#demo-main :focus-visible {
  outline: 2px solid var(--spc-clay);
  outline-offset: 2px;
}
.spc-band--ink :focus-visible,
.spc-footer :focus-visible {
  outline-color: var(--spc-sand);
}

/* Headings: DM Serif Display 400 roman (one weight exists; size
   carries the voice). Inverted color on the ink fields. */
.spc-page :where(h1, h2, h3) {
  margin: 0 0 1rem;
  font-family: var(--spc-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--spc-ink);
}
.spc-band--ink :is(h2, h3),
.spc-footer :is(h2, h3) {
  color: var(--spc-sand);
}
/* The band title scale (plan 01 section 5): every h2 no device
   overrides (the statement, contact, way, approach, residents, and
   inner-page leads) rides the registered pair at the 48rem flip. */
.spc-page :where(h2) {
  font-size: 1.75rem;
  line-height: 1.15;
}

/* The coordinate overline voice: sentence-case bytes rendered
   uppercase + tracking by the class (never typed caps in markup). */
.spc-overline {
  margin: 0 0 1rem;
  font: 600 0.75rem/1.4 var(--spc-body);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--spc-clay);
}
.spc-overline--light,
.spc-band--ink .spc-overline {
  color: var(--spc-sand);
}

/* ------------------------------------------------------------------
   THE STICKY HEADER GROUP (plan 02): the topbar pays the banner's
   height at rest; the nav pins at top 0 only after the topbar rides
   away; the pinned nav's clearance head paints sand UNDER the opaque
   banner, so no nav content ever renders inside the banner's band.
   Sticky ancestry guards: no overflow rule exists on html, body,
   #demo-main, .spc-page, or any .spc-section (the demo needs none:
    the collage and every tile fit the shell, plan 01 section 8).
   ------------------------------------------------------------------ */
.spc-topbar {
  padding-top: var(--spc-clear);
  background: var(--spc-sand);
}
.spc-topbar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding-block: 8px;
}
.spc-topbar :is(p, span, a) {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--spc-hint);
}
.spc-page .spc-topbar a {
  color: var(--spc-clay);
  font-weight: 600;
  text-decoration: none;
}
.spc-page .spc-topbar a:hover {
  text-decoration: underline;
}
.spc-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: var(--spc-clear);
  background: var(--spc-sand);
  border-bottom: 1px solid var(--spc-line);
}
.spc-nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}
.spc-brand {
  margin-right: auto;
  font-family: var(--spc-display);
  /* Mobile carries the 1rem one-line wordmark; the 48rem nav restores
     the 1.25rem row (the brand never wraps: the two-line wordmark was
     the fleet's spec-19 pill lesson in brand form). */
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--spc-ink);
}
.spc-brand-mark {
  display: block;
}
.spc-nav-links {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.spc-page .spc-nav-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.875rem;
  font: 600 0.9375rem/1.2 var(--spc-body);
  color: var(--spc-ink);
  text-decoration: none;
}
.spc-page .spc-nav-links a:hover {
  color: var(--spc-clay);
}
.spc-nav-links a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--spc-terracotta);
}
.spc-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--spc-ink);
  cursor: pointer;
}
.spc-nav-toggle[hidden] {
  display: none !important;
}
.spc-nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 0.5rem clamp(1.25rem, 4vw, 2.5rem) 1rem;
  background: var(--spc-sand);
  border-top: 1px solid var(--spc-line);
}
.spc-nav-panel[hidden] {
  display: none !important;
}
.spc-page .spc-nav-panel a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 0.375rem;
  font: 600 0.9375rem/1.2 var(--spc-body);
  color: var(--spc-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--spc-line);
}
.spc-nav-panel a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--spc-terracotta);
}
.spc-nav-panel .spc-btn {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
}
@media (min-width: 48rem) {
  .spc-brand {
    font-size: 1.25rem;
  }
  .spc-nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: 0.75rem;
  }
  .spc-nav-toggle {
    display: none;
  }
  .spc-nav-panel {
    display: none;
  }
}

/* ------------------------------------------------------------------
   BUTTONS + TEXT LINKS (plan 01 section 7, the fix-round device law):
   the button device is one shared block: BOTH variants compose the
   complete device (inline-flex, centered, min-height 44px, padded,
   radius, nowrap) from the same bytes, so .spc-btn-outline is a
   COMPLETE STANDALONE class (the round-2 sheets used it bare and
   painted an inline uncentered box without it). Terracotta fill
   carries ink-deep text (5.04:1); the outline variant rides ink text
   on transparent with the line border, hover clay (verified pairs on
   sand AND on tint). The hover swaps the border byte only (the fill
   never changes: the darker clay byte computes BELOW the floor and
   gains no text). Zero shadows, zero lift. */
.spc-btn, .spc-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: var(--spc-radius);
  font: 600 1rem/1.2 var(--spc-body);
  white-space: nowrap;
}
.spc-btn {
  background: var(--spc-terracotta);
  color: var(--spc-ink-deep);
  border: 1px solid var(--spc-terracotta);
}
.spc-btn:hover {
  border-color: var(--spc-ink-deep);
}
.spc-btn-outline {
  background: transparent;
  color: var(--spc-ink);
  border: 1px solid var(--spc-line);
}
.spc-btn-outline:hover {
  border-color: var(--spc-clay);
  color: var(--spc-clay);
}
.spc-textlink {
  color: var(--spc-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.spc-textlink:hover {
  color: var(--spc-clay);
}

/* ------------------------------------------------------------------
   THE SHELL + RHYTHM (plan 01 section 6): 71rem shell; sections carry
   the SYMMETRIC block padding (the fix-round junction law: every
   junction holds real breathing on BOTH sides, the sand-side figure
   at every edge the same on the way in and the way out: 2.75rem
   mobile, 4.5rem desktop, one clamp for all). The tinted and ink
   bands keep their own deep padding (4rem mobile, 5.5rem desktop;
   the statement tint rides the 4.5rem figure that MATCHES the
   section clamp's cap, so the tint edge lands on the same rhythm
   unit as the sand around it); no junction between a section and any
   band ever meets at zero again. */
.spc-shell {
  max-width: 71rem;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}
.spc-section {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
.spc-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 1.75rem;
}
.spc-section-head h2 {
  margin: 0;
}
@media (min-width: 48rem) {
  .spc-page :where(h2) {
    font-size: 2.25rem;
    line-height: 1.12;
  }
}

/* ------------------------------------------------------------------
   HERO (plan 03 section 1): full-bleed photo band, the demo's ONLY
   text-over-image surface. The img rides absolute cover under the
   scrim; the scrim is plan 01's verbatim stop ramp; the veil is the
   plan-sanctioned wash derived from the scrim triplet, riding the
   overlay's own background: the copy block's rows all sit where the
   combined veil + scrim floor holds every small-text pair well above
   4.5:1 on a white worst pixel. Copy anchors the bottom, full
   opacity sand. */
.spc-hero {
  position: relative;
  height: min(78vh, 760px);
  min-height: 520px;
}
.spc-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.spc-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(var(--spc-scrim), 0) 0%,
    rgba(var(--spc-scrim), 0.55) 40%,
    rgba(var(--spc-scrim), 0.72) 62%,
    rgba(var(--spc-scrim), 0.9) 100%);
}
.spc-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(to bottom,
    rgba(var(--spc-scrim), 0) 0%,
    rgba(var(--spc-scrim), 0.5) 30%,
    rgba(var(--spc-scrim), 0.7) 100%);
}
.spc-hero-copy {
  max-width: 34rem;
  padding-block: 2rem 40px;
  color: var(--spc-sand);
}
.spc-hero-copy h1 {
  margin: 0 0 0.75rem;
  /* The overlay h1 rides the sand voice: the page headings rule
     paints ink by default, and ink on the twilight photo violates the
     text-over-image contract (full-opacity light text only). */
  color: var(--spc-sand);
  font-size: 2.5rem;
  line-height: 1.08;
  letter-spacing: 0;
}
.spc-hero-copy .spc-overline {
  margin-bottom: 0.875rem;
}
.spc-hero-promise {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--spc-sand);
}
.spc-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.spc-hero-cta .spc-btn {
  min-height: 48px;
}
.spc-hero-link {
  color: var(--spc-sand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--spc-line-ink);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}
.spc-hero-link:hover {
  text-decoration-color: var(--spc-sand);
}
@media (min-width: 64rem) {
  .spc-hero {
    min-height: 640px;
  }
  .spc-hero-copy h1 {
    font-size: 3.75rem;
    line-height: 1.05;
  }
}

/* The ticker device (plan 02 section 4): the aria-hidden display line
   UNDER the static h1; only the word opacity moves. */
.spc-ticker {
  margin: 0 0 1rem;
  font: 500 1.0625rem/1.4 var(--spc-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--spc-sand);
}
.spc-ticker-word {
  display: inline-block;
  margin-left: 0.4em;
  transition: opacity 0.22s ease;
}
.spc-ticker-word.spc-ticker-out {
  opacity: 0;
}

/* ------------------------------------------------------------------
   SEARCH BAND (plan 03 section 2): the honest deep link. TWO native
   nameless selects, the demo's ONLY form-associated elements: no
   form, no input, no submit anywhere (the census reconciliation,
   plan 03 section 2); the Explore anchor ignores both selects and
   opens the board deep link. Styled tinted controls, never a raw
   white control; 44px targets. */
.spc-search {
  padding-block: 2.5rem;
  border-block: 1px solid var(--spc-line);
}
.spc-search-rail {
  display: grid;
  gap: 10px 16px;
  align-items: center;
}
.spc-search-label {
  font: 600 0.9375rem/1.2 var(--spc-body);
  color: var(--spc-ink);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.spc-search-rail .spc-btn {
  min-height: 48px;
}
.spc-search-note {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  color: var(--spc-hint);
}
.spc-select {
  appearance: none;
  min-height: 44px;
  padding: 10px 40px 10px 14px;
  background: var(--spc-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%232a211a' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--spc-line);
  border-radius: var(--spc-radius);
  color: var(--spc-ink);
  font: 600 0.9375rem/1.2 var(--spc-body);
}
@media (min-width: 48rem) {
  .spc-search-rail {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  }
}

/* ------------------------------------------------------------------
   LISTING + AREA TILES (plan 03 sections 3 and 6): hairline flat
   tiles, caption BELOW the photo, whole tile is one anchor; hover
   moves the border byte + the name underline (no transform, no
   shadow, no lift). */
.spc-grid {
  display: grid;
  gap: 1.5rem;
}
.spc-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--spc-sand);
  border: 1px solid var(--spc-line);
  border-radius: var(--spc-radius);
}
.spc-tile:hover {
  border-color: var(--spc-clay);
}
.spc-tile:hover .spc-tile-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.spc-tile-photo {
  margin: 0;
  aspect-ratio: 3 / 2;
}
.spc-tile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.spc-tile-body {
  padding: 14px 16px 16px;
  display: grid;
  gap: 7px;
}
.spc-tile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.spc-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  background: var(--spc-tint);
  color: var(--spc-ink);
  border-radius: var(--spc-radius);
  font: 600 0.8125rem/1.2 var(--spc-body);
}
.spc-chip--accent {
  background: var(--spc-terracotta);
  color: var(--spc-ink-deep);
}
.spc-tile-city {
  margin: 0;
}
.spc-tile-name {
  margin: 0;
  font-size: 1.3125rem;
  line-height: 1.25;
}
.spc-tile-street {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--spc-hint);
}
.spc-tile-price {
  margin: 0;
  font: 700 1.0625rem/1.4 var(--spc-body);
  color: var(--spc-ink);
}
.spc-tile-avail {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--spc-hint);
}
@media (min-width: 48rem) {
  .spc-grid--listings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .spc-grid--areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .spc-grid--listings {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------
   VALUE PROPS (plan 03 section 4): full-width rows, NO boxed cards;
   the terracotta underline rule is the only accent mark. */
.spc-value-props {
  display: grid;
  gap: 2rem;
}
.spc-prop-rule {
  height: 2px;
  width: 40px;
  margin: 0.75rem 0;
  background: var(--spc-terracotta);
}
.spc-prop p {
  margin: 0;
  color: var(--spc-hint);
}
@media (min-width: 48rem) {
  .spc-value-props {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .spc-value-props {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3rem;
  }
}

/* ------------------------------------------------------------------
   BANDS (plan 03 sections 5 and 7): the tinted statement panel and
   the ink fields (the renewal stat + residents band, the contact
   band). The tone shift IS the tint band's edge (no hairline); the
   ink fields' hairlines ride the inverse line-ink token. */
.spc-band {
  padding-block: 4rem;
}
.spc-band--tint {
  background: var(--spc-tint);
  padding-block: 4.5rem; /* the statement panel's own figure (plan 03 section 5) */
}
.spc-band--ink {
  background: var(--spc-ink);
  color: var(--spc-sand);
}
.spc-band p {
  max-width: 44rem;
}
/* The CTA row grammar: primary pill + secondary outline on ONE flex
   line at desktop widths (wrap is the mobile relief only); both
   devices paint from the shared 44px button block, align-items
   center keeps their vertical centers locked. */
.spc-band-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 1.5rem;
}
@media (min-width: 64rem) {
  .spc-band {
    padding-block: 5.5rem;
  }
}

/* The renewal stat + residents rows (plan 03 section 7): the big
   serif numeral + label column, the six-quote list with line-ink
   hairlines; no platform marks, no stars, first name + initial. */
.spc-metric {
  align-self: center;
}
.spc-stat-number {
  margin: 0;
  font-family: var(--spc-display);
  font-size: 3rem;
  line-height: 1.05;
  color: var(--spc-sand);
}
.spc-stat-number span {
  font-size: 0.45em;
}
.spc-stat-label {
  margin: 0.5rem 0 0;
  font: 600 0.9375rem/1.5 var(--spc-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spc-sand);
}
.spc-stat-sub {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--spc-line);
}
.spc-residents h2 {
  margin: 0 0 1.25rem;
}
.spc-quotes {
  margin: 0;
  padding: 0;
  list-style: none;
}
.spc-quotes li + li {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--spc-line-ink);
}
.spc-quote-text {
  margin: 0;
  font-family: var(--spc-display);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--spc-sand);
}
.spc-quote-src {
  margin: 6px 0 0;
  font-size: 0.9375rem;
  color: var(--spc-line);
}
@media (min-width: 56rem) {
  .spc-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
  }
  .spc-stat-number {
    font-size: 4.75rem;
  }
}

/* ------------------------------------------------------------------
   THE SONORAN WAY + THE TWO-OVERLAP COLLAGE (plan 03 section 8): the
   one sanctioned overlap, desktop only; the mat + outline separate
   the photos at the overlap; depth rides the overlap, never a
   shadow; mobile stacks back first, front second. */
.spc-collage {
  display: grid;
  gap: 12px;
  margin-top: 2rem;
}
.spc-collage figure {
  margin: 0;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--spc-line);
  border-radius: var(--spc-radius);
}
.spc-collage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 56rem) {
  .spc-way-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 3rem);
    align-items: center;
  }
  .spc-collage {
    position: relative;
    /* The definite 560px box (the plan-03 geometry: with both figures
       absolute, the grid item's auto width collapses to zero, so the
       pinned 200x50 overlap needs the declared width; without it the
       front figure painted past the shell edge). */
    width: 560px;
    max-width: 100%;
    min-height: 520px;
    justify-self: end;
    margin-top: 0;
  }
  .spc-collage .spc-collage-back {
    position: absolute;
    top: 0;
    right: 0;
    width: 360px;
    height: 270px;
    border: 1px solid var(--spc-line);
    border-radius: var(--spc-radius);
  }
  .spc-collage .spc-collage-back .spc-collage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .spc-collage .spc-collage-front {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 400px;
    height: 300px;
    z-index: 2;
    border: 8px solid var(--spc-sand);
    border-radius: var(--spc-radius);
    outline: 1px solid var(--spc-line);
    outline-offset: -9px;
  }
  .spc-collage .spc-collage-front .spc-collage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ------------------------------------------------------------------
   OUR APPROACH (plan 03 section 9): three hairline-top rule rows. */
.spc-rule-rows {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.75rem;
}
.spc-rule-row {
  border-top: 1px solid var(--spc-line);
  padding-top: 1.25rem;
}
.spc-rule-row h3 {
  margin: 0 0 0.375rem;
  font-size: 1.25rem;
  line-height: 1.3;
}
.spc-rule-row p {
  margin: 0;
  color: var(--spc-hint);
}
.spc-approach-cta {
  margin-top: 1.5rem;
}
@media (min-width: 56rem) {
  .spc-rule-rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

/* ------------------------------------------------------------------
   CONTACT BAND (plan 03 section 10): CTAs only, zero form elements;
   label rows + value links over line-ink hairlines; hours lines
   below. */
.spc-contact-rows {
  margin-top: 1.5rem;
  display: grid;
}
.spc-contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  min-height: 44px;
  align-content: center;
  border-top: 1px solid var(--spc-line-ink);
  padding-block: 0.5rem;
  margin: 0;
}
.spc-contact-label {
  font: 600 0.9375rem/1.2 var(--spc-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spc-line);
  min-width: 6rem;
}
.spc-page .spc-contact-row a {
  color: var(--spc-sand);
  font: 400 1rem/1.4 var(--spc-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--spc-line-ink);
}
.spc-page .spc-contact-row a:hover {
  text-decoration-color: var(--spc-sand);
}
.spc-contact-hours {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--spc-line);
}

/* ------------------------------------------------------------------
   FOOTER (plan 02 section 5): the ink field; sand text; line-ink
   hairlines; the five-city line; the EHO text line; the literal
   2026 copy line. No social icons, no badges, no fax, no PO box. */
.spc-footer {
  background: var(--spc-ink);
  color: var(--spc-sand);
  padding-block: 3.5rem 1.5rem;
}
.spc-footer-grid {
  display: grid;
  gap: 2rem 3rem;
}
.spc-footer-brandline {
  margin: 0 0 0.25rem;
  font-family: var(--spc-display);
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--spc-sand);
}
.spc-footer-city {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--spc-line);
}
.spc-footer-address {
  margin: 0.75rem 0 0;
  font-style: normal;
  font-size: 0.9375rem;
}
.spc-footer-contact {
  margin: 0.5rem 0 0;
}
.spc-footer-address p,
.spc-footer-contact p,
.spc-footer-office p {
  margin: 0 0 0.5rem;
}
.spc-page .spc-footer a {
  color: var(--spc-sand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--spc-line-ink);
}
.spc-page .spc-footer a:hover {
  text-decoration-color: var(--spc-sand);
}
.spc-footer h3 {
  margin: 0 0 0.75rem;
  font: 600 0.75rem/1.4 var(--spc-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--spc-line);
}
.spc-footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.spc-footer-list li + li {
  margin-top: 0.5rem;
}
.spc-footer-fair {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--spc-line-ink);
  font-size: 0.8125rem;
}
.spc-footer-copy {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
}
@media (min-width: 48rem) {
  .spc-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .spc-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The anchor landings: the covered strip (banner + pinned head +
   bar) rides every fragment target, the medical formula shape; the
   board section rides the same formula through the anchor modifier. */
.spc-contact {
  scroll-margin-top: calc(var(--spc-clear) + 76px);
}
.spc-section--anchor {
  scroll-margin-top: calc(var(--spc-clear) + 76px);
}

/* ------------------------------------------------------------------
   THIN HERO PLATE (plan 04): the six subpage headers under the
   chrome's own hairline (the band edge needs no border here): the
   overline, the page h1, the muted line; the areas header adds the
   see-the-homes anchor row; the about statement hero adds the
   display sub-line under its h1. No photo, no scrim. */
.spc-plate {
  padding-block: 2.75rem 2.5rem;
}
.spc-plate .spc-overline {
  margin-bottom: 0.875rem;
}
.spc-plate h1 {
  margin: 0 0 0.625rem;
  font-size: 2.25rem;
  line-height: 1.1;
}
.spc-plate-line {
  margin: 0;
  max-width: 40rem;
  font-size: 1.0625rem;
  color: var(--spc-hint);
}
.spc-plate-way {
  margin: 1.5rem 0 0.625rem;
  font-size: 2rem;
}
.spc-plate-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.5rem;
}
@media (min-width: 64rem) {
  .spc-plate {
    padding-block: 4.5rem 3.5rem;
  }
  .spc-plate h1 {
    font-size: 3.25rem;
  }
  .spc-plate-way {
    font-size: 2.625rem;
  }
}

/* ------------------------------------------------------------------
   THE AVAILABILITY BOARD (plan 04 section 1; rentals): four photo-less
   flat rows plus the standing bigger row, hairline separated (row
   border-top from row 2; the five-row block carries top + bottom).
   The head is a real button filling the row: the name row voice rides
   the display face at plain 400 (the size carries it, never a
   synthetic bold). The panel is the only show target: the explicit
   hidden companion pins the paint (visibility law), and the open row
   class rides the tint wash + the chevron flip (scaleY, never a
   degree value). */
.spc-board {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--spc-line);
  border-bottom: 1px solid var(--spc-line);
}
.spc-board-row + .spc-board-row {
  border-top: 1px solid var(--spc-line);
}
.spc-board-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 14px;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 12px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--spc-ink);
}
.spc-board-head:hover {
  background: var(--spc-tint);
}
.spc-board-name {
  grid-row: 1;
  grid-column: 1;
  font-family: var(--spc-display);
  font-weight: 400;
  font-size: 1.3125rem;
  line-height: 1.25;
}
.spc-board-chev {
  grid-row: 1 / span 3;
  grid-column: 2;
  display: inline-flex;
  color: var(--spc-clay);
}
.spc-board-city {
  grid-row: 2;
  grid-column: 1;
  font-size: 0.875rem;
  color: var(--spc-hint);
}
.spc-board-price {
  grid-row: 3;
  grid-column: 1;
  font: 700 0.9375rem/1.5 var(--spc-body);
}
.spc-board-beds,
.spc-board-avail {
  display: none;
}
.spc-board-panel {
  padding-bottom: 1.25rem;
}
.spc-board-panel[hidden] {
  display: none;
}
.spc-board-detail {
  margin: 0 0 1.25rem;
}
.spc-board-detail > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  padding: 8px 0;
  border-top: 1px solid var(--spc-line);
}
.spc-board-detail dt {
  min-width: 5.5rem;
  font: 600 0.75rem/1.7 var(--spc-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spc-clay);
}
.spc-board-detail dd {
  margin: 0;
  flex: 1 1 16rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.spc-board-row--open {
  background: var(--spc-tint);
}
.spc-board-row--open .spc-board-chev {
  transform: scaleY(-1);
}
.spc-board-row--fixed {
  padding: 1rem 0;
}
.spc-board-bigger {
  margin: 0;
  font-family: var(--spc-display);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--spc-hint);
}
@media (min-width: 48rem) {
  .spc-board-head {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.55fr) minmax(0, 0.7fr) minmax(0, 0.8fr) minmax(0, 1fr) auto;
    padding: 0;
  }
  .spc-board-name {
    grid-row: 1;
    grid-column: 1;
  }
  .spc-board-city {
    grid-row: 1;
    grid-column: 2;
  }
  .spc-board-beds,
  .spc-board-avail {
    display: block;
  }
  .spc-board-beds {
    grid-row: 1;
    grid-column: 3;
  }
  .spc-board-price {
    grid-row: 1;
    grid-column: 4;
  }
  .spc-board-avail {
    grid-row: 1;
    grid-column: 5;
  }
  .spc-board-chev {
    grid-row: 1;
    grid-column: 6;
  }
}

/* The tours nudge (rentals): the ink field; the phone line rides the
   display voice with the line-ink underline; the CTA row follows. */
.spc-nudge-line {
  margin: 0 0 0.25rem;
  font-family: var(--spc-display);
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--spc-sand);
}
.spc-page .spc-nudge-line a {
  color: var(--spc-sand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--spc-line-ink);
}
.spc-page .spc-nudge-line a:hover {
  text-decoration-color: var(--spc-sand);
}
@media (min-width: 64rem) {
  .spc-nudge-line {
    font-size: 1.875rem;
  }
}

/* ------------------------------------------------------------------
   OWNER SERVICES (plan 04 section 2): the fee band's big serif figure
   and its line, the three no-lines as the plain hairline list (three
   across at the chrome flip), the two statement paragraphs, the
   guarantee rows (generic), the maintenance split row (the page's one
   photo, text first, picture beside it from 56rem), the three
   text-only people rows, and the license pair. */
.spc-fee-figure {
  margin: 0;
  font-family: var(--spc-display);
  font-size: 4.5rem;
  line-height: 1;
}
.spc-fee-line {
  margin: 0.5rem 0 1.75rem;
  font-size: 1.0625rem;
}
.spc-nolines {
  display: grid;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.spc-nolines li {
  border-top: 1px solid var(--spc-line);
  padding: 0.625rem 0;
  font: 600 0.9375rem/1.5 var(--spc-body);
}
.spc-fee-statement {
  margin: 0 0 0.625rem;
  font-size: 1rem;
}
@media (min-width: 48rem) {
  .spc-nolines {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2rem;
  }
}
@media (min-width: 64rem) {
  .spc-fee-figure {
    font-size: 5rem;
  }
}
.spc-maint-grid {
  display: grid;
  gap: 1.5rem;
}
.spc-maint-copy p {
  max-width: 40rem;
}
.spc-maint-photo {
  margin: 0;
  border: 1px solid var(--spc-line);
  border-radius: var(--spc-radius);
}
.spc-maint-photo img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 56rem) {
  .spc-maint-grid {
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2rem, 5vw, 3rem);
    align-items: center;
  }
}
.spc-people {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.75rem;
}
.spc-person + .spc-person {
  border-top: 1px solid var(--spc-line);
  padding-top: 1.75rem;
}
.spc-person h3 {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
}
.spc-person-role {
  margin: 0 0 0.625rem;
  font: 600 0.75rem/1.6 var(--spc-body);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--spc-clay);
}
.spc-person-line {
  margin: 0;
  max-width: 44rem;
  color: var(--spc-hint);
}
.spc-license-lead {
  margin: 0 0 0.5rem;
  font-family: var(--spc-display);
  font-size: 1.375rem;
  line-height: 1.4;
}
.spc-license-note {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--spc-hint);
}

/* ------------------------------------------------------------------
   APPLY (plan 04 section 3): the standards rows (the leading serif
   numerals ride the clay text byte), the three step rows, and the
   four real disclosure elements: the summary is the full-row control,
   the chevron flips with the open attribute, and the detail copy
   rides the muted token under it. Native mechanics only: no script
   on this page at all. */
.spc-std-rows {
  max-width: 44rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.spc-std-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.875rem 0;
}
.spc-std-row + .spc-std-row {
  border-top: 1px solid var(--spc-line);
}
.spc-std-num {
  font-family: var(--spc-display);
  font-size: 1.375rem;
  line-height: 1;
  color: var(--spc-clay);
  min-width: 1.25rem;
}
.spc-std-row p {
  margin: 0;
  font-size: 1rem;
}
.spc-step-rows {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.75rem;
}
.spc-step-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0 1rem;
  border-top: 1px solid var(--spc-line);
  padding-top: 1.25rem;
}
.spc-step-num {
  font-family: var(--spc-display);
  font-size: 1.625rem;
  line-height: 1.1;
  color: var(--spc-clay);
}
.spc-step-body {
  max-width: 40rem;
}
.spc-step-body h3 {
  margin: 0 0 0.375rem;
  font-size: 1.25rem;
}
.spc-step-body p {
  margin: 0;
  color: var(--spc-hint);
}
.spc-disclosure {
  border-top: 1px solid var(--spc-line);
}
.spc-disclosure:last-of-type {
  border-bottom: 1px solid var(--spc-line);
}
.spc-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding-block: 0.625rem;
  font: 600 1.0625rem/1.4 var(--spc-body);
  color: var(--spc-ink);
  cursor: pointer;
  list-style: none;
}
.spc-disclosure summary::-webkit-details-marker {
  display: none;
}
.spc-disclosure summary:hover {
  color: var(--spc-clay);
}
.spc-disclosure-chev {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--spc-clay);
}
.spc-disclosure[open] .spc-disclosure-chev {
  transform: scaleY(-1);
}
.spc-disclosure > p {
  margin: 0;
  padding: 0.25rem 0 1rem;
  max-width: 40rem;
  color: var(--spc-hint);
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------------
   AREAS PAGE GRID (plan 04 section 4): the same flat tile device as
   Home's area tiles; one column above the flip, two below the 64rem
   band where the fifth tile spans the full row, five columns at the
   wide flip where the span reset keeps the single row. */
@media (min-width: 48rem) {
  .spc-grid--areas--page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .spc-grid--areas--page > :last-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 64rem) {
  .spc-grid--areas--page {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .spc-grid--areas--page > :last-child {
    grid-column: auto;
  }
}

/* ------------------------------------------------------------------
   ABOUT (plan 04 section 5): the mission and vision rows split on a
   hairline (vertical at the chrome flip), the twelve-years proud ink
   band with its three figure rows, and the four-value rows. The
   approach band, the renewal stat plus residents band, and the
   contact band reuse the Home devices, unchanged here. */
.spc-mission {
  display: grid;
  gap: 1.5rem;
}
.spc-mission-col + .spc-mission-col {
  border-top: 1px solid var(--spc-line);
  padding-top: 1.5rem;
}
.spc-mission-col h3 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}
.spc-mission-col p {
  margin: 0;
  max-width: 30rem;
  color: var(--spc-hint);
}
@media (min-width: 48rem) {
  .spc-mission {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 3rem;
  }
  .spc-mission-col + .spc-mission-col {
    border-top: 0;
    border-left: 1px solid var(--spc-line);
    padding: 0 0 0 3rem;
  }
}
.spc-proud h2 {
  margin: 0 0 1.75rem;
  font-size: 2.5rem;
}
.spc-proud-figures {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.spc-proud-figures li {
  padding: 0.875rem 0;
  font-family: var(--spc-display);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--spc-sand);
}
.spc-proud-figures li + li {
  border-top: 1px solid var(--spc-line-ink);
}
.spc-proud-cities {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--spc-line);
}
@media (min-width: 48rem) {
  .spc-proud-figures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2rem;
  }
  /* In the three-column figure row the li + li top hairline would
     paint two detached column-width lines over the middle and right
     figures only; the columns carry the rhythm without them. */
  .spc-proud-figures li + li {
    border-top: 0;
  }
}
@media (min-width: 56rem) {
  .spc-proud h2 {
    font-size: 4rem;
  }
}
.spc-value-rows {
  display: grid;
  gap: 1.75rem 3rem;
  margin-top: 1.75rem;
}
.spc-value-row {
  border-top: 1px solid var(--spc-line);
  padding-top: 1.25rem;
}
.spc-value-row h3 {
  margin: 0 0 0.375rem;
  font-size: 1.25rem;
}
.spc-value-row p {
  margin: 0;
  color: var(--spc-hint);
}
@media (min-width: 48rem) {
  .spc-value-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------
   RESIDENT RESOURCES (plan 04 section 6): the numbered index (serif
   numerals in the clay text byte, tag chips on the shared chip
   device, full-row anchors with hairline tops and the tint hover
   wash), then the four inline detail bands (hairline topped, the
   scroll-margin bridge past the sticky chrome), the building rows,
   and the need-a-hand close. */
.spc-res-index {
  display: grid;
  gap: 2.5rem;
}
.spc-res-group {
  display: grid;
  align-content: start;
}
.spc-res-num {
  margin: 0 0 0.5rem;
  font-family: var(--spc-display);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--spc-clay);
}
.spc-res-group h2 {
  margin: 0 0 0.875rem;
  font-size: 1.75rem;
}
.spc-res-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-height: 48px;
  padding: 0.625rem 0;
  border-top: 1px solid var(--spc-line);
}
.spc-res-row:hover {
  background: var(--spc-tint);
}
.spc-res-row:hover .spc-res-row-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.spc-res-row-title {
  font: 600 1.0625rem/1.3 var(--spc-body);
  color: var(--spc-ink);
}
.spc-res-row-desc {
  flex: 1 1 16rem;
  font-size: 0.9375rem;
  color: var(--spc-hint);
}
.spc-res-arrow {
  margin-left: auto;
  display: inline-flex;
  color: var(--spc-clay);
}
.spc-res-detail {
  padding-block: 3rem 3.5rem;
  border-top: 1px solid var(--spc-line);
  scroll-margin-top: calc(var(--spc-clear) + 76px);
}
.spc-res-detail h2 {
  font-size: 1.75rem;
}
.spc-res-detail h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.25rem;
}
.spc-res-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.spc-res-list li {
  padding: 0.625rem 0;
  max-width: 44rem;
}
.spc-res-list li + li {
  border-top: 1px solid var(--spc-line);
}
.spc-res-intro {
  max-width: 40rem;
  color: var(--spc-hint);
}
.spc-buildings-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 1.75rem 3rem;
}
.spc-building-row {
  border-top: 1px solid var(--spc-line);
  padding-top: 1.25rem;
}
.spc-building-row h3 {
  margin: 0 0 0.375rem;
  font-size: 1.25rem;
}
.spc-building-row p {
  margin: 0;
  color: var(--spc-hint);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 30rem;
}
.spc-res-note {
  max-width: 40rem;
  margin-top: 1.5rem;
  color: var(--spc-hint);
  font-size: 0.9375rem;
}
@media (min-width: 48rem) {
  .spc-buildings-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The reduced-motion pair: the global blanket over the page plus the
   ticker's transition hold keep every state the script can touch
   static (the ticker freezes: a static Mesa word, NO timer exists
   under the media condition; the IIFE returns before any timer). */
@media (prefers-reduced-motion: reduce) {
  .spc-page *,
  .spc-page *::before,
  .spc-page *::after {
    transition-duration: 0s;
    animation: none;
  }
}