/* ============================================================
   City of Gold Estates — Design System v2

   Direction: leans into the name literally — "golden hour over
   Lagos". The hero carries a warm sunset gradient behind a flat
   skyline silhouette, gold is used generously (not as a muted
   accent), and the wordmark's "Gold" catches a slow shimmer.
   Content sections stay clean and quiet so the gold moments (hero,
   stat band, CTA) read as deliberate, not decorative everywhere.
   Same class names and CSS variable names as v1 so admin.css and
   every PHP template keep working without changes.
   ============================================================ */

:root {
  /* Color */
  --ink:            #1A1420;
  --ink-soft:       #5B4F63;
  --parchment:      #FCFBFA;   /* main content background (renamed meaning, same var) */
  --parchment-soft: #F3EFEA;   /* alternating panel background */
  --white:          #FFFFFF;
  --brass:          #E3A63E;   /* primary gold */
  --brass-deep:     #B9822B;   /* deeper gold, hover/pressed */
  --survey-blue:    #1E4234;   /* deep forest green — headers, footer, "rented" status */
  --clay:           #C1502E;   /* ember — secondary accent, "sold" status, errors */
  --line:           #E8E1D8;

  --gold-bright:    #FCD980;   /* shimmer highlight */
  --dusk-deep:      #142C23;   /* darkest green — footer bottom, skyline silhouette */

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --radius: 10px;
  --radius-lg: 22px;

  /* Elevation — gives cards real depth instead of a flat line + white box */
  --shadow-sm: 0 2px 10px rgba(31, 18, 41, 0.07);
  --shadow-md: 0 14px 32px rgba(31, 18, 41, 0.13);
  --shadow-lg: 0 28px 56px rgba(31, 18, 41, 0.18);
  --shadow-gold: 0 10px 26px rgba(227, 166, 62, 0.32);
  --max-width: 1200px;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background:
    radial-gradient(ellipse 1100px 650px at 8% 0%, rgba(227, 166, 62, 0.16), transparent 55%),
    radial-gradient(ellipse 900px 650px at 100% 20%, rgba(30, 66, 52, 0.13), transparent 55%),
    radial-gradient(ellipse 800px 550px at 15% 100%, rgba(193, 80, 46, 0.10), transparent 55%),
    var(--parchment);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 600; }
h2 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 var(--space-2); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--brass-deep);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin: 0 0 var(--space-1);
}

/* ---------- Signature device: gold top accent ---------- */
.marked { position: relative; }
.marked::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--brass) 0%, var(--gold-bright) 50%, var(--brass) 100%);
  background-size: 200% 100%;
  animation: shimmer-sweep 5s linear infinite;
  pointer-events: none;
}

