/* Harbrook & Vale demo — listing detail (NEU-353).
   Reference: Mäklarhuset listing page (docs/superpowers/specs/2026-08-06-
   propertyhive-listing-detail-reference/). Photo-first hero with the title ON
   the image, sticky sub-nav with a locked-right black CTA, flat warm-grey
   metrics card with hairline rows, an asymmetric tight-gutter photo grid, a
   full-bleed black contact beat, and a ⊕ hairline accordion stack. Strictly
   monochrome, sharp corners, zero shadows — all colour comes from the photos. */

html { scroll-behavior: smooth; }

/* Editorial redesign: the listing page swaps canvas, divider colour and gutter
   for the warm/soft set. Scoped to this body class so the front page and
   archive keep the NEU-353 language they were designed for. */
body.single-property {
  --sa-canvas: var(--sa-canvas-warm);
  --sa-line:   var(--sa-hairline);
}
/* Gutter applies to the LISTING's containers only. A bare
   `body.single-property .sa-container` would also match the header
   (header.php:18), the footer (footer.php:7) and the hero overlay
   (single-property.php:61) — and the hero must stay untouched. */
body.single-property .sa-listing .sa-container:not(.sa-hero__overlay) {
  padding: 0 var(--sa-gutter);
}
/* Discovered during Task 1 verification: the Honeycomb parent theme registers
   `add_theme_support('custom-background', ['default-color' => 'ffffff'])`
   (honeycomb/inc/class-honeycomb.php:105), so WordPress injects an inline
   `body.custom-background { background-color: #ffffff }` in wp_head on every
   page, after every enqueued stylesheet. That rule is equal specificity to
   `body.single-property` above and wins on source order, silently masking
   --sa-canvas. Matching its own specificity with an extra class keeps this
   listing-only (the front page has no .single-property) without touching the
   parent theme or any file outside Task 1's list. */
body.single-property.custom-background {
  background-color: var(--sa-canvas);
}

