/* ==========================================================================
   Buzz homepage (shared by every town). Bright, airy, imagery-forward layout
   in the spirit of Horizon West Happenings. Colors come only from the town
   palette tokens injected by the server (sitePaletteTokens), so each town
   looks identical apart from its palette, logo, photos, and content.
   Every rule is scoped to `P` so it outranks older homepage rules in styles.css
   (including the per-town html[data-site-slug] blocks).
   ========================================================================== */

body.hv {
  --hv-ink: #17212b;
  --hv-text: #344054;
  --hv-muted: #5d6b7a;
  --hv-line: #e7ebf0;
  --hv-surface: #ffffff;
  --hv-soft: #f6f8fa;
  --hv-radius: 18px;
  --hv-radius-sm: 12px;
  --hv-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 10px 28px rgba(16, 24, 40, 0.07);
  --hv-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.06), 0 18px 40px rgba(16, 24, 40, 0.12);
  --hv-gap: 22px;
  --hv-primary: var(--buzz-primary, #ea580c);
  --hv-primary-strong: var(--buzz-primary-strong, #c2410c);
  --hv-primary-dark: var(--buzz-primary-dark, #a7380a);
  --hv-primary-hover: var(--buzz-primary-hover, #c2410c);
  --hv-primary-soft: var(--buzz-primary-soft, #fde3d4);
  --hv-primary-tint: var(--buzz-primary-tint, #fef5f0);
  --hv-primary-rgb: var(--buzz-primary-rgb, 234, 88, 12);
  --hv-on-primary: var(--buzz-on-primary, #ffffff);
  --hv-accent: var(--buzz-accent, #1e88c8);
  --hv-accent-strong: var(--buzz-accent-strong, #1b7ab4);
  --hv-accent-soft: var(--buzz-accent-soft, #cfe6f4);
  --hv-accent-tint: var(--buzz-accent-tint, #edf6fb);
  --hv-accent-rgb: var(--buzz-accent-rgb, 30, 136, 200);
}

html:root body.hv {
  color: var(--hv-text);
  background: #fff;
}

html:root body.hv main {
  overflow-x: clip;
}

html:root body.hv a:focus-visible,
html:root body.hv button:focus-visible,
html:root body.hv input:focus-visible,
html:root body.hv select:focus-visible {
  outline: 3px solid var(--hv-accent);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */
html:root body.hv .button-primary,
html:root body.hv .button-accent {
  border-color: var(--hv-primary);
  background: var(--hv-primary);
  color: var(--hv-on-primary);
  box-shadow: 0 6px 16px rgba(var(--hv-primary-rgb), 0.24);
}

html:root body.hv .button-primary:hover,
html:root body.hv .button-accent:hover,
html:root body.hv .button-primary:focus-visible,
html:root body.hv .button-accent:focus-visible {
  border-color: var(--hv-primary-hover);
  background: var(--hv-primary-hover);
  color: #fff;
}

html:root body.hv .button-outline {
  border: 1.5px solid var(--hv-primary);
  background: #fff;
  color: var(--hv-primary-strong);
  box-shadow: none;
}

html:root body.hv .button-outline:hover,
html:root body.hv .button-outline:focus-visible {
  border-color: var(--hv-primary-strong);
  background: var(--hv-primary-tint);
  color: var(--hv-primary-strong);
}

html:root body.hv .home-pill {
  min-height: 46px;
  padding: 0 1.6rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* ---------- Header ---------- */
html:root body.hv .site-header {
  border-bottom: 1px solid var(--hv-line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
  backdrop-filter: saturate(1.4) blur(10px);
}

html:root body.hv .main-nav a {
  color: var(--hv-ink);
}

html:root body.hv .main-nav a:hover,
html:root body.hv .main-nav a:focus-visible {
  color: var(--hv-primary-strong);
}

html:root body.hv .site-header .button-primary {
  border-radius: 999px;
}

/* ---------- Hero ---------- */
html:root body.hv .hero {
  position: relative;
  display: flex;
  min-height: 560px;
  align-items: center;
  overflow: hidden;
  background: var(--hv-primary);
}

html:root body.hv .hero-carousel,
html:root body.hv .hero-carousel.hero-carousel-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--hv-primary), var(--hv-accent));
}

html:root body.hv .hero-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: none;
}

html:root body.hv .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(105deg, rgba(var(--hv-primary-rgb), 0.82) 0%, rgba(var(--hv-primary-rgb), 0.48) 45%, rgba(var(--hv-accent-rgb), 0.45) 100%),
    linear-gradient(0deg, rgba(10, 16, 24, 0.34) 0%, rgba(10, 16, 24, 0.08) 60%);
}

html:root body.hv .hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 72px 0 112px;
  text-align: center;
}

html:root body.hv .hero-copy {
  display: grid;
  max-width: 820px;
  justify-items: center;
  gap: 0;
  color: #fff;
}

html:root body.hv .hero-domain-pill {
  display: none;
}

html:root body.hv .hero-kicker {
  display: inline-flex;
  margin: 0 0 14px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

html:root body.hv .hero h1 {
  max-width: 16ch;
  margin: 0;
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(2.5rem, 5.2vw, 4.25rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
  text-transform: none;
  text-wrap: balance;
}

html:root body.hv .hero-copy > p:not(.hero-kicker) {
  max-width: 600px;
  margin: 16px auto 26px;
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.55;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}

html:root body.hv .hero-search {
  display: grid;
  width: min(100%, 640px);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  padding: 6px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(10, 16, 24, 0.24);
}

html:root body.hv .hero-search .search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 8px 0 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html:root body.hv .hero-search .field-icon {
  color: var(--hv-primary-strong);
}

html:root body.hv .hero-search input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--hv-ink);
  font-size: 1rem;
  outline: none;
}

html:root body.hv .hero-search input::placeholder {
  color: #6b7785;
}

html:root body.hv .hero-search .button {
  min-height: 50px;
  padding: 0 1.7rem;
  border-radius: 999px;
  font-size: 0.98rem;
}

html:root body.hv .hero-search:focus-within {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.45), 0 18px 44px rgba(10, 16, 24, 0.24);
}

html:root body.hv .hero-quick-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

html:root body.hv .hero-quick-links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, color 0.2s ease;
}

html:root body.hv .hero-quick-links a:hover,
html:root body.hv .hero-quick-links a:focus-visible {
  background: #fff;
  color: var(--hv-primary-strong);
}

html:root body.hv .hero-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 20px;
  width: auto;
  max-width: 100%;
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.86rem;
}

html:root body.hv .hero-proof span {
  display: inline-flex;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  white-space: nowrap;
}

html:root body.hv .hero-proof span + span::before {
  content: "•";
  margin-right: 14px;
  opacity: 0.7;
}

html:root body.hv .hero-proof strong {
  color: #fff;
  font-weight: 800;
}

html:root body.hv .hero-carousel-dots {
  bottom: 74px;
  z-index: 3;
}

html:root body.hv .home-wave {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 64px;
  pointer-events: none;
}

html:root body.hv .home-wave path {
  fill: #fff;
}

/* ---------- Quick paths (overlap the hero) ---------- */
html:root body.hv .home-paths {
  position: relative;
  z-index: 3;
  padding: 8px 0 8px;
  border: 0;
  background: transparent;
}

html:root body.hv .hero + .home-paths {
  margin-top: -56px;
}

html:root body.hv .home-paths-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

html:root body.hv .home-path-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 18px 20px;
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius);
  background: #fff;
  box-shadow: var(--hv-shadow);
  color: var(--hv-ink);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

html:root body.hv .home-path-card::before,
html:root body.hv .home-path-card::after {
  display: none;
}

html:root body.hv .home-path-card:hover,
html:root body.hv .home-path-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--hv-shadow-hover);
}

html:root body.hv .home-path-card > * {
  grid-area: auto;
  grid-row: auto;
  grid-column: auto;
  order: 0;
  margin: 0;
  text-align: left;
  justify-self: stretch;
}

html:root body.hv .home-path-card > .home-path-arrow {
  justify-self: end;
}

html:root body.hv .home-path-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 14px;
  background: var(--hv-primary-tint);
  color: var(--hv-primary-strong);
}

