/* ==========================================================================
   Florida Ebike Rentals - design system
   Royal blue + white, fun / sporty / family friendly.
   No web fonts, no third-party CSS: everything ships from our own origin.
   ========================================================================== */

:root {
  --blue-900: #0b1f4d;
  --blue-800: #12307a;
  --blue-700: #1a3fa0;
  --blue-600: #2050c8;
  --blue-500: #2f63e6;
  --blue-400: #5b8bf5;
  --blue-200: #b9cdfb;
  --blue-100: #e2ebfe;
  --blue-50:  #f2f6ff;

  --sun-500: #ffc233;
  --sun-400: #ffd267;
  --sun-100: #fff3d4;

  --ink: #0d1730;
  --ink-soft: #445074;
  --ink-mute: #5f6a8c;
  --line: #dbe3f5;
  --line-soft: #edf1fb;
  --white: #ffffff;
  --surface: #f7f9ff;

  --ok: #10804f;
  --warn: #b4530c;

  --radius-s: 8px;
  --radius: 14px;
  --radius-l: 22px;
  --radius-xl: 32px;

  --shadow-s: 0 1px 2px rgba(13, 23, 48, .06), 0 2px 6px rgba(13, 23, 48, .06);
  --shadow: 0 6px 18px rgba(13, 23, 48, .09);
  --shadow-l: 0 18px 44px rgba(13, 23, 48, .16);

  --wrap: 1180px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --font-display: "Trebuchet MS", "Segoe UI", var(--font);
  --header-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-600); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--blue-800); }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.16; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.1rem); font-weight: 800; overflow-wrap: break-word; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem); font-weight: 800; }
h3 { font-size: clamp(1.18rem, 1.06rem + .5vw, 1.4rem); font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .45em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.4rem, 800px); margin-inline: auto; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--blue-700);
  color: #fff; padding: 12px 18px; border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 700; transition: top .18s ease;
}
.skip-link:focus { top: 0; color: #fff; }

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

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 90; background: var(--white);
  border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(13,23,48,.03);
}
.site-header__inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--blue-800); font-weight: 800; }
.brand img { width: 190px; }
.brand:hover { color: var(--blue-800); }

.nav-toggle {
  margin-left: auto; display: none; align-items: center; gap: .5rem; background: var(--blue-50);
  border: 1px solid var(--line); color: var(--blue-800); font: inherit; font-weight: 700;
  padding: .5rem .8rem; border-radius: var(--radius-s); cursor: pointer;
}
.nav-toggle__bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; }

