/* Harbrook & Vale demo — front page.

   Brought into the editorial language the listing page adopted in the
   2026-08-07 redesign (see the 2026-08-07 editorial-redesign design spec):
   warm off-white canvas, content as elevated
   cards (--sa-surface fill, --sa-hairline border, --sa-shadow-card, large
   radii), grown section rhythm. The two full-bleed black beats — the search
   band and the valuation CTA — stay black on purpose; they are the page's
   high-contrast punctuation.

   Structure is unchanged from the original Mäklarhuset-anchored layout: a
   giant action-link hero beside an angled photo, a full-bleed black search
   band, a featured-homes grid (reusing .sa-similar__* — scoped under .sa-home
   so the listing page and /property-search/ are unaffected), three service
   columns, and the black valuation beat. */

body.home { background: var(--sa-canvas-warm); }

.sa-home .sa-container { padding-left: var(--sa-gutter); padding-right: var(--sa-gutter); }

/* Shared card surface treatment, reused by the featured grid and the service
   columns below — same recipe as the listing page's R2/R3 cards. */
.sa-home .sa-btn { border-radius: var(--sa-r-button); }

/* ---------- Hero: action links + AI search beside an angled photo ---------- */
.sa-home-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100dvh - 105px); background: var(--sa-canvas-warm); }
.sa-home-hero__media {
  background-size: cover; background-position: center; background-color: var(--sa-panel);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
}
/* Bottom padding is deliberately generous: the widget's own floating
   launcher pill is fixed to the viewport's bottom-right corner (outside this
   theme's control), so centered hero content is biased upward to stay clear
   of it rather than colliding on shorter viewports. */
.sa-home-hero__panel { display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 3.4vh, var(--sa-gap-block)); padding: clamp(24px, 4vh, 48px) clamp(24px, 5vw, 88px) clamp(56px, 8vh, 112px); }
.sa-home-hero__menu { display: flex; flex-direction: column; gap: .06em; }
.sa-home-hero__link {
  font-family: var(--sa-display); font-weight: 200; letter-spacing: -.045em;
  /* Sized off BOTH axes. Width alone was the original rule, and it was
     right when the hero's second element was a ~60px search bar; with the
     ~275px ask panel below it the four links at full display scale push the
     hero past the fold at ordinary laptop heights, not just short ones —
     measured 849.8px panel bottom against an 832px launcher top on a
     1440x900 window. min() lets whichever axis is scarcer govern, which
     replaces two hand-tuned height breakpoints with one continuous rule.

     The height term is offset, not a bare vh. What the links have to fit
     inside is the viewport MINUS a fixed overhead — 105px header, ~275px
     ask panel, ~68px of launcher pill at the bottom edge — roughly 470px
     that does not shrink with the window. A plain `Nvh` therefore fits at
     one height and overflows at another (7.2vh cleared 1440x900 and blew
     through the fold at 1280x577 by 66px). Subtracting the overhead first
     and dividing by the four links' 4.4 line-heights makes the term track
     the space actually available. Measured rest-state clearance against
     the launcher at 577/768/900/982/1080px tall: 11/26/68/104/134px. */
  font-size: clamp(1.4rem, min(1.2rem + 3vw, (100vh - 470px) / 5.6), 4.6rem); line-height: 1.1;
  color: #c9c6c0; transition: color var(--sa-dur) var(--sa-ease);
}
.sa-home-hero__link:hover { color: var(--sa-ink); text-decoration: none; }
.sa-home-hero__link.is-active { color: var(--sa-ink); }

/* Short-viewport rescue. The hero sizes itself off the viewport, but the four
   action links at the full display scale plus the search bar are taller than a
   ~580px-high window — so the content overflowed the fold and the search bar
   landed flush on the bottom edge, exactly where the widget's fixed launcher
   pill sits. Scaling the type and tightening the vertical padding keeps the
   whole hero inside the fold, which is also what lifts the bar clear of the
   launcher. Keyed on viewport HEIGHT: this is a vertical-space problem, and a
   width breakpoint would miss a short-and-wide laptop entirely. */
@media (max-height: 820px) and (min-width: 861px) {
  .sa-home-hero__panel { padding-top: 32px; padding-bottom: 32px; }
  .sa-home-hero__link { line-height: 1.12; }
}

/* The AI search bar — the theme-side entry point into the assistant. A real
   form + input (see assets/js/home-search.js), styled as one of the new
   elevated surfaces: pill shape, opaque-ish fill, hairline border, soft card
   shadow. */