html:root body.hv .home-path-card:nth-child(2) .home-path-icon {
  background: var(--hv-accent-tint);
  color: var(--hv-accent-strong);
}

html:root body.hv .home-path-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html:root body.hv .home-path-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

html:root body.hv .home-path-label {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--hv-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html:root body.hv .home-path-copy strong {
  color: var(--hv-ink);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.25;
}

html:root body.hv .home-path-copy small {
  color: var(--hv-muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

html:root body.hv .home-path-arrow {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--hv-soft);
  color: var(--hv-primary-strong);
  font-size: 1rem;
  font-weight: 700;
}

/* ---------- Sections and headings ---------- */
html:root body.hv .section {
  position: relative;
  padding: 48px 0;
  border: 0;
  background: #fff;
}

html:root body.hv .home-paths + .section {
  padding-top: 36px;
}

html:root body.hv .home-section-head {
  display: grid;
  max-width: 680px;
  margin: 0 auto 20px;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

html:root body.hv .home-section-head::before,
html:root body.hv .home-section-head::after {
  display: none;
}

html:root body.hv .home-section-head,
html:root body.hv .home-featured-head {
  padding: 0;
  border: 0;
  background: none;
}

html:root body.hv .home-section-head h2,
html:root body.hv .home-jobs-copy h2,
html:root body.hv .pricing-home-cta h2 {
  margin: 0;
  color: var(--hv-primary-strong);
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: none;
  text-wrap: balance;
}

html:root body.hv .home-section-head p {
  max-width: 560px;
  margin: 0;
  color: var(--hv-muted);
  font-size: 1.02rem;
  line-height: 1.55;
}

html:root body.hv .eyebrow {
  margin: 0 0 6px;
  color: var(--hv-accent-strong);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html:root body.hv .home-section-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
  margin-top: 20px;
}

html:root body.hv .home-text-link {
  color: var(--hv-primary-strong);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(var(--hv-primary-rgb), 0.35);
}

html:root body.hv .home-text-link:hover {
  text-decoration-color: currentColor;
}

/* Tinted band with wavy edges (Featured businesses). */
html:root body.hv .home-band {
  margin: 20px 0;
  background: var(--hv-primary-tint);
}

html:root body.hv .home-band::before,
html:root body.hv .home-band::after {
  position: absolute;
  right: 0;
  left: 0;
  height: 28px;
  background: var(--hv-primary-tint);
  content: "";
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 30C240 4 480 0 720 18s480 30 720 6v24H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 30C240 4 480 0 720 18s480 30 720 6v24H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

html:root body.hv .home-band::before {
  top: -27px;
}

html:root body.hv .home-band::after {
  bottom: -27px;
  transform: scaleY(-1);
}

html:root body.hv .home-band + .section {
  padding-top: 44px;
}

/* ---------- Carousels (events, news, businesses) ---------- */
html:root body.hv .home-events-shell,
html:root body.hv .home-news-shell,
html:root body.hv .home-featured-shell,
html:root body.hv .home-paid-events-shell {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
}

/* Arrows sit in a gutter beside the cards instead of covering them. */
html:root body.hv .home-events-shell {
  padding: 0 46px;
}

/* Older styles.css paints a fade strip on the right of the track. */
html:root body.hv .home-events-shell::before,
html:root body.hv .home-events-shell::after,
html:root body.hv .home-news-shell::before,
html:root body.hv .home-news-shell::after,
html:root body.hv .home-featured-shell::before,
html:root body.hv .home-featured-shell::after,
html:root body.hv .home-paid-events-shell::before,
html:root body.hv .home-paid-events-shell::after {
  display: none;
  content: none;
  background: none;
}

html:root body.hv .home-events-shell[hidden],
html:root body.hv .home-news-shell[hidden],
html:root body.hv .home-featured-shell[hidden] {
  display: none;
}

html:root body.hv .home-event-grid,
html:root body.hv .home-news-list,
html:root body.hv .home-featured-track,
html:root body.hv .home-paid-event-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  gap: var(--hv-gap);
  margin: 0;
  padding: 2px 0 6px;
  align-items: stretch;
  background: transparent;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding: 0 2px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask: none;
  mask: none;
}

html:root body.hv .home-event-grid {
  /* Room inside the scrollport so the first/last card shadow and border aren't clipped. */
  grid-auto-columns: calc((100% - 3 * var(--hv-gap)) / 4);
  padding: 12px 14px 22px;
  scroll-padding-inline: 14px;
  scroll-padding-block: 12px;
}
html:root body.hv .home-featured-track { grid-auto-columns: calc((100% - 3 * var(--hv-gap)) / 4); }
html:root body.hv .home-news-list { grid-auto-columns: calc((100% - 2 * var(--hv-gap)) / 3); }
html:root body.hv .home-paid-event-grid { grid-auto-columns: calc((100% - 2 * var(--hv-gap)) / 3); }

html:root body.hv .home-event-grid.is-centered,
html:root body.hv .home-news-list.is-centered,
html:root body.hv .home-featured-track.is-centered {
  justify-content: center;
  width: auto;
  margin-inline: 0;
}

/* Fewer cards than fit in one view: center them instead of leaving a gap. */
html:root body.hv .home-featured-track:not(:has(> :nth-child(5))),
html:root body.hv .home-event-grid:not(:has(> :nth-child(5))),
html:root body.hv .home-news-list:not(:has(> :nth-child(4))) {
  justify-content: center;
}

html:root body.hv .home-event-grid > *,
html:root body.hv .home-news-list > *,
html:root body.hv .home-featured-track > *,
html:root body.hv .home-paid-event-grid > * {
  scroll-snap-align: start;
}

html:root body.hv .carousel-button {
  position: absolute;
  top: 30%;
  z-index: 4;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0 0 3px;
  border: 0;
  border-radius: 999px;
  background: var(--hv-primary);
  color: var(--hv-on-primary);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(var(--hv-primary-rgb), 0.32);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.2s ease, opacity 0.2s ease;
}

html:root body.hv .carousel-button[hidden] {
  display: none;
}

html:root body.hv .carousel-button:hover:not(:disabled) {
  background: var(--hv-primary-hover);
  transform: translateY(-50%);
}

html:root body.hv .carousel-button:disabled {
  opacity: 0.35;
  cursor: default;
}

html:root body.hv #home-featured-prev,
html:root body.hv #home-events-prev,
html:root body.hv #home-news-prev,
html:root body.hv #home-paid-events-prev {
  left: 0;
  right: auto;
}

html:root body.hv #home-featured-next,
html:root body.hv #home-events-next,
html:root body.hv #home-news-next,
html:root body.hv #home-paid-events-next {
  right: 0;
  left: auto;
}

/* ---------- Shared card surface ---------- */
html:root body.hv .home-event-card,
html:root body.hv .home-paid-event-card,
html:root body.hv .home-news-card,
html:root body.hv .home-business-card {
  position: relative;
  align-self: stretch;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius);
  background: #fff;
  box-shadow: var(--hv-shadow);
  transform: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

html:root body.hv .home-event-card::before,
html:root body.hv .home-event-card::after,
html:root body.hv .home-paid-event-card::before,
html:root body.hv .home-paid-event-card::after,
html:root body.hv .home-news-card::before,
html:root body.hv .home-news-card::after,
html:root body.hv .home-business-card::before,
html:root body.hv .home-business-card::after {
  display: none;
  content: none;
}

html:root body.hv .home-event-card:hover,
html:root body.hv .home-paid-event-card:hover,
html:root body.hv .home-news-card:hover,
html:root body.hv .home-business-card:hover,
html:root body.hv .home-event-card:focus-within,
html:root body.hv .home-paid-event-card:focus-within,
html:root body.hv .home-news-card:focus-within {
  transform: none;
  box-shadow: var(--hv-shadow-hover);
}

html:root body.hv .home-event-card > a,
html:root body.hv .home-paid-event-card > a,
html:root body.hv .home-news-card > a {
  display: flex;
  height: 100%;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

/* ---------- Event cards ---------- */
html:root body.hv .home-event-media,
html:root body.hv .home-paid-event-media {
  position: relative;
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--hv-primary-tint);
}

html:root body.hv .home-event-media::before,
html:root body.hv .home-event-media::after,
html:root body.hv .home-paid-event-media::before,
html:root body.hv .home-paid-event-media::after {
  display: none;
}

html:root body.hv .home-event-media img,
html:root body.hv .home-paid-event-media img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  object-fit: cover;
  object-position: center;
  filter: none;
  opacity: 1;
  transition: transform 0.45s ease;
}

