/* North Carolina Town Directory - shared styles
   Classic yellow-pages directory look: navy, yellow and black. */
:root {
  --navy: #0d1f4d;
  --navy-2: #1c3470;
  --navy-3: #2a4a94;
  --yellow: #ffd200;
  --yellow-2: #f5b800;
  --yellow-pale: #fff6c4;
  --yellow-soft: #fffbe8;
  --gold: #c9971c;
  --black: #111111;
  --rule: #d9c776;
  --text: #1a1a1a;
  --link: #0a2f8f;
  --visited: #5a2a82;
  --muted: #5a5a5a;
  --paper: #efe9d2;
  /* region colors */
  --mtn: #2f7d4f;
  --mtn-pale: #e6f3ea;
  --pied: #b5532c;
  --pied-pale: #fbece4;
  --coast: #1f72a8;
  --coast-pale: #e3f0f8;
  --slab: "Arvo", Georgia, "Times New Roman", serif;
  --display: "Alfa Slab One", "Arvo", Georgia, serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--text);
  font: 13px/1.55 Verdana, Tahoma, Geneva, Arial, sans-serif;
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(45deg, rgba(13,31,77,.035) 0 2px, transparent 2px 12px);
}

a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover { color: #b00000; }
img { max-width: 100%; }

.wrap {
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  border-left: 1px solid var(--navy);
  border-right: 1px solid var(--navy);
  box-shadow: 0 0 0 6px rgba(13,31,77,.06), 0 10px 40px rgba(0,0,0,.18);
  min-height: 100vh;
  overflow-x: clip;
}

/* ---------- Header / hero banner ---------- */
.masthead {
  position: relative;
  min-height: 210px;
  background: var(--navy);
  border-bottom: 5px solid var(--yellow);
  overflow: hidden;
  isolation: isolate;
}
.masthead .hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
  z-index: -2;
}
.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(13,31,77,.97) 0%, rgba(13,31,77,.9) 34%, rgba(13,31,77,.35) 62%, rgba(13,31,77,0) 85%),
    linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,0) 45%);
}
.hero-inner {
  padding: 26px 24px 22px;
  max-width: 560px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.brand .logo { flex: 0 0 auto; filter: drop-shadow(3px 3px 0 #000); }
.brand-text { display: flex; flex-direction: column; }
.site-title {
  font: 30px/1.02 var(--display);
  color: var(--yellow);
  letter-spacing: .3px;
  text-shadow: 3px 3px 0 #000;
}
.site-url {
  margin-top: 5px;
  color: #fff;
  font-size: 10.5px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.tagline {
  margin: 14px 0 0;
  color: #e4e9f7;
  font: italic 14px/1.4 var(--slab);
  text-shadow: 1px 1px 0 #000;
}
.hero-trades {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.hero-trades li {
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,210,0,.6);
  color: var(--yellow);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 2px;
}

/* ---------- Top nav ---------- */
.topnav {
  background: var(--black);
  border-bottom: 3px solid var(--navy);
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  font-weight: bold;
}
.nav-links { display: flex; flex-wrap: wrap; }
.topnav a,
.topnav a:visited {
  color: var(--yellow);
  text-decoration: none;
}
.nav-links a {
  display: block;
  padding: 8px 12px;
  border-right: 1px solid #333;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: 11px;
}
.nav-links a:first-child { border-left: 1px solid #333; }
.nav-links a:hover { background: var(--navy-2); color: #fff; }
.nav-links a[aria-current], .nav-links a.active { background: var(--yellow); color: var(--black); }
.topnav .add {
  background: linear-gradient(#ffe24d, var(--yellow-2));
  color: var(--black) !important;
  padding: 3px 10px;
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow: 0 2px 0 #000;
  font-size: 11px;
  margin: 5px 0;
}
.topnav .add:hover { background: #fff; }

/* ---------- Breadcrumbs ---------- */
.crumbs {
  background: var(--yellow-pale);
  border-bottom: 1px solid var(--rule);
  padding: 6px 14px;
  font-size: 11px;
}
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before {
  content: "";
  width: 7px; height: 7px;
  margin: 0 9px 0 7px;
  border-top: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  transform: rotate(45deg);
}
.crumbs li:first-child a::before,
.crumbs li:first-child span::before {
  content: "";
  display: inline-block;
  width: 12px; height: 11px;
  margin-right: 5px;
  vertical-align: -1px;
  background: var(--navy);
  clip-path: polygon(50% 0, 100% 48%, 86% 48%, 86% 100%, 14% 100%, 14% 48%, 0 48%);
}
.crumbs [aria-current] { font-weight: bold; color: var(--black); }

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  grid-template-areas: "side main";
  gap: 0;
  align-items: start;
}
.sidebar { grid-area: side; padding: 14px 0 14px 14px; }
.content { grid-area: main; min-width: 0; padding: 14px 18px 22px; }

/* ---------- Boxes ---------- */
.box {
  border: 1px solid var(--navy);
  margin: 0 0 14px;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 2px 2px 0 rgba(13,31,77,.15);
}
.box h2,
.content .box h2,
.box .box-title {
  margin: 0;
  background: linear-gradient(var(--navy-2), var(--navy));
  color: var(--yellow);
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .7px;
  padding: 5px 8px;
  border-bottom: 2px solid var(--yellow);
}
.box .box-body { padding: 8px 9px; }
.box.yellow { background: var(--yellow-soft); }

/* sidebar featured mini card */
.box.featured {
  border: 2px solid var(--black);
  background: linear-gradient(160deg, #fff6c4 0%, #ffe680 100%);
}
.box.featured .box-title { background: var(--black); border-bottom-color: var(--gold); }
.box.featured .box-title::before { content: "\2605\00A0"; color: var(--yellow); }
.box.featured p { margin: 0 0 6px; font-size: 12px; }
.box.featured .fm-photo { display: block; width: 100%; height: 88px; object-fit: cover; border-bottom: 2px solid var(--black); }
.box.featured .more { font-weight: bold; }

.townlist { list-style: none; margin: 0; padding: 0; }
.townlist li {
  border-bottom: 1px dotted var(--rule);
  padding: 3px 0 3px 14px;
  position: relative;
}
.townlist li:last-child { border-bottom: 0; }
.townlist li::before {
  content: "";
  position: absolute;
  left: 2px; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--navy);
}
.townlist li.r-mtn::before { background: var(--mtn); }
.townlist li.r-pied::before { background: var(--pied); }
.townlist li.r-coast::before { background: var(--coast); }
.townlist .region {
  font-weight: bold;
  color: var(--navy);
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 8px 0 3px;
  border-bottom: 2px solid var(--rule);
}
.townlist li.region::before { display: none; }
.townlist .region.r-mtn { border-bottom-color: var(--mtn); color: var(--mtn); }
.townlist .region.r-pied { border-bottom-color: var(--pied); color: var(--pied); }
.townlist .region.r-coast { border-bottom-color: var(--coast); color: var(--coast); }
.townlist li.region:first-child { padding-top: 0; }
.townlist li.current { background: var(--yellow); margin: 0 -9px; padding-left: 23px; padding-right: 9px; }
.townlist li.current::before { left: 11px; }
.townlist li.current a { font-weight: bold; color: #000; text-decoration: none; }

/* ---------- Content typography ---------- */
.content h1 {
  font: 700 26px/1.2 var(--slab);
  color: var(--navy);
  margin: 2px 0 10px;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--yellow);
  position: relative;
}
.content h1::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 70px; height: 3px;
  background: var(--navy);
}
.content h2 {
  font: 700 17px/1.3 var(--slab);
  color: var(--navy);
  margin: 20px 0 8px;
}
.content p { margin: 0 0 10px; }
.small { font-size: 11px; color: var(--muted); }
.town-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.note {
  border: 1px dashed var(--navy-2);
  border-left: 5px solid var(--navy);
  background: var(--yellow-soft);
  padding: 8px 10px;
  margin: 10px 0;
  border-radius: 2px;
}
.lead-box {
  background: var(--yellow-pale);
  border: 2px solid var(--black);
  border-left: 8px solid var(--navy);
  padding: 12px 14px;
  margin: 0 0 16px;
  font: 15px/1.6 var(--slab);
  box-shadow: 3px 3px 0 var(--yellow-2);
}
.lead-box p { margin: 0; }

/* region pills */
.pill {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 10px;
  color: #fff;
  background: var(--navy);
}
.pill.r-mtn { background: var(--mtn); }
.pill.r-pied { background: var(--pied); }
.pill.r-coast { background: var(--coast); }
.pill.county { background: #fff; color: var(--navy); border: 1px solid var(--navy); }

/* ---------- Search bar ---------- */
.searchbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin: 0 0 16px;
  border: 2px solid var(--black);
  border-radius: 6px;
  background: var(--yellow);
  padding: 8px;
  box-shadow: 3px 3px 0 var(--navy);
}
.searchbar label {
  flex: 0 0 100%;
  font: 700 12px var(--slab);
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin: 0 0 6px 2px;
}
.searchbar .field {
  flex: 1 1 200px;
  position: relative;
  min-width: 0;
}
.searchbar .field svg {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.searchbar input[type="text"],
.searchbar select {
  font: 13px Verdana, sans-serif;
  height: 38px;
  border: 1px solid #000;
  background: #fff;
  color: var(--text);
  min-width: 0;
}
.searchbar input[type="text"] {
  width: 100%;
  padding: 0 10px 0 34px;
  border-radius: 4px 0 0 4px;
}
.searchbar select {
  flex: 0 1 170px;
  padding: 0 6px;
  border-left: 0;
  border-radius: 0;
}
.searchbar .btn {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 18px;
  border-radius: 0 4px 4px 0;
  font-size: 13px;
}
.btn {
  font: bold 12px Verdana, sans-serif;
  background: linear-gradient(var(--navy-3), var(--navy));
  color: var(--yellow);
  border: 1px solid #000;
  padding: 4px 12px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.btn:hover:not(:disabled) { background: var(--black); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Trade badges (icons are inline SVG data URIs) ---------- */
.trade {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 4px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.3;
  border: 1px solid;
  white-space: normal;
}
.trade::before {
  content: "";
  flex: 0 0 16px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: no-repeat center / 16px 16px;
}
.t-roof  { color: #8a2d12; background: #fdebe3; border-color: #e3b19c; }
.t-hvac  { color: #0e5f8a; background: #e2f2fb; border-color: #9fcbe3; }
.t-plumb { color: #125e5a; background: #e0f4f2; border-color: #97d1ca; }
.t-elec  { color: #7a5600; background: #fff3c7; border-color: #e7c65a; }
.t-gc    { color: #1c3470; background: #e8ecf8; border-color: #aab7df; }
.t-roof::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%238a2d12'/%3E%3Cpath d='M3 8.5 8 4l5 4.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M4.8 8.2V12h6.4V8.2' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E"); }
.t-hvac::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%230e5f8a'/%3E%3Cg stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M8 3.2v9.6M3.8 5.6l8.4 4.8M3.8 10.4l8.4-4.8'/%3E%3C/g%3E%3C/svg%3E"); }
.t-plumb::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23125e5a'/%3E%3Cpath d='M8 3.3c1.9 2.6 3 4.3 3 5.8a3 3 0 0 1-6 0c0-1.5 1.1-3.2 3-5.8z' fill='%23fff'/%3E%3C/svg%3E"); }
.t-elec::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%237a5600'/%3E%3Cpath d='M9 2.8 4.8 9h2.9L7 13.2 11.2 7H8.3z' fill='%23ffd200'/%3E%3C/svg%3E"); }
.t-gc::before    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%231c3470'/%3E%3Cpath d='M4 6.2h5.6v2.2H4z' fill='%23fff'/%3E%3Cpath d='M9.6 7.3h1.2l1 3.8' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3Cpath d='M6.2 8.4v4' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); }

.trade-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }

/* ---------- Listing tables ---------- */
.table-scroll { margin: 0 0 12px; }
table.listing {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid var(--navy);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 3px 3px 0 rgba(13,31,77,.15);
}
table.listing th {
  background: linear-gradient(var(--navy-2), var(--navy));
  color: var(--yellow);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  text-align: left;
  padding: 7px 8px;
  border-bottom: 3px solid var(--yellow);
}
table.listing td {
  padding: 8px;
  border-bottom: 1px solid #e3dcc0;
  vertical-align: middle;
}
table.listing tbody tr:last-child td { border-bottom: 0; }
table.listing tbody tr:nth-child(odd) td { background: #fff; }
table.listing tbody tr:nth-child(even) td { background: var(--yellow-soft); }
table.listing tbody tr:hover td { background: var(--yellow-pale); }
table.listing td.num { width: 34px; text-align: center; }
table.listing td.num,
.num-dot {
  font: 700 12px var(--slab);
  color: var(--navy);
}
table.listing td.num::before { content: none; }
table.listing .biz { font: 700 14px/1.3 var(--slab); color: var(--black); }
table.listing td.hide-sm { white-space: nowrap; }
table.listing td a { font-size: 12px; }

table.details {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid var(--navy);
  background: #fff;
}
table.details th,
table.details td {
  border-bottom: 1px solid #e3dcc0;
  padding: 6px 9px;
  text-align: left;
  vertical-align: top;
}
table.details tr:nth-child(even) td,
table.details tr:nth-child(even) th { background: var(--yellow-soft); }
table.details th {
  width: 120px;
  background: #fff;
  color: var(--navy);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-right: 3px solid var(--yellow);
}

/* ---------- Home: town tiles ---------- */
.region-block { margin: 0 0 18px; }
.region-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 0 0 5px;
  border-bottom: 2px solid;
  font: 700 15px var(--slab);
}
.region-head::before {
  content: "";
  width: 26px; height: 18px;
  flex: 0 0 26px;
  background: no-repeat center / contain;
}
.region-block.r-mtn .region-head { color: var(--mtn); border-color: var(--mtn); }
.region-block.r-pied .region-head { color: var(--pied); border-color: var(--pied); }
.region-block.r-coast .region-head { color: var(--coast); border-color: var(--coast); }
.region-head .small { font: 11px Verdana, sans-serif; color: var(--muted); margin-left: auto; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tile {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 10px 10px 10px 8px;
  border: 1px solid #c9c3a8;
  border-left: 6px solid var(--navy);
  border-radius: 4px;
  background: #fff;
  text-decoration: none;
  color: var(--text);
  box-shadow: 2px 2px 0 rgba(0,0,0,.08);
  transition: transform .12s, box-shadow .12s;
}
.tile:visited { color: var(--text); }
.tile:hover { transform: translateY(-2px); box-shadow: 3px 4px 0 var(--navy); color: var(--text); }
.tile-ico {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--navy) no-repeat center / 24px 24px;
}
.tile-text { display: flex; flex-direction: column; min-width: 0; }
.tile-name { font: 700 15px/1.2 var(--slab); color: var(--navy); overflow-wrap: anywhere; }
.tile-meta { font-size: 11px; color: var(--muted); }
.tile-count {
  margin-top: 3px;
  align-self: flex-start;
  font-size: 10px;
  font-weight: bold;
  background: var(--yellow);
  color: var(--black);
  padding: 0 6px;
  border-radius: 2px;
}
.r-mtn .tile { border-left-color: var(--mtn); background: linear-gradient(90deg, var(--mtn-pale), #fff 60%); }
.r-pied .tile { border-left-color: var(--pied); background: linear-gradient(90deg, var(--pied-pale), #fff 60%); }
.r-coast .tile { border-left-color: var(--coast); background: linear-gradient(90deg, var(--coast-pale), #fff 60%); }
.r-mtn .tile-ico { background-color: var(--mtn); }
.r-pied .tile-ico { background-color: var(--pied); }
.r-coast .tile-ico { background-color: var(--coast); }
.tile.is-featured { border-color: var(--black); border-left-color: var(--gold); background: linear-gradient(90deg, #ffe680, #fff6c4 70%); }
.tile.is-featured .tile-count { background: var(--black); color: var(--yellow); }

/* region icons */
.r-mtn .tile-ico,
.region-block.r-mtn .region-head::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 20 9 7l4 6 3-4 7 11z' fill='%23fff'/%3E%3Cpath d='M9 7l-2.2 3.6 1.3-.6 1 1 1.2-1.2z' fill='%232f7d4f'/%3E%3C/svg%3E"); }
.r-pied .tile-ico,
.region-block.r-pied .region-head::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11 12 4l8 7v9H4z' fill='%23fff'/%3E%3Cpath d='M9.5 20v-5.5h5V20M9.5 14.5l5 5.5M14.5 14.5l-5 5.5' fill='none' stroke='%23b5532c' stroke-width='1.3'/%3E%3Ccircle cx='12' cy='10' r='1.4' fill='%23b5532c'/%3E%3C/svg%3E"); }
.r-coast .tile-ico,
.region-block.r-coast .region-head::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M2 9c2.5-2 4.5-2 7 0s4.5 2 7 0 4.5-2 6 0'/%3E%3Cpath d='M2 14c2.5-2 4.5-2 7 0s4.5 2 7 0 4.5-2 6 0'/%3E%3Cpath d='M2 19c2.5-2 4.5-2 7 0s4.5 2 7 0 4.5-2 6 0'/%3E%3C/g%3E%3C/svg%3E"); }
.region-block .region-head::before { filter: none; border-radius: 3px; }
.region-block.r-mtn .region-head::before { background-color: var(--mtn); }
.region-block.r-pied .region-head::before { background-color: var(--pied); }
.region-block.r-coast .region-head::before { background-color: var(--coast); }

/* ---------- Gold featured card ---------- */
.gold-card {
  position: relative;
  margin: 18px 0;
  border: 3px solid var(--black);
  border-radius: 6px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 10px, rgba(255,255,255,0) 10px 20px),
    linear-gradient(145deg, #fff3b0 0%, #ffd84a 55%, #f0b41c 100%);
  box-shadow: 5px 5px 0 var(--navy);
  overflow: hidden;
}
.gold-card::before {
  content: "\2605  Featured Listing  \2605";
  display: block;
  background: var(--black);
  color: var(--yellow);
  font: 700 11px/1 Verdana, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  padding: 7px 10px;
  border-bottom: 3px solid var(--gold);
  white-space: pre;
}
.gold-grid {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  align-items: start;
}
.gold-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 45% 50%;
  border: 3px solid #fff;
  outline: 2px solid var(--black);
  box-shadow: 3px 3px 0 rgba(0,0,0,.25);
}
.gold-body p { margin: 0 0 9px; }
.gold-card .gold-lead { font: 15px/1.55 var(--slab); }
.gold-card .gold-lead strong { font-size: 18px; color: var(--navy); }
.gold-card .slogan { font: italic 700 14px var(--slab); color: var(--black); }
.gold-card .chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.btn-gold,
.btn-gold:visited {
  display: inline-block;
  background: var(--navy);
  color: var(--yellow);
  font-weight: bold;
  text-decoration: none;
  padding: 7px 14px;
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow: 0 3px 0 #000;
}
.btn-gold:hover { background: var(--black); color: #fff; }

.badge {
  display: inline-block;
  background: var(--navy);
  color: var(--yellow);
  font: bold 10px/1.6 Verdana, sans-serif;
  letter-spacing: .5px;
  padding: 0 6px;
  border: 1px solid #000;
  border-radius: 2px;
  vertical-align: middle;
}

/* ---------- Listing card (single business page) ---------- */
.listing-card { margin: 0 0 16px; }
.listing-card .card-head {
  padding: 14px 14px 0;
}
.listing-card .card-head h2 {
  margin: 0 0 4px;
  color: var(--black);
  font: 700 24px/1.2 var(--slab);
}
.listing-card .card-body { padding: 0 14px 14px; }
.listing-card .card-body h3 {
  font: 700 15px var(--slab);
  color: var(--navy);
  margin: 14px 0 6px;
}
.listing-card .card-body p { margin: 0 0 9px; }
.listing-card .gold-grid { padding-top: 10px; }

.service-area { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 12px; padding: 0; }
.service-area li {
  background: #fff;
  border: 1px solid var(--navy);
  border-radius: 3px;
  padding: 3px 9px 3px 22px;
  position: relative;
  font-weight: bold;
  font-size: 12px;
  color: var(--navy);
}
.service-area li::before {
  content: "";
  position: absolute;
  left: 7px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -6px;
  background: var(--pied);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.service-area li.home { background: var(--navy); color: var(--yellow); }
.service-area li.home::before { background: var(--yellow); }

/* ---------- Form mock ---------- */
.formbox {
  border: 2px solid var(--navy);
  border-radius: 4px;
  background: var(--yellow-soft);
  padding: 14px;
  box-shadow: 3px 3px 0 rgba(13,31,77,.15);
}
.formbox .row { margin: 0 0 10px; }
.formbox label { display: block; font-weight: bold; font-size: 11px; margin-bottom: 3px; color: var(--navy); text-transform: uppercase; letter-spacing: .4px; }
.formbox input,
.formbox select,
.formbox textarea {
  font: 13px Verdana, sans-serif;
  border: 1px solid #8a8a8a;
  border-radius: 3px;
  padding: 5px 7px;
  width: 100%;
  max-width: 380px;
  background: #fff;
}
.formbox textarea { height: 80px; }

/* ---------- Footer ---------- */
.footer {
  background: var(--navy);
  color: #cfd8f0;
  border-top: 5px solid var(--yellow);
  font-size: 11px;
}
.footer a, .footer a:visited { color: var(--yellow); text-decoration: none; }
.footer a:hover { text-decoration: underline; color: #fff; }
.foot-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 18px;
  padding: 20px 18px 14px;
}
.foot-brand { display: flex; flex-direction: column; gap: 8px; }
.foot-brand .fb-row { display: flex; align-items: center; gap: 9px; }
.foot-brand .fb-name { font: 17px/1.1 var(--display); color: var(--yellow); }
.foot-brand p { margin: 0; line-height: 1.5; }
.footer h3 {
  margin: 0 0 6px;
  font: 700 12px var(--slab);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,210,0,.4);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { padding: 2px 0; }
.foot-bottom {
  background: #081535;
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 9px 18px;
  text-align: center;
  font-size: 10.5px;
  color: #a9b6d8;
}

/* ---------- Tablet / phone ---------- */
@media (max-width: 820px) {
  .foot-cols { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .masthead { min-height: 0; }
  .masthead::before {
    background: linear-gradient(0deg, rgba(13,31,77,.96) 0%, rgba(13,31,77,.82) 55%, rgba(13,31,77,.45) 100%);
  }
  .hero-inner { padding: 20px 16px 16px; }
  .site-title { font-size: 23px; }
  .site-url { font-size: 9px; letter-spacing: .6px; }
  .brand-text { min-width: 0; }
  .brand { gap: 11px; }
  .brand .logo { width: 50px; height: 50px; }
  .tagline { font-size: 13px; }
  .topnav { padding: 0 6px; }
  .nav-links a { padding: 8px 8px; font-size: 10.5px; }
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side"; }
  .sidebar { padding: 0 16px 14px; }
  .content { padding: 14px 16px; }
  .content h1 { font-size: 22px; }
  .gold-grid { grid-template-columns: minmax(0, 1fr); }
  .gold-photo { aspect-ratio: 16 / 9; }
  table.details th { width: 92px; }
}
@media (max-width: 560px) {
  .nav-links { width: 100%; }
  .nav-links a { flex: 1 1 auto; text-align: center; }
  .topnav .add { width: 100%; text-align: center; margin: 0 0 6px; }
  .searchbar .field { flex-basis: 100%; }
  .searchbar input[type="text"] { border-radius: 4px; }
  .searchbar select { flex: 1 1 auto; border-left: 1px solid #000; border-radius: 4px 0 0 4px; margin-top: 6px; }
  .searchbar .btn { margin-top: 6px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tile-ico { width: 32px; height: 32px; flex-basis: 32px; background-size: 20px 20px; }

  /* listing table becomes stacked cards */
  table.listing, table.listing tbody, table.listing tr, table.listing td { display: block; width: 100%; }
  table.listing { border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  table.listing thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.listing tbody tr {
    position: relative;
    margin: 0 0 10px;
    border: 1px solid var(--navy);
    border-left: 5px solid var(--navy);
    border-radius: 4px;
    padding: 9px 10px 9px 44px;
    box-shadow: 2px 2px 0 rgba(13,31,77,.15);
  }
  table.listing tbody tr:nth-child(odd) { background: #fff; }
  table.listing tbody tr:nth-child(even) { background: var(--yellow-soft); }
  table.listing tbody tr td,
  table.listing tbody tr:nth-child(n) td { background: transparent; border: 0; padding: 2px 0; }
  table.listing td.num {
    position: absolute;
    left: 9px; top: 10px;
    width: 26px; height: 26px;
    padding: 0;
    line-height: 26px;
    border-radius: 50%;
    background: var(--yellow) !important;
    border: 1px solid #000 !important;
  }
  table.listing .hide-sm { display: block; font-size: 11px; color: var(--muted); white-space: normal; }
  table.listing td a { overflow-wrap: anywhere; }
  table.details th { width: 84px; font-size: 10px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}

/* ---------- Featured card details ---------- */
.gold-grid .gold-photo { order: -1; }
.listing-card .gold-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 250px); }
.listing-card .gold-grid .gold-photo { order: 0; }
.listing-card .slogan { margin: 0; }
.listing-card .chips { margin: 4px 0 6px; }
.service-list {
  columns: 2 220px;
  column-gap: 20px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}
.service-list li { padding: 2px 0 2px 20px; position: relative; break-inside: avoid; }
.service-list li::before {
  content: "\2714";
  position: absolute;
  left: 2px; top: 2px;
  color: var(--navy);
  font-weight: bold;
}
@media (max-width: 720px) {
  .listing-card .gold-grid { grid-template-columns: minmax(0, 1fr); }
  .listing-card .gold-grid .gold-photo { order: -1; }
}