/*
  WINS Marketplace theme -- Bootstrap 5.3 first.
  This file only overrides Bootstrap CSS variables and adds the handful of
  components Bootstrap doesn't ship (bottom app nav, avatar, rating chip,
  hero gradient). Everything else (grid, cards, buttons, forms, accordion,
  badges) is stock Bootstrap -- no bespoke grid/card system anymore.
*/

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

:root {
  --bs-primary: #232326;
  --bs-primary-rgb: 35, 35, 38;
  --bs-warning: #7C3AED;
  --bs-warning-rgb: 124, 58, 237;
  --bs-body-font-family: 'Inter', sans-serif;

  --wins-navy: #26262a;
  --wins-navy-dark: #0e0e10;
  /* Brand accent -- purple (was gold #c5a063). Kept the --wins-mint variable
     name to avoid a mass find/replace across templates; it's purple now. */
  --wins-mint: #7C3AED;
  --wins-mint-dark: #5B21B6;
  --wins-mint-light: #F1E9FE;
  --wins-gradient-purple: linear-gradient(135deg, #9333EA 0%, #6D28D9 55%, #4C1D95 100%);
  --wins-gradient-purple-hover: linear-gradient(135deg, #7E22CE 0%, #5B21B6 55%, #3B0764 100%);
  /* Star-rating color -- kept warm/gold on purpose so ratings stay a
     recognizable, high-contrast signal against the new purple brand. */
  --wins-gold: #D4AF37;

  /* Bootstrap's default --bs-secondary-color (rgba(33,37,41,.75)) reads as
     dull/washed-out for body copy like card descriptions -- darken it. This
     backs both .text-muted and .text-body-secondary. */
  --bs-secondary-color: rgba(33, 37, 41, 0.92);
  --bs-secondary-color-rgb: 33, 37, 41;
}

body {
  font-family: var(--bs-body-font-family);
}

a {
  text-decoration: none;
}

.btn-mint {
  background: var(--wins-gradient-purple);
  border-color: transparent;
  color: #fff;
}
.btn-mint:hover {
  background: var(--wins-gradient-purple-hover);
  color: #fff;
}

/* Bootstrap 5.3 bakes .nav-pills' active background as a literal compiled
   value (not a live var(--bs-primary) reference), so the :root override
   above never reaches it -- override the component directly. */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--wins-gradient-purple);
  color: #fff;
}

.text-mint {
  color: var(--wins-mint) !important;
}

.agency-card-v2 {
  border: 1px solid #e5e7ee !important;
}

.agency-card-title-link {
  color: var(--wins-mint);
  text-decoration: none;
  transition: color .15s ease;
}
.agency-card-title-link:hover,
.agency-card-title-link:focus {
  color: #000;
  text-decoration: none;
}

.agency-card-add-review-link {
  color: var(--wins-mint);
  text-decoration: none;
  font-weight: 600;
  transition: color .15s ease;
}
.agency-card-add-review-link:hover,
.agency-card-add-review-link:focus {
  color: #000;
  text-decoration: none;
}

/* ---------- How WINS Works (3-step process, vertical list) ---------- */
.how-it-works-vlist {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.how-it-works-vlist::before {
  content: '';
  position: absolute;
  top: 36px;
  bottom: 36px;
  left: 36px;
  width: 2px;
  background-image: linear-gradient(currentColor 0, currentColor 6px, transparent 6px, transparent 14px);
  background-size: 2px 14px;
  background-repeat: repeat-y;
  color: rgba(0, 0, 0, .12);
  transform: translateX(-1px);
  z-index: 0;
}
.how-it-works-vstep {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: var(--step-delay, 0s);
}
.how-it-works-vstep.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.how-it-works-icon {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how-it-works-num {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .how-it-works-vstep {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- How WINS Works: floating browser mockup graphic ---------- */
.hiw-mockup-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
  animation: hiwFloatWrap 6s ease-in-out infinite;
}
.hiw-mockup-browser {
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
.hiw-mockup-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .65rem .85rem;
  background: #f1f2f6;
  border-bottom: 1px solid #e5e7ee;
}
.hiw-mockup-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.hiw-mockup-url {
  margin-left: .5rem;
  font-size: .72rem;
  color: #6b7180;
  background: #fff;
  border: 1px solid #e5e7ee;
  border-radius: 1rem;
  padding: .15rem .75rem;
  flex-grow: 1;
}
.hiw-video-stage {
  position: relative;
  min-height: 210px;
  padding: 1.5rem 1.25rem;
  background: #f6f7fb;
  overflow: hidden;
}
.hiw-scene {
  position: absolute;
  inset: 0;
  padding: 1.5rem 1.25rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.hiw-scene.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hiw-video-search {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border: 1px solid #e5e7ee;
  border-radius: 2rem;
  padding: .85rem 1.1rem;
  margin-top: 2.5rem;
  color: #384164;
  font-weight: 600;
  font-size: .9rem;
  box-shadow: 0 8px 20px rgba(10, 22, 51, .06);
}
.hiw-video-search-icon {
  color: var(--wins-mint, #1abc9c);
  flex-shrink: 0;
}
.hiw-typewriter {
  white-space: nowrap;
}
.hiw-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: 2px;
  vertical-align: middle;
  animation: hiwCaretBlink 1s steps(2) infinite;
}
.hiw-compare-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7180;
  margin-bottom: .75rem;
}
.hiw-compare-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  overflow: hidden;
  border-radius: .75rem;
}
.hiw-mini-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  background: #fff;
  border: 1px solid #e5e7ee;
  border-radius: .75rem;
  padding: .65rem .85rem;
}
.hiw-mini-avatar {
  width: 32px;
  height: 32px;
  border-radius: .5rem;
  background: linear-gradient(135deg, var(--bs-primary), var(--wins-mint));
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hiw-mini-name {
  font-weight: 700;
  color: #14213d;
  font-size: .82rem;
}
.hiw-mini-stars {
  font-size: .7rem;
  color: #f5a623;
  letter-spacing: 1px;
}
.hiw-mini-stars span {
  color: #6b7180;
  margin-left: .2rem;
  font-weight: 600;
  letter-spacing: normal;
}
.hiw-scan-beam {
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(26, 188, 156, .18), transparent);
  animation: hiwScan 2.2s ease-in-out infinite;
}
.hiw-mini-card-best {
  position: relative;
  border-color: var(--wins-mint, #1abc9c);
  box-shadow: 0 10px 24px rgba(26, 188, 156, .18);
  margin-top: 1.75rem;
}
.hiw-mockup-best-badge {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--wins-mint, #1abc9c);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .2rem .55rem;
  border-radius: 1rem;
}
.hiw-connect-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1.1rem;
  color: var(--wins-mint, #1abc9c);
}
.hiw-connect-line {
  stroke: currentColor;
}
.hiw-connect-dot {
  fill: currentColor;
}
.hiw-connect-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: .35rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--wins-mint-dark, #159480);
}
@keyframes hiwCaretBlink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@keyframes hiwScan {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}
@media (prefers-reduced-motion: reduce) {
  .hiw-scene {
    transition: none;
  }
  .hiw-caret,
  .hiw-scan-beam {
    animation: none;
  }
  .hiw-scan-beam {
    display: none;
  }
}
.hiw-float-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  color: #14213d;
  font-size: .78rem;
  font-weight: 700;
  padding: .55rem .9rem;
  border-radius: 2rem;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
}
.hiw-float-badge-1 {
  top: -18px;
  right: -18px;
  color: var(--wins-mint, #7c3aed);
  animation: hiwFloatBadge1 5s ease-in-out infinite;
}
.hiw-float-badge-2 {
  bottom: 18px;
  left: -28px;
  animation: hiwFloatBadge2 5.5s ease-in-out infinite;
}
.hiw-float-badge-2 svg {
  color: #f5a623;
}
@keyframes hiwFloatWrap {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes hiwFloatBadge1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes hiwFloatBadge2 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
  .hiw-mockup-wrap,
  .hiw-float-badge-1,
  .hiw-float-badge-2 {
    animation: none;
  }
}

/* ---------- FAQ (modern card accordion, replaces default Bootstrap
   accordion styling -- Bootstrap's collapse JS still drives the
   expand/collapse via data-bs-toggle, only the visuals are custom) ---------- */
.faq-modern {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.faq-item {
  background: #fff;
  border: 1px solid #e5e7ee;
  border-radius: 1rem;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.faq-item:hover {
  box-shadow: 0 10px 24px rgba(10, 22, 51, .08);
}
.faq-item-head {
  margin: 0;
}
.faq-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: 0;
  padding: 1.1rem 1.4rem;
  text-align: left;
  cursor: pointer;
}
.faq-q-text {
  font-weight: 700;
  font-size: 1rem;
  color: #14213d;
}
.faq-toggle:not(.collapsed) .faq-q-text {
  color: var(--wins-mint, #7c3aed);
}
.faq-icon {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wins-mint-light, #eef0f6);
  flex-shrink: 0;
  transition: background .2s ease, transform .25s ease;
}
.faq-toggle:not(.collapsed) .faq-icon {
  background: var(--wins-mint, #7c3aed);
  transform: rotate(180deg);
}
.faq-icon-h,
.faq-icon-v {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--wins-mint-dark, #4c1d95);
  transform: translate(-50%, -50%);
}
.faq-icon-h {
  width: 12px;
  height: 2px;
}
.faq-icon-v {
  width: 2px;
  height: 12px;
  transition: opacity .2s ease;
}
.faq-toggle:not(.collapsed) .faq-icon-h,
.faq-toggle:not(.collapsed) .faq-icon-v {
  background: #fff;
}
.faq-toggle:not(.collapsed) .faq-icon-v {
  opacity: 0;
}
.faq-answer {
  padding: 0 1.4rem 1.25rem;
  color: #4b5164;
  font-size: .92rem;
  line-height: 1.65;
}
.faq-answer a {
  color: var(--wins-mint, #7c3aed);
  font-weight: 600;
  text-decoration: none;
}
.faq-answer a:hover {
  text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
  .faq-icon {
    transition: none;
  }
}

/* ---------- Careers ---------- */
/* Site-wide --bs-warning was repurposed to purple (see :root above), so
   .text-bg-warning no longer reads as "yellow" -- this badge needs its own
   real yellow/gold since "Featured" should look distinct from the brand
   purple used everywhere else. */
.badge-job-featured {
  background: #FFC107;
  color: #664d03;
}
.job-card {
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.job-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1) !important;
}
.job-card-title-link {
  color: var(--wins-mint);
  text-decoration: none;
  transition: color .15s ease;
}
.job-card-title-link:hover,
.job-card-title-link:focus {
  color: #000;
}

/* ---------- Agency login ---------- */
.agency-login-section {
  background: #fff;
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 300px);
  display: flex;
  align-items: center;
}
.agency-login-section::before,
.agency-login-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--wins-gradient-purple);
  opacity: .08;
  z-index: 0;
}
.agency-login-section::before {
  width: 420px;
  height: 420px;
  top: -180px;
  right: -140px;
}
.agency-login-section::after {
  width: 320px;
  height: 320px;
  bottom: -160px;
  left: -120px;
}
.agency-login-section .container {
  position: relative;
  z-index: 1;
}
.agency-login-perks li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: .75rem;
  color: var(--bs-secondary-color);
}
body.wins-site .agency-login-perks li {
  color: rgba(255, 255, 255, .75);
}
.agency-login-perk-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wins-mint-light);
  color: var(--wins-mint-dark);
  font-style: normal;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agency-login-card {
  position: relative;
  overflow: hidden;
}
.agency-login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--wins-gradient-purple);
}

