/* homehunt.ch — design system
   One blue (#1F4E79), warm neutrals, Hanken Grotesk + JetBrains Mono.
   Tokens mirror the brand colors.css. */

:root {
  --hh-blue: #1F4E79;
  --hh-blue-press: #173A5A;
  --hh-blue-tint: #ECF1F6;

  --hh-ink: #1C1C1A;
  --hh-ink-2: #57544E;
  --hh-muted: #6B6860;

  --hh-canvas: #FAFAF9;
  --hh-surface: #FFFFFF;
  --hh-surface-2: #F4F3F1;
  --hh-line: #E7E5E1;

  --hh-success: #2E7D5B;
  --hh-danger: #B23A48;
  /* Same muted, warm family as the two above — a warning is not an error, but
     it now has to be distinguishable, since warnings stay on screen. */
  --hh-warning: #A6741C;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(28, 28, 26, 0.06);
  --shadow: 0 6px 24px rgba(28, 28, 26, 0.08);
  --shadow-lg: 0 18px 50px rgba(28, 28, 26, 0.12);

  --font-ui: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1180px;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  color: var(--hh-ink);
  background: var(--hh-canvas);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--hh-blue); text-decoration: none; }
a:hover { color: var(--hh-blue-press); }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
small { color: var(--hh-muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- layout */
.wrap { width: min(var(--wrap), 92vw); margin-inline: auto; }
.section { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.muted { color: var(--hh-muted); }
.eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--hh-blue);
}
.stack > * + * { margin-top: 1rem; }
.cluster { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* -------------------------------------------------------------------- nav */
.site-header {
  /* Above Leaflet panes (tiles/markers use z-index 200–700). */
  position: sticky; top: 0; z-index: 1000;
  background: rgba(250, 250, 249, 0.85);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--hh-line);
}
.site-header__bar {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 1rem 1.4rem;
  height: 68px;
}
.brand-lockup { height: 30px; width: auto; }
/* --- richer brand lockup + nav actions (reference home) --- */
.brand { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; grid-column: 1; }
.brand__mark { width: 34px; height: 34px; border-radius: 9px; display: block; flex-shrink: 0; }
.brand__word { font-weight: 800; font-size: 1.18rem; letter-spacing: -0.02em; color: var(--hh-ink); }
.brand__word .tld { color: var(--hh-blue); }
.primary-nav {
  grid-column: 2;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-left: 0;
  flex: none;
  justify-content: flex-start;
}
.primary-nav a { color: var(--hh-ink-2); font-weight: 600; font-size: .96rem; white-space: nowrap; }
.primary-nav a:hover { color: var(--hh-ink); }
.primary-nav a.active { color: var(--hh-blue); }

.site-actions { grid-column: 4; display: flex; align-items: center; gap: .85rem; margin-left: 0; flex-shrink: 0; }
.header-end { grid-column: 5; display: flex; align-items: center; gap: .5rem; flex-shrink: 0; margin-left: 0; }
.lang { position: relative; }
.lang > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; color: var(--hh-ink-2); font-weight: 600; font-size: .9rem; padding: .4rem .2rem; }
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary svg { width: 16px; height: 16px; }
.lang__menu { position: absolute; right: 0; top: 110%; background: var(--hh-surface); border: 1px solid var(--hh-line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: .35rem; min-width: 150px; z-index: 60; }
.lang__menu a,
.lang__menu button { display: flex; width: 100%; justify-content: space-between; gap: .5rem; padding: .45rem .6rem; border-radius: 7px; font-size: .9rem; font-weight: 600; color: var(--hh-ink-2); }
/* The switcher entries are set_language submit buttons; strip the native
   button chrome so they look identical to the anchors they replaced. */
.lang__menu button { border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left; }
.lang__menu a:hover,
.lang__menu button:hover { background: var(--hh-surface-2); }
.lang__menu a.is-active,
.lang__menu button.is-active { color: var(--hh-blue); }
.lang__menu a .soon { font-size: .68rem; color: var(--hh-muted); font-weight: 600; }
/* Mobile: language lives in the hamburger drawer (keeps the icon bar clean). */
.nav-lang { display: none; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--hh-ink-2); position: relative; border: none; background: none; padding: 0; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.icon-btn:hover { background: var(--hh-surface-2); color: var(--hh-ink); }
.icon-btn:focus-visible { outline: 2px solid var(--hh-blue); outline-offset: 2px; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--hh-blue); border: 2px solid var(--hh-canvas); }
.icon-btn.nav-toggle { flex-shrink: 0; box-shadow: none; }
.icon-btn.nav-toggle.is-open { background: var(--hh-blue-tint); color: var(--hh-blue); }
.header-signin { flex-shrink: 0; white-space: nowrap; }
.header-signin:hover { color: #fff; }
.list-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .85rem; border: 1px solid var(--hh-line); border-radius: var(--radius-sm); font-weight: 600; font-size: .92rem; color: var(--hh-ink); background: var(--hh-surface); }
.list-btn:hover { border-color: var(--hh-blue); color: var(--hh-blue); }
.avatar-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hh-line); display: grid; place-items: center; color: var(--hh-ink-2); background: var(--hh-surface); }
.avatar-btn:hover { border-color: var(--hh-blue); color: var(--hh-blue); }
.avatar-btn svg { width: 20px; height: 20px; }

/* Sign out — icon in header (desktop); full control in mobile nav drawer. */
.logout-form { display: inline-flex; margin: 0; flex-shrink: 0; }
.logout-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: var(--font-ui); font-weight: 600; font-size: .85rem;
  padding: 0; border-radius: 10px;
  border: 1px solid var(--hh-line); background: var(--hh-surface);
  color: var(--hh-ink-2); cursor: pointer; transition: .15s ease;
  white-space: nowrap; width: 38px; height: 38px;
}
.logout-btn:hover { background: var(--hh-surface-2); color: var(--hh-ink); border-color: var(--hh-blue); }
.logout-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.site-actions .logout-btn__label { display: none; }
.nav-account { display: none; }
.nav-account .logout-btn {
  width: 100%; height: auto; padding: .55rem .85rem;
  border-radius: var(--radius-sm); justify-content: center;
}
.nav-account .logout-btn__label { display: inline; }

/* ------------------------------------------------------------------ button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-ui); font-weight: 600; font-size: .95rem;
  padding: .7rem 1.2rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; transition: .15s ease;
  background: var(--hh-surface-2); color: var(--hh-ink);
}
.btn:hover { background: var(--hh-line); }
.btn--primary { background: var(--hh-blue); color: #fff; }
.btn--primary:hover { background: var(--hh-blue-press); color: #fff; }
.btn--ghost { background: transparent; border-color: var(--hh-line); }
.btn--ghost:hover { background: var(--hh-surface-2); }
.btn--block { width: 100%; }
.btn--sm { padding: .45rem .8rem; font-size: .85rem; }

/* After .btn — otherwise inline-flex wins and the hamburger shows on desktop. */
.site-header .nav-toggle { display: none; }

