/* ============================================================
   RPS CONTRACTS — DESIGN ENHANCEMENT PASS
   Stronger visual hierarchy, premium card treatments,
   bolder hovers, richer GSAP hooks, deeper patterns.
   Additive only. Nothing above this file is modified.
   ============================================================ */

/* ── 1. LAYERED CARD SYSTEM — accent rails, inner depth ── */

/* Base layered card (applies to rps-card, rps-value-card, rps-service-item) */
.rps-card,
.rps-value-card,
.rps-service-item {
  position: relative;
  overflow: hidden;
}

/* Left accent rail — subtle red gradient line */
.rps-card::after,
.rps-value-card::after,
.rps-service-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, var(--ricson-red), rgba(196,30,58,0.25) 60%, transparent);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out-expo);
  pointer-events: none;
  z-index: 1;
}

.rps-card:hover::after,
.rps-value-card:hover::after,
.rps-service-item:hover::after {
  opacity: 1;
}

/* Inner highlight glow on hover */
.rps-card:hover,
.rps-value-card:hover,
.rps-service-item:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 48px rgba(30, 32, 36, 0.12),
    0 8px 16px rgba(30, 32, 36, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.6);
  border-color: var(--ricson-red-30);
}

/* Step number shift on card hover */
.rps-card:hover .rps-step-num,
.rps-value-card:hover .rps-step-num {
  transform: translateX(4px);
  transition: transform var(--duration-normal) var(--ease-out-back);
}

/* Service item link arrow shift */
.rps-service-item:hover .rps-service-item-link {
  color: var(--ricson-red-hover);
}
.rps-service-item:hover .rps-service-item-link::after {
  content: ' →';
}

/* ── 2. TESTIMONIAL CARD PREMIUM ── */
.rps-testimonial {
  position: relative;
  overflow: hidden;
}
.rps-testimonial::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, var(--ricson-red), transparent);
  opacity: 0;
  transition: opacity var(--duration-normal);
  pointer-events: none;
}
.rps-testimonial:hover::after {
  opacity: 1;
}
.rps-testimonial:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 48px rgba(30, 32, 36, 0.12),
    0 8px 16px rgba(30, 32, 36, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ── 3. FAQ PREMIUM ── */
.rps-faq {
  position: relative;
  transition: all var(--duration-normal) var(--ease-out-expo);
}
.rps-faq::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, var(--ricson-red), transparent);
  opacity: 0;
  transition: opacity var(--duration-normal);
  pointer-events: none;
}
.rps-faq:hover::before {
  opacity: 1;
}
.rps-faq:hover {
  border-color: var(--ricson-red-30);
  box-shadow: var(--shadow-md);
}
.rps-faq-question {
  transition: color var(--duration-normal);
}
.rps-faq:hover .rps-faq-question {
  color: var(--ricson-red);
}

/* ── 4. AUTHORITY BANNER ENHANCED ── */
.authority-banner {
  position: relative;
}
.authority-banner-inner {
  position: relative;
  z-index: 2;
}
/* Add a subtle corner chevron watermark */
.authority-banner .authority-banner-kicker {
  position: relative;
}
.authority-banner .authority-banner-kicker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + 16px);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--ricson-red);
  opacity: 0.5;
}
@media (max-width: 768px) {
  .authority-banner .authority-banner-kicker::after { display: none; }
}

/* ── 5. TRUST BAR ENHANCED ── */
.trust-bar {
  position: relative;
}
.trust-bar-item {
  transition: all var(--duration-normal);
}
.trust-bar-item:hover {
  color: var(--ricson-red);
}

/* ── 6. DARK SERVICE CARDS (homepage branded section) ── */
.service-card--branded {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #ffffff 0%, #fafafa 100%);
}
.service-card--branded::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ricson-red), rgba(196,30,58,0.3) 70%, transparent);
  opacity: 0;
  transition: opacity var(--duration-normal);
  pointer-events: none;
}
.service-card--branded:hover::before {
  opacity: 1;
}
.service-card--branded::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, transparent 50%, rgba(196,30,58,0.04) 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-normal);
}
.service-card--branded:hover::after {
  opacity: 1;
}
.service-card--branded:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 24px 56px rgba(0,0,0,0.18),
    0 8px 20px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