@keyframes shimmer-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Gold shimmer text, used sparingly (wordmark) */
.shimmer-gold {
  background: linear-gradient(90deg, var(--brass-deep) 0%, var(--gold-bright) 45%, var(--brass) 55%, var(--brass-deep) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer-sweep 4s linear infinite;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 0.85em 1.7em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn-primary {
  background: linear-gradient(155deg, var(--gold-bright), var(--brass) 55%, var(--brass-deep));
  color: var(--dusk-deep);
  box-shadow: var(--shadow-gold);
  animation: btn-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes btn-glow-pulse {
  0%, 100% { box-shadow: var(--shadow-gold); }
  50%      { box-shadow: 0 12px 36px rgba(227, 166, 62, 0.55); }
}
.btn-primary:hover { background: linear-gradient(155deg, var(--gold-bright), var(--brass)); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(227, 166, 62, 0.4); animation-play-state: paused; }
.btn-outline {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--parchment); transform: translateY(-1px); }
.btn-whatsapp {
  background: #25D366;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.btn-whatsapp:hover { background: #1FBD5A; transform: translateY(-1px); }

/* ---------- Header ---------- */
.site-header {
  background: var(--survey-blue);
  color: var(--parchment);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(227, 166, 62, 0.3);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.wordmark-main {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--white);
}
.wordmark-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
}
.site-nav ul {
  display: flex;
  gap: var(--space-3);
}
.site-nav a {
  font-size: 0.92rem;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.site-nav a:hover,
.site-nav a.active {
  color: var(--brass);
  border-color: var(--brass);
}
.header-phone {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  padding: 0.4em 0.9em;
  white-space: nowrap;
}
.header-phone:hover { background: var(--brass); border-color: var(--brass); color: var(--dusk-deep); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--parchment);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  --spot-x: 50%;
  --spot-y: 40%;
  padding: var(--space-6) 0 calc(var(--space-6) + 40px);
  background:
    linear-gradient(180deg, rgba(30, 66, 52, 0.88) 0%, rgba(193, 80, 46, 0.6) 55%, rgba(227, 166, 62, 0.35) 100%),
    url('https://images.unsplash.com/photo-1757359056339-22968344cce6?w=1920&h=1280&fit=crop&auto=format&q=80') center/cover no-repeat;
  background-size: 100% 100%, 108% 108%;
  animation: hero-zoom 24s ease-in-out infinite alternate;
  color: var(--white);
}
@keyframes hero-zoom {
  0%   { background-size: 100% 100%, 108% 108%; }
  100% { background-size: 100% 100%, 124% 124%; }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 320px at var(--spot-x) var(--spot-y), rgba(252, 217, 128, 0.4), transparent 70%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hero:hover::before,
.hero.spotlight-active::before {
  opacity: 1;
}
.hero::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -60%;
  width: 45%;
  height: 140%;
  background: linear-gradient(100deg,
    transparent,
    rgba(252, 217, 128, 0.22) 45%,
    rgba(252, 217, 128, 0.42) 50%,
    rgba(252, 217, 128, 0.22) 55%,
    transparent);
  transform: skewX(-18deg);
  animation: hero-sweep 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes hero-sweep {
  0%, 62%, 100% { left: -60%; }
  32% { left: 130%; }
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.hero-inner .eyebrow { color: var(--gold-bright); animation: fade-slide-up 0.7s ease both; animation-delay: 0.15s; }
.hero-inner h1 { color: var(--white); animation: fade-slide-up 0.8s ease both; animation-delay: 0.32s; }
@keyframes fade-slide-up {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-slide-down {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.site-header { animation: fade-slide-down 0.6s ease both; }
.hero-lead {
  font-size: 1.15rem;
  max-width: 56ch;
  color: var(--ink-soft);
}
.hero .hero-lead,
.page-intro .hero-lead {
  color: rgba(255, 255, 255, 0.88);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Page intro banner: About / Contact mastheads ---------- */
.page-intro {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(30, 66, 52, 0.86), rgba(193, 80, 46, 0.62) 60%, rgba(227, 166, 62, 0.4) 100%),
    url('https://images.unsplash.com/photo-1431540015161-0bf868a2d407?w=1600&h=900&fit=crop&auto=format&q=80') center/cover no-repeat;
  background-size: 100% 100%, 112% 112%;
  animation: page-intro-zoom 20s ease-in-out infinite alternate;
  color: var(--white);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
@keyframes page-intro-zoom {
  0%   { background-size: 100% 100%, 112% 112%; }
  100% { background-size: 100% 100%, 130% 130%; }
}
.page-intro::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -60%;
  width: 45%;
  height: 160%;
  background: linear-gradient(100deg, transparent, rgba(252, 217, 128, 0.28) 45%, rgba(252, 217, 128, 0.48) 50%, rgba(252, 217, 128, 0.28) 55%, transparent);
  transform: skewX(-18deg);
  animation: hero-sweep 7s ease-in-out infinite;
  pointer-events: none;
}
.page-intro .eyebrow, .page-intro h1, .page-intro .hero-lead {
  position: relative;
  z-index: 2;
}
.page-intro .eyebrow { color: var(--gold-bright); }
.page-intro h1 { color: var(--white); margin-bottom: 0.4em; }

/* ---------- About page: photo band + feature cards ---------- */
.about-photo {
  position: relative;
  overflow: hidden;
  height: 340px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 106%;
  animation: about-photo-zoom 18s ease-in-out infinite alternate;
  border-radius: var(--radius-lg);
  margin: var(--space-4) 0;
  box-shadow: var(--shadow-md);
}
@keyframes about-photo-zoom {
  0%   { background-size: 106%; }
  100% { background-size: 124%; }
}
.about-photo::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -60%;
  width: 45%;
  height: 160%;
  background: linear-gradient(100deg, transparent, rgba(252, 217, 128, 0.25) 45%, rgba(252, 217, 128, 0.45) 50%, rgba(252, 217, 128, 0.25) 55%, transparent);
  transform: skewX(-18deg);
  animation: hero-sweep 8s ease-in-out infinite;
  animation-delay: 2.5s;
  pointer-events: none;
}
.about-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.about-feature {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.about-feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brass);
}
.about-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: var(--space-2);
  background: linear-gradient(135deg, var(--gold-bright), var(--brass-deep));
  color: var(--dusk-deep);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--shadow-gold);
}

.hero-search-card {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-lg);
  animation: fade-slide-up 0.8s ease both;
  animation-delay: 0.52s;
}
.quick-search {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
}
.quick-search select,
.quick-search input {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.75em 1em;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
}
.quick-search input { flex: 0 1 240px; min-width: 180px; }

/* ---------- Stat band ---------- */
.stat-band {
  background: linear-gradient(120deg, var(--survey-blue), var(--dusk-deep));
  color: var(--white);
  padding: var(--space-4) 0;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  text-align: center;
}
.stat-number {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3rem);
  color: var(--gold-bright);
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- Sections + scroll reveal ---------- */
.section {
  padding: var(--space-5) 0;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.section.is-visible { opacity: 1; transform: none; }
.section-head { margin-bottom: var(--space-4); }

/* ---------- Listings ---------- */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}
.listing-card {
  background: var(--white);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, transform 0.25s ease, box-shadow 0.25s ease;
  opacity: 0;
  transform: translateY(20px);
}
.listing-card.is-visible { opacity: 1; transform: none; }
.listing-card:hover {
  border-color: var(--brass);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.listing-card h3 { margin-bottom: 0.25em; }
.listing-area { color: var(--ink-soft); font-size: 0.9rem; }
.listing-price {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 500;
  margin-top: var(--space-1);
  color: var(--clay);
}
.listing-meta {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.stamp {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35em 0.85em;
  border-radius: 999px;
  color: var(--white);
  margin-bottom: var(--space-2);
}
.stamp-sale { background: var(--clay); }
.stamp-rent { background: var(--survey-blue); }

/* ---------- Services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-2);
}
.services-grid li {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  padding-top: calc(var(--space-3) + 2px);
  font-size: 0.95rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.services-grid li::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-bottom: var(--space-2);
  background: linear-gradient(135deg, var(--gold-bright), var(--brass-deep));
  box-shadow: 0 0 0 4px rgba(227, 166, 62, 0.15);
}
.services-grid li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brass);
}

/* ---------- CTA ---------- */
.cta { background: linear-gradient(120deg, var(--survey-blue), var(--clay)); color: var(--white); border-radius: var(--radius-lg); margin: 0 var(--space-3); width: auto; }
.cta .wrap { padding: 0; max-width: none; }
.cta-inner {
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.cta-inner h2 { color: var(--white); margin: 0; max-width: 32ch; }
.cta .btn-outline { border-color: var(--gold-bright); color: var(--white); }
.cta .btn-outline:hover { background: var(--brass); border-color: var(--brass); color: var(--dusk-deep); }

/* ---------- Footer ---------- */
.site-footer { background: var(--dusk-deep); color: var(--parchment); margin-top: var(--space-5); }
.footer-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  padding-top: var(--space-5);
  padding-bottom: var(--space-4);
}
.footer-col h3, .footer-col h4 { color: var(--white); }
.footer-col h4 { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-col p, .footer-col li { color: #C9BFD1; font-size: 0.9rem; }
.footer-col a:hover { color: var(--brass); }
.footer-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.5em;
  color: #4ADE80 !important;
  font-weight: 600;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid rgba(227, 166, 62, 0.2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #9689A3;
}

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-float {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 30;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
  transition: transform 0.15s ease;
}
.whatsapp-float:hover { transform: scale(1.06); }
.whatsapp-float svg { width: 28px; height: 28px; }
.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: pulse-ring 2.4s ease-out infinite;
  z-index: -1;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- Filter bar (listings page) ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.filter-bar select,
.filter-bar input {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.65em 0.9em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--parchment-soft);
  color: var(--ink);
}
.filter-bar input[type="number"] { width: 130px; }

/* ---------- Empty / not-found states ---------- */
.empty-state {
  padding: var(--space-5) var(--space-4);
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  max-width: 520px;
  margin: var(--space-4) auto 0;
}
.empty-state .btn { margin-top: var(--space-2); }

/* ---------- Listing card as a link + photo ---------- */
.listing-card { display: block; overflow: hidden; }
.listing-photo {
  height: 170px;
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-2);
  background-color: var(--line);
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}
.listing-card:hover .listing-photo { transform: scale(1.04); }
.listing-photo-empty,
.detail-photo-empty {
  background-image:
    linear-gradient(135deg, var(--brass) 0%, var(--clay) 50%, var(--survey-blue) 100%);
  opacity: 0.85;
}

/* ---------- Listing detail page ---------- */
.back-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  margin-bottom: var(--space-3);
  color: var(--clay);
}
.detail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.detail-photo {
  height: 280px;
  background-color: var(--line);
  background-size: cover;
  background-position: center;
}
.detail-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
.detail-main h3 { margin-top: var(--space-3); }
.detail-side {
  background: var(--white);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  position: sticky;
  top: calc(var(--space-3) + 60px);
}

/* ---------- Enquiry / contact forms ---------- */
.inquiry-form { display: flex; flex-direction: column; gap: var(--space-2); }
.inquiry-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  font-size: 0.85rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brass-deep);
}
.inquiry-form input,
.inquiry-form textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.7em 0.9em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--parchment-soft);
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
}
.form-success { font-family: var(--font-mono); font-size: 0.9rem; color: #3F7A5C; }
.form-error   { font-family: var(--font-mono); font-size: 0.85rem; color: var(--clay); margin-bottom: var(--space-1); }

.whatsapp-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin-top: var(--space-2);
  padding: 0.8em;
  background: #25D366;
  color: var(--white);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.92rem;
}
.whatsapp-inline:hover { background: #1FBD5A; }
.whatsapp-inline svg { width: 18px; height: 18px; }
.form-divider {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-2) 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.form-divider::before, .form-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Contact page offices ---------- */
.office-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.office-card {
  background: var(--white);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.office-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* ---------- About page services list ---------- */
.about-services { margin-bottom: var(--space-3); }
.about-services li {
  padding: 0.6em 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.about-services li:last-child { border-bottom: none; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--survey-blue);
    border-bottom: 1px solid var(--brass);
    display: none;
  }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: var(--space-2) var(--space-3); }
  .site-nav li { padding: var(--space-1) 0; }
  .header-phone { display: none; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-side { position: static; }
  .cta { margin: 0 var(--space-2); }
  .whatsapp-float { width: 52px; height: 52px; right: var(--space-2); bottom: var(--space-2); }

  /* Tighter vertical rhythm — desktop spacing wastes a lot of a phone screen */
  .hero { padding: var(--space-4) 0 calc(var(--space-4) + 24px); }
  .section { padding: var(--space-4) 0; }
  .page-intro { padding: var(--space-3); }
  .stat-band { padding: var(--space-3) 0; }

  /* Search bar stacks to full-width fields instead of wrapping mid-row —
     much easier to tap accurately than a wrapped, uneven row. */
  .quick-search { flex-direction: column; align-items: stretch; }
  .quick-search select,
  .quick-search input,
  .quick-search button { width: 100%; }

  .cta-inner { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .cta-inner .btn { width: 100%; text-align: center; }

  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar select,
  .filter-bar input,
  .filter-bar button { width: 100%; }

  /* iOS Safari auto-zooms into any focused input under 16px — this stops that */
  .quick-search select, .quick-search input,
  .filter-bar select, .filter-bar input,
  .inquiry-form input, .inquiry-form textarea,
  .admin-form input, .admin-form select, .admin-form textarea {
    font-size: 16px;
  }

  .stat-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-1); }
  .stat-number { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .stat-label { font-size: 0.65rem; }

  .header-inner { flex-wrap: wrap; }
  .wordmark-main { font-size: 1.1rem; }

  .about-features { grid-template-columns: 1fr; }
  .office-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 var(--space-2); }
  .hero { padding: var(--space-3) 0 calc(var(--space-3) + 20px); }
  h1 { font-size: 1.4rem; }
  .hero-lead { font-size: 1rem; }
  .btn { width: 100%; text-align: center; }
  .listing-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .detail-gallery { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; text-align: left; }
}