.main-nav { margin-left: auto; }
.main-nav ul { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.main-nav li { margin: 0; }
.main-nav a {
  display: block; padding: .55rem .85rem; border-radius: var(--radius-s); color: var(--ink);
  font-weight: 700; font-size: .97rem; text-decoration: none;
}
.main-nav a:hover { background: var(--blue-50); color: var(--blue-700); }
.main-nav a[aria-current="page"] { color: var(--blue-700); background: var(--blue-50); box-shadow: inset 0 -3px 0 var(--blue-500); }
.main-nav .nav-cta a {
  background: var(--sun-500); color: var(--blue-900); margin-left: .4rem; font-weight: 800;
  box-shadow: 0 3px 0 #d9a01f; border: 2px solid #d9a01f;
}
.main-nav .nav-cta a:hover, .main-nav .nav-cta a[aria-current="page"] { background: #ffd35c; color: var(--blue-900); box-shadow: 0 2px 0 #d9a01f; }

.header-call {
  display: inline-flex; align-items: center; gap: .45rem; flex-shrink: 0; padding: .55rem .95rem;
  background: var(--blue-600); color: #fff; border-radius: var(--radius-s); font-weight: 800;
  text-decoration: none; box-shadow: var(--shadow-s); white-space: nowrap;
}
.header-call:hover { background: var(--blue-700); color: #fff; }
.header-call__number { font-weight: 600; opacity: .92; padding-left: .45rem; border-left: 1px solid rgba(255,255,255,.4); }
@media (max-width: 1180px) { .main-nav a { padding: .55rem .6rem; font-size: .93rem; } }

@media (max-width: 900px) {
  .brand img { width: 158px; }
  .header-call { margin-left: auto; order: 2; }
  .nav-toggle { order: 3; margin-left: 0; }
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: fixed; inset: var(--header-h) 0 auto 0; background: var(--white); margin: 0;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow); max-height: calc(100vh - var(--header-h));
    overflow-y: auto; display: none;
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.2rem 1.2rem; }
  .main-nav a { padding: .85rem .6rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .main-nav .nav-cta a { margin: .8rem 0 0; text-align: center; border-radius: var(--radius-s); }
}
@media (max-width: 560px) {
  .site-header__inner { gap: .5rem; }
  .brand img { width: 128px; }
  .header-call { display: grid; grid-template-columns: auto auto; column-gap: .4rem; padding: .35rem .65rem; line-height: 1.15; }
  .header-call svg { grid-row: span 2; }
  .header-call__label { font-size: .9rem; }
  .header-call__number { border: 0; padding: 0; font-size: .74rem; }
  .nav-toggle { padding: .5rem .6rem; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: linear-gradient(150deg, var(--blue-800) 0%, var(--blue-600) 52%, var(--blue-500) 100%);
}
.hero::after {
  content: ""; position: absolute; inset: auto -10% -60% -10%; height: 220px; background: var(--white);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: .06;
}
.hero__inner { position: relative; z-index: 2; padding: clamp(2.2rem, 1rem + 4vw, 4rem) 0 clamp(2rem, 1rem + 3vw, 3.2rem); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
/* Grid items default to min-width:auto, which lets a horizontal carousel push
   the whole page wider than the viewport. Every grid child opts out. */
.hero__grid > *, .grid > *, .detail-layout > *, .carousel, .carousel__track { min-width: 0; }
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { color: #fff; text-shadow: 0 2px 18px rgba(6, 20, 60, .28); }
.hero p.lede { font-size: clamp(1.02rem, .96rem + .35vw, 1.2rem); color: #e8effe; max-width: 46ch; }
.hero p.lede a { color: #fff; text-decoration: underline; text-underline-offset: .18em; }
.hero p.lede a:hover { color: var(--sun-400); }
.hero__stats { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; padding: 0; margin: 1.4rem 0 0; }
.hero__stats li {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(3px);
  padding: .5rem .85rem; border-radius: 999px; font-size: .9rem; font-weight: 700; margin: 0;
}
.hero__stats strong { color: var(--sun-400); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

/* ---------- buttons ---------- */
/* CTAs are deliberately square-cornered: sharp edges read as action, and they
   stand apart from the rounded content cards around them. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 800; font-size: .98rem; padding: .85rem 1.45rem; border-radius: 0;
  border: 2px solid transparent; cursor: pointer; text-decoration: none; font-family: inherit;
  letter-spacing: .01em;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--sun-500); color: var(--blue-900); box-shadow: 0 6px 0 #d9a01f; }
.btn--primary:hover { box-shadow: 0 4px 0 #d9a01f; }
.btn--primary:active { box-shadow: 0 2px 0 #d9a01f; }
.btn--primary:hover { background: var(--sun-400); color: var(--blue-900); }
.btn--blue { background: var(--blue-600); color: #fff; box-shadow: var(--shadow); }
.btn--blue:hover { background: var(--blue-700); color: #fff; }
.btn--ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn--outline { background: var(--white); color: var(--blue-700); border-color: var(--blue-200); }
.btn--outline:hover { border-color: var(--blue-500); color: var(--blue-800); }
.btn--sm { padding: .55rem .95rem; font-size: .88rem; }
.btn--block { width: 100%; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ---------- hero carousel ---------- */
.carousel { position: relative; }
.carousel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.carousel__title { font-weight: 800; font-size: .95rem; color: #eaf0ff; letter-spacing: .01em; }
.carousel__nav { display: flex; gap: .4rem; }
.carousel__btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: 1.1rem; line-height: 1;
  display: grid; place-items: center;
}
.carousel__btn:hover { background: rgba(255,255,255,.26); }
.carousel__btn[disabled] { opacity: .35; cursor: default; }
.carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(252px, 1fr);
  gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .7rem;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.5) transparent;
}
.carousel__track::-webkit-scrollbar { height: 8px; }
.carousel__track::-webkit-scrollbar-thumb { background: rgba(255,255,255,.45); border-radius: 99px; }
@media (min-width: 700px) { .carousel__track { grid-auto-columns: minmax(272px, 1fr); } }

.slide {
  scroll-snap-align: start; background: var(--white); color: var(--ink); border-radius: var(--radius-l);
  overflow: hidden; box-shadow: var(--shadow-l); display: flex; flex-direction: column;
  text-decoration: none; min-height: 100%;
}
.slide:hover { color: var(--ink); }
.slide__media { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--blue-200), var(--blue-100)); }
.slide__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.slide__badge {
  position: absolute; left: .7rem; top: .7rem; background: var(--sun-500); color: var(--blue-900);
  font-size: max(12px, .74rem); font-weight: 800; padding: .28rem .6rem; border-radius: 999px;
}
.slide__body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.slide__name { font-family: var(--font-display); font-weight: 800; font-size: 1.03rem; line-height: 1.25; }
.slide__meta { font-size: .86rem; color: var(--ink-mute); }
.slide__foot { margin-top: auto; padding-top: .5rem; font-weight: 700; font-size: .87rem; color: var(--blue-600); }

/* ---------- sections ---------- */
.section { padding: clamp(2.4rem, 1.4rem + 3vw, 4.2rem) 0; }
.section--tint { background: var(--surface); }
.section--blue { background: var(--blue-900); color: #e8eefc; }
.section--blue h2, .section--blue h3 { color: #fff; }
.section__head { max-width: 68ch; margin-bottom: 1.8rem; }
.section__head p { color: var(--ink-soft); }
.section--blue .section__head p { color: #c6d4f5; }
.eyebrow {
  display: inline-block; font-size: max(13px, .78rem); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue-600); background: var(--blue-50);
  padding: .3rem .7rem; border-radius: 999px; margin-bottom: .7rem;
}
.section--blue .eyebrow { color: var(--blue-900); background: var(--sun-400); }

.prose { max-width: 74ch; }
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.7rem; }
.prose ul li::marker { color: var(--blue-500); }
.prose blockquote {
  margin: 1.6rem 0; padding: 1rem 1.3rem; border-left: 5px solid var(--blue-400);
  background: var(--blue-50); border-radius: 0 var(--radius) var(--radius) 0; font-size: 1.02rem;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); }
.prose th { background: var(--blue-50); font-weight: 800; }

/* ---------- grids & cards ---------- */
.grid { display: grid; gap: 1.1rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 1.4rem; box-shadow: var(--shadow-s); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-200); color: inherit; }
.card h3 { margin-bottom: .35rem; }
.card p { color: var(--ink-soft); font-size: .96rem; margin-bottom: .6rem; }
.card__more { margin-top: auto; font-weight: 800; color: var(--blue-600); font-size: .9rem; }
.card__count { font-size: .84rem; color: var(--ink-mute); font-weight: 700; }
.card__icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--blue-50); color: var(--blue-600); margin-bottom: .8rem;
}
@media (prefers-reduced-motion: reduce) { .card--link:hover { transform: none; } }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.stat strong { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: var(--blue-700); line-height: 1.1; }
.stat span { font-size: .88rem; color: var(--ink-mute); font-weight: 600; }

/* ---------- listicle ---------- */
.listicle { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.listicle__item {
  position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: var(--shadow-s); overflow: hidden; margin: 0;
  opacity: 0; transform: translateY(28px) scale(.985);
  transition: opacity .55s cubic-bezier(.22,.9,.3,1), transform .55s cubic-bezier(.22,.9,.3,1), box-shadow .3s ease;
  will-change: transform, opacity;
}
.listicle__item.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.listicle__item:hover { box-shadow: var(--shadow); }
.no-js .listicle__item { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .listicle__item { opacity: 1 !important; transform: none !important; transition: none; }
}

.listicle__inner { display: grid; grid-template-columns: 268px minmax(0, 1fr); }
@media (max-width: 780px) { .listicle__inner { grid-template-columns: 1fr; } }

.listicle__media {
  position: relative; min-height: 200px;
  background: linear-gradient(140deg, var(--blue-500), var(--blue-800));
}
/* Placeholder mark shown whenever a listing photo is missing or fails to load. */
.listicle__media::after, .slide__media::after {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
  background: url("/assets/img/mark.svg") center / 54px no-repeat;
}
.listicle__media img, .slide__media img { z-index: 1; }
.slide__media::after { background-size: 44px; opacity: .35; }
.listicle__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.listicle__rank {
  position: absolute; left: 0; top: 0; z-index: 3; background: var(--sun-500); color: var(--blue-900);
  font-family: var(--font-display); font-weight: 800; font-size: 1.22rem; min-width: 3.1rem; height: 2.6rem;
  display: grid; place-items: center; border-radius: 0 0 var(--radius) 0; padding: 0 .5rem;
}
.listicle__body { padding: 1.25rem 1.4rem 1.35rem; display: flex; flex-direction: column; gap: .55rem; }
.listicle__title { margin: 0; font-size: 1.24rem; overflow-wrap: break-word; }
.listicle__title a { color: var(--ink); text-decoration: none; }
.listicle__title a:hover { color: var(--blue-700); text-decoration: underline; }
.listicle__summary { margin: 0; color: var(--ink-soft); font-size: .98rem; }
.listicle__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .4rem .9rem; margin: .2rem 0 0; padding: 0; list-style: none; font-size: .92rem; }
.listicle__facts li { margin: 0; display: flex; gap: .45rem; color: var(--ink-soft); }
.listicle__facts b { color: var(--ink); font-weight: 700; }
.listicle__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

.rating { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .95rem; color: var(--ink); }
.stars { display: inline-flex; gap: 1px; color: var(--sun-500); }
.stars svg { width: 16px; height: 16px; }
.rating__count { color: var(--ink-mute); font-weight: 600; font-size: .88rem; }

.tag-row { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: .2rem 0 0; }
.tag-row li { margin: 0; }
.tag {
  display: inline-block; font-size: max(13px, .78rem); font-weight: 700; padding: .24rem .6rem; border-radius: 999px;
  background: var(--blue-50); color: var(--blue-700); border: 1px solid var(--blue-100);
}
.tag--sun { background: var(--sun-100); color: var(--warn); border-color: #ffe3a3; }
.tag--open { background: #e6f6ee; color: var(--ok); border-color: #bfe6d3; }

/* ---------- map ---------- */
/* Leaflet draws the map; these rules cover the container, our own marker
   styling and the touch veil. Leaflet's own CSS is loaded with the library. */
.maptools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.map-panel {
  border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden;
  box-shadow: var(--shadow-s); margin-bottom: 1.5rem; background: var(--blue-50);
}
.map-panel[hidden] { display: none !important; }
.map {
  position: relative; height: clamp(300px, 52vh, 520px); background: #e8eef7; z-index: 0;
}

/* Our pin, rendered through an L.divIcon. */
.map__marker span {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg); background: var(--blue-600); color: #fff; font-weight: 800;
  font-size: .78rem; box-shadow: 0 4px 10px rgba(13,23,48,.35); border: 2px solid #fff;
}
.map__marker i { transform: rotate(45deg); font-style: normal; }
.map__marker:hover span, .map__marker:focus span { background: var(--sun-500); color: var(--blue-900); }
.map__marker--dot span { width: 20px; height: 20px; border-width: 2px; }

/* Cluster bubbles. Deliberately gold, not blue: on a ranked map a blue "7"
   pin means rank 7, so a group of seven must not look like one of them. */
.marker-cluster { background: transparent !important; }
.marker-cluster div {
  width: 32px; height: 32px; margin: 2px 0 0 2px; border-radius: 50%;
  background: var(--sun-500) !important; color: var(--blue-900) !important;
  border: 2px solid #fff; box-shadow: 0 4px 10px rgba(13,23,48,.3);
}
.marker-cluster span { font-weight: 800; font-size: .82rem; line-height: 28px; }

.leaflet-popup-content { font-size: .9rem; line-height: 1.45; margin: .7rem .9rem; }
.leaflet-popup-content strong { display: block; font-size: .96rem; margin-bottom: .15rem; }
.map__popup-meta { display: block; color: var(--ink-mute); font-size: .85rem; }
.leaflet-popup-content a { font-weight: 700; display: inline-block; margin-top: .3rem; }
.leaflet-container { font: inherit; }
.leaflet-control-attribution { font-size: max(11px, .7rem); }

/* Phone: the map starts inert so a one-finger drag scrolls the page. */
.map__veil {
  position: absolute; inset: 0; z-index: 500; display: grid; place-items: center;
  background: rgba(11, 31, 77, .22); cursor: pointer;
}
.map__veil span {
  background: rgba(255,255,255,.95); color: var(--ink); font-weight: 700; font-size: .92rem;
  padding: .6rem 1rem; border-radius: var(--radius-s); box-shadow: var(--shadow);
}

/* ---------- filters / search ---------- */
.filterbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .7rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 1rem; box-shadow: var(--shadow-s); margin-bottom: 1.4rem;
}
.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-size: max(13px, .8rem); font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.field input, .field select, .field textarea {
  font: inherit; padding: .7rem .8rem; border: 1px solid var(--line);
  border-radius: var(--radius-s); background: var(--white); color: var(--ink); width: 100%;
  /* Never below 16px: iOS Safari zooms the viewport when a smaller field is focused. */
  font-size: max(16px, 1rem);
  min-height: 46px;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--blue-600) 50%), linear-gradient(135deg, var(--blue-600) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue-500); outline: none; box-shadow: 0 0 0 3px var(--blue-100); }