/* The panel is the outer surface; the pill sits inside it, so the pill's own
   elevation stays light — two stacked card shadows read as muddy. */
/* Entrance, mirroring the widget's ni-hs-in: fade + rise. Applied to
   .sa-home-ask itself, never to an ancestor — see the containing-block trap
   noted on the chips' stagger below.

   The entrance moves but never fades: opacity stays 1 the whole way, and
   the arrival is carried by transform alone. That is a deliberate
   robustness choice, not an aesthetic one. A renderer that reports an
   animation as running while never advancing its clock paints the 0%
   keyframe forever — measured here in a headless Chrome: playState
   "running", currentTime pinned at 0. Any `from { opacity: 0 }` therefore
   strands the page's primary CTA permanently blank, and no
   animation-fill-mode setting avoids it, because the animation never
   leaves its active phase to reach the fill. Animating transform only
   means the same failure degrades to "panel sits 12px low" — invisible to
   anyone, instead of an invisible panel. */
@keyframes sa-home-ask-in { from { transform: translateY(12px) scale(.985); } to { transform: translateY(0) scale(1); } }
.sa-home-ask {
  max-width: 700px;
  background: var(--sa-surface); border: 1px solid var(--sa-hairline);
  border-radius: var(--sa-r-surface); box-shadow: var(--sa-shadow-card);
  padding: 28px; display: flex; flex-direction: column; gap: 18px;
  animation: sa-home-ask-in 460ms var(--sa-ease);
}
.sa-home-ask__head {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 1rem; color: var(--sa-ink);
}
.sa-home-ask__head label { cursor: pointer; }
.sa-home-ask__spark { flex: 0 0 auto; color: var(--sa-ink); }
/* Quiet ambient life on the small secondary star only — this is an
   editorial theme, not a toy, so the big star stays still and the twinkle
   is slow and low-amplitude. transform-box:fill-box makes `center` orbit
   the star's own bounding box instead of the 24x24 viewBox's origin, which
   would otherwise read as a drift rather than a twinkle in place. */
@keyframes sa-home-ask-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .7; transform: scale(.9); } }
.sa-home-ask__spark-mini { transform-box: fill-box; transform-origin: center; animation: sa-home-ask-twinkle 4s ease-in-out infinite; }

.sa-home-hero__search {
  display: flex; align-items: center; gap: 8px;
  background: var(--sa-canvas-warm);
  /* var(--sa-hairline) (rgba(0,0,0,.05)) is right for a border drawn on the
     warm fill — here it all but disappears, so the pill reads borderless at
     rest. A visible hairline, not the token, per the widget's ni-hero-form. */
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--sa-r-pill);
  padding: 6px 6px 6px 18px;
  /* Honeycomb's `form { margin-bottom: 1.618em }` (27.5px here) lands between
     the pill and the chip row and adds to .sa-home-ask's own 18px gap, so the
     chips sat 45.5px below the pill while the heading sat 18px above it. The
     panel owns its own rhythm — the form contributes no margin. */
  margin: 0;
  transition: border-color var(--sa-dur) var(--sa-ease), background-color var(--sa-dur) var(--sa-ease), box-shadow var(--sa-dur) var(--sa-ease);
}
/* Hover: a flat colour/border swap only — no shadow, no lift. Elevation is
   reserved for :focus-within's ring below (mirrors ni-hero-form: the two
   states don't compound). */