html:root body.hv .home-event-card:hover .home-event-media img,
html:root body.hv .home-paid-event-card:hover .home-paid-event-media img,
html:root body.hv .home-news-card:hover .home-news-media img {
  transform: scale(1.04);
}

html:root body.hv .home-event-card.is-default-image .home-event-media img,
html:root body.hv .home-paid-event-card.is-default-image .home-paid-event-media img {
  display: none;
}

html:root body.hv .home-event-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: var(--hv-primary-strong);
  background-color: color-mix(in srgb, var(--hv-primary) 10%, #fff);
  background-image:
    radial-gradient(circle at 100% 0%, rgba(var(--hv-primary-rgb), 0.16), transparent 46%),
    radial-gradient(rgba(var(--hv-primary-rgb), 0.28) 1px, transparent 1.2px);
  background-size: auto, 18px 18px;
}

html:root body.hv .home-event-fallback[data-tone="music"],
html:root body.hv .home-event-fallback[data-tone="food"],
html:root body.hv .home-event-fallback[data-tone="arts"] {
  color: var(--hv-accent-strong);
  background-color: color-mix(in srgb, var(--hv-accent) 12%, #fff);
  background-image:
    radial-gradient(circle at 0% 100%, rgba(var(--hv-accent-rgb), 0.18), transparent 48%),
    radial-gradient(rgba(var(--hv-accent-rgb), 0.3) 1px, transparent 1.2px);
}

html:root body.hv .home-event-fallback[data-tone="family"],
html:root body.hv .home-event-fallback[data-tone="market"] {
  color: var(--hv-primary-strong);
  background-color: color-mix(in srgb, var(--hv-accent) 8%, var(--hv-primary-tint));
  background-image:
    radial-gradient(circle at 80% 0%, rgba(var(--hv-accent-rgb), 0.16), transparent 42%),
    repeating-linear-gradient(135deg, rgba(var(--hv-primary-rgb), 0.08) 0 1px, transparent 1px 14px);
}

html:root body.hv .is-default-image .home-event-fallback {
  display: flex;
}

html:root body.hv .home-event-fallback-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.08);
  color: inherit;
}

