/* ============================================================
   Directory Website — Foundation Stylesheet
   Brand color: #700523
   Layout style: Gumtree-inspired
   ============================================================ */

/* ----- Design tokens ----- */
:root {
  --brand: #700523;
  --brand-dark: #500117;
  --brand-light: #8a1c3a;
  --brand-tint: #fbeaef;
  --accent: #f5b400;

  --text: #1f2430;
  --text-muted: #5b6275;
  --text-soft: #8a90a2;
  --line: #e3e6ee;
  --line-strong: #c8cdda;
  --bg: #ffffff;
  --bg-soft: #f6f7fb;
  --bg-tint: #eef0f7;

  --success: #1b8a4f;
  --danger:  #c0392b;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(20, 24, 40, 0.06);
  --shadow:    0 4px 16px rgba(20, 24, 40, 0.08);
  --shadow-lg: 0 10px 30px rgba(20, 24, 40, 0.12);

  --container: 1200px;
  --gap: 16px;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ----- Reset ----- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 0%,  rgba(112,5,35,0.05)   0%, transparent 35%),
    radial-gradient(circle at 85% 50%, rgba(245,180,0,0.04)  0%, transparent 40%),
    radial-gradient(circle at 30% 100%,rgba(112,5,35,0.04)   0%, transparent 35%),
    var(--bg-soft);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); text-decoration: underline; }

button { font-family: inherit; }
h1, h2, h3, h4 {
  line-height: 1.18;
  margin: 0 0 .5em;
  color: var(--text);
  letter-spacing: -0.02em;
  font-weight: 700;
}
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.2vw, 2.85rem);
  letter-spacing: -0.025em;
}
h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 600; }
p  { margin: 0 0 1em; }

/* ----- Utilities ----- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.row { display: flex; flex-wrap: wrap; gap: var(--gap); }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 2rem; }
.hidden { display: none !important; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5em;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .05s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, #8a1c3a 0%, #700523 100%);
  color: #fff;
  border-color: #5a0419;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 2px 4px rgba(112,5,35,0.30),
    0 6px 16px rgba(112,5,35,0.22);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #9a2a48 0%, #800a30 100%);
  color: #fff; text-decoration: none;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 4px 8px rgba(112,5,35,0.35),
    0 10px 24px rgba(112,5,35,0.28);
}
.btn-outline {
  background: rgba(255,255,255,0.6);
  color: var(--brand); border-color: var(--brand);
  box-shadow: 0 1px 2px rgba(112,5,35,0.08);
}
.btn-outline:hover {
  background: var(--brand-tint); color: var(--brand-dark); text-decoration: none;
  box-shadow: 0 3px 8px rgba(112,5,35,0.15);
  transform: translateY(-1px);
}
.btn-ghost    { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--bg-tint); text-decoration: none; }
.btn-accent {
  background: linear-gradient(180deg, #f9c633 0%, #f5b400 60%, #d99500 100%);
  color: var(--text);
  border-color: #c98a00;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 2px 4px rgba(245,180,0,0.35),
    0 6px 16px rgba(245,180,0,0.28);
}
.btn-accent:hover {
  background: linear-gradient(180deg, #ffd450 0%, #ffc220 60%, #e6a200 100%);
  color: var(--text); text-decoration: none;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 4px 8px rgba(245,180,0,0.40),
    0 10px 22px rgba(245,180,0,0.32);
}
.btn-block    { display: flex; width: 100%; }
.btn-sm       { padding: 6px 12px; font-size: .85rem; }
.btn-lg       { padding: 14px 24px; font-size: 1.05rem; }

/* ----- Header ----- */
.site-header {
  background:
    radial-gradient(ellipse at top left, rgba(245,180,0,0.10) 0%, transparent 50%),
    linear-gradient(135deg, #8a1c3a 0%, #700523 50%, #500117 100%);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 20px rgba(112,5,35,0.30),
    0 1px 0 rgba(0,0,0,0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.site-header a { color: #fff; }
.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  max-width: var(--container);
  margin: 0 auto;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,0.25))
    drop-shadow(0 0 8px rgba(245,180,0,0.10));
  transition:
    filter 0.45s ease,
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo:hover .logo-mark {
  filter:
    drop-shadow(0 3px 8px rgba(0,0,0,0.35))
    drop-shadow(0 0 18px rgba(245,180,0,0.45));
  transform: scale(1.06) rotate(-3deg);
}

/* Refined monogram motion — subtle, real-brand feel */
.atl-pin {
  transform-origin: 24px 7px;
  animation: atlPin 2.8s ease-in-out infinite;
}
.atl-bar {
  transform-origin: 24px 29px;
  animation: atlBar 5s ease-in-out infinite;
}
.atl-monogram {
  transform-origin: 24px 24px;
  animation: atlBreath 6s ease-in-out infinite;
}

.logo:hover .atl-pin { animation-duration: 1.2s; }
.logo:hover .atl-bar { animation-duration: 2s; }

@keyframes atlPin {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(245,180,0,0)); }
  50%      { transform: scale(1.35); filter: drop-shadow(0 0 4px rgba(245,180,0,0.9)); }
}
@keyframes atlBar {
  0%, 100% { transform: scaleX(1)    translateX(0); }
  50%      { transform: scaleX(1.04) translateX(0.6px); }
}
@keyframes atlBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}
@keyframes atlasShimmer {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

.logo-word {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Inter", "Helvetica Neue", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  position: relative;
  padding-right: 0.05em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.logo-word::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(245,180,0,0.55) 30%, rgba(245,180,0,0.85) 50%, rgba(245,180,0,0.55) 70%, transparent 100%);
  transform: scaleX(0.6);
  transform-origin: center;
  transition: transform 0.5s ease, opacity 0.4s ease;
}
.logo:hover .logo-word::after { transform: scaleX(1); }
.location-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
.location-pill:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.35); text-decoration: none; }
.location-pill svg { flex: 0 0 auto; }

