/* ==========================================================================
   ScottishLocal — Design System
   ========================================================================== */

:root {
  /* Palette — inspired by Highland heather, pine forest, sea and sand */
  --color-thistle-950: #241726;
  --color-thistle-900: #33203a;
  --color-thistle-800: #452b4e;
  --color-thistle-700: #5c3a68;
  --color-thistle-500: #7c5490;
  --color-pine-900: #163326;
  --color-pine-700: #1f4d38;
  --color-pine-500: #2f6b4d;
  --color-gold-600: #a9782f;
  /* Darker gold for TEXT. gold-600 is 3.88:1 on white and 3.30:1 on sand,
     which fails WCAG AA (4.5:1) at the small sizes it was being used at —
     .eyebrow appears on nearly every page. This is 5.63 / 4.78. Keep gold-600
     for borders and rules, where contrast ratios don't apply. */
  --color-gold-700: #876026;
  --color-gold-500: #c9a24b;
  --color-gold-300: #e3c988;
  --color-sand-50: #faf7f0;
  --color-sand-100: #f3ecdc;
  --color-sand-200: #e9dfc7;
  --color-ink-900: #1c1720;
  --color-ink-700: #3a323f;
  --color-ink-500: #635a68;
  --color-white: #ffffff;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --container-max: 1240px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(28, 23, 32, 0.08);
  --shadow-md: 0 8px 24px rgba(28, 23, 32, 0.12);
  --shadow-lg: 0 20px 50px rgba(28, 23, 32, 0.18);
  --transition: 200ms ease;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink-900);
  background: var(--color-sand-50);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
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: 600; line-height: 1.15; margin: 0 0 0.5em; color: var(--color-thistle-950); }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }

/* ---- Accessibility ---- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-gold-500);
  color: var(--color-ink-900);
  padding: 0.75em 1.25em;
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}
:focus-visible {
  outline: 3px solid var(--color-gold-500);
  outline-offset: 2px;
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Layout helpers ---- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--pine { background: var(--color-pine-900); color: var(--color-sand-100); }
.section--pine h2, .section--pine h3 { color: var(--color-white); }
.section--sand { background: var(--color-sand-100); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-700);
  margin-bottom: 0.9em;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--color-gold-500);
  display: inline-block;
}
.section-head {
  max-width: 640px;
  margin-bottom: 2.75rem;
}
.section-head p { color: var(--color-ink-500); font-size: 1.05rem; }
.section--pine .section-head p { color: var(--color-sand-200); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.7em;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  border: 1.5px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--color-gold-500);
  color: var(--color-thistle-950);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-gold-300); box-shadow: var(--shadow-md); }
.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-outline:hover { background: rgba(255,255,255,0.1); }
.btn-dark {
  background: var(--color-thistle-950);
  color: var(--color-white);
}
.btn-dark:hover { background: var(--color-thistle-800); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.6em 1.3em; font-size: 0.88rem; }

/* ---- Header / Nav ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 240, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgba(28,23,32,0.08);
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  padding-block: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--color-thistle-950);
  flex-shrink: 0;
}
.brand-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 2.1rem;
  font-weight: 600;
  font-size: 0.96rem;
}
.nav-links a {
  color: var(--color-ink-700);
  padding: 0.3em 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--color-thistle-950);
  border-bottom-color: var(--color-gold-500);
}
.nav-actions { display: flex; align-items: center; gap: 1.1rem; }
.nav-trade-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink-500);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav-trade-link:hover {
  color: var(--color-thistle-950);
  border-bottom-color: var(--color-gold-500);
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.4rem;
}
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-sand-50);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(28,23,32,0.08);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { display: block; padding: 0.9rem 1.4rem; border-bottom: 1px solid rgba(28,23,32,0.06); border-radius: 0; }
  .nav-actions { display: none; }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,14,24,0.35) 0%, rgba(20,14,24,0.15) 35%, rgba(20,14,24,0.88) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.5rem, 8vw, 5rem);
  max-width: 760px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: rgba(250,247,240,0.14);
  border: 1px solid rgba(250,247,240,0.35);
  padding: 0.5em 1em;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  margin-bottom: 1.4rem;
}
.hero h1 {
  color: var(--color-white);
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  margin-bottom: 0.45em;
}
.hero p.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--color-sand-100);
  max-width: 56ch;
  margin-bottom: 2rem;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-scroll-cue {
  position: absolute;
  bottom: 1.6rem;
  right: clamp(1.25rem, 4vw, 2.5rem);
  z-index: 1;
  color: var(--color-sand-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}
.hero-scroll-cue .line {
  width: 1px; height: 34px;
  background: linear-gradient(180deg, currentColor, transparent);
}

/* ---- Stats strip ---- */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding-block: 2.25rem;
  border-bottom: 1px solid rgba(28,23,32,0.08);
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--color-thistle-950);
}
.stat span { color: var(--color-ink-500); font-size: 0.92rem; }
@media (max-width: 780px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Region cards ---- */
.region-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.region-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.region-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.region-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.region-card:hover img { transform: scale(1.06); }
.region-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,14,24,0) 40%, rgba(20,14,24,0.85) 100%);
}
.region-card-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 1.4rem;
  color: var(--color-white);
}
.region-card-body h3 { color: var(--color-white); margin-bottom: 0.15em; font-size: 1.3rem; }
.region-card-body span { font-size: 0.85rem; color: var(--color-sand-200); }
.region-card--large { grid-row: span 2; aspect-ratio: auto; }