/* ── 7. PROCESS / STEP CARDS ENHANCED ── */
.rps-step-num {
  display: inline-block;
  transition: transform var(--duration-normal) var(--ease-out-back), color var(--duration-normal);
}
.rps-card:hover .rps-step-num {
  transform: translateX(6px) scale(1.05);
  color: var(--ricson-red-hover);
}

/* ── 8. BENEFIT CARDS ENHANCED ── */
.benefit-card {
  position: relative;
  overflow: hidden;
}
.benefit-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, var(--ricson-red), transparent);
  opacity: 0;
  transition: opacity var(--duration-normal);
  pointer-events: none;
}
.benefit-card:hover::after {
  opacity: 1;
}
.benefit-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 48px rgba(30, 32, 36, 0.12),
    0 8px 16px rgba(30, 32, 36, 0.08);
}
.benefit-card:hover .benefit-card-icon {
  transform: scale(1.08) rotate(-3deg);
  background: var(--ricson-red);
}
.benefit-card:hover .benefit-card-icon svg {
  stroke: var(--white);
}
.benefit-card-icon {
  transition: all var(--duration-normal) var(--ease-out-back);
}

/* ── 9. CONTACT CARDS ENHANCED ── */
.rps-contact-card {
  position: relative;
  overflow: hidden;
}
.rps-contact-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, var(--ricson-red), transparent);
  opacity: 0;
  transition: opacity var(--duration-normal);
  pointer-events: none;
}
.rps-contact-card:hover::after {
  opacity: 1;
}

/* ── 10. CITY CARDS ENHANCED ── */
.city-card {
  position: relative;
  overflow: hidden;
}
.city-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ricson-red), transparent);
  opacity: 0;
  transition: opacity var(--duration-normal);
  pointer-events: none;
}
.city-card:hover::after {
  opacity: 1;
}
.city-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(30, 32, 36, 0.14);
}

/* ── 11. COVERAGE TABLE ROW HOVER ── */
.coverage-table tbody tr {
  transition: background var(--duration-fast);
}

/* ── 12. SECTION PATTERN ENHANCEMENTS ── */
/* Add subtle top accent line to white sections that need it */
.section-accent-top {
  position: relative;
}
.section-accent-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 10%, var(--ricson-red) 50%, transparent 90%);
  opacity: 0.3;
  pointer-events: none;
}

/* ── 13. STAT NUMBER ENHANCED ── */
.rps-stat-number {
  position: relative;
  display: inline-block;
}
.rps-stat-number::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--ricson-red);
  opacity: 0.4;
}

/* ── 14. PILL LABEL ENHANCED ── */
.pill-label {
  position: relative;
  transition: all var(--duration-normal);
}
.pill-label:hover {
  border-color: var(--ricson-red);
  color: var(--ricson-red);
}
.pill-label--light:hover {
  border-color: rgba(255,255,255,0.7);
  color: var(--white);
}

/* ── 15. BUTTON ICON ENHANCED ── */
.btn-icon {
  transition: transform var(--duration-normal) var(--ease-out-back), background var(--duration-normal);
}
.btn:hover .btn-icon {
  transform: translate(3px, -3px) scale(1.05);
}

/* ── 16. NAV LINK UNDERLINE ENHANCED ── */
.nav-links a::after {
  height: 2px;
  background: linear-gradient(90deg, var(--ricson-red), rgba(196,30,58,0.5));
}

/* ── 17. FOOTER LINK ENHANCED ── */
.footer-links a {
  position: relative;
  display: inline-block;
}
.footer-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ricson-red);
  transition: width var(--duration-normal) var(--ease-out-expo);
}
.footer-links a:hover::after {
  width: 100%;
}

/* ── 18. GSAP ANIMATION PREP CLASSES ── */
/* These are used by the enhanced GSAP layer.
   Elements start visible (no hidden-by-default) so JS failure
   leaves content readable. GSAP animates FROM hidden at runtime. */
