/* ===================================================================
   StatBid — statbid.com
   Shared styles for all pages
   Brand: deep navy + bright blue, white type on dark
   =================================================================== */


:root {
  /* Brand */
  --navy: #0c1a5b;
  --navy-deep: #081244;
  --blue: #2d83f7;
  --blue-dark: #173fb1;
  --blue-light: #5cbcf6;

  /* Surfaces */
  --bg-page: #F9FBFF;
  --bg-soft: #F9FBFF;
  --bg-dark: var(--navy);
  --bg-dark-deep: var(--navy-deep);

  /* Text */
  --text-heading: #232323;       /* near-black — matches solution pages; use var(--navy) for brand-nav elements */
  --text-primary: #232323;       /* near-black — matches live statbid.com body */
  --text-body: #232323;
  --text-muted: #6b7280;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #c7d0e8;

  /* Borders / shadows */
  --border-subtle: rgba(12, 26, 91, 0.08);
  --border-strong: rgba(12, 26, 91, 0.18);
  --shadow-card: 0 4px 14px rgba(12, 26, 91, 0.08);

  /* Type — Instrument Sans for headings (matches live), DM Sans for body */
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-body);
  background: #F9FBFF;
  -webkit-font-smoothing: antialiased;
  padding-top: 62px;
  opacity: 0;
  animation: pageFadeIn 0.2s ease forwards;
}

@keyframes pageFadeIn {
  to { opacity: 1; }
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--blue-dark);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--blue); }

/* ---- Layout ---- */

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

section {
  padding: 4.5rem 0;
}

section.tight { padding: 2.5rem 0; }

/* ---- Site nav ---- */

.site-nav {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  border-bottom: 1px solid var(--border-subtle);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.site-nav.is-scrolled {
  border-bottom-color: transparent;
  box-shadow: 0 2px 20px rgba(12, 26, 91, 0.09);
}

.site-nav > .container {
  display: flex;
  align-items: center;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  max-width: 1280px;
  gap: 1.5rem;
}

/* Brand: logomark + "StatBid" text */
.brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: var(--text-primary);
  flex-shrink: 0;
}
.brand:hover { color: var(--text-primary); }
.brand img {
  height: 42px;
  width: auto;
  display: block;
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Nav links (desktop) */
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  transform: translateY(2px);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.7rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  color: #555e6d;
  text-decoration: none;
  border-radius: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  position: relative;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-link:hover { color: var(--blue); background: var(--bg-soft); }
.nav-link[aria-current="page"] { color: var(--blue); }

/* Dropdown caret */
.nav-caret {
  width: 10px;
  height: 7px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.has-dropdown:hover .nav-caret,
.has-dropdown:focus-within .nav-caret,
.has-dropdown.is-open .nav-caret { transform: rotate(180deg); }

/* Dropdown wrapper */
.has-dropdown { position: relative; }
/* Invisible bridge that fills the gap between trigger and panel so hover stays live */
.has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -10px;
  right: -10px;
  height: 10px;
}

/* Dropdown panel */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  transform: translateY(-6px);
  width: 320px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(12, 26, 91, 0.14);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 210;
  list-style: none;
  margin: 0;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown,
.has-dropdown.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

/* Rich dropdown item: icon + title + description */
.nav-drop-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.15s ease;
}
.nav-drop-item:hover {
  background: var(--bg-soft);
  color: var(--text-primary);
}
.nav-drop-icon {
  width: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  color: var(--text-muted);
}
.nav-drop-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.nav-drop-title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-heading);
  line-height: 1.2;
}
.nav-drop-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Sub-dropdown flyout (e.g. Shopify Optimization → services) */
.nav-drop-parent {
  position: relative;
}
.nav-drop-parent::after {
  content: '';
  position: absolute;
  top: 0;
  right: -17px;
  width: 17px;
  height: 100%;
}
.nav-drop-item--has-sub {
  justify-content: space-between;
}
.nav-drop-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  margin-left: auto;
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease, color 0.15s ease;
}
.nav-drop-parent:hover .nav-drop-chevron,
.nav-drop-parent:focus-within .nav-drop-chevron {
  transform: translateX(2px);
  color: var(--blue);
}
.nav-sub-dropdown {
  position: absolute;
  top: -12px;
  left: calc(100% + 17px);
  width: 280px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(12, 26, 91, 0.14);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
  z-index: 220;
}
.nav-drop-parent:hover .nav-sub-dropdown,
.nav-drop-parent:focus-within .nav-sub-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s ease, visibility 0s linear 0s;
}

/* ---- Blog mega-menu (desktop): full-width panel with featured + recent posts ---- */
.has-mega:hover .nav-caret,
.has-mega:focus-within .nav-caret,
.has-mega.is-open .nav-caret { transform: rotate(180deg); }

