/* ==========================================================
   BuffAway Theme — Enhancements v1.1
   New: Floating CTA, Social Proof, Micro-interactions,
        Section Transitions, Internal Links, Comparison,
        Schedule Callout, Contact Map, Company Labels
   ========================================================== */

/* --------------------------------------------------------
   1. FLOATING DESKTOP QUOTE BUTTON
   -------------------------------------------------------- */
.floating-quote-btn {
  position: fixed;
  bottom: var(--sp-8);
  right: var(--sp-8);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.85em 1.6em;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-full);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 184, 148, 0.38), 0 3px 8px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(16px) scale(0.94);
  transition: opacity var(--trans-base), transform var(--trans-base),
              box-shadow var(--trans-base);
  pointer-events: none;
  white-space: nowrap;
}
.floating-quote-btn.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.floating-quote-btn:hover {
  background: linear-gradient(135deg, var(--color-accent-dark) 0%, #006B56 100%);
  box-shadow: 0 12px 32px rgba(0, 184, 148, 0.48), 0 4px 12px rgba(0,0,0,0.2);
  transform: translateY(-2px) scale(1.02);
  color: var(--color-white);
}
.floating-quote-btn__pulse {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  animation: float-pulse 2.8s ease-out infinite;
  z-index: -1;
}
@keyframes float-pulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}

/* Hide on mobile — mobile uses sticky bar at bottom */
@media (max-width: 768px) {
  .floating-quote-btn { display: none !important; }
}

/* --------------------------------------------------------
   2. IMPROVED MOBILE STICKY CTA BAR
   -------------------------------------------------------- */
.mobile-sticky-cta {
  display: none; /* shown only on mobile via @media */
}
@media (max-width: 768px) {
  .mobile-sticky-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: var(--z-sticky);
    box-shadow: 0 -4px 20px rgba(14,42,71,0.18);
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .mobile-sticky-cta__call,
  .mobile-sticky-cta__quote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-3);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: filter var(--trans-fast);
  }
  .mobile-sticky-cta__call  { background: var(--color-primary); color: var(--color-white); }
  .mobile-sticky-cta__quote { background: var(--color-accent);  color: var(--color-white); }
  .mobile-sticky-cta__call:hover  { filter: brightness(1.15); color: var(--color-white); }
  .mobile-sticky-cta__quote:hover { filter: brightness(1.1);  color: var(--color-white); }
}

/* --------------------------------------------------------
   3. SOCIAL PROOF BAR (stats)
   -------------------------------------------------------- */
.social-proof-bar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--sp-6);
}
.social-proof-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.social-proof-stat {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6);
  position: relative;
}
.social-proof-stat + .social-proof-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 36px;
  width: 1px;
  background: var(--color-border);
}
.social-proof-stat__value {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.social-proof-stat__value--accent { color: var(--color-accent-dark); }
.social-proof-stat__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  max-width: 90px;
}

@media (max-width: 600px) {
  .social-proof-bar__inner { gap: 0; }
  .social-proof-stat { padding: var(--sp-3) var(--sp-4); }
  .social-proof-stat__value { font-size: var(--text-2xl); }
  .social-proof-stat + .social-proof-stat::before { height: 28px; }
}

/* --------------------------------------------------------
   4. TESTIMONIAL CARDS — COMPANY TYPE LABELS
   -------------------------------------------------------- */