/* ------------------------------------------------------------------- chips */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .65rem; border-radius: 999px;
  background: var(--hh-surface-2); border: 1px solid var(--hh-line);
  font-size: .82rem; color: var(--hh-ink-2); font-weight: 600;
}
.chip--blue { background: var(--hh-blue-tint); border-color: transparent; color: var(--hh-blue); }
.tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .2rem .5rem; border-radius: 6px;
}
.tag--rent { background: var(--hh-blue-tint); color: var(--hh-blue); }
.tag--sale { background: var(--hh-surface-2); color: var(--hh-ink-2); }

/* ------------------------------------------------------------------- forms */
label { font-size: .82rem; font-weight: 600; color: var(--hh-ink-2); display: block; margin-bottom: .3rem; }
input, select, textarea {
  width: 100%; font-family: var(--font-ui); font-size: .95rem; color: var(--hh-ink);
  padding: .6rem .7rem; border: 1px solid var(--hh-line); border-radius: var(--radius-sm);
  background: var(--hh-surface); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--hh-blue);
  box-shadow: 0 0 0 3px var(--hh-blue-tint);
}
/* iOS Safari zooms the whole page when a focused field is under 16px, and
   .95rem is 15.2px — so tapping any filter on a phone jumped the layout and
   left the visitor pinched in. Raised on small screens only: the desktop
   scale is unchanged. */
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px; }
}
.field { margin-bottom: .9rem; }
.field--required > label::after,
.field--required > .account-type-label::after {
  content: "\00a0*";
  color: var(--hh-danger);
  font-weight: 700;
}
.field .optional {
  font-weight: 500;
  color: var(--hh-muted);
  text-transform: none;
  letter-spacing: 0;
}
.field--error input, .field--error select, .field--error textarea { border-color: var(--hh-danger); }
.field--error .account-type__option { border-color: var(--hh-danger); }
.field--ok input, .field--ok select, .field--ok textarea { border-color: #2f6f4e; }
.errorlist { list-style: none; padding: 0; margin: .3rem 0 0; color: var(--hh-danger); font-size: .82rem; }
.field__live-error {
  list-style: none; padding: 0; margin: .3rem 0 0; color: var(--hh-danger); font-size: .82rem;
}
.field__live-error[hidden] { display: none !important; }
.helptext { font-size: .78rem; color: var(--hh-muted); margin-top: .25rem; }
.pw-rules {
  list-style: none; padding: 0; margin: .45rem 0 0; font-size: .78rem; color: var(--hh-muted);
  display: grid; gap: .2rem;
}
.pw-rules li::before {
  content: "○";
  display: inline-block;
  width: 1.1em;
  color: var(--hh-muted);
}
.pw-rules li.is-ok { color: #2f6f4e; }
.pw-rules li.is-ok::before { content: "✓"; color: #2f6f4e; }
.pw-rules li.is-bad { color: var(--hh-danger); }
.pw-rules li.is-bad::before { content: "✕"; color: var(--hh-danger); }
.grid-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; }

.wrap--narrow { max-width: 440px; }
.auth-title { font-size: clamp(1.35rem, 4vw, 1.6rem); }
.auth-footer { margin-top: 1rem; font-size: .9rem; }

/* ---------------------------------------------------------------- dashboard */
.dash { padding-top: 1.75rem; padding-bottom: 3.5rem; }
.dash__intro { margin-bottom: .15rem; }
.dash__intro h1 { margin-bottom: .4rem; letter-spacing: -.02em; }
.dash__intro .muted { margin: 0; max-width: 54ch; line-height: 1.45; }
.dash__status {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem;
  margin-top: 1.35rem; padding: .9rem 1.1rem;
  background: var(--hh-surface); border: 1px solid var(--hh-line);
  border-radius: var(--radius); max-width: 920px;
}
.dash__agency-name {
  font-weight: 600; color: var(--hh-ink); font-size: .95rem;
  margin-right: .15rem;
}
.dash__cap {
  margin-left: auto; font-size: .875rem; font-weight: 500;
  color: var(--hh-ink-2); white-space: nowrap;
  font-family: var(--font-ui);
  padding: .2rem .55rem; border-radius: 999px;
  background: var(--hh-surface-2);
}
.dash__hint { margin: .85rem 0 0; font-size: .9rem; max-width: 62ch; line-height: 1.45; }
.dash__section { margin-top: 2.5rem; padding-top: .15rem; }
.dash__section + .dash__section { border-top: 0; }
.dash__h2 { margin: 0 0 1rem; font-size: 1.2rem; letter-spacing: -.015em; }
.dash__h2 .mono { font-size: .95rem; font-weight: 500; }
.dash__grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.dash__listing { padding: 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .15rem; }
.dash__listing-title { max-width: 28ch; line-height: 1.3; }
.dash__listing-meta { font-size: .82rem; margin: .35rem 0 .15rem; }
.dash__listing-actions { gap: .4rem; flex-wrap: wrap; margin-top: auto; padding-top: .65rem; }
.dash__empty {
  padding: 1.4rem 1.45rem; border: 1px solid var(--hh-line);
  border-radius: var(--radius); background: var(--hh-surface);
  max-width: 640px;
}
.dash__empty p { margin: 0; line-height: 1.45; }
.dash__empty-hint { margin-top: .4rem !important; font-size: .88rem; }
.dash__empty .btn { margin-top: .95rem; }
.dash__empty--soft { background: transparent; }
.dash__panel { padding: 1.3rem 1.4rem; max-width: 720px; }
.dash__panel-copy { margin: .4rem 0 0; font-size: .9rem; max-width: 62ch; line-height: 1.45; }
.dash__agency-form { max-width: 520px; margin-top: 1rem; display: grid; gap: .65rem; }
.dash__agency-form input,
.dash__agency-form textarea { width: 100%; }
/* The global input rule sizes every field to the full row, which turns a bare
   checkbox into a wide bordered box floating above its own wording. Same
   carve-out .edit-media__item already makes, scoped rather than global so no
   existing form changes shape. */
.dash__panel label:has(input[type="checkbox"]) {
  display: flex; align-items: flex-start; gap: .5rem;
  font-weight: 500; color: var(--hh-muted); margin: .1rem 0 .25rem;
  line-height: 1.35; cursor: pointer;
}
.dash__panel input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; flex: none; padding: 0; margin-top: .05rem;
}
@media (max-width: 640px) {
  .dash { padding-top: 1.25rem; }
  .dash__cap { margin-left: 0; width: 100%; text-align: center; }
  .dash__status { padding: .8rem .9rem; gap: .45rem; }
  .dash__section { margin-top: 2rem; }
  .dash__agency-name { width: 100%; }
}

.account-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-top: .35rem;
}
.account-type__option {
  display: flex;
  gap: .45rem;
  align-items: center;
  padding: .65rem .8rem;
  cursor: pointer;
  margin: 0;
  min-height: 2.75rem;
}
.account-type__option input {
  width: auto;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--hh-blue);
}
.account-type__option:has(input:checked) {
  border-color: var(--hh-blue);
  background: var(--hh-blue-tint);
  color: var(--hh-blue);
}
@media (max-width: 420px) {
  .account-type { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------- cards */
.card {
  background: var(--hh-surface); border: 1px solid var(--hh-line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* In a grid, cards share the row height; flex-column lets the action row
   pin to the bottom (margin-top:auto) so it aligns across cards of unequal
   content — mirrors how .listing already does it. Standalone .card blocks
   (empty states, Account) are left untouched. */
.listing-grid > .card { display: flex; flex-direction: column; }
.panel {
  background: var(--hh-surface); border: 1px solid var(--hh-line);
  border-radius: var(--radius-lg); padding: clamp(1.2rem, 3vw, 2rem);
}

/* --------------------------------------------------------------- listing card */
.listing-grid {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Home: newest rentals / sales — full width when alone, two cols when both. */
.home-latest {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
.home-latest__grid {
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .home-latest--split {
    grid-template-columns: 1fr 1fr;
  }
}
.listing {
  display: flex; flex-direction: column; background: var(--hh-surface);
  border: 1px solid var(--hh-line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .18s, transform .18s;
}
.listing:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.listing__media { position: relative; aspect-ratio: 3 / 2; background: var(--hh-surface-2); overflow: hidden; border-radius: inherit; }
.listing__media img { width: 100%; height: 100%; object-fit: cover; }
.listing__media-empty {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: var(--hh-muted); background: var(--hh-blue-tint);
}
.listing__media-empty svg { width: 44px; height: 44px; opacity: .55; }
.listing__badges { position: absolute; top: .7rem; left: .7rem; display: flex; gap: .4rem; }
.listing__fav {
  position: absolute; top: .55rem; right: .55rem; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 999px; border: none;
  background: rgba(255,255,255,.9); cursor: pointer; box-shadow: var(--shadow-sm);
}
.listing__fav svg { width: 18px; height: 18px; stroke: var(--hh-ink-2); fill: none; }
.listing__fav.is-on svg { fill: var(--hh-blue); stroke: var(--hh-blue); }
.listing__body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.listing__price { font-family: var(--font-mono); font-weight: 700; font-size: 1.15rem; color: var(--hh-ink); }
.listing__price span { font-size: .8rem; color: var(--hh-muted); font-weight: 500; }
.listing__title { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.listing__title a { color: var(--hh-ink); }
.listing__title a:hover { color: var(--hh-blue); }
.listing__meta { display: flex; flex-wrap: wrap; gap: .8rem; color: var(--hh-ink-2); font-size: .85rem; margin-top: auto; }
.listing__meta b { font-family: var(--font-mono); font-weight: 600; color: var(--hh-ink); }
.listing__loc { color: var(--hh-muted); font-size: .85rem; }

/* -------------------------------------------------------------------- hero */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem); }
.hero__title { max-width: 16ch; }
.hero__lead { font-size: 1.15rem; color: var(--hh-ink-2); max-width: 52ch; }

/* Photo hero — full-bleed image with a legibility overlay and white text. */
.hero--photo {
  position: relative;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center 62%;
  color: #fff;
  padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2.2rem, 5vw, 4rem);
  margin-top: -1px;
}
.hero--photo::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(177deg, rgba(20,28,38,.62) 0%, rgba(20,28,38,.30) 38%, rgba(20,28,38,.72) 100%);
}
.hero--photo > .wrap { position: relative; z-index: 1; }
.hero--photo .hero__title { color: #fff; text-shadow: 0 1px 30px rgba(0,0,0,.25); }
.hero--photo .hero__lead { color: rgba(255,255,255,.92); }
.hero--photo .eyebrow { color: #BFD4E8; }
.hero--photo .stat b { color: #fff; }
.hero--photo .stat span { color: rgba(255,255,255,.78); }
.hero--photo .searchbar { box-shadow: var(--shadow-lg); }
.searchbar {
  margin-top: 1.8rem; background: var(--hh-surface); border: 1px solid var(--hh-line);
  border-radius: var(--radius-lg); padding: 1rem; box-shadow: var(--shadow);
}
.searchbar__row { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: .7rem; align-items: end; }
.seg { display: inline-flex; background: var(--hh-surface-2); border-radius: 999px; padding: .25rem; gap: .2rem; margin-bottom: 1rem; }
.seg button, .seg a {
  border: none; background: transparent; padding: .4rem 1rem; border-radius: 999px;
  font-weight: 600; font-size: .9rem; color: var(--hh-ink-2); cursor: pointer;
}
.seg .is-on { background: var(--hh-surface); color: var(--hh-blue); box-shadow: var(--shadow-sm); }

/* ============================ reference home hero ============================ */
.home-hero { position: relative; overflow: hidden; background: var(--hh-canvas); }
.home-hero__media {
  position: absolute; left: 0; right: 0; top: -14%; height: 128%; z-index: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.home-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
  display: block;
}
/* White-to-transparent fade so the left content stays readable on canvas. */
.home-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    var(--hh-canvas) 0%, var(--hh-canvas) 30%,
    rgba(250,250,249,.92) 42%, rgba(250,250,249,.55) 58%, rgba(250,250,249,0) 76%);
}
.home-hero__inner { position: relative; z-index: 1; padding: clamp(2.2rem, 5vw, 4rem) 0 clamp(2.4rem, 5vw, 4rem); }
.home-hero__content { max-width: 720px; }

.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--hh-surface); border: 1px solid var(--hh-line);
  color: var(--hh-blue); font-weight: 600; font-size: .85rem;
  padding: .4rem .8rem; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.badge svg { width: 15px; height: 15px; }
.home-hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.7rem); line-height: 1.04; margin: 1.1rem 0 0;
  letter-spacing: -0.03em; max-width: 16ch;
}
.home-hero h1 .accent { color: var(--hh-blue); }
.home-hero .lead { font-size: clamp(1rem, 1.6vw, 1.18rem); color: var(--hh-ink-2); margin-top: 1.1rem; max-width: 46ch; }

/* search panel */
.searchpanel {
  margin-top: 1.8rem; background: var(--hh-surface); border: 1px solid var(--hh-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 760px; overflow: hidden;
}
.searchpanel__tabs { display: flex; gap: .25rem; padding: .35rem .9rem 0; border-bottom: 1px solid var(--hh-line); }
.searchpanel__tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--font-ui); font-weight: 600; font-size: .98rem; color: var(--hh-ink-2);
  padding: .85rem .65rem; border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.searchpanel__tab:hover { color: var(--hh-ink); }
.searchpanel__tab.is-active { color: var(--hh-blue); border-bottom-color: var(--hh-blue); }
.searchpanel__form { padding: 1.1rem; }
.searchpanel__row { display: grid; grid-template-columns: 2fr 1.1fr 1.1fr auto; gap: .8rem; align-items: end; }
.searchpanel__row label { font-size: .78rem; font-weight: 700; color: var(--hh-ink-2); margin-bottom: .35rem; }
.searchpanel .input-icon { position: relative; }
.searchpanel .input-icon__field { position: relative; display: block; }
.searchpanel .input-icon__field svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--hh-muted); pointer-events: none; }
.searchpanel .input-icon__field input { padding-left: 2.1rem; width: 100%; }
.searchpanel__form .btn { height: 46px; padding-inline: 1.4rem; }
.searchpanel__popular { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .9rem; }
.searchpanel__popular .label { font-size: .82rem; color: var(--hh-muted); font-weight: 600; }
.pop-chip { padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--hh-line); background: var(--hh-surface); font-size: .85rem; font-weight: 600; color: var(--hh-ink-2); }
.pop-chip:hover { border-color: var(--hh-blue); color: var(--hh-blue); }