:where(#overview,#photos,#facts,#location,#contact) { scroll-margin-top: 128px; }

/* ---------- Photo-first hero ---------- */
/* Full viewport height (R2.6): the hero is sized by min-height alone (100vh,
   with a 100svh companion for mobile browser chrome), and the lead image is
   pulled out of flow to fill that box edge-to-edge via object-fit: cover — no
   letterboxing, no empty space below a shorter intrinsic image height. */
.sa-hero { position: relative; background: var(--sa-panel); overflow: hidden;
  min-height: 100vh; min-height: 100svh; }
.sa-hero__lead { position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  transform-origin: 50% 55%; will-change: transform, opacity;
  opacity: 1; }
.sa-hero__lead--empty { background: var(--sa-panel); }
/* Second crossfade layer (inserted by gallery.js when cycling multiple
   photos) starts hidden; JS toggles .is-active to swap it in. Static base
   state so it never flashes full-opacity before JS runs. */
.sa-hero__lead--b { opacity: 0; }

/* Ken Burns drift-zoom + multi-photo crossfade cycling — both motion effects,
   so both live entirely behind prefers-reduced-motion. Reduced-motion users
   get a single still photo with no animation and no cycling (gallery.js also
   independently skips building the cycler under that preference). */
@media (prefers-reduced-motion: no-preference) {
  /* Default: single static hero photo, gentle drift-zoom (unchanged look
     when gallery.js hasn't taken over, e.g. only one photo). */
  .sa-hero__lead { animation: sa-hero-float 22s ease-in-out infinite alternate; }
  .sa-hero__lead--empty { animation: none; }
  @keyframes sa-hero-float {
    from { transform: scale(1.03) translate3d(0, 0, 0); }
    to   { transform: scale(1.10) translate3d(-1%, -1.4%, 0); }
  }

  /* Once gallery.js adds .sa-hero--cycling, both layers crossfade on opacity
     and only the active layer runs the stronger per-photo Ken Burns zoom. */
  .sa-hero--cycling .sa-hero__lead {
    animation: none;
    /* Transition transform too, so when the outgoing layer loses .is-active
       (dropping its Ken Burns animation) its scale eases back rather than
       snapping from ~1.15 to 1 during the 1.2s opacity fade-out. The active
       layer's running animation still wins over this transition. */
    transition: opacity 1.2s ease, transform 1.2s ease;
  }
  .sa-hero--cycling .sa-hero__lead:not(.is-active) { opacity: 0; }
  .sa-hero--cycling .sa-hero__lead.is-active {
    opacity: 1;
    animation: sa-hero-kb 6s ease-out forwards;
  }
  @keyframes sa-hero-kb {
    from { transform: scale(1.03); }
    to   { transform: scale(1.18); }
  }
}
.sa-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.12) 34%, rgba(0,0,0,0) 60%),
              linear-gradient(to bottom, rgba(0,0,0,.52) 0%, rgba(0,0,0,.16) 12%, rgba(0,0,0,0) 28%);
}
.sa-hero__overlay { position: absolute; left: 0; right: 0; bottom: 88px; color: #fff; }
.sa-hero__tag { display: inline-block; font-size: 1.4rem; font-weight: 400; letter-spacing: -.01em; margin-bottom: .1em; opacity: .95; }
.sa-hero__title {
  font-family: var(--sa-display); font-weight: 200; color: #fff;
  font-size: clamp(2.5rem, 1.4rem + 5vw, 5.25rem); line-height: 1.02;
  letter-spacing: -.045em; margin: 0; max-width: 16ch;
}
.sa-hero__more {
  position: absolute; right: 28px; bottom: 28px;
  background: rgba(255,255,255,.92); border: 0; border-radius: 0;
  padding: .7rem 1.2rem; font-family: var(--sa-label); font-size: .95rem; color: var(--sa-ink);
  cursor: pointer; transition: background-color .15s ease;
}
.sa-hero__more:hover { background: #fff; }

/* ---------- Sticky sub-nav ---------- */
.sa-subnav { position: sticky; top: calc(74px + var(--sa-adminbar)); z-index: 40; background: var(--sa-surface-nav);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--sa-hairline); }
.sa-subnav__inner { display: flex; align-items: center; gap: 32px; height: 64px; }
.sa-subnav__links { display: flex; gap: 44px; list-style: none; margin: 0; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sa-subnav__links a { font-size: .95rem; white-space: nowrap; font-weight: 300; letter-spacing: .02em; padding: 6px 0;
  border-bottom: 0; position: relative; color: var(--sa-muted); text-decoration: none;
  transition: color var(--sa-dur) var(--sa-ease); }
.sa-subnav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform-origin: left;
  transform: scaleX(0); transition: transform var(--sa-dur) var(--sa-ease);
}
.sa-subnav__links a:hover,
.sa-subnav__links a[aria-current="location"] { color: var(--sa-ink); }
.sa-subnav__links a:hover::after,
.sa-subnav__links a[aria-current="location"]::after { transform: scaleX(1); }
.sa-subnav__cta { margin-left: auto; padding: .6rem 1.2rem; font-size: .95rem; white-space: nowrap; }

/* ---------- Body / breadcrumb ---------- */
.sa-listing__body { padding-top: 56px; }
.sa-breadcrumb { color: var(--sa-muted); font-size: .86rem; letter-spacing: .01em; margin: 0 0 56px; }
.sa-breadcrumb a { color: var(--sa-muted); }
.sa-breadcrumb a:hover { color: var(--sa-ink); text-decoration: none; }
.sa-breadcrumb span { color: var(--sa-ink); }

/* ---------- Two-column ---------- */
.sa-listing__cols { display: grid; grid-template-columns: 1fr 380px; gap: 88px; align-items: start; }
.sa-listing__main .sa-kicker { margin: 0 0 18px; }
.sa-listing__lead { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin: 0 0 28px; max-width: 20ch; }
.sa-description { max-width: 66ch; color: var(--sa-ink); }
.sa-description p { margin: 0 0 1.5em; line-height: 1.75; }
.sa-description p:last-child { margin-bottom: 0; }
.sa-description--muted { color: var(--sa-muted); }

/* ---------- Sidebar: flat metrics card + branch ---------- */
.sa-sidebar { position: sticky; top: calc(148px + var(--sa-adminbar)); display: flex; flex-direction: column; gap: 24px; }
.sa-metrics {
  background: var(--sa-surface);
  border: 1px solid var(--sa-hairline);
  border-radius: var(--sa-r-surface);
  box-shadow: var(--sa-shadow-card);
  padding: 32px;
}
.sa-metrics__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 0; border-bottom: 0;                /* whitespace, not rules */
}
.sa-metrics__k { color: var(--sa-muted); font-size: .82rem; font-weight: 400;
  letter-spacing: .04em; text-transform: uppercase; }