.testimonial-card__type-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background-color: var(--color-accent-light);
  color: var(--color-accent-dark);
  margin-bottom: var(--sp-3);
}
.testimonial-card__type-label--finance  { background: #EFF6FF; color: #1D4ED8; }
.testimonial-card__type-label--medical  { background: #F0FDF4; color: #15803D; }
.testimonial-card__type-label--property { background: #FFF7ED; color: #C2410C; }
.testimonial-card__type-label--tech     { background: #F5F3FF; color: #6D28D9; }
.testimonial-card__type-label--retail   { background: #FFF1F2; color: #BE123C; }
.testimonial-card__type-label--office   { background: #F0F9FF; color: #0369A1; }

/* Verified badge on testimonial */
.testimonial-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--color-accent-dark);
  font-weight: var(--weight-medium);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-border-light);
}
.testimonial-card__verified::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  background: var(--color-accent);
  color: white;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
}

/* --------------------------------------------------------
   5. SERVICE COMPARISON BLOCK
   -------------------------------------------------------- */
.comparison-block {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}
.comparison-block__header {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  background: var(--color-primary);
  color: var(--color-white);
}
.comparison-block__header-cell {
  padding: var(--sp-5) var(--sp-6);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
}
.comparison-block__header-cell:first-child { border-right: 1px solid rgba(255,255,255,0.12); }
.comparison-block__header-cell--highlight {
  background: var(--color-accent);
  text-align: center;
}
.comparison-block__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  border-bottom: 1px solid var(--color-border-light);
  transition: background-color var(--trans-fast);
}
.comparison-block__row:last-child { border-bottom: none; }
.comparison-block__row:hover { background-color: var(--color-bg-light); }
.comparison-block__cell {
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border-right: 1px solid var(--color-border-light);
}
.comparison-block__cell:last-child { border-right: none; }
.comparison-block__cell--feature {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
.comparison-block__cell--highlight { background: rgba(0,184,148,0.04); justify-content: center; }
.comparison-check { color: var(--color-accent-dark); font-weight: 700; }
.comparison-cross  { color: #D1D5DB; }
.comparison-block__cta {
  padding: var(--sp-5) var(--sp-6);
  background: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

@media (max-width: 640px) {
  .comparison-block { overflow-x: auto; }
  .comparison-block__header,
  .comparison-block__row { min-width: 480px; }
}

/* --------------------------------------------------------
   6. SCHEDULE CALLOUT / EMERGENCY BAND
   -------------------------------------------------------- */
.schedule-callout {
  background: linear-gradient(90deg, var(--color-primary) 0%, #1E4A7A 100%);
  padding: var(--sp-5) 0;
  overflow: hidden;
  position: relative;
}
.schedule-callout::before {
  content: '';
  position: absolute;
  left: -60px; top: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(0,184,148,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.schedule-callout__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.schedule-callout__left {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.schedule-callout__icon {
  width: 48px; height: 48px;
  background: rgba(0,184,148,0.18);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.schedule-callout__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--sp-1);
}
.schedule-callout__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  margin: 0;
}
.schedule-callout__actions {
  display: flex;
  gap: var(--sp-3);
  flex-shrink: 0;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .schedule-callout__inner { flex-direction: column; align-items: flex-start; }
  .schedule-callout__actions { width: 100%; }
  .schedule-callout__actions .btn { flex: 1; justify-content: center; }
}

/* --------------------------------------------------------
   7. INTERNAL LINKS BLOCK (cross-linking service ↔ city)
   -------------------------------------------------------- */
.internal-links {
  padding-block: var(--sp-12);
}
.internal-links--services { background: var(--color-bg-light); }
.internal-links--cities   { background: var(--color-white); }

.internal-links__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}
.internal-link-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: border-color var(--trans-fast), color var(--trans-fast),
              background-color var(--trans-fast), transform var(--trans-fast);
}
.internal-links--services .internal-link-pill { background: var(--color-bg-section); }
.internal-link-pill:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
  background-color: var(--color-accent-light);
  transform: translateY(-1px);
}
.internal-link-pill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* --------------------------------------------------------
   8. CONTACT PAGE — MAP PLACEHOLDER + COVERAGE
   -------------------------------------------------------- */
.contact-map-placeholder {
  background: linear-gradient(145deg, #E8F0F8 0%, #D4E5F5 100%);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
}
.contact-map-placeholder__pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}
.contact-map-placeholder__pin-icon {
  width: 60px; height: 60px;
  background: var(--color-primary);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  position: relative;
}
.contact-map-placeholder__pin-icon::after {
  content: '📍';
  font-size: 1.5rem;
  transform: rotate(45deg);
  display: block;
}
.contact-map-placeholder__label {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}
.contact-map-placeholder__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
/* Decorative grid lines */
.contact-map-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(14,42,71,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,42,71,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Coverage summary grid */
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.coverage-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: border-color var(--trans-fast), color var(--trans-fast);
}
.coverage-item:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }
.coverage-item__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* --------------------------------------------------------
   9. SECTION TRANSITIONS / DIVIDERS
   -------------------------------------------------------- */
.section-divider {
  height: 60px;
  overflow: hidden;
  line-height: 0;
  margin-top: -1px; /* prevent gap */
}
.section-divider svg { display: block; width: 100%; height: 60px; }
.section-divider--light-to-white { background: var(--color-bg-light); }
.section-divider--white-to-light { background: var(--color-white); }
.section-divider--navy-to-white  { background: var(--color-primary); }
.section-divider--white-to-navy  { background: var(--color-white); }

/* Diagonal band transition between sections */
.section--angled-top {
  clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
  margin-top: -40px;
  padding-top: calc(var(--section-pad-y) + 40px);
}
.section--angled-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
  padding-bottom: calc(var(--section-pad-y) + 40px);
  margin-bottom: -40px;
}

/* --------------------------------------------------------
   10. MICRO-INTERACTIONS & PREMIUM POLISH
   -------------------------------------------------------- */

/* Card lift effect */
.service-card,
.testimonial-card,
.feature-item,
.industry-card {
  will-change: transform;
}

/* Button ripple on click */
.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition: transform 0.4s ease, opacity 0.3s ease;
}
.btn:active::after {
  transform: scale(2.5);
  opacity: 1;
  transition: transform 0s, opacity 0s;
}