/* Full-width panel, positioned below the fixed nav bar */
.nav-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 205;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.nav-mega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

/* Content aligns with the nav container (and thus the logo) */
.nav-mega__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem;
}

.nav-mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 216px));
  justify-content: start;
  gap: 2.5rem;
}

.nav-mega__card {
  display: block;
  position: relative;
  text-decoration: none;
  color: var(--text-primary);
  min-width: 0;
}
/* Vertical divider centered in the gap after the featured card */
.nav-mega__card:first-child::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1.25rem;
  width: 1px;
  background: var(--border-subtle);
}

.nav-mega__eyebrow {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-height: 0.9rem;
  margin: 0 0 0.5rem;
}

.nav-mega__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8edf8, #c7d2ee);
  position: relative;
}
.nav-mega__img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.nav-mega__card:hover .nav-mega__img-cover { transform: scale(1.04); }

.nav-mega__title {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0.625rem 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nav-mega__card:hover .nav-mega__title { color: var(--blue); }

.nav-mega__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.nav-mega__meta a {
  color: inherit;
  text-decoration: none;
}
.nav-mega__meta a:hover { color: var(--blue); }
.nav-mega__dot { color: var(--text-muted); }

/* Loading skeleton */
.nav-mega__img--skel,
.nav-mega__title-skel {
  background: linear-gradient(90deg, #eef1f6 25%, #e2e7f0 50%, #eef1f6 75%);
  background-size: 200% 100%;
  animation: navMegaShimmer 1.5s infinite linear;
}
.nav-mega__title-skel {
  height: 13px;
  width: 80%;
  border-radius: 4px;
  margin: 0.75rem 0 0;
}
@keyframes navMegaShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* The mega-menu is desktop-only; the mobile nav uses a plain Blog link */
@media (max-width: 759px) {
  .nav-mega { display: none; }
}

/* CTA pill — far right on desktop */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.42rem 1rem;
  background: linear-gradient(180deg, #1b67ce 0%, var(--blue) 100%);
  border: 1px solid #377ede;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.27);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
  transition: filter 0.15s ease;
}
.nav-cta:hover {
  filter: brightness(1.06);
  color: #fff;
}

/* Hamburger (mobile only; hidden on desktop) */
.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0.4rem;
  cursor: pointer;
  color: var(--text-primary);
  flex-shrink: 0;
  margin-left: auto;
}

/* ---- Hamburger → X animation ---- */
.hb-bar {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
.site-nav.is-menu-open .hb-bar--top { transform: translateY(6.75px) rotate(45deg); }
.site-nav.is-menu-open .hb-bar--mid { opacity: 0; }
.site-nav.is-menu-open .hb-bar--bot { transform: translateY(-6.75px) rotate(-45deg); }

/* ---- Mobile dropdown menu ---- */
.nav-mobile-menu {
  display: none; /* shown only at mobile breakpoint */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 8px 32px rgba(12, 26, 91, 0.10);
  padding: 0.5rem 0 1.5rem;
  z-index: 10;
  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}
.site-nav.is-menu-open .nav-mobile-menu {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.nav-mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile plain link */
.nav-mobile-link {
  display: flex;
  align-items: center;
  padding: 0.875rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
}
.nav-mobile-link:hover { color: var(--blue); }
.nav-mobile-link[aria-current="page"] { color: var(--blue); font-weight: 600; }

/* Mobile accordion trigger */
.nav-mobile-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0.875rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  text-align: left;
}
.nav-mobile-trigger .nav-caret {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.nav-mobile-has-sub.is-open > .nav-mobile-trigger .nav-caret { transform: rotate(180deg); }
.nav-mobile-has-sub.is-open > .nav-mobile-trigger { border-bottom-color: transparent; }

/* Mobile accordion sub-list */
.nav-mobile-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-mobile-has-sub.is-open > .nav-mobile-sub { max-height: 1000px; }
.nav-mobile-sub li { border-bottom: 1px solid var(--border-subtle); }
.nav-mobile-sub > li > a {
  display: block;
  padding: 0.65rem 1.5rem 0.65rem 2.75rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
}
.nav-mobile-sub > li > a:hover { color: var(--blue); }
.nav-mobile-sub > li > a[aria-current="page"] { color: var(--blue); font-weight: 600; }

/* Nested Shopify trigger — indented to match sub-item level */
.nav-mobile-trigger--nested {
  padding-left: 2.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}
/* Nested sub-links — one level deeper, indented dividers */
.nav-mobile-sub--nested > li > a {
  padding-left: 4rem;
}
.nav-mobile-sub--nested > li {
  border-bottom: none;
  position: relative;
}
.nav-mobile-sub--nested > li:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 2.75rem;
  right: 0;
  height: 1px;
  background: var(--border-subtle);
}

/* Mobile CTA */
.nav-cta--mobile {
  display: flex;
  justify-content: center;
  margin: 1.25rem 1.5rem 0;
  padding: 0.8rem 1.5rem;
}

/* Overlay behind mobile menu */
.nav-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-height: 100vh;
  background: rgba(12, 26, 91, 0.35);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.nav-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Hero (light, two-column, matches live statbid.com) ---- */

.hero {
  background: #F9FBFF;
  color: var(--text-primary);
  padding: 4rem 0 5rem;
  text-align: left;
}

.hero .container {
  max-width: 1280px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(2.5rem, 5.5vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin-bottom: 1.5rem;
  color: #232323;
  max-width: 14ch;
}

.hero-copy h1 .accent {
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-decoration-thickness: 4px;
  text-underline-offset: 6px;
}

.hero-copy .subtitle {
  font-size: 1.05rem;
  font-weight: 400;
  color: #232323;
  max-width: 36ch;
  margin: 0 0 1.75rem;
  line-height: 1.55;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #1b67ce 0%, var(--blue) 100%);
  border: 1px solid #377ede;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.27);
  color: #fff;
  padding: 0.55rem 1rem;
  border-radius: 50px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: filter 0.15s ease;
}
.hero-cta:hover {
  filter: brightness(1.06);
  color: #fff;
}
.hero-cta--secondary {
  background: #f3f4f6;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-primary);
}
.hero-cta--secondary:hover {
  filter: none;
  background: #f1f1f2;
  color: var(--text-primary);
}
.hero-cta--blue-bg {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 0.75px 1.875px rgba(0,0,0,0.18);
  color: var(--blue);
}
.hero-cta--blue-bg:hover {
  background: #f0f0f0;
  color: var(--blue);
  filter: none;
}

/* Hero carousel (testimonial photos with overlay quote card) */
.hero-carousel {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--bg-soft);
  box-shadow: 0 12px 32px rgba(12, 26, 91, 0.18);
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--navy); /* fallback if image fails */
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 1;
}

.hero-slide.active { opacity: 1; z-index: 2; }

.hero-slide-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  border-radius: 6px;
  padding: 1.4rem 1.5rem;
  max-width: 92%;
}