.sa-home-hero__search:hover { border-color: rgba(0, 0, 0, .14); background: #fff; }
.sa-home-hero__search:focus-within {
  background: #fff;
  /* Plain rgba precedes every color-mix() in this file: an unsupported
     color-mix() invalidates the WHOLE declaration (not just the mixed-in
     part), so without a preceding plain value the border/ring drops
     entirely on older Safari/Firefox instead of degrading. */
  border-color: rgba(20, 20, 20, .5);
  border-color: color-mix(in srgb, var(--sa-ink) 45%, rgba(0, 0, 0, .1));
  /* Mirrors ni-hero-form's focus behaviour verbatim: the ring REPLACES the
     resting elevation rather than adding to it — no glow, no lift. */
  box-shadow: 0 0 0 3px rgba(20, 20, 20, .12);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa-ink) 12%, transparent);
}
.sa-home-hero__search-pin { flex: 0 0 auto; color: var(--sa-muted); transition: color var(--sa-dur) var(--sa-ease); }
.sa-home-hero__search:focus-within .sa-home-hero__search-pin { color: var(--sa-ink); }
.sa-home-hero__search-sr,
.sa-home-hero__search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sa-home-hero__search-filters {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--sa-r-pill); color: var(--sa-muted);
  transition: color var(--sa-dur) var(--sa-ease), background-color var(--sa-dur) var(--sa-ease);
}
.sa-home-hero__search-filters:hover { color: var(--sa-ink); background: rgba(0,0,0,.05); text-decoration: none; }
.sa-home-hero__search-filters:focus-visible { outline: 2px solid var(--sa-ink); outline-offset: 2px; }
/* Honeycomb's global `input[type=text],...` rule (equal specificity to ours,
   loaded first) paints an inset box-shadow and sets line-height:1.618 — both
   leak through per-property since the cascade only overrides what we
   actually declare. box-shadow:none kills the sunken-rectangle artifact;
   line-height:1.3 replaces the golden-ratio leak with our own rhythm so the
   pill's height stops drifting with Honeycomb's type scale. */
.sa-home-hero__search input {
  flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--sa-sans);
  font-size: .98rem; line-height: 1.3; color: var(--sa-ink); padding: 14px 4px;
  box-shadow: none;
}

/* Example prompts. Buttons, not links — they seed the assistant rather than
   navigate, and a link that does not navigate is a lie to assistive tech. */
.sa-home-ask__chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
/* Mirrors ni-wctd-example (the widget's example-query card), monochrome:
   ink replaces --lm-ai at every mix. Rest is #fff, not --sa-surface — the
   chips sit ON the surface and need to read as a distinct layer, not a
   continuation of the card fill.

   Stagger: each <li> emits --i (its index) from the PHP loop; the chip
   reads it via var() (custom properties inherit). The stagger rides
   DURATION, not animation-delay — a delayed entrance would need
   fill-mode:backwards to avoid flashing in and back out, and that has the
   stranded-at-opacity-0 failure documented on .sa-home-ask above. Instead
   each keyframe track holds the hidden state through its first 55% and the
   track itself is longer per index, so chip N starts appearing ~38ms after
   chip N-1 while every chip's *resting* state stays the visible one.
   Custom property rather than per-nth-child rules so it survives the
   More-toggle revealing extra chips with no extra CSS. Animated on
   .sa-home-ask__chip itself, never on an ancestor: #propertyhive-widget-
   root (the widget's fixed launcher) is a sibling of .sa-home under
   <body>, not a descendant of anything in this panel — but staying inside
   the panel's own elements keeps that true regardless of future DOM
   changes upstream. */
.sa-home-ask__chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: #fff; border: 1px solid var(--sa-hairline);
  border-radius: var(--sa-r-pill); padding: 10px 16px;
  font-family: var(--sa-sans); font-size: .88rem; color: var(--sa-ink);
  transition: border-color var(--sa-dur) var(--sa-ease), background-color var(--sa-dur) var(--sa-ease), box-shadow var(--sa-dur) var(--sa-ease), transform var(--sa-dur) var(--sa-ease);
  animation: sa-home-chip-in calc(560ms + var(--i, 0) * 70ms) var(--sa-ease);
}
/* Same opacity-free contract as sa-home-ask-in above. The hold through 55%
   is what produces the stagger: the track is longer per --i, so a later
   chip stays parked at its offset longer before travelling. */
@keyframes sa-home-chip-in {
  0%, 55% { transform: translateY(10px); }
  100%    { transform: translateY(0); }
}
/* The overflow chips are display:none at load, which suppresses their
   animation entirely — so it runs fresh the moment "More" reveals them, and
   the page-load track (up to 980ms, over half of it spent held at the offset
   to build the stagger) reads as a sluggish lag on what should feel
   instant. Give the reveal its own short, hold-free track instead. */
.sa-home-ask__chips .is-extra .sa-home-ask__chip {
  animation: sa-home-chip-reveal 220ms var(--sa-ease);
}
@keyframes sa-home-chip-reveal {
  from { transform: translateY(6px); }
  to   { transform: translateY(0); }
}
/* :focus-visible gets the same lift as :hover — a keyboard user should see
   the affordance a mouse user sees, not just the focus ring. The :active
   rule below still resets it, so a pressed chip presses. */