/* ---------- Hero ---------- */
.hero-gradient {
  background: radial-gradient(ellipse at 60% 0%, var(--wins-navy) 60%, var(--wins-navy-dark) 100%);
  color: #fff;
}
.hero-gradient .breadcrumb a,
.hero-grid .breadcrumb a {
  color: #c9c5b8;
}
.hero-gradient .breadcrumb a:hover,
.hero-grid .breadcrumb a:hover {
  color: #fff;
}
.hero-gradient .breadcrumb-item.active,
.hero-grid .breadcrumb-item.active {
  color: var(--wins-gold);
  font-weight: 600;
}
.hero-gradient .breadcrumb-item + .breadcrumb-item::before,
.hero-grid .breadcrumb-item + .breadcrumb-item::before {
  color: #c9c5b8;
}

/* CTA sections (bottom-of-page action banners) -- purple, distinct from the
   navy .hero-gradient used for top-of-page navigational heroes. */
.cta-gradient {
  background: radial-gradient(ellipse at 30% 0%, #9333EA 0%, #6D28D9 45%, #4C1D95 100%);
  color: #fff;
}
/* .btn-mint's purple gradient disappears against this section's purple
   background -- swap to a solid white button here for contrast. */
.cta-gradient .btn-mint {
  background: #fff;
  color: #4C1D95;
  border-color: transparent;
}
.cta-gradient .btn-mint:hover {
  background: #f3e8ff;
  color: #4C1D95;
}

/* Homepage hero: dark grid texture over the brand gradient */
.hero-grid {
  color: #fff;
  background-color: var(--wins-navy-dark);
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    radial-gradient(ellipse at 65% 0%, var(--wins-navy) 55%, var(--wins-navy-dark) 100%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
}

.hero-search-bar {
  background: #fff;
  border: 1px solid rgba(17, 12, 34, .08);
  border-radius: .75rem;
  transition: box-shadow .15s ease, border-color .15s ease, border-radius .1s ease;
}
.hero-search-bar:focus-within {
  border-color: var(--wins-mint);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .15) !important;
}
/* When the suggestions dropdown is open, square off the bar's bottom
   corners so the bar and dropdown read as one continuous outlined shape
   instead of two separately-rounded boxes stacked on top of each other. */
.position-relative:has(> .hero-search-suggestions:not(.d-none)) .hero-search-bar {
  border-radius: .75rem .75rem 0 0;
}
.hero-search-bar .form-select,
.hero-search-bar button {
  height: 49px;
  display: flex;
  align-items: center;
}
.hero-search-bar .form-select {
  box-shadow: none !important;
  font-weight: 500;
  font-size: .95rem;
  color: var(--wins-navy);
  flex: 1 1 0;
  min-width: 0;
}
.hero-search-bar .form-select:focus {
  outline: none;
}
.hero-search-bar button {
  justify-content: center;
  flex-shrink: 0;
}
.hero-search-bar .form-control {
  height: 49px;
  box-shadow: none !important;
  font-weight: 500;
  font-size: .95rem;
  color: var(--wins-navy);
  border: none;
}
.hero-search-bar .hero-search-icon-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 37px;
  height: 37px;
  border: none;
  background: var(--wins-mint-light);
  color: var(--wins-mint);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
  transition: background .15s ease, color .15s ease;
}
.hero-search-icon-btn:hover {
  background: var(--wins-mint);
  color: #fff;
}
.hero-search-suggestions {
  position: absolute;
  top: 100%;
  left: -1px;
  right: -1px;
  background: #fff;
  /* Same border as .hero-search-bar (no top edge -- sits flush against the
     bar's bottom edge) so the two read as one continuous outlined shape,
     matching its corner radius. */
  border: 1px solid rgba(17, 12, 34, .08);
  border-top: none;
  border-radius: 0 0 .75rem .75rem;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  text-align: left;
}
.hero-search-suggestion-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .6rem .9rem;
  border: none;
  background: none;
  text-align: left;
  font-size: .9rem;
  color: var(--wins-navy);
}
.hero-search-suggestion-item:hover {
  background: #f6f5f2;
}
.hero-search-suggestion-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wins-gradient-purple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.hero-search-suggestion-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-search-empty {
  padding: .9rem;
  font-size: .85rem;
  color: var(--wins-navy);
  text-align: center;
}
.hero-search-empty a {
  color: var(--wins-mint);
  font-weight: 600;
  text-decoration: underline;
}
.hero-search-divider-line {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, .25);
}