/* hero stats — 4-up on desktop; even 2×2 from tablet down (no orphan row) */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 2.6rem;
  margin-top: 1.8rem;
  justify-content: start;
  align-items: start;
}
.hero-stats .stat b { font-family: var(--font-mono); font-size: 1.7rem; display: block; color: var(--hh-ink); letter-spacing: -0.01em; }
.hero-stats .stat span { color: var(--hh-muted); font-size: .85rem; }

@media (max-width: 860px) {
  .home-hero__media::after { background: linear-gradient(180deg, rgba(250,250,249,.82) 0%, rgba(250,250,249,.9) 55%, var(--hh-canvas) 100%); }
  .searchpanel__row { grid-template-columns: 1fr 1fr; }
  .searchpanel__form .btn { grid-column: 1 / -1; }
  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem 1.5rem;
    max-width: 22rem;
  }
}
@media (max-width: 560px) {
  .searchpanel__row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- stat strip */
.stats { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2rem; }
.stat b { font-family: var(--font-mono); font-size: 1.6rem; display: block; color: var(--hh-blue); }
.stat span { color: var(--hh-muted); font-size: .85rem; }

/* ------------------------------------------------------------ canton links */
.canton-links { display: flex; flex-wrap: wrap; gap: .55rem; }

/* ===================== buy/search: filters above, map right ================= */
.search-page { --hdr: 68px; --fbar: 74px; }
.filterbar {
  position: sticky; top: var(--hdr); z-index: 30;
  background: var(--hh-surface); border-bottom: 1px solid var(--hh-line);
  box-shadow: var(--shadow-sm);
}
.filterbar__inner {
  display: flex; gap: .55rem; align-items: center;
  padding: .8rem clamp(1rem, 3vw, 2rem); flex-wrap: nowrap; overflow-x: auto;
}
.filterbar__inner::-webkit-scrollbar { height: 0; }
.filterbar__inner > * { flex: 0 0 auto; }
.filterbar .seg { margin: 0; }
.filterbar input, .filterbar select { height: 42px; padding-block: 0; background: var(--hh-surface); }
.filterbar .f-where { position: relative; flex: 1 1 240px; min-width: 190px; }
.filterbar .f-where svg { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--hh-muted); }
.filterbar .f-where input { padding-left: 2rem; width: 100%; }
.filterbar .f-num { width: 104px; }
.filterbar .f-sel { width: 144px; }
.filterbar .f-sel > select, .filterbar .f-num > input { width: 100%; }
.filterbar .btn { height: 42px; }
.filterbar label.fb-lbl { display: block; font-size: .68rem; font-weight: 700; color: var(--hh-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .15rem .1rem; }

.results-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0 .7rem; flex-wrap: wrap;
}
.results-bar h1 { font-size: 1.15rem; margin: 0; }
.results-bar .muted { font-weight: 500; }