.header-search {
  flex: 1;
  display: flex;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 8px rgba(0,0,0,0.12);
  max-width: 600px;
}
.header-search input {
  flex: 1;
  border: 0;
  padding: 10px 14px;
  font-size: .95rem;
  outline: none;
  color: var(--text);
}
.header-search button {
  border: 0;
  background: var(--accent);
  color: var(--text);
  padding: 0 18px;
  font-weight: 700;
  cursor: pointer;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.header-nav a {
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 500;
  font-size: .92rem;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.header-nav a:hover { background: rgba(255,255,255,0.12); text-decoration: none; }
.header-nav .btn-register {
  border: 1px solid rgba(255,255,255,0.35);
  padding: 7px 16px;
  font-weight: 600;
  background: rgba(255,255,255,0.04);
  letter-spacing: 0.01em;
}
.header-nav .btn-register:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.6);
  text-decoration: none;
}
.header-nav .btn-accent { color: var(--text); }
.menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  padding: 4px 8px;
}

/* ----- Subnav (categories bar) ----- */
/* Desktop: subnav is always visible; the "Browse categories" toggle button
   (injected by main.js) is hidden. Mobile rules in extras.css invert this. */
.subnav-toggle { display: none; }
.subnav {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.subnav-inner {
  display: flex;
  gap: 4px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 8px 20px;
}
.subnav a {
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 500;
}
.subnav a:hover { background: var(--bg-tint); color: var(--brand); text-decoration: none; }

/* ----- Hero (animated mesh gradient — continuously moves) ----- */
.hero {
  background: #3a0011;
  color: #fff;
  padding: 96px 20px 110px;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 60% 50% at 18% 22%, rgba(245,180,0,0.45) 0%, transparent 55%),
    radial-gradient(ellipse 55% 60% at 82% 28%, rgba(198,65,102,0.55) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 28% 80%, rgba(112,5,35,0.95) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 78% 78%, rgba(58,0,17,1) 0%, transparent 60%),
    linear-gradient(135deg, #5a0a22 0%, #3a0011 50%, #200008 100%);
  filter: blur(8px) saturate(1.15);
  animation: heroMesh 18s ease-in-out infinite alternate;
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 90%, rgba(255,255,255,0.08) 0%, transparent 25%),
    radial-gradient(circle at 90% 15%, rgba(245,180,0,0.12) 0%, transparent 28%);
  pointer-events: none;
  animation: heroSparks 14s ease-in-out infinite alternate-reverse;
  z-index: -1;
}
@keyframes heroMesh {
  0%   { transform: translate(0,0)        scale(1);     filter: blur(8px) saturate(1.15) hue-rotate(0deg); }
  33%  { transform: translate(-3%,2%)     scale(1.04);  filter: blur(10px) saturate(1.25) hue-rotate(-8deg); }
  66%  { transform: translate(2%,-3%)     scale(1.06);  filter: blur(12px) saturate(1.2)  hue-rotate(6deg); }
  100% { transform: translate(-1%,1%)     scale(1.02);  filter: blur(8px) saturate(1.15) hue-rotate(0deg); }
}
@keyframes heroSparks {
  0%   { opacity: 0.6;  transform: scale(1);    }
  50%  { opacity: 1.0;  transform: scale(1.1);  }
  100% { opacity: 0.75; transform: scale(0.95); }
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 3.85rem);
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.25);
}
.hero p {
  color: rgba(255,255,255,0.88);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  margin-bottom: 32px;
  max-width: 620px;
  margin-left: auto; margin-right: auto;
  line-height: 1.55;
}
.hero > * { position: relative; }
.hero h1 { color: #fff; margin-bottom: 8px; font-size: clamp(2rem, 4vw, 2.75rem); }
.hero p { color: rgba(255,255,255,.85); margin-bottom: 24px; font-size: 1.05rem; }
.hero-search {
  display: flex; gap: 8px; flex-wrap: wrap;
  max-width: 720px; margin: 0 auto;
  background: #fff; padding: 8px;
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 4px 12px rgba(0,0,0,0.10),
    0 16px 40px rgba(0,0,0,0.18),
    0 28px 60px rgba(112,5,35,0.20);
}
.hero-search input,
.hero-search select {
  flex: 1 1 200px;
  border: 0;
  padding: 12px 14px;
  font-size: 1rem;
  outline: none;
  color: var(--text);
  background: transparent;
}
.hero-search input + select { border-left: 1px solid var(--line); }
.hero-search button {
  flex: 0 0 auto;
}
.hero-stats {
  display: flex; gap: 32px; justify-content: center; flex-wrap: wrap;
  margin-top: 32px;
  color: rgba(255,255,255,.85);
  font-size: .92rem;
}
.hero-stats strong { display: block; color: #fff; font-size: 1.3rem; }

/* ----- Section heading ----- */
.section { padding: 48px 0; }
.section-title {
  display: flex; justify-content: space-between; align-items: end; gap: 16px;
  margin-bottom: 20px;
}
.section-title h2 { margin: 0; }
.section-title a { font-weight: 600; }

/* ----- Categories grid (Gumtree-style tiles) ----- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.cat-card {
  background: linear-gradient(180deg, #ffffff 0%, #fafaff 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 14px;
  text-align: center;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(20,24,40,0.04);
  transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s, border-color .3s;
}
.cat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(112,5,35,0.3);
  text-decoration: none;
  box-shadow:
    0 4px 8px rgba(20,24,40,0.06),
    0 12px 24px rgba(112,5,35,0.14);
}
.cat-icon {
  width: 52px; height: 52px;
  margin: 0 auto 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fbeaef 0%, #f0d3dc 100%);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 2px 4px rgba(112,5,35,0.10),
    0 6px 12px rgba(112,5,35,0.08);
  border: 1px solid rgba(112,5,35,0.08);
}
.cat-card:hover .cat-icon {
  background: linear-gradient(135deg, #700523 0%, #500117 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 4px 12px rgba(112,5,35,0.4);
  transform: scale(1.05);
  transition: all .3s;
}
.cat-card h3 { font-size: .95rem; margin: 0 0 4px; }
.cat-card span { font-size: .82rem; color: var(--text-muted); }

/* ----- Listings grid ----- */
.listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.listing-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--text);
  box-shadow:
    0 1px 2px rgba(20,24,40,0.04),
    0 2px 6px rgba(20,24,40,0.05);
  transition:
    transform .35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow .3s ease,
    border-color .3s ease;
}
.listing-card:hover {
  transform: translateY(-6px) scale(1.012);
  text-decoration: none;
  border-color: rgba(112,5,35,0.25);
  box-shadow:
    0 4px 8px rgba(20,24,40,0.06),
    0 14px 28px rgba(112,5,35,0.18),
    0 28px 56px rgba(112,5,35,0.10);
}
.listing-img {
  aspect-ratio: 4 / 3;
  background: var(--bg-tint);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.listing-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}