.sa-metrics__v { color: var(--sa-ink); font-size: 1.25rem; text-align: right; }
/* Price is the anchor of the card. */
.sa-metrics__row:first-child { padding-top: 0; }
.sa-metrics__row:first-child .sa-metrics__v { font-family: var(--sa-display);
  font-weight: 200; font-size: 2rem; letter-spacing: -.03em; }
.sa-metrics__row:last-child { padding-bottom: 0; }
.sa-branch {
  background: var(--sa-surface);
  border: 1px solid var(--sa-hairline);
  border-radius: var(--sa-r-surface);
  box-shadow: var(--sa-shadow-card);
  padding: 32px;
}
.sa-branch__name { margin: 0 0 4px; font-size: 1.3rem; }
.sa-branch__muted { color: var(--sa-muted); margin: 0 0 10px; font-size: .95rem; }
.sa-branch__link { font-family: var(--sa-label); font-size: 1rem; border-bottom: 1px solid var(--sa-ink); }
.sa-branch__link:hover { text-decoration: none; opacity: .65; }

/* ---------- Asymmetric photo grid ---------- */
.sa-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: clamp(12px, 1.4vw, 20px); margin-top: var(--sa-gap-section); }
.sa-grid__tile { position: relative; border: 0; padding: 0; margin: 0; cursor: pointer; background: var(--sa-panel); aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: var(--sa-r-media); box-shadow: var(--sa-shadow-card); }
.sa-grid__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.sa-grid__tile:hover img { transform: scale(1.03); }
.sa-grid__tile--0 { grid-column: span 2; grid-row: span 2; }
.sa-grid__count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20,20,20,.55); color: #fff; font-family: var(--sa-label); font-size: 1.1rem; border-radius: var(--sa-r-media); }

/* ---------- Full-bleed black contact beat ---------- */
.sa-contact { background: var(--sa-ink); color: #fff; margin-top: 120px; }
.sa-contact__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; padding: 72px 32px; align-items: start; }
.sa-contact__h { color: #fff; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); margin: 0 0 20px; }
.sa-contact__body { color: rgba(255,255,255,.72); max-width: 52ch; margin: 0 0 28px; }
.sa-btn--onblack { background: #fff; border-color: #fff; color: var(--sa-ink); }
.sa-btn--onblack:hover { background: rgba(255,255,255,.85); color: var(--sa-ink); text-decoration: none; }
.sa-contact__branch { border-left: 1px solid rgba(255,255,255,.18); padding-left: 40px; }
.sa-contact__name { color: #fff; font-size: 1.5rem; margin: 0 0 4px; }
.sa-contact__meta { color: rgba(255,255,255,.55); margin: 0 0 18px; font-size: .95rem; }
.sa-contact__link { display: block; color: #fff; font-family: var(--sa-label); font-size: 1.02rem; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.sa-contact__link:last-child { border-bottom: 0; }
.sa-contact__link:hover { text-decoration: none; opacity: .7; }

/* Editorial redesign: .sa-contact and its subtree are shared with the front
   page (front-page.php:125-136), so every rule here carries the
   body.single-property prefix. */
body.single-property .sa-contact { margin-top: var(--sa-gap-section); }
body.single-property .sa-contact__inner { padding: 88px var(--sa-gutter); gap: 64px; }
body.single-property .sa-contact__body { max-width: 62ch; line-height: 1.7; }
body.single-property .sa-contact__branch { border-left-color: rgba(255,255,255,.10);
  padding-left: 48px; }
body.single-property .sa-contact__link { border-bottom-color: rgba(255,255,255,.10);
  padding: 12px 0; }

/* ---------- ⊕ accordion stack ---------- */
.sa-acc { margin-top: var(--sa-gap-section); }
.sa-acc__row { border-top: 1px solid var(--sa-hairline); }
.sa-acc__row:last-child { border-bottom: 1px solid var(--sa-hairline); }
.sa-acc__head { display: flex; align-items: center; gap: 20px; padding: 32px 2px; cursor: pointer; list-style: none; }
.sa-acc__head::-webkit-details-marker { display: none; }
.sa-acc__icon { position: relative; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; background: var(--sa-ink); }
.sa-acc__icon::before, .sa-acc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; transform: translate(-50%, -50%); }
.sa-acc__icon::before { width: 12px; height: 1.5px; }
.sa-acc__icon::after { width: 1.5px; height: 12px; transition: opacity .15s ease; }
.sa-acc__row[open] .sa-acc__icon::after { opacity: 0; }
.sa-acc__title { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem); margin: 0; }
.sa-acc__body { padding: 4px 2px 40px 50px; }

/* Shared surface for every panel's content.
   `.sa-ph--tour` is EXCLUDED: it carries `background:#1c1c1c` (below) behind a
   white play icon. `--sa-surface` would win at equal specificity from a later
   rule and leave a white icon on a white tile. */
.sa-facts-list, .sa-epc, .sa-ph:not(.sa-ph--tour), .sa-dist-wrap, .sa-docs, .sa-map {
  background: var(--sa-surface);
  border: 1px solid var(--sa-hairline);
  border-radius: var(--sa-r-surface);
  box-shadow: var(--sa-shadow-card);
}
/* The tour tile keeps its dark fill; it gets the geometry only. */
.sa-ph--tour { border: 1px solid var(--sa-hairline);
  border-radius: var(--sa-r-surface); box-shadow: var(--sa-shadow-card); }

/* Facts list */
.sa-facts-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 56px; padding: 32px; }
.sa-facts-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 0; }
.sa-facts-list dt { color: var(--sa-muted); margin: 0; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase; }
.sa-facts-list dd { margin: 0; color: var(--sa-ink); text-align: right; font-size: 1.15rem; }