.field__hint { font-size: .82rem; color: var(--ink-mute); }

.searchbox { display: flex; gap: .5rem; flex-wrap: wrap; }
.searchbox input { flex: 1 1 240px; }
.result-count { font-weight: 700; color: var(--ink-soft); margin-bottom: 1rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .7rem; }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.faq__item summary {
  cursor: pointer; padding: 1rem 1.2rem; font-weight: 800; font-family: var(--font-display);
  font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--blue-600); font-size: 1.4rem; line-height: 1; flex: none; }
.faq__item[open] summary::after { content: "\2013"; }
.faq__item[open] summary { background: var(--blue-50); }
.faq__answer { padding: .2rem 1.2rem 1.1rem; color: var(--ink-soft); }
.faq__answer p:last-child { margin-bottom: 0; }

/* ---------- breadcrumbs / pagination ---------- */
.crumbs { font-size: .87rem; color: var(--ink-mute); padding: .9rem 0 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; }
.crumbs li { margin: 0; display: flex; gap: .3rem; align-items: center; }
.crumbs li + li::before { content: "/"; color: var(--line); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--blue-600); text-decoration: underline; }

.pagelink-cloud { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0; }
.pagelink-cloud li { margin: 0; }
.pagelink-cloud a {
  display: inline-block; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: .42rem .85rem; font-size: .9rem; font-weight: 600; color: var(--ink); text-decoration: none;
}
.pagelink-cloud a:hover { border-color: var(--blue-400); color: var(--blue-700); background: var(--blue-50); }
.pagelink-cloud .count { color: var(--ink-mute); font-size: .82rem; font-weight: 700; }