.ai-trust-bar {
  background: #faf9f6;
  border-bottom: 1px solid #eee9dd;
}
.ai-trust-logo-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .55;
  transition: opacity .15s, filter .15s;
}
.ai-trust-logo-img:hover {
  filter: none;
  opacity: 1;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .08);
  color: #e8e6df;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.hero-tag:hover {
  background: var(--wins-mint);
  border-color: var(--wins-mint);
  color: #fff;
}
.hero-tag svg {
  flex-shrink: 0;
  opacity: .85;
}

/* AI Consulting pill: called out as the trending category with a warm
   amber accent (deliberately off-brand-teal so it reads as "hot" rather
   than blending in with the rest of the pills). */
.hero-tag-trending {
  background: rgba(245, 158, 11, .14);
  border-color: rgba(245, 158, 11, .5);
}
.hero-tag-trending:hover {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #1a2a4a;
}
.hero-tag-trending svg {
  color: #f59e0b;
  opacity: 1;
}
.hero-tag-trending:hover svg {
  color: #1a2a4a;
}
.hero-tag-flame {
  display: inline-flex;
  color: #f59e0b;
  transform-origin: 50% 85%;
  animation: heroTagFlameFlicker 1.4s ease-in-out infinite;
}
.hero-tag-trending:hover .hero-tag-flame {
  color: #1a2a4a;
}
@keyframes heroTagFlameFlicker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.08, .94) rotate(-4deg); }
  50% { transform: scale(.95, 1.08) rotate(3deg); }
  75% { transform: scale(1.05, .97) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-tag-flame {
    animation: none;
  }
}

/* Browser mockup showing live search results */
.browser-mockup {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .08);
}
.browser-mockup-bar {
  background: #f0eee8;
}
.browser-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

/* ---------- Navbar ---------- */
.wins-navbar {
  background: linear-gradient(180deg, var(--wins-navy) 0%, var(--wins-navy-dark) 100%);
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.wins-navbar .nav-link {
  color: #cfcdc6;
  font-weight: 600;
}
.wins-navbar .nav-link:hover {
  color: #fff;
}
.wins-navbar .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}
.wins-navbar .navbar-brand img {
  height: 68px;
  width: auto;
}

/* Modern 3-bar toggler that morphs into an X when open, replacing
   Bootstrap's flat default background-image icon. */
.wins-toggler {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  box-shadow: none !important;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.wins-toggler:focus {
  box-shadow: none;
}
.wins-toggler-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .25s ease, opacity .2s ease, background-color .2s ease;
}
.wins-toggler:not(.collapsed) .wins-toggler-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.wins-toggler:not(.collapsed) .wins-toggler-bar:nth-child(2) {
  opacity: 0;
}
.wins-toggler:not(.collapsed) .wins-toggler-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Compact icon-only agency-login entry point, sits directly left of the
   mobile hamburger instead of a text button buried inside the dropdown. */
.wins-mobile-login-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.wins-mobile-login-icon:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
body.wins-site.nav-scrolled .wins-mobile-login-icon {
  border-color: #d7dbe6;
  color: #1a2a4a;
}
body.wins-site.nav-scrolled .wins-mobile-login-icon:hover {
  background: #f3f5fa;
  border-color: #1a2a4a;
}

/* ---------- Agency cards ---------- */
.agency-avatar {
  width: 46px;
  height: 46px;
  border-radius: .75rem;
  background: linear-gradient(135deg, var(--bs-primary), var(--wins-mint));
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rating-chip {
  background: var(--wins-gold);
  color: #222;
  font-weight: 700;
  white-space: nowrap;
}
.rating-box {
  background: #fff;
  border-radius: .75rem;
}
/* Deliberately NOT .text-warning -- that utility was repurposed site-wide
   to the brand accent (purple originally, teal on wins-site pages), which
   made this specific hero rating display shift with every brand-color
   change instead of staying the warm gold a star rating should always be,
   regardless of theme. --wins-gold is the one color reserved for exactly
   this purpose (see its definition in :root). */
.rating-box-gold {
  color: var(--wins-gold, #D4AF37);
}

/* ---------- Hero meta chips (listing pages: last updated / agency count) ---------- */
.hero-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .85);
  font-size: .82rem;
  font-weight: 500;
  border-radius: 999px;
  padding: .4rem .85rem;
}
.hero-meta-chip svg {
  flex-shrink: 0;
  opacity: .85;
}
.hero-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.hero-jump-nav a {
  color: rgba(255, 255, 255, .75);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  padding-bottom: 1px;
}
.hero-jump-nav a:hover {
  color: #fff;
  border-bottom-color: #fff;
}
.hero-desc-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-desc-toggle {
  display: inline-block;
  background: none;
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  text-decoration: underline;
  padding: 0;
  margin: -.5rem 0 .75rem;
}

/* ---------- Quick facts ---------- */
.quick-facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 991.98px) {
  .quick-facts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .quick-facts-grid { grid-template-columns: 1fr; }
}
.quick-fact-card {
  background: #fff;
  border: 1px solid #e5e7ee;
  border-radius: 1.1rem;
  padding: 1.15rem 1.3rem;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.quick-fact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(10, 22, 51, .08);
}
.quick-fact-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: .8rem;
  background: var(--wins-mint-light, #eef0f6);
  color: var(--wins-mint-dark, #4c1d95);
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-fact-card-label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7180;
  margin-bottom: .2rem;
}
.quick-fact-card-value {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  color: #14213d;
  line-height: 1.35;
}
.quick-facts-policy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #eee9dd;
}
.quick-facts-policy-links a {
  font-size: .88rem;
  font-weight: 600;
  color: var(--wins-mint);
  text-decoration: underline;
}

/* ---------- Pricing tiers ---------- */
.pricing-tier-card {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7ee;
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pricing-tier-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(10, 22, 51, .08);
}
.pricing-tier-featured {
  border-color: var(--wins-mint, #1abc9c);
  border-width: 2px;
  box-shadow: 0 16px 36px rgba(26, 188, 156, .18);
}
.pricing-tier-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--wins-mint, #1abc9c);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .3rem .9rem;
  border-radius: 1rem;
  white-space: nowrap;
}
.pricing-tier-price {
  font-weight: 700;
  color: var(--wins-mint);
  font-size: 1.05rem;
  margin-bottom: .85rem;
}
.pricing-tier-card ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.pricing-tier-card li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .88rem;
  color: #6b6a75;
  margin-bottom: .55rem;
}
.pricing-tier-check {
  flex-shrink: 0;
  margin-top: .15rem;
  color: var(--wins-mint);
}