.listing-badge {
  position: absolute; top: 10px; left: 10px;
  background: linear-gradient(180deg, #f9c633 0%, #f5b400 60%, #d99500 100%);
  color: #2a1500;
  font-size: .72rem; font-weight: 800;
  padding: 4px 10px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 4px rgba(245,180,0,0.4);
  z-index: 2;
}
.listing-price-overlay {
  position: absolute; bottom: 10px; left: 10px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 0.95rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
}
.listing-price-overlay.accent {
  background: linear-gradient(180deg, #f9c633 0%, #d99500 100%);
  color: #2a1500;
}
.listing-body { padding: 12px 14px 14px; }
.listing-title {
  font-size: 0.97rem; font-weight: 600; margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text);
  line-height: 1.35;
  min-height: 2.7em;
}
.listing-meta {
  font-size: .82rem; color: var(--text-muted);
  display: flex; justify-content: space-between; gap: 2px 8px;
  align-items: center;
  flex-wrap: wrap;
}
/* Location truncates with an ellipsis; the "posted" date never breaks
   mid-word — on narrow cards it wraps to its own clean line instead. */
.listing-meta > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing-meta > span:last-child  { flex: 0 0 auto; white-space: nowrap; }

/* ----- Browse layout ----- */
/* The mobile filter-drawer overlay must never participate in the desktop
   grid — without this base rule it becomes a phantom 280px grid item and
   pushes the filter panel + results into the wrong columns. The mobile
   media block in extras.css re-enables it as a fixed overlay when open. */
.filter-panel-overlay { display: none; }
.browse-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  padding: 24px 0 48px;
}
.filter-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  align-self: start;
  position: sticky;
  top: 80px;
}
.filter-panel h3 {
  font-size: 1rem; margin: 0 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.filter-group { margin-bottom: 18px; }
.filter-group h4 {
  font-size: .82rem; font-weight: 700; text-transform: uppercase;
  color: var(--text-soft); letter-spacing: .5px;
  margin: 0 0 8px;
}
.filter-option { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .92rem; cursor: pointer; }
.filter-option input { accent-color: var(--brand); }
.filter-range { display: flex; gap: 8px; }
.filter-range input { width: 100%; }

.browse-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.browse-toolbar .results-count { color: var(--text-muted); font-size: .92rem; }
.toolbar-controls { display: flex; gap: 8px; align-items: center; }

/* ----- Form controls ----- */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 6px;
  color: var(--text);
}
.field .hint {
  font-size: .8rem; color: var(--text-muted); margin-top: 4px;
}
.input, .select, .textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: .95rem;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(112, 5, 35, 0.15);
}
.textarea { min-height: 120px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ----- Card / panel ----- */
.panel {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow:
    0 1px 2px rgba(20,24,40,0.04),
    0 4px 12px rgba(20,24,40,0.05);
}
.panel + .panel { margin-top: 16px; }
.panel h3 { margin-top: 0; }

/* ----- Listing detail ----- */
.listing-detail {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  padding: 24px 0 48px;
}
.gallery {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery-main {
  aspect-ratio: 4/3;
  background: var(--bg-tint);
  background-size: cover; background-position: center;
}
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px; padding: 8px;
}
.gallery-thumbs > div {
  aspect-ratio: 1;
  background: var(--bg-tint);
  background-size: cover; background-position: center;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
}
.gallery-thumbs > div.active { border-color: var(--brand); }

.seller-card { text-align: center; }
.seller-avatar {
  width: 72px; height: 72px; border-radius: 999px;
  background: var(--brand-tint); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 800;
  margin: 0 auto 10px;
}

.price-tag {
  font-size: 2rem;
  font-weight: 800;
  color: var(--brand);
  margin: 0 0 8px;
}

/* ----- Footer ----- */
.site-footer {
  background:
    linear-gradient(180deg, #2a0a16 0%, #1a0a10 50%, #0a0408 100%),
    radial-gradient(ellipse at top, rgba(112,5,35,0.3) 0%, transparent 60%);
  color: #cfc8cb;
  padding: 56px 0 24px;
  margin-top: 56px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(112,5,35,0.6) 20%, rgba(245,180,0,0.6) 50%, rgba(112,5,35,0.6) 80%, transparent 100%);
}
.site-footer a { color: #cfc8cb; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid h4 { color: #fff; font-size: .9rem; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 12px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { padding: 4px 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 32px; padding-top: 16px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .85rem; color: #8e878a; }

/* Auth pages */
.auth-wrap { min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; width: 100%; max-width: 440px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 1.6rem; margin-bottom: 4px; }
.auth-card .subtitle { color: var(--text-muted); margin-bottom: 24px; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--text-soft); font-size: .85rem; margin: 16px 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq-q { width: 100%; text-align: left; background: transparent; border: 0; padding: 14px 18px; font-weight: 600; font-size: 1rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--text); }
.faq-q:hover { background: var(--bg-soft); }
.faq-q .chev { color: var(--brand); transition: transform .2s; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a { display: none; padding: 0 18px 16px; color: var(--text-muted); }
.faq-item.open .faq-a { display: block; }
.help-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 32px; }
.help-cat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; color: var(--text); }
.help-cat:hover { border-color: var(--brand); text-decoration: none; }
.help-cat h3 { font-size: 1rem; color: var(--brand); margin: 0 0 4px; }
.help-cat p { margin: 0; font-size: .88rem; color: var(--text-muted); }