@media (max-width: 980px) {
  .region-grid { grid-template-columns: repeat(2, 1fr); }
  .region-card--large { grid-row: span 1; aspect-ratio: 4/5; }
}
@media (max-width: 600px) {
  .region-grid { grid-template-columns: 1fr; }
}

/* ---- Feature list (two column) ---- */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.split-media img { aspect-ratio: 4/3; object-fit: cover; }
.split.reverse .split-media { order: 2; }
@media (max-width: 880px) {
  .split, .split.reverse .split-media { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: -1; }
}
.check-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.9rem;
}
.check-list svg { flex-shrink: 0; margin-top: 0.2em; color: var(--color-pine-500); }

/* ---- Cards / grid (businesses) ---- */
/* See "Card grids with a partial last row" near the end of this file — this
   one is flex, not grid, so a stranded final card centres instead of sitting
   against the left edge with empty space beside it. */
.card-grid {
  --cols: 3;
  --grid-gap: 1.75rem;
}
@media (max-width: 980px) { .card-grid { --cols: 2; } }
@media (max-width: 640px) { .card-grid { --cols: 1; } }

.biz-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
  /* Cards are linked to directly (…/crail#crail-pottery) from outreach email.
     The site header is sticky, so without this the card lands underneath it. */
  scroll-margin-top: 6rem;
}

/* The card someone was sent a link to. Enough to find it in a grid of two
   dozen at a glance, without looking like an advert. */
.biz-card:target {
  outline: 3px solid var(--color-gold-500);
  outline-offset: 3px;
}
.biz-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.biz-card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.biz-card-media img { width: 100%; height: 100%; object-fit: cover; }
.biz-badge {
  position: absolute;
  top: 0.8rem; left: 0.8rem;
  background: var(--color-gold-500);
  color: var(--color-ink-900);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35em 0.75em;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.biz-card-body { padding: 1.3rem 1.4rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.biz-card-cat { font-size: 0.78rem; color: var(--color-gold-700); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4em; }
.biz-card-body h3 { font-size: 1.18rem; margin-bottom: 0.3em; }
.biz-card-loc { color: var(--color-ink-500); font-size: 0.88rem; display: flex; align-items: center; gap: 0.4em; margin-bottom: 0.7em; }
.biz-card-desc { color: var(--color-ink-700); font-size: 0.94rem; flex: 1; margin-bottom: 1rem; }
.biz-card-foot { display: flex; justify-content: space-between; align-items: center; }
.biz-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-pine-700);
  margin-top: -0.4rem;
}
.biz-card-link:hover { text-decoration: underline; }

/* ---- Filters ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 2.25rem;
}
.filter-bar select {
  font-family: inherit;
  font-size: 0.94rem;
  padding: 0.7em 2.4em 0.7em 1.1em;
  border-radius: 999px;
  border: 1.5px solid rgba(28,23,32,0.15);
  background: var(--color-white);
  color: var(--color-ink-900);
  /* Native select arrows differ wildly between platforms and made the row look
     assembled from spare parts. One inline chevron, same on every OS. */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23635a68' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.05em center;
  background-size: 0.7em;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.filter-bar select:hover { border-color: rgba(28,23,32,0.3); }

/* Search field: the input, its icon and its clear button share one rounded
   box so the icon reads as part of the control rather than sitting beside it. */
.search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 320px;
  min-width: 240px;
}
.search-field input[type="search"] {
  font-family: inherit;
  font-size: 0.98rem;
  width: 100%;
  padding: 0.75em 2.6em 0.75em 2.9em;
  border-radius: 999px;
  border: 1.5px solid rgba(28,23,32,0.15);
  background: var(--color-white);
  color: var(--color-ink-900);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-field input[type="search"]::-webkit-search-cancel-button { display: none; }
.search-field input:focus {
  outline: none;
  border-color: var(--color-pine-500);
  box-shadow: 0 0 0 3px rgba(47,107,77,0.15);
}
.search-icon {
  position: absolute;
  left: 1.05em;
  width: 18px;
  height: 18px;
  color: var(--color-ink-500);
  pointer-events: none;
}
.search-clear {
  position: absolute;
  right: 0.75em;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(28,23,32,0.08);
  color: var(--color-ink-700);
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-clear:hover { background: rgba(28,23,32,0.16); }
/* display:flex above beats the hidden attribute, so state it explicitly —
   the same trap the modals hit. */
.search-clear[hidden] { display: none; }
.active-filters[hidden] { display: none; }

.filter-selects { display: flex; gap: 0.7rem; flex-wrap: wrap; }
@media (max-width: 560px) {
  .filter-selects { width: 100%; }
  .filter-selects select { flex: 1; min-width: 0; }
}

/* Result count and the dismissible chips for whatever is currently filtering. */
.filter-status {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  min-height: 1.9rem;
}
.result-count { color: var(--color-ink-500); font-size: 0.9rem; margin: 0; }
.active-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  border: 1.5px solid rgba(28,23,32,0.12);
  background: var(--color-sand-100);
  color: var(--color-ink-700);
  font-size: 0.84rem;
  font-weight: 600;
  transition: background var(--transition), border-color var(--transition);
}
.filter-chip span[aria-hidden] { font-size: 1.05rem; line-height: 1; color: var(--color-ink-500); }
.filter-chip:hover { background: var(--color-sand-200); border-color: rgba(28,23,32,0.25); }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; }
.chip {
  padding: 0.5em 1.1em;
  border-radius: 999px;
  border: 1.5px solid rgba(28,23,32,0.15);
  background: var(--color-white);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink-700);
  transition: all var(--transition);
}
.chip[aria-pressed="true"] {
  background: var(--color-thistle-950);
  border-color: var(--color-thistle-950);
  color: var(--color-white);
}
.results-empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--color-ink-500);
}