/* ---------- Comparison table ---------- */
.comparison-table-wrap {
  background: #fff;
}
.comparison-table-scroll {
  overflow-x: auto;
  border-radius: inherit;
}
.comparison-table {
  margin-bottom: 0;
}
.comparison-table thead th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #8b8a97;
  font-weight: 700;
  background: #faf9f6;
  border-bottom-width: 1px;
  white-space: nowrap;
}
@media (min-width: 992px) {
  .comparison-table tbody td {
    white-space: nowrap;
  }
}
@media (max-width: 991.98px) {
  /* Only #/Agency/Rating/Profile/+ are visible below lg -- force the table
     to respect the container width instead of growing to fit unwrapped
     agency-name/rating text, which was pushing the whole table into a
     horizontal scroll on phones. */
  .comparison-table {
    table-layout: fixed;
    width: 100%;
  }
  .comparison-table th:nth-child(1),
  .comparison-table td:nth-child(1) {
    width: 24px;
  }
  .comparison-table th:nth-child(3),
  .comparison-table td:nth-child(3) {
    width: 54px;
    white-space: normal;
  }
  .comparison-table th:nth-child(9),
  .comparison-table td:nth-child(9) {
    width: 38px;
  }
  .comparison-table th:nth-child(10),
  .comparison-table td:nth-child(10) {
    width: 34px;
  }
  .comparison-table td:nth-child(2) {
    white-space: normal;
    overflow: hidden;
  }
  .comparison-table td:nth-child(2) a {
    min-width: 0;
  }
  .comparison-table td:nth-child(2) a > span:last-child {
    min-width: 0;
    overflow: hidden;
  }
  .comparison-table td:nth-child(2) .fw-semibold {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.comparison-tag-cell {
  white-space: normal;
  max-width: 160px;
}
.comparison-tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comparison-tag-list li {
  position: relative;
  padding-left: .8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  line-height: 1.5;
}
.comparison-tag-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wins-mint);
}
.comparison-profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #e5e2da;
  color: var(--wins-navy);
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.comparison-profile-btn:hover {
  background: var(--wins-mint);
  border-color: var(--wins-mint);
  color: #fff;
}
.comparison-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #e5e2da;
  background: #fff;
  color: var(--wins-navy);
  transition: transform .2s, background .15s, color .15s, border-color .15s;
}
.comparison-expand-btn[aria-expanded="true"] {
  transform: rotate(45deg);
  background: var(--wins-mint);
  border-color: var(--wins-mint);
  color: #fff;
}
.comparison-detail-body {
  background: #faf9f6;
  max-width: 100vw;
  overflow-wrap: break-word;
  word-break: break-word;
}
.comparison-tag-list-full {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comparison-tag-list-full li {
  position: relative;
  padding-left: .8rem;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.5;
}
.comparison-tag-list-full li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wins-mint);
}
.comparison-row-sponsored { background: linear-gradient(90deg, rgba(245, 158, 11, .07), transparent 40%); }
.comparison-row-premium { background: linear-gradient(90deg, rgba(124, 58, 237, .07), transparent 40%); }
.comparison-row-featured { background: linear-gradient(90deg, rgba(8, 145, 178, .07), transparent 40%); }
.comparison-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--wins-gradient-purple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8rem;
  flex-shrink: 0;
  overflow: hidden;
}
.comparison-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Listing page tier borders (service x state pages) ---------- */
/* Tier border wrapped around the *unchanged* agency-card.php partial on
   listing pages -- only adds a colored border, never touches the card's
   own internal markup/behavior. */
.listing-tier-wrap-sponsored .agency-card-v2 {
  border: 2px solid transparent !important;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #f59e0b, #fde68a) border-box !important;
}
.listing-tier-wrap-premium .agency-card-v2 {
  border: 2px solid transparent !important;
  background: linear-gradient(#fff, #fff) padding-box, var(--wins-gradient-purple) border-box !important;
}
.listing-tier-wrap-featured .agency-card-v2 {
  border: 2px solid #0891b2 !important;
}

/* ---------- Category grid (homepage) ---------- */
.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 1.5rem .75rem;
  border: 1px solid #eee9dd;
  border-radius: 1rem;
  background: #fff;
  color: #1a1a1a;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .08);
  border-color: var(--wins-mint);
  color: #1a1a1a;
}
.category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
}
.category-name {
  font-weight: 600;
  font-size: .85rem;
}
.category-card-explore {
  background: var(--wins-navy);
  border-color: var(--wins-navy);
}
.category-card-explore .category-name {
  color: #fff;
}
.category-icon-explore {
  color: #fff;
}
.category-card-explore:hover {
  border-color: var(--wins-mint);
}

/* ---------- Agency card v2 (tabbed) ---------- */
.agency-logo-box {
  width: 64px;
  height: 64px;
  border-radius: .75rem;
  border: 1px solid #eee9dd;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--wins-navy);
}
.agency-logo-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.agency-corner-badges {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.agency-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: #16a34a;
  font-weight: 700;
  font-size: .78rem;
  flex-shrink: 0;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  padding: .3rem .7rem;
}
.agency-tier-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-weight: 700;
  font-size: .78rem;
  flex-shrink: 0;
  border-radius: 999px;
  padding: .3rem .7rem;
  background: #fefce8;
  border: 1px solid #fde68a;
  color: #92400e;
}
/* Small actionable pill shown next to the agency name on unclaimed profiles
   (agency-profile.php hero) -- same size/shape as the tier/verified pills
   beside it, but with a hover state since this one is a link, not a
   status label. */