/* Placeholders (demo sample content) */
.sa-ph__note { color: var(--sa-muted); font-size: .9rem; margin: 16px 0 0; }
.sa-ph { display: flex; align-items: center; justify-content: center; background: var(--sa-panel); color: var(--sa-muted); }
.sa-ph--floorplan { padding: 40px; }
.sa-ph--floorplan svg { width: min(420px, 100%); height: auto; color: #b9b5ad; }
.sa-floorplan__img { width: 100%; height: auto; background: var(--sa-panel); margin-bottom: 6px; }
.sa-ph--tour { aspect-ratio: 16 / 9; background: #1c1c1c; overflow: hidden; }
.sa-ph__play { width: 64px; height: 64px; border-radius: 999px; border: 1px solid rgba(255,255,255,.6); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; padding-left: 4px; }
.sa-epc { display: flex; gap: 8px; flex-wrap: wrap; padding: 24px; }
.sa-epc__band { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: var(--sa-canvas); border: 1px solid var(--sa-hairline); color: var(--sa-muted); font-weight: 500;
  border-radius: var(--sa-r-button); }
.sa-epc__band.is-current { background: var(--sa-ink); color: #fff; border-color: var(--sa-ink); }
.sa-map { position: relative; aspect-ratio: 16 / 6; background: var(--sa-panel);
  background-image: linear-gradient(var(--sa-line) 1px, transparent 1px), linear-gradient(90deg, var(--sa-line) 1px, transparent 1px);
  background-size: 40px 40px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; }   /* radius comes from the shared surface group above */
.sa-map__pin { width: 16px; height: 16px; border-radius: 999px 999px 999px 0; background: var(--sa-ink); transform: rotate(-45deg); box-shadow: 0 0 0 4px rgba(20,20,20,.12); }
.sa-map__addr { position: absolute; bottom: 14px; left: 16px; background: var(--sa-canvas); border: 1px solid var(--sa-hairline); padding: 8px 16px; font-size: .9rem; border-radius: var(--sa-r-pill); }
.sa-dist-wrap { padding: 8px 32px; overflow-x: auto; }
.sa-dist { width: 100%; border-collapse: separate; border-spacing: 0; }
.sa-dist th, .sa-dist td { text-align: left; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--sa-hairline); font-weight: 400; }
.sa-dist tr:last-child td { border-bottom: 0; }
.sa-dist th { color: var(--sa-muted); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.sa-docs { list-style: none; margin: 0; padding: 8px 32px; }
.sa-docs li { border-bottom: 1px solid var(--sa-hairline); }
.sa-docs li:last-child { border-bottom: 0; }
.sa-docs__item { display: block; padding: 18px 0; font-family: var(--sa-label); font-size: 1.05rem; color: var(--sa-muted); }
.sa-docs__item::before { content: "↓ "; font-family: var(--sa-sans); }

/* ---------- "More in this area" (Task 7) — sharpened, monochrome ---------- */
.sa-similar { padding: 72px 0 88px; border-top: 1px solid var(--sa-line); }
.sa-similar__h { margin-bottom: 28px; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.sa-similar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sa-similar__card { display: block; overflow: hidden; background: var(--sa-panel); transition: opacity .15s ease; }
.sa-similar__card:hover { opacity: .9; text-decoration: none; }
.sa-similar__card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.sa-similar__meta { padding: 16px 4px; display: flex; flex-direction: column; gap: 4px; }
.sa-similar__price { font-size: 1.15rem; color: var(--sa-ink); }
.sa-similar__addr { color: var(--sa-muted); font-size: .9rem; }

/* Editorial redesign: .sa-similar* is shared with the front page
   (front-page.php:82-91) and the archive (archive-property.php:9-22), so
   every rule here carries the body.single-property prefix. */
body.single-property .sa-similar { padding: var(--sa-gap-section) 0;
  border-top: 1px solid var(--sa-hairline); }
body.single-property .sa-similar__grid { gap: clamp(16px, 1.6vw, 24px); }
body.single-property .sa-similar__card { background: var(--sa-surface);
  border: 1px solid var(--sa-hairline);
  border-radius: var(--sa-r-media); box-shadow: var(--sa-shadow-card);
  transition: box-shadow var(--sa-dur) var(--sa-ease); }
body.single-property .sa-similar__card:hover { opacity: 1;
  box-shadow: var(--sa-shadow-hover); }
body.single-property .sa-similar__meta { padding: 20px 20px 24px; }

/* ---------- Lightbox + mobile action bar ---------- */
.sa-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.94); z-index: 1000; overflow: auto; display: none; padding: 56px 0; }
.sa-lightbox.is-open { display: block; }
/* Fixed to the viewport, so it needs the same admin-bar clearance as the
   header (--sa-adminbar, theme.css) — otherwise the close button hides behind
   the WordPress toolbar for logged-in users and the lightbox looks unclosable. */
.sa-lightbox__close { position: fixed; top: calc(16px + var(--sa-adminbar)); right: 20px; font-size: 2rem; color: #fff; background: none; border: 0; cursor: pointer; }
.sa-lightbox__track { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 4px; padding: 0 16px; }
.sa-lightbox__img { width: 100%; }
.sa-actionbar { display: none; }

/* ---------- Floating listing assistant — content push (NEU-353) ----------
   The listing conversation is the widget's own <ListingDock> (see
   includes/listing-injection.php): a FLOATING frosted glass panel that morphs
   out of a minimal bottom-right FAB and hovers over the hero's right. Rather
   than let the widget narrow the whole document (which would shove the full-
   bleed hero too), the widget publishes its state on <html>:
     --ni-dock-active-w : the width to clear on the right (0 when collapsed)
     [data-ni-dock-expanded] : present only while the panel is open
   The theme owns the reflow: push every listing SECTION except the hero left by
   that width so nothing hides under the fixed panel, at any scroll position.
   The hero is deliberately left full-bleed — the panel floats over it. */

/* Header height → the panel floats just below the site header. Inherits across
   the shadow boundary into the widget's rail (top: calc(--ni-dock-top + 18px)). */
body.single-property { --ni-dock-top: calc(104px + var(--sa-adminbar)); }

.sa-listing > *:not(.sa-hero) {
  transition: margin-right .42s cubic-bezier(.4, 0, .2, 1);
}
html[data-ni-dock-expanded] .sa-listing > *:not(.sa-hero) {
  margin-right: var(--ni-dock-active-w, 0px);
}

/* Reading measure vs the dock. The push above costs the body ~400px, which at a
   1280px viewport leaves the two-column grid a ~310px main column — about 34
   characters per line, against the 60–75 the design calls for. Two columns
   simply do not fit beside an open 400px panel, so while the dock is open the
   body stacks, exactly as it already does below 980px. `.sa-description`'s
   66ch cap then does the limiting instead of the grid. The sidebar keeps its
   sticky behaviour off (stacked, it has nothing to stick to). */
@media (min-width: 981px) {
  html[data-ni-dock-expanded] body.single-property .sa-listing__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sa-gap-block);
  }
  html[data-ni-dock-expanded] body.single-property .sa-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    align-items: start;
  }
  html[data-ni-dock-expanded] body.single-property .sa-mort { margin-top: 0; }
}