/* ---- Testimonial / quote ---- */
.quote-block {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
.quote-block p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  color: var(--color-white);
  line-height: 1.4;
}
.quote-attrib { color: var(--color-gold-300); font-weight: 600; margin-top: 1rem; }

/* ---- Pricing ---- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  align-items: stretch;
}
@media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.price-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2.2rem 1.9rem;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid rgba(28,23,32,0.08);
  display: flex;
  flex-direction: column;
}
.price-card--featured {
  background: var(--color-thistle-950);
  color: var(--color-white);
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
  border-color: var(--color-thistle-950);
}
.price-card--featured h3, .price-card--featured .price-amount { color: var(--color-white); }
.price-card--featured .price-desc { color: var(--color-sand-200); }
.price-card--featured .check-list li { color: var(--color-sand-100); }
.price-card--featured .check-list svg { color: var(--color-gold-500); }
.price-tag {
  align-self: flex-start;
  background: var(--color-gold-500);
  color: var(--color-ink-900);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35em 0.8em;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.price-desc { color: var(--color-ink-500); font-size: 0.92rem; margin-bottom: 1.2rem; }
.price-amount { font-family: var(--font-display); font-size: 2.6rem; color: var(--color-thistle-950); }
.price-amount span { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: var(--color-ink-500); }
.price-card--featured .price-amount span { color: var(--color-sand-200); }
.price-card .check-list { margin: 1.5rem 0 1.75rem; flex: 1; }
.price-card--featured .btn-primary { box-shadow: none; }

/* ---- CTA banner ---- */
.cta-banner {
  background: linear-gradient(135deg, var(--color-thistle-900), var(--color-pine-900));
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-banner h2 { color: var(--color-white); margin-bottom: 0.3em; }
.cta-banner p { color: var(--color-sand-200); margin: 0; max-width: 46ch; }
.cta-banner--soft {
  background: var(--color-sand-100);
  border: 1px solid rgba(28,23,32,0.1);
}
.cta-banner--soft h2 { color: var(--color-thistle-950); font-size: 1.4rem; }
.cta-banner--soft p { color: var(--color-ink-500); }
.cta-banner--soft .btn-outline { color: var(--color-thistle-950) !important; }
.cta-banner--soft .btn-outline:hover { background: rgba(28,23,32,0.06); }

/* ---- Footer ---- */
.site-footer {
  background: var(--color-thistle-950);
  color: var(--color-sand-200);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(250,247,240,0.12);
}
.footer-brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--color-white); margin-bottom: 0.9rem; }
.footer-grid h4 { color: var(--color-white); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-grid a { color: var(--color-sand-200); font-size: 0.94rem; }
.footer-grid li { margin-bottom: 0.65rem; }
.footer-grid a:hover { color: var(--color-gold-300); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.5rem;
  font-size: 0.85rem;
  color: var(--color-sand-200);
  flex-wrap: wrap;
  gap: 0.75rem;
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---- Page header (interior pages) ---- */
.page-header {
  position: relative;
  color: var(--color-white);
  padding-block: clamp(4.5rem, 12vw, 7rem) clamp(3rem, 8vw, 4.5rem);
  overflow: hidden;
}
.page-header-media { position: absolute; inset: 0; z-index: 0; }
.page-header-media img { width: 100%; height: 100%; object-fit: cover; }
.page-header-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,14,24,0.55), rgba(20,14,24,0.75));
}
.page-header-content { position: relative; z-index: 1; max-width: 700px; }
.page-header h1 { color: var(--color-white); font-size: clamp(2.1rem, 4.5vw, 3.2rem); }
.page-header p { color: var(--color-sand-100); font-size: 1.1rem; max-width: 56ch; }
.breadcrumb { font-size: 0.85rem; color: var(--color-sand-200); margin-bottom: 1rem; }
.breadcrumb a:hover { color: var(--color-gold-300); }

/* ---- Utility ---- */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-lg { margin-top: 3rem; }
.two-col-text {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}
@media (max-width: 780px) { .two-col-text { grid-template-columns: 1fr; } }

.badge-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.5rem; }
.badge {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.4em 0.9em;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.3);
}

