/* ===========================================================
   Auctus Realty — home page (loaded after auctus.css, home page only).
   Everything is scoped to .hm so no other page is affected. Header, menu, footer and .finale come from auctus.css.
   =========================================================== */
.hm { background: var(--paper); }
.hm section { position: relative; }
.hm-h2 { font-family: var(--serif); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.015em; word-spacing: 0.04em; max-width: 28ch; font-weight: 700; }
.hm-lede { font-size: var(--fs-desc); line-height: var(--lh-desc); color: var(--ink-soft); max-width: 54ch; margin: 0.8rem 0 0; }
.hm .tlink { font-size: 0.9375rem; }

/* ---------- Hero ----------
   Default: simple and white, like a search-led marketplace home. A photo or gradient hero is still available as an
   explicit Admin > Appearance choice (Hero image: plain colours / your own image) — that adds the .hm-hero--dark
   modifier (see applyHero() in core/theme.js), which brings back the full-bleed dark treatment below. */
.hm-hero { background: var(--paper); color: var(--ink); overflow: hidden; }
.hm-hero--dark { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; background: var(--night); color: var(--on-night); }
.hm-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hm-hero--dark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 11, 24, 0.55) 0%, rgba(10, 11, 24, 0.1) 32%, rgba(10, 11, 24, 0.35) 60%, rgba(10, 11, 24, 0.9) 100%); }
.hm-hero__in { position: relative; z-index: 2; width: 100%; padding-top: calc(var(--hdr) + clamp(10px, 1.4vw, 16px)); padding-bottom: clamp(12px, 1.8vw, 18px); }
.hm-hero__title { font-family: var(--serif); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.02em; word-spacing: 0.04em; margin-bottom: clamp(8px, 1.2vw, 12px); font-weight: 700; }
.hm-hero__title span { display: block; white-space: nowrap; }
.hm-hero__title span + span { font-style: italic; }
/* Search + chips on the left; the "why Auctus" tile sits beside them on the right, in what would otherwise be empty
   space, instead of stacking below and pushing the listings further down the page. */
/* Search + chips on the left; Why Auctus in the middle; Top Picks rotated circle on the right.
   Intro text and Why Auctus are positioned comfortably side-by-side with the rotated circle. */
.hm-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 440px);
  gap: clamp(16px, 2.5vw, 40px);
  align-items: center;
}
/* Three columns share one row height, so the headline top, the Why Auctus card and the Top pick badge start on one line,
   and the chips, the card's "Why Auctus" link and the circle caption finish on one line. The left column is only as
   wide as the headline (no dead space before the card); the Why Auctus card takes the rest of the width. */
.hm-hero__grid:has(.hm-picks-circle-wrap) {
  grid-template-columns: max-content minmax(0, 1fr) auto;
  gap: clamp(20px, 2.4vw, 36px);
  align-items: stretch;
}
/* Headline, search and chips stay together as one block anchored to the bottom of the row, so the chips, the card's
   "Why Auctus" link and the circle caption always finish on the same line (and there is never a gap under the headline). */