/* Shown when a filter in the querystring couldn't be read, so the headline
   above the results is never the only account of what was applied. */
.search-notice { margin: 0; padding: .6rem 1.1rem; background: var(--hh-blue-tint); border-left: 4px solid var(--hh-warning); font-size: .9rem; color: var(--hh-ink-2); }
.search-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
@media (min-width: 1500px) { .search-split { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); } }
.search-list { padding: 0 clamp(1rem, 3vw, 2rem) 2.5rem; }
.search-list .listing-grid { grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 1rem; }
.search-map {
  position: sticky; top: calc(var(--hdr) + var(--fbar));
  height: calc(100vh - var(--hdr) - var(--fbar));
  border-left: 1px solid var(--hh-line); background: var(--hh-surface-2);
}
.search-map #map { width: 100%; height: 100%; }

/* price-pill markers */
.price-pin {
  display: inline-block; transform: translate(-50%, -100%);
  background: var(--hh-surface); color: var(--hh-blue);
  font-family: var(--font-mono); font-weight: 700; font-size: .78rem;
  padding: .25rem .5rem; border-radius: 100px; white-space: nowrap;
  border: 1px solid var(--hh-blue); box-shadow: var(--shadow);
  cursor: pointer;
}
.price-pin.is-active, .price-pin:hover { background: var(--hh-blue); color: #fff; }
.leaflet-popup-content { margin: 0; }
.map-pop { width: 210px; }
.map-pop img { width: 100%; height: 116px; object-fit: cover; display: block; }
.map-pop__b { padding: .5rem .65rem .6rem; }
.map-pop__price { font-family: var(--font-mono); font-weight: 700; color: var(--hh-ink); }
.map-pop__title { font-size: .85rem; font-weight: 600; color: var(--hh-ink); line-height: 1.25; margin-top: .15rem; }
.map-pop__loc { font-size: .78rem; color: var(--hh-muted); }

.map-toggle-mobile { display: none; }

@media (max-width: 980px) {
  .search-split { grid-template-columns: 1fr; }
  .search-map { display: none; }
  .search-map.is-shown { display: block; position: fixed; inset: var(--hdr) 0 0 0; height: auto; z-index: 40; border: none; }
  .map-toggle-mobile { display: inline-flex; }
}

/* results list chrome */
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.results-head h1 { font-size: 1.3rem; margin: 0; }
#map, #detail-map { width: 100%; height: 100%; }
#detail-map { height: 340px; border-radius: var(--radius); }

/* --------------------------------------------------------------- detail page */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 2.5rem; align-items: start; margin-top: 1.8rem; }
.detail-layout--equal { grid-template-columns: 1fr 1fr; align-items: stretch; }
.detail-layout--equal > aside { display: flex; }
.detail-layout--equal > aside > .panel { flex: 1; min-width: 0; }
/* Keep the verdict ("Tight / unlikely ✕") on one line so the ✕ never wraps. */
.detail-layout--equal .price-big { white-space: nowrap; }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--hh-line); border: 1px solid var(--hh-line); border-radius: var(--radius); overflow: hidden; }
.spec { background: var(--hh-surface); padding: .9rem 1rem; }
.spec b { font-family: var(--font-mono); font-size: 1.1rem; display: block; }
.spec span { color: var(--hh-muted); font-size: .8rem; }
.amenities { display: flex; flex-wrap: wrap; gap: .5rem; }
.contact-card { position: sticky; top: 84px; }
.price-big { font-family: var(--font-mono); font-weight: 700; font-size: 2rem; color: var(--hh-ink); }
.price-big span { font-size: 1rem; color: var(--hh-muted); font-weight: 500; }