.claim-profile-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-weight: 700;
  font-size: .78rem;
  flex-shrink: 0;
  border-radius: 999px;
  padding: .3rem .7rem;
  background: #fff;
  border: 1px solid var(--wins-mint);
  color: var(--wins-navy);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.claim-profile-pill:hover {
  background: var(--wins-mint);
  color: #fff;
}
.agency-tabs {
  border-bottom-color: #eee9dd;
}
@media (min-width: 768px) {
  /* Tabs are a full-width sibling of the logo+name row (so they can span
     the whole card on mobile). On wider screens, indent them past the 64px
     logo + 1rem gap and pull them up into the logo's vertical band so they
     sit right under the ~24px name instead of leaving dead space below it. */
  .agency-tabs {
    margin-left: 80px;
    margin-top: -40px;
  }
}
.agency-tabs .nav-link {
  font-size: .85rem;
  font-weight: 600;
  color: #6b7280;
  padding: .25rem 0;
  margin-right: 1.25rem;
}
.agency-tabs .nav-link.active {
  color: var(--wins-navy);
  border-bottom-color: var(--wins-mint);
}
.agency-card-tag-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9c9a92;
  margin-bottom: .15rem;
}
.agency-meta-row {
  font-size: .85rem;
}
.agency-meta-row svg {
  color: var(--wins-mint);
  margin-right: 2px;
  vertical-align: -3px;
}
.agency-sidebar {
  background: #faf9f6;
  border-left: 1px solid #eee9dd;
  border-radius: 0 1rem 1rem 0;
}
.agency-rating-badges {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.agency-rating-badge {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
.agency-rating-value {
  font-weight: 700;
  color: var(--wins-navy);
}
.star-row {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--wins-gold);
  vertical-align: -2px;
}
.star-row .star-empty {
  color: #d9d9d9;
}
.agency-rating-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: .65rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #9ca3af;
  flex-shrink: 0;
}
.agency-rating-icon-img {
  background: transparent;
  border-radius: 0;
}
.agency-rating-icon-img img,
.agency-rating-icon-img svg {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
@media (max-width: 991.98px) {
  .agency-sidebar {
    border-left: none;
    border-top: 1px solid #eee9dd;
    border-radius: 0 0 1rem 1rem;
  }
  /* flex-fill (1 1 auto) still sizes by content, so the two action buttons
     end up unequal -- basis 0 splits the row exactly in half. */
  .agency-action-buttons .btn {
    flex: 1 1 0;
  }
}

@media (max-width: 767.98px) {
  /* Reflow order: logo+name, then the tier/verified badges (out of the
     absolute-positioned corner and into normal flow), then tabs -- which
     get the card's full width here instead of being squeezed next to the
     logo, so they fit on one line instead of wrapping. */
  .agency-card-v2 .p-4.position-relative {
    display: flex;
    flex-direction: column;
  }
  .agency-card-v2 .agency-header-row {
    order: 1;
  }
  .agency-card-v2 .agency-corner-badges {
    position: static;
    order: 2;
    margin-bottom: .75rem;
  }
  .agency-card-v2 .agency-tabs {
    order: 3;
  }
  .agency-card-v2 .tab-content {
    order: 4;
  }
  .agency-card-v2 .agency-meta-row {
    order: 5;
  }
}

/* ---------- Agency profile page (agency-profile.php) ---------- */
.agency-logo-box-lg {
  width: 96px;
  height: 96px;
  font-size: 2rem;
  border-radius: 1rem;
}
.agency-profile-cta .btn {
  white-space: nowrap;
}
/* Tabs sit directly under their own section here, not next to a logo, so
   drop agency-tabs' card-specific desktop indent/pull-up. */
.profile-tabs {
  margin-left: 0 !important;
  margin-top: 0 !important;
}
.profile-tabs .nav-link {
  font-size: .95rem;
}

/* CSS-only 5-star picker for the review submission form. Radio inputs are
   authored 5..1 in the DOM and laid out reversed so the checked-and-hovered
   sibling combinator (~) can light up every star at-or-before the one under
   the cursor despite the visual order running left-to-right. */
.star-picker {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 2px;
}
.star-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.star-picker label {
  font-size: 1.75rem;
  line-height: 1;
  color: #d9d9d9;
  cursor: pointer;
  transition: color .1s;
}
.star-picker input:checked ~ label,
.star-picker label:hover,
.star-picker label:hover ~ label {
  color: var(--wins-gold);
}

/* ---------- Agency profile: quick stats bar ---------- */
.profile-stats-bar {
  background: #fff;
  border-bottom: 1px solid #eee9dd;
}
.profile-stat-card {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.profile-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: .75rem;
  background: #f0fdfa;
  color: var(--wins-mint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-stat-value {
  font-weight: 700;
  color: var(--wins-navy);
  line-height: 1.1;
}
.profile-stat-label {
  font-size: .78rem;
  color: #6b7280;
}

/* Tab icons + horizontal scroll on narrow screens instead of wrapping */
.profile-tabs .nav-link svg {
  vertical-align: -3px;
  margin-right: 2px;
}
.profile-tabs.overflow-auto {
  flex-wrap: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.profile-tabs.overflow-auto::-webkit-scrollbar {
  display: none;
}
.profile-tabs .nav-item {
  flex-shrink: 0;
}

/* Sticky sub-nav: sits just below the main .wins-navbar (its height is
   measured and written to --wins-navbar-h by the page's own script, since
   the navbar's actual height varies by breakpoint/content). */
.profile-tabs-sticky-wrap {
  position: sticky;
  top: var(--wins-navbar-h, 0px);
  z-index: 20;
  background: #fff;
  /* Asymmetric padding: generous above the row, small below so the divider
     (on this wrapper, not the <ul>) sits close under the active tab's
     underline. Border lives here rather than on the <ul> so it spans the
     full row width -- including under the "Submit a Review" button -- not
     just the tabs, which previously made the row read as lopsided/uncentered. */
  padding: 14px 0 8px;
  border-bottom: 1px solid #eee9dd;
}
.profile-tabs-sticky-wrap .profile-tabs {
  margin-bottom: 0 !important;
}
/* Both indicator bars now live at the very bottom of the strip (see
   .active-tab-indicator / .hover-tab-indicator below), touching the
   divider -- not hugging the tab text like Bootstrap's default
   nav-underline placement -- so nav-underline's own active AND hover
   borders are switched off here (hover too, or its text-hugging border
   shows up alongside our bottom-touching hover bar as a second line). */
.profile-tabs.nav-underline .nav-link.active,
.profile-tabs.nav-underline .nav-link:hover,
.profile-tabs.nav-underline .nav-link:focus-visible {
  border-bottom-color: transparent;
}
/* Sliding active-tab indicator: a single bar, repositioned/resized via JS
   (translateX + width) to match whichever tab is active, so moving between
   tabs reads as one bar floating left-to-right rather than a new one
   appearing per tab. Positioned relative to the wrapper (not the <ul>) so
   it can reach flush to the wrapper's own bottom border. */
.active-tab-indicator {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--wins-mint);
  border-radius: 2px 2px 0 0;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  z-index: 2;
}
/* Hover preview bar -- same bottom-touching position/sizing logic as the
   active indicator (see updateIndicator()/JS "hover" branch), but lighter
   and only visible while the cursor is over a non-active tab, so it never
   competes with the persistent mint active bar underneath it. */
.hover-tab-indicator {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: #d7d2c4;
  border-radius: 2px 2px 0 0;
  opacity: 0;
  transition: transform .2s ease, width .2s ease, opacity .15s ease;
  pointer-events: none;
  z-index: 1;
}
.hover-tab-indicator.visible {
  opacity: 1;
}

.portfolio-card-placeholder {
  transition: transform .15s, box-shadow .15s;
}
.portfolio-card-placeholder:hover {
  transform: translateY(-3px);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08) !important;
}
.portfolio-thumb-placeholder {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #eef2f7, #e3e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b7c0cc;
}
/* Real client logo image (Clients tab) -- distinct from
   .client-logo-placeholder's dashed "nothing here" styling below. */
.client-logo-img {
  height: 64px;
  width: 100%;
  border-radius: .75rem;
  border: 1px solid #eee9dd;
  background: #fff;
  object-fit: contain;
  padding: 8px;
}

/* Review card v2 (Reviews tab) -- 3-column layout: quote / project details /
   rating+reviewer. border-start reads correctly once the row sits side by
   side (lg+); below that Bootstrap stacks the columns full-width, where a
   left border no longer makes sense, so it flips to border-top instead. */
.review-card-v2 .review-quote {
  color: var(--wins-navy);
  margin-bottom: .75rem;
}
.review-card-divider {
  border-left: 1px solid #eee9dd;
}
@media (max-width: 991.98px) {
  .review-card-divider {
    border-left: none;
    border-top: 1px solid #eee9dd;
  }
}
.review-avatar-letter {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bs-primary), var(--wins-mint));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
}

.team-avatar-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bs-primary), var(--wins-mint));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
.client-logo-placeholder {
  height: 64px;
  border: 1px dashed #d7d2c4;
  border-radius: .75rem;
  background: #faf9f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
}

/* Copy-profile-link icon button in the hero */
.copy-link-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .6rem;
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  background: rgba(255, 255, 255, .08);
  transition: background .15s;
  cursor: pointer;
}
.copy-link-btn:hover {
  background: rgba(255, 255, 255, .18);
}

/* ---------- Agency profile page: high-contrast text pass ---------- */
/* Scoped to this page only (body.agency-profile-body) -- swaps the
   translucent/gray text Bootstrap utilities normally use for solid
   black (light sections) or solid white (dark hero), per request. */
body.agency-profile-body .text-muted,
body.agency-profile-body .text-body-secondary,
body.agency-profile-body .text-secondary-emphasis,
body.agency-profile-body .profile-stat-label,
body.agency-profile-body .client-logo-placeholder {
  color: #000 !important;
}
body.agency-profile-body .hero-grid .text-white-50,
body.agency-profile-body .hero-grid .breadcrumb a,
body.agency-profile-body .hero-grid .breadcrumb-item + .breadcrumb-item::before {
  color: #fff !important;
}

.similar-agency-card {
  transition: transform .15s, box-shadow .15s;
}
.similar-agency-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08) !important;
}