/* ---------- listing detail ---------- */
.detail-hero { background: linear-gradient(160deg, var(--blue-800), var(--blue-600)); color: #fff; padding: 1.6rem 0 2.4rem; }
.detail-hero h1 { color: #fff; margin-bottom: .4rem; }
.detail-hero .crumbs, .detail-hero .crumbs a { color: #c3d4fb; }
.detail-hero .crumbs a:hover { color: #fff; }
.detail-hero__meta { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; color: #dde7fd; font-size: .95rem; }
.detail-hero .rating { color: #fff; }
.detail-hero .rating__count { color: #c3d4fb; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 2rem; align-items: start; padding-top: 2rem; }
@media (max-width: 940px) { .detail-layout { grid-template-columns: 1fr; } }
.sidebar { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 1rem; }
@media (max-width: 940px) { .sidebar { position: static; } }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.2rem; box-shadow: var(--shadow-s); }
.panel h2, .panel h3 { font-size: 1.06rem; margin-bottom: .7rem; }
.panel--cta { background: var(--blue-50); border-color: var(--blue-200); }

.datalist { margin: 0; font-size: .95rem; }
.datalist div { display: flex; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line-soft); }
.datalist div:last-child { border-bottom: 0; }
.datalist dt { flex: 0 0 108px; color: var(--ink-mute); font-weight: 700; }
.datalist dd { margin: 0; flex: 1; word-break: break-word; }

.hours { width: 100%; border-collapse: collapse; font-size: .94rem; }
.hours th { text-align: left; font-weight: 700; color: var(--ink-soft); padding: .4rem 0; width: 110px; }
.hours td { padding: .4rem 0; text-align: right; }
.hours tr + tr th, .hours tr + tr td { border-top: 1px solid var(--line-soft); }
.hours .is-today th, .hours .is-today td { color: var(--blue-700); font-weight: 800; }
.hours .is-closed td { color: var(--ink-mute); }

.feature-groups { display: grid; gap: 1rem; }
.feature-groups h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mute); margin-bottom: .4rem; }
.feature-groups ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.feature-groups li { margin: 0; }

/* A shop's own photo, never wider than the 800px file behind it. */
.photo-hero {
  border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-s); max-width: 800px; background: var(--blue-50);
}
.photo-hero img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }

/* review score bars */
.score-bars { display: grid; gap: .4rem; margin: 0; }
.score-bars .row { display: grid; grid-template-columns: 54px 1fr 46px; align-items: center; gap: .6rem; font-size: .88rem; }
.score-bars .bar { height: 10px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.score-bars .bar i { display: block; height: 100%; background: var(--sun-500); border-radius: 99px; }
.score-bars .num { text-align: right; color: var(--ink-mute); font-weight: 700; }
.big-score { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.big-score strong { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--blue-700); font-weight: 800; }

/* ---------- blog ---------- */
.post-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 1rem 0 2.4rem; }
.post-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--ink-mute); font-size: .9rem; font-weight: 600; }
.post-body { padding: 2.4rem 0 1rem; }
.toc { background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius); padding: 1.1rem 1.3rem; margin-bottom: 2rem; }
.toc h2 { font-size: 1rem; margin-bottom: .5rem; }
.toc ol { margin: 0; padding-left: 1.2rem; font-size: .95rem; }
.toc li { margin-bottom: .25rem; }

/* ---------- ads ---------- */
/* No reserved height and no label: an ad that does not fill should leave no
   trace rather than a captioned empty box. */
.ad-slot { margin: 2rem auto; text-align: center; }
.ad-slot:empty { display: none; }
/* AdSense stamps this on a unit it could not fill. */
.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.ad-slot:has(> .adsbygoogle[data-ad-status="unfilled"]) { display: none; margin: 0; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); color: #fff;
  border-radius: var(--radius-xl); padding: clamp(1.6rem, 1rem + 2vw, 2.8rem); text-align: center;
  box-shadow: var(--shadow-l);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #dde7fd; max-width: 60ch; margin-inline: auto; }
.cta-band .btn-row { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.2rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--blue-900); color: #c6d4f5; padding: 3rem 0 2rem; margin-top: 3.5rem; }
.site-footer a { color: #dde7fd; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 1.8rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.14); }
.footer-top h3 { color: #fff; font-size: .92rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .7rem; }
.footer-top ul { list-style: none; padding: 0; margin: 0; font-size: .94rem; }
.footer-top li { margin-bottom: .4rem; }
.footer-brand img { width: 200px; margin-bottom: .8rem; }
.footer-brand p { font-size: .92rem; max-width: 42ch; }
.footer-nav { padding: 1.4rem 0 .6rem; }
.footer-nav ul {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .3rem 1.4rem; margin: 0; padding: 0; font-weight: 700; font-size: .95rem;
}
.footer-nav li { margin: 0; }
.legal { text-align: center; font-size: .84rem; color: #93a7d6; }
.legal p { margin-bottom: .4rem; }

/* ---------- utilities ---------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 1.4rem; } .mb-2 { margin-bottom: 1.4rem; }
.mt-3 { margin-top: 2.2rem; } .mb-3 { margin-bottom: 2.2rem; }
.text-center { text-align: center; }
.muted { color: var(--ink-mute); }
.small { font-size: .9rem; }
.nowrap { white-space: nowrap; }
.bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.bubbles i {
  position: absolute; display: block; border-radius: 50%; background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.13);
}
.divider-wave { display: block; width: 100%; height: 48px; color: var(--white); }

/* ==========================================================================
   Touch and small-screen refinements
   Everything below targets phones and other coarse pointers: comfortable tap
   targets, a thumb-reachable action bar on listings, and scrollable tables.
   ========================================================================== */

/* Wide content (blog comparison tables) scrolls inside its own box rather than
   forcing the page sideways. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.4rem 0;
  border-radius: var(--radius-s);
}
.table-scroll table { margin: 0; min-width: 480px; }
.table-scroll::-webkit-scrollbar { height: 6px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--blue-200); border-radius: 99px; }

/* Touch devices by pointer type, and every phone-width screen regardless of
   what the browser reports about its pointer. */
@media (pointer: coarse), (max-width: 900px) {
  /* WCAG 2.5.8 asks for 24px minimum; 44px is the comfortable thumb target. */
  .btn { min-height: 48px; }
  .btn--sm { min-height: 44px; padding: .62rem 1.05rem; font-size: .92rem; }
  .carousel__btn { width: 44px; height: 44px; }
  .map__marker span { width: 36px; height: 36px; font-size: .82rem; }
  .map__marker--dot span { width: 26px; height: 26px; }
  .pagelink-cloud a { padding: .6rem 1rem; min-height: 44px; display: flex; align-items: center; }
  .brand { padding: .4rem 0; }
  .nav-toggle { min-height: 44px; }
  .faq__item summary { padding: 1.1rem 1.2rem; }

  /* Phone numbers, breadcrumbs and footer links are aimed at with a thumb, so
     they get a full-height target rather than just their text box. */
  .datalist a, .listicle__facts a {
    display: inline-flex; align-items: center; min-height: 44px; padding: .3rem 0;
  }
  .crumbs { padding-top: .3rem; }
  .crumbs li { min-height: 40px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .2rem; }
  .footer-top li a, .legal a { display: inline-block; padding: .35rem 0; }
  .footer-nav a { display: inline-block; padding: .55rem 0; }
}

/* Remove the grey flash iOS paints over tapped links. */
a, button, summary, label, .slide { -webkit-tap-highlight-color: rgba(47, 99, 230, .18); }

/* Thumb-reachable call bar on listing pages. Phones only: on a listing, calling
   the shop is the whole point, and it should never need a scroll to reach. */
.action-bar { display: none; }
@media (max-width: 780px) {
  .action-bar {
    display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem;
    padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 18px rgba(13, 23, 48, .12);
  }
  .action-bar .btn { min-height: 50px; padding: .7rem .8rem; font-size: .95rem; border-radius: 0; }
  /* Keep the footer clear of the fixed bar. */
  body.has-action-bar .site-footer { padding-bottom: 6.5rem; }
}

@media (max-width: 620px) {
  :root { --header-h: 62px; }
  body { font-size: 16.5px; }
  .wrap, .wrap-narrow { width: min(100% - 1.8rem, var(--wrap)); }
  .section { padding: 2.2rem 0; }

  /* Full-width cards read better than cramped two-column grids on a phone. */
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .stat { padding: .8rem .9rem; }
  .stat strong { font-size: 1.5rem; }

  .filterbar { grid-template-columns: 1fr; padding: .9rem; }
  .listicle__inner { grid-template-columns: 1fr; }
  .listicle__media { min-height: 0; aspect-ratio: 16 / 9; }
  .listicle__body { padding: 1.1rem 1.1rem 1.2rem; }
  .listicle__facts { grid-template-columns: 1fr; gap: .3rem; }
  .listicle__actions .btn { flex: 1 1 auto; }

  .hero__stats li { font-size: .85rem; padding: .42rem .7rem; }
  .hero__actions .btn { flex: 1 1 100%; }
  .carousel__track { grid-auto-columns: minmax(236px, 82%); }

  .detail-hero__meta { gap: .5rem .9rem; font-size: .9rem; }
  .datalist div { flex-direction: column; gap: .1rem; }
  .datalist dt { flex: none; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }

  .cta-band { border-radius: var(--radius-l); }
  .footer-top { grid-template-columns: 1fr; gap: 1.4rem; }
  .footer-nav ul { gap: .2rem 1rem; font-size: .92rem; }
  .prose blockquote { padding: .8rem 1rem; }
}

/* ==========================================================================
   Editorial: bylines, author cards, figures and page banners
   ========================================================================== */

.byline { display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0 0; }
.byline__avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-600); color: #fff; font-family: var(--font-display); font-weight: 800;
  font-size: .95rem; letter-spacing: .02em;
}
.byline__avatar--lg { width: 62px; height: 62px; font-size: 1.25rem; }
.byline__text { display: grid; gap: .1rem; font-size: .94rem; }
.byline__meta { color: var(--ink-mute); font-size: .86rem; }

.author-head { display: flex; align-items: center; gap: 1rem; }
.author-head h1 { margin-bottom: .2rem; }

.author-card {
  display: flex; gap: 1.1rem; align-items: flex-start; margin: 2.4rem 0 0;
  background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius-l);
  padding: 1.3rem;
}
.author-card h2 { font-size: 1.05rem; margin-bottom: .1rem; }
.author-card p { font-size: .95rem; }
@media (max-width: 560px) { .author-card { flex-direction: column; gap: .8rem; } }