.hero-slide-card .quote-mark {
  color: var(--blue);
  font-size: 2rem;
  line-height: 0;
  vertical-align: -0.5rem;
  margin-right: 0.2rem;
  font-family: Georgia, serif;
}

.hero-slide-card p.quote {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.45;
  margin: 0 0 0.85rem;
}

.hero-slide-card .who {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.hero-slide-card .who strong {
  color: var(--text-primary);
  font-weight: 700;
}

.hero-pagination {
  position: absolute;
  bottom: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 2;
}

.hero-pagination button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: background 0.2s ease;
}

.hero-pagination button.active { background: #fff; }

@media (max-width: 880px) {
  .hero .container { grid-template-columns: 1fr; gap: 2rem; }
  .hero-copy h1 { max-width: none; }

  /* Mobile carousel: compact horizontal card. Photo becomes a small circular
     avatar; quote + attribution sit in the card body. Slides overlap via grid
     stacking so the container sizes to the tallest slide automatically. */
  .hero-carousel {
    aspect-ratio: auto;
    max-width: 100%;
    width: 100%;
    min-height: 0;
    background: var(--bg-soft);
    border-radius: 8px;
    padding: 1.25rem 1.25rem 2.25rem;
    box-shadow: 0 4px 14px rgba(12, 26, 91, 0.08);
    overflow: visible;
    display: grid;
    grid-template-areas: "stack";
  }
  .hero-slide {
    position: relative;
    inset: auto;
    grid-area: stack;
    padding: 0;
    background-image: none !important;
    background-color: transparent;
    box-shadow: none;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1rem;
    align-items: center;
  }
  .hero-slide::before {
    content: '';
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-image: var(--avatar);
    background-size: cover;
    background-position: center 22%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  }
  .hero-slide-card {
    background: transparent;
    backdrop-filter: none;
    padding: 0;
    max-width: none;
  }
  .hero-slide-card p.quote {
    font-size: 0.95rem;
    line-height: 1.45;
    margin-bottom: 0.5rem;
  }
  .hero-slide-card .who {
    font-size: 0.78rem;
  }
  .hero-pagination {
    bottom: 0.6rem;
  }
  .hero-pagination button {
    background: rgba(12, 26, 91, 0.25);
  }
  .hero-pagination button.active {
    background: var(--blue);
  }

  /* Mobile nav: hide desktop links/CTA, show hamburger + dropdown menu */
  .nav-links { display: none; }
  .nav-cta:not(.nav-cta--mobile) { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile-menu { display: block; }
}

/* ---- Buttons ---- */

.btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-primary {
  background: var(--blue);
  color: #fff;
}
.btn-primary:hover { background: var(--blue-light); color: var(--navy); }

.btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}
.btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.05); }