table.credits-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
table.credits-table th, table.credits-table td {
  text-align: left;
  padding: 0.85em 1em;
  border-bottom: 1px solid rgba(28,23,32,0.1);
}
table.credits-table th { color: var(--color-ink-500); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---- Business profile page (paid tier) ----

   ACCENT PALETTE
   --------------
   Each business picks one accent by NAME (data-accent on <body>), never a hex.
   Free hex entry would mean computing contrast at build time and then deciding
   what to do on failure — silently altering someone's brand colour is worse
   than not offering it, and refusing to build would break the admin's
   save-and-rebuild loop. Six checked entries costs the operator one click.

   Delivered as an attribute rather than an inline style deliberately. The CSP
   in _headers still allows 'unsafe-inline' for styles, but that file states the
   intent to enforce the policy — and the obvious next hardening step is
   dropping 'unsafe-inline'. An accent riding on an inline style would vanish
   from every paying customer's page the day that happens.

   Three tokens per entry, and text NEVER sits on the accent hue:
     --accent-ink   text and small marks, on near-white   (>= 4.5:1)
     --accent-soft  a tint used only as a background, always with ink-900 on it
     --accent-line  rules, bars and borders — decorative  (>= 3:1)

   That is what makes the contrast guarantee provable instead of hopeful: there
   are exactly two text pairs per entry, and no layout variant can introduce a
   third, because no variant changes these backgrounds. */
.biz-page {
  --accent-ink: var(--color-pine-700);
  --accent-soft: #e8f0eb;
  --accent-line: var(--color-pine-500);
}
.biz-page[data-accent="pine"]     { --accent-ink:#1f4d38; --accent-soft:#e8f0eb; --accent-line:#2f6b4d; }
.biz-page[data-accent="harbour"]  { --accent-ink:#1f4a6b; --accent-soft:#e7eef4; --accent-line:#2f6b9c; }
.biz-page[data-accent="heather"]  { --accent-ink:#5c3a68; --accent-soft:#efe8f2; --accent-line:#7c5490; }
.biz-page[data-accent="burgundy"] { --accent-ink:#7a2e3f; --accent-soft:#f5e8eb; --accent-line:#a34156; }
.biz-page[data-accent="slate"]    { --accent-ink:#3b4a52; --accent-soft:#eaeef0; --accent-line:#5a6f7a; }
.biz-page[data-accent="moss"]     { --accent-ink:#4a5d23; --accent-soft:#eef1e5; --accent-line:#6b8233; }
.biz-page[data-accent="rust"]     { --accent-ink:#9c4a24; --accent-soft:#f7ebe4; --accent-line:#b85f36; }

/* The accented set is closed and scoped, so an accent can never reach the
   header, footer, nav or any component shared with the rest of the site. */
.biz-page .badge {
  background: var(--accent-soft);
  color: var(--color-ink-900);
  border-color: var(--accent-line);
}
.biz-page .editor-note { border-left-color: var(--accent-line); }
.biz-page .editor-note-label { color: var(--accent-ink); }

/* Opening hours. This table had no styling at all and rendered as a raw
   browser default on the page being sold. */
.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.hours-table tr + tr td { border-top: 1px solid rgba(28,23,32,0.08); }
.hours-table td { padding: 0.42rem 0; vertical-align: baseline; }
.hours-table td:first-child { color: var(--color-ink-500); }
.hours-table td:last-child {
  text-align: right;
  font-weight: 600;
  /* Lining figures so times line up column-wise rather than drifting. */
  font-variant-numeric: tabular-nums;
}

.biz-layout {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (max-width: 940px) { .biz-layout { grid-template-columns: 1fr; } }
.biz-layout h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 0.35em; }
.biz-lede {
  font-size: 1.12rem;
  color: var(--color-ink-700);
  margin-bottom: 1.5rem;
}
.biz-layout p { color: var(--color-ink-700); }

/* ---- Photo carousel ----
   Replaced a hero plus a grid of 260px crops. A business paying monthly leads
   with its photographs, and that arrangement showed seven of them at postage
   stamp size with no way to view any of them properly.

   The scrolling is CSS, not script: with JavaScript off this is still a
   swipeable, trackpad-scrollable strip containing every photograph. The arrows,
   the counter and the full-size view are the only things js/gallery.0c1d6483.js adds,
   and they stay hidden until it runs. */
.biz-gallery-section { padding-top: 0.5rem; }
/* The next section brings a clamp(3.5rem, 8vw, 6.5rem) of top padding, which
   below the thumbnail strip reads as a hole in the page rather than as
   breathing room. The photographs and the business's name belong together. */
.biz-gallery-section + .section { padding-top: clamp(1.75rem, 3vw, 2.5rem); }

.biz-carousel {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-sand-200);
}
.biz-carousel-track {
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* The bar would sit across the bottom of the photograph. Swipe, arrows,
     thumbnails and the keyboard all still work without it. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.biz-carousel-track::-webkit-scrollbar { display: none; }
.biz-carousel-track:focus-visible { outline: 3px solid var(--color-gold-500); outline-offset: -3px; }

.biz-carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  /* Fixed frame, so the space is reserved before any photograph arrives and
     mixed portrait/landscape uploads can't shift the page. CLS is 0.000 across
     the site and this is the element most likely to break that.

     The viewport cap is the important half. At 16:9 in a 1240px container the
     frame is 650px tall, which on a laptop pushes the business's name and
     description entirely below the fold — someone arriving from a search result
     sees a photograph and no way to tell whose it is. The cap keeps the first
     screen showing a big photograph *and* who it belongs to. Both dimensions
     are known at layout time, so it costs nothing in shift. */
  aspect-ratio: 16/9;
  max-height: 50vh;
  margin: 0;
  position: relative;
}
.biz-carousel-slide img { width: 100%; height: 100%; object-fit: cover; }

/* The gallery-led variant earns a taller frame — it is only chosen when a
   business supplied four or more photographs. */
.biz-gallery-section--lead .biz-carousel-slide { aspect-ratio: 3/2; max-height: 60vh; }

@media (max-width: 640px) {
  .biz-carousel-slide,
  .biz-gallery-section--lead .biz-carousel-slide { aspect-ratio: 4/3; max-height: 50vh; }
}

/* Script sets data-zoomable once the full-size view is wired up, so the cursor
   only promises a click that will actually do something. */
.biz-carousel[data-zoomable] .biz-carousel-slide { cursor: zoom-in; }

.biz-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-ink-900);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), opacity var(--transition);
}
.biz-carousel-arrow svg { width: 22px; height: 22px; }
.biz-carousel-arrow:hover { background: var(--color-white); }
.biz-carousel-arrow--prev { left: 0.9rem; }
.biz-carousel-arrow--next { right: 0.9rem; }
/* Kept in the layout rather than removed, so the other arrow doesn't jump
   across when you reach an end. */
.biz-carousel-arrow:disabled { opacity: 0; pointer-events: none; }
.biz-carousel-arrow[hidden] { display: none; }
@media (max-width: 640px) {
  .biz-carousel-arrow { width: 38px; height: 38px; }
  .biz-carousel-arrow--prev { left: 0.5rem; }
  .biz-carousel-arrow--next { right: 0.5rem; }
}

.biz-carousel-count {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  margin: 0;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: rgba(28, 23, 32, 0.72);
  color: var(--color-white);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.biz-carousel-count[hidden] { display: none; }

.biz-carousel-thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
  padding-bottom: 0.25rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.biz-carousel-thumbs li { flex: 0 0 auto; }
.biz-carousel-thumbs a {
  display: block;
  width: 92px;
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-sand-200);
  /* Transparent rather than absent, so nothing reflows when it becomes the
     current thumbnail. */
  outline: 2px solid transparent;
  outline-offset: 2px;
  opacity: 0.62;
  transition: opacity var(--transition), outline-color var(--transition);
}
.biz-carousel-thumbs a:hover { opacity: 1; }
.biz-carousel-thumbs a[aria-current="true"] {
  opacity: 1;
  outline-color: var(--accent-line);
}
.biz-carousel-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Full-size view ----
   A native <dialog>, so Escape, the backdrop and the focus trap are the
   browser's job rather than three more things to get wrong. */
.biz-lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.biz-lightbox::backdrop { background: rgba(20, 16, 22, 0.92); }
.biz-lightbox-figure {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3.5rem 1rem 1.5rem;
}
.biz-lightbox img {
  /* contain, not cover: the whole point of this view is seeing the photograph
     the business actually sent, uncropped. */
  max-width: min(1400px, 96vw);
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
}
.biz-lightbox figcaption {
  color: var(--color-sand-200);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}
.biz-lightbox-close,
.biz-lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-white);
  transition: background var(--transition);
}
.biz-lightbox-close:hover,
.biz-lightbox-nav:hover { background: rgba(255, 255, 255, 0.3); }
.biz-lightbox-close { top: 1rem; right: 1rem; width: 44px; height: 44px; }
.biz-lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.biz-lightbox-nav--prev { left: 1rem; }
.biz-lightbox-nav--next { right: 1rem; }
.biz-lightbox-close svg, .biz-lightbox-nav svg { width: 24px; height: 24px; }

@media (prefers-reduced-motion: reduce) {
  .biz-carousel-track { scroll-behavior: auto; }
}

.biz-sidebar {
  position: sticky;
  top: 5.5rem;
  display: grid;
  gap: 1rem;
}
@media (max-width: 940px) { .biz-sidebar { position: static; } }
.info-block {
  background: var(--color-white);
  border: 1.5px solid rgba(28,23,32,0.08);
  border-radius: var(--radius-md);
  padding: 1.35rem 1.5rem;
}
.info-block h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-500);
  margin-bottom: 0.9em;
  font-family: var(--font-body);
  font-weight: 700;
}
.contact-list { display: grid; gap: 0.55rem; font-size: 0.93rem; }
.contact-list li { display: flex; justify-content: space-between; gap: 1rem; }
.contact-list span { color: var(--color-ink-500); }
.contact-list a { font-weight: 600; color: var(--accent-ink); }
.contact-list a:hover { text-decoration: underline; }
.social-row { margin: 0.9rem 0 0; font-size: 0.9rem; font-weight: 600; }
.social-row a { color: var(--accent-ink); }
.social-row a:hover { text-decoration: underline; }
.biz-place { font-size: 0.95rem; margin-bottom: 0.7em; }
.biz-region-link { font-size: 0.9rem; font-weight: 700; color: var(--accent-ink); }
.biz-region-link:hover { text-decoration: underline; }
.biz-card-body h3 a:hover { color: var(--color-gold-700); }