.sa-home-ask__chip:hover,
.sa-home-ask__chip:focus-visible {
  /* Honeycomb's `button:hover { color: #fff }` (0-1-1) outranks our resting
     `.sa-home-ask__chip` (0-1-0), so without re-declaring here the label
     turns white on a white chip and the prompt disappears under the pointer.
     Re-stating ink at 0-2-0 settles it. */
  color: var(--sa-ink);
  border-color: rgba(20, 20, 20, .26);
  border-color: color-mix(in srgb, var(--sa-ink) 22%, var(--sa-hairline));
  background: #f7f7f7;
  background: color-mix(in srgb, var(--sa-ink) 3%, #fff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
  transform: translateY(-1px);
}
.sa-home-ask__chip:active { transform: translateY(0); box-shadow: none; }
.sa-home-ask__chip:focus-visible { outline: 2px solid var(--sa-ink); outline-offset: 2px; }
.sa-home-ask__more svg { transition: transform var(--sa-dur) var(--sa-ease); }
.sa-home-ask__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.sa-home-hero__search input::placeholder { color: var(--sa-muted); }
/* The input carries no focus ring of its own: the pill it sits in draws one
   for the whole composite via :focus-within above, and a text input matches
   :focus-visible whenever it is focused — including by mouse, since it
   expects keyboard input — so an outline here fires on every click and
   renders a hard black rectangle nested inside the pill's soft ring. Two
   indicators for one focus. The pill's border going to 45% ink plus its
   3px ring is the indicator; same division the widget's ni-hero-form uses. */
.sa-home-hero__search input:focus,
.sa-home-hero__search input:focus-visible {
  outline: none;
  /* Honeycomb fills focused inputs with #e6e5e5, and its selector
     (`input[type="text"]:focus`, 0-2-1) outranks our resting rule
     (`.sa-home-hero__search input`, 0-1-1) — so clicking into the pill
     painted a grey rounded slab behind the placeholder, inside our white
     pill. Re-declaring under :focus matches that 0-2-1 and, being later in
     the cascade, wins. */
  background: transparent;
}
/* The one button in this panel allowed a real hover lift (house divergence
   from the widget, which never lifts/scales on hover — this was an explicit
   ask for richer feedback here). Kept small (1px) and non-springy per that
   same ask. Opacity dimming is gone: it read cheap next to the rest of the
   polish pass. */
.sa-home-hero__search button {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  border: 0; cursor: pointer; background: var(--sa-ink); color: #fff;
  font-family: var(--sa-label); font-size: .92rem; padding: 13px 22px; border-radius: var(--sa-r-pill);
  transition: background-color var(--sa-dur) var(--sa-ease), transform var(--sa-dur) var(--sa-ease), box-shadow var(--sa-dur) var(--sa-ease);
}
.sa-home-hero__search button:hover,
.sa-home-hero__search button:focus-visible {
  background: rgb(18, 18, 18);
  background: color-mix(in srgb, var(--sa-ink) 88%, #000);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.sa-home-hero__search button:active { transform: translateY(0); box-shadow: none; }
.sa-home-hero__search button:focus-visible { outline: 2px solid var(--sa-ink); outline-offset: 2px; }
.sa-home-hero__search-arrow { display: inline-block; transition: transform var(--sa-dur) var(--sa-ease); }
.sa-home-hero__search button:hover .sa-home-hero__search-arrow,
.sa-home-hero__search button:focus-visible .sa-home-hero__search-arrow { transform: translateX(3px); }

/* Short-viewport squeeze, part two. Same breakpoint as the hero rescue above,
   but it has to live *below* the .sa-home-ask block: a media query adds no
   specificity, so a later same-specificity rule would win. The ask panel is
   ~300px tall where the bare search bar it replaced was ~60px, so the squeeze
   has to reach inside it — otherwise the chip row lands under the widget's
   fixed launcher pill again. */
@media (max-height: 820px) and (min-width: 861px) {
  .sa-home-ask { padding: 20px; gap: 14px; }
  .sa-home-ask__head { font-size: .94rem; }
  .sa-home-hero__search input { padding: 10px 4px; }
  .sa-home-ask__chip { padding: 8px 14px; font-size: .84rem; }
}

/* Second tier, for genuinely short windows (~600px and under). Even squeezed,
   the menu plus the ask panel is taller than the fold there, and the panel's
   chip row ends up behind the launcher pill. Shrinking the action links is the
   only lever that moves the panel *up* — extra bottom padding would just grow
   the hero downward. Measured on a 1280x577 window: panel bottom 549 -> 500,
   launcher top 509. */
@media (max-height: 640px) and (min-width: 861px) {
  .sa-home-hero__panel { padding-top: 16px; }
}

/* ---------- Search band: photo + black panel, a second run at the AI search ---------- */
.sa-home-search { display: grid; grid-template-columns: 1fr 1fr; }
.sa-home-search__photo { min-height: 440px; background-size: cover; background-position: center; background-color: var(--sa-panel); }
.sa-home-search__panel {
  background: var(--sa-ink); color: #fff;
  padding: clamp(40px, 5vw, 76px); display: flex; flex-direction: column; justify-content: center; gap: 22px;
}
.sa-home-search__panel h2 { color: #fff; margin: 0; }
/* Capped at ~48ch so the lede breaks into two or three readable lines instead
   of running the full width of the panel on a wide screen. */
.sa-home-search__lede { margin: 0; max-width: 48ch; color: rgba(255, 255, 255, .72); }
/* Mirrors the hero's .sa-home-hero__search: one light field with the dark
   submit pill sitting inside it. The old two-part composition was a white
   input butted against a white .sa-btn--onblack, which merged into a single
   slab — survivable when the button only said "Search" beside a separate AI
   link, but not now that it is the card's one call to action.
   margin: 0 for the same reason as the hero form — Honeycomb's form
   margin-bottom otherwise leaks into this panel's 22px gap. */
.sa-home-search__form {
  display: flex; align-items: center; gap: 8px; margin: 0;
  background: #fff; border-radius: var(--sa-r-pill);
  padding: 6px 6px 6px 20px;
  box-shadow: var(--sa-shadow-card);
  transition: box-shadow var(--sa-dur) var(--sa-ease);
}
.sa-home-search__form input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  padding: 14px 0; font-size: 1rem; font-family: var(--sa-sans); color: var(--sa-ink);
  box-shadow: none;
}
/* Same division as the hero: the field owns the focus indicator, so the input
   carries none of its own. A white ring reads on the black panel where the
   hero's ink ring would vanish. */
.sa-home-search__form input:focus,
.sa-home-search__form input:focus-visible { outline: none; background: transparent; }
.sa-home-search__form:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); }
.sa-home-search__form .sa-btn {
  flex-shrink: 0; border-radius: var(--sa-r-pill); padding: 13px 22px;
  background: var(--sa-ink); border-color: var(--sa-ink); color: #fff;
}
.sa-home-search__form .sa-btn:hover,
.sa-home-search__form .sa-btn:focus-visible { background: #000; border-color: #000; color: #fff; }

/* ---------- Featured homes — real recent listings as elevated cards ---------- */
.sa-home-featured { padding: var(--sa-gap-section) 0 0; }
.sa-home-featured__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: var(--sa-gap-block); }
.sa-home-featured__head .sa-similar__h { margin: 0; }
.sa-home-featured__all { font-family: var(--sa-label); font-size: 1.02rem; white-space: nowrap; border-bottom: 1px solid var(--sa-hairline); transition: border-color var(--sa-dur) var(--sa-ease), opacity var(--sa-dur) var(--sa-ease); }
.sa-home-featured__all:hover { opacity: .65; border-color: var(--sa-ink); text-decoration: none; }

.sa-home .sa-similar__grid { gap: clamp(16px, 1.8vw, 28px); }
.sa-home .sa-similar__card {
  background: var(--sa-surface); border: 1px solid var(--sa-hairline);
  border-radius: var(--sa-r-surface); box-shadow: var(--sa-shadow-card);
  overflow: hidden;
  transition: box-shadow var(--sa-dur) var(--sa-ease), transform var(--sa-dur) var(--sa-ease);
}
.sa-home .sa-similar__card:hover { box-shadow: var(--sa-shadow-hover); transform: translateY(-3px); text-decoration: none; }
.sa-home .sa-similar__card img { border-radius: var(--sa-r-media) var(--sa-r-media) 0 0; }
.sa-home .sa-similar__meta { padding: 18px 20px 22px; }

/* ---------- Three service columns — now elevated cards, not hairline-topped text ---------- */
.sa-home-cols { padding: var(--sa-gap-section) 0; }
.sa-home-cols__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sa-gutter); }
.sa-home-col {
  background: var(--sa-surface); border: 1px solid var(--sa-hairline);
  border-radius: var(--sa-r-surface); box-shadow: var(--sa-shadow-card);
  padding: 32px var(--sa-gap-block) var(--sa-gap-block);
  transition: box-shadow var(--sa-dur) var(--sa-ease), transform var(--sa-dur) var(--sa-ease);
}
.sa-home-col:hover { box-shadow: var(--sa-shadow-hover); transform: translateY(-3px); }
.sa-home-col h3 { margin: 14px 0 12px; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem); }
.sa-home-col p { color: var(--sa-muted); margin: 0 0 18px; }
.sa-home-col a, .sa-home-col__ai {
  font-family: var(--sa-label); font-size: 1.02rem; color: var(--sa-ink);
  background: none; border: 0; border-bottom: 1px solid var(--sa-hairline); padding: 0 0 2px; cursor: pointer;
  transition: border-color var(--sa-dur) var(--sa-ease), opacity var(--sa-dur) var(--sa-ease);
}
.sa-home-col a:hover, .sa-home-col__ai:hover { opacity: .6; border-color: var(--sa-ink); text-decoration: none; }