.btn-ghost {
  background: transparent;
  color: var(--blue-dark);
  border-color: var(--blue-dark);
}
.btn-ghost:hover { background: var(--blue-dark); color: #fff; }

/* ---- Typography ---- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: 2.5rem; margin-bottom: 0.75rem; }
h2 { font-size: 2rem; margin-bottom: 1rem; }
h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
h4 { font-size: 1.1rem; margin-bottom: 0.5rem; }

p { margin-bottom: 1.1rem; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 0.75rem;
}

.section-title {
  text-align: center;
  margin-bottom: 0.75rem;
}

.section-intro {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto 3rem;
  color: var(--text-muted);
  font-size: 1.05rem;
}

ul, ol { margin: 0 0 1.1rem 1.4rem; }
li { margin-bottom: 0.4rem; }

blockquote {
  border-left: 3px solid var(--blue);
  padding: 0.5rem 0 0.5rem 1.25rem;
  margin: 1.5rem 0;
  color: var(--text-primary);
  font-style: italic;
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--bg-soft);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

pre {
  background: var(--navy-deep);
  color: #e8eaf6;
  padding: 1.2rem;
  border-radius: 6px;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}
pre code { background: none; padding: 0; color: inherit; }

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: 2.5rem 0;
}

/* ---- Cards / grid ---- */

.grid {
  display: grid;
  gap: 1.5rem;
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(12, 26, 91, 0.12);
}

.card h3 { color: var(--text-primary); margin-bottom: 0.5rem; }
.card p { color: var(--text-muted); font-size: 0.95rem; }
.card a.card-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--blue-dark);
}

/* ---- Solutions cards (homepage) ---- */

.solution-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 2rem 1.75rem 1.75rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(12, 26, 91, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.solution-card:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
  box-shadow: 0 12px 28px rgba(12, 26, 91, 0.14);
}

.solution-card .solution-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(45, 131, 247, 0.1);
  color: var(--blue);
  margin-bottom: 1.1rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.solution-card .solution-icon svg {
  width: 22px;
  height: 22px;
}

.solution-card:hover .solution-icon {
  background: var(--blue);
  color: #fff;
}

.solution-card h3 {
  color: var(--text-heading);
  margin-bottom: 0.6rem;
  font-size: 1.2rem;
}

.solution-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 1.1rem;
}

.solution-card .card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue);
  transition: gap 0.2s ease;
}

.solution-card:hover .card-cta {
  gap: 0.65rem;
}

/* ---- CTA band (white-on-blue, copy + pill button) ---- */

.cta-band {
  background: var(--navy);
  color: #fff;
  padding: 3rem 0;
  border-radius: 18px;
  margin-bottom: 20px;
}

.cta-band .container {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.5rem;
  align-items: center;
  max-width: 980px;
}

.cta-band-copy h2 {
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.65rem;
  max-width: 24ch;
}

.cta-band-copy p {
  color: var(--text-on-dark-muted);
  font-size: 1rem;
  margin: 0;
  max-width: 50ch;
}

.cta-band-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  white-space: nowrap;
  padding: 1.1rem 1.5rem 1.1rem 2.25rem;
  box-shadow: none;
}
.cta-band-btn:hover {
  box-shadow: none;
  transform: translateY(-1px);
}

.cta-band-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}

.cta-band-arrow svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 720px) {
  .cta-band .container { grid-template-columns: 1fr; gap: 1.75rem; text-align: center; }
  .cta-band-copy h2 { max-width: none; }
  .cta-band-copy p { margin-left: auto; margin-right: auto; }
  .cta-band-btn { justify-self: center; }
}

/* ---- Callout quote (laptop mockup + navy card overlay) ---- */

.callout-quote {
  background: #F9FBFF;
  padding: 4rem 0;
}

.callout-quote .container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

.callout-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.callout-card {
  background: var(--navy);
  color: #fff;
  padding: 2.5rem 2.25rem;
  border-radius: 6px;
  box-shadow: 0 16px 36px rgba(12, 26, 91, 0.28);
  position: relative;
  z-index: 2;
}

.callout-mark {
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 0.6;
  color: var(--blue-light);
  display: block;
  margin-bottom: 0.5rem;
}

.callout-quote .quote-big {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 1.5rem;
}

.callout-quote .quote-attr {
  font-size: 0.95rem;
  color: var(--text-on-dark-muted);
  margin: 0;
  line-height: 1.5;
}