/* Pagination */
.pagination { display: flex; gap: 4px; justify-content: center; margin-top: 24px; }
.pagination a, .pagination span { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: .9rem; background: #fff; }
.pagination a:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Hierarchical city → suburb filter */
.filter-cities { max-height: 380px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 4px; }
.filter-cities::-webkit-scrollbar { width: 8px; }
.filter-cities::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.filter-city-group { border-bottom: 1px solid rgba(227,230,238,0.6); }
.filter-city-group:last-child { border-bottom: 0; }
.filter-city-row { display: flex; align-items: center; padding: 8px 10px; cursor: pointer; border-radius: 8px; transition: background 0.15s; user-select: none; }
.filter-city-row:hover { background: var(--bg-soft); }
.filter-city-row input[type="radio"] { accent-color: var(--brand); margin-right: 8px; flex: 0 0 auto; }
.filter-city-row .city-name { font-weight: 600; font-size: 0.93rem; color: var(--text); flex: 1; }
.filter-city-row .city-count { font-size: 0.8rem; color: var(--text-soft); margin-right: 6px; }
.filter-city-row .city-toggle { background: transparent; border: 0; cursor: pointer; padding: 4px; color: var(--text-muted); font-size: 0.9rem; border-radius: 4px; transition: transform 0.25s ease, background 0.15s; }
.filter-city-row .city-toggle:hover { background: var(--bg-tint); color: var(--brand); }
.filter-city-group.expanded .filter-city-row .city-toggle { transform: rotate(180deg); color: var(--brand); }
.filter-city-suburbs { display: none; padding: 4px 8px 10px 30px; border-left: 2px solid var(--brand-tint); margin-left: 18px; }
.filter-city-group.expanded .filter-city-suburbs { display: block; animation: subSlide 0.25s ease-out; }
@keyframes subSlide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.filter-suburb { display: flex; align-items: center; padding: 5px 6px; font-size: 0.88rem; color: var(--text-muted); border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.filter-suburb:hover { background: var(--bg-soft); color: var(--text); }
.filter-suburb input[type="radio"] { accent-color: var(--brand); margin-right: 8px; }
.filter-suburb input[type="radio"]:checked + span { color: var(--brand); font-weight: 600; }

/* Section title underline accent */
.section-title h2 { position: relative; display: inline-block; padding-bottom: 6px; }
.section-title h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%); border-radius: 2px; }

