:root {
  --bg: #080808;
  --bg-soft: #10100f;
  --ink: #f7f3ea;
  --muted: #b7b0a2;
  --paper: #f7f4ed;
  --paper-2: #efe9dd;
  --gold: #d7aa43;
  --gold-2: #f0ca73;
  --gold-dark: #8b6825;
  --line: rgba(255,255,255,.13);
  --line-dark: rgba(20,20,20,.12);
  --shadow: 0 28px 80px rgba(0,0,0,.38);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
button, select { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.site-header {
  height: 78px;
  padding: 0 clamp(20px, 4vw, 64px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(7,7,7,.96), rgba(7,7,7,.78));
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(215,170,67,.25);
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 190px; }
.brand-pin {
  width: 33px; height: 43px;
  display: grid; place-items: center;
  color: #17130a;
  font-size: 12px;
  background: linear-gradient(145deg, var(--gold-2), var(--gold));
  clip-path: polygon(50% 0, 84% 13%, 100% 42%, 79% 74%, 50% 100%, 21% 74%, 0 42%, 16% 13%);
  filter: drop-shadow(0 8px 20px rgba(215,170,67,.28));
}
.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { font-family: "Libre Caslon Display", Georgia, serif; font-size: 24px; font-weight: 400; color: var(--gold-2); }
.brand-copy small { margin-top: 6px; color: #d8d0c3; font-size: 9px; letter-spacing: .04em; }
.main-nav { display: flex; justify-content: center; gap: 30px; font-size: 13px; color: #ddd6cb; }
.main-nav a { position: relative; padding: 28px 0 24px; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 17px; height: 1px; background: var(--gold); transition: .25s ease; }
.main-nav a:hover::after, .main-nav a.active::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.btn { border-radius: 12px; padding: 11px 16px; border: 1px solid transparent; color: #fff; background: transparent; }
.btn-ghost { border-color: rgba(255,255,255,.22); }
.btn-gold { color: #17120a; font-weight: 700; background: linear-gradient(135deg, var(--gold-2), var(--gold)); box-shadow: 0 10px 30px rgba(215,170,67,.22); }

.hero {
  min-height: 920px;
  padding: 154px clamp(20px, 4vw, 64px) 130px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 32%, rgba(37,64,82,.25), transparent 28%),
    radial-gradient(circle at 15% 15%, rgba(215,170,67,.08), transparent 24%),
    linear-gradient(180deg, #090909 0%, #070707 72%, #0b0b0a 100%);
}
.hero-atmosphere {
  position: absolute; inset: 0; z-index: -4;
  opacity: .55;
  background:
    radial-gradient(ellipse at 72% 10%, rgba(255,255,255,.06), transparent 24%),
    radial-gradient(ellipse at 92% 28%, rgba(255,255,255,.04), transparent 20%),
    radial-gradient(ellipse at 74% 70%, rgba(118,153,174,.08), transparent 18%);
  filter: blur(12px);
}
.globe-shell {
  position: absolute;
  width: min(72vw, 1040px);
  height: min(72vw, 1040px);
  right: -10vw;
  top: 58px;
  z-index: -2;
  pointer-events: auto;
}
#globe { width: 100%; height: 100%; }
#globe canvas { width: 100% !important; height: 100% !important; filter: saturate(.88) contrast(1.1) brightness(.9); }
.globe-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, #080808 0%, rgba(8,8,8,.88) 8%, transparent 31%, transparent 74%, rgba(8,8,8,.3) 100%),
    radial-gradient(circle at center, transparent 44%, rgba(8,8,8,.1) 62%, #080808 96%);
}
.globe-status {
  position: absolute;
  top: 150px; right: 92px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 13px;
  font-size: 12px;
  color: #e8e1d6;
  border: 1px solid rgba(240,202,115,.28);
  background: rgba(8,8,8,.58);
  backdrop-filter: blur(14px);
  border-radius: 999px;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 18px var(--gold); }

.hero-content { width: min(690px, 52vw); position: relative; z-index: 4; }
.eyebrow { margin: 0 0 18px; font-size: 11px; letter-spacing: .18em; font-weight: 700; color: var(--gold-2); }
.eyebrow.dark { color: #8d681e; }
.hero h1 {
  margin: 0;
  max-width: 660px;
  font-family: "Libre Caslon Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(58px, 6vw, 92px);
  letter-spacing: -.05em;
  line-height: .91;
}
.hero h1 span { color: var(--gold-2); }
.hero-lead { max-width: 615px; margin: 28px 0 30px; color: #d8d1c7; line-height: 1.65; font-size: 16px; }

.geo-search {
  position: relative;
  width: min(720px, 100%);
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 0;
  border: 1px solid rgba(240,202,115,.42);
  border-radius: 16px;
  background: rgba(246,242,233,.97);
  box-shadow: 0 22px 60px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.55);
}
.field-group { padding: 10px 15px; display: grid; gap: 2px; min-width: 0; position: relative; }
.field-group + .field-group { border-left: 1px solid #d7d0c4; }
.field-group label { color: #8c8276; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.field-group input, .field-group select {
  width: 100%; border: 0; outline: 0; background: transparent; color: #151515; padding: 0; min-height: 31px; font-weight: 700;
}
.field-group input::placeholder { color: #827b72; font-weight: 500; }
.field-group select { appearance: none; }
.field-group input:disabled, .field-group select:disabled { opacity: .55; cursor: not-allowed; }
.search-submit {
  margin: 6px;
  border: 0;
  border-radius: 11px;
  padding: 0 18px;
  min-width: 164px;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  font-weight: 800;
  color: #18130a;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38);
}
.search-submit:disabled { filter: grayscale(.8); opacity: .6; cursor: not-allowed; }
.autocomplete {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 8px);
  max-height: 280px; overflow: auto;
  display: none;
  background: #f6f1e7;
  border: 1px solid #cfc5b4;
  box-shadow: var(--shadow);
  border-radius: 14px;
  z-index: 40;
}
.autocomplete.open { display: block; }
.autocomplete button {
  width: 100%; display: flex; justify-content: space-between; gap: 20px; text-align: left;
  padding: 12px 14px; border: 0; border-bottom: 1px solid #dfd7cb; background: transparent; color: #171717;
}
.autocomplete button:last-child { border-bottom: 0; }
.autocomplete button:hover, .autocomplete button.active { background: #eee4d2; }
.autocomplete small { color: #756b60; }

.quick-categories { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; max-width: 665px; }
.quick-categories button {
  color: #e8e1d6; background: rgba(8,8,8,.58); border: 1px solid rgba(255,255,255,.16); border-radius: 10px;
  padding: 10px 12px; backdrop-filter: blur(12px); transition: .2s ease;
}
.quick-categories button:hover { border-color: rgba(240,202,115,.55); transform: translateY(-2px); color: var(--gold-2); }
.hero-note { margin-top: 30px; display: inline-grid; gap: 7px; transform: rotate(-2deg); }
.handline { font-family: "Libre Caslon Display", Georgia, serif; font-size: 19px; font-style: italic; color: #f0eadf; }
.hero-note-line { width: 96px; height: 3px; border-radius: 999px; background: var(--gold); transform: rotate(-7deg); }

.hero-rail {
  position: absolute; right: 28px; top: 225px; z-index: 5;
  display: grid; gap: 18px;
}
.hero-rail div { display: grid; gap: 2px; justify-items: end; }
.hero-rail strong { color: var(--gold-2); font-size: 10px; letter-spacing: .16em; }
.hero-rail span { color: #bbb4aa; font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }

.hero-bottom-strip {
  position: absolute; left: clamp(20px, 4vw, 64px); right: clamp(20px, 4vw, 64px); bottom: 34px;
  z-index: 6;
  display: grid; grid-template-columns: 1.2fr 1fr 1fr;
  background: rgba(16,16,15,.72); border: 1px solid rgba(255,255,255,.15); border-radius: 18px; backdrop-filter: blur(18px);
}
.hero-bottom-strip article { padding: 18px 20px; display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center; }
.hero-bottom-strip article + article { border-left: 1px solid rgba(255,255,255,.12); }
.strip-icon { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(240,202,115,.36); color: var(--gold-2); border-radius: 50%; }
.hero-bottom-strip strong { display: block; font-size: 13px; color: #f5ead8; }
.hero-bottom-strip p { margin: 4px 0 0; color: #aaa39a; font-size: 11px; line-height: 1.4; }

.city-context { background: var(--paper); color: #171717; padding: 76px clamp(20px, 4vw, 64px) 88px; }
.section-heading { display: flex; justify-content: space-between; gap: 40px; align-items: end; }
.section-heading h2 { margin: 0; font: 400 clamp(38px, 4vw, 58px)/.98 "Libre Caslon Display", Georgia, serif; letter-spacing: -.035em; }
.section-heading > p { margin: 0; max-width: 520px; color: #6c645d; line-height: 1.6; }
.nearby-wrap { margin-top: 44px; }
.nearby-title-row { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line-dark); }
.nearby-title-row h3 { margin: 0; font-size: 18px; }
.nearby-title-row span { color: #756e66; font-size: 12px; }
.nearby-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.city-placeholder, .city-card {
  min-height: 180px; padding: 22px; border: 1px solid #ddd4c7; border-radius: 16px; background: linear-gradient(180deg, #fff, #f3ede4); position: relative; overflow: hidden;
}
.city-placeholder span, .city-card .distance { color: #9c7c35; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.city-placeholder strong, .city-card h4 { display: block; margin: 46px 0 8px; font: 400 25px/1 "Libre Caslon Display", Georgia, serif; }
.city-placeholder p, .city-card p { color: #746b61; margin: 0; line-height: 1.45; font-size: 13px; }
.city-card { cursor: pointer; transition: .25s ease; }
.city-card::before { content: ""; position: absolute; width: 120px; height: 120px; border: 1px solid rgba(215,170,67,.25); border-radius: 50%; right: -40px; top: -42px; }
.city-card:hover { transform: translateY(-4px); border-color: #c8ad73; box-shadow: 0 18px 45px rgba(36,27,13,.09); }
.city-card h4 { margin-top: 42px; }
.city-card button { margin-top: 18px; border: 0; background: transparent; padding: 0; color: #6d5014; font-weight: 800; }

.business-preview { padding: 78px clamp(20px, 4vw, 64px) 92px; background: #0b0b0a; }
.section-heading.inverse > p { color: #aaa39a; }
.business-grid { margin-top: 42px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.business-card { border: 1px solid rgba(255,255,255,.12); border-radius: 18px; overflow: hidden; background: #121211; padding: 12px 12px 18px; }
.mock-photo { height: 190px; border-radius: 12px; background-size: cover; background-position: center; }
.mock-photo.food { background: radial-gradient(circle at 30% 30%, #7a4a19, transparent 15%), linear-gradient(135deg,#33200f,#8b5d29 45%,#1a130c); }
.mock-photo.stay { background: linear-gradient(135deg,#4b3925,#cab68f 47%,#2b241c); }
.mock-photo.shop { background: linear-gradient(135deg,#2c2f23,#b39b57 48%,#202119); }
.business-card span { display: inline-block; margin-top: 15px; padding: 5px 8px; font-size: 10px; color: #19150c; background: var(--gold-2); border-radius: 999px; font-weight: 800; }
.business-card h3 { margin: 14px 0 6px; font: 400 28px/1 "Libre Caslon Display", Georgia, serif; }
.business-card p { margin: 0; color: #aaa39a; line-height: 1.5; font-size: 13px; }
.business-card button { margin-top: 20px; border: 1px solid rgba(240,202,115,.35); color: var(--gold-2); background: transparent; border-radius: 10px; padding: 10px 13px; }

.site-footer { min-height: 170px; padding: 38px clamp(20px, 4vw, 64px); display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; border-top: 1px solid rgba(255,255,255,.09); background: #070707; }
.site-footer p { margin: 0; color: #aaa39a; text-align: center; }
.site-footer > small { color: #817a72; }

@media (max-width: 1100px) {
  .main-nav { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .globe-shell { width: 980px; height: 980px; right: -460px; opacity: .9; }
  .hero-content { width: min(720px, 76vw); }
  .hero-rail { display: none; }
  .nearby-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .site-header { height: 70px; padding: 0 16px; }
  .brand-copy strong { font-size: 21px; }
  .brand-copy small { display: none; }
  .btn-ghost { display: none; }
  .btn-gold { padding: 9px 11px; font-size: 11px; }
  .hero { min-height: 980px; padding: 112px 16px 165px; }
  .globe-shell { width: 720px; height: 720px; right: -330px; top: 250px; opacity: .74; }
  .globe-status { top: 85px; right: 300px; }
  .globe-vignette { background: linear-gradient(90deg,#080808 0%,rgba(8,8,8,.74) 34%,transparent 74%), radial-gradient(circle at center,transparent 40%,#080808 98%); }
  .hero-content { width: 100%; }
  .hero h1 { font-size: clamp(52px, 15vw, 72px); }
  .hero-lead { font-size: 14px; max-width: 88%; }
  .geo-search { grid-template-columns: 95px 1fr; }
  .search-submit { grid-column: 1 / -1; height: 50px; margin-top: 0; }
  .quick-categories { max-width: 92%; }
  .quick-categories button { font-size: 11px; }
  .hero-bottom-strip { left: 16px; right: 16px; bottom: 18px; grid-template-columns: 1fr; }
  .hero-bottom-strip article { padding: 12px 14px; }
  .hero-bottom-strip article + article { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .section-heading { display: grid; align-items: start; }
  .nearby-title-row { align-items: start; display: grid; }
  .nearby-grid, .business-grid { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; text-align: left; }
  .site-footer p { text-align: left; }
}