.figure { margin: 1.8rem 0; }
.figure img {
  width: 100%; border-radius: var(--radius-l); border: 1px solid var(--line);
  box-shadow: var(--shadow-s); object-fit: cover; aspect-ratio: 16 / 10; background: var(--blue-50);
}
.figure figcaption { margin-top: .5rem; font-size: .88rem; color: var(--ink-mute); }

.page-banner { margin: 1.2rem 0 0; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.page-banner img {
  width: 100%; aspect-ratio: 21 / 9; max-height: 400px; object-fit: cover; background: var(--blue-50);
}
@media (max-width: 620px) {
  .page-banner { border-radius: var(--radius-l); }
  .page-banner img { aspect-ratio: 16 / 10; }
  .figure img { aspect-ratio: 4 / 3; }
  .page-banner img { max-height: 260px; }
}

/* Photo used beside a specific business is always labelled as illustrative. */
.figure--stock figcaption::before {
  content: "Stock photo. "; font-weight: 700; color: var(--ink-soft);
}

/* Inline CTA dropped into editorial content by the {{CTA}} shortcode. */
.cta-inline {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--blue-50); border: 1px solid var(--blue-100); border-left: 5px solid var(--blue-600);
  padding: 1.1rem 1.3rem; margin: 2rem 0;
}
.cta-inline p { margin: 0; max-width: 46ch; }

/* Distance badge shown on listings once the visitor shares their location. */
.distance-badge {
  display: inline-flex; align-self: flex-start; align-items: center; gap: .3rem;
  background: var(--blue-600); color: #fff; font-size: .82rem; font-weight: 800;
  padding: .25rem .6rem; border-radius: var(--radius-s); width: auto;
}

/* .btn sets display:inline-flex, which beats the user agent's [hidden] rule,
   so hiding a button in JS needs this to actually take effect. */
[hidden] { display: none !important; }
.nearby-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  background: var(--blue-50); border: 1px solid var(--blue-100); padding: .9rem 1.1rem;
  border-radius: var(--radius); margin-bottom: 1.2rem;
}
.nearby-bar p { margin: 0; font-weight: 700; }
.nearby-bar .muted { font-weight: 500; }

/* ==========================================================================
   Shop
   ========================================================================== */

.product-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.product-card {
  display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-s);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--blue-200); }
@media (prefers-reduced-motion: reduce) { .product-card:hover { transform: none; } }
.product-card__media { display: block; aspect-ratio: 1 / 1; background: var(--blue-50); position: relative; }
.product-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: .8rem; }
.product-card__placeholder {
  position: absolute; inset: 0;
  background: url("/assets/img/mark.svg") center / 56px no-repeat; opacity: .45;
}
.product-card__body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.product-card__brand { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.product-card h3 { font-size: 1.05rem; margin: 0; }
.product-card h3 a { color: var(--ink); text-decoration: none; }
.product-card h3 a:hover { color: var(--blue-700); }
.product-card p { font-size: .92rem; color: var(--ink-soft); margin: 0; }
.product-card__foot { margin-top: auto; padding-top: .7rem; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.product-card__price { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--blue-700); }

.product-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 3rem); align-items: start; }
@media (max-width: 820px) { .product-detail { grid-template-columns: 1fr; } }
.product-detail__media { border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--blue-50); overflow: hidden; }
.product-detail__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: 1.2rem; }
.product-detail__price { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--blue-700); margin: .2rem 0 1rem; }

/* Embedded route map (Ride with GPS). Sized generously on desktop, shorter on
   phones where the vertical space matters more than the elevation profile. */