/* Responsive */
@media (max-width: 960px) {
  .browse-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
  .listing-detail { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .header-nav { display: none; }
  .menu-toggle { display: inline-block; }
  .header-search { order: 3; flex-basis: 100%; }
  .header-inner { flex-wrap: wrap; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { padding: 56px 16px 64px; }
  .section { padding: 32px 0; }
  .header-nav .btn-register { display: none; }
}
.mobile-menu { display: none; background: var(--brand-dark); padding: 8px 0; }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: 10px 20px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.mobile-menu a:hover { background: rgba(255,255,255,.06); text-decoration: none; }
 content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(112,5,35,0.6) 20%,
    rgba(245,180,0,0.6) 50%,
    rgba(112,5,35,0.6) 80%,
    transparent 100%);
}
.site-footer a { color: #cfc8cb; }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer-grid h4 {
  color: #fff;
  font-size: .9rem; text-transform: uppercase; letter-spacing: .5px;
  margin: 0 0 12px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { padding: 4px 0; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 32px; padding-top: 16px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-size: .85rem;
  color: #8e878a;
}

/* ----- Auth pages ----- */
.auth-wrap {
  min-height: calc(100vh - 200px);
  display: flex; align-items: center; justify-content: center;
  padding: 32px 20px;
}
.auth-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 1.6rem; margin-bottom: 4px; }
.auth-card .subtitle { color: var(--text-muted); margin-bottom: 24px; }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--text-soft); font-size: .85rem;
  margin: 16px 0;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* ----- FAQ accordion ----- */
.faq-search { margin-bottom: 24px; }
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-q {
  width: 100%; text-align: left;
  background: transparent; border: 0;
  padding: 14px 18px;
  font-weight: 600; font-size: 1rem;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--text);
}
.faq-q:hover { background: var(--bg-soft); }
.faq-q .chev {
  color: var(--brand);
  transition: transform .2s;
}
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a {
  display: none;
  padding: 0 18px 16px;
  color: var(--text-muted);
}
.faq-item.open .faq-a { display: block; }