/* ----------------------------------------------------- list-a-property form */
#pick-map { position: relative; z-index: 0; overflow: hidden; isolation: isolate; }
/* Django CheckboxSelectMultiple renders div > div > label, not ul/li. */
.amenities-pick #id_amenities {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.amenities-pick #id_amenities > div { margin: 0; }
.amenities-pick label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .85rem; color: var(--hh-ink-2);
  background: var(--hh-surface-2); border: 1px solid var(--hh-line);
  border-radius: 999px; padding: .35rem .7rem; cursor: pointer; margin: 0;
  user-select: none; -webkit-tap-highlight-color: transparent;
  transition: color .12s, background .12s, border-color .12s, box-shadow .12s;
}
/* Hide native checkbox — global input:focus was flashing for a few ms. */
.amenities-pick input[type="checkbox"] {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  clip: rect(0, 0, 0, 0); overflow: hidden;
}
.amenities-pick input[type="checkbox"]:focus { box-shadow: none; outline: none; }
.amenities-pick label:has(input:checked) {
  color: var(--hh-blue); background: var(--hh-blue-tint); border-color: var(--hh-blue);
}
.amenities-pick label:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--hh-blue-tint);
}
.img-preview { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.img-preview__item { position: relative; width: 96px; height: 72px; border-radius: 8px; overflow: hidden; border: 1px solid var(--hh-line); }
.img-preview__item img { width: 100%; height: 100%; object-fit: cover; }
.img-preview__item .cover-tag { position: absolute; left: 4px; bottom: 4px; font-size: .62rem; font-weight: 700; text-transform: uppercase; background: var(--hh-blue); color: #fff; padding: .1rem .35rem; border-radius: 5px; }

/* edit-listing media manager — its cards grow (unlike the create-form thumbs) */
.edit-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .7rem; margin: .7rem 0 1rem; }
.edit-media__item { border: 1px solid var(--hh-line); border-radius: 10px; padding: .4rem; display: flex; flex-direction: column; gap: .35rem; }
.edit-media__item img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; }
.edit-media__item label { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--hh-ink-2); margin: 0; cursor: pointer; }
.edit-media__item input[type="radio"], .edit-media__item input[type="checkbox"] { width: 1.1rem; height: 1.1rem; flex: none; }

/* ============================ property detail (PDP) ========================= */
.back-link { color: var(--hh-muted); font-size: .92rem; font-weight: 600; display: inline-block; margin-bottom: .8rem; }
.back-link:hover { color: var(--hh-ink); }

/* striped placeholder (design's .ph) */
.ph { position: relative; background-color: var(--hh-surface-2);
  background-image: repeating-linear-gradient(-45deg, transparent 0 11px, rgba(31,78,121,.05) 11px 22px);
  display: flex; align-items: center; justify-content: center; border-radius: var(--radius); overflow: hidden; }
.ph-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--hh-muted); background: rgba(255,255,255,.72); padding: 4px 9px; border-radius: 100px; border: 1px solid var(--hh-line); }

.pdp-gallery { position: relative; display: grid; grid-template-columns: 1.55fr 1fr; gap: .6rem;
  height: clamp(320px, 42vw, 460px); margin-top: .2rem; }

/* Hide Homegate's baked-in top-centre logo on photos we could only hotlink
   (no clean source). In cover cells (overflow:hidden) we scale from the bottom
   so the watermark band slips out of the top with no gap; the lightbox shows
   the full image, so it clips the band instead. ~9–10% off the top. */
img.is-wm { transform: scale(1.11); transform-origin: bottom center; }
.lightbox img.is-wm { transform: none; clip-path: inset(9% 0 0 0); }
/* Cap the MAIN photo to the gallery height (align-self:start so it doesn't
   stretch with a tall side column) — this is the one thing that must never spill
   down over the description text. The side column is left free to extend below
   the gallery, which is what the contact card overlaps (intended design). */
.pdp-gallery__main { align-self: start; height: clamp(320px, 42vw, 460px);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg); overflow: hidden; cursor: zoom-in; background: var(--hh-surface-2); }
.pdp-gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pdp-gallery__main:hover img { transform: scale(1.03); }
.pdp-gallery__side { display: grid; grid-template-rows: 1fr 1fr; gap: .6rem; }
.pdp-gallery__side > div { overflow: hidden; cursor: zoom-in; background: var(--hh-surface-2); }
.pdp-gallery__side > div:first-child { border-radius: 0 var(--radius-lg) 0 0; }
.pdp-gallery__side > div:last-child { border-radius: 0 0 var(--radius-lg) 0; }
.pdp-gallery__side > div:only-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; grid-row: span 2; }
.pdp-gallery__side img { width: 100%; height: 100%; object-fit: cover; }
.pdp-gallery__all { position: absolute; right: .9rem; bottom: .9rem; display: inline-flex; align-items: center; gap: .45rem;
  background: var(--hh-surface); border: 1px solid var(--hh-line); border-radius: 100px; padding: .55rem .9rem;
  font-weight: 600; font-size: .88rem; color: var(--hh-ink); cursor: pointer; box-shadow: var(--shadow); }
.pdp-gallery__all svg { width: 16px; height: 16px; }
.pdp-gallery--empty { grid-template-columns: 1fr; }
.pdp-gallery--empty .ph { height: 100%; width: 100%; border-radius: var(--radius-lg); }