.route-embed { margin: 1.8rem 0; }
.route-embed iframe {
  width: 1px; min-width: 100%; height: 620px; border: 1px solid var(--line);
  border-radius: var(--radius-l); background: var(--blue-50); display: block;
}
.route-embed figcaption { margin-top: .5rem; font-size: .88rem; color: var(--ink-mute); }
@media (max-width: 620px) { .route-embed iframe { height: 460px; } }

/* Trailhead table on trail guides. */
.prose .table-scroll table td:first-child { font-weight: 700; color: var(--ink); }

/* Trail and cost facts are short strings ("Paved", "+418 ft / -488 ft") rather
   than headline numbers, so they get a tighter treatment than a stat tile. */
.stat-row--facts { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: .7rem; }
.stat-row--facts .stat { padding: .8rem .9rem; }
.stat-row--facts .stat strong {
  font-size: 1.02rem; line-height: 1.3; font-weight: 800; letter-spacing: -.01em;
}
.stat-row--facts .stat span { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }

/* Message sits behind the embed, so a blocked or slow frame is not a blank box. */
.route-embed { position: relative; }
.route-embed::before {
  content: "Loading the route map from Ride with GPS…";
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 1.5rem; color: var(--ink-mute); font-size: .92rem; z-index: 0;
}
.route-embed iframe { position: relative; z-index: 1; }

/* ==========================================================================
   Sitewide promo banner
   Sits above the sticky header and scrolls away with the page, so it never
   eats into the viewport on a phone.
   ========================================================================== */

.promo {
  position: relative; z-index: 95;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem 1rem; padding: .6rem 3rem .6rem 1rem;
  /* Deliberately darker than the header and the hero so the strip reads as a
     promotion rather than more site chrome. */
  background: var(--blue-900);
  color: #fff; text-align: center;
  border-bottom: 2px solid var(--sun-500);
}
/* Every offer ships in the HTML and they stack in one grid cell, so the strip is
   only ever as tall as its tallest offer and nothing reflows as they turn. The
   deck takes the full width and clips, so an offer travels the whole strip: it
   slides in from the right while the one before it slides out to the left. */
.promo__deck {
  flex: 1 1 100%; min-width: 0;
  display: grid; overflow: hidden;
}
.promo__link {
  grid-area: 1 / 1;
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem;
  color: #fff; text-decoration: none; font-weight: 800;
  /* Offers wait off-stage to the right until it is their turn. */
  transform: translateX(100%); pointer-events: none;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.promo__link.is-current { transform: translateX(0); pointer-events: auto; }
.promo__link.is-leaving { transform: translateX(-100%); }
/* Sending an offer that has left back to the starting side would otherwise
   animate it straight through the middle of the strip, so the trip home is made
   with transitions off. */
.promo__deck.is-still .promo__link { transition: none; }
/* No JavaScript: the first offer is simply the banner. */
.no-js .promo__link { transform: none; pointer-events: auto; }
.no-js .promo__link ~ .promo__link { display: none; }
/* Reduced motion: the offers still take turns, they just do not travel. */
@media (prefers-reduced-motion: reduce) {
  .promo__link { transform: none !important; opacity: 0; transition: opacity .3s ease; }
  .promo__link.is-current { opacity: 1; }
  .promo__link.is-leaving { opacity: 0; }
}
.promo__link:hover { color: #fff; }
.promo__link:hover .promo__cta { background: var(--sun-400); }
.promo__text { font-family: var(--font-display); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); letter-spacing: -.01em; }
.promo__cta {
  background: var(--sun-500); color: var(--blue-900); font-size: .85rem; font-weight: 800;
  padding: .35rem .85rem; white-space: nowrap;
  transition: background .16s ease;
}
.promo__disclosure { font-size: .74rem; color: #c9d9fd; font-weight: 600; }
.promo__close {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center;
  background: transparent; border: 0; color: #fff; font-size: 1.4rem; line-height: 1;
  cursor: pointer; opacity: .8;
}
.promo__close:hover { opacity: 1; }

@media (max-width: 620px) {
  .promo { padding: .55rem 2.6rem .55rem .8rem; gap: .35rem .7rem; }
  .promo__text { font-size: 1rem; }
  .promo__cta { font-size: .8rem; padding: .3rem .7rem; }
  .promo__disclosure { font-size: .7rem; width: 100%; }
}
@media (pointer: coarse), (max-width: 900px) {
  .promo__close { width: 44px; height: 44px; }
}

/* Activity shortcuts above a filtered list: they drive the filter's own select
   rather than adding a second way to narrow the same list. */
/* ==========================================================================
   /find pages: title over the scene, with the search bar straight beneath it
   ========================================================================== */
.find-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--blue-900); color: #fff; }
.find-hero__art {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center 62%; z-index: -2;
}
/* Darkened top and bottom so white text holds its contrast over any scene. */
.find-hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 31, 77, .55) 0%, rgba(11, 31, 77, .28) 55%, rgba(11, 31, 77, 0) 80%),
    linear-gradient(180deg, rgba(11, 31, 77, .6) 0%, rgba(11, 31, 77, .3) 42%, rgba(11, 31, 77, .75) 100%);
}
.nowrap { white-space: nowrap; }
.find-hero__inner {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(430px, 56vh, 580px); padding: 1rem 0 2.2rem;
}
.find-hero .crumbs { margin-bottom: auto; }
.find-hero .crumbs ol { margin: 0; row-gap: 0; }
.find-hero .crumbs li, .find-hero .crumbs a { color: rgba(255, 255, 255, .92); }
.find-hero .crumbs li[aria-current] { color: #fff; font-weight: 700; }
.find-hero__title {
  color: #fff; margin: 1.6rem 0 .35rem; max-width: 26ch; text-wrap: balance;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.7rem); text-shadow: 0 2px 22px rgba(6, 20, 60, .5);
}
.find-hero__lead {
  color: #f0f4ff; max-width: 62ch; margin: 0; font-size: clamp(1rem, .96rem + .3vw, 1.14rem);
  text-shadow: 0 1px 12px rgba(6, 20, 60, .6);
}

.find-search {
  margin-top: 1.3rem; display: grid; align-items: end; gap: .55rem;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  background: var(--white); color: var(--ink); padding: .75rem; border-radius: var(--radius);
  box-shadow: var(--shadow-l);
}
.find-search__field { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.find-search__field label {
  padding-left: .15rem; font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-mute);
}
.find-search select, .find-search input {
  width: 100%; min-height: 48px; padding: .65rem .75rem; font: inherit; font-size: .98rem;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s);
}
/* The place this page is about, already chosen: made to read as the selection. */
.find-search__field--where select { font-weight: 800; color: var(--blue-800); background: var(--blue-50); border-color: var(--blue-200); }
.find-search__go { min-height: 48px; padding-inline: 1.7rem; }
.find-search--where-only { grid-template-columns: minmax(0, 1fr) auto; max-width: 640px; }
@media (max-width: 1000px) {
  .find-search:not(.find-search--where-only) { grid-template-columns: 1fr 1fr; }
  .find-search__field--where, .find-search__field--q, .find-search__go { grid-column: span 2; }
}
@media (max-width: 560px) {
  .find-hero__inner { min-height: 0; padding-top: .7rem; }
  .find-hero__title { margin-top: 3.2rem; }
  .find-search { grid-template-columns: 1fr; }
  .find-search__field--where, .find-search__field--q, .find-search__go { grid-column: auto; }
}