/* ---- Interactive map ---- */
.map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(28,23,32,0.1);
}
#sl-map {
  height: clamp(360px, 55vh, 560px);
  width: 100%;
  background: var(--color-sand-200);
}
.map-note {
  font-size: 0.82rem;
  color: var(--color-ink-500);
  margin-top: 0.8rem;
}
.sl-pin-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.sl-legend {
  background: rgba(255,255,255,0.94);
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-ink-700);
  line-height: 1.6;
}
.sl-legend-row { display: flex; align-items: center; gap: 0.45rem; }
.sl-legend-row .sl-pin-dot { width: 11px; height: 11px; border-width: 1.5px; }
.sl-pop { font-family: var(--font-body); }
.sl-pop-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  display: block;
  color: var(--color-thistle-950);
}
.sl-pop-meta {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gold-700);
  margin-top: 0.15em;
}
.sl-pop p { margin: 0.5em 0 0.6em; font-size: 0.88rem; color: var(--color-ink-700); }
.sl-pop a { font-weight: 700; font-size: 0.85rem; color: var(--color-pine-700); }
.leaflet-container { font-family: var(--font-body); }
.landmark-maplink {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-pine-700);
}
.landmark-maplink:hover { text-decoration: underline; }
.landmark-card--text .landmark-body { padding-top: 1.5rem; }

/* ---- Region shortcuts (directory) ---- */
.region-shortcuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
  padding: 1rem 1.3rem;
  background: var(--color-sand-100);
  border-radius: var(--radius-md);
  margin-bottom: 2rem;
  font-size: 0.89rem;
}
.region-shortcuts-label { font-weight: 700; color: var(--color-ink-700); }
.region-shortcuts a {
  color: var(--color-pine-700);
  font-weight: 600;
  border-bottom: 1px solid transparent;
}
.region-shortcuts a:hover { border-bottom-color: var(--color-gold-500); }