/* ---------- Blog cards (homepage "Tech Trends") ---------- */
.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1) !important;
}
.blog-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
  padding: 1.25rem;
}
.blog-card-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 1.5rem;
}
.blog-card-category {
  color: var(--wins-mint);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.blog-card-badge {
  background: var(--wins-mint-light);
  color: var(--wins-mint-dark);
  border-radius: 999px;
  padding: .2rem .65rem;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}
.blog-card-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #1a1a1a;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-excerpt {
  color: var(--bs-secondary-color);
  font-size: .88rem;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-meta {
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid #eee9dd;
  font-size: .78rem;
  color: var(--bs-secondary-color);
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
}
.blog-card-meta svg {
  color: var(--wins-mint);
  vertical-align: -2px;
  margin-right: 1px;
}

/* ---------- Footer ---------- */
.footer-heading {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff;
  margin-bottom: 1rem;
}
.footer-links li {
  margin-bottom: .6rem;
}
.footer-links a {
  color: #b9b6ac;
  font-size: .9rem;
  text-decoration: none;
}
.footer-links a:hover {
  color: #fff;
  text-decoration: underline;
}
.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transition: background .15s;
}
.footer-social-icon:hover {
  background: var(--wins-mint);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.footer-bottom a {
  color: #fff;
}
.footer-bottom a.text-white-50:hover {
  color: #fff !important;
}

/* ---------- Info/policy page sidebar (Why Us, How We Rank, Editorial
   Policy, Privacy/Terms/Cookie) ---------- */
.info-sidebar-link {
  display: block;
  padding: .55rem .75rem;
  border-radius: .6rem;
  color: var(--wins-navy);
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.info-sidebar-link:hover {
  background: var(--wins-mint-light);
  color: var(--wins-mint-dark);
}
.info-sidebar-link.active {
  background: var(--wins-gradient-purple);
  color: #fff;
  font-weight: 600;
}

/* ---------- Icon tabs (interactive service switcher w/ sliding indicator) ---------- */
.icon-tabs {
  position: relative;
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  background: #f3f1ec;
  padding: .35rem;
  border-radius: 999px;
}
.icon-tabs .nav {
  /* Not position:relative -- that would become the buttons' offsetParent
     instead of .icon-tabs, breaking the slider's offsetTop/offsetLeft math.
     z-index still applies here since .nav is a flex item of .icon-tabs. */
  z-index: 2;
  gap: .15rem;
}
.icon-tabs .nav-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-weight: 600;
  font-size: .9rem;
  color: var(--wins-navy);
  white-space: nowrap;
  transition: color .25s;
}
.icon-tabs .nav-link:hover:not(.active) {
  color: var(--wins-mint-dark);
}
.icon-tabs .nav-link.active {
  color: #fff;
}
/* ---------- State cards (location grid under icon tabs) ---------- */
.state-card {
  display: flex;
  align-items: center;
  gap: .65rem;
  height: 100%;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid #eee9dd;
  border-radius: .85rem;
  color: var(--wins-navy);
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.state-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);
  border-color: var(--wins-mint);
  color: var(--wins-navy);
}
.state-card-icon {
  display: flex;
  color: var(--wins-mint);
  flex-shrink: 0;
}
.state-card-name {
  font-weight: 600;
  flex: 1;
}
.state-card-arrow {
  color: #c9c5b8;
  flex-shrink: 0;
  transition: transform .15s, color .15s;
}
.state-card:hover .state-card-arrow {
  transform: translateX(3px);
  color: var(--wins-mint);
}

/* Service/Industry category browse cards (/agency directory hub) */
.cat-browse-card {
  transition: transform .15s, box-shadow .15s;
}
.cat-browse-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .08);
}
.cat-browse-heading {
  color: var(--wins-mint);
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: color .15s;
}
.cat-browse-heading:hover {
  color: var(--wins-mint-dark);
}
.cat-browse-child {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--wins-navy);
  text-decoration: none;
  transition: color .15s, transform .15s;
}
.cat-browse-child:hover {
  color: var(--wins-mint);
  transform: translateX(3px);
}
.cat-browse-child-arrow {
  color: #c9c5b8;
  flex-shrink: 0;
  transition: color .15s, transform .15s;
}
.cat-browse-child:hover .cat-browse-child-arrow {
  color: var(--wins-mint);
  transform: translateX(2px);
}
.cat-browse-chip {
  display: inline-flex;
  align-items: center;
  padding: .35rem .9rem;
  border-radius: 999px;
  border: 1px solid #e5ddfb;
  background: var(--wins-mint-light);
  color: var(--wins-mint-dark);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s, transform .15s;
}
.cat-browse-chip:hover {
  background: var(--wins-mint);
  color: #fff;
  transform: translateY(-2px);
}

.tab-slider {
  position: absolute;
  z-index: 1;
  border-radius: 999px;
  background: var(--wins-gradient-purple);
  transition: top .3s cubic-bezier(.4, 0, .2, 1), left .3s cubic-bezier(.4, 0, .2, 1),
              width .3s cubic-bezier(.4, 0, .2, 1), height .3s cubic-bezier(.4, 0, .2, 1);
}
@media (max-width: 767.98px) {
  .icon-tabs {
    width: 100%;
    border-radius: 1.25rem;
  }
  .icon-tabs .nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .tab-slider {
    border-radius: 999px;
  }
}

/* ---------- Agency name typeahead (list-your-agency.php) ---------- */
.agency-name-suggestions {
  display: none;
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #eee9dd;
  border-radius: .5rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
  margin-top: 2px;
  overflow: hidden;
}
.agency-name-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  padding: .5rem .75rem;
  border: 0;
  background: #fff;
  font-size: .9rem;
  cursor: pointer;
}
.agency-name-suggestion:hover {
  background: var(--wins-mint-light);
}

/* List Your Agency: Country/State/City are locked (zip-driven auto-fill
   only) until a submitted zip has no match in our directory, at which
   point .auto-locked is removed so the visitor can fill them manually. */
.auto-locked {
  pointer-events: none;
  background: #f3f2f7;
  color: #6b6a75;
}

/* ---------- Agency profile: Specialties expertise bars ---------- */
.specialty-bar-track {
  height: 8px;
  border-radius: 1rem;
  background: #ecebf3;
  overflow: hidden;
}
.specialty-bar-fill {
  height: 100%;
  border-radius: 1rem;
  background: var(--wins-gradient-purple);
  transition: width 1s ease;
}

/* ---------- Hub cards ---------- */
.hub-card {
  transition: transform .15s, box-shadow .15s;
}
.hub-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1) !important;
}

/* ---------------------------------------------------------------------
   Agency dashboard menu -- a plain white card sitting in the normal page
   flow (inside the site's own header/footer), not a fixed admin-style
   sidebar. This is a front-end experience, not the admin CMS.
------------------------------------------------------------------------ */
.agency-menu-card {
  background: #fff;
  border: 1px solid #eceaf5;
  border-radius: 1rem;
  padding: .75rem;
}
.agency-menu-group-label {
  color: #8b8a97;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 .6rem;
  margin: 1rem 0 .35rem;
}
.agency-menu-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--wins-navy);
  font-weight: 500;
  font-size: .9rem;
  border-radius: .6rem;
  padding: .55rem .6rem;
  text-decoration: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background .15s ease, color .15s ease;
}
.agency-menu-link i {
  font-size: 1.02rem;
  width: 1.1rem;
  text-align: center;
  flex-shrink: 0;
  color: var(--wins-mint);
}
.agency-menu-link:hover {
  background: var(--wins-mint-light);
  color: var(--wins-mint-dark);
}
.agency-menu-link.active {
  background: var(--wins-gradient-purple);
  color: #fff;
}
.agency-menu-link.active i {
  color: #fff;
}
.agency-menu-link.text-danger i {
  color: #dc3545;
}
.agency-menu-badge {
  margin-left: auto;
  background: #ecebf3;
  color: #6c6b74;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
  padding: .28rem .5rem;
  border-radius: 1rem;
  min-width: 1.4rem;
  text-align: center;
}
.agency-menu-badge.is-paid {
  background: #dcfce7;
  color: #16a34a;
}
.agency-menu-link.active .agency-menu-badge {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}
/* Nested "Profile" submenu: parent toggle + indented children, chevron
   rotates via Bootstrap's [aria-expanded] instead of a JS class toggle. */
.agency-menu-parent-toggle {
  justify-content: space-between;
  cursor: pointer;
}
.agency-menu-chevron {
  transition: transform .2s ease;
  margin-left: auto;
  opacity: .6;
  font-size: .8rem;
}
.agency-menu-parent-toggle[aria-expanded="true"] .agency-menu-chevron {
  transform: rotate(90deg);
}
.agency-menu-submenu .agency-menu-link {
  padding-left: 2.1rem;
  font-size: .85rem;
}
/* The parent toggle also picks up the shared .active rule's solid teal
   fill whenever the current page is one of its children (so the section
   stays visibly "open" even collapsed) -- but stacked directly above the
   child's own solid-fill "you are here" pill, two identical solid blocks
   in a row reads as heavy/duplicated. Give the parent a lighter tint
   instead: it signals "active section," the child alone signals "current
   page." */
.agency-menu-parent-toggle.active {
  background: var(--wins-mint-light);
  color: var(--wins-mint-dark);
}
.agency-menu-parent-toggle.active i {
  color: var(--wins-mint-dark);
}

/* Sidebar "owner" header: logo/initial, name, plan, and a small profile-
   strength ring -- a quick, always-visible identity + progress cue above
   the nav links, on every portal page. */