/* ---------- Mortgage calculator card (Task 7) — Task 2's surface recipe
   plus the input radius. Sales-only; rendered by single-property.php only
   when the price is a real, non-zero number. ---------- */
.sa-mort { background: var(--sa-surface); border: 1px solid var(--sa-hairline);
  border-radius: var(--sa-r-surface); box-shadow: var(--sa-shadow-card);
  padding: 32px; margin-top: 24px; }
.sa-mort__h { margin: 0; color: var(--sa-muted); font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase; }
.sa-mort__out { margin: 8px 0 24px; font-family: var(--sa-display);
  font-weight: 200; font-size: 2rem; letter-spacing: -.03em; color: var(--sa-ink); }
.sa-mort__fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sa-mort__field { display: flex; flex-direction: column; gap: 6px; }
.sa-mort__field span { color: var(--sa-muted); font-size: .74rem;
  letter-spacing: .04em; text-transform: uppercase; }
.sa-mort__field input { width: 100%; box-sizing: border-box;
  padding: 12px 14px; font: inherit; color: var(--sa-ink);
  background: var(--sa-canvas); border: 1px solid var(--sa-hairline);
  border-radius: var(--sa-r-input);
  transition: border-color var(--sa-dur) var(--sa-ease),
              box-shadow var(--sa-dur) var(--sa-ease); }