/* Smooth underline link */
.smooth-link {
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: left bottom;
  transition: background-size var(--trans-base);
  text-decoration: none;
}
.smooth-link:hover { background-size: 100% 2px; }

/* Focus ring animation */
*:focus-visible {
  animation: focus-ring 0.2s ease;
}
@keyframes focus-ring {
  from { outline-offset: 0px; }
  to   { outline-offset: 3px; }
}

/* Shimmer on hero stat numbers */
@keyframes shimmer-num {
  0%   { color: var(--color-accent); }
  50%  { color: var(--color-accent-dark); }
  100% { color: var(--color-accent); }
}
.stat-highlight { animation: shimmer-num 3s ease-in-out infinite; }

/* Floating badge wiggle on hover */
.hero__eyebrow:hover {
  animation: gentle-wiggle 0.4s ease;
}
@keyframes gentle-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(-1.5deg); }
  75%       { transform: rotate(1.5deg); }
}

/* Trust strip item hover lift */
.trust-strip__item {
  border-radius: var(--radius-md);
  transition: background-color var(--trans-fast), transform var(--trans-fast);
}
.trust-strip__item:hover {
  background-color: var(--color-bg-light);
  transform: translateY(-1px);
}

/* Process step icon pulse */
.process-step__number {
  transition: transform var(--trans-base), box-shadow var(--trans-base);
}
.process-step:hover .process-step__number {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(0,184,148,0.45);
}

/* Service card border glow */
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-accent) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--trans-base);
  z-index: -1;
  margin: -1px;
}
.service-card:hover::before { opacity: 0.12; }

/* --------------------------------------------------------
   11. STRONGER PROCESS STEPS
   -------------------------------------------------------- */
.process-steps--enhanced {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  position: relative;
  counter-reset: steps;
}
.process-step--card {
  position: relative;
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  border-right: 1px solid var(--color-border-light);
}
.process-step--card:last-child { border-right: none; }
/* Connector arrow */
.process-step--card:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -14px;
  top: calc(var(--sp-8) + 20px);
  color: var(--color-accent);
  font-size: var(--text-xl);
  font-weight: 700;
  background: var(--color-white);
  padding: 4px;
  z-index: 1;
}

/* --------------------------------------------------------
   12. REUSABLE CTA BLOCK VARIANTS
   -------------------------------------------------------- */
.cta-block {
  border-radius: var(--radius-xl);
  padding: var(--sp-10) var(--sp-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  flex-wrap: wrap;
}
.cta-block--navy {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-mid) 100%);
  color: var(--color-white);
}
.cta-block--accent {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: var(--color-white);
}
.cta-block--bordered {
  background: var(--color-white);
  border: 2px solid var(--color-border);
}
.cta-block__text { flex: 1; min-width: 240px; }
.cta-block__title {
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-snug);
  margin-bottom: var(--sp-3);
}
.cta-block--navy .cta-block__title,
.cta-block--accent .cta-block__title { color: var(--color-white); }
.cta-block__sub {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  opacity: 0.82;
}
.cta-block__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; flex-shrink: 0; }

/* --------------------------------------------------------
   13. LEAD CAPTURE FLOW IMPROVEMENTS
   -------------------------------------------------------- */

/* Multi-step progress indicator */
.form-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--sp-6);
  counter-reset: form-steps;
}
.form-step-indicator {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
}
.form-step-indicator__num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--trans-base), color var(--trans-base);
}
.form-step-indicator.is-active .form-step-indicator__num {
  background: var(--color-primary);
  color: white;
}
.form-step-indicator.is-done .form-step-indicator__num {
  background: var(--color-accent);
  color: white;
}
.form-step-indicator__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
  display: none;
}
.form-step-indicator__line {
  flex: 1;
  height: 2px;
  background: var(--color-border);
  margin: 0 var(--sp-2);
  border-radius: 2px;
  transition: background-color var(--trans-slow);
}
.form-step-indicator.is-done .form-step-indicator__line { background: var(--color-accent); }