html:root body.hv .home-event-fallback-icon svg {
  width: 28px;
  height: 28px;
}

html:root body.hv .home-event-fallback-label {
  display: none;
}

html:root body.hv .home-event-date {
  position: absolute;
  top: 12px;
  right: auto;
  bottom: auto;
  left: 12px;
  z-index: 2;
  display: grid;
  width: 56px;
  min-width: 0;
  height: auto;
  justify-items: center;
  gap: 1px;
  padding: 7px 0 8px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(10, 16, 24, 0.18);
  color: var(--hv-ink);
  line-height: 1;
  text-align: center;
}

html:root body.hv .home-event-date::before,
html:root body.hv .home-event-date::after {
  display: none;
}

html:root body.hv .home-event-date span {
  color: var(--hv-primary-strong);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html:root body.hv .home-event-date strong {
  color: var(--hv-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.05;
}

html:root body.hv .home-event-date small {
  color: var(--hv-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html:root body.hv .home-event-copy,
html:root body.hv .home-paid-event-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
  background: none;
}

html:root body.hv .home-event-copy h3,
html:root body.hv .home-paid-event-copy h3,
html:root body.hv .home-news-copy h3 {
  display: -webkit-box;
  min-height: 2.7em;
  margin: 0;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
  color: var(--hv-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-transform: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html:root body.hv .home-event-time {
  order: -1;
  margin: 0;
  color: var(--hv-primary-strong);
  font-size: 0.8rem;
  font-weight: 700;
}

html:root body.hv .home-event-copy h3 + .home-event-time {
  order: -1;
}

html:root body.hv .home-event-venue {
  overflow: hidden;
  min-height: 1.3em;
  margin: 0;
  color: var(--hv-muted);
  font-size: 0.86rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html:root body.hv .home-event-copy > p,
html:root body.hv .home-paid-event-copy > p {
  display: none;
}

html:root body.hv .home-event-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border: 0;
}

html:root body.hv .home-event-category,
html:root body.hv .home-news-category,
html:root body.hv .home-job-category,
html:root body.hv .home-event-placement-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--hv-accent-tint);
  color: var(--hv-accent-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

html:root body.hv .home-event-category {
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html:root body.hv .home-event-action {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--hv-primary-strong);
  font-size: 0.86rem;
  font-weight: 700;
}

html:root body.hv .home-event-action::after {
  content: " →";
}

/* Promoted events strip */
html:root body.hv .home-paid-events-panel {
  margin: 0 0 34px;
  padding: 22px 24px 8px;
  border: 1px solid var(--hv-primary-soft);
  border-radius: 22px;
  background: var(--hv-primary-tint);
  box-shadow: none;
}

html:root body.hv .home-paid-events-panel[hidden] {
  display: none;
}

html:root body.hv .home-paid-events-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 14px;
}

html:root body.hv .home-paid-events-head h3 {
  margin: 0;
  color: var(--hv-ink);
  font-size: 1.15rem;
}

html:root body.hv .home-paid-events-head a {
  color: var(--hv-primary-strong);
  font-weight: 700;
}

html:root body.hv .home-event-placement-tag {
  align-self: flex-start;
  background: var(--hv-primary-soft);
  color: var(--hv-primary-strong);
}

/* ---------- News cards ---------- */
html:root body.hv .home-news-media {
  position: relative;
  aspect-ratio: 16 / 10;
  height: auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--hv-soft);
}

html:root body.hv .home-news-media::before,
html:root body.hv .home-news-media::after {
  display: none;
}

html:root body.hv .home-news-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  object-fit: cover;
  object-position: center;
  filter: none;
  transition: transform 0.45s ease;
}

html:root body.hv .home-news-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
}

html:root body.hv .home-news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
}

html:root body.hv .home-news-source {
  padding: 0;
  border: 0;
  background: none;
  color: var(--hv-muted);
  font-size: 0.76rem;
  font-weight: 600;
}

html:root body.hv .home-news-copy h3 {
  font-size: 1.08rem;
  -webkit-line-clamp: 3;
}

html:root body.hv .home-news-copy > p {
  display: none;
}

html:root body.hv .home-news-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 6px;
  border: 0;
  color: var(--hv-muted);
  font-size: 0.82rem;
}

html:root body.hv .home-news-footer > span {
  color: var(--hv-primary-strong);
  font-weight: 700;
}

html:root body.hv .home-news-footer > span::after {
  content: " →";
}

/* ---------- Featured business cards ---------- */
html:root body.hv .home-featured-section {
  padding: 40px 0 36px;
}

html:root body.hv .home-business-card {
  display: flex;
  min-height: 0;
}

html:root body.hv .home-business-copy h3,
html:root body.hv .home-news-copy h3 {
  min-height: 0;
}

html:root body.hv .home-business-card-inner {
  display: flex;
  width: 100%;
  flex-direction: column;
  padding: 0;
  border: 0;
  background: none;
}

html:root body.hv .home-business-media {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

html:root body.hv .home-business-cover {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 85% 10%, rgba(255, 255, 255, 0.35), transparent 40%),
    linear-gradient(135deg, var(--hv-primary-soft) 0%, var(--hv-accent-soft) 100%);
}

html:root body.hv .home-business-cover-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

html:root body.hv .home-business-cover-fallback {
  position: absolute;
  inset: 0;
  background: none;
}

html:root body.hv .home-business-logo-plate {
  position: absolute;
  top: auto;
  right: auto;
  bottom: -30px;
  left: 50%;
  z-index: 2;
  display: grid;
  width: 112px;
  height: 64px;
  min-height: 0;
  place-items: center;
  margin: 0;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid var(--hv-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.12);
  color: var(--hv-primary-strong);
  font-size: 1.2rem;
  font-weight: 800;
  transform: translateX(-50%);
}

html:root body.hv .home-business-logo-plate img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

html:root body.hv .home-business-placeholder {
  color: var(--hv-primary-strong);
  font-size: 1.2rem;
  font-weight: 800;
}

html:root body.hv .home-business-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 2;
}

html:root body.hv .home-business-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 42px 18px 18px;
  text-align: center;
}