.hm-hero__grid:has(.hm-picks-circle-wrap) .hm-hero__main { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.hm-hero__grid:has(.hm-picks-circle-wrap) .hm-hero__title { margin-bottom: clamp(12px, 1.4vw, 18px); }
.hm-hero__grid:has(.hm-picks-circle-wrap) .hm-search { max-width: none; width: 100%; }
.hm-hero__grid:has(.hm-picks-circle-wrap) .hm-search input,
.hm-hero__grid:has(.hm-picks-circle-wrap) .hm-btn { height: 54px; }
.hm-hero__grid:has(.hm-picks-circle-wrap) .hm-chips { flex-wrap: nowrap; margin-top: 10px; }
.hm-search {
  display: flex;
  max-width: clamp(360px, 32vw, 490px);
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px rgba(21, 25, 50, 0.08);
}
.hm-hero--dark .hm-search { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.hm-search input { flex: 1; min-width: 0; height: 52px; padding: 0 18px; border: 0; background: transparent; font-size: 0.9375rem; }
.hm-search input::placeholder { color: rgba(20, 20, 20, 0.5); }
.hm-search input:focus-visible { outline: 2px solid var(--sand-deep); outline-offset: -2px; }
.hm-btn { flex: none; height: 52px; padding: 0 24px; border: 0; background: var(--ink); color: var(--paper); font-size: 0.9375rem; font-weight: 500; cursor: pointer; transition: background 0.25s; }
.hm-btn:hover { background: var(--sand-deep); }
.hm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hm-chips a { display: inline-block; padding: 0.45em 1em; font-size: 0.8125rem; text-decoration: none; background: var(--stone); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.hm-chips a:hover { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.hm-hero--dark .hm-chips a { background: rgba(255, 255, 255, 0.12); color: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38); backdrop-filter: blur(6px); }
.hm-hero--dark .hm-chips a:hover { background: var(--paper); color: var(--ink); }
/* Tablet: headline/search and the circle share the first row (same top and bottom edges); Why Auctus runs full width
   underneath, instead of being squeezed into a narrow middle column. */
@media (max-width: 1100px) {
  .hm-hero__grid:has(.hm-picks-circle-wrap) {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px 24px;
  }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-tile { grid-column: 1 / -1; order: 3; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-chips { flex-wrap: wrap; }
}
@media (max-width: 860px) {
  .hm-hero__grid,
  .hm-hero__grid:has(.hm-picks-circle-wrap) {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hm-picks-circle-wrap {
    margin: 4px auto 0;
  }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-tile { order: 0; }
}

/* ---------- Hero tile: Why Auctus highlight card (high contrast, commanding attention) ---------- */
.hm-tile {
  background: linear-gradient(145deg, #151936 0%, #0d1026 100%);
  border: 1px solid rgba(154, 134, 255, 0.4);
  box-shadow: 0 16px 36px rgba(15, 20, 50, 0.18), 0 0 0 1px rgba(74, 47, 208, 0.25);
  border-radius: var(--r-card, 16px);
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.2vw, 22px);
  color: #ffffff;
}
.hm-hero--dark .hm-tile {
  background: rgba(16, 19, 42, 0.88);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
}
.hm-tile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.hm-tile__kicker-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hm-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #f59e0b;
  color: #151936;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.hm-tile__kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #f59e0b;
}
.hm-tile__pill {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(154, 134, 255, 0.22);
  color: #dcd3ff;
  border: 1px solid rgba(154, 134, 255, 0.35);
}
.hm-tile p,
.hm-tile__intro {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-desc);
  line-height: var(--lh-desc);
}
.hm-tile__intro strong {
  color: #ffffff;
  font-weight: 600;
}
.hm-hero--dark .hm-tile p,
.hm-hero--dark .hm-tile__intro {
  color: rgba(255, 255, 255, 0.92);
}
.hm-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px 0;
  padding: 0;
  border: none;
}
.hm-tile__fact {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 7px 9px;
}
.hm-tile__fact dt,
.hm-hero__facts dt {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}
.hm-tile__fact dd,
.hm-hero__facts dd {
  font-size: 0.6875rem;
  color: rgba(220, 225, 255, 0.75);
  margin: 2px 0 0 0;
  line-height: 1.25;
}
.hm-hero--dark .hm-hero__facts dt { color: #ffffff; }
.hm-hero--dark .hm-hero__facts dd { color: rgba(220, 225, 255, 0.75); }
.hm-tile__foot {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 9px;
}
.hm-tile .tlink,
.hm-tile__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: #f59e0b;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s, color 0.2s;
}
.hm-tile .tlink:hover,
.hm-tile__link:hover {
  color: #fbbf24;
  gap: 7px;
}

/* Rotated Circle Top Picks Container: positioned after Why Auctus at the top */
.hm-picks-circle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 216px;
  flex-shrink: 0;
  align-self: center;
  padding: 4px;
}

.hm-circle-kicker {
  margin-bottom: 6px;
}
.hm-circle-kicker .tag--top {
  background: var(--sand-deep, #b8860b);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.3);
}

.hm-circle-ring-container {
  position: relative;
  width: 204px;
  height: 204px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Spinning SVG circular text */
.hm-circle-svg-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  animation: rotateCircleRing 28s linear infinite;
  transform-origin: center center;
  overflow: visible;
}
@keyframes rotateCircleRing {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hm-circle-svg-text {
  font-family: var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: #78350f; /* crisp, high-contrast dark amber/gold, distinct from background and image */
}
.hm-hero--dark .hm-circle-svg-text {
  fill: #fbbf24;
}

/* Viewport inside circle */
.hm-circle-viewport {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 3px var(--sand-deep, #b8860b), 0 0 0 6px rgba(184, 134, 11, 0.16), 0 8px 24px rgba(0, 0, 0, 0.2);
  background: #0d1026;
  z-index: 2;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hm-circle-viewport:hover {
  transform: scale(1.04);
  box-shadow: 0 0 0 3px var(--sand-deep, #b8860b), 0 0 0 7px rgba(184, 134, 11, 0.25), 0 12px 30px rgba(0, 0, 0, 0.28);
}

/* Individual slides in circle */
.hm-circle-viewport .pcard {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
  transform: scale(0.92);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  pointer-events: none;
}

.hm-circle-viewport .pcard[data-active="true"],
.hm-circle-viewport .pcard.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}

.hm-circle-viewport .pcard .pcard__link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
  color: #fff;
  border-radius: 50%;
  overflow: hidden;
}

.hm-circle-viewport .pcard .pcard__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.hm-circle-viewport .pcard .pcard__slides,
.hm-circle-viewport .pcard .pcard__slide,
.hm-circle-viewport .pcard .pcard__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hm-circle-viewport .pcard .pcard__tags {
  display: none;
}

.hm-circle-viewport .pcard .pcard__body {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(13, 16, 38, 0.4) 65%, rgba(13, 16, 38, 0.88) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 6px 8px 9px;
  text-align: center;
}

.hm-circle-viewport .pcard .pcard__price {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  letter-spacing: 0.01em;
}

.hm-circle-viewport .pcard .pcard__title,
.hm-circle-viewport .pcard .pcard__place,
.hm-circle-viewport .pcard .pcard__go {
  display: none;
}

/* Prominent Property Caption below the circle */
.hm-circle-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 8px;
  text-decoration: none;
  max-width: 210px;
  gap: 2px;
  transition: opacity 0.3s ease;
}
.hm-circle-caption:hover .hm-circle-caption__name {
  color: var(--sand-deep, #b8860b);
}
.hm-circle-caption__name {
  font-family: var(--serif, Georgia, serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink, #0e0f10);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hm-hero--dark .hm-circle-caption__name {
  color: #ffffff;
}
.hm-circle-caption__meta {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-soft, #555968);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hm-hero--dark .hm-circle-caption__meta {
  color: rgba(220, 225, 255, 0.75);
}
.hm-circle-caption__cta {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--sand-deep, #b8860b);
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* ---------- Hero, three-column version (Why Auctus + Top pick circle) ----------
   Tile: laid out as a column so its link always sits on the bottom edge (level with the chips).
   Circle: badge on the top edge, caption on the bottom edge, ring centred between them. */
.hm-hero__grid:has(.hm-picks-circle-wrap) .hm-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px clamp(16px, 1.6vw, 22px);
}
.hm-hero__grid:has(.hm-picks-circle-wrap) .hm-tile__top { margin-bottom: 8px; }
.hm-hero__grid:has(.hm-picks-circle-wrap) .hm-tile__intro { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.5; text-wrap: pretty; }
.hm-hero__grid:has(.hm-picks-circle-wrap) .hm-tile__fact { padding: 6px 8px; }
.hm-hero__grid:has(.hm-picks-circle-wrap) .hm-tile__fact dt { font-size: 0.8rem; }
.hm-hero__grid:has(.hm-picks-circle-wrap) .hm-hero__facts { margin: 0 0 10px; }
.hm-hero__grid:has(.hm-picks-circle-wrap) .hm-tile__foot { margin-top: auto; padding-top: 8px; }
.hm-hero__grid:has(.hm-picks-circle-wrap) .hm-picks-circle-wrap {
  width: auto;
  min-width: 190px;
  align-self: stretch;
  justify-content: space-between;
  padding: 0;
}
.hm-hero__grid:has(.hm-picks-circle-wrap) .hm-circle-kicker { margin: 0; }
.hm-hero__grid:has(.hm-picks-circle-wrap) .hm-circle-ring-container { width: 176px; height: 176px; margin: 2px 0; }
.hm-hero__grid:has(.hm-picks-circle-wrap) .hm-circle-viewport { width: 116px; height: 116px; }

/* Price inside the circle: a solid white pill at the bottom of the photo, so it reads clearly on any image.
   (The generic card rule gives .pcard__body "flex-flow: row wrap; align-content: flex-start", which pushed the price
   to the top-left corner where the circle clipped it; nowrap + normal alignment keeps it centred at the bottom.) */
.hm-circle-viewport .pcard .pcard__body {
  flex-wrap: nowrap;
  align-content: normal;
  padding: 0 6px 12px;
  background: linear-gradient(180deg, transparent 45%, rgba(13, 16, 38, 0.55) 100%);
}
.hm-circle-viewport .pcard .pcard__price {
  flex: none;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink, #0e0f10);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-shadow: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 1.5px var(--sand-deep, #b8860b);
}

/* Caption: name and "location • configuration" share ONE line (never wrapped); "View Top Pick" sits under it. */
.hm-circle-caption {
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  justify-content: center;
  align-items: baseline;
  row-gap: 2px;
  margin-top: 0;
  max-width: 300px;
}
.hm-circle-caption__name { min-width: 0; font-size: 0.875rem; }
.hm-circle-caption__meta { max-width: none; overflow: visible; font-size: 0.75rem; }
.hm-circle-caption__meta:not(:empty)::before { content: "·"; margin: 0 0.45em; font-weight: 700; color: var(--ink-soft, #555968); }
.hm-circle-caption__cta { grid-column: 1 / -1; justify-self: center; margin-top: 0; }

/* ---------- Listings & Top picks (Magicbricks style: distinct, high visibility) ---------- */
.hm-picks {
  background: color-mix(in srgb, var(--sand-deep) 6%, var(--paper));
  border-top: 1px solid color-mix(in srgb, var(--sand-deep) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--sand-deep) 16%, transparent);
  padding-block: clamp(14px, 2vw, 24px);
}
.hm-listings {
  background: var(--paper);
  padding-block: clamp(12px, 1.8vw, 20px);
}
.hm-listings--resale {
  padding-bottom: clamp(6px, 1vw, 12px);
}
.hm-listings--builder {
  padding-top: clamp(6px, 1vw, 12px);
}
/* Home page only: Current listings, then Developer Direct Properties directly below it. Small cards (6 across on
   desktop, wide photo crop, three short text lines) so BOTH rows of cards are fully visible on first load, not just
   the headings. The Properties page keeps its larger cards. */
.hm-listings { padding-block: 10px; }
.hm-listings--resale { padding-top: clamp(14px, 1.6vw, 20px); padding-bottom: 6px; }
.hm-listings--builder { padding-top: 6px; padding-bottom: clamp(16px, 2vw, 24px); }
.hm-listings .hm-head { margin-bottom: 10px; }
.hm-listings .hm-head .hm-h2 { font-size: clamp(1.3rem, 1.7vw, 1.6rem); max-width: none; }
.hm-listings .hm-head__count { font-size: 0.875rem; }
.hm-listings .hm-head .tlink { font-size: 0.8125rem; }
.hm-listings .pgrid--flat { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.hm-listings .pcard__media,
.hm-listings .pcard__nav { aspect-ratio: 2 / 1; }
.hm-listings .pcard__body { gap: 0; padding: 8px 10px 9px; line-height: 1.3; }
.hm-listings .pcard__title { font-size: 0.85rem; }
.hm-listings .pcard__place { margin-top: 1px; font-size: 0.72rem; }
.hm-listings .pcard__meta { display: block; margin-top: 1px; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-listings .pcard__meta span + span::before { width: 3px; height: 3px; margin: 0 0.45em; }
.hm-listings .pcard__price { margin-top: 0; padding-top: 4px; font-size: 0.9rem; white-space: nowrap; }
/* The whole card is the link; the small arrow button is dropped here so full price ranges fit on one line. */
.hm-listings .pcard__go { display: none; }
@media (max-width: 860px) { .hm-listings .hm-head__title-group { flex-wrap: wrap; row-gap: 4px; } }
.hm-listings .pcard .fav { transform: scale(0.8); transform-origin: top right; }
/* Heading row stays on one line on desktop: the description gives way (ellipsis) before the "View all" link wraps. */
@media (min-width: 861px) {
  .hm-listings .hm-head__bar { flex-wrap: nowrap; }
  .hm-listings .hm-head__title-group { flex: none; }
  .hm-listings .hm-head .hm-h2 { white-space: nowrap; }
  .hm-listings .hm-head__count { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hm-listings .hm-head__actions { flex: none; }
}
@media (max-width: 1200px) { .hm-listings .pgrid--flat { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .hm-listings .pgrid--flat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .hm-listings .pgrid--flat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hm-listings .pgrid--flat { grid-template-columns: 1fr; gap: 14px; } .hm-listings .pcard__media, .hm-listings .pcard__nav { aspect-ratio: 16 / 9; } }
.hm-head { margin-bottom: clamp(12px, 1.5vw, 18px); }
.hm-head__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; width: 100%; }
.hm-head__title-group { display: flex; align-items: center; gap: 10px; }
.hm-head__icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sand-deep); color: #fff; font-size: 0.75rem; font-weight: bold; }
.hm-head .hm-h2 { margin: 0; font-family: var(--serif); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.015em; font-weight: 700; }
.hm-badge { display: inline-flex; align-items: center; padding: 2px 10px; font-size: 0.75rem; font-weight: 600; border-radius: 999px; background: var(--sand-deep); color: #fff; letter-spacing: 0.02em; }
.hm-badge--subtle { background: var(--stone); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.hm-head__count { margin: 0; color: var(--ink-soft); font-size: var(--fs-desc); line-height: var(--lh-desc); }
.hm-head__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-left: auto;
}
.hm-head__filters {
  display: inline-flex;
  align-items: center;
  background: var(--stone, #f3f4f6);
  padding: 3px;
  border-radius: 999px;
  gap: 2px;
  box-shadow: inset 0 0 0 1px var(--line, #e5e7eb);
}
.hm-filter-pill {
  border: none;
  background: transparent;
  color: var(--ink-soft, #555968);
  font-family: var(--sans, sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1.2;
}
.hm-filter-pill:hover {
  color: var(--ink, #0e0f10);
}
.hm-filter-pill.is-active {
  background: #ffffff;
  color: var(--ink, #0e0f10);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.hm-head .tlink { font-weight: 600; color: var(--sand-deep); font-size: 0.875rem; }

@media (max-width: 860px) {
  .hm-head__bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hm-head__actions { width: 100%; justify-content: space-between; margin-left: 0; margin-top: 6px; }
  .hm-head .tlink { margin-left: 0; }
}
.hm-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 52px) clamp(14px, 2vw, 32px); }
.hm-card { grid-column: span 6; display: block; text-decoration: none; }
.hm-card:nth-child(4n + 1), .hm-card:nth-child(4n + 4) { grid-column: span 7; }
.hm-card:nth-child(4n + 2), .hm-card:nth-child(4n + 3) { grid-column: span 5; }
.hm-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hm-card__media { position: relative; height: clamp(260px, 42vw, 600px); overflow: hidden; background: var(--stone); }
.hm-card:last-child:nth-child(odd) .hm-card__media { height: clamp(260px, 36vw, 540px); }
.hm-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hm-card:hover .hm-card__media img { transform: scale(1.04); }
.hm-tags { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; }
.hm-tags .tag { background: var(--paper); color: var(--ink); box-shadow: none; font-size: 0.75rem; padding: 0.35em 0.85em; }
.hm-card__body { padding-top: 16px; }
.hm-card__place { margin: 0 0 0.3rem; font-size: 0.8125rem; color: var(--ink-soft); }
.hm-card__title { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.08; letter-spacing: -0.015em; }
.hm-card__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0.6rem 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.hm-card__meta span:last-child { color: var(--ink); font-weight: 500; }
.hm-card__go { display: inline-block; margin-top: 0.9rem; font-size: 0.875rem; font-weight: 500; padding-bottom: 0.2em; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; transition: background-size 0.45s var(--ease); }
.hm-card:hover .hm-card__go { background-size: 30% 1px; }

/* ---------- Inside the developments: a swipeable strip ---------- */
.hm-inside { padding-block: clamp(24px, 4vw, 56px) clamp(48px, 6vw, 96px); }
.hm-inside .hm-h2 { margin-bottom: clamp(20px, 3vw, 40px); }
.hm-inside__strip { display: flex; gap: clamp(12px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x proximity; padding: 0 var(--gutter) 12px; scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; }
.hm-inside__strip figure { flex: none; width: clamp(240px, 32vw, 460px); margin: 0; scroll-snap-align: start; }
.hm-inside__strip a { display: block; text-decoration: none; }
.hm-inside__strip .frame { aspect-ratio: 4 / 5; }
.hm-inside__strip .frame img { transition: transform 1s var(--ease); }
.hm-inside__strip a:hover .frame img { transform: scale(1.04); }
.hm-inside__strip figcaption { margin-top: 0.6rem; font-size: 0.8125rem; color: var(--ink-soft); }

/* ---------- Steps ---------- */
.hm-steps { padding-block: clamp(56px, 8vw, 120px); border-top: 1px solid var(--line); }
.hm-steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(28px, 4vw, 56px); counter-reset: step; }
.hm-steps__list li { counter-increment: step; padding-top: 18px; border-top: 2px solid var(--ink); }
.hm-steps__list li::before { content: counter(step); display: block; font-size: 0.8125rem; font-weight: 500; color: var(--sand-deep); margin-bottom: 1.4rem; }
.hm-steps__list h3, .hm-lines h3, .hm-why__cols h3 { font-family: var(--serif); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -0.01em; margin-bottom: 0.6rem; font-weight: 600; }
.hm-steps__list p { margin: 0; color: var(--ink-soft); font-size: var(--fs-desc); line-height: var(--lh-desc); max-width: 36ch; }

/* ---------- Where ---------- */
.hm-where { padding-block: clamp(56px, 8vw, 120px); }
.hm-where .where { margin-top: clamp(28px, 4vw, 56px); }
.hm-where .where__intro { display: none; }
.hm-where .where__intro { color: var(--ink-soft); font-size: var(--fs-desc); line-height: var(--lh-desc); margin-bottom: 0.8rem; }
.hm-where .where__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 12px clamp(16px, 3vw, 48px); align-items: baseline; padding-block: clamp(18px, 2.4vw, 30px); border-top: 1px solid var(--line); }
.hm-where .where__row:last-child { border-bottom: 1px solid var(--line); }
.hm-where .where__place { margin: 0; font-family: var(--serif); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -0.01em; font-weight: 600; }
.hm-where .where__detail, .hm-where .where__links { margin: 0; font-size: 0.9375rem; }
.hm-where .where__detail { color: var(--ink-soft); }

/* ---------- Why (dark) ---------- */
.hm-why { padding-block: clamp(56px, 8vw, 120px); background: var(--night); color: var(--on-night); }
.hm-why__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin: clamp(28px, 4vw, 56px) 0 clamp(24px, 3vw, 40px); }
.hm-why__cols > div { padding-top: 18px; border-top: 1px solid var(--line-night); }
.hm-why__cols p { margin: 0; color: var(--on-night-soft); font-size: var(--fs-desc); line-height: var(--lh-desc); max-width: 36ch; }
.hm-why .hm-h2 { max-width: 28ch; }

/* ---------- NRI ---------- */
.hm-nri { padding-block: clamp(56px, 8vw, 120px); }
.hm-nri__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 88px); align-items: center; }
.hm-nri__fig { margin: 0; }
.hm-nri__fig .frame { aspect-ratio: 4 / 5; }
.hm-lines { margin: clamp(20px, 3vw, 36px) 0 1.6rem; }
.hm-lines > div { padding-block: 16px; border-top: 1px solid var(--line); }
.hm-lines > div:last-child { border-bottom: 1px solid var(--line); }
.hm-lines p { margin: 0; color: var(--ink-soft); font-size: var(--fs-desc); line-height: var(--lh-desc); max-width: 52ch; }

/* ---------- Founder ---------- */
.hm-founder { padding-block: clamp(48px, 7vw, 104px); background: var(--stone); }
.hm-founder__name { font-family: var(--serif); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.015em; font-weight: 700; margin-bottom: 0.5rem; }
.hm-founder__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px clamp(16px, 3vw, 40px); margin: clamp(24px, 3.5vw, 44px) 0; }
.hm-founder__facts > div { padding-top: 12px; border-top: 1px solid var(--line); }
.hm-founder__facts dt { font-size: 0.75rem; color: var(--ink-soft); margin-bottom: 0.3rem; }
.hm-founder__facts dd { margin: 0; font-size: 0.9375rem; }
.hm-founder__bio { max-width: 62ch; margin: 0; color: var(--ink-soft); font-size: var(--fs-desc); line-height: var(--lh-desc); }

@media (max-width: 860px) {
  .hm-hero__facts, .hm-steps__list, .hm-why__cols { grid-template-columns: 1fr; gap: 18px; }
  .hm-hero__facts > div { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .hm-hero__facts dd { margin: 0; }
  .hm-nri__grid { grid-template-columns: 1fr; }
  .hm-nri__fig { max-width: 420px; }
  .hm-founder__facts { grid-template-columns: 1fr 1fr; }
  .hm-where .where__row { grid-template-columns: 1fr; gap: 6px; }
  .hm-card, .hm-card:nth-child(n) { grid-column: 1 / -1; }
  .hm-card:last-child:nth-child(odd) .hm-card__media { height: clamp(240px, 62vw, 420px); }
}
@media (max-width: 520px) {
  .hm-search { flex-direction: column; }
  .hm-btn { width: 100%; height: 52px; }
  .hm-search input { flex: none; width: 100%; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-card__media img, .hm-inside__strip .frame img { transition: none; }
}

/* The one moment on the page: two arms sweep round "handled personally." and end in cupped, protecting hands. Drawn once
   when the page opens. Only in the dark hero (Admin > Appearance): the simple default hero has no room or need for it. */
.hm-hero__title span.hm-line { position: relative; display: inline-block; }
.hm-hero--dark .hm-hero__title span.hm-line { margin-block: 2.1em; }
.hm-embrace { display: none; }
.hm-hero--dark .hm-embrace { display: block; position: absolute; left: -16%; top: 50%; width: 132%; height: auto; transform: translateY(-50%); overflow: visible; pointer-events: none; fill: none; stroke: var(--on-night); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); }
.hm-embrace path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hm-draw 1.7s cubic-bezier(0.6, 0, 0.2, 1) 0.8s forwards; }
.hm-embrace .e--high path { animation-delay: 1.6s; }
@keyframes hm-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .hm-embrace path { animation: none; stroke-dashoffset: 0; } }
/* Shorter laptop screens (e.g. 1440x800, 1366x768): a tighter hero so both listing rows still fit on first load. */
@media (min-width: 1101px) and (max-height: 820px) {
  .hm-hero__in { padding-top: calc(var(--hdr) + 8px); padding-bottom: 8px; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-hero__title { font-size: clamp(2.2rem, 3.3vw, 2.9rem); margin-bottom: 10px; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-search input,
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-btn { height: 48px; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-chips { margin-top: 8px; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-tile { padding: 11px 16px; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-tile__top { margin-bottom: 6px; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-tile__intro { font-size: 0.85rem; line-height: 1.45; margin-bottom: 8px; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-hero__facts { margin-bottom: 8px; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-tile__foot { padding-top: 6px; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-circle-ring-container { width: 150px; height: 150px; margin: 0; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-circle-viewport { width: 100px; height: 100px; }
  .hm-circle-viewport .pcard .pcard__body { padding-bottom: 9px; }
  .hm-circle-viewport .pcard .pcard__price { font-size: 0.8125rem; padding: 2px 8px; }
  .hm-listings--resale { padding-top: 8px; padding-bottom: 4px; }
  .hm-listings--builder { padding-top: 4px; }
  .hm-listings .hm-head { margin-bottom: 8px; }
  .hm-listings .pcard__media, .hm-listings .pcard__nav { aspect-ratio: 2.4 / 1; }
}
/* Very short windows (e.g. 1366x650, 1536x730 once browser toolbars are counted): tighter still. The three fact
   boxes are dropped here only; the same facts are in the card's text and further down the page. */
@media (min-width: 1101px) and (max-height: 740px) {
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-hero__facts { display: none; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-hero__title { font-size: clamp(2rem, 2.8vw, 2.4rem); margin-bottom: 8px; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-search input,
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-btn { height: 44px; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-chips { margin-top: 6px; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-chips a { padding: 0.3em 0.85em; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-circle-kicker .tag--top { padding: 1px 8px; font-size: 0.65rem; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-circle-ring-container { width: 128px; height: 128px; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-circle-viewport { width: 86px; height: 86px; }
  .hm-circle-viewport .pcard .pcard__price { font-size: 0.75rem; }
  .hm-circle-svg-text { font-size: 12.5px; }
  .hm-listings .hm-head .hm-h2 { font-size: 1.2rem; }
  .hm-listings .pcard__media, .hm-listings .pcard__nav { aspect-ratio: 2.8 / 1; }
}
@media (min-width: 1101px) and (max-height: 680px) {
  .hm-hero__in { padding-top: calc(var(--hdr) + 4px); padding-bottom: 4px; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-circle-ring-container { width: 116px; height: 116px; }
  .hm-hero__grid:has(.hm-picks-circle-wrap) .hm-circle-viewport { width: 78px; height: 78px; }
  .hm-circle-svg-text { font-size: 13.5px; }
  .hm-listings--resale { padding-top: 4px; padding-bottom: 0; }
  .hm-listings--builder { padding-top: 2px; }
}