.pdp-loc { display: flex; align-items: center; gap: .4rem; color: var(--hh-ink-2); font-size: 1.02rem; }
.pdp-loc svg { width: 18px; height: 18px; color: var(--hh-muted); flex-shrink: 0; }
.pdp-h2 { font-size: 1.3rem; margin: 2rem 0 1rem; }
.chip--ink { background: var(--hh-ink); color: #fff; border-color: transparent; }

/* specs strip */
.spec-strip { display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; padding: 1.1rem 0; margin-top: 1.2rem;
  border-top: 1px solid var(--hh-line); border-bottom: 1px solid var(--hh-line); }
.spec-item { display: flex; align-items: center; gap: .7rem; }
.spec-ic { width: 42px; height: 42px; border-radius: 10px; background: var(--hh-surface-2); display: grid; place-items: center; color: var(--hh-blue); flex-shrink: 0; }
.spec-ic svg { width: 20px; height: 20px; }
.spec-item b { font-size: 1.02rem; display: block; line-height: 1.2; }
.spec-item span { font-size: .82rem; color: var(--hh-muted); }

/* key facts table */
.key-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; margin: 0; }
.key-facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--hh-line); }
.key-facts dt { color: var(--hh-ink-2); margin: 0; }
.key-facts dd { margin: 0; font-weight: 700; color: var(--hh-ink); text-align: right; }

/* getting around */
.getting-around { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.getting-around .ga-map, .getting-around #detail-map { height: 260px; min-height: 260px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hh-line); }
.ga-list { display: flex; flex-direction: column; gap: .6rem; }
.ga-row { display: flex; align-items: center; gap: .7rem; background: var(--hh-surface); border: 1px solid var(--hh-line); border-radius: var(--radius); padding: .7rem .9rem; }
.ga-ic { width: 34px; height: 34px; border-radius: 8px; background: var(--hh-surface-2); display: grid; place-items: center; color: var(--hh-blue); flex-shrink: 0; }
.ga-ic svg { width: 18px; height: 18px; }
.ga-row b { color: var(--hh-ink); }

/* affordability band */
.afford { display: flex; align-items: center; gap: 1rem; background: var(--hh-surface-2); border: 1px solid var(--hh-line);
  border-radius: var(--radius-lg); padding: 1.05rem 1.3rem; margin-top: 1.6rem; }
.afford__ic { width: 44px; height: 44px; border-radius: 10px; background: var(--hh-surface); display: grid; place-items: center; color: var(--hh-blue); flex-shrink: 0; border: 1px solid var(--hh-line); }
.afford__ic svg { width: 22px; height: 22px; }
.afford__body { flex: 1; display: flex; flex-direction: column; }
.afford__body strong { font-size: 1.02rem; }

/* contact card */
.contact-card .price-big { margin-bottom: .1rem; }
.contact-form { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .6rem; }
.contact-form .grid-fields { gap: .6rem; margin: 0; }
.contact-actions { display: flex; gap: .6rem; margin-top: .9rem; }
.contact-card .btn svg { width: 17px; height: 17px; }
.lister { display: flex; align-items: center; gap: .7rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--hh-line); }
.lister__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--hh-surface-2); display: grid; place-items: center; color: var(--hh-muted); flex-shrink: 0; }
.lister__avatar svg { width: 20px; height: 20px; }

@media (max-width: 760px) {
  .pdp-gallery { grid-template-columns: 1fr; height: auto; }
  .pdp-gallery__main { border-radius: var(--radius-lg); height: clamp(220px, 56vw, 320px); }
  .pdp-gallery__side { display: none; }
  .key-facts { grid-template-columns: 1fr; }
  .getting-around { grid-template-columns: 1fr; }
  .afford { flex-wrap: wrap; }
}