html:root body.hv .home-business-copy h3 {
  margin: 0;
  color: var(--hv-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
}

html:root body.hv .home-business-category {
  margin: 0;
  color: var(--hv-accent-strong);
  font-size: 0.8rem;
  font-weight: 700;
}

html:root body.hv .home-business-description {
  display: -webkit-box;
  min-height: 2.7em;
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--hv-muted);
  font-size: 0.86rem;
  line-height: 1.38;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html:root body.hv .home-business-tags,
html:root body.hv .home-business-social-actions,
html:root body.hv .home-business-social-cta,
html:root body.hv .home-business-facebook-cta,
html:root body.hv .home-business-instagram-cta {
  display: none;
}

html:root body.hv .home-business-more {
  order: 9;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--hv-primary-strong);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
  cursor: pointer;
}

html:root body.hv .home-business-actions {
  display: flex;
  width: 100%;
  margin-top: auto;
  padding-top: 12px;
}

html:root body.hv .home-business-cta {
  display: inline-flex;
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  border: 1.5px solid var(--hv-primary);
  border-radius: 999px;
  background: #fff;
  color: var(--hv-primary-strong);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
}

html:root body.hv .home-business-cta:hover,
html:root body.hv .home-business-cta:focus-visible {
  background: var(--hv-primary);
  color: var(--hv-on-primary);
}

html:root body.hv .home-business-cta svg {
  width: 14px;
  height: 14px;
}

/* ---------- New in town ----------
   Image-forward cards like the featured businesses: a big media panel (cover
   photo, logo on a soft panel, or branded initials), then category, the full
   name (wraps, never truncated), a short description, and the join date. */
html:root body.hv .home-new-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hv-gap);
}

html:root body.hv .home-new-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius);
  background: #fff;
  box-shadow: var(--hv-shadow);
  color: var(--hv-ink);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

html:root body.hv .home-new-card:hover,
html:root body.hv .home-new-card:focus-visible {
  border-color: rgba(var(--hv-primary-rgb), 0.35);
  box-shadow: var(--hv-shadow-hover);
  transform: translateY(-3px);
}

html:root body.hv .home-new-media {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 10;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--hv-primary-tint), var(--hv-accent-tint));
}

html:root body.hv .home-new-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

html:root body.hv .home-new-card:hover .home-new-cover {
  transform: scale(1.04);
}

html:root body.hv .home-new-logo-chip {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: grid;
  width: 56px;
  height: 56px;
  padding: 6px;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(10, 16, 24, 0.2);
}

html:root body.hv .home-new-logo-chip img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

html:root body.hv .home-new-logo-stage {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 20px 26px;
  place-items: center;
}

html:root body.hv .home-new-logo-stage img {
  max-width: min(80%, 220px);
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(16, 24, 40, 0.1));
}

html:root body.hv .home-new-media.has-fallback {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(var(--hv-accent-rgb), 0.85) 0%, rgba(var(--hv-accent-rgb), 0) 60%),
    linear-gradient(135deg, var(--hv-primary), var(--hv-primary-strong));
}

html:root body.hv .home-new-initials {
  display: grid;
  width: 84px;
  height: 84px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

html:root body.hv .home-new-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--hv-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(10, 16, 24, 0.18);
}

html:root body.hv .home-new-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  padding: 16px 18px 16px;
}

html:root body.hv .home-new-chip {
  display: inline-flex;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--hv-primary-tint);
  color: var(--hv-primary-strong);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.4;
}