[data-gsap="fade-up"] {
  will-change: transform, opacity;
}
[data-gsap="fade-up-stagger"] > * {
  will-change: transform, opacity;
}
[data-gsap="scale-in"] {
  will-change: transform, opacity;
}
[data-gsap="slide-left"] {
  will-change: transform, opacity;
}
[data-gsap="slide-right"] {
  will-change: transform, opacity;
}

/* Reduced motion: disable will-change to save GPU */
@media (prefers-reduced-motion: reduce) {
  [data-gsap] {
    will-change: auto !important;
  }
}

/* ── 20. HERO HARDENING — kill H1 overflow + parallax seam ── */
.h1-hero,
.display-xl,
.hero-content h1 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  max-width: 100%;
}
/* Slightly more conservative cap so long headings never run off-screen */
.h1-hero { font-size: clamp(2.25rem, 4.4vw, 3.5rem); }
.display-xl { font-size: clamp(2.75rem, 5.4vw, 5rem); }
.hero-content { max-width: min(900px, 94%); }

/* Oversize the hero background so the subtle parallax shift can never
   expose a top/side edge (was the source of the vertical "seam"). */
.hero .hero-bg[style*="background-image"] {
  inset: -8% -2%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── 21. HOW-IT-WORKS HIGHLIGHT CARD — make the red emphasis read as
   intentional (soft tint + clean accent) rather than a stark slab ── */
.rps-card[style*="2px solid var(--ricson-red)"] {
  background: linear-gradient(180deg, rgba(196,30,58,0.04), rgba(196,30,58,0.015));
  box-shadow: 0 6px 20px rgba(196,30,58,0.08);
}

/* ── 19. RESPONSIVE ── */
@media (max-width: 768px) {
  .rps-card:hover,
  .rps-value-card:hover,
  .rps-service-item:hover,
  .rps-testimonial:hover,
  .benefit-card:hover,
  .city-card:hover,
  .service-card--branded:hover {
    transform: translateY(-3px);
  }
}

/* ============================================================
   v3 POLISH PASS — clean cards, real checklist, richer sections
   (loads after everything above; overrides earlier treatments)
   ============================================================ */

/* ── CARDS: one clean accent, no competing gradient rails ── */
/* Kill the vertical gradient left-rails that fought the top bar */
.rps-card::after,
.rps-value-card::after,
.rps-service-item::after,
.benefit-card::after,
.rps-contact-card::after { display: none !important; }

/* Refined resting state */
.rps-card,
.rps-value-card {
  border: 1px solid #ECEEF1;
  box-shadow: 0 1px 2px rgba(16,18,22,0.04), 0 8px 20px rgba(16,18,22,0.05);
}
/* Single, crisp solid top accent (was an uneven gradient) */
.rps-card::before,
.rps-value-card::before {
  height: 3px;
  left: 0; right: 0;
  background: var(--ricson-red);
  border-radius: 4px 4px 0 0;
  transform: scaleX(0.4);
  transform-origin: left center;
  transition: transform var(--duration-normal) var(--ease-out-expo), opacity var(--duration-normal);
}
/* Hover: lift + depth + NEUTRAL border (no more uneven red edge) + accent sweeps in + title reddens */
.rps-card:hover,
.rps-value-card:hover {
  transform: translateY(-6px);
  border-color: #E2E5E9;
  box-shadow: 0 22px 48px rgba(16,18,22,0.12), 0 8px 18px rgba(16,18,22,0.07);
}
.rps-card:hover::before,
.rps-value-card:hover::before { opacity: 1; transform: scaleX(1); }
.rps-card:hover h3,
.rps-value-card:hover h3 { color: var(--ricson-red); transition: color var(--duration-normal); }

/* Featured cards (inline 2px red border) → refined tinted callout, not a slab */
.rps-card[style*="2px solid var(--ricson-red)"] {
  border: 1px solid var(--ricson-red-30) !important;
  background: linear-gradient(180deg, rgba(196,30,58,0.045), rgba(196,30,58,0.012)) !important;
  box-shadow: 0 10px 28px rgba(196,30,58,0.10) !important;
}
.rps-card[style*="2px solid var(--ricson-red)"]::before { opacity: 1; transform: scaleX(1); }

/* ── CHECKLIST: stacked label + description, no broken columns / dashes ── */
.rps-checklist li {
  display: block;
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--space-5);
}
.rps-checklist li::before {
  position: absolute;
  left: 0;
  top: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--ricson-red);
  background: rgba(196,30,58,0.08);
  border-radius: 50%;
}
.rps-checklist li strong {
  display: block;
  color: var(--charcoal);
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}