.agency-menu-owner {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .35rem .5rem .9rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid #eceaf5;
}
.agency-menu-owner-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .75rem;
  background: var(--wins-mint-light);
  color: var(--wins-mint-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}
.agency-menu-owner-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.agency-menu-owner-name {
  font-weight: 700;
  font-size: .88rem;
  color: var(--wins-navy);
}
.agency-menu-owner-tier {
  font-size: .72rem;
  color: #8b8a97;
}
.agency-score-ring {
  --ring-size: 2.5rem;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--wins-mint) calc(var(--score) * 1%), #ecebf3 0);
}
.agency-score-ring span {
  width: calc(var(--ring-size) - .5rem);
  height: calc(var(--ring-size) - .5rem);
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 700;
  color: var(--wins-navy);
}

/* Dashboard "Quick Actions" cards: icon badge lifts and tints on hover so
   the grid feels tappable, matching the agency-card hover treatment used
   on the public directory pages. */
.agency-quick-action-card {
  transition: transform .15s ease, box-shadow .15s ease;
}
.agency-quick-action-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(20, 25, 45, .1) !important;
}
.agency-quick-action-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: .85rem;
  background: var(--wins-mint-light);
  color: var(--wins-mint-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: .85rem;
}

/* ---------- Agency dashboard: profile-edit wizard ---------- */
.wizard-steps {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-bottom: 2rem;
  overflow-x: auto;
}
.wizard-step {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.wizard-step-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ecebf3;
  color: #8b8a97;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  transition: background .2s ease, color .2s ease, transform .2s ease;
  flex-shrink: 0;
}
.wizard-step.is-active .wizard-step-circle {
  background: var(--wins-gradient-purple);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(124, 58, 237, .35);
}
.wizard-step.is-done .wizard-step-circle {
  background: var(--wins-mint-light);
  color: var(--wins-mint-dark);
}
.wizard-step-label {
  font-size: .85rem;
  font-weight: 600;
  color: #8b8a97;
  white-space: nowrap;
}
.wizard-step.is-active .wizard-step-label {
  color: var(--wins-navy);
}
.wizard-step-connector {
  width: 32px;
  height: 2px;
  background: #ecebf3;
  flex-shrink: 0;
}
.wizard-pane {
  display: none;
  animation: wizardFadeIn .25s ease;
}
.wizard-pane.is-active {
  display: block;
}
@keyframes wizardFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Agency dashboard: leads / resumes / upgrade ---------- */
.lead-card-locked {
  position: relative;
}
.lead-card-locked-overlay {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, .55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: inherit;
  text-align: center;
  padding: 1rem;
}
.plan-feature-card {
  border-radius: 1rem;
  padding: 1.5rem;
  height: 100%;
}
.plan-feature-card.is-current {
  border: 2px solid var(--wins-mint);
}
.plan-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .6rem;
  font-size: .92rem;
}
.plan-feature-list .bi-check-circle-fill { color: #16a34a; }

/* ---------- 404 page ---------- */
.hero-404-code {
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, .14);
  letter-spacing: .02em;
  margin-bottom: -.75rem;
}
.hero-404-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--wins-mint, #1abc9c);
  margin-bottom: 1rem;
}

/* ====================================================================
   SITE-WIDE REDESIGN -- shared by every front-facing marketing/directory
   page via body.wins-site (added to each page's <body> tag alongside any
   page-specific class). Deliberately NOT bare :root/unscoped, because
   agency/_layout_top.php (the agency owner's dashboard) also includes
   this same header.php + theme.css and must keep its current look for
   now -- it never gets the wins-site class, so none of this reaches it.
   Admin CMS is a fully separate stylesheet (admin/assets/theme.css) and
   is untouched either way. Content that's genuinely homepage-exclusive
   (How WINS Works, the AI citation trust bar) stays under body.page-home,
   which every wins-site page still doesn't have except index.php. */

/* Re-themes every existing var(--wins-mint)-based element (buttons,
   links, hover states, active pills) to teal, by overriding the custom
   properties at this scope -- no per-component overrides needed since
   everything already reads from these vars. */
body.wins-site {
  --wins-mint: #1abc9c;
  --wins-mint-dark: #159480;
  --wins-mint-light: #e6f9f5;
  --wins-gradient-purple: #1abc9c;
  --wins-gradient-purple-hover: #159480;
  /* Every var(--wins-navy)-based heading/text color across the site
     (card titles, section headings, etc.) picks this up too, so front
     pages read as one consistent navy/teal palette instead of the old
     near-black grey + purple. */
  --wins-navy: #1a2a4a;
  --wins-navy-dark: #0a1633;
}

/* Agency card title: navy blue by default, matching the hero background's
   tone (not the teal CTA accent, to keep the CTA color meaningfully
   distinct), black on hover. */
body.wins-site .agency-card-title-link {
  color: #1a2a4a;
}
body.wins-site .agency-card-title-link:hover,
body.wins-site .agency-card-title-link:focus {
  color: #000;
}

/* "Explore More" category card: hero navy instead of the site-wide
   near-black --wins-navy, so it reads as part of this page's palette. */
body.wins-site .category-card-explore {
  background: #1a2a4a;
  border-color: #1a2a4a;
}

/* Header: transparent over the hero, becomes a fixed white bar with dark
   text/logo once scrolled (body.nav-scrolled toggled by header.php's own
   scroll listener). Fixed positioning takes the navbar out of flow, so
   body reserves its height up top and the hero pulls itself back up
   underneath it (negative margin) -- every section after the hero is
   unaffected, in normal flow. */
body.wins-site { padding-top: var(--wins-navbar-h, 92px); }
body.wins-site .wins-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1030;
  background: transparent;
  box-shadow: none;
  padding-top: .9rem;
  padding-bottom: .9rem;
  transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
}
body.wins-site .wins-navbar .nav-link {
  color: rgba(255, 255, 255, .82);
}
body.wins-site .wins-navbar .nav-link:hover {
  color: #fff;
}
body.wins-site .wins-navbar .btn-outline-light {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}
body.wins-site .wins-navbar .btn-outline-light:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
  color: #fff;
}
body.wins-site.nav-scrolled .wins-navbar {
  background: #fff;
  box-shadow: 0 4px 24px rgba(10, 22, 51, .1);
  padding-top: .55rem;
  padding-bottom: .55rem;
}
body.wins-site.nav-scrolled .wins-navbar .navbar-brand img {
  /* Logo asset is solid white on transparent -- force it dark so it
     stays legible once the bar goes white. */
  filter: brightness(0);
}
body.wins-site.nav-scrolled .wins-navbar .nav-link {
  color: #384164;
}
body.wins-site.nav-scrolled .wins-navbar .nav-link:hover {
  color: #1a2a4a;
}
body.wins-site.nav-scrolled .wins-navbar .wins-toggler-bar {
  background: #384164;
}

/* Mobile menu: always a solid white, full-bleed edge-to-edge panel
   (flush with the viewport, no floating card/shadow) regardless of
   scroll state, so its links stay legible whether it's opened over the
   transparent hero or the scrolled white bar (the toggler bars alone
   switching color on scroll isn't enough once the panel itself opens). */