html:root body.hv .home-new-name {
  color: var(--hv-ink);
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.28;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

html:root body.hv .home-new-card:hover .home-new-name {
  color: var(--hv-primary-strong);
}

html:root body.hv .home-new-desc {
  display: -webkit-box;
  overflow: hidden;
  color: var(--hv-text);
  font-size: 0.9rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html:root body.hv .home-new-meta {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--hv-line);
  color: var(--hv-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

html:root body.hv .home-new-go {
  color: var(--hv-primary-strong);
  font-weight: 800;
  white-space: nowrap;
}

html:root body.hv .home-new-card-cta {
  border: 2px dashed rgba(var(--hv-primary-rgb), 0.38);
  background: linear-gradient(170deg, var(--hv-primary-tint), #fff 65%);
  box-shadow: none;
}

html:root body.hv .home-new-media.has-invite {
  background:
    radial-gradient(90% 90% at 50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(135deg, var(--hv-primary-soft), var(--hv-accent-soft));
}

html:root body.hv .home-new-plus {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border-radius: 50%;
  background: var(--hv-primary);
  color: var(--hv-on-primary);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(var(--hv-primary-rgb), 0.3);
}

/* The owner CTA always shows its full text. */
html:root body.hv .home-new-card-cta .home-new-desc {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

html:root body.hv .home-new-card-cta .home-new-chip {
  background: #fff;
}

html:root body.hv .home-new-card-cta .home-new-meta {
  border-top-color: rgba(var(--hv-primary-rgb), 0.2);
}

html:root body.hv .home-new-grid[data-count="0"] {
  grid-template-columns: minmax(0, 340px);
  justify-content: center;
}

html:root body.hv .home-new-grid[data-count="1"] {
  grid-template-columns: repeat(2, minmax(0, 300px));
  justify-content: center;
}

html:root body.hv .home-new-grid[data-count="2"] {
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: center;
}

/* ---------- Categories ---------- */
html:root body.hv .category-section {
  padding: 36px 0 32px;
  background: var(--hv-soft);
}

html:root body.hv .category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

html:root body.hv .category-grid[data-visible-tiles="1"] {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}

html:root body.hv .category-grid[data-visible-tiles="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html:root body.hv .category-grid[data-visible-tiles="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html:root body.hv .category-card {
  position: relative;
  display: grid;
  grid-column: auto;
  width: auto;
  min-width: 0;
  max-width: none;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 14px;
  min-height: 0;
  padding: 18px;
  border: 1px solid var(--hv-line);
  border-left: 1px solid var(--hv-line);
  border-radius: var(--hv-radius);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  color: var(--hv-ink);
  text-align: left;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

html:root body.hv .category-card[hidden] {
  display: none;
}

html:root body.hv .category-card::before,
html:root body.hv .category-card::after {
  display: none;
}

html:root body.hv .category-card:hover,
html:root body.hv .category-card:focus-visible {
  border-color: rgba(var(--hv-primary-rgb), 0.4);
  transform: translateY(-2px);
  box-shadow: var(--hv-shadow);
}

html:root body.hv .category-card > * {
  grid-area: auto;
  justify-self: start;
  text-align: left;
}

html:root body.hv .category-card > h3,
html:root body.hv .category-card > p {
  grid-column: 2;
}

html:root body.hv .category-icon {
  display: grid;
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  margin: 0;
  place-items: center;
  border-radius: 14px;
  background: var(--hv-primary-tint);
  color: var(--hv-primary-strong);
  font-size: 1.35rem;
}

html:root body.hv .category-card:nth-child(even) .category-icon {
  background: var(--hv-accent-tint);
  color: var(--hv-accent-strong);
}

html:root body.hv .category-card h3 {
  margin: 0;
  color: var(--hv-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
}

html:root body.hv .category-card p {
  margin: 2px 0 0;
  color: var(--hv-muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

html:root body.hv .category-card-action {
  display: none;
}

/* ---------- Jobs ---------- */
html:root body.hv .home-jobs-section {
  padding: 36px 0 44px;
}

html:root body.hv .home-jobs-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 48px;
  padding: 44px;
  border: 0;
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.7), transparent 40%),
    var(--hv-accent-tint);
  box-shadow: none;
}

html:root body.hv .home-jobs-band::before,
html:root body.hv .home-jobs-band::after {
  display: none;
}

html:root body.hv .home-jobs-copy {
  display: grid;
  gap: 10px;
  justify-items: start;
}

html:root body.hv .home-jobs-copy > p:not(.eyebrow) {
  margin: 0;
  color: var(--hv-text);
  font-size: 1.02rem;
  line-height: 1.6;
}

html:root body.hv .home-jobs-proof {
  display: none;
}

html:root body.hv .home-jobs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

html:root body.hv .home-jobs-panel {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

html:root body.hv .home-jobs-panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 12px;
}

html:root body.hv .home-jobs-panel-head span {
  display: block;
  color: var(--hv-muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html:root body.hv .home-jobs-panel-head strong {
  color: var(--hv-ink);
  font-size: 1.1rem;
}

html:root body.hv .home-jobs-panel-head a {
  color: var(--hv-primary-strong);
  font-weight: 700;
}

html:root body.hv .home-jobs-preview {
  display: grid;
  gap: 12px;
}

html:root body.hv .home-job-card {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius);
  background: #fff;
  box-shadow: var(--hv-shadow);
}

html:root body.hv .home-job-card::before,
html:root body.hv .home-job-card::after {
  display: none;
}

html:root body.hv .home-job-card h3 {
  margin: 0;
  color: var(--hv-ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
}

html:root body.hv .home-job-card p {
  margin: 0;
  color: var(--hv-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

html:root body.hv .home-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: var(--hv-text);
  font-size: 0.88rem;
}

html:root body.hv .home-job-meta small {
  margin-right: 4px;
  color: var(--hv-muted);
}

html:root body.hv .home-job-flow {
  display: flex;
  gap: 8px;
}

html:root body.hv .home-job-flow strong {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: var(--hv-accent-tint);
  color: var(--hv-accent-strong);
  font-size: 0.8rem;
  font-weight: 700;
}

html:root body.hv .home-job-link {
  justify-self: start;
  color: var(--hv-primary-strong);
  font-weight: 700;
  text-decoration: none;
}

html:root body.hv .home-job-link:hover {
  text-decoration: underline;
}

/* ---------- Advertise CTA ---------- */
html:root body.hv .home-advertise-section {
  padding: 8px 0 56px;
}

html:root body.hv .pricing-home-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  padding: 48px 52px;
  overflow: hidden;
  border: 0;
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% -10%, rgba(255, 255, 255, 0.26), transparent 38%),
    radial-gradient(circle at 4% 110%, rgba(255, 255, 255, 0.14), transparent 40%),
    linear-gradient(120deg, var(--hv-primary-strong) 0%, var(--hv-primary) 100%);
  box-shadow: 0 24px 50px rgba(var(--hv-primary-rgb), 0.25);
  color: #fff;
}

html:root body.hv .pricing-home-cta::before,
html:root body.hv .pricing-home-cta::after {
  display: none;
}

html:root body.hv .pricing-home-cta .cta-icon {
  display: none;
}

html:root body.hv .pricing-home-cta .cta-copy {
  display: grid;
  gap: 8px;
}

html:root body.hv .pricing-home-cta .eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}

html:root body.hv .pricing-home-cta h2 {
  color: #fff;
}

html:root body.hv .pricing-home-cta .cta-copy p:not(.eyebrow) {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.04rem;
  line-height: 1.55;
}

html:root body.hv .pricing-home-cta .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

html:root body.hv .pricing-home-cta .button-primary {
  border-color: #fff;
  background: #fff;
  color: var(--hv-primary-strong);
  box-shadow: 0 8px 20px rgba(10, 16, 24, 0.16);
}

html:root body.hv .pricing-home-cta .button-primary:hover,
html:root body.hv .pricing-home-cta .button-primary:focus-visible {
  background: var(--hv-primary-tint);
  color: var(--hv-primary-dark);
}

html:root body.hv .pricing-home-cta .button-outline {
  border-color: rgba(255, 255, 255, 0.75);
  background: transparent;
  color: #fff;
}

html:root body.hv .pricing-home-cta .button-outline:hover,
html:root body.hv .pricing-home-cta .button-outline:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

html:root body.hv .pricing-home-cta a:focus-visible {
  outline-color: #fff;
}

/* ---------- Newsletter band (injected above the footer) ---------- */
html:root body.hv .buzz-newsletter {
  position: relative;
  padding: 64px 0;
  border: 0;
  background: var(--hv-accent-tint);
  color: var(--hv-ink);
}

html:root body.hv .buzz-newsletter::before {
  position: absolute;
  top: -39px;
  right: 0;
  left: 0;
  height: 40px;
  background: var(--hv-accent-tint);
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 30C240 4 480 0 720 18s480 30 720 6v24H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 30C240 4 480 0 720 18s480 30 720 6v24H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

html:root body.hv .buzz-newsletter .buzz-newsletter-kicker {
  color: var(--hv-accent-strong);
  opacity: 1;
}

html:root body.hv .buzz-newsletter h2 {
  color: var(--hv-ink);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.015em;
}

html:root body.hv .buzz-newsletter-copy p {
  color: var(--hv-text);
  opacity: 1;
}

html:root body.hv .buzz-newsletter-field {
  color: var(--hv-ink);
}

html:root body.hv .buzz-newsletter-field input {
  border: 1px solid #cfd8e3;
  border-radius: 12px;
  background: #fff;
  color: var(--hv-ink);
}

html:root body.hv .buzz-newsletter-submit {
  border-radius: 999px;
}

html:root body.hv .buzz-newsletter-status[data-tone="error"] {
  color: #b42318;
}

/* ---------- Footer ---------- */
html:root body.hv .site-footer {
  padding: 44px 0 36px;
  border-top: 1px solid var(--hv-line);
  background: #fff;
  color: var(--hv-muted);
}

html:root body.hv .site-footer-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto;
  align-items: start;
  gap: 32px 48px;
}

html:root body.hv .site-footer-brand {
  display: inline-block;
  margin-bottom: 12px;
}

html:root body.hv .site-footer-brand img {
  display: block;
  width: 168px;
  height: auto;
}

html:root body.hv .site-footer-legal {
  color: var(--hv-ink);
  font-weight: 700;
}

html:root body.hv .site-footer-meta,
html:root body.hv .site-footer-disclaimer {
  max-width: 520px;
  color: var(--hv-muted);
}

/* Homepage hero photo credit (CC license attribution), per town. */
html:root body.hv .site-footer-photo-credit {
  max-width: 520px;
  color: var(--hv-muted);
  font-size: 0.78rem;
}

html:root body.hv .site-footer-photo-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

html:root body.hv .hero-carousel-slide picture {
  display: contents;
}

html:root body.hv .site-footer-nav {
  display: grid;
  gap: 10px;
}

html:root body.hv .site-footer-nav a,
html:root body.hv .site-footer-links a {
  min-height: 0;
  color: var(--hv-ink);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
}

html:root body.hv .site-footer-links a.site-footer-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
}

html:root body.hv .site-footer-social span:not(.social-icon) {
  display: inline;
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
}

html:root body.hv .site-footer-social .social-icon {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
}

html:root body.hv .site-footer-nav a:hover,
html:root body.hv .site-footer-links a:hover {
  color: var(--hv-primary-strong);
}

html:root body.hv .site-footer-links {
  display: grid;
  justify-items: start;
  gap: 10px;
}

html:root body.hv .site-footer-links a,
html:root body.hv .site-footer-links a.site-footer-email {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

html:root body.hv .site-footer-social .social-icon {
  background: var(--hv-primary);
  color: var(--hv-on-primary);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  html:root body.hv .home-event-grid,
  html:root body.hv .home-featured-track {
    grid-auto-columns: calc((100% - 2 * var(--hv-gap)) / 3);
  }

  html:root body.hv .home-event-grid {
    padding: 12px 14px 22px;
    scroll-padding-inline: 14px;
  }

  html:root body.hv .home-new-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html:root body.hv #home-featured-prev,
  html:root body.hv #home-events-prev,
  html:root body.hv #home-news-prev,
  html:root body.hv #home-paid-events-prev {
    left: 0;
  }

  html:root body.hv #home-featured-next,
  html:root body.hv #home-events-next,
  html:root body.hv #home-news-next,
  html:root body.hv #home-paid-events-next {
    right: 0;
  }
}

@media (max-width: 860px) {
  body.hv {
    --hv-gap: 16px;
  }

  html:root body.hv .hero {
    min-height: 500px;
  }

  html:root body.hv .home-paths-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  html:root body.hv .home-news-list,
  html:root body.hv .home-paid-event-grid {
    grid-auto-columns: calc((100% - var(--hv-gap)) / 2);
  }

  html:root body.hv .category-grid,
  html:root body.hv .category-grid[data-visible-tiles] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  html:root body.hv .category-grid[data-visible-tiles="1"] {
    grid-template-columns: minmax(0, 1fr);
  }

  html:root body.hv .home-jobs-band {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px;
  }

  html:root body.hv .pricing-home-cta {
    grid-template-columns: 1fr;
    padding: 36px 32px;
  }

  html:root body.hv .site-footer-wrap {
    grid-template-columns: 1fr 1fr;
  }

  html:root body.hv .site-footer-copy {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  body.hv {
    --hv-gap: 14px;
  }

  html:root body.hv .container {
    width: calc(100% - 32px);
    max-width: none;
    margin-inline: auto;
  }

  html:root body.hv .hero {
    min-height: 0;
  }

  html:root body.hv .hero-grid {
    padding: 44px 0 84px;
  }

  html:root body.hv .hero-kicker {
    margin-bottom: 12px;
    font-size: 0.72rem;
  }

  html:root body.hv .hero h1 {
    font-size: clamp(2.1rem, 9.4vw, 2.6rem);
  }

  html:root body.hv .hero-copy > p:not(.hero-kicker) {
    margin: 12px auto 20px;
    font-size: 1rem;
  }

  html:root body.hv .hero-search {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 5px;
  }

  html:root body.hv .hero-search .search-field {
    min-height: 46px;
    padding-left: 14px;
  }

  html:root body.hv .hero-search input {
    font-size: 16px;
  }

  html:root body.hv .hero-search .button {
    min-height: 46px;
    padding: 0 1.1rem;
  }

  html:root body.hv .hero-quick-links {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: calc(100% + 2rem);
    margin: 16px -1rem 0;
    padding: 0 1rem 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  html:root body.hv .hero-quick-links::-webkit-scrollbar {
    display: none;
  }

  html:root body.hv .hero-quick-links a {
    flex: 0 0 auto;
  }

  html:root body.hv .hero-proof {
    gap: 4px 14px;
    font-size: 0.8rem;
  }

  html:root body.hv .hero-proof span + span::before {
    margin-right: 10px;
  }

  html:root body.hv .hero-proof span:nth-child(3) {
    display: none;
  }

  html:root body.hv .home-wave {
    height: 34px;
  }

  html:root body.hv .hero + .home-paths {
    margin-top: -36px;
  }

  /* Quick paths become a compact row of three icon tiles. */
  html:root body.hv .home-paths-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  html:root body.hv .home-path-card {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    padding: 14px 6px 12px;
    text-align: center;
  }

  html:root body.hv .home-path-card > * {
    justify-self: center;
    text-align: center;
  }

  html:root body.hv .home-path-icon {
    width: 42px;
    height: 42px;
  }

  html:root body.hv .home-path-label {
    color: var(--hv-ink);
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    text-transform: none;
  }

  html:root body.hv .home-path-copy strong,
  html:root body.hv .home-path-copy small,
  html:root body.hv .home-path-arrow {
    display: none;
  }

  html:root body.hv .section {
    padding: 36px 0;
  }

  html:root body.hv .home-paths + .section {
    padding-top: 28px;
  }

  html:root body.hv .home-events-shell,
  html:root body.hv .home-news-shell,
  html:root body.hv .home-featured-shell,
  html:root body.hv .home-paid-events-shell {
    padding: 0;
  }

  html:root body.hv .category-section {
    padding: 28px 0 24px;
  }

  html:root body.hv .home-section-head {
    margin-bottom: 22px;
  }

  html:root body.hv .home-section-head h2,
  html:root body.hv .home-jobs-copy h2,
  html:root body.hv .pricing-home-cta h2 {
    font-size: 1.7rem;
  }

  html:root body.hv .home-section-head p {
    font-size: 0.96rem;
  }

  /* Swipeable rows with a peek of the next card; arrows hidden on touch. */
  html:root body.hv .home-event-grid,
  html:root body.hv .home-news-list,
  html:root body.hv .home-featured-track,
  html:root body.hv .home-paid-event-grid {
    grid-auto-columns: 78%;
    margin: 0 -1rem;
    padding: 12px 1.15rem 22px;
    scroll-padding-inline: 1.15rem;
    scroll-padding-block: 12px;
  }

  html:root body.hv .home-news-list {
    grid-auto-columns: 84%;
  }

  html:root body.hv .carousel-button {
    display: none;
  }

  html:root body.hv .home-section-actions {
    margin-top: 20px;
  }

  html:root body.hv .home-band {
    margin: 32px 0;
  }

  html:root body.hv .home-band::before,
  html:root body.hv .home-band::after {
    height: 28px;
  }

  html:root body.hv .home-band::before {
    top: -27px;
  }

  html:root body.hv .home-band::after {
    bottom: -27px;
  }

  /* New in town on phones: horizontal cards (media left), full names. */
  html:root body.hv .home-new-grid,
  html:root body.hv .home-new-grid[data-count] {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  html:root body.hv .home-new-card {
    flex-direction: row;
    align-items: stretch;
  }

  html:root body.hv .home-new-media {
    flex: 0 0 112px;
    width: 112px;
    aspect-ratio: auto;
    align-self: stretch;
    min-height: 128px;
    height: auto;
  }

  html:root body.hv .home-new-logo-stage {
    padding: 12px;
  }

  html:root body.hv .home-new-logo-stage img {
    max-width: 100%;
    max-height: 96px;
  }

  html:root body.hv .home-new-logo-chip {
    bottom: 8px;
    left: 8px;
    width: 40px;
    height: 40px;
    padding: 4px;
    border-radius: 10px;
  }

  html:root body.hv .home-new-initials {
    width: 60px;
    height: 60px;
    font-size: 1.35rem;
  }

  html:root body.hv .home-new-plus {
    width: 56px;
    height: 56px;
    font-size: 1.9rem;
  }

  html:root body.hv .home-new-badge {
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    font-size: 0.62rem;
  }

  html:root body.hv .home-new-body {
    gap: 5px;
    padding: 12px 14px;
  }

  html:root body.hv .home-new-name {
    font-size: 1rem;
  }

  html:root body.hv .home-new-desc {
    font-size: 0.85rem;
  }

  html:root body.hv .home-new-meta {
    padding-top: 8px;
    font-size: 0.76rem;
  }

  html:root body.hv .category-grid,
  html:root body.hv .category-grid[data-visible-tiles] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  html:root body.hv .category-grid[data-visible-tiles="1"] {
    grid-template-columns: minmax(0, 1fr);
  }

  html:root body.hv .category-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 10px;
    padding: 12px;
  }

  html:root body.hv .category-card > h3 {
    font-size: 0.92rem;
  }

  html:root body.hv .category-icon {
    grid-row: auto;
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
  }

  html:root body.hv .category-card p {
    display: none;
  }

  html:root body.hv .home-jobs-section {
    padding: 28px 0 36px;
  }

  html:root body.hv .home-jobs-band {
    padding: 26px 20px;
    border-radius: 22px;
  }

  html:root body.hv .home-advertise-section {
    padding: 4px 0 40px;
  }

  html:root body.hv .pricing-home-cta {
    padding: 30px 22px;
    border-radius: 22px;
  }

  html:root body.hv .pricing-home-cta .cta-actions .button {
    flex: 1 1 100%;
  }

  html:root body.hv .buzz-newsletter {
    padding: 44px 0;
  }

  html:root body.hv .site-footer-wrap {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root body.hv .home-event-card,
  html:root body.hv .home-news-card,
  html:root body.hv .home-business-card,
  html:root body.hv .home-path-card,
  html:root body.hv .home-new-card,
  html:root body.hv .category-card,
  html:root body.hv .home-event-media img,
  html:root body.hv .home-news-media img {
    transition: none;
  }

  html:root body.hv .home-event-card:hover,
  html:root body.hv .home-news-card:hover,
  html:root body.hv .home-business-card:hover {
    transform: none;
  }
}

/* Featured card names link to the listing's own page. */
/* Featured/promoted cards are normal links to the listing page. */
html:root body.hv a.home-business-card {
  color: inherit;
  text-decoration: none;
}

html:root body.hv a.home-business-card:hover .home-business-name-link,
html:root body.hv a.home-business-card:focus-visible .home-business-name-link {
  color: var(--hv-primary-strong);
}

html:root body.hv .home-business-name-link {
  color: inherit;
  text-decoration: none;
}

html:root body.hv .home-business-name-link:hover,
html:root body.hv .home-business-name-link:focus-visible {
  color: var(--hv-primary-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}