/* --------------------------------------------------------------- video block */
.video-block { margin-top: .8rem; }
.video-block video { width: 100%; border-radius: var(--radius); background: #000; display: block; max-height: 460px; }
.detail-video-tag { display: inline-flex; align-items: center; gap: .35rem; }

/* play badge on gallery cover when a listing has video */
.has-video-badge { position: absolute; left: .7rem; bottom: .7rem; display: inline-flex; align-items: center; gap: .4rem; background: rgba(18,18,16,.66); color: #fff; font-size: .78rem; font-weight: 600; padding: .3rem .6rem; border-radius: 999px; backdrop-filter: blur(4px); }
.has-video-badge svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ lightbox */
.lightbox-trigger { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(16,18,22,.93); align-items: center; justify-content: center;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox__close, .lightbox__nav { position: absolute; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.5); color: #fff; cursor: pointer; border-radius: 999px; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.45); }
.lightbox__close { top: 1.1rem; right: 1.2rem; width: 44px; height: 44px; font-size: 1.4rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; font-size: 1.6rem; }
.lightbox__nav:hover, .lightbox__close:hover { background: rgba(0,0,0,.72); }
.lightbox__prev { left: 1.2rem; }
.lightbox__next { right: 1.2rem; }
.lightbox__count { position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-family: var(--font-mono); font-size: .85rem; }

/* ------------------------------------------------------------------ alerts */
.messages { position: fixed; top: 80px; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: .5rem; max-width: 360px; }
.toast { display: flex; align-items: flex-start; gap: .5rem; padding: .75rem 1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: .9rem; background: var(--hh-surface); border-left: 4px solid var(--hh-blue); }
.toast.success { border-color: var(--hh-success); }
.toast.error { border-color: var(--hh-danger); }
.toast.warning { border-color: var(--hh-warning); }
.toast__text { flex: 1; }
/* Only the toasts that stay carry this, so it is never a decoration. */
.toast__close { flex: none; border: 0; background: none; padding: 0 .1rem; margin: -.1rem 0 0; font-size: 1.15rem; line-height: 1; color: var(--hh-muted); cursor: pointer; }
.toast__close:hover { color: var(--hh-ink); }

/* ------------------------------------------------------------------ footer
   Mont3 standard footer, tuned variant: on a warm light site the band takes the
   page's own surface and text scale rather than the classic near-black, so the
   3px brand rule is the only separator. Column titles carry the accent; the
   made-by mont3 mark keeps its own fixed colours and is never recoloured. */
.site-footer {
  --f-bg: var(--hh-surface);
  --f-ink: var(--hh-ink);
  --f-muted: var(--hh-ink-2);
  --f-soft: var(--hh-ink-2);
  --f-faint: var(--hh-muted);
  --f-line: var(--hh-line);
  --f-accent: var(--hh-blue);
  background: var(--f-bg);
  color: var(--f-ink);
  border-top: 3px solid var(--f-accent);
  margin-top: 3rem;
}
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding: 3.5rem 0 2.25rem; }
.site-footer__col { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.site-footer__brand .brand-lockup { height: 26px; }
.site-footer__tagline { margin: 0; color: var(--f-muted); font-size: .92rem; max-width: 34ch; }
.site-footer__title { margin: 0 0 .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--f-accent); }
.site-footer a { color: var(--f-ink); display: block; padding: .2rem 0; font-size: .92rem; transition: color .15s ease; }
.site-footer a:hover { color: var(--f-accent); }
.site-footer__address { font-style: normal; display: flex; flex-direction: column; }
.site-footer__bar { border-top: 1px solid var(--f-line); }
.site-footer__bar-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 0; }
/* Outranks the `.site-footer a` block above, which would otherwise turn the
   signature into a block and stack the wordmark under "Made by". */
.site-footer a.site-footer__madeby { display: flex; align-items: center; gap: .5rem; padding: 0; color: var(--f-soft); font-size: .82rem; font-weight: 600; }
.site-footer a.site-footer__madeby:hover { color: var(--f-ink); }
.site-footer__madeby svg { height: 46px; width: auto; display: block; }
.site-footer__copy { color: var(--f-faint); font-size: .82rem; }

/* --------------------------------------------------------------- utilities */
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--hh-muted); }
.pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 2rem; align-items: center; }
.pagination a, .pagination span { padding: .5rem .8rem; border-radius: var(--radius-sm); border: 1px solid var(--hh-line); font-size: .9rem; font-family: var(--font-mono); }
.pagination .current { background: var(--hh-blue); color: #fff; border-color: var(--hh-blue); }
.prose { max-width: 70ch; }
.prose p { color: var(--hh-ink-2); }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .92rem; }
.prose th, .prose td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--hh-line); vertical-align: top; }
.prose th { color: var(--hh-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.prose td { color: var(--hh-ink-2); }
.divider { height: 1px; background: var(--hh-line); border: none; margin: 1.5rem 0; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .detail-layout { grid-template-columns: 1fr; }
  .detail-layout--equal { grid-template-columns: minmax(0, 1fr); }
  /* Stacked: drop the equal-height flex and let the verdict wrap normally. */
  .detail-layout--equal > aside { display: block; }
  .detail-layout--equal .price-big { white-space: normal; }
  .detail-layout .contact-card { position: static; }
  .searchbar__row { grid-template-columns: 1fr 1fr; }
  /* Brand takes its own row; the three link columns keep one row between
     them, so a short column can't open a hole above the next one. */
  .site-footer__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .site-header__bar {
    grid-template-columns: 1fr auto auto;
    gap: .65rem;
  }
  .site-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .site-footer__bar-inner { flex-direction: column; align-items: flex-start; }
  .brand { min-width: 0; flex-shrink: 1; }
  .brand__word { font-size: 1.05rem; }
  .site-actions {
    grid-column: 2;
    gap: .45rem; flex-shrink: 0; min-width: 0; margin-left: 0;
    align-items: center;
  }
  .header-end { grid-column: 3; gap: .4rem; }
  .site-header .nav-toggle { display: inline-grid; }
  .primary-nav { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; background: var(--hh-surface); border-bottom: 1px solid var(--hh-line); padding: 1rem; gap: 1rem; z-index: 1001; box-shadow: var(--shadow-sm); margin-left: 0; flex: none; grid-column: auto; }
  .primary-nav.open { display: flex; }
  .header-signin { padding: .5rem .9rem; font-size: .85rem; min-height: 38px; }
  /* Compact the CTA to a "+" pill so the action bar can't overflow the viewport. */
  .list-btn__label { display: none; }
  .list-btn { padding: .5rem .6rem; }
  /* Language: header control stays desktop-only; drawer gets a full-width row. */
  .site-actions .lang { display: none; }
  .nav-lang {
    display: flex; flex-direction: column;
    padding-top: .85rem; margin-top: .25rem;
    border-top: 1px solid var(--hh-line);
  }
  .lang--nav { width: 100%; }
  .lang--nav > summary {
    width: 100%;
    justify-content: flex-start;
    padding: .35rem 0;
    font-size: 1rem;
  }
  .lang--nav > summary svg { width: 18px; height: 18px; }
  .lang--nav .lang__menu {
    position: static;
    margin-top: .5rem;
    box-shadow: none;
    width: 100%;
    min-width: 0;
  }
  /* One sign-out entry: hamburger drawer (header icon bar is already tight). */
  .site-actions .logout-form { display: none; }
  .nav-account {
    display: flex; flex-direction: column;
    padding-top: .85rem; margin-top: .25rem;
    border-top: 1px solid var(--hh-line);
  }
  .nav-account .logout-form { width: 100%; display: flex; }
  .searchbar__row { grid-template-columns: 1fr; }
  .stats { gap: 1.5rem; }
  .grid-fields { grid-template-columns: 1fr; }
}

/* Public agency / user profiles ----------------------------------------- */
.profile-hero { padding-bottom: 0; }
.profile-hero__inner { padding-bottom: 0; }
.profile-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
  background: var(--hh-surface);
  border: 1px solid var(--hh-line);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin-top: .5rem;
}
.profile-card__logo {
  width: 72px; height: 72px; object-fit: contain;
  border-radius: 12px; background: var(--hh-surface-2);
}
.profile-card__logo--placeholder {
  display: grid; place-items: center; color: var(--hh-muted);
}
.profile-card__logo--placeholder svg { width: 32px; height: 32px; }
.profile-card__body h1 { margin: .15rem 0 .35rem; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.profile-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
  align-items: start;
}
.profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.profile-stat {
  background: var(--hh-surface);
  border: 1px solid var(--hh-line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
}
.profile-stat--wide { grid-column: 1 / -1; }
.profile-stat b { display: block; font-size: 1.6rem; font-family: var(--font-mono, ui-monospace, monospace); }
.profile-stat span { color: var(--hh-muted); font-size: .9rem; }
.lister a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 800px) {
  .profile-layout { grid-template-columns: 1fr; }
  .profile-card { grid-template-columns: 1fr; justify-items: start; }
}
@media (max-width: 520px) {
  .profile-stats { grid-template-columns: 1fr 1fr; }
}

/* Agency branding on the public agency page ------------------------------
   Everything here is scoped to .agency-branded, which wraps the page body but
   not the site header, search or footer. The two custom properties come from
   the agency's own record (Agency.brand_style); both fall back to the homehunt
   tokens, so an agency that set nothing renders exactly as it always did.

   The accent is deliberately limited to buttons, badges, links, the eyebrow
   and the figures — never body copy, prices or page backgrounds. A branded
   page has to stay readable, and still read as a homehunt page. */
.agency-branded {
  --agency-accent: var(--hh-blue);
  --agency-font: var(--font-ui);
  /* Derived, so an agency picks one colour rather than a palette. */
  --agency-tint: color-mix(in srgb, var(--agency-accent) 10%, var(--hh-surface));
  --agency-edge: color-mix(in srgb, var(--agency-accent) 24%, var(--hh-surface));
  /* Inherited by the whole page body. Figures keep the mono face
     (.mono, .profile-stat b) because prices have to stay comparable
     between one agency's page and the next. */
  font-family: var(--agency-font);
}
.agency-branded .eyebrow { color: var(--agency-accent); }
.agency-branded .profile-card__logo--placeholder { color: var(--agency-accent); background: var(--agency-tint); }
.agency-branded .profile-stat b { color: var(--agency-accent); }
.agency-branded .profile-card__body a { color: var(--agency-accent); }
.agency-branded .btn--primary { background: var(--agency-accent); border-color: var(--agency-accent); }
.agency-branded .btn--primary:hover { background: color-mix(in srgb, var(--agency-accent) 82%, #000); }
.agency-branded .badge { background: var(--agency-tint); color: var(--agency-accent); border-color: var(--agency-edge); }
/* color-mix is recent enough that a miss must not leave a transparent chip. */
@supports not (color: color-mix(in srgb, red 10%, white)) {
  .agency-branded { --agency-tint: var(--hh-surface-2); --agency-edge: var(--hh-line); }
}

/* --- Layout: centred -----------------------------------------------------
   Same blocks, pulled onto the centre line. The stats go three-across because
   at full width two columns plus a wide row reads as a broken grid once the
   card above them is no longer left-aligned. */
.agency-branded--center .profile-card {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 1rem;
}
.agency-branded--center .profile-layout { grid-template-columns: 1fr; }
.agency-branded--center .profile-stats { grid-template-columns: repeat(3, 1fr); }
.agency-branded--center .profile-stat { text-align: center; }
.agency-branded--center .profile-stat--wide { grid-column: auto; }
.agency-branded--center .profile-about { text-align: center; }
.agency-branded--center .profile-about p { max-width: 62ch; margin-inline: auto; }
@media (max-width: 620px) {
  /* Three stat columns stop being readable well before the card does. */
  .agency-branded--center .profile-stats { grid-template-columns: 1fr 1fr; }
  .agency-branded--center .profile-stat--wide { grid-column: 1 / -1; }
}

/* --- Layout: showcase ----------------------------------------------------
   Listings first, for an agency whose stock is the pitch. The cover banner is
   dropped (Agency.shows_cover) and the identity card becomes a compact tinted
   band, so the grid starts within the first screen. Only this arrangement
   reorders, so it is the only one that needs the flex container — the classic
   page keeps plain block flow and cannot regress.

   `order` moves the boxes visually while the DOM keeps its own sequence, which
   normally desynchronises tab order from what you see. It is safe here because
   the band that gets moved past — "About" and the three figures — holds no
   focusable element at all, so no link is ever reachable out of the order it
   appears in. Putting anything focusable in that band would break that, and
   the fix then is to move the section in the template, not to reorder here. */
.agency-branded--showcase { display: flex; flex-direction: column; }
.agency-branded--showcase > .profile-hero { order: 1; }
.agency-branded--showcase > .profile-band--listings { order: 2; padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.agency-branded--showcase > .profile-band--about { order: 3; }
.agency-branded--showcase .profile-card {
  background: var(--agency-tint);
  border-color: var(--agency-edge);
  margin-top: 0;
}
.agency-branded--showcase .profile-card__logo { background: var(--hh-surface); }
.agency-branded--showcase .profile-layout { margin-top: 0; }

/* Agency workspace (/accounts/agency/) — built from the dashboard and profile
   pieces above; only the tabs, the roster table and the media previews are new. */
.agency-nav {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin: 1.25rem 0 .25rem;
  border-bottom: 1px solid var(--hh-line);
}
.agency-nav__tab {
  padding: .5rem .85rem; font-size: .9rem; font-weight: 600;
  color: var(--hh-ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.agency-nav__tab:hover { color: var(--hh-blue); }
.agency-nav__tab.is-active { color: var(--hh-blue); border-bottom-color: var(--hh-blue); }
.agency-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; }
.agency-table-wrap { max-width: none; overflow-x: auto; }
.agency-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.agency-table tr + tr { border-top: 1px solid var(--hh-line); }
.agency-table th {
  text-align: left; font-weight: 600; color: var(--hh-ink-2);
  padding: .55rem .8rem .55rem 0; white-space: nowrap;
}
.agency-table td { padding: .7rem .8rem .7rem 0; vertical-align: top; }
.agency-table form { display: inline; }
.agency-media { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
.agency-cover-preview {
  width: 100%; max-height: 120px; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--hh-surface-2);
}
/* Brand-colour field: text input (the one that posts) plus a native swatch. */
.colorfield { display: flex; gap: .5rem; align-items: stretch; }
.colorfield input[type="text"] { flex: 1; min-width: 0; font-family: var(--font-mono); text-transform: uppercase; }
.colorfield__pick {
  width: 46px; flex: none; padding: 2px; cursor: pointer;
  border: 1px solid var(--hh-line); border-radius: var(--radius-sm);
  background: var(--hh-surface);
}
.colorfield__pick::-webkit-color-swatch-wrapper { padding: 0; }
.colorfield__pick::-webkit-color-swatch { border: none; border-radius: 6px; }
.colorfield__pick::-moz-color-swatch { border: none; border-radius: 6px; }
.agency-roles { margin: 0; display: grid; gap: .2rem; }
.agency-roles dt { font-weight: 600; margin-top: .6rem; }
.agency-roles dt:first-child { margin-top: 0; }
.agency-roles dd { margin: 0; color: var(--hh-muted); font-size: .9rem; line-height: 1.5; }
/* Agency cover banner on the public profile. */
.profile-cover {
  width: 100%; aspect-ratio: 3 / 1; max-height: 260px; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--hh-line); display: block;
}
/* Agency logo in the listing's advertiser block, in place of the generic icon. */
.lister__avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
@media (max-width: 640px) {
  .agency-media { grid-template-columns: 1fr; }
}

/* ops telemetry table (staff-only /ops) — plain rows, no chrome: it has to stay
   readable when whatever it is reporting on is already broken. */
.ops-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ops-table tr + tr { border-top: 1px solid var(--hh-line); }
.ops-table th { text-align: left; font-weight: 600; color: var(--hh-ink-2); padding: .55rem .8rem .55rem 0; white-space: nowrap; }
.ops-table td { padding: .55rem .8rem .55rem 0; color: var(--hh-ink); vertical-align: top; }
.ops-table td:last-child { width: 100%; word-break: break-word; }
@media (max-width: 640px) {
  .ops-table, .ops-table tbody, .ops-table tr, .ops-table th, .ops-table td { display: block; width: auto; }
  .ops-table th { padding-bottom: .1rem; }
  .ops-table tr { padding: .5rem 0; }
}