.section--results { padding-top: 2rem; }
.results-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; margin-bottom: 1rem; }
.results-head h2 { margin: 0; }
.results-head .result-count { margin: 0; }

/* Nearby towns as picture cards. */
.town-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.town-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .town-cards, .town-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.town-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-s);
  transition: transform .15s ease, box-shadow .15s ease;
}
.town-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--ink); }
.town-card__media {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background-color: var(--blue-50); background-size: cover; background-position: center 65%;
}
.town-card__media img { width: 100%; height: 100%; object-fit: cover; }
.town-card__body { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .85rem .85rem; }
.town-card__name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; }
.town-card__meta { font-size: .85rem; color: var(--ink-mute); }
@media (prefers-reduced-motion: reduce) { .town-card { transition: none; } .town-card:hover { transform: none; } }

/* Every town with a page, in columns, grouped by region. */
.town-grid { columns: 4 220px; column-gap: 2rem; }
.town-grid__group { break-inside: avoid; margin-bottom: 1.5rem; }
.town-grid__group h3 { margin-bottom: .45rem; font-size: 1rem; }
.town-grid__group ul { list-style: none; margin: 0; padding: 0; }
.town-grid__group li { margin: 0 0 .28rem; font-size: .92rem; }
.town-grid a { text-decoration: none; }
.town-grid a:hover { text-decoration: underline; }

.find-guide { align-items: start; }

/* A single prominent route out of a hub page, ahead of the browsing grids. */
.callout--lead {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
  background: var(--white); border: 1px solid var(--line); border-left: 5px solid var(--blue-600);
  border-radius: var(--radius); padding: 1.2rem 1.4rem; box-shadow: var(--shadow-s);
}
.callout--lead h2 { margin-bottom: .3rem; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }
.callout--lead p { margin: 0; max-width: 62ch; }

.tag-row--lead { margin: 0 0 1.4rem; gap: .5rem; }
.tag--button {
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
  border: 1px solid var(--line); background: var(--white); color: var(--blue-800);
  padding: .5rem .9rem; transition: background .15s ease, border-color .15s ease;
}
.tag--button b { color: var(--ink-mute); font-weight: 800; margin-left: .25rem; }
.tag--button:hover { background: var(--blue-50); border-color: var(--blue-200); }
/* A tour's photos are wide travel shots, not products on white, so they crop to
   fill rather than letterboxing inside the square the shop pages use. */
.tour-detail__cover {
  border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; background: var(--blue-50);
}
.tour-detail__cover > img,
.tour-detail__cover .figure img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; display: block; }
.tour-detail__cover .figure { margin: 0; }
.tour-detail__cover figcaption { padding: .6rem .9rem; }

/* Extra photos from a tour's own listing, under its cover image. */
.thumb-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; list-style: none; padding: 0; margin: .8rem 0 0; }
.thumb-row li { margin: 0; }
.thumb-row img { width: 100%; height: 88px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-s); }

.listicle__kicker { margin: -.35rem 0 .5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .74rem; }

/* ==========================================================================
   Booking CTA (Viator affiliate)
   ========================================================================== */

.booking-cta__disclosure { font-size: .8rem; opacity: .8; margin: .9rem 0 0; }
.booking-cta--band .booking-cta__disclosure { color: #dde7fd; max-width: 60ch; margin-inline: auto; }

.booking-cta--inline {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.6rem; margin: 2.2rem 0;
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-left: 5px solid var(--sun-500); padding: 1.3rem 1.5rem;
}
.booking-cta--inline > div:first-child { flex: 1 1 320px; min-width: 0; }
.booking-cta--inline h3 { margin-bottom: .35rem; font-size: 1.15rem; }
.booking-cta--inline p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.booking-cta--inline .booking-cta__disclosure { color: var(--ink-mute); margin-top: .5rem; }
.booking-cta__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

@media (max-width: 620px) {
  .booking-cta--inline { padding: 1.1rem 1.2rem; }
  .booking-cta__actions { width: 100%; }
  .booking-cta__actions .btn { flex: 1 1 100%; }
}

/* Tour cards reuse the listicle, but many have no photo, so the rank badge
   needs a home inside the body instead of over an image. */
.listicle__rank--flat {
  position: static; border-radius: var(--radius-s); align-self: flex-start;
  min-width: 2.4rem; height: 2.2rem; font-size: 1.05rem; margin-bottom: .2rem;
}

/* A map that is shown on load rather than behind a toggle. */
.map-panel--open { margin-top: 1rem; }
.map-panel--open .map { height: clamp(360px, 58vh, 560px); }
.map-caption { margin-top: .5rem; }


/* A region illustration standing in for a shop with no photo. */
img.is-illustration { object-fit: cover; object-position: 50% 72%; }

/* ---------- category grid (/find/) ---------- */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.category-grid--compact { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; }
.category-tile {
  display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.2rem; text-decoration: none;
  color: var(--ink); background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--blue-600);
  border-radius: var(--radius); box-shadow: var(--shadow-s); transition: transform .15s ease, box-shadow .15s ease;
}
.category-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--ink); }
.category-tile__name { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; color: var(--blue-800); }
.category-tile__count { font-size: .85rem; font-weight: 700; color: var(--blue-600); }
.category-tile__blurb { font-size: .92rem; color: var(--ink-soft); }
.category-grid--compact .category-tile { padding: .8rem 1rem; }
.category-grid--compact .category-tile__name { font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .category-tile:hover { transform: none; } }

/* ---------- /cities/ hub ---------- */
.region-jump { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.6rem; }
.region-jump a {
  padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--blue-50);
  color: var(--blue-800); font-weight: 700; font-size: .9rem; text-decoration: none;
}
.region-jump a:hover { background: var(--blue-100); }
.city-region { scroll-margin-top: calc(var(--header-h) + 1rem); padding: 1.4rem 0; border-top: 1px solid var(--line-soft); }
.city-region__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin-bottom: 1rem; }
.city-region__head h2, .city-region__head p { margin: 0; }