.callout-quote .quote-attr strong {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

.callout-quote .quote-attr a {
  color: var(--blue-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Desktop: photo + overlapping card layout */
@media (min-width: 760px) {
  .callout-quote .container {
    grid-template-columns: 1fr;
  }
  .callout-image {
    width: 70%;
    grid-row: 1;
    grid-column: 1;
  }
  .callout-card {
    width: 38%;
    max-width: 420px;
    grid-row: 1;
    grid-column: 1;
    justify-self: end;
    align-self: center;
    margin-right: 2%;
  }
}

@media (max-width: 759px) {
  .callout-image { margin-bottom: -3rem; }
  .callout-card {
    margin: 0 1rem;
    padding: 2rem 1.5rem;
  }
  .callout-mark { font-size: 4rem; }
}

/* ---- Section variations ---- */

.section-dark {
  background: var(--navy);
  color: var(--text-on-dark);
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: var(--text-on-dark-muted); }
.section-dark a { color: var(--blue-light); }

.section-soft {
  background: var(--bg-soft);
}

/* ---- Testimonials ---- */

.testimonials {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.testimonial {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
}

.testimonial blockquote {
  border-left: none;
  padding-left: 0;
  margin: 0 0 1rem 0;
  font-style: normal;
  color: var(--text-body);
  font-size: 1.02rem;
  line-height: 1.6;
}

.testimonial blockquote::before {
  content: "“";
  font-family: Georgia, serif;
  font-size: 3rem;
  line-height: 0.8;
  color: var(--blue);
  margin-right: 0.2rem;
  vertical-align: -0.4rem;
}

.testimonial .attribution {
  font-size: 0.9rem;
  color: var(--text-muted);
}
.testimonial .attribution strong {
  color: var(--text-primary);
  display: block;
  margin-bottom: 0.1rem;
}

/* ---- Client logo marquee section + eyebrow ---- */

.logo-marquee-section {
  padding: 1.875rem 0;
}

.logo-marquee__eyebrow {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

/* ---- Client logo marquee — infinite scroll ----
   Track contains two copies of the logo set; animation translates the
   whole track from 0 to -50%, which lands the second copy exactly where
   the first started. Loops seamlessly. Mask gradient fades edges so logos
   don't pop in/out abruptly. Duplicate set is aria-hidden so screen
   readers only announce each client once. Hover pauses the scroll. */

.logo-marquee {
  width: 100%;
  overflow: hidden;
  padding: 0.75rem 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

.logo-marquee__track {
  display: flex;
  align-items: center;
  gap: 5rem;
  width: max-content;
  animation: logo-scroll 30s linear infinite;
}

.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track {
  animation-play-state: paused;
}

.logo-marquee a {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.logo-marquee__logo {
  height: 28px;
  width: auto;
  max-width: none;
  display: block;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.logo-marquee a:hover .logo-marquee__logo,
.logo-marquee a:focus-visible .logo-marquee__logo {
  opacity: 1;
  filter: grayscale(0%);
}

/* Per-logo optical sizing */
.logo-marquee__logo[src*="monkeysports"]     { height: 36px; }
.logo-marquee__logo[src*="tackledirect"]     { height: 30px; }
.logo-marquee__logo[src*="outdoor-research"] { height: 30px; }

@keyframes logo-scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation-duration: 90s; }
}

@media (max-width: 999px) {
  .logo-marquee { padding: 1rem 0; }
  .logo-marquee__track {
    gap: 3.5rem;
    animation-duration: 28s;
  }
  .logo-marquee__logo { height: 26px; }
  .logo-marquee__logo[src*="monkeysports"] { height: 32px; }
  .logo-marquee__logo[src*="tackledirect"] { height: 26px; }
  .logo-marquee__logo[src*="outdoor-research"] { height: 26px; }
}

@media (max-width: 600px) {
  .logo-marquee {
    padding: 0.75rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  }
  .logo-marquee__track {
    gap: 2.5rem;
    animation-duration: 22s;
  }
  .logo-marquee__logo { height: 22px; opacity: 0.8; }
  .logo-marquee__logo[src*="monkeysports"] { height: 28px; }
  .logo-marquee__logo[src*="tackledirect"] { height: 22px; }
  .logo-marquee__logo[src*="outdoor-research"] { height: 22px; }
}

@media (max-width: 600px) {
  .client-logos { gap: 1.25rem 2rem; }
  .client-logos img { max-height: 36px; max-width: 130px; }
}

/* ---- Partnerships (B-Corp etc) ---- */

.partnerships {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  padding: 2rem 0;
}

.partnerships .partner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-on-dark-muted);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.partnerships .partner img {
  max-height: 90px;
  width: auto;
  filter: brightness(1.05);
}

/* ---- Team grid ---- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem;
}

.team-member {
  text-align: center;
  background: var(--bg-soft);
  border-radius: 6px;
  padding: 1.5rem 1rem;
}

.team-member .avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 auto 0.75rem;
}

.team-member .name {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
  font-size: 1rem;
}

.team-member .title {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* ---- Blog listing ---- */

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-list li {
  border-bottom: 1px solid var(--border-subtle);
  padding: 1.5rem 0;
}
.post-list li:first-child { padding-top: 0; }
.post-list li:last-child { border-bottom: none; }

.post-list a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.post-list .post-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.post-list a:hover .post-title { color: var(--blue-dark); }

.post-list .post-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.post-list .post-meta .author {
  font-weight: 600;
  color: var(--blue-dark);
}

.post-list .post-summary {
  color: var(--text-body);
  font-size: 0.97rem;
  line-height: 1.55;
}

/* ---- Article (blog post) ---- */

article.post {
  padding: 3rem 0 4rem;
}

article.post header {
  text-align: center;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-subtle);
}

article.post h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 1rem;
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.2;
}

article.post .post-meta {
  font-size: 0.95rem;
  color: var(--text-muted);
}

article.post .post-meta .author {
  color: var(--blue-dark);
  font-weight: 600;
}

article.post .article-body {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.75;
}

article.post .article-body h2 {
  font-size: 1.55rem;
  margin-top: 2.5rem;
  margin-bottom: 0.85rem;
}

article.post .article-body h3 {
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

article.post .article-body p {
  margin-bottom: 1.3rem;
}

article.post .article-body a {
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

article.post .article-body img {
  border-radius: 6px;
  margin: 1.5rem auto;
}

article.post .article-body ul,
article.post .article-body ol {
  margin-left: 1.5rem;
  margin-bottom: 1.3rem;
}

/* ---- Author card (end of post) ---- */

.author-card {
  max-width: 720px;
  margin: 3rem auto 0;
  padding: 1.75rem;
  background: var(--bg-soft);
  border-radius: 6px;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.author-card .avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.author-card .author-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  text-decoration: none;
}
.author-card .author-name:hover { color: var(--blue-dark); }

.author-card .author-title {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.author-card p {
  font-size: 0.95rem;
  color: var(--text-body);
  margin-bottom: 0;
}

/* ---- Author page ---- */

.author-header {
  text-align: center;
  padding: 3rem 0 2rem;
}

.author-header .avatar-lg {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 2.4rem;
  margin: 0 auto 1.25rem;
}

.author-header h1 { margin-bottom: 0.25rem; }
.author-header .role {
  color: var(--blue-dark);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.author-header .bio {
  max-width: 56ch;
  margin: 0 auto;
  color: var(--text-body);
}

/* ---- Forms ---- */

.form {
  max-width: 560px;
  margin: 0 auto;
}

.field {
  margin-bottom: 1.1rem;
}

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.5;
}

.field .required {
  color: var(--blue-dark);
  margin-left: 0.15rem;
}

.field-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: right;
}

.field-hint.is-over {
  color: #b00020;
}

/* Honeypot — visually and assistively hidden, still present in DOM for bots */
.field-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-card {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 2rem 2.25rem;
  box-shadow: var(--shadow-card);
}

.form-actions {
  margin-top: 1.4rem;
}

.form-status {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-size: 0.95rem;
}

.form-status[hidden] { display: none; }

.form-status.is-success {
  background: rgba(45, 131, 247, 0.08);
  color: var(--navy);
  border: 1px solid rgba(45, 131, 247, 0.25);
}

.form-status.is-error {
  background: rgba(176, 0, 32, 0.06);
  color: #b00020;
  border: 1px solid rgba(176, 0, 32, 0.25);
}

@media (max-width: 540px) {
  .form-card { padding: 1.5rem 1.25rem; }
}

/* ---- Footer ---- */

.site-footer {
  background: var(--navy);
  color: var(--text-on-dark-muted);
  padding: 4rem 0 2rem;
  font-size: 0.92rem;
  border-radius: 18px 18px 0 0;
}

.page-wrap {
  position: relative;
  z-index: 1;
  background: var(--bg-soft);
  border-radius: 0 0 18px 18px;
  overflow: hidden;
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1.2fr 1fr auto;
  gap: 3rem;
  margin-bottom: 3rem;
  align-items: start;
}

.site-footer .footer-logo {
  height: 44px;
  width: auto;
  margin-bottom: 1.25rem;
}

.site-footer .footer-tagline {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-on-dark-muted);
  margin-bottom: 1.5rem;
  max-width: 32ch;
}

/* Social icons */
.site-footer .footer-social {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.site-footer .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background 0.2s ease, transform 0.2s ease;
}

.site-footer .footer-social a:hover {
  background: var(--blue);
  transform: translateY(-1px);
}

.site-footer .footer-social svg {
  width: 18px;
  height: 18px;
}

/* Clutch widget — data-theme="white" gives white text for our navy footer */
.site-footer .footer-clutch {
  display: inline-block;
  margin-top: 0.5rem;
  min-height: 44px;
  line-height: 0;
}

.site-footer .footer-clutch .clutch-widget {
  display: inline-block;
}

/* Static stand-in shown by default, so the slot is never empty while we wait on
   Clutch's script (their CDN intermittently 403s it, and waiting meant seconds
   of blank footer). Hidden only once the live widget has actually built —
   see .footer-clutch.is-live below. Reuses the .social-proof__rating star
   treatment from the solutions pages, recoloured for a dark background. */
.site-footer .footer-clutch__fallback {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px; /* fill the reserved slot, so the swap shifts nothing */
  line-height: 1;
  text-decoration: none;
  color: var(--text-on-dark);
  transition: opacity 0.2s ease;
}

/* The live widget has rendered — retire the stand-in. */
.site-footer .footer-clutch.is-live .footer-clutch__fallback {
  display: none;
}

.site-footer .footer-clutch__fallback:hover {
  opacity: 0.8;
}

.site-footer .footer-clutch__stars {
  display: flex;
  gap: 1px;
  color: #ffffff;
  line-height: 0;
}

.site-footer .footer-clutch__text {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-on-dark);
  line-height: 1;
}


/* B-Corp seal — clean, no card */
.site-footer .footer-bcorp-card {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.site-footer .footer-bcorp-card a {
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.site-footer .footer-bcorp-card a:hover { opacity: 0.85; }

.site-footer .footer-bcorp-card img {
  height: 130px;
  width: auto;
  display: block;
}

.site-footer h2 {
  color: #fff;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  font-weight: 700;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li { margin-bottom: 0.55rem; }

.site-footer a {
  color: var(--text-on-dark-muted);
  transition: color 0.15s ease;
}
.site-footer a:hover { color: #fff; }

.site-footer .footer-bottom {
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.25rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

.site-footer .footer-legal {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

@media (max-width: 880px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .site-footer .footer-bcorp-card { grid-column: span 2; justify-self: start; }
}

@media (max-width: 540px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; }
  .site-footer .footer-bcorp-card { grid-column: span 1; }
}

/* ---- Legal content (privacy, cookie) ---- */

.legal-content { font-size: 0.97rem; line-height: 1.7; }
.legal-content p { margin-bottom: 1.1rem; }
.legal-content p > strong { display: block; margin-top: 1.6rem; margin-bottom: 0.4rem; font-size: 1.05rem; color: var(--text-primary); }
.legal-content ul { margin-left: 1.5rem; margin-bottom: 1.1rem; }
.legal-content li { margin-bottom: 0.4rem; }
.legal-content a { color: var(--blue-dark); text-decoration: underline; }

/* ---- Service page (solutions) ---- */

.service-content {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.7;
}

.service-content h2 {
  font-size: 1.6rem;
  margin-top: 2.5rem;
  margin-bottom: 0.85rem;
}

.service-content h3 {
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.service-content p { margin-bottom: 1.2rem; }

.service-content ul, .service-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1.3rem;
}

/* ---- Section pills / badges (shared across solution pages) ---- */

/* Section eyebrow label — white bg */
.prob-eyebrow {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #f6f6f6;
  border-radius: 999px;
  padding: 5px 12px;
  color: #2d4a1e;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  width: fit-content;
}

/* Section eyebrow label — dark/blue bg */
.prob-eyebrow--on-dark {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.88);
}
.prob-eyebrow--blue {
  border-color: var(--blue);
  color: var(--blue);
}

/* Solid-fill badge pill */
.prob-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  width: fit-content;
}
.prob-badge--amber { background: #c3942c; }
.prob-badge--blue  { background: var(--blue); }

/* ---- Solution page template (new — see solutions/_template.html) ---- */

/* All solution page section containers use 1280px — matches hero width */
.solutions-page .container { max-width: 1280px; }

/* Hero — narrower than home, copy-only (no carousel side) */
.solution-hero {
  background: #fff;
  padding: 5rem 0 4rem;
  border-bottom: 1px solid var(--border-subtle);
}

.solution-hero .container {
  max-width: 1280px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: center;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.solution-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 1rem;
}

.solution-hero__eyebrow--shopify {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #f4f4f4;
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  color: #2d4a1e;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
  cursor: default;
}

.solution-hero__eyebrow--shopify:hover {
  background: #f8fdf5;
  border-color: #e4f0d8;
}

.solution-hero__eyebrow--shopify .eyebrow-icon {
  width: 23px;
  height: 23px;
  background: #f0f9e9;
  border: 1px solid #e2f0d9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.solution-hero__eyebrow--shopify .eyebrow-icon img {
  width: 65%;
  height: auto;
  display: block;
}

.solution-hero__eyebrow a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.solution-hero__eyebrow a:hover {
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.solution-hero h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #232323;
}

.solution-hero__subtitle {
  font-family: var(--font-display);
  font-size: 1.0rem;
  font-weight: 500;
  line-height: 1.55;
  color: #4b5563;
  letter-spacing: normal;
  margin: 0 0 2rem;
}

/* Section sizing — slightly more compact than home sections */
.solution-section {
  padding: 4rem 0;
}

.solution-section--soft {
  background: #fff;
}

.solution-section h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--text-heading);
}

.solution-section .container-narrow > p,
.solution-section .container-narrow > ol > li {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-body);
}

.solution-section .container-narrow .eyebrow {
  display: block;
  margin-bottom: 0.6rem;
}

/* What-we-do areas (3-up grid of icon + headline + body) */
.solution-areas .solution-area {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 2rem 1.75rem 1.75rem;
  box-shadow: 0 2px 8px rgba(12, 26, 91, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.solution-area__num {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: rgba(12, 26, 91, 0.25);
}

.solution-area:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 12px 28px rgba(12, 26, 91, 0.12);
}

.solution-area__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(45, 131, 247, 0.1);
  color: var(--blue);
  margin-bottom: 1rem;
}

.solution-area__icon svg {
  width: 22px;
  height: 22px;
}

.solution-area h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 0.5rem;
}

.solution-area p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

/* Process — numbered list, slightly punched up */
.solution-process {
  list-style: none;
  counter-reset: solution-process;
  padding: 0;
  margin: 1.5rem 0 0;
}

.solution-process li {
  counter-increment: solution-process;
  position: relative;
  padding: 0 0 1.5rem 3rem;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-body);
}

.solution-process li::before {
  content: counter(solution-process);
  position: absolute;
  left: 0;
  top: -2px;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: var(--font-display);
}

.solution-process li:last-child {
  padding-bottom: 0;
}

.solution-process li strong {
  color: var(--text-heading);
}

/* Pull quote — lighter than home's Mike McClung treatment */
.solution-pullquote {
  background: var(--navy);
  color: #fff;
  padding: 4rem 0 2rem;                   /* halved gaps top + bottom */
  text-align: center;
  position: relative;
  overflow: hidden;
}

.solution-pullquote::before {
  content: '\201C';                       /* large background quote glyph */
  position: absolute;
  top: -0.5rem;                           /* nudged down 8px from prior -1rem */
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, serif;
  font-size: 12rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.06);
  pointer-events: none;
  user-select: none;
}

.solution-pullquote .container-narrow {
  position: relative;                     /* sits above the glyph */
  z-index: 1;
  padding-top: 1rem;                      /* halved */
}

.solution-pullquote__quote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: #fff;
  margin: 0 0 1.25rem;
  max-width: 38ch;
  margin-left: auto;
  margin-right: auto;
}

.solution-pullquote__attr {
  font-size: 0.9rem;
  color: var(--text-on-dark-muted);
  margin: 0;
}

.solution-pullquote__attr strong {
  color: #fff;
}

.solution-pullquote__attr a {
  color: var(--blue-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* FAQ — uses native <details> for zero JS */
.solution-faq {
  margin-top: 2rem;
}

.solution-faq details {
  border-top: 1px solid var(--border-subtle);
  padding: 1.25rem 0;
}

.solution-faq details:last-child {
  border-bottom: 1px solid var(--border-subtle);
}

.solution-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-heading);
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.solution-faq summary::-webkit-details-marker {
  display: none;
}

.solution-faq summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--blue);
  line-height: 1;
  transition: transform 0.15s ease;
}

.solution-faq details[open] summary::after {
  content: '−';
}

.solution-faq details p {
  margin-top: 0.75rem;
  color: var(--text-body);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 820px) {
  .solution-hero { padding: 3.5rem 0 3rem; }
  .solution-hero .container { grid-template-columns: 1fr; gap: 2rem; }
  .solution-section { padding: 3rem 0; }
  .solution-pullquote { padding: 3rem 0; }
}

/* ---- Utilities ---- */

.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-2 { margin-bottom: 2rem; }

/* ---- Responsive ---- */

@media (max-width: 820px) {
  body { font-size: 16px; }
  section { padding: 3.5rem 0; }
  .hero { padding: 4rem 0 3rem; }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.6rem; }
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; }
}