/* ── SECTION TEXTURE: stronger, more interesting, with brand glow ── */
/* Bands read as distinct steps, not near-white */
.band-smoke { background: linear-gradient(180deg, #E7EAEE 0%, #F3F4F6 100%); }
.band-off-white { background: linear-gradient(180deg, #F1F2F4 0%, #FFFFFF 100%); }

/* Visible-but-tasteful diagonal rule + warm brand glow top-right */
.pattern-diagonal::before {
  background-image:
    radial-gradient(820px circle at 100% -10%, rgba(196,30,58,0.055), transparent 46%),
    repeating-linear-gradient(-45deg, transparent, transparent 34px, rgba(30,32,36,0.035) 34px, rgba(30,32,36,0.035) 35px);
}
/* Dot matrix + cool glow bottom-left */
.pattern-dots::before {
  background-image:
    radial-gradient(760px circle at 0% 110%, rgba(30,32,36,0.05), transparent 44%),
    radial-gradient(circle at center, rgba(30,32,36,0.06) 0.6px, transparent 1.4px);
  background-size: auto, 22px 22px;
}
/* Precision grid + faint red glow */
.pattern-grid::before {
  background-image:
    radial-gradient(700px circle at 100% 100%, rgba(196,30,58,0.04), transparent 50%),
    linear-gradient(rgba(30,32,36,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,32,36,0.03) 1px, transparent 1px);
  background-size: auto, 38px 38px, 38px 38px;
}
.pattern-ledger::before {
  background-image: repeating-linear-gradient(0deg, transparent, transparent 22px, rgba(30,32,36,0.04) 22px, rgba(30,32,36,0.04) 23px);
}
/* Plain white sections get a whisper of texture so nothing is dead-flat */
.section:not([class*="pattern-"]):not(.band-smoke):not(.band-off-white):not(.cta-section):not(.services-branded-section)::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 38px, rgba(30,32,36,0.018) 38px, rgba(30,32,36,0.018) 39px);
}
.section { position: relative; }
.section > .container,
.section > .container-wide { position: relative; z-index: 1; }

/* ── Branded chevron watermark on tonal bands (distinctive, safe) ── */
.band-smoke:not(.pattern-chevron):not(.pattern-maplines),
.band-off-white:not(.pattern-chevron):not(.pattern-maplines) { overflow: hidden; }
.band-smoke:not(.pattern-chevron):not(.pattern-maplines)::after,
.band-off-white:not(.pattern-chevron):not(.pattern-maplines)::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -70px;
  width: 380px;
  height: 380px;
  pointer-events: none;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M150 22 L72 100 L150 178' fill='none' stroke='rgba(196,30,58,0.07)' stroke-width='20'/%3E%3Cpath d='M108 22 L30 100 L108 178' fill='none' stroke='rgba(30,32,36,0.045)' stroke-width='20'/%3E%3C/svg%3E") no-repeat center / contain;
}
.band-smoke > *,
.band-off-white > * { position: relative; z-index: 1; }
@media (max-width: 768px) {
  .band-smoke::after, .band-off-white::after { width: 200px; height: 200px; top: -30px; right: -40px; }
}

/* ── European bands: faint cityscape behind a readable light overlay ── */
.band-eu { position: relative; }
/* photo is the visual interest here — drop the chevron watermark to avoid clutter */
.band-eu::after { display: none !important; }
.band-eu > * { position: relative; z-index: 1; }