/* ---------- data tables (town "Location & directions") ---------- */
.table-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-s); }
.data-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.data-table th, .data-table td { padding: .75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.data-table thead th { background: var(--blue-50); color: var(--blue-800); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table tbody th { font-weight: 700; }
.data-table td:last-child { text-align: right; white-space: nowrap; }
@media (max-width: 640px) { .data-table { min-width: 560px; } }

/* A link card led by a picture: the image runs edge to edge above the text. */
.card--media { padding-top: 0; overflow: hidden; }
.card--media .card__media {
  display: block; aspect-ratio: 16 / 10; margin: 0 calc(-1 * var(--card-pad, 1.4rem)) 1.1rem; overflow: hidden;
  background: var(--blue-50);
}
.card--media .card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.card--media:hover .card__media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .card--media:hover .card__media img { transform: none; } }

/* A business logo on a card: centred on white, never drawn past its real size. */
.logo-tile {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 8%; background: #fff; z-index: 1; overflow: hidden;
}
.logo-tile > img {
  position: static !important; width: auto !important; height: auto !important;
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px;
}
.photo-hero .logo-tile, .town-card__media .logo-tile, .card__media .logo-tile, .slide__media .logo-tile { position: absolute; }
.photo-hero:has(.logo-tile) { position: relative; aspect-ratio: 8 / 5; }
.logo-mark { border-radius: 14px; background: #fff; box-shadow: var(--shadow-s); flex-shrink: 0; }
.detail-hero__title { display: flex; align-items: center; gap: 1rem; }
.detail-hero__title h1 { margin: 0; }
.card--media .card__media { position: relative; }

/* /cities/ region banner and photo credits */
.city-region__banner { margin-bottom: 1rem; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 16 / 5; background: var(--blue-50); }
.city-region__banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .city-region__banner { aspect-ratio: 16 / 8; } }
.photo-credits { margin: 1.5rem 0; font-size: .85rem; color: var(--ink-mute); }
.photo-credits summary { cursor: pointer; font-weight: 700; }
.photo-credits ul { margin: .5rem 0 0; padding-left: 1.1rem; }

/* ---------- town riding guides ---------- */
.trail-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.trail-jump a { padding: .45rem .9rem; border-radius: 999px; background: var(--blue-50); border: 1px solid var(--line); font-weight: 700; font-size: .9rem; color: var(--blue-800); text-decoration: none; }
.fact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 760px) { .fact-cards { grid-template-columns: 1fr; } }
.fact-card { display: flex; flex-direction: column; gap: .25rem; padding: 1.1rem 1.2rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-s); }
.fact-card__label { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-600); }
.fact-card strong { font-size: 1.1rem; color: var(--ink); }
.fact-card span:last-child { font-size: .9rem; color: var(--ink-soft); }
.quick-answer { background: var(--white); border-left: 4px solid var(--blue-600); border-radius: var(--radius-s); padding: .9rem 1.1rem; margin: 1rem 0; }
.quick-answer p { margin: .3rem 0 0; }
.route-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.route-stats div { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-s); padding: .8rem; text-align: center; }
.route-stats strong { display: block; font-size: 1.3rem; color: var(--blue-700); }
.route-stats span { font-size: .8rem; color: var(--ink-mute); }
.route-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.route { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 6rem 8rem 8.5rem auto; align-items: center; gap: .8rem; margin: 0; padding: .7rem .9rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-s); }
.route__n { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--blue-800); color: #fff; font-weight: 800; font-size: .85rem; }
.route__name { font-weight: 700; }
.route__fact { display: flex; flex-direction: column; font-size: .9rem; }
.route__fact small { color: var(--ink-mute); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 760px) {
  .route { grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .route__fact { grid-column: 2; flex-direction: row; gap: .4rem; }
  .route .btn { grid-column: 2; justify-self: start; }
}
.trail-figure .figure { margin: 0 0 1.5rem; }
.trail-figure img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: var(--radius-l); }

/* Our own photos: shown at no more than their real width. */
.figure--own { max-width: 650px; }
.figure--own img { width: 100%; height: auto; aspect-ratio: auto; border-radius: var(--radius-l); }

/* ---------- /business/ ---------- */
.biz-hero { background: linear-gradient(150deg, var(--blue-800) 0%, var(--blue-600) 60%, var(--blue-500) 100%); color: #fff; padding: 1.4rem 0 2.6rem; }
.biz-hero .crumbs a, .biz-hero .crumbs li { color: #dbe6ff; }
.biz-hero h1 { color: #fff; max-width: 20ch; margin: .4rem 0 .8rem; }
.biz-hero .eyebrow { color: var(--sun-400); }
.biz-hero__lead { font-size: clamp(1.02rem, .96rem + .35vw, 1.2rem); color: #e8effe; max-width: 58ch; }
.biz-hero__meta { margin-top: 1rem; font-weight: 700; color: #dbe6ff; font-size: .95rem; }
.btn--outline-light { border: 2px solid rgba(255,255,255,.7); color: #fff; background: transparent; }
.btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }

.demo-video { margin: 1.4rem 0 0; }
.demo-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-l); background: var(--blue-900); box-shadow: var(--shadow); }
.demo-steps { margin: 1.2rem 0 0; padding-left: 1.3rem; display: grid; gap: .4rem; color: var(--ink-soft); }
.demo-steps strong { color: var(--blue-800); }

.region-table td, .region-table th { vertical-align: middle; }
.region-table__key { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--blue-50); color: var(--blue-700); font-weight: 800; }
.region-table .is-taken { color: var(--ink-mute); }
.region-table__status { font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.region-table__status--open { color: #1b7f4b; }
.region-table .btn { white-space: nowrap; }
@media (max-width: 640px) {
  .data-table.region-table { min-width: 0; }
  .region-table, .region-table tbody { display: block; }
  .region-table thead { display: none; }
  .region-table tr { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line-soft); }
  .region-table td, .region-table th { padding: 0; border: 0; }
  .region-table td:first-child { grid-row: span 4; }
  .region-table td:last-child { grid-column: 2; margin-top: .4rem; text-align: left; }
}

.biz-terms { padding-left: 1.2rem; color: var(--ink-soft); }
.biz-terms li { margin-bottom: .4rem; }
.biz-figure { margin: 0 0 1.4rem; }
.biz-figure img { max-height: 300px; width: 100%; object-fit: cover; border-radius: var(--radius-l); }
.biz-hero .eyebrow { background: rgba(255,255,255,.14); color: var(--sun-400); }

.detail-hero__biz { margin: 1.1rem 0 0; }

.town-search__status { margin: .7rem 0 0; color: #fff; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.town-search__status:empty { display: none; }
.town-card[hidden], .city-region[hidden], .region-jump[hidden] { display: none !important; }
.is-town-search .city-region__banner { display: none; }
img.is-stock { object-fit: cover; }
.stock-tag {
  position: absolute; right: .5rem; bottom: .5rem; z-index: 2; padding: .15rem .45rem; border-radius: 4px;
  background: rgba(10, 25, 60, .72); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .02em; pointer-events: none;
}