/* ---------- Valuation beat (extends .sa-contact) — the other black beat, kept black ---------- */
.sa-home-cta { margin-top: 0; }
.sa-home-cta .sa-kicker { color: rgba(255,255,255,.55); margin: 0 0 14px; }
.sa-contact__link--btn {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.14);
  transition: opacity var(--sa-dur) var(--sa-ease), border-color var(--sa-dur) var(--sa-ease);
}
.sa-contact__link--btn:hover { opacity: .8; border-color: rgba(255,255,255,.3); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .sa-home-hero { grid-template-columns: 1fr; min-height: 0; }
  .sa-home-hero__media { min-height: 300px; clip-path: none; }
  .sa-home-hero__panel { padding: 32px 20px 44px; }
  .sa-home-ask { max-width: none; padding: 20px; gap: 14px; }
  /* Stack the pill on narrow screens: the input and the Ask AI button both
     need room, and squeezing them onto one line makes the input unusable. */
  .sa-home-hero__search { flex-wrap: wrap; border-radius: var(--sa-r-input); padding: 10px 12px; }
  .sa-home-hero__search input { flex: 1 1 100%; order: 1; padding: 6px 0; }
  .sa-home-hero__search-pin { order: 0; }
  .sa-home-hero__search-filters { order: 2; margin-left: auto; }
  .sa-home-hero__search button { order: 3; }
  .sa-home-search { grid-template-columns: 1fr; }
  .sa-home-search__photo { min-height: 240px; }
  .sa-home-cols__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sa-home-hero__link,
  .sa-home-hero__search,
  .sa-home-hero__search-pin,
  .sa-home-hero__search-filters,
  .sa-home-hero__search button,
  .sa-home-hero__search-arrow,
  .sa-home-ask__more svg,
  .sa-home-featured__all,
  .sa-home .sa-similar__card,
  .sa-home-col,
  .sa-home-col a, .sa-home-col__ai,
  .sa-contact__link--btn {
    transition: none;
  }

  /* Entrance + ambient motion ride `animation`, which the transition-only
     rule above never touches. Without this, animation-fill-mode:both would
     strand the panel/chips/spark at their pre-animation opacity:0 forever —
     a stuck-invisible bug, not a "no motion" experience. .sa-home-ask__chip
     also needs transition:none here (its hover lift), so it isn't repeated
     in the list above. */
  .sa-home-ask,
  .sa-home-ask__chip,
  .sa-home-ask__spark-mini,
  .sa-home-hero__search button,
  .sa-home-hero__search-arrow {
    transition: none;
    /* Same reason as the transform below: the overflow chips' reveal track
       is set by `.sa-home-ask__chips .is-extra .sa-home-ask__chip`, a
       (0,3,0) selector this list cannot outrank on its own. */
    animation: none !important;
    opacity: 1;
    /* !important is load-bearing here. The lifts these reset live on
       :hover/:focus-visible rules — (0,2,0) selectors — so a plain (0,1,0)
       declaration loses the cascade no matter where in the file it sits, and
       a reduced-motion user would still get every chip and the submit button
       jumping 1px under the pointer. Raising the selectors instead would mean
       tracking every future state variant; a user preference overriding
       presentation is exactly what !important is for.
       Deliberately NOT reset: .sa-home-ask__more svg's 180deg flip. That
       transform reports expanded/collapsed state — only its transition is
       dropped (list above), never the rotation itself. */
    transform: none !important;
  }
}