/* ---- Regions hub ---- */
.hub-grid {
  --cols: 2;
  --grid-gap: 2rem;
}
@media (max-width: 820px) { .hub-grid { --cols: 1; } }
.hub-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
  background: var(--color-white);
  border: 1px solid rgba(28,23,32,0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.hub-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
@media (max-width: 560px) { .hub-card { grid-template-columns: 1fr; gap: 0; } }
.hub-card-media { display: block; overflow: hidden; }
.hub-card-media img { width: 100%; height: 100%; object-fit: cover; min-height: 190px; }
.hub-card-body { padding: 1.4rem 1.5rem 1.5rem 0; }
@media (max-width: 560px) { .hub-card-body { padding: 1.3rem 1.4rem 1.5rem; } }
.hub-card-body h2 { font-size: 1.25rem; margin-bottom: 0.3em; }
.hub-card-body h2 a:hover { color: var(--color-gold-700); }
.hub-card-towns {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-gold-700);
  margin-bottom: 0.6em;
}
.hub-card-tagline { font-size: 0.93rem; color: var(--color-ink-700); margin-bottom: 0.7em; }
.hub-card-meta { font-size: 0.84rem; color: var(--color-ink-500); margin-bottom: 0.9em; }
.hub-card-link { font-weight: 600; font-size: 0.92rem; color: var(--color-pine-700); }
.hub-card-link:hover { text-decoration: underline; }

/* ---- Region pages ---- */
/* .region-intro shares the .container element, so keep the container width and
   constrain the reading measure on the paragraphs instead — otherwise the block
   centres itself and no longer lines up with the sections below it. */
.region-lede {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--color-ink-900);
}
.region-intro p { color: var(--color-ink-700); max-width: 68ch; }
.region-cat-line {
  font-size: 0.88rem;
  color: var(--color-ink-500);
  margin-top: 0.75rem;
}
.region-empty {
  background: var(--color-white);
  border: 1.5px dashed rgba(28,23,32,0.2);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
  max-width: 620px;
  margin-inline: auto;
}
.region-empty p { color: var(--color-ink-700); }
.region-filter-link {
  margin-top: 2rem;
  font-weight: 600;
}
.region-filter-link a {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-pine-700);
}

.town-grid {
  --cols: 3;
  --grid-gap: 1.25rem;
}
@media (max-width: 900px) { .town-grid { --cols: 2; } }
@media (max-width: 580px) { .town-grid { --cols: 1; } }
.town-card {
  background: var(--color-white);
  border: 1px solid rgba(28,23,32,0.08);
  border-left: 3px solid var(--color-gold-500);
  border-radius: var(--radius-sm);
  padding: 1.2rem 1.4rem;
}
.town-card h3 { font-size: 1.05rem; margin-bottom: 0.35em; }
.town-card p { font-size: 0.92rem; color: var(--color-ink-500); margin: 0 0 0.7em; }
.town-card--has-listings { border-left-color: var(--color-pine-500); }
.town-count {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-pine-700);
}
.town-count:hover { text-decoration: underline; }
.town-count--empty {
  color: var(--color-ink-500);
  font-weight: 500;
  font-style: italic;
}
.hub-meta-empty { color: var(--color-ink-500); font-style: italic; }

.landmark-grid {
  --cols: 3;
  --grid-gap: 1.5rem;
}
@media (max-width: 900px) { .landmark-grid { --cols: 2; } }
@media (max-width: 580px) { .landmark-grid { --cols: 1; } }
.landmark-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.landmark-media { aspect-ratio: 16/10; overflow: hidden; }
.landmark-media img { width: 100%; height: 100%; object-fit: cover; }
.landmark-body { padding: 1.2rem 1.4rem 1.5rem; }
.landmark-body h3 { font-size: 1.12rem; margin-bottom: 0.35em; }
.landmark-body p { font-size: 0.93rem; color: var(--color-ink-700); margin: 0; }

.region-nav-box {
  background: var(--color-sand-100);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.region-nav-box h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.region-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  font-weight: 600;
}
.region-nav-list a {
  color: var(--color-pine-700);
  border-bottom: 1px solid transparent;
}
.region-nav-list a:hover { border-bottom-color: var(--color-gold-500); }

.biz-card-phone {
  font-size: 0.88rem;
  color: var(--color-ink-500);
  margin-bottom: 0.5rem;
}

.contact-form { display: grid; gap: 1.1rem; max-width: 560px; }
.form-row { display: grid; gap: 0.4rem; }
.form-row label { font-weight: 600; font-size: 0.92rem; }
.form-row input, .form-row select, .form-row textarea {
  font-family: inherit;
  font-size: 0.98rem;
  padding: 0.8em 1em;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(28,23,32,0.18);
  background: var(--color-white);
}
.form-row textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 0.85rem; color: var(--color-ink-500); }
.optional-note { font-weight: 400; color: var(--color-ink-500); font-size: 0.88em; }

/* Spam honeypot — must be hidden from people but reachable by bots, so it
   can't use display:none (some bots skip those) or be removed from the DOM. */
.gotcha {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}

.form-row input[aria-invalid="true"],
.form-row textarea[aria-invalid="true"] {
  border-color: #a3372f;
  background: #fdf6f5;
}
.field-error {
  font-size: 0.85rem;
  font-weight: 600;
  color: #a3372f;
}
.form-status {
  margin: 0;
  padding: 0.8em 1.1em;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 500;
}
.form-status--pending {
  background: var(--color-sand-100);
  color: var(--color-ink-700);
}
.form-status--success {
  background: #e8f3ec;
  color: var(--color-pine-900);
  border: 1px solid var(--color-pine-500);
  font-weight: 600;
}
.form-status--error {
  background: #fbe9e7;
  color: #a3372f;
  border: 1px solid #a3372f;
}

/* ---------------------------------------------------------------
   Example listing banner
   Marks the demo business page as a demo. Deliberately loud: a
   visitor must never mistake it for a real trader.
   --------------------------------------------------------------- */
.example-banner {
  background: var(--color-thistle-950);
  color: #fff;
  padding-block: 0.85rem;
  font-size: 0.94rem;
}

/* Lighter than --color-gold-600, which fails contrast on the dark banner. */
.example-banner strong { color: #d9b25f; }

.example-banner a {
  color: #fff;
  text-decoration: underline;
  white-space: nowrap;
  font-weight: 600;
}

/* ---------------------------------------------------------------
   Narrow-viewport overflow fixes (verified at 320px)
   Grid and flex items default to min-width:auto, so a child that
   won't shrink below its min-content width pushes the whole page
   sideways. These three were doing exactly that.
   --------------------------------------------------------------- */

/* Form controls size themselves from the `size` attribute (~20 chars)
   unless told otherwise, which overflowed the column on small phones. */
.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  min-width: 0;
}

/* Let the pricing columns actually shrink to the viewport. */
.pricing-grid > *,
.pricing-grid--two > * {
  min-width: 0;
}

/* Wide content scrolls inside its own box rather than the page. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Long unbroken strings — bare URLs in feature lists and copy — are wider than
   a 320px screen and force a horizontal scrollbar on the whole page. */
.check-list li,
.price-desc,
.legal p,
.legal li {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------
   Card grids with a partial last row

   A card grid rarely divides evenly: a region has as many landmarks
   as it has, and a town has as many businesses as it has. In CSS
   grid the remainder sits hard against the left edge with empty
   columns beside it, which reads as a layout fault rather than a
   content count.

   Flexbox instead, so `justify-content: center` can centre that
   final row. Full rows have no free space, so they are unaffected —
   only the remainder moves, and it then looks deliberate.

   Column count and gap come from --cols and --grid-gap, set per
   grid above (including in media queries), so each grid keeps the
   breakpoints it already had.

   Not used for .region-grid: its lead card spans two rows, which
   flexbox cannot express. That grid is kept exactly full instead,
   by showing all eight regions.
   --------------------------------------------------------------- */
.card-grid,
.town-grid,
.landmark-grid,
.hub-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--grid-gap);
}

.card-grid > *,
.town-grid > *,
.landmark-grid > *,
.hub-grid > * {
  /* Grow is 0: a lone card keeps the width it would have had in a full
     row rather than stretching across the whole container. */
  flex: 0 1 calc((100% - (var(--cols) - 1) * var(--grid-gap)) / var(--cols));
  min-width: 0;
}

/* ---------------------------------------------------------------
   Editorial signals

   The parts of a listing written here rather than supplied by the
   business. Styled to read as a person speaking, distinct from the
   business's own copy — the visual separation is the point.
   --------------------------------------------------------------- */
.editor-note {
  background: var(--color-sand-100);
  border-left: 3px solid var(--color-gold-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.1rem 1.4rem;
  margin: 1.6rem 0;
}
.editor-note-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-700);
  margin-bottom: 0.4em;
}
.editor-note-body { margin: 0; color: var(--color-ink-700); font-size: 1.02rem; }

.biz-card-note {
  font-size: 0.88rem;
  color: var(--color-ink-700);
  background: var(--color-sand-100);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  margin: 0 0 0.8em;
}
.biz-card-visited {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-pine-500);
  margin-right: 0.4em;
}

.info-block--verified .verified-note {
  font-size: 0.82rem;
  color: var(--color-ink-500);
  margin-top: 0.5em;
}
.info-block--verified a { text-decoration: underline; }

/* ---- Town pages: nearby landmarks ---- */
.near-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.near-item {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(28,23,32,0.08);
}
.near-item img { width: 100%; height: 170px; object-fit: cover; }
.near-item > div { padding: 1rem 1.1rem 1.2rem; }
.near-item h3 { font-size: 1.02rem; margin-bottom: 0.3em; }
.near-item p { font-size: 0.9rem; color: var(--color-ink-500); margin-bottom: 0.6em; }
.near-item a { font-size: 0.9rem; font-weight: 600; color: var(--color-pine-500); }
.near-item a:hover { text-decoration: underline; }

.region-shortcuts--towns { margin-top: 0.75rem; }

/* ---- Admin: editorial fieldset ---- */
.editorial-fields {
  border: 1.5px solid rgba(28,23,32,0.12);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem 0.4rem;
  margin-bottom: 1.1rem;
}
.editorial-fields legend { font-weight: 700; font-size: 0.9rem; padding-inline: 0.4rem; }
.fieldset-note { font-size: 0.85rem; color: var(--color-ink-500); margin-bottom: 1rem; }
.field-hint { font-size: 0.82rem; color: var(--color-ink-500); }
.checkbox-row { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.checkbox-row input { width: auto; }

/* ---- "How it actually works" process list ---- */
.process-list {
  counter-reset: step;
  list-style: none;
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}
.process-list li {
  position: relative;
  background: var(--color-white);
  border: 1.5px solid rgba(28,23,32,0.08);
  border-radius: var(--radius-md);
  padding: 1.3rem 1.5rem 1.3rem 4.2rem;
}
.process-list li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 1.3rem;
  top: 1.3rem;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-thistle-950);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 700;
}
.process-list h3 { font-size: 1.04rem; margin-bottom: 0.3em; }
.process-list p { margin: 0; color: var(--color-ink-700); font-size: 0.95rem; }
.process-list a { text-decoration: underline; }

@media (max-width: 520px) {
  .process-list li { padding: 3.4rem 1.2rem 1.2rem; }
}

/* ---------------------------------------------------------------
   Business page layout variants

   Chosen by what a business actually supplied, not by taste — see
   LAYOUTS in scripts/business-page.js, which also enforces the data
   requirement and falls back to `standard` when it is not met.

   Everything below is a modifier on the existing .biz-layout grid.
   The hero, section bands and pull-quote reuse components already
   defined further up this file.
   --------------------------------------------------------------- */

/* Story-led: no sidebar. The default layout has no measure constraint
   at all, so a long description runs to roughly 55em — too wide to
   read comfortably. This is the only variant that fixes that, because
   it is the only one where long prose is the point. */
.biz-layout--story { grid-template-columns: minmax(0, 68ch); justify-content: center; }
.biz-layout--story .biz-sidebar { position: static; }

/* Details band: hours and contact side by side rather than stacked in
   a column. Used by story (below the prose) and practical (above it). */
/* Flex with a centred last row, not grid — same reason as the card grids
   further down. Four info blocks across three columns strands the fourth
   against the left edge, which reads as a fault rather than a count. */
.biz-details-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
.biz-details-band > * {
  flex: 0 1 calc((100% - 2rem) / 3);
  min-width: 240px;
}
@media (max-width: 820px) {
  .biz-details-band > * { flex-basis: calc((100% - 1rem) / 2); }
}
@media (max-width: 560px) {
  .biz-details-band > * { flex-basis: 100%; }
}
.biz-layout--practical .biz-details-band { margin-top: 0; margin-bottom: 2.5rem; }

/* Gallery-led: the photographs are the strongest asset, so they come
   before the prose and the first two run wider. */

/* Seasonal notice. Deliberately louder than the editor note — it is
   time-limited information a visitor needs before they travel. */
.biz-notice {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: var(--color-sand-100);
  border: 1.5px solid var(--color-gold-500);
  border-radius: var(--radius-md);
  padding: 1rem 1.3rem;
  margin-bottom: 1.6rem;
}
.biz-notice::before { content: "!"; font-weight: 700; color: var(--accent-ink); flex-shrink: 0; }
.biz-notice p { margin: 0; font-size: 0.96rem; }

/* Menu / price list */
.biz-menu { margin-top: 2.2rem; }
.biz-menu h2 { font-size: 1.25rem; margin-bottom: 0.8em; }
.biz-menu-list { display: grid; gap: 0.7rem; }
.biz-menu-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.8rem;
  align-items: baseline;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(28,23,32,0.08);
}
.biz-menu-name { font-weight: 600; }
.biz-menu-note { display: block; font-size: 0.88rem; color: var(--color-ink-500); font-weight: 400; }
.biz-menu-price { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-ink); }

/* ---- Card extras from the "connected" tier upward ---- */
.biz-card-hours {
  font-size: 0.86rem;
  color: var(--color-ink-700);
  margin: 0 0 0.5em;
}
.biz-card-hours span {
  font-weight: 700;
  color: var(--color-pine-500);
  margin-right: 0.35em;
}
.biz-card-phone a { color: inherit; }
.biz-card-phone a:hover { text-decoration: underline; }
.biz-card-socials {
  font-size: 0.86rem;
  font-weight: 600;
  margin: 0 0 0.7em;
}
.biz-card-socials a { color: var(--color-pine-700); }
.biz-card-socials a:hover { text-decoration: underline; }

/* ---- The business's own offer ----
   Visually distinct from the editor's note so nobody confuses a discount the
   business is giving with something ScottishLocal is saying about them. */
.biz-offer {
  background: var(--accent-soft, var(--color-sand-100));
  border: 1.5px dashed var(--accent-line, var(--color-pine-500));
  border-radius: var(--radius-md);
  padding: 1.1rem 1.4rem;
  margin: 1.6rem 0;
}
.biz-offer-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink, var(--color-pine-700));
  margin-bottom: 0.35em;
}
.biz-offer-body {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-ink-900);
  /* The wording is the business's, so it can contain a long URL or a code with
     no spaces in it. 160 unbroken characters would otherwise push the card wider
     than the viewport. */
  overflow-wrap: anywhere;
}
.biz-offer-until { margin: 0.5em 0 0; font-size: 0.82rem; color: var(--color-ink-500); }

/* ---- News, posted by the business itself ----
   Attributed in the markup and again in the copy beneath, because this is the
   only text on the site ScottishLocal did not write. A reader should never have
   to guess whose words they are reading. */
.biz-news {
  border-left: 3px solid var(--accent-line);
  padding-left: 1.4rem;
  margin: 1.8rem 0;
}
.biz-news h2 {
  font-size: 1.15rem;
  margin-bottom: 0.9em;
  color: var(--accent-ink);
}
.biz-news-list { display: grid; gap: 1.3rem; }
.biz-news-item {
  display: grid;
  gap: 0.3rem;
}
.biz-news-item time {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-500);
}
.biz-news-body p { margin: 0 0 0.6em; }
.biz-news-body p:last-child { margin-bottom: 0; }
.biz-news-note {
  margin: 1.2em 0 0;
  font-size: 0.8rem;
  color: var(--color-ink-500);
}

.biz-card-offer {
  font-size: 0.86rem;
  color: var(--color-ink-900);
  background: var(--color-sand-100);
  border: 1px dashed var(--color-pine-500);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  margin: 0 0 0.7em;
  overflow-wrap: anywhere;
}
.biz-card-offer span {
  font-weight: 700;
  color: var(--color-pine-700);
  margin-right: 0.35em;
}