/* Quote form — value prop strip */
.quote-value-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  padding: var(--sp-4);
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
}
.quote-value-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-1);
}
.quote-value-item__icon { font-size: 1.375rem; }
.quote-value-item__text { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); }

/* --------------------------------------------------------
   14. SCROLL ANIMATION STAGGER
   -------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }
[data-reveal-delay="5"] { transition-delay: 400ms; }

/* --------------------------------------------------------
   15. RESPONSIVE PATCHES
   -------------------------------------------------------- */
@media (max-width: 768px) {
  .cta-block { flex-direction: column; align-items: flex-start; padding: var(--sp-7) var(--sp-6); }
  .cta-block__actions { width: 100%; }
  .cta-block__actions .btn { flex: 1; justify-content: center; }
  .quote-value-strip { grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); }
}
@media (max-width: 480px) {
  .social-proof-stat { padding: var(--sp-2) var(--sp-3); }
  .social-proof-stat + .social-proof-stat::before { display: none; }
  .social-proof-bar__inner { gap: var(--sp-4) 0; justify-content: space-around; }
  .quote-value-strip { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .floating-quote-btn,
  .floating-quote-btn__pulse,
  [data-reveal],
  .stat-highlight { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------
   CAREERS PAGE STYLES
   -------------------------------------------------------- */

/* Role category label */
.careers-category {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-5);
  border-bottom: 2px solid var(--color-border);
}
.careers-category__icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; flex-shrink: 0;
}
.careers-category__icon--ops   { background: #EFF6FF; }
.careers-category__icon--sales { background: var(--color-accent-light); }
.careers-category__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-primary);
  line-height: var(--leading-snug);
}
.careers-category__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Role type badge */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.role-badge--hourly {
  background: #EFF6FF;
  color: #1D4ED8;
}
.role-badge--commission {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}
.role-badge--contract {
  background: #FFF7ED;
  color: #C2410C;
}

/* Role accordion card */
.role-card {
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--trans-base), box-shadow var(--trans-base);
  margin-bottom: var(--sp-3);
}
.role-card.is-open {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.role-card__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.role-card__trigger:hover { background: var(--color-bg-light); }
.role-card.is-open .role-card__trigger { background: var(--color-bg-light); }
.role-card__trigger-left {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: 1;
  min-width: 0;
}
.role-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  line-height: var(--leading-snug);
}
.role-card__summary {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.role-card__chevron {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-bg-section);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform var(--trans-base), background-color var(--trans-base);
}
.role-card.is-open .role-card__chevron {
  transform: rotate(180deg);
  background: var(--color-primary);
  color: var(--color-white);
}

/* Role body (expandable) */
.role-card__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out);
}
.role-card__body-inner {
  padding: var(--sp-2) var(--sp-6) var(--sp-7);
  border-top: 1px solid var(--color-border-light);
}
.role-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.role-detail-block h4 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-3);
}
.role-detail-block ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.role-detail-block li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}
.role-detail-block li::before {
  content: '•';
  color: var(--color-accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.role-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--sp-4);
}
.role-apply-btn {
  margin-top: var(--sp-5);
}

/* Why work section */
.careers-benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-5);
}
.careers-benefit {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: box-shadow var(--trans-base), border-color var(--trans-base);
}
.careers-benefit:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--color-accent);
}
.careers-benefit__icon { font-size: 1.75rem; }
.careers-benefit__title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-primary); }
.careers-benefit__desc  { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-relaxed); }

/* Compensation table */
.comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.comp-table th, .comp-table td {
  padding: var(--sp-3) var(--sp-5);
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
}
.comp-table th {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.comp-table tr:last-child td { border-bottom: none; }
.comp-table tr:hover td { background: var(--color-bg-light); }

/* Application form card */
.careers-form-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--sp-10);
  box-shadow: var(--shadow-xl);
  max-width: 760px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
  .role-detail-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .careers-form-card { padding: var(--sp-6); }
}
@media (max-width: 640px) {
  .role-card__trigger { padding: var(--sp-4) var(--sp-5); }
  .role-card__body-inner { padding: var(--sp-2) var(--sp-5) var(--sp-6); }
  .role-card__title { font-size: var(--text-base); }
}