.help-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}
.help-cat {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
  color: var(--text);
}
.help-cat:hover { border-color: var(--brand); text-decoration: none; }
.help-cat h3 { font-size: 1rem; color: var(--brand); margin: 0 0 4px; }
.help-cat p { margin: 0; font-size: .88rem; color: var(--text-muted); }

/* ----- Trust strip ----- */
.trust-strip {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  text-align: center;
}
.trust-item .icon {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fbeaef 0%, #f0d3dc 60%, #e8c0cd 100%);
  color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 700;
  margin-bottom: 10px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.8),
    inset 0 -2px 0 rgba(112,5,35,0.08),
    0 4px 8px rgba(112,5,35,0.10),
    0 8px 20px rgba(112,5,35,0.10);
  border: 1px solid rgba(112,5,35,0.12);
}
.trust-item h3 { font-size: 1rem; margin: 0 0 4px; }
.trust-item p { font-size: .88rem; color: var(--text-muted); margin: 0; }

/* ----- Pagination ----- */
.pagination {
  display: flex; gap: 4px; justify-content: center;
  margin-top: 24px;
}
.pagination a, .pagination span {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: .9rem;
  background: #fff;
}
.pagination a:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ----- Responsive ----- */
@media (max-width: 960px) {
  .browse-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
  .listing-detail { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .header-nav { display: none; }
  .menu-toggle { display: inline-block; }
  .header-search { order: 3; flex-basis: 100%; }
  .header-inner { flex-wrap: wrap; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { padding: 40px 16px 48px; }
  .section { padding: 32px 0; }
}

.mobile-menu {
  display: none;
  background: var(--brand-dark);
  padding: 8px 0;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  padding: 10px 20px;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-menu a:hover { background: rgba(255,255,255,.06); text-decoration: none; }

/* ============================================================
   Hierarchical city → suburb filter
   ============================================================ */
.filter-cities {
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 4px;
}
.filter-cities::-webkit-scrollbar { width: 8px; }
.filter-cities::-webkit-scrollbar-track { background: transparent; }
.filter-cities::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }

.filter-city-group { border-bottom: 1px solid rgba(227,230,238,0.6); }
.filter-city-group:last-child { border-bottom: 0; }

.filter-city-row {
  display: flex; align-items: center;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
  user-select: none;
}
.filter-city-row:hover { background: var(--bg-soft); }
.filter-city-row input[type="radio"] { accent-color: var(--brand); margin-right: 8px; flex: 0 0 auto; }
.filter-city-row .city-name {
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--text);
  flex: 1;
}
.filter-city-row .city-count {
  font-size: 0.8rem;
  color: var(--text-soft);
  margin-right: 6px;
}
.filter-city-row .city-toggle {
  background: transparent; border: 0;
  cursor: pointer;
  padding: 4px;
  color: var(--text-muted);
  font-size: 0.9rem;
  border-radius: 4px;
  transition: transform 0.25s ease, background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.filter-city-row .city-toggle:hover { background: var(--bg-tint); color: var(--brand); }
.filter-city-group.expanded .filter-city-row .city-toggle { transform: rotate(180deg); color: var(--brand); }

.filter-city-suburbs {
  display: none;
  padding: 4px 8px 10px 30px;
  border-left: 2px solid var(--brand-tint);
  margin-left: 18px;
}
.filter-city-group.expanded .filter-city-suburbs { display: block; animation: suburbsSlide 0.25s ease-out; }
@keyframes suburbsSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.filter-suburb {
  display: flex;
  align-items: center;
  padding: 5px 6px;
  font-size: 0.88rem;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.filter-suburb:hover { background: var(--bg-soft); color: var(--text); }
.filter-suburb input[type="radio"] { accent-color: var(--brand); margin-right: 8px; }
.filter-suburb input[type="radio"]:checked + span { color: var(--brand); font-weight: 600; }

/* ============================================================
   Modern polish — refined micro-interactions
   ============================================================ */
.listing-card .listing-img > * { z-index: 2; }
.listing-card .listing-img::before {
  content: "";
  position: absolute; inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.listing-card:hover .listing-img {
  transform: scale(1.04);
}
.listing-img {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Subtle scroll-fade on cards */
.listing-card {
  opacity: 0;
  animation: cardFadeIn 0.6s ease-out forwards;
}
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.listings-grid .listing-card:nth-child(1) { animation-delay: 0.05s; }
.listings-grid .listing-card:nth-child(2) { animation-delay: 0.10s; }
.listings-grid .listing-card:nth-child(3) { animation-delay: 0.15s; }
.listings-grid .listing-card:nth-child(4) { animation-delay: 0.20s; }
.listings-grid .listing-card:nth-child(5) { animation-delay: 0.25s; }
.listings-grid .listing-card:nth-child(6) { animation-delay: 0.30s; }
.listings-grid .listing-card:nth-child(7) { animation-delay: 0.35s; }
.listings-grid .listing-card:nth-child(8) { animation-delay: 0.40s; }

/* Section title polish */
.section-title h2 {
  position: relative;
  display: inline-block;
}
.section-title h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 32px; height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
  border-radius: 2px;
}

/* Refined filter panel */
.filter-panel {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  box-shadow: 0 1px 2px rgba(20,24,40,0.04), 0 4px 16px rgba(20,24,40,0.05);
}
.filter-panel h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Header refinement */
.header-inner { padding: 14px 20px; }

/* Mobile menu - register added */
@media (max-width: 720px) {
  .header-nav .btn-register { display: none; }
}

/* ============================================================
   RECRUITMENT DIRECTORY — additions
   ============================================================ */

/* Header logo — CSS-rendered text version (matches the brand wordmark)
   Replaces the old image; renders white on the maroon header, scales up
   on retina, and degrades gracefully if web fonts fail to load. */
.logo-stack {
  display: flex;
  flex-direction: column;
  line-height: 0.95;
  letter-spacing: -0.005em;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo:hover .logo-stack { transform: scale(1.02); }
.logo-eyebrow {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.96);
  letter-spacing: 0.005em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.logo-headline {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: 1.85rem;
  color: #ffffff;
  letter-spacing: -0.022em;
  margin-top: 1px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.logo-tld {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: 0.62rem;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.20em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border-left: 2px solid rgba(255,255,255,0.55);
  padding: 4px 0 4px 6px;
  margin-left: 6px;
  display: flex;
  align-items: center;
}
@media (max-width: 720px) {
  .logo-eyebrow  { font-size: 0.70rem; }
  .logo-headline { font-size: 1.35rem; }
  .logo-tld      { font-size: 0.54rem; padding-left: 4px; margin-left: 4px; }
}
@media (max-width: 480px) {
  .logo-tld { display: none; }
}

/* Listing card — badges + agency + specialty pills */
.listing-badges {
  position: absolute;
  top: 10px; left: 10px; right: 10px;
  display: flex; flex-wrap: wrap; gap: 4px 6px;
  z-index: 2;
}
/* Higher specificity wins against legacy .listing-badge { position:absolute } so badges flex side-by-side */
.listing-badges .listing-badge {
  position: static;
  top: auto; left: auto;
  background: none;
  display: inline-block;
  padding: 4px 10px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 4px;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.20);
}
.listing-badges .listing-badge.premium { background: linear-gradient(135deg, #d9a32a 0%, #b07c00 100%); color: #1f1500; }
.listing-badges .listing-badge.new     { background: linear-gradient(135deg, #1f9c5e 0%, #0b7440 100%); color: #fff; }
.listing-badges .listing-badge.pinned  { background: linear-gradient(135deg, #8a1c3a 0%, #5a0419 100%); color: #fff; box-shadow: 0 2px 6px rgba(112,5,35,0.35); }

/* ----- Uploaded-logo card images ----- */
/* When the card image is an agency's uploaded logo (rather than a photo or
   brand gradient), show the WHOLE logo on white — contain, never crop — and
   drop the photo-style gradient overlay that would wash it out. */
.listing-img.is-logo {
  background-color: #fff;
  background-size: contain;
  background-repeat: no-repeat;
  background-origin: content-box;
  padding: 16px;
}
.listing-img.is-logo::after { display: none; }
/* Same treatment on the agency detail hero. The bottom padding reserves a
   clear band for the agency name; the overlay is pinned to the hero bottom
   (absolute) so the padding can't push it out of the flex flow, and the
   gradient deepens to brand maroon so white text stays readable on a white
   logo background. */
.agency-hero.is-logo {
  background-color: #fff;
  background-size: contain;
  background-repeat: no-repeat;
  background-origin: content-box;
  padding: 20px 20px 92px;
}
.agency-hero.is-logo::before {
  background: linear-gradient(to bottom, transparent 30%, rgba(58,0,17,0.55) 62%, rgba(58,0,17,0.95) 100%);
}
.agency-hero.is-logo .agency-hero-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: auto;
}

.listing-verified {
  position: absolute;
  bottom: 10px; left: 10px;
  background: rgba(255,255,255,0.92);
  color: var(--brand);
  padding: 3px 9px;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: .04em;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.listing-agency {
  font-size: .82rem;
  color: var(--brand);
  font-weight: 600;
  margin: 2px 0 8px;
}

.listing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 10px;
}
.listing-tag {
  font-size: .7rem;
  background: var(--brand-tint);
  color: var(--brand-dark);
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.listing-tag.more {
  background: var(--bg-tint);
  color: var(--text-muted);
}

/* Agency detail page */
.agency-hero {
  position: relative;
  height: 280px;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow);
}
.agency-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.65) 100%);
}
.agency-hero-overlay {
  position: relative;
  width: 100%;
  padding: 28px;
  color: #fff;
  z-index: 1;
}
.agency-name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: #fff;
  margin: 0 0 4px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.40);
  letter-spacing: -0.01em;
}
.agency-sub {
  color: rgba(255,255,255,0.92);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.agency-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 4px;
  background: rgba(255,255,255,0.95);
  color: var(--brand-dark);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.status-badge.premium  { background: linear-gradient(135deg,#d9a32a,#b07c00); color: #1f1500; }
.status-badge.new      { background: linear-gradient(135deg,#1f9c5e,#0b7440); color: #fff; }
.status-badge.verified { background: rgba(255,255,255,0.95); color: var(--brand-dark); }

.agency-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.agency-spec-pill {
  font-size: .82rem;
  background: var(--brand-tint);
  color: var(--brand-dark);
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
}

.agency-facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 24px;
}
.agency-facts li {
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}

.agency-card {
  text-align: center;
}
.agency-card h3 { margin: 6px 0 2px; font-size: 1.1rem; }
.agency-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-light), var(--brand));
  color: #fff;
  font-weight: 700;
  font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 8px;
  letter-spacing: 0.02em;
}
.agency-contact {
  text-align: left;
  font-size: .9rem;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.agency-contact:last-of-type { border-bottom: none; }
.agency-contact strong {
  display: inline-block;
  width: 70px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: .82rem;
}
.agency-contact a { color: var(--brand); word-break: break-all; }

/* Plan-tier cards (for register page pricing block) */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 16px 0;
}
.plan-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  position: relative;
}
.plan-card.recommended {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(112,5,35,0.10), var(--shadow);
}
.plan-card.recommended::before {
  content: "RECOMMENDED";
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  font-size: .68rem;
  letter-spacing: .12em;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}
.plan-card h3 { font-size: 1.2rem; margin-bottom: 6px; }
.plan-price {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--brand);
  font-weight: 700;
  line-height: 1;
}
.plan-period { color: var(--text-muted); font-size: .85rem; margin-bottom: 14px; }
.plan-features { list-style: none; padding: 0; margin: 0 0 18px; }
.plan-features li {
  padding: 5px 0 5px 20px;
  position: relative;
  font-size: .9rem;
}
.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: 700;
}
.plan-radio { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.plan-radio input { accent-color: var(--brand); }

/* ============================================================
   2026-05-26 amendments — header stays maroon, logo is pure black
   Brand: maroon header (original) + black logo overlaid + white
   outline/shadow on the logo text so the black stays readable
   against the dark maroon gradient.
   ============================================================ */

/* Header background stays the original maroon — no override needed.
   We just style the logo itself. */

/* Logo: PURE BLACK, no outline, no shadow — exactly as the client asked */
.logo-eyebrow,
.logo-headline,
.logo-tld {
  color: #000 !important;
  text-shadow: none !important;
}
.logo-tld {
  border-left-color: #000 !important;
}

/* ============================================================
   Mobile: keep the Search button visible (was cut off on small screens)
   ============================================================ */
@media (max-width: 720px) {
  .header-inner {
    gap: 8px;
    padding: 10px 14px;
  }
  .header-search {
    order: 3;
    flex-basis: 100%;
    margin-top: 4px;
  }
  .header-search input {
    min-width: 0;
    padding: 9px 10px;
    font-size: .92rem;
  }
  .header-search button {
    padding: 0 14px;
    flex: 0 0 auto;
    min-width: 72px;
    font-size: .92rem;
  }
  .location-pill {
    padding: 6px 10px;
    font-size: .8rem;
  }
}