.sa-mort__field input:focus-visible { outline: none; border-color: var(--sa-ink);
  box-shadow: var(--sa-shadow-card); }
.sa-mort .sa-ph__note { margin: 20px 0 0; }

/* ---------- Motion (Task 6) — card reveal on leaf cards only, never on an
   ancestor of .sa-actionbar or the widget root. .sa-similar__card is shared
   with the front page and archive, so it carries the body.single-property
   prefix here too; the rest are listing-only. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sa-metrics, .sa-branch, .sa-facts-list, .sa-epc, .sa-docs, .sa-dist-wrap,
  .sa-map, .sa-ph, .sa-grid__tile, .sa-mort,
  body.single-property .sa-similar__card {
    animation: sa-rise var(--sa-dur) var(--sa-ease) both;
  }
  @keyframes sa-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .sa-listing__cols { grid-template-columns: 1fr; gap: 40px; }
  .sa-sidebar { position: static; }
  .sa-contact__inner { grid-template-columns: 1fr; gap: 32px; padding: 56px 20px; }
  .sa-contact__branch { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); padding-left: 0; padding-top: 28px; }
  .sa-facts-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* .sa-hero__lead stays inset:0/100% — the hero itself keeps min-height:
     100vh/100svh from mobile browser chrome down to desktop. */
  .sa-hero__overlay { bottom: 24px; }
  /* Button to the top so the wrapping title never runs under it. */
  .sa-hero__more { top: 14px; right: 14px; bottom: auto; padding: .55rem .9rem; font-size: .85rem; }
  .sa-hero__title { font-size: clamp(2rem, 1.2rem + 4vw, 3rem); }
  .sa-subnav { top: calc(62px + var(--sa-adminbar)); }
  .sa-subnav__cta { display: none; }
  .sa-subnav__inner { height: 50px; }
  .sa-grid { grid-template-columns: repeat(2, 1fr); }
  .sa-grid__tile--0 { grid-column: span 2; grid-row: span 1; }
  .sa-acc__body { padding-left: 2px; }
  .sa-similar__grid { grid-template-columns: repeat(2, 1fr); }
  .sa-actionbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 12px; align-items: center;
    justify-content: space-between; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--sa-canvas); border-top: 1px solid var(--sa-line); }
  .sa-actionbar__price { font-size: 1.15rem; }
  .sa-actionbar .sa-btn { padding: .7rem 1.1rem; }
  .sa-listing { padding-bottom: 84px; }
  body.single-property .sa-listing .sa-container:not(.sa-hero__overlay) { padding: 0 20px; }
}