@media (max-width: 991.98px) {
  body.wins-site .wins-navbar .navbar-collapse {
    /* Absolute (not a vw/negative-margin trick -- .navbar-collapse is a
       flex item of Bootstrap's own flex .container, so percentage/vw
       width tricks fight the flex algorithm and end up oversized) and
       anchored with top:100% against .wins-navbar itself (the nearest
       positioned ancestor, since it's position:fixed) rather than the
       JS-measured --wins-navbar-h variable -- that variable only
       re-syncs on load/resize/scroll, so it briefly goes stale for the
       ~250ms the navbar's own padding is mid-transition on scroll,
       leaving a gap that shows hero content through. top:100% tracks
       the navbar's real rendered height with zero JS/timing dependency. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100vh - var(--wins-navbar-h, 92px));
    overflow-y: auto;
    background: #fff;
    margin: 0;
    padding: 1.1rem 1.5rem 1.4rem;
    border-top: 1px solid #eef0f6;
  }
  body.wins-site .wins-navbar .navbar-collapse .nav-link {
    color: #384164;
  }
  body.wins-site .wins-navbar .navbar-collapse .nav-link:hover {
    color: #1a2a4a;
  }
  body.wins-site .wins-navbar .navbar-collapse .btn-outline-light {
    border-color: #d7dbe6;
    color: #1a2a4a;
  }
  body.wins-site .wins-navbar .navbar-collapse .btn-outline-light:hover {
    background: #f3f5fa;
    border-color: #1a2a4a;
    color: #1a2a4a;
  }
}
body.wins-site.nav-scrolled .wins-navbar .btn-outline-light {
  border-color: #d7dbe6;
  color: #1a2a4a;
}
body.wins-site.nav-scrolled .wins-navbar .btn-outline-light:hover {
  background: #f3f5fa;
  border-color: #1a2a4a;
  color: #1a2a4a;
}

/* Hero: flat navy radial gradient, pulled up behind the fixed nav.
   .hero-gradient (breadcrumb/title-only heroes on inner pages) gets the
   same background treatment as .hero-grid (the fuller marketing heroes
   on index/agency/agency-profile/list-your-agency) for one consistent
   look everywhere, without forcing the homepage's oversized H1 clamp
   onto simple inner-page titles that were never designed for it. */
body.wins-site .hero-grid,
body.wins-site .hero-gradient {
  margin-top: calc(-1 * var(--wins-navbar-h, 92px));
  padding-top: calc(var(--wins-navbar-h, 92px) + 3.5rem) !important;
  padding-bottom: 4.5rem !important;
  background-color: #0a1633;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    radial-gradient(ellipse at 60% 0%, #1a2a4a 60%, #0a1633 100%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
  position: relative;
}
body.wins-site .hero-grid h1 {
  font-size: clamp(1.5rem, 6vw, 3.75rem) !important;
  letter-spacing: -.01em;
  line-height: 1.15;
}
body.wins-site .hero-grid p.fs-5 {
  font-size: 1.15rem !important;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72) !important;
}
body.wins-site .hero-search-bar {
  box-shadow: 0 20px 45px rgba(4, 10, 26, .35) !important;
}
body.wins-site .hero-search-icon-btn {
  background: var(--wins-mint-light);
  color: var(--wins-mint-dark);
}
body.wins-site .hero-search-icon-btn:hover {
  background: var(--wins-mint);
  color: #fff;
}
body.wins-site .hero-tag {
  padding: 7px 16px;
  font-size: .82rem;
}
body.wins-site .hero-tag:hover {
  background: var(--wins-mint);
  border-color: var(--wins-mint);
}

/* AI trust bar: cooler neutral to sit better against navy/teal than the
   old warm cream tone. */
body.wins-site .ai-trust-bar {
  background: #fff;
  border-bottom: 1px solid #eef0f4;
}

/* Bottom CTA band: same navy family as the hero instead of the old
   purple, teal button to match. */
body.wins-site .cta-gradient {
  background: radial-gradient(ellipse at 30% 0%, #1a2a4a 0%, #0a1633 70%, #060d1e 100%);
}
body.wins-site .cta-gradient h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
}
body.wins-site .cta-gradient .btn-mint {
  background: var(--wins-mint);
  color: #fff;
  padding: .7rem 2.25rem;
  font-size: 1.02rem;
}
body.wins-site .cta-gradient .btn-mint:hover {
  background: var(--wins-mint-dark);
  color: #fff;
}

/* Section rhythm/typography polish. */
body.wins-site section h2 {
  letter-spacing: -.01em;
}
body.wins-site .category-card {
  padding: 1.1rem .75rem;
}

/* How WINS Works / process sections: dark navy section matching the
   hero/CTA gradient, with a faint grid texture, a dashed connector running
   behind the step icons, and a scroll-reveal fade-up (each page's own
   IntersectionObserver instance). Shared by every page that includes a
   .how-it-works-section (homepage's "How WINS Works", agency directory's
   "Post Your Requirements", careers' "How to Apply"). */
body.wins-site .how-it-works-section {
  background-color: #0a1633;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, #1a2a4a 55%, #0a1633 100%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
  color: #fff;
}
body.wins-site .how-it-works-section h2 {
  color: #fff;
}
body.wins-site .how-it-works-sub {
  color: rgba(255, 255, 255, .68);
}
body.wins-site .how-it-works-vlist::before {
  color: rgba(255, 255, 255, .16);
}
body.wins-site .how-it-works-icon {
  background: #132546;
  border: 1px solid rgba(26, 188, 156, .4);
  color: var(--wins-mint);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}
body.wins-site .how-it-works-num {
  background: var(--wins-mint);
  color: #0a1633;
  box-shadow: 0 0 0 3px #0a1633;
}
body.wins-site .how-it-works-vstep h3 {
  color: #fff;
}
body.wins-site .how-it-works-vstep p {
  color: rgba(255, 255, 255, .65);
}

/* Quick Facts: same dark navy/grid treatment as the process sections, so
   this stat strip reads as a distinct "data" band rather than blending
   into the plain white content above/below it. Cards go from solid-fill
   color blocks to a subtler translucent "glass" card, since a wall of
   identical saturated tiles was the original complaint. */
body.wins-site .quick-facts-section {
  background-color: #0a1633;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, #1a2a4a 55%, #0a1633 100%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
  color: #fff;
}
body.wins-site .quick-facts-section h2 {
  color: #fff;
}
body.wins-site .quick-facts-section > .container > .text-center p {
  color: rgba(255, 255, 255, .68);
}
body.wins-site .quick-facts-section .quick-fact-card {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
}
body.wins-site .quick-facts-section .quick-fact-card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, .3);
}
body.wins-site .quick-facts-section .quick-fact-icon {
  background: #132546;
  border: 1px solid rgba(26, 188, 156, .4);
  color: var(--wins-mint);
}
body.wins-site .quick-facts-section .quick-fact-card-label {
  color: rgba(255, 255, 255, .55);
}
body.wins-site .quick-facts-section .quick-fact-card-value {
  color: #fff;
}
body.wins-site .quick-facts-section .quick-facts-policy-links {
  border-top-color: rgba(255, 255, 255, .15);
}

/* Small "kicker" label above each section heading. */
.section-eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wins-mint);
  margin-bottom: .5rem;
}

.plan-feature-list .bi-lock-fill { color: #9b9aa3; }

/* --- Agency Finder ("Compare & Find") page ------------------------------ */
.finder-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 1rem;
  padding: 1rem;
}
.finder-filter-bar .form-select {
  width: auto;
  min-width: 180px;
  flex: 1 1 180px;
  max-width: 260px;
}
.finder-filter-bar .btn {
  flex: 0 0 auto;
}
@media (max-width: 575.98px) {
  .finder-filter-bar .form-select {
    max-width: none;
    flex-basis: 100%;
  }
  .finder-filter-bar .btn {
    flex-basis: 100%;
  }
}

.finder-card-wrap {
  position: relative;
}
.finder-compare-check {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 2rem;
  padding: .35rem .75rem .35rem .6rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(20, 25, 45, .08);
  font-size: .8rem;
  font-weight: 600;
  color: var(--bs-body-color);
  user-select: none;
}
.finder-compare-check .finder-compare-input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--wins-mint, #10b3a3);
  cursor: pointer;
}
.finder-compare-check:has(.finder-compare-input:checked) {
  border-color: var(--wins-mint, #10b3a3);
  color: var(--wins-mint-dark, #0b8577);
}

.finder-compare-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background: var(--wins-navy-dark, #0a1633);
  color: #fff;
  padding: .85rem 0;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .25);
}
.finder-compare-bar-names {
  font-size: .9rem;
  color: rgba(255, 255, 255, .8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.finder-bar-open {
  padding-bottom: 4.5rem;
}