/* ============================================================================
   Best Rated Company — "Warm Trust" design system
   Cream paper · emerald trust-green · honey-gold award accent · warm charcoal
   Light, welcoming, modern. All colours are variables — retheme in one place.
   ========================================================================== */

:root {
  /* Surfaces (light, warm) */
  --bg:        #F6F1E8;   /* warm cream page background */
  --surface:   #FFFFFF;   /* cards */
  --surface-2: #FCFAF4;   /* subtle alternate section */
  --hover:     #F3EDE1;   /* hover / raised warm tint */
  --deep:      #ECE3D3;   /* deeper warm panel (monogram media) */
  --line:      #E5DBC9;   /* visible warm hairline / card border */
  --line-soft: #EFE8DA;   /* softer divider */

  /* Ink */
  --text:    #232E27;     /* deep warm charcoal-green — primary text */
  --muted:   #5E6A60;     /* secondary text */
  --muted-2: #666E64;   /* was #8C9389: darkened to pass WCAG AA (4.5:1) on every background */     /* tertiary / labels */

  /* Brand — emerald (trust / verified) */
  --brand:      #1C7C54;
  --brand-deep: #135C3D;
  --brand-soft: #E5F1EA;  /* tint for badge backgrounds */

  /* Accent — honey gold (best / award / stars / primary CTA) */
  --gold:      #C08A2B;
  --gold-soft: #E2A93E;
  --gold-deep: #8A6014;
  --gold-tint: #FBF1DC;

  /* Aliases kept so the seal / inline SVGs keep working */
  --paper:        var(--text);
  --verified:     var(--brand);
  --verified-soft:var(--brand);

  /* Type */
  --font-display: 'Source Sans 3', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:    'Source Sans 3', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Geometry */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --wrap: 1180px;
  --gut:  clamp(20px, 5vw, 48px);

  --shadow-sm:   0 2px 8px -3px rgba(60,45,20,.12);
  --shadow-card: 0 10px 30px -16px rgba(60,45,20,.22);
  --shadow-lg:   0 28px 60px -28px rgba(60,45,20,.28);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ----- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; /* the sticky header is 76px: without this, #chat, #ask and #how-we-make-money land underneath it */ }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Soft warm ambient wash at the top of the page */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 560px at 82% -12%, rgba(226,169,62,.16), transparent 62%),
    radial-gradient(900px 640px at -8% -6%, rgba(28,124,84,.08), transparent 56%),
    var(--bg);
}

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

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -.018em; color: var(--text); }

::selection { background: rgba(28,124,84,.16); color: var(--brand-deep); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 16px; top: -60px;
  background: var(--brand); color: #fff; padding: 10px 16px;
  border-radius: var(--r-sm); font-weight: 600; z-index: 200;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

/* ----- Shared atoms ------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brand);
  display: inline-flex; align-items: center; gap: .7em; font-weight: 500;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--gold); }
.eyebrow--center { justify-content: center; }

.lede { font-size: clamp(18px, 2vw, 21px); color: var(--muted); line-height: 1.6; }

.btn {
  --bg: transparent; --fg: var(--text); --bd: var(--line);
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-body); font-weight: 600; font-size: 15.5px;
  padding: 14px 24px; border-radius: 999px;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd);
  cursor: pointer; transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 1.05em; height: 1.05em; }

/* Primary = honey gold */
.btn--gold {
  --bg: linear-gradient(180deg, var(--gold-soft), var(--gold)); --fg: #fff; --bd: transparent;
  box-shadow: 0 10px 24px -10px rgba(192,138,43,.6);
}
.btn--gold:hover { --bg: linear-gradient(180deg, #ecb44d, var(--gold)); color: #fff; box-shadow: 0 16px 32px -12px rgba(192,138,43,.7); }

/* Secondary = emerald outline/solid */
.btn--brand { --bg: var(--brand); --fg: #fff; --bd: transparent; box-shadow: 0 10px 24px -12px rgba(28,124,84,.5); }
.btn--brand:hover { --bg: var(--brand-deep); color: #fff; }

.btn--ghost { --bg: var(--surface); --fg: var(--text); --bd: var(--line); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { --bd: var(--brand); color: var(--brand); }

.btn--lg { padding: 17px 30px; font-size: 16.5px; }

/* Verified pill */
.vbadge {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  color: var(--brand-deep); background: var(--brand-soft);
  border: 1px solid rgba(28,124,84,.22); padding: 5px 11px; border-radius: 999px;
}
.vbadge svg { width: 13px; height: 13px; }
.vbadge--pending { color: var(--gold-deep); background: var(--gold-tint); border-color: rgba(192,138,43,.28); }

/* Section rhythm */
.section { padding-block: clamp(60px, 8vw, 110px); }
.section--tight { padding-block: clamp(44px, 6vw, 76px); }
.section--alt { background: var(--surface-2); border-block: 1px solid var(--line-soft); }
.section-head { max-width: 720px; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 46px); }
.section-head p { margin-top: 16px; }
.section-divider { border: 0; border-top: 1px solid var(--line-soft); }

/* ============================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246,241,232,.78);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent; transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled { background: rgba(255,255,255,.88); border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; }

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); }
.brand:hover { color: var(--text); }
.brand__mark { display: grid; place-items: center; transition: transform .4s var(--ease); }
.brand:hover .brand__mark { transform: rotate(8deg); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.brand__tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--brand); margin-top: 5px; }

.primary-nav ul { list-style: none; display: flex; align-items: center; gap: 4px; padding: 0; }
.primary-nav a { color: var(--muted); font-weight: 500; font-size: 15px; padding: 9px 14px; border-radius: 999px; transition: color .2s, background .2s; }
.primary-nav a:hover { color: var(--text); background: rgba(35,46,39,.05); }
.primary-nav a[aria-current="page"] { color: var(--brand); }
.primary-nav__cta { margin-left: 8px; }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  background: var(--surface); border-radius: var(--r-sm); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================================
   HERO
   ========================================================================== */
/* Bottom padding is small on purpose: the section that follows brings its own top padding. */
.hero { position: relative; padding-top: clamp(40px, 7vw, 88px); padding-bottom: clamp(8px, 2vw, 24px); }
.hero__grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(36px, 5.2vw, 62px); line-height: 1.04; letter-spacing: -.028em; margin-top: 22px; }
.hero h1 em { font-style: normal; color: var(--brand); position: relative; white-space: nowrap; }
.hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .22em; height: .14em; background: var(--gold-soft); border-radius: 2px; opacity: .55; z-index: -1; }
.hero__sub { margin-top: 24px; max-width: 34ch; }
.hero__cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

/* Seal stage */
.hero__seal { display: grid; place-items: center; position: relative; }
.hero__seal::before {
  content: ""; position: absolute; width: 86%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--surface-2) 62%, transparent 72%);
  box-shadow: var(--shadow-lg); z-index: -1;
}
.hero__seal::after {
  content: ""; position: absolute; width: 86%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--line); z-index: -1;
}
.seal { width: min(420px, 78vw); height: auto; }
.seal__ring { transform-origin: 150px 150px; animation: seal-rotate 46s linear infinite; }
@keyframes seal-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .seal__ring { animation: none; } }

/* ============================================================================
   FEATURED BUSINESSES (home)
   ========================================================================== */
.featured-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.feature-card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-card); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(28,124,84,.32); }
.feature-card__media {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: radial-gradient(120% 100% at 30% 10%, rgba(226,169,62,.18), transparent 60%), linear-gradient(150deg, var(--deep), var(--hover));
  display: grid; place-items: center;
}
.feature-card__media img { width: 100%; height: 100%; object-fit: cover; }
.feature-card__media--contain { padding: 22px; }
.feature-card__media--contain img { object-fit: contain; }
.feature-card__monogram { font-family: var(--font-display); font-weight: 700; font-size: 58px; color: var(--gold); opacity: .85; }
.feature-card__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: var(--surface); }
/* subtle frame so a website screenshot reads clearly as one */
.feature-card__media:has(.feature-card__shot) { background: var(--surface-2); }
.feature-card__media:has(.feature-card__shot) .feature-card__shot {
  inset: 13px; width: calc(100% - 26px); height: calc(100% - 26px);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 3px 12px -6px rgba(60,45,20,.3);
}
.feature-card__flag {
  position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  color: #fff; background: var(--gold); padding: 5px 11px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.feature-card__flag svg { width: 12px; height: 12px; }
.feature-card__body { padding: 24px clamp(20px, 3vw, 28px) 26px; display: flex; flex-direction: column; flex: 1; }
.feature-card__loc { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.feature-card__name { font-size: clamp(22px, 2.6vw, 27px); margin-bottom: 12px; }
.feature-card__name a { color: var(--text); }
.feature-card__name a:hover { color: var(--brand); }
.feature-card__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.feature-card__blurb { color: var(--muted); font-size: 15.5px; flex: 1; }
.feature-card__foot { margin-top: 20px; }

/* ============================================================================
   PROCESS / PILLARS
   ========================================================================== */
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 52px; }
.pillar {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px 28px 28px; overflow: hidden;
  box-shadow: var(--shadow-card); transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pillar:hover { border-color: rgba(28,124,84,.4); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pillar__no { font-family: var(--font-mono); font-size: 13px; color: var(--gold-deep); letter-spacing: .06em; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--gold-tint); border: 1px solid rgba(192,138,43,.25); margin-bottom: 20px; font-weight: 500; }
.pillar h3 { font-size: 22px; margin-bottom: 12px; }
.pillar p { color: var(--muted); font-size: 16px; }

/* ============================================================================
   BROWSE / DIRECTORY
   ========================================================================== */
.browse-tools { margin-top: 36px; display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: stretch; }
.field { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 18px; box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s; }
.field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(28,124,84,.12); }
.field svg { width: 18px; height: 18px; color: var(--muted-2); flex: none; }
.field input, .field select { background: transparent; border: 0; color: var(--text); font-family: var(--font-body); font-size: 15.5px; padding: 14px 0; width: 100%; outline: none; }
.field select { cursor: pointer; padding-right: 8px; }
.field--select { padding-right: 14px; }

.cards-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cat-card {
  display: flex; flex-direction: column; gap: 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px;
  position: relative; min-height: 100%; box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.cat-card:hover { transform: translateY(-4px); border-color: rgba(28,124,84,.4); box-shadow: var(--shadow-lg); }
.cat-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cat-card__town { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.cat-card h3 { font-size: 23px; color: var(--text); }
.cat-card p { color: var(--muted); font-size: 15px; flex: 1; }
.cat-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.cat-card__count { font-size: 13px; color: var(--muted-2); }
.cat-card__arrow { color: var(--brand); transition: transform .25s var(--ease); }
.cat-card:hover .cat-card__arrow { transform: translateX(4px); }
.cat-card__link { position: absolute; inset: 0; border-radius: var(--r-lg); }
.cat-card__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.no-results { margin-top: 30px; padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--surface); }

/* ============================================================================
   "WHY TWO" editorial band
   ========================================================================== */
.editorial { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.editorial h2 { font-size: clamp(28px, 4vw, 44px); }
.editorial__body p + p { margin-top: 18px; }
.editorial__body p { color: var(--muted); }
.pullquote { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; color: var(--text); line-height: 1.3; border-left: 3px solid var(--gold); padding-left: 22px; margin: 6px 0 24px; }

/* ============================================================================
   CTA band
   ========================================================================== */
.cta-band { position: relative; overflow: hidden; }
.cta-band__inner {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  border-radius: var(--r-lg); padding: clamp(36px, 5vw, 64px); text-align: center; box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
}
.cta-band__inner::after { content: ""; position: absolute; width: 360px; height: 360px; right: -80px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(226,169,62,.35), transparent 65%); }
.cta-band__inner > * { position: relative; }
.cta-band .eyebrow { color: var(--gold-soft); }
.cta-band .eyebrow::before { background: var(--gold-soft); }
.cta-band h2 { color: #fff; font-size: clamp(28px, 4vw, 44px); }
.cta-band p { color: rgba(255,255,255,.82); margin: 16px auto 0; max-width: 56ch; }
.cta-band .btn { margin-top: 30px; }
.cta-band small { display: block; margin-top: 16px; color: rgba(255,255,255,.62); font-size: 13px; }

/* ============================================================================
   PAGE HEADER (interior)
   ========================================================================== */
.page-head { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(20px, 3vw, 32px); }
.breadcrumbs { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--muted-2); margin-bottom: 22px; }
.breadcrumbs a { color: var(--muted); text-decoration: underline; text-decoration-color: rgba(94,106,96,.45); text-underline-offset: 3px; }
.breadcrumbs a:hover { color: var(--brand); }
.breadcrumbs span { margin: 0 8px; opacity: .5; }
.page-head h1 { font-size: clamp(34px, 5.2vw, 58px); letter-spacing: -.025em; }
.page-head .lede { margin-top: 20px; max-width: 62ch; }

/* ============================================================================
   CATEGORY / LISTINGS
   ========================================================================== */
.listing-layout { display: grid; grid-template-columns: 1fr; gap: 22px; }
.company {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-card);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.company:hover { border-color: rgba(28,124,84,.32); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.company__inner { display: grid; grid-template-columns: 320px 1fr; }

.company__media {
  position: relative; min-height: 100%; overflow: hidden;
  background: radial-gradient(120% 90% at 30% 20%, rgba(226,169,62,.18), transparent 60%), linear-gradient(150deg, var(--deep), var(--hover));
  border-right: 1px solid var(--line-soft); display: grid; place-items: center;
}
.company__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.company__media--contain { padding: 26px; }
.company__media--contain img { object-fit: contain; }
.company__monogram { font-family: var(--font-display); font-weight: 700; font-size: 66px; color: var(--gold); opacity: .9; }
.company__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: var(--surface); }
/* frame making it clear this is a website screenshot */
.company__media:has(.company__shot) { background: var(--surface-2); }
.company__media:has(.company__shot) .company__shot {
  inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px);
  border: 1.5px solid var(--line); border-radius: 6px;
  box-shadow: 0 2px 8px -3px rgba(60,45,20,.25), 0 0 0 1px rgba(255,255,255,.6) inset;
  outline: 1px solid var(--line-soft);
}
/* fake browser chrome bar above the screenshot */
.company__media:has(.company__shot)::before {
  content: ""; position: absolute; top: 10px; left: 10px;
  width: calc(100% - 20px); height: 26px;
  background: var(--hover); border: 1.5px solid var(--line);
  border-bottom: 1px solid var(--line-soft); border-radius: 6px 6px 0 0; z-index: 1;
}
/* three browser dots */
.company__media:has(.company__shot)::after {
  content: ""; position: absolute; top: 18px; left: 22px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line); z-index: 2;
  box-shadow: 10px 0 0 var(--line), 20px 0 0 var(--line);
}
/* push screenshot down so the chrome bar sits on top */
.company__media:has(.company__shot) .company__shot {
  top: 36px; height: calc(100% - 46px);
}
/* Desktop: the screenshot at its own 16:9 shape (1200 x 675, tools/screenshots.mjs) at the top of a wider
   column, instead of stretched to the card's height, which cropped it to a narrow strip of the website. */
@media (min-width: 761px) {
  .company__inner:has(.company__shot) { grid-template-columns: minmax(320px, 42%) 1fr; }
  .company__media:has(.company__shot) { display: block; padding: 36px 10px 10px; }
  .company__media:has(.company__shot) .company__monogram { display: none; }
  .company__media:has(.company__shot) .company__shot {
    position: relative; inset: auto; top: auto; width: 100%; height: auto; aspect-ratio: 16 / 9;
    border-radius: 0 0 6px 6px; border-top: 0;
  }
  .company__media:has(.company__shot) .company__media-tag { position: static; margin: 12px 0 0 auto; width: fit-content; display: flex; }
}
/* The same for a listing image saved in assets/img/ (the captured screenshots are saved there, so this is the
   usual case): whole, at 16:9, at the top of a wider column, with its place tag under it. Logos keep their
   own layout (company__media--contain). Phones are unchanged. */
@media (min-width: 761px) {
  .company__inner:has(.company__media--photo) { grid-template-columns: minmax(320px, 42%) 1fr; }
  .company__media--photo { display: block; padding: 14px; background: var(--surface-2); }
  .company__media--photo > img {
    height: auto; aspect-ratio: 16 / 9; object-position: top center;
    border: 1.5px solid var(--line); border-radius: 8px; box-shadow: 0 2px 8px -3px rgba(60,45,20,.25);
  }
  .company__media--photo .company__media-tag { position: static; margin: 12px 0 0 auto; width: fit-content; display: flex; }
}
.company__media-tag {
  position: absolute; right: 14px; bottom: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-deep); background: var(--brand-soft); border: 1px solid rgba(28,124,84,.25); padding: 3px 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
}
.company__media-tag::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); display: inline-block; flex: none;
}

.company__content { padding: 28px clamp(22px, 3vw, 34px); display: flex; flex-direction: column; }
.company__rank { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.company__name { font-size: clamp(24px, 3vw, 30px); margin: 8px 0 12px; }
.company__name a { color: var(--text); }
.company__name a:hover { color: var(--brand); }
.company__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.company__blurb { color: var(--muted); margin-top: 16px; }
.company__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 28px; margin: 20px 0; padding: 20px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.meta-row { display: flex; flex-direction: column; gap: 3px; }
.meta-row dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.meta-row dd { font-size: 16px; color: var(--text); }
.meta-row dd a { color: var(--brand); word-break: break-word; }
.meta-row--muted dd { color: var(--muted-2); font-style: italic; font-size: 14px; }
.company__cta { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: auto; }
.company__tip { font-size: 13.5px; color: var(--muted-2); }

.about-trade { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--line-soft); }
.about-trade h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 14px; }
.about-trade p { color: var(--muted); max-width: 70ch; }

.checks-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.check { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow-card); }
.check svg { width: 26px; height: 26px; color: var(--brand); margin-bottom: 12px; }
.check h3 { font-size: 18px; margin-bottom: 6px; }
.check p { font-size: 14.5px; color: var(--muted); }

/* ============================================================================
   FORMS
   ========================================================================== */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(26px, 4vw, 44px); box-shadow: var(--shadow-card); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: 14px; font-weight: 600; color: var(--text); }
.form-field label .req { color: var(--brand); }
.form-field .hint { font-size: 13px; color: var(--muted-2); }
.form-field input, .form-field select, .form-field textarea {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text); font-family: var(--font-body); font-size: 16px; padding: 13px 15px; width: 100%; transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-field textarea { resize: vertical; min-height: 130px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(28,124,84,.13); }
.hp-field { display: none !important; }   /* not just off-screen: autofill fills fields it can position, and a hidden one it skips */
.form-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.form-actions small { color: var(--muted-2); font-size: 13px; }
.form-note { font-size: 14.5px; color: var(--muted); margin-bottom: 26px; }
.form-error { background: #fdecec; border: 1px solid #f0b9b9; color: #a23232; padding: 14px 16px; border-radius: var(--r-sm); margin-bottom: 22px; font-size: 14.5px; }

.tabs { display: inline-flex; gap: 6px; background: var(--hover); border: 1px solid var(--line); border-radius: 999px; padding: 5px; margin-bottom: 30px; }
.tab { border: 0; background: transparent; color: var(--muted); font-family: var(--font-body); font-weight: 600; font-size: 14.5px; padding: 10px 20px; border-radius: 999px; cursor: pointer; transition: color .2s, background .2s, box-shadow .2s; }
.tab[aria-selected="true"] { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }

/* ============================================================================
   FAQ
   ========================================================================== */
.faq-list { margin-top: 40px; max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font-family: var(--font-display); font-size: clamp(18px, 2.2vw, 22px); font-weight: 600; color: var(--text); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-weight: 400; font-size: 26px; color: var(--brand); transition: transform .25s var(--ease); }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item__body { padding: 0 44px 26px 0; color: var(--muted); }

/* ============================================================================
   Prose
   ========================================================================== */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(24px, 3vw, 32px); margin: 44px 0 14px; }
.prose h3 { font-size: 20px; margin: 30px 0 10px; }
.prose p { color: var(--muted); margin-bottom: 16px; }
.prose ul { color: var(--muted); margin: 0 0 18px 1.1em; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================================
   FOOTER
   ========================================================================== */
.site-footer { border-top: 1px solid var(--line); margin-top: 40px; padding-block: clamp(48px, 6vw, 76px) 36px; background: var(--surface-2); }
.site-footer__top { display: grid; grid-template-columns: 1.1fr 1.6fr; gap: clamp(36px, 5vw, 72px); }
.footer-seal { width: 104px; margin-bottom: 22px; }
.footer-seal .seal { width: 104px; }
.footer-seal .seal__ring { animation-duration: 72s; }
.footer-credo { color: var(--muted); font-size: 15px; max-width: 38ch; }
.footer-meta { margin-top: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--muted-2); text-transform: uppercase; }
.footer-social { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-social a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--brand); font-weight: 600; font-size: 15px; text-decoration: none; }
.footer-social a:hover { color: var(--brand-deep); text-decoration: underline; }
.footer-social svg { flex-shrink: 0; }
.site-footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footcol h2 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); margin-bottom: 16px; }
.footcol ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footcol a { color: var(--muted); font-size: 14.5px; }
.footcol a:hover { color: var(--text); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.site-footer__bottom p { font-size: 13px; color: var(--muted-2); }
.credential-line { font-family: var(--font-mono); letter-spacing: .12em; }

/* ============================================================================
   Scroll reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__seal { order: 0; }   /* Oct 2026: below the text on phones, so the search box is on the first screen */
  .seal { width: min(300px, 64vw); }
  .pillars { grid-template-columns: 1fr; }
  .featured-grid { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .editorial { grid-template-columns: 1fr; }
  .checks-strip { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .company__inner { grid-template-columns: 1fr; }
  .company__media { border-right: 0; border-bottom: 1px solid var(--line-soft); aspect-ratio: 16 / 9; min-height: 0; }
  .company__media--contain { aspect-ratio: 16 / 7; }
  .nav-toggle { display: flex; }
  .primary-nav {
    position: fixed; inset: 76px 0 auto 0; background: rgba(255,255,255,.98);
    backdrop-filter: blur(16px); border-bottom: 1px solid var(--line);
    transform: translateY(-14px); opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .primary-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 2px; padding: 14px var(--gut) 26px; }
  .primary-nav a { padding: 14px 8px; font-size: 17px; }
  .primary-nav__cta { margin: 10px 8px 0; }
  .primary-nav__cta .btn { width: 100%; justify-content: center; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .browse-tools { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .company__meta { grid-template-columns: 1fr; }
  .site-footer__nav { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   DIRECTORY FEATURES (Oct 2026): Featured labels, offer blocks, confirm page,
   badge, related links, form checkbox
   ========================================================================== */
.vbadge--paid { color: #7a4d00; background: #FFF3D6; border-color: rgba(192,138,43,.45); }
.feature-card__flag--paid { background: var(--gold-tint); color: var(--gold-deep); border-color: rgba(192,138,43,.45); }
.feature-card--paid { border-color: rgba(192,138,43,.42); }
.feature-card__foot { display: flex; flex-wrap: wrap; gap: 10px; }
.disclosure { font-size: 14.5px; color: var(--muted); max-width: 70ch; }
.disclosure a { text-decoration: underline; text-underline-offset: 3px; }
.listing-layout > .disclosure { padding: 14px 18px; background: var(--gold-tint); border: 1px solid rgba(192,138,43,.28); border-radius: var(--r-sm); }
.page-head__note { margin-top: 12px; font-size: 14px; color: var(--muted-2); }

.company--featured { border-color: rgba(192,138,43,.45); }
.company--open { border-style: dashed; }
.company__blurb--long p + p { margin-top: 12px; }
.company__extra { margin: -4px 0 18px; }
.company__extra h3 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 13.5px; padding: 5px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
.company__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 0 0 18px; }
.company__gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-soft); }
.company__social { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 18px; font-size: 14.5px; }
.company__social a { text-decoration: underline; text-underline-offset: 3px; }

.offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.offer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow-card); }
.offer h3 { font-size: 18px; margin-bottom: 8px; }
.offer p { font-size: 15px; color: var(--muted); }
.offer-grid--compact { margin-top: 0; }
.offer-note { margin-top: 22px; font-size: 14.5px; color: var(--muted); max-width: 80ch; }
.offer-note strong { color: var(--text); }
.offer-note + .offer-note { margin-top: 10px; }

.featured-strip { background: var(--surface); border: 1px solid rgba(192,138,43,.35); border-radius: var(--r-lg); padding: 22px clamp(18px, 3vw, 28px); box-shadow: var(--shadow-card); }
.featured-strip__head { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.featured-strip__head h2 { font-size: 22px; }
.featured-strip__head .disclosure { font-size: 13.5px; }
.featured-strip__list { list-style: none; padding: 0; margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.featured-strip__list li { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--surface-2); }
.featured-strip__list .vbadge { align-self: flex-start; }
.featured-strip__name { font-weight: 600; color: var(--text); }
.featured-strip__loc { font-size: 13px; color: var(--muted-2); }

.related__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.related__list a { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 14.5px; color: var(--text); }
.related__list a:hover { border-color: var(--brand); color: var(--brand); }

.form-check { display: flex !important; flex-direction: row; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: 14.5px !important; color: var(--muted) !important; line-height: 1.5; }
.form-check input { width: 18px !important; height: 18px; margin-top: 2px; flex: none; accent-color: var(--brand); }
.form-check a { text-decoration: underline; text-underline-offset: 3px; }

.confirm-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 28px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line-soft); }
.confirm-details dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.confirm-details dd { font-size: 16px; color: var(--text); margin-top: 3px; overflow-wrap: anywhere; }
.confirm-details__full { grid-column: 1 / -1; }
.confirm-details .muted { color: var(--muted-2); font-size: 14px; }

.badge-snippet { margin-top: 16px; display: grid; gap: 12px; }
.badge-snippet__preview img { width: 200px; height: 64px; }
.badge-snippet textarea { width: 100%; min-height: 84px; font-family: var(--font-mono); font-size: 12.5px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); }
.badge-showcase { display: flex; flex-wrap: wrap; gap: 28px; }
.badge-showcase__item { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.badge-showcase__item svg { width: 260px; height: auto; }
.badge-showcase__item p { font-size: 13.5px; color: var(--muted-2); }

@media (max-width: 940px) {
  .offer-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-strip__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .offer-grid, .featured-strip__list, .confirm-details { grid-template-columns: 1fr; }
}

/* Header button: keep white text on gold (the nav link colour was overriding it) */
.primary-nav .btn--gold, .primary-nav .btn--gold:hover { color: #fff; background: var(--bg); padding: 10px 18px; }

/* Badge kit page (Oct 2026) */
.kit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.kit-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 12px; }
.kit-item__preview { display: grid; place-items: center; min-height: 110px; border-radius: var(--r); background: var(--surface-2); border: 1px dashed var(--line); }
.kit-item__preview--dark { background: #2b3830; border-color: #2b3830; }
.kit-item__label { font-size: 17px; }
.kit-item__code { width: 100%; min-height: 96px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); resize: vertical; }
.kit-copy { align-self: flex-start; }
.kit-cert { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid rgba(192,138,43,.35); border-radius: var(--r-lg); padding: 24px 26px; box-shadow: var(--shadow-card); }
.kit-cert h2 { font-size: 22px; margin-bottom: 6px; }
.kit-cert p { color: var(--muted); font-size: 15px; max-width: 60ch; }
.badge-showcase__item--dark { background: #2b3830; padding: 14px; border-radius: 12px; }
.badge-showcase__item--dark p { color: #B9C2BB; }
@media (max-width: 760px) { .kit-grid { grid-template-columns: 1fr; } }

/* Contact page: AIQS contact chat */
.contact-chat { min-height: 420px; }
.contact-chat #aiqs-chat { width: 100%; }

/* Homepage card sections with more than two cards: three across, then two, then one */
.featured-grid--many { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.featured-grid--many .feature-card__name { font-size: 22px; }
@media (max-width: 1100px) { .featured-grid--many { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 940px)  { .featured-grid--many { grid-template-columns: 1fr; } }

/* Featured row: small paid cards you swipe or arrow through (browse page, and below the listings on
   trade-and-town pages). No auto-sliding. */
.frow { background: var(--surface); border: 1px solid rgba(192,138,43,.35); border-radius: var(--r-lg); padding: 22px clamp(16px, 3vw, 26px) 18px; box-shadow: var(--shadow-card); }
.frow__head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.frow__title { font-size: 22px; }
.frow__note { font-size: 13.5px; margin-top: 4px; }
.frow__nav { display: flex; gap: 8px; flex: none; }
.frow__nav[hidden] { display: none; }
.frow__btn { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.frow__btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.frow__btn:disabled { opacity: .35; cursor: default; }
.frow__track { list-style: none; padding: 4px 2px 10px; margin: 16px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 250px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; }
.frow__track:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 8px; }
.frow__item { scroll-snap-align: start; }
.fcard { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; background: var(--surface-2); color: var(--text); transition: border-color .2s, transform .2s; }
.fcard:hover { border-color: rgba(192,138,43,.55); transform: translateY(-2px); }
.fcard__media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--gold-tint); overflow: hidden; }
.fcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.fcard__mono { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--gold-deep); }
.fcard__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.fcard__body .vbadge { align-self: flex-start; }
.fcard__name { font-weight: 600; font-size: 16px; line-height: 1.3; }
.fcard__loc { font-size: 13px; color: var(--muted-2); }
@media (prefers-reduced-motion: reduce) { .frow__track { scroll-behavior: auto; } .fcard:hover { transform: none; } }

/* List your business: heading above the "what's included" cards */
.offer-head { font-size: 22px; margin-bottom: 16px; }

/* ============================================================================
   LIST YOUR BUSINESS: website look-up (Oct 2026)
   The look-up panel, its spinner and status line, what the form shows once the
   site has been read (banner, "From your website" tags, trade suggestions), and
   the disabled look while anything is being sent. Script: assets/js/apply.js
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Step 1 holds the form back until the look-up has run or been skipped (class set by the page's own script). */
.form-card.is-waiting .apply-details { display: none; }

.lookup { background: var(--brand-soft); border: 1px solid rgba(28,124,84,.22); border-radius: var(--r); padding: clamp(20px, 3vw, 28px); margin-bottom: 30px; }
.lookup[hidden] { display: none; }
.form-card.is-waiting .lookup { margin-bottom: 0; }
/* A site has been read: the box is cleared away and the form takes its place ("Not your website?" brings it back). */
.form-card.is-found .lookup { display: none; }

/* The form's arrival, and a brief highlight on each field the look-up filled in. Not shown to people who ask for less motion (the script leaves the classes off). */
.apply-details.is-revealed { animation: apply-reveal .4s ease both; }
@keyframes apply-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.form-field.is-filled > input, .form-field.is-filled > textarea { animation: apply-filled 1.8s ease .2s backwards; }
@keyframes apply-filled { 0%, 40% { background: var(--brand-soft); border-color: var(--brand); } }   /* then back to the field's own look, so focus styles still apply */

/* The note above the form: a lead sentence, then what happens next. */
.form-note--steps p + p { margin-top: 10px; }
.form-note--steps strong { color: var(--text); }
.apply-banner .linkbtn { display: block; margin-top: 8px; color: inherit; font-weight: 600; text-align: left; }
.lookup__title { font-size: clamp(21px, 2.6vw, 25px); }
.lookup__lede { margin-top: 8px; font-size: 15.5px; color: var(--muted); max-width: 62ch; }
.lookup__form { margin-top: 18px; }
.lookup__form > label { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.lookup__row { display: flex; gap: 10px; align-items: stretch; }
.lookup__row input {
  flex: 1; min-width: 0; background: var(--surface); border: 1px solid rgba(28,124,84,.3); border-radius: var(--r-sm);
  color: var(--text); font-family: var(--font-body); font-size: 16px; padding: 13px 15px; transition: border-color .2s, box-shadow .2s;
}
.lookup__row input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(28,124,84,.16); }
.lookup__row input[readonly] { color: var(--muted); background: var(--surface-2); }
.lookup__status { min-height: 1.6em; margin-top: 12px; font-size: 14.5px; color: var(--brand-deep); }
.lookup__status.is-error { color: #a23232; }
.lookup__skip { margin-top: 2px; font-size: 14.5px; }

.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkbtn:hover { color: var(--brand-deep); }
.linkbtn:disabled { color: var(--muted-2); text-decoration: none; cursor: default; }

/* Buttons while something is being sent: no lift, no pointer, and a spinner in place of nothing. */
.btn:disabled, .tab:disabled { opacity: .62; cursor: default; }
.btn:disabled:hover { transform: none; }
.btn.is-busy { opacity: 1; }
.btn__spin { display: none; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: btn-spin .7s linear infinite; }
.btn.is-busy .btn__spin { display: inline-block; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn__spin { animation-duration: 2.4s; } }

/* The whole form is one fieldset, so one switch disables every field and the Send button. */
.apply-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.apply-fields:disabled { opacity: .6; }

.apply-banner { padding: 14px 18px; border-radius: var(--r-sm); margin-bottom: 22px; font-size: 15px; line-height: 1.55; }
.apply-banner[hidden] { display: none; }
.apply-banner--ok   { background: var(--brand-soft); border: 1px solid rgba(28,124,84,.25); color: var(--brand-deep); }
.apply-banner--note { background: var(--gold-tint); border: 1px solid rgba(192,138,43,.3); color: #6b4a0f; }
.apply-banner:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* A label with a tag wraps tidily on a narrow screen: the tag drops to its own line, flush left. */
.form-field > label:has(.found-tag) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.form-field > label:has(.found-tag) .found-tag { margin-left: 2px; }
.found-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); font-size: 12px; font-weight: 500; vertical-align: 1px; }

/* Trade suggestions: a tinted box under the field, so it reads as one clickable group that belongs to it. */
.suggest { position: relative; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding: 14px 16px 16px; background: var(--brand-soft); border: 1px solid rgba(28,124,84,.22); border-radius: var(--r-sm); }
.suggest::before { content: ""; position: absolute; top: -6px; left: 22px; width: 10px; height: 10px; background: var(--brand-soft); border-left: 1px solid rgba(28,124,84,.22); border-top: 1px solid rgba(28,124,84,.22); transform: rotate(45deg); }
.suggest[hidden] { display: none; }
.form-field[hidden] { display: none; }   /* the follow-up to "How did you hear about us?", until a choice is made */
.suggest__label { font-size: 13.5px; line-height: 1.5; color: var(--brand-deep); }
.suggest__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-family: var(--font-body); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s; }
.chip:hover { border-color: var(--brand); }
.chip[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }
.chip__note { font-size: 12px; font-weight: 400; color: var(--muted-2); }
.chip:disabled { cursor: default; }

.form-error--inline { margin: 24px 0 0; }
.form-error--inline + .form-actions { margin-top: 18px; }

@media (max-width: 620px) {
  .lookup__row { flex-direction: column; }
  .lookup__row .btn { justify-content: center; }
}

/* Cloudflare Turnstile on the List your business forms (includes/apply.php) */
.form-turnstile { margin: 18px 0 4px; min-height: 65px; }

/* Thank-you page: how the telephone check works (thank-you/index.php) */
.thanks-call { margin: 30px auto 0; max-width: 52ch; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; }
.thanks-call h2 { font-size: 20px; margin-bottom: 10px; }
.thanks-call p { margin: 0 0 12px; color: var(--muted); }
.thanks-call p:last-child { margin-bottom: 0; }
.thanks-call__num { color: var(--text); white-space: nowrap; }
.thanks-call__mail { color: var(--text); overflow-wrap: anywhere; }
.thanks-call__say { font-size: 19px; font-weight: 600; color: var(--text) !important; border-left: 3px solid var(--gold); padding-left: 14px; }

/* The phone and email from the business's own website (assets/js/apply.js, lockTo()) */
.form-field input.is-locked { background: var(--surface-2); color: var(--text); cursor: default; }
.form-field .lock-note { display: block; margin-top: 6px; font-size: 13px; color: var(--muted-2); }
.form-field select[id$="-pick"] { width: 100%; }
.form-check[hidden], .phone-private-hint[hidden] { display: none !important; }   /* the site's own display rules would otherwise show them */

/* "Who is filling in this form?" (list-your-business) */
.who-field{border:0;margin:0;padding:0;display:grid;gap:8px}
.who-field legend{font-weight:600;font-size:15px;margin-bottom:6px;padding:0}
.who-agency{margin:4px 0 0 28px;display:grid;gap:6px}
.who-agency[hidden]{display:none !important}

/* Home page: the link under "Just verified and now live" */
.recent-cta { font-weight: 600; white-space: nowrap; color: var(--brand, inherit); }

/* ============================================================================
   LIST YOUR BUSINESS: three steps (Oct 2026)
   1 the website look-up, 2 the business, 3 about the person applying. The script
   (assets/js/apply.js) adds "has-steps" to the card and sets data-step; without it
   the two parts of the form simply stack, so nothing here is needed to apply.
   ========================================================================== */
.step-meta { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--brand-deep); }

.apply-progress { display: none; scroll-margin-top: 100px; }
.has-steps .apply-progress { display: block; margin-bottom: 22px; }
.apply-progress__text { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--brand-deep); }
.apply-progress__bar { display: flex; gap: 6px; }
.apply-progress__bar span { flex: 1; height: 4px; border-radius: 999px; background: var(--line); transition: background .3s; }
.apply-progress__bar span.is-done { background: var(--brand); }

.apply-step__title { margin: 0 0 6px; font-size: clamp(21px, 2.6vw, 25px); scroll-margin-top: 110px; }
.apply-step__title:focus { outline: none; }
.apply-step__lead { margin: 0 0 22px; font-size: 15.5px; color: var(--muted); max-width: 62ch; }
.apply-step + .apply-step { margin-top: 36px; }                       /* without the script: the two parts stack */
.has-steps .apply-step + .apply-step { margin-top: 0; }
.has-steps .apply-step:not(.is-current) { display: none; }

/* Back and Continue exist only when the steps are on. */
.apply-nav { display: none; }
.has-steps .apply-nav { display: flex; }
.btn--back { display: none; }
.has-steps .btn--back { display: inline-flex; }
.btn[hidden] { display: none !important; }
.apply-step .form-actions { margin-top: 26px; }

/* Step 1 is only on screen at step 1: the box gives way to the form, and Back brings it back with nothing cleared. */
.form-card[data-step="2"] .lookup, .form-card[data-step="3"] .lookup { display: none; }
.lookup__fwd { margin-top: 4px; }
.lookup__fwd[hidden] { display: none; }

/* What happens next sits above the agreement, as plain text rather than a block competing with the fields. */
.apply-checks { margin: 24px 0 18px; }

/* The optional description: a closed line until it is wanted, or until the look-up has written one. */
.more-details > summary { cursor: pointer; width: fit-content; font-size: 14px; font-weight: 600; color: var(--brand); list-style: none; }
.more-details > summary::-webkit-details-marker { display: none; }
.more-details > summary::before { content: "+"; display: inline-block; width: 1.1em; }
.more-details[open] > summary::before { content: "\2212"; }
.more-details > summary:hover { color: var(--brand-deep); }
.more-details[open] > summary { margin-bottom: 12px; }
.more-details__body { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 620px) {
  .apply-nav .btn, .has-steps .form-actions .btn--back { flex: 0 0 auto; }
  .apply-nav { gap: 10px; }
  .apply-nav #step-next-2 { flex: 1; justify-content: center; }
}

/* ============================================================================
   SITE SEARCH (Oct 2026): the box with suggestions as you type (includes/search-box.php,
   assets/js/search.js) and the results page (/search/). Deliberately plain, like Google's:
   a white pill with a soft shadow, and the list joining onto it when open.
   ========================================================================== */
.reveal[data-d="4"] { transition-delay: .32s; }

/* Home page search stage: our name, the box, two plain buttons, centred. The layout everyone knows from a
   search engine, in our own name and colours (emerald, honey gold, charcoal), so nobody mistakes us for one. */
.search-stage { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(8px, 3vw, 36px) 0 0; }
.wordmark {
  display: inline-flex; align-items: center; gap: .22em; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 8.2vw, 86px); white-space: nowrap;
  line-height: 1; letter-spacing: -.035em; margin-bottom: clamp(22px, 3.4vw, 34px); user-select: none;
}
.wordmark__mark { display: grid; place-items: center; width: .9em; height: .9em; margin-right: .06em; }
.wordmark__mark svg { width: 100%; height: 100%; }
.wordmark__b { color: var(--brand); }
.wordmark__r { color: var(--gold); background: linear-gradient(180deg, var(--gold-soft), var(--gold-deep)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wordmark__c { color: var(--text); }
.sbox--stage { max-width: 680px; }
.sbox--stage .sbox__bar { height: 60px; border-radius: 30px; border-color: #DDD5C6; box-shadow: none; padding-left: 22px; }
.sbox--stage .sbox__bar:hover { box-shadow: 0 2px 10px -1px rgba(60,45,20,.20); border-color: transparent; }
.sbox--stage.is-open .sbox__bar { border-radius: 30px 30px 0 0; }
.sbox--stage .sbox__input { font-size: 18px; }
.sbox--stage .sbox__panel { text-align: left; }
.sbox--stage .sbox__go { display: none; }            /* the buttons below do this on a wide screen */
.sbox-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.sbox-btn {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--surface-2); color: var(--text);
  font-family: var(--font-body); font-size: 15px; font-weight: 500; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.sbox-btn:hover { border-color: #DDD5C6; box-shadow: 0 1px 2px rgba(60,45,20,.12); color: var(--text); }
.sbox-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.search-stage .sbox-hint { margin: 18px 0 0; }
.hero__grid--below { margin-top: clamp(56px, 8vw, 104px); }

.sbox { position: relative; width: 100%; max-width: 640px; z-index: 30; }
.sbox__bar {
  display: flex; align-items: center; gap: 4px; height: 58px; padding: 0 6px 0 20px;
  background: var(--surface); border: 1px solid #DCD3C2; border-radius: 29px;
  box-shadow: 0 2px 6px -1px rgba(60,45,20,.10);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease), border-radius .12s;
}
.sbox__bar:hover { box-shadow: 0 4px 14px -2px rgba(60,45,20,.18); border-color: #D2C7B3; }
.sbox:focus-within .sbox__bar { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(28,124,84,.12), 0 6px 18px -4px rgba(60,45,20,.18); }
.sbox.is-open .sbox__bar { border-radius: 29px 29px 0 0; border-bottom-color: var(--line-soft); box-shadow: 0 6px 18px -4px rgba(60,45,20,.22); }
.sbox__icon { display: grid; place-items: center; color: var(--muted-2); flex: none; }
.sbox__input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent;
  font-family: var(--font-body); font-size: 17px; color: var(--text); padding: 0 8px;
}
.sbox__input::placeholder { color: #7B847A; }
.sbox__input::-webkit-search-cancel-button, .sbox__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.sbox__input:focus-visible { outline: none; }
.sbox__clear, .sbox__go {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: transparent; color: var(--muted); cursor: pointer; transition: background .15s, color .15s;
}
.sbox__clear:hover { background: var(--hover); color: var(--text); }
.sbox__clear[hidden] { display: none; }
.sbox__go { background: var(--brand); color: #fff; }
.sbox__go:hover { background: var(--brand-deep); }
.sbox.is-busy .sbox__icon { animation: sbox-pulse 1s ease-in-out infinite; }
@keyframes sbox-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sbox.is-busy .sbox__icon { animation: none; } }

.sbox__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border: 1px solid var(--brand); border-top: 0;
  border-radius: 0 0 22px 22px; padding: 6px 0 10px;
  box-shadow: 0 0 0 3px rgba(28,124,84,.12), 0 18px 34px -12px rgba(60,45,20,.30);
  max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain;
}
.sbox__panel[hidden] { display: none; }
.sbox__group { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); padding: 10px 20px 4px; }
.sbox__note, .sbox__empty { font-size: 14.5px; color: var(--muted); padding: 10px 20px 4px; }
.sbox__note b, .sbox__empty b { color: var(--text); }

.sopt { display: flex; align-items: center; gap: 14px; padding: 8px 20px; min-height: 54px; color: var(--text); cursor: pointer; }
.sopt:hover, .sopt[aria-selected="true"] { background: var(--hover); color: var(--text); }
.sopt__av {
  position: relative; flex: none; width: 38px; height: 38px; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; background: var(--deep); color: var(--brand-deep);
  font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.sopt__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sopt__av--icon { background: var(--brand-soft); color: var(--brand); border-radius: 50%; }
.sopt--all .sopt__av--icon { background: transparent; color: var(--muted-2); }
.sopt__main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sopt__name { font-size: 16px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sopt__name b { font-weight: 700; }
.sopt__sub { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sopt--all { border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 12px; }
.sopt__chip {
  flex: none; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; color: var(--brand-deep); background: var(--brand-soft); border: 1px solid rgba(28,124,84,.2);
}
.sopt__chip--paid { color: #7a4d00; background: #FFF3D6; border-color: rgba(192,138,43,.45); }
.sopt__chip--pending { color: var(--gold-deep); background: var(--gold-tint); border-color: rgba(192,138,43,.28); }
.sopt__chip--muted { color: var(--muted); background: var(--surface-2); border-color: var(--line); }

.sbox-hint { margin: 12px 0 0 4px; font-size: 14.5px; color: var(--muted); }
.sbox-hint a { text-decoration: underline; text-decoration-color: rgba(28,124,84,.35); text-underline-offset: 3px; }

/* Results page */
.search-head { padding-bottom: 8px; }
.search-head__h1 { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 24px; }
.search-results { padding-top: 18px; padding-bottom: clamp(48px, 7vw, 90px); }
.search-results > * { max-width: 780px; }
.search-note { font-size: 15.5px; color: var(--muted); margin-bottom: 12px; }
.search-note b { color: var(--text); }
.search-cats { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 26px; }
.search-cat {
  display: inline-flex; flex-direction: column; padding: 10px 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text); line-height: 1.3; transition: border-color .2s, transform .2s var(--ease);
}
.search-cat:hover { border-color: var(--brand); color: var(--text); transform: translateY(-1px); }
.search-cat__label { font-weight: 700; font-size: 15.5px; }
.search-cat__count { font-size: 13px; color: var(--muted); }
.search-count { font-size: 14px; color: var(--muted-2); margin-bottom: 10px; }
.search-list { list-style: none; padding: 0; display: flex; flex-direction: column; }
.sres { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.sres:last-child { border-bottom: 0; }
.sres__av {
  position: relative; flex: none; width: 64px; height: 64px; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center; background: var(--deep); color: var(--brand-deep); font-weight: 700; font-size: 18px;
}
.sres__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sres__body { flex: 1; min-width: 0; }
.sres__crumb { font-size: 13.5px; color: var(--muted); }
.sres__name { font-size: 21px; line-height: 1.25; margin-top: 2px; letter-spacing: -.01em; }
.sres__name a { color: var(--brand-deep); }
.sres__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sres__blurb { font-size: 15.5px; color: var(--muted); margin-top: 6px; line-height: 1.55; }
.sres__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.sres__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; margin-left: auto; }
.vbadge--muted { color: var(--muted); background: var(--surface-2); border-color: var(--line); }
.search-foot { margin-top: 26px; font-size: 14px; color: var(--muted-2); }
.search-empty { text-align: left; padding: 30px; }
.search-empty p + p { margin-top: 10px; }
.search-empty__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px !important; }

@media (max-width: 620px) {
  .sbox--stage .sbox__go { display: grid; }     /* phones: the round button in the box, no buttons below (as on a phone search page) */
  .sbox--stage .sbox__bar { height: 54px; padding-left: 16px; }
  .sbox--stage .sbox__input { font-size: 16px; }
  .search-stage .sbox-buttons { display: none; }
  .search-stage { padding-top: 44px; }          /* clear air between the header's name and the big one */
  .hero__grid--below { margin-top: 64px; }
  /* The seal: smaller, and well clear of the "List your business free" button above it */
  .hero__seal { width: min(300px, 78vw); margin: 34px auto 8px; }
  .hero__seal .seal { width: 100%; }
  .sbox__bar { height: 54px; padding-left: 16px; }
  .sbox__input { font-size: 16px; }   /* 16px or more: iOS does not zoom in on focus */
  .sopt { padding: 8px 14px; gap: 12px; }
  .sbox__group, .sbox__note, .sbox__empty { padding-inline: 14px; }
  .sopt__chip { display: none; }
  .search-cats { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gut)); padding: 2px var(--gut) 6px; scrollbar-width: none; }
  .search-cats::-webkit-scrollbar { display: none; }
  .search-cat { flex: none; }
  .search-results > .search-cats { max-width: none; }
  .sres { gap: 14px; }
  .sres__av { width: 48px; height: 48px; font-size: 15px; }
  .sres__more { margin-left: 0; }
}

/* Header search icon, and the bar it opens under the header (includes/header.php) */
.hsearch-toggle {
  margin-left: auto; flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.hsearch-toggle:hover, .hsearch-toggle[aria-expanded="true"] { background: rgba(35,46,39,.05); color: var(--brand); }
.site-header__inner > .primary-nav { margin-left: 0; }
.hsearch {
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(255,255,255,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 14px 0 16px;
}
.hsearch[hidden] { display: none; }
.hsearch__inner { display: flex; justify-content: center; }
.site-header.has-search { background: rgba(255,255,255,.97); border-bottom-color: var(--line-soft); }
@media (max-width: 760px) {
  .hsearch-toggle { width: 44px; height: 44px; border-color: var(--line); background: var(--surface); border-radius: var(--r-sm); margin-right: -10px; }
  .brand__text { white-space: nowrap; }
}
@media (max-width: 420px) {
  .brand { gap: 9px; }
  .brand__mark svg { width: 34px; height: 34px; }
  .brand__name { font-size: 17px; }
  .brand__tag { font-size: 9px; letter-spacing: .16em; }
}

/* The search box in the browse tools (/categories/), and the dropdowns on their own on the home page */
.browse-tools { position: relative; z-index: 20; }   /* the suggestions open over the cards below */
.sbox--compact { max-width: none; }
.sbox--compact .sbox__bar { height: 52px; border-color: var(--line); box-shadow: var(--shadow-sm); padding-left: 18px; }
.sbox--compact.is-open .sbox__bar { border-radius: 26px 26px 0 0; }
.sbox--compact .sbox__input { font-size: 16px; }
.sbox--compact .sbox__go { width: 40px; height: 40px; }
.browse-tools--filters { grid-template-columns: auto auto; justify-content: start; }
@media (max-width: 620px) { .browse-tools--filters { grid-template-columns: 1fr; } }

/* ============================================================================
   COUNTRIES (Oct 2026): the round-flag switcher in the header, and the country chooser that is the
   front page of a site serving more than one country (includes/markets.php, includes/market-chooser.php)
   ========================================================================== */
.flag { display: block; flex: none; border-radius: 50%; }
.mkt { position: relative; margin-left: auto; margin-right: -12px; flex: none; }
.mkt ~ .hsearch-toggle { margin-left: 0; }
.mkt__btn {
  list-style: none; display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 8px 0 10px;
  border-radius: 999px; cursor: pointer; color: var(--muted); transition: background .2s, color .2s;
}
.mkt__btn::-webkit-details-marker { display: none; }
.mkt__btn::marker { content: ""; }
.mkt__btn:hover, .mkt[open] .mkt__btn { background: rgba(35,46,39,.05); color: var(--text); }
.mkt__caret { transition: transform .2s var(--ease); }
.mkt[open] .mkt__caret { transform: rotate(180deg); }
.mkt__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; list-style: none; margin: 0; padding: 6px;
  min-width: 248px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg);
}
.mkt__menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text); font-size: 15.5px; }
.mkt__menu a:hover { background: var(--hover); color: var(--text); }
.mkt__menu a[aria-current="true"] { background: var(--brand-soft); }
.mkt__name { flex: 1; font-weight: 600; white-space: nowrap; }
.mkt__menu { width: max-content; max-width: calc(100vw - 24px); }
.mkt__soon, .mkt__here { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; }
.mkt__here { color: var(--brand); }

@media (max-width: 760px) {
  .site-header__inner { gap: 10px; }
  .mkt { margin-right: 0; }
  .mkt__btn { height: 44px; padding: 0 6px; gap: 2px; }
  .mkt__caret { width: 10px; height: 10px; }
  .hsearch-toggle { margin-right: 0; }
}
@media (max-width: 420px) {
  .site-header__inner { gap: 6px; }
  .mkt__btn .flag { width: 22px; height: 22px; }
  .mkt__menu { right: -96px; }          /* the list opens under the flag without running off the screen */
}
@media (max-width: 380px) {
  .mkt__caret { display: none; }        /* the flag alone on the narrowest phones */
  .mkt__btn { padding: 0 4px; }
  .brand__name { font-size: 16px; }
}

/* The country chooser (bestrated.company/) */
.chooser { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(40px, 7vw, 88px); padding-bottom: clamp(56px, 8vw, 110px); }
.chooser .wordmark { margin-bottom: 18px; }
.chooser__h1 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.02em; }
.chooser__lede { margin-top: 12px; max-width: 54ch; color: var(--muted); font-size: 17px; }
.chooser__list { list-style: none; padding: 0; margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 20px; justify-content: center; width: 100%; }
.chooser__card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 18px 22px; height: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--text);
  box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.chooser__card:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow-card); color: var(--text); }
.chooser__card .flag { margin-bottom: 10px; box-shadow: 0 6px 16px -8px rgba(60,45,20,.45); }
.chooser__name { font-weight: 700; font-size: 19px; }
.chooser__status { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.chooser__card--soon .chooser__status { color: var(--gold-deep); }
.chooser__site { font-size: 13.5px; color: var(--muted-2); }
@media (max-width: 700px) {
  .chooser__list { grid-template-columns: 1fr; max-width: 340px; }
  .chooser__card { flex-direction: row; text-align: left; padding: 16px 18px; gap: 14px; flex-wrap: wrap; }
  .chooser__card .flag { width: 48px; height: 48px; margin: 0; }
  .chooser__name { flex: 1; }
  .chooser__site { width: 100%; padding-left: 62px; margin-top: -6px; }
}