/* ==========================================================================
   services.html — Analytics Service page specific styles
   ========================================================================== */

/* ========================================
   1. HERO SECTION & GLASSMORPHISM VISUAL
======================================== */
.hero--services {
  min-height: 84vh;
  padding-block: clamp(160px, 18vh, 210px) clamp(50px, 8vh, 80px);
}

.hero__grid-services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
  width: 100%;
}

.hero__content-services {
  max-width: 680px;
}

.hero__content-services h1 {
  margin-top: 16px;
  margin-bottom: 20px;
  letter-spacing: -0.025em;
}

.hero__content-services .lead {
  margin-bottom: 28px;
  color: var(--text-secondary);
}

/* Anchor pills in hero */
.anchor-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

.anchor-pills a {
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.02);
  transition: all 0.25s var(--ease);
}

.anchor-pills a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(227, 6, 19, 0.06);
  transform: translateY(-2px);
}

/* Platform / App Badges under hero */
.hero-platforms {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.hero-platforms__label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
}

.hero-platforms__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(0, 0, 0, 0.10);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  transition: all 0.25s var(--ease);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.platform-badge svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.platform-badge:hover {
  border-color: var(--accent);
  color: var(--text-primary);
  background: rgba(227, 6, 19, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.platform-badge:hover svg {
  transform: scale(1.15);
}

/* Glassmorphism Right-Side Analytics Visual */
.hero-glass-visual {
  display: none;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.glass-analytics-card {
  width: 100%;
  max-width: 400px;
  background: #ffffff;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06), 0 0 25px rgba(227, 6, 19, 0.05);
  position: relative;
  overflow: hidden;
  animation: heroFloat 6s ease-in-out infinite;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-analytics-card:hover {
  border-color: rgba(227, 6, 19, 0.35);
  box-shadow: 0 20px 50px rgba(227, 6, 19, 0.08);
}

@keyframes heroFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.glass-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.glass-card__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.live-beacon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  position: relative;
}

.live-beacon::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0.7;
  animation: beaconPulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes beaconPulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  70% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

.glass-card__badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: rgba(227, 6, 19, 0.06);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(227, 6, 19, 0.25);
  text-transform: uppercase;
}

.glass-card__kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.glass-kpi {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  padding: 12px 14px;
}

.glass-kpi__label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 4px;
}

.glass-kpi__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.glass-kpi__change {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}

.glass-card__chart {
  background: rgba(12, 17, 23, 0.4);
  border-radius: 14px;
  padding: 12px 10px 6px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 16px;
}

.glass-chart-svg {
  width: 100%;
  height: 68px;
  overflow: visible;
}

.chart-line {
  stroke: var(--accent);
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 2px 8px rgba(227, 6, 19, 0.35));
}

.chart-area {
  fill: url(#chartGlow);
  opacity: 0.4;
}

.glass-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: var(--text-muted);
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.glass-card__footer span:last-child {
  color: var(--text-secondary);
  font-weight: 500;
}

/* ==========================================================================
   2. SERVICES SHOWCASE — PREMIUM DARK INDEX LAYOUT
   ========================================================================== */
.svc-showcase-section {
  padding-block: clamp(72px, 10vw, 128px);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(191, 0, 0, 0.14), transparent 55%),
    linear-gradient(180deg, #141414 0%, #101010 45%, #0a0a0a 100%);
  position: relative;
  overflow: clip; /* was: overflow: hidden — that breaks position:sticky on child elements */
  isolation: isolate;
}

/* Decorative background layer — echoes the hero dashboard's grid/ring motif */
.svc-showcase-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.svc-showcase-bg .svc-grid-bg {
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 78%);
  opacity: 0.7;
}

.svc-showcase-ring-a {
  top: -120px;
  right: -140px;
  width: 460px;
  height: 460px;
  border-color: rgba(191, 0, 0, 0.18);
}

.svc-showcase-ring-b {
  bottom: 8%;
  left: -90px;
  width: 220px;
  height: 220px;
  border-color: rgba(255, 255, 255, 0.06);
}

.svc-showcase-glow {
  position: absolute;
  bottom: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 780px;
  height: 380px;
  background: radial-gradient(circle, rgba(191, 0, 0, 0.10) 0%, transparent 70%);
  filter: blur(60px);
}

.svc-showcase-section .container {
  position: relative;
  z-index: 1;
}

/* Header — dark variant */
.svc-showcase-section .svc-h2 {
  color: #ffffff;
}

.svc-showcase-section .svc-h2 .accent {
  color: var(--brand-red, #E10000);
}

.svc-showcase-section .svc-section-lead {
  color: rgba(255, 255, 255, 0.66);
}

/* ── Layout: sticky index rail + stacked tiles ── */
.svc-index-layout {
  display: grid;
  grid-template-columns: 272px 1fr;
  gap: clamp(32px, 4vw, 64px);
  margin-top: 56px;
  align-items: start;
}

/* Index rail */
.svc-index-rail {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 20px;
}

.svc-index-rail__line {
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.14) 85%, rgba(255, 255, 255, 0.02));
}

.svc-index-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 10px 14px 20px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.3s var(--ease, ease), transform 0.3s var(--ease, ease);
}

.svc-index-item::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid #101010;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.svc-index-item__num {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.32);
  transition: color 0.3s ease;
  flex-shrink: 0;
}

.svc-index-item__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.svc-index-item__text strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}

.svc-index-item__text em {
  font-style: normal;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.32);
}

.svc-index-item:hover {
  background: rgba(255, 255, 255, 0.035);
  transform: translateX(2px);
}

.svc-index-item:hover .svc-index-item__num,
.svc-index-item:hover .svc-index-item__text strong {
  color: rgba(255, 255, 255, 0.9);
}

.svc-index-item.is-active {
  background: rgba(225, 0, 0, 0.08);
}

.svc-index-item.is-active::before {
  background: var(--brand-red, #E10000);
  box-shadow: 0 0 0 4px rgba(225, 0, 0, 0.18), 0 0 12px rgba(225, 0, 0, 0.6);
}

.svc-index-item.is-active .svc-index-item__num {
  color: var(--brand-red, #E10000);
}

.svc-index-item.is-active .svc-index-item__text strong {
  color: #ffffff;
}

/* ── Tiles ── */
.svc-tiles {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.svc-tile {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 30px 32px 30px 26px;
  border-radius: var(--hv-radius-lg, 28px);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 20px 46px -22px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0, 0.2, 1), border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

.svc-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}

.svc-tile__glow {
  position: absolute;
  top: -60%;
  right: -20%;
  width: 60%;
  height: 220%;
  background: radial-gradient(circle, rgba(225, 0, 0, 0.16) 0%, transparent 68%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.svc-tile:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(225, 0, 0, 0.3);
  box-shadow: 0 28px 60px -20px rgba(0, 0, 0, 0.8), 0 0 32px -6px rgba(225, 0, 0, 0.22);
}

.svc-tile:hover .svc-tile__glow {
  opacity: 1;
}

/* Head: number + framed image */
.svc-tile__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.svc-tile__num {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(225, 0, 0, 0.55);
  transition: -webkit-text-stroke-color 0.4s ease, color 0.4s ease;
}

.svc-tile:hover .svc-tile__num {
  -webkit-text-stroke-color: rgba(225, 0, 0, 0.9);
}

.svc-tile__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6);
}

.svc-tile__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.25) brightness(0.92);
  transition: transform 0.7s cubic-bezier(0.2, 0, 0.2, 1), filter 0.5s ease;
}

.svc-tile:hover .svc-tile__frame img {
  transform: scale(1.08);
  filter: grayscale(0) brightness(1);
}

.svc-tile__frame-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 10px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #ffffff;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.82), transparent);
}

/* Body */
.svc-tile__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.svc-tile__tag {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 5px 12px;
  border-radius: 50px;
  margin-bottom: 14px;
}

.svc-tile__heading {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: #ffffff;
  margin: 0 0 10px;
}

.svc-tile__summary {
  font-size: 0.94rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 20px;
  max-width: 52ch;
}

.svc-tile__inclusions {
  margin-bottom: 22px;
}

.svc-tile__inclusions-title {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 12px;
}

.svc-tile__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

.svc-tile__list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

.svc-tile__list li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--brand-red, #E10000);
}

.svc-tile__footer {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.svc-tile__guarantee {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}

.svc-tile__guarantee svg {
  color: var(--brand-red, #E10000);
}

/* ── Responsive ── */
@media (max-width: 1080px) {
  .svc-index-layout {
    grid-template-columns: 1fr;
  }

  .svc-index-rail {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    padding: 4px 4px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .svc-index-rail::-webkit-scrollbar { display: none; }

  .svc-index-rail__line { display: none; }

  .svc-index-item {
    flex: 0 0 auto;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
  }

  .svc-index-item::before { display: none; }

  .svc-index-item__text em { display: none; }

  .svc-index-item.is-active {
    border-color: rgba(225, 0, 0, 0.4);
  }
}

@media (max-width: 720px) {
  .svc-tile {
    grid-template-columns: 1fr;
    padding: 24px 20px;
    gap: 20px;
  }

  .svc-tile__head {
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
  }

  .svc-tile__frame {
    aspect-ratio: 16/10;
    flex: 1;
  }

  .svc-tile__num {
    font-size: 2rem;
  }

  .svc-tile__list {
    grid-template-columns: 1fr;
  }

  .svc-tile__footer {
    gap: 14px;
  }
}

@media (max-width: 420px) {
  .svc-tile__head {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==========================================================================
   4. CONNECTED PROCESS PIPELINE
   ========================================================================== */
.svc-process-section {
  padding-block: clamp(64px, 8vw, 100px);
  background: var(--bg-primary);
  position: relative;
}

.svc-pipeline {
  position: relative;
  margin-top: 56px;
}

.svc-pipeline__track {
  position: absolute;
  top: 27px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--brand-red-rgb, 225, 0, 0), 0.35), transparent);
  z-index: 0;
}

.svc-pipeline__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  z-index: 1;
}

.svc-pipeline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.svc-pipeline__node {
  position: relative;
  margin-bottom: 18px;
}

.svc-pipeline__num {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(155deg, #bf0000, #9e0000);
  border: 3px solid #ffffff;
  box-shadow: 0 8px 22px rgba(191, 0, 0, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
  font-weight: 700;
  font-style: italic;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.svc-pipeline__step:hover .svc-pipeline__num {
  transform: scale(1.1);
  box-shadow: 0 12px 28px rgba(191, 0, 0, 0.55);
}

.svc-pipeline__card {
  width: 100%;
  padding: 24px 18px;
  border-radius: 18px;
  background: var(--bg-deep, #f8f9fa);
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.svc-pipeline__step:hover .svc-pipeline__card {
  transform: translateY(-4px);
  border-color: rgba(var(--brand-red-rgb, 225, 0, 0), 0.3);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.06);
}

.svc-pipeline__phase {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-red, #E10000);
  margin-bottom: 6px;
}

.svc-pipeline__card h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.35rem;
  font-weight: 700;
  font-style: italic;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.svc-pipeline__card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 14px;
}

.svc-pipeline__meta {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.04);
  padding: 4px 10px;
  border-radius: 50px;
}

.svc-pipeline__footer {
  text-align: center;
  margin-top: 40px;
}

/* ==========================================================================
   6. FINAL AMBIENT CTA BANNER
   ========================================================================== */
.svc-cta-section {
  padding-block: clamp(60px, 8vw, 100px);
  background: var(--bg-primary);
}

.svc-cta-banner {
  position: relative;
  border-radius: var(--hv-radius-lg, 32px);
  overflow: hidden;
  padding: clamp(52px, 7vw, 80px) clamp(24px, 5vw, 64px);
  text-align: center;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(191, 0, 0, 0.18), transparent 55%),
    linear-gradient(155deg, #1b1b1b 0%, #101010 60%, #0a0a0a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 60px -18px rgba(0, 0, 0, 0.55);
}

.svc-cta-banner__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 75%);
  pointer-events: none;
}

.svc-cta-banner__ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.svc-cta-banner__ring--lg {
  width: 360px;
  height: 360px;
  top: -80px;
  right: -80px;
  border: 1px solid rgba(191, 0, 0, 0.22);
}

.svc-cta-banner__ring--sm {
  width: 180px;
  height: 180px;
  bottom: -40px;
  left: -40px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.svc-cta-banner__content {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
}

.svc-cta-heading {
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 700;
  font-style: italic;
  color: #ffffff;
  margin: 16px 0 14px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.svc-cta-lead {
  font-size: clamp(0.95rem, 1.3vw, 1.125rem);
  color: rgba(255, 255, 255, 0.74);
  margin: 0 auto 28px;
  line-height: 1.6;
}

.svc-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ==========================================================================
   FLAGSHIP SPOTLIGHT SECTION — light theme, white background
   ========================================================================== */
.spotlight-section,
.section.spotlight-section,
.section.spotlight-section.section--editorial {
  position: relative;
  padding-block: clamp(72px, 10vw, 128px);
  overflow: hidden;
  isolation: isolate;
  background: #ffffff !important;
  background-image: none !important;
}

.spotlight-section::before {
  content: '';
  position: absolute;
  bottom: -220px;
  right: -120px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(225, 0, 0, 0.06) 0%, transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.spotlight-section .container {
  position: relative;
  z-index: 1;
}

.spotlight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

/* Media */
.spotlight-media {
  position: relative;
}

.spotlight-frame {
  position: relative;
  border-radius: var(--hv-radius-lg, 28px);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.18);
}

.spotlight-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(225, 0, 0, 0.08), transparent 45%);
  pointer-events: none;
}

.spotlight-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Content */
.spotlight-content .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-red, #E10000) !important;
}

.spotlight-content .eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--brand-red, #E10000) !important;
  border-radius: 2px;
}

.spotlight-content h2 {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  color: #101010 !important;
  margin: 16px 0 0;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.spotlight-content .lead {
  color: rgba(16, 16, 16, 0.66) !important;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.65;
}

/* Specs grid */
.spotlight-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
}

.spec-item {
  padding: 16px 18px;
  border-radius: 16px;
  background: #f7f7f7 !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.spec-item:hover {
  background: #f1f1f1 !important;
  border-color: rgba(225, 0, 0, 0.3) !important;
}

.spec-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(16, 16, 16, 0.45) !important;
  margin-bottom: 6px;
}

.spec-val {
  font-size: 0.95rem;
  font-weight: 600;
  color: #101010 !important;
}

.spotlight-content .btn-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Primary CTA — red-to-black gradient matching the site's brand theme */
.spotlight-content .btn--filled {
  background: linear-gradient(135deg, #ff2b2b 0%, #c40000 45%, #1a0000 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px -10px rgba(196, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.spotlight-content .btn--filled:hover {
  background: linear-gradient(135deg, #ff4444 0%, #d40000 45%, #0d0000 100%) !important;
  box-shadow: 0 16px 36px -10px rgba(196, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px);
}

/* Secondary CTA — dark outline that complements the gradient button */
.spotlight-content .btn--outline {
  background: rgba(16, 16, 16, 0.02) !important;
  border: 1px solid rgba(16, 16, 16, 0.18) !important;
  color: #101010 !important;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.spotlight-content .btn--outline:hover {
  background: rgba(16, 16, 16, 0.04) !important;
  border-color: var(--brand-red, #E10000) !important;
  color: var(--brand-red, #E10000) !important;
}

/* ========================================
   6. RESPONSIVE BREAKPOINTS
======================================== */
@media (max-width: 900px) {
  .spotlight-grid {
    grid-template-columns: 1fr;
  }
  .spotlight-specs {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .spotlight-specs {
    grid-template-columns: 1fr;
  }
  .spotlight-content .btn-row {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 1080px) {
  /* Hero — Reset flex vertical centering so content starts cleanly below fixed navbar */
  .hero--services {
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding-top: clamp(130px, 16vh, 160px);
    padding-bottom: 70px;
  }
  .hero__grid-services {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero-glass-visual {
    justify-content: center;
    width: 100%;
  }
  .glass-analytics-card {
    max-width: 460px;
    width: 100%;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
    gap: 28px;
  }
  .pricing-card--featured {
    transform: none;
  }
  .pricing-card--featured:hover {
    transform: translateY(-6px);
  }

  /* Uniform button width on tablet */
  .hero__content-services .btn-row {
    justify-content: center;
    align-items: center;
  }
  .hero__content-services .btn-row .btn,
  .service-block .btn--book-now {
    width: 250px;
    box-sizing: border-box;
    justify-content: center;
    margin-inline: auto;
  }
}

@media (max-width: 860px) {
  .service-block {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-block: 48px;
  }
  .service-block:nth-child(even) .service-block__media {
    order: 0;
  }
  .service-block__media .capsule--compact {
    max-width: 280px;
  }
  .analytics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 767px) {
  /* Only the centred section headers get centred text — not hero, tile or card titles */
  .svc-section-header,
  .svc-section-header .svc-h2,
  .svc-section-header .svc-section-lead {
    text-align: center;
  }

  /* Hero Mobile Fixes */
  .hero--services {
    min-height: auto;
    padding-top: 118px;
    padding-bottom: 48px;
  }
  .hero__grid-services {
    gap: 36px;
  }
  .hero__content-services h1 {
    font-size: clamp(30px, 8.5vw, 42px);
    line-height: 1.15;
    margin-top: 12px;
    margin-bottom: 16px;
  }
  .hero__content-services .lead {
    font-size: 15.5px;
    line-height: 1.55;
    margin-bottom: 24px;
  }
  .hero__content-services .btn-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 28px !important;
  }
  .hero__content-services .btn-row .btn {
    width: 240px;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
  .hero-platforms {
    padding-top: 18px;
  }
  .hero-platforms__list {
    gap: 8px;
  }
  .platform-badge {
    font-size: 12px;
    padding: 6px 12px;
  }
  .hero-glass-visual {
    width: 100%;
    margin-top: 4px;
  }
  .glass-analytics-card {
    max-width: 100%;
    padding: 22px 18px;
    border-radius: 20px;
  }
  .glass-card__kpis {
    gap: 10px;
  }
  .glass-kpi {
    padding: 10px 12px;
    border-radius: 12px;
  }
  .glass-kpi__label {
    font-size: 10.5px;
  }
  .glass-kpi__value {
    font-size: 18px;
  }
  .glass-card__footer {
    font-size: 11px;
    padding-top: 10px;
  }

  /* Service Detail Blocks */
  .service-block {
    padding-block: 40px;
    gap: 28px;
  }
  .service-block__media .capsule--compact {
    max-width: 240px;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-pill);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  }
  .service-block h2 {
    font-size: clamp(24px, 6.5vw, 32px);
    line-height: 1.2;
    margin-bottom: 12px;
  }
  .service-block .lead {
    font-size: 15px;
    line-height: 1.55;
    margin-top: 14px !important;
  }
  .bullets {
    margin-top: 18px;
    gap: 10px;
  }
  .bullets li {
    font-size: 14px;
    line-height: 1.45;
  }
  .service-block .btn--book-now {
    width: 240px;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
    margin-top: 22px;
    margin-inline: auto;
    padding: 11px 20px;
    font-size: 13.5px;
  }

  /* Process Strip */
  .process-strip {
    gap: 20px;
  }
  .process-node {
    max-width: 100%;
  }

}

@media (max-width: 360px) {
  .glass-card__kpis {
    grid-template-columns: 1fr;
  }
  .pricing-toggle-wrap {
    flex-direction: column;
    border-radius: 16px;
  }
  .pricing-toggle-btn {
    width: 100%;
  }
}

/* ==========================================================================
   SERVICE HERO — NEW PREMIUM DASHBOARD VISUAL (RIGHT SIDE)
   ========================================================================== */

/* Container — styled identically to the emblem panel */
.svc-dashboard {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 34px 26px 26px;
  border-radius: var(--hv-radius-lg, 32px);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(191, 0, 0, 0.16), transparent 55%),
    linear-gradient(155deg, #1b1b1b 0%, #101010 60%, #0a0a0a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 60px -18px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* Background grid pattern matching emblem panel */
.svc-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(60% 60% at 50% 40%, #000 0%, transparent 75%);
  pointer-events: none;
}

/* Atmospheric decorative rings matching emblem panel */
.svc-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.svc-ring--lg {
  width: 320px;
  height: 320px;
  top: -60px;
  right: -80px;
  border: 1px solid rgba(191, 0, 0, 0.22);
}
.svc-ring--sm {
  width: 160px;
  height: 160px;
  bottom: -40px;
  left: -50px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Main status card ── */
.svc-main-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 20px;
  border-radius: var(--hv-radius-chip, 18px);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: var(--hv-trans, 0.3s ease);
  z-index: 1;
}
.svc-main-card:hover {
  background: rgba(191, 0, 0, 0.1);
  border-color: rgba(191, 0, 0, 0.32);
}

/* Top red emblem icon — matches the emblem icon from the image */
.svc-pulse-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(155deg, #bf0000, #9e0000);
  box-shadow: 0 16px 34px -10px rgba(191, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.svc-pulse-ring svg {
  color: #ffffff;
  stroke: #ffffff;
}
.svc-main-card:hover .svc-pulse-ring {
  transform: scale(1.06);
  box-shadow: 0 18px 38px -8px rgba(191, 0, 0, 0.7);
}

/* Card body text */
.svc-main-card__body {
  flex: 1;
  min-width: 0;
}
.svc-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(142,70%,60%);
  margin-bottom: 5px;
}
.svc-live-dot > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: hsl(142,70%,60%);
  box-shadow: 0 0 8px hsl(142,70%,60%);
  animation: svc-live-blink 1.5s ease-in-out infinite;
}
@keyframes svc-live-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.75); }
}
.svc-main-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 3px;
  line-height: 1.2;
}
.svc-main-card__sub {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  line-height: 1.4;
}

/* Stat counter — Serif style matching the image */
.svc-main-card__stat {
  text-align: right;
  flex-shrink: 0;
}
.svc-stat-number {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 2.1rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.svc-stat-plus {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  font-weight: 600;
  font-style: italic;
  color: #ffffff;
}
.svc-stat-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.68);
  margin-top: 4px;
}

/* ── Floating stat chips — Card style matching the image ── */
.svc-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: var(--hv-radius-chip, 16px);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #ffffff;
  transition: var(--hv-trans, 0.3s ease);
  position: relative;
  z-index: 1;
}
.svc-chip:hover {
  background: rgba(191, 0, 0, 0.1);
  border-color: rgba(191, 0, 0, 0.32);
  transform: translateY(-3px);
}
.svc-chip svg {
  color: #bf0000;
  background: rgba(191, 0, 0, 0.14);
  padding: 7px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  box-sizing: content-box;
}
.svc-chip div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.svc-chip strong {
  font-family: "Playfair Display", serif;
  font-size: 1.1rem;
  font-weight: 600;
  font-style: italic;
  color: #ffffff;
  line-height: 1;
}
.svc-chip span {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.02em;
}

/* Chips in a row on desktop */
.svc-chip--1,
.svc-chip--2,
.svc-chip--3 {
  animation: svc-chip-float 5s ease-in-out infinite;
}
.svc-chip--2 { animation-delay: 1.5s; animation-duration: 6s; }
.svc-chip--3 { animation-delay: 3s; animation-duration: 7s; }
@keyframes svc-chip-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* Row layout for chips */
.svc-dashboard .svc-chip--1,
.svc-dashboard .svc-chip--2,
.svc-dashboard .svc-chip--3 {
  width: auto;
}

/* Order in flex stack */
.svc-chip--1 { order: 2; }
.svc-chip--2 { order: 3; }
.svc-chip--3 { order: 4; }
.svc-process-strip { order: 5; }

/* Make chips display in a row via CSS flex on the dashboard children */
.svc-dashboard {
  flex-wrap: wrap;
}
.svc-main-card {
  flex: 0 0 100%;
}
.svc-grid-bg, .svc-ring--lg, .svc-ring--sm { flex: none; }
.svc-chip {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}
.svc-process-strip {
  flex: 0 0 100%;
}

/* ── Process strip ── */
.svc-process-strip {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 16px 18px;
  border-radius: var(--hv-radius-chip, 16px);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  position: relative;
  z-index: 1;
  transition: var(--hv-trans, 0.3s ease);
}
.svc-process-strip:hover {
  border-color: rgba(191, 0, 0, 0.28);
}
.svc-process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  transition: transform 0.2s ease;
}
.svc-process-step:hover {
  transform: translateY(-2px);
}
.svc-process-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #bf0000;
  background: rgba(191, 0, 0, 0.14);
  border: 1px solid rgba(191, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", serif;
  font-size: 0.85rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.02em;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.svc-process-step:hover .svc-process-num {
  background: linear-gradient(155deg, #bf0000, #9e0000);
  border-color: #bf0000;
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 8px 20px -4px rgba(191, 0, 0, 0.6);
}
.svc-process-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.25s ease;
}
.svc-process-step:hover .svc-process-label {
  color: #ffffff;
}
.svc-process-line {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.svc-process-line::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, #bf0000, transparent);
  border-radius: 2px;
  animation: svc-line-sweep 2.8s ease-in-out infinite;
}
@keyframes svc-line-sweep {
  0%   { left: -50%; opacity: 0; }
  30%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ── Count-up JS hook ── */
.svc-stat-number[data-counted] {
  -webkit-text-fill-color: initial;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .svc-dashboard {
    max-width: 100%;
    padding: 24px 18px 20px;
    gap: 14px;
  }
  .svc-main-card {
    gap: 14px;
    padding: 18px 16px;
  }
  .svc-stat-number { font-size: 1.5rem; }
  .svc-chip { padding: 10px 14px; }
}
@media (max-width: 600px) {
  .svc-chip { flex: 0 0 100%; justify-content: flex-start; }
}
/* ── Products: 6 per page (3 × 2) with pagination ── */
.product-card-wrap[hidden] { display: none !important; }
@keyframes svcPageIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.products-home-section .product-card-wrap.reveal { }

/* Middle card of every row: content on top, image at the bottom */
.products-home-section .product-grid > .product-card-wrap--mid .product-card-front { display: flex !important; flex-direction: column !important; padding: 0 !important; }
.products-home-section .product-grid > .product-card-wrap--mid .product-card__body { order: 1 !important; flex: 1 1 auto; }
.products-home-section .product-grid > .product-card-wrap--mid .product-card__image-wrap { order: 2 !important; flex: 0 0 250px !important; min-height: 250px; height: 250px; margin-top: auto !important; border-radius: 0 !important; }
.products-home-section .product-grid > .product-card-wrap--mid .pc-overlay { top: 14px !important; bottom: auto !important; }
.products-home-section .product-grid > .product-card-wrap--mid .product-carousel__dots { top: auto !important; bottom: 12px !important; }

/* Pagination (dark theme) */
#productPageCount { text-align: center; margin: 44px 0 0; font-size: 13px; color: #8a8a8a; letter-spacing: .02em; }
.svc-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 16px; }
.svc-pagination .page-btn {
  min-width: 42px; height: 42px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  background: #141414; color: #d6d6d6; border: 1px solid rgba(213, 213, 213, .16);
  font-size: 14px; font-weight: 600; box-shadow: none; transition: all .25s ease;
}
.svc-pagination .page-btn:hover:not(:disabled) { color: #fff; border-color: rgba(229, 0, 0, .6); background: rgba(229, 0, 0, .12); transform: translateY(-2px); }
.svc-pagination .page-btn.is-active { background: linear-gradient(135deg, #e10000, #8a0000); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(229, 0, 0, .4); }
.svc-pagination .page-btn:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 520px) { .svc-pagination .page-btn { min-width: 38px; height: 38px; padding: 0 12px; } }

.products-home-section .product-card-wrap { scroll-margin-top: 110px; }

/* ── Flagship spotlight: same red theme as the home page About section ── */
.spotlight-section,
.section.spotlight-section,
.section.spotlight-section.section--editorial {
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(225, 0, 0, 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(225, 0, 0, 0.28) 0%, transparent 70%),
    linear-gradient(180deg, #4a0000 0%, #2a0000 55%, #160000 100%) !important;
  color: #fff;
}
.spotlight-section::before { background: radial-gradient(circle, rgba(255, 60, 60, 0.18) 0%, transparent 70%); }
.spotlight-frame {
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(225, 0, 0, 0.5), 0 0 28px rgba(225, 0, 0, 0.25);
}
.spotlight-content .eyebrow { color: #ff6b6b !important; }
.spotlight-content .eyebrow::before { background: #ff2a2a !important; }
.spotlight-content h2 { color: #ffffff !important; }
.spotlight-content .lead { color: rgba(255, 255, 255, 0.78) !important; }
.spotlight-section .spec-item {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.spotlight-section .spec-item:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 90, 90, 0.6) !important;
}
.spotlight-section .spec-label { color: rgba(255, 255, 255, 0.55) !important; }
.spotlight-section .spec-val { color: #ffffff !important; }
.spotlight-content .btn--outline {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}
.spotlight-content .btn--outline:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* ── Flagship spotlight buttons — tuned for the red background ── */
.spotlight-content .btn--filled {
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  color: #8a0000 !important;
  font-weight: 700;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(255, 255, 255, 0.08) !important;
}
.spotlight-content .btn--filled .arrow,
.spotlight-content .btn--filled svg { stroke: currentColor; fill: none; transition: transform .3s ease; }
.spotlight-content .btn--filled:hover {
  background: linear-gradient(135deg, #ff3b3b 0%, #e10000 55%, #a30000 100%) !important;
  border-color: #ff6b6b !important;
  color: #ffffff !important;
  box-shadow: 0 16px 36px -10px rgba(255, 40, 40, 0.65), 0 0 0 4px rgba(255, 90, 90, 0.22) !important;
  transform: translateY(-3px);
}
.spotlight-content .btn--filled:hover .arrow,
.spotlight-content .btn--filled:hover svg { transform: translateX(4px); }

.spotlight-content .btn--outline {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
  color: #ffffff !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.spotlight-content .btn--outline:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(255, 255, 255, 0.10);
  transform: translateY(-3px);
}
.spotlight-content .btn--filled:active,
.spotlight-content .btn--outline:active { transform: translateY(-1px); }

/* ==========================================================================
   DIRECT CONSULTATION — live animation + premium buttons
   ========================================================================== */
.svc-cta-banner { isolation: isolate; }
.svc-cta-banner__content { position: relative; z-index: 3; }
.svc-cta-banner__grid { animation: svcGridDrift 24s linear infinite; }
@keyframes svcGridDrift { to { background-position: 32px 32px, 32px 32px; } }
.svc-cta-banner__ring { animation: svcRingSpin 40s linear infinite; }
.svc-cta-banner__ring--sm { animation-duration: 28s; animation-direction: reverse; }
@keyframes svcRingSpin { to { transform: rotate(360deg); } }

/* drifting glow orbs */
.svc-cta-banner__orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.svc-cta-banner__orb--a { width: 340px; height: 340px; top: -120px; left: -80px; background: rgba(225, 0, 0, .35); animation: svcOrbA 12s ease-in-out infinite alternate; }
.svc-cta-banner__orb--b { width: 380px; height: 380px; bottom: -170px; right: -90px; background: rgba(160, 0, 0, .45); animation: svcOrbB 14s ease-in-out infinite alternate; }
@keyframes svcOrbA { to { transform: translate(180px, 90px) scale(1.2); } }
@keyframes svcOrbB { to { transform: translate(-200px, -70px) scale(1.15); } }

/* light beam sweeping across the banner */
.svc-cta-banner__beam { position: absolute; top: 0; bottom: 0; width: 28%; left: -35%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .06), transparent); transform: skewX(-18deg);
  animation: svcBeam 7s ease-in-out infinite; }
@keyframes svcBeam { 0%, 25% { left: -35%; } 70%, 100% { left: 125%; } }

/* floating particles */
.svc-cta-banner__particles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.svc-cta-p { position: absolute; bottom: -10px; width: 5px; height: 5px; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 10px 2px rgba(255, 60, 60, .7); opacity: 0; animation: svcRise 9s linear infinite; }
.svc-cta-p--1 { left: 6%;  animation-delay: 0s;   }
.svc-cta-p--2 { left: 15%; animation-delay: 2.5s; width: 3px; height: 3px; }
.svc-cta-p--3 { left: 27%; animation-delay: 5s;   }
.svc-cta-p--4 { left: 38%; animation-delay: 1.2s; width: 4px; height: 4px; }
.svc-cta-p--5 { left: 49%; animation-delay: 6.5s; width: 3px; height: 3px; }
.svc-cta-p--6 { left: 60%; animation-delay: 3.4s; }
.svc-cta-p--7 { left: 71%; animation-delay: 7.6s; width: 4px; height: 4px; }
.svc-cta-p--8 { left: 82%; animation-delay: 0.8s; width: 3px; height: 3px; }
.svc-cta-p--9 { left: 91%; animation-delay: 4.2s; }
.svc-cta-p--10 { left: 96%; animation-delay: 6s; width: 3px; height: 3px; }
@keyframes svcRise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: .9; }
  85% { opacity: .5; }
  100% { transform: translateY(-420px) translateX(24px); opacity: 0; }
}

/* live pill */
.svc-cta-banner .hv-pill { position: relative; gap: 8px; }
.svc-cta-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #ff2a2a; flex: none; order: -1; }
.svc-cta-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255, 42, 42, .7); animation: svcPing 1.8s ease-out infinite; }
@keyframes svcPing { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.svc-cta-heading { animation: svcFloat 6s ease-in-out infinite; }
@keyframes svcFloat { 50% { transform: translateY(-4px); } }

/* ── Buttons ── */
.svc-cta-actions { gap: 18px; }
.svc-cta-btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px; overflow: hidden;
  padding: 16px 20px 16px 26px; border-radius: 999px; font-weight: 700; font-size: 15.5px; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, background .35s ease, border-color .35s ease, color .35s ease;
}
.svc-cta-btn__lead { flex: none; opacity: .95; }
.svc-cta-btn__icon {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .35s ease, color .35s ease;
}
.svc-cta-btn:hover .svc-cta-btn__icon { transform: translateX(5px) rotate(-45deg); }
.svc-cta-btn:active { transform: translateY(0) scale(.98) !important; }
.svc-cta-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* primary: animated red gradient, pulsing halo, shine sweep */
.svc-cta-btn--primary {
  color: #fff; border: 1px solid rgba(255, 140, 140, .55);
  background: linear-gradient(120deg, #ff2b2b, #d40000, #ff4a3d, #b00000); background-size: 250% 100%;
  box-shadow: 0 14px 34px -10px rgba(255, 30, 30, .75), inset 0 1px 0 rgba(255, 255, 255, .35);
  animation: svcBtnFlow 6s ease-in-out infinite, svcBtnPulse 2.6s ease-out infinite;
}
@keyframes svcBtnFlow { 50% { background-position: 100% 0; } }
@keyframes svcBtnPulse { 0% { box-shadow: 0 14px 34px -10px rgba(255, 30, 30, .75), 0 0 0 0 rgba(255, 50, 50, .55), inset 0 1px 0 rgba(255,255,255,.35); }
  100% { box-shadow: 0 14px 34px -10px rgba(255, 30, 30, .75), 0 0 0 18px rgba(255, 50, 50, 0), inset 0 1px 0 rgba(255,255,255,.35); } }
.svc-cta-btn--primary .svc-cta-btn__icon { background: #fff; color: #c00000; }
.svc-cta-btn__shine { position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: svcShine 4.2s ease-in-out infinite; }
@keyframes svcShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.svc-cta-btn--primary:hover {
  transform: translateY(-4px) scale(1.03); color: #c00000; background: #fff; border-color: #fff; animation: none;
  box-shadow: 0 20px 44px -10px rgba(255, 255, 255, .45), 0 0 0 6px rgba(255, 60, 60, .25);
}
.svc-cta-btn--primary:hover .svc-cta-btn__icon { background: #d40000; color: #fff; }

/* ghost: glass with animated glow border */
.svc-cta-btn--ghost {
  color: #fff; border: 1.5px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.svc-cta-btn--ghost .svc-cta-btn__icon { background: rgba(255, 255, 255, .14); color: #fff; }
.svc-cta-btn--ghost:hover {
  transform: translateY(-4px) scale(1.03); background: rgba(225, 0, 0, .22); border-color: #ff5a5a; color: #fff;
  box-shadow: 0 18px 40px -12px rgba(255, 40, 40, .6), 0 0 0 5px rgba(255, 80, 80, .14);
}
.svc-cta-btn--ghost:hover .svc-cta-btn__icon { background: #ff2a2a; }

@media (max-width: 520px) {
  .svc-cta-actions { flex-direction: column; width: 100%; }
  .svc-cta-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-cta-banner *, .svc-cta-btn { animation: none !important; }
}

/* ============================================================
   PROMISE STRIP — Hero section trust indicators (services page)
   ============================================================ */
.svc-promise-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 28px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  /* Let it shrink to fit the hero column — no fixed max-width */
  width: 100%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.svc-promise-divider {
  display: block;
  width: 1px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
  align-self: stretch;
}

.svc-promise-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;           /* allow flex children to shrink below content size */
  padding: 14px 14px;
  position: relative;
  transition: background 0.25s ease;
  cursor: default;
  overflow: hidden;
}

.svc-promise-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 2.5px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, transparent, #e10000 40%, #e10000 60%, transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.svc-promise-item:hover { background: rgba(225, 0, 0, 0.06); }
.svc-promise-item:hover::before { opacity: 1; }

.svc-promise-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(225, 0, 0, 0.12);
  border: 1px solid rgba(225, 0, 0, 0.22);
  color: #e10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.svc-promise-item:hover .svc-promise-icon {
  background: rgba(225, 0, 0, 0.22);
  box-shadow: 0 0 14px rgba(225, 0, 0, 0.3);
}

.svc-promise-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.svc-promise-title {
  font-family: 'Manrope', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  /* allow wrapping so long titles don't overflow */
  white-space: normal;
  word-break: break-word;
}

.svc-promise-sub {
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
}

/* Badge — hidden on desktop to save horizontal space, visible on mobile column layout */
.svc-promise-badge {
  display: none;
}

@media (max-width: 768px) {
  .svc-promise-strip {
    flex-direction: column;
    border-radius: 14px;
    margin-top: 22px;
  }
  .svc-promise-divider {
    width: 100%;
    height: 1px;
    align-self: auto;
  }
  .svc-promise-item {
    padding: 14px 16px;
  }
  .svc-promise-item::before {
    top: 0; left: 20%;
    width: 60%; height: 2.5px;
    background: linear-gradient(90deg, transparent, #e10000 40%, #e10000 60%, transparent);
    border-radius: 0 0 2px 2px;
  }
  /* Show badge on mobile column layout — has room */
  .svc-promise-badge {
    display: inline-flex;
    align-items: center;
    font-family: 'Manrope', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.65);
    flex-shrink: 0;
    margin-left: auto;
  }
  .svc-promise-badge--green {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.28);
    color: #4ade80;
  }
  .svc-promise-badge--gold {
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.28);
    color: #facc15;
  }
  .svc-promise-title { font-size: 12px; }
  .svc-promise-sub   { font-size: 10px; }
}


/* ==========================================================================
   MOBILE RESPONSIVENESS LAYER
   Appended last so it wins over earlier rules at equal specificity.
   ========================================================================== */

/* ── Safety nets: padding can never push a box past its container ── */
[class*="svc-"],
.spotlight-section *,
.wr-card,
.wr-card * { box-sizing: border-box; }

.svc-tile__heading,
.svc-tile__summary,
.svc-tile__list li span,
.spec-val,
.svc-cta-lead,
.wr-body p,
.wr-list li span,
.wr-note { overflow-wrap: break-word; }

/* Arrow icons inside the page's CTA buttons: capped so an unsized SVG can never
   balloon a button. A cap (not a fixed size) leaves correctly sized icons untouched. */
.svc-tile__cta .arrow,
.spotlight-content .btn .arrow {
  max-width: 28px;
  max-height: 28px;
}

/* ── ≤1080px: tablet and below ── */
@media (max-width: 1080px) {
  /* overflow:clip (kept on desktop so the rail can stick) is ignored by older
     iOS Safari, which let the decorative rings create sideways scroll.
     The rail isn't sticky here, so hidden is safe. */
  .svc-showcase-section { overflow: hidden; }

  /* minmax(0,…) stops long content from stretching the single column */
  .svc-index-layout {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 36px;
    gap: 24px;
  }

  /* Index rail → swipeable pill row with a fade hint on the right edge */
  .svc-index-rail {
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    padding: 4px 36px 12px 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  .svc-index-item {
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .svc-index-item__text strong { white-space: nowrap; }

  .svc-dashboard { max-width: 560px; }
}

/* ── ≤900px ── */
@media (max-width: 900px) {
  /* keep the "+" beside the counter instead of dropping onto its own line */
  .svc-stat-number { display: inline-block; }
  .wr-grid {
    grid-template-columns: minmax(0, 1fr);
    flex-direction: column;
  }
  .wr-card { min-width: 0; }
}

/* ── ≤768px: promise strip ──
   The items were `flex: 1 1 0` + `overflow: hidden` inside a column flexbox, so
   they collapsed to their padding height and the text was squashed/clipped. */
@media (max-width: 768px) {
  .svc-promise-item {
    flex: 0 0 auto;
    overflow: visible;
  }
  .svc-promise-title { font-size: 12.5px; }
  .svc-promise-sub   { font-size: 11px; }
  .svc-promise-badge { font-size: 10px; }
}

/* ── ≤767px: phones & small tablets ── */
@media (max-width: 767px) {
  /* Service tiles: one consistent left alignment */
  .svc-tile__heading { text-align: left; font-size: clamp(1.3rem, 5.6vw, 1.55rem); }
  .svc-tile__summary { max-width: none; font-size: 0.95rem; }

  .svc-tile__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .svc-tile__cta {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }
  .svc-tile__guarantee { justify-content: center; }

  /* Index pills: slightly smaller so more of the row is visible */
  .svc-index-item { padding: 9px 14px; gap: 10px; }
  .svc-index-item__text strong { font-size: 0.82rem; }

  /* Spotlight: left-align everything to match the eyebrow/lead copy */
  .spotlight-content h2 { text-align: left; }
  .spotlight-content .btn-row { margin-top: 24px !important; }
  .spotlight-content .btn-row .btn {
    justify-content: center;
    min-height: 48px;
  }
  .spotlight-media { max-width: 560px; margin-inline: auto; width: 100%; }

  /* Product / warranty cards: titles left-aligned inside the cards */
  .product-card__title,
  .card-back__title,
  .wr-body h3 { text-align: left; }

  .wr-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    min-height: 48px;
  }

  /* Pagination: larger tap targets */
  #productPageCount { margin-top: 32px; }
  .svc-pagination { gap: 6px; }

  /* Lighter background effects on phones */
  .svc-showcase-glow { width: 420px; height: 260px; filter: blur(44px); }
  .svc-showcase-ring-a { width: 300px; height: 300px; top: -90px; right: -120px; }
  .svc-cta-banner__orb { filter: blur(48px); }
  .svc-cta-banner__orb--a { width: 220px; height: 220px; }
  .svc-cta-banner__orb--b { width: 240px; height: 240px; }
  .svc-cta-p--6, .svc-cta-p--7, .svc-cta-p--8, .svc-cta-p--9, .svc-cta-p--10 { display: none; }
}

/* ── ≤720px: tiles already single-column ── */
@media (max-width: 720px) {
  .svc-tile { border-radius: 24px; }
  .svc-tile__frame-tag { font-size: 11px; }
  .svc-tile__list li { font-size: 0.9rem; }
}

/* ── ≤600px: hero dashboard becomes a compact stack ── */
@media (max-width: 600px) {
  .svc-dashboard {
    max-width: 100%;
    padding: 22px 14px 16px;
    gap: 12px;
    border-radius: 24px;
    /* The base layout is a wrapping *column*, so chips could never sit side by
       side. Switch to a wrapping row here: status card / 3 chips / process strip. */
    flex-direction: row;
    align-items: stretch;
    align-content: flex-start;
  }

  /* three stat chips in one tidy row instead of three tall rows */
  .svc-chip {
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 6px;
    text-align: center;
  }
  .svc-chip div { align-items: center; }
  .svc-chip strong { font-size: 0.98rem; }
  .svc-chip span { font-size: 0.68rem; line-height: 1.25; }
}

/* ── ≤520px ── */
@media (max-width: 520px) {
  .svc-pagination .page-btn { min-width: 42px; height: 42px; }
}

/* ── ≤480px: small phones ── */
@media (max-width: 480px) {
  /* Main status card: icon + title on top, counter on its own row beneath
     (previously three columns fighting for ~220px, wrapping every word) */
  .svc-main-card {
    flex-wrap: wrap;
    gap: 12px 14px;
    padding: 16px 14px;
  }
  .svc-main-card__body { flex: 1 1 0; min-width: 0; }
  .svc-main-card__stat {
    flex: 1 0 100%;
    display: flex;
    align-items: baseline;
    gap: 4px 6px;
    text-align: left;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .svc-stat-number { display: inline-block; font-size: 1.8rem; }
  .svc-stat-plus   { font-size: 1.3rem; margin-left: -2px; }
  .svc-stat-label  { display: inline-block; margin: 0 0 0 auto; align-self: center; }

  .svc-process-strip { padding: 14px 10px; }
  .svc-process-num   { width: 30px; height: 30px; font-size: 0.78rem; }
  .svc-process-label { font-size: 0.62rem; letter-spacing: 0.03em; }
  .svc-process-line  { min-width: 0; margin-bottom: 18px; }

  /* Tiles */
  .svc-tile { padding: 20px 16px; gap: 18px; border-radius: 22px; }
  .svc-tile__num { font-size: 1.8rem; }

  /* Spotlight / sections */
  .spotlight-specs { gap: 10px; }
  .spec-item { padding: 14px 16px; }

  /* CTA banner */
  .svc-cta-banner { border-radius: 24px; padding-inline: 20px; }
  .svc-cta-heading { margin-top: 14px; }
  .svc-cta-actions { gap: 12px; }
  .svc-cta-btn {
    padding: 14px 16px 14px 20px;
    gap: 10px;
    font-size: 15px;
    min-height: 52px;
  }
  .svc-cta-btn__label { text-align: center; }
}

/* ── ≤400px ── */
@media (max-width: 400px) {
  .svc-cta-btn__lead { display: none; }      /* gives the label room to stay on one line */
  .svc-cta-btn { padding-left: 22px; }
  .svc-cta-btn__label { flex: 1; }
  .svc-chip svg { width: 16px; height: 16px; padding: 6px; }
  .svc-chip strong { white-space: nowrap; font-size: 0.9rem; }
}

/* ── ≤360px ── */
@media (max-width: 360px) {
  .svc-cta-banner { padding-inline: 16px; }
  .svc-cta-btn { padding: 13px 14px 13px 18px; gap: 8px; font-size: 14px; }
  .svc-cta-btn__icon { width: 26px; height: 26px; flex: none; }
  .svc-process-line { display: none; }       /* labels need the width more than the connectors */
  .svc-process-step { gap: 5px; }
  .svc-live-dot { font-size: 0.66rem; }
}

/* ── Touch devices: no sticky "lifted" hover states after a tap ── */
@media (hover: none) {
  .svc-tile:hover,
  .svc-chip:hover,
  .svc-process-step:hover,
  .svc-index-item:hover,
  .svc-pagination .page-btn:hover:not(:disabled),
  .platform-badge:hover { transform: none; }
  .svc-tile:hover .svc-tile__frame img { transform: none; }
}

/* ── Reduced motion: also calm the hero dashboard ── */
@media (prefers-reduced-motion: reduce) {
  .svc-chip,
  .svc-live-dot > span,
  .svc-process-line::after,
  .svc-cta-heading { animation: none !important; }
}


/* ==========================================================================
   MOBILE BUTTON ALIGNMENT — every button centred, same width, label centred
   ========================================================================== */
@media (max-width: 767px) {
  /* Hero buttons */
  .hv-btn-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .hv-btn-row .hv-btn {
    width: min(100%, 320px);
    margin-inline: auto;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  /* Service tiles: button + guarantee line centred */
  .svc-tile__footer { align-items: center; }
  .svc-tile__cta {
    width: min(100%, 320px);
    margin-inline: auto;
    justify-content: center;
    text-align: center;
  }
  .svc-tile__guarantee { justify-content: center; text-align: center; width: 100%; }

  /* Spotlight buttons */
  .spotlight-content .btn-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .spotlight-content .btn-row .btn {
    width: min(100%, 320px);
    margin-inline: auto;
    justify-content: center;
    text-align: center;
  }

  /* Warranty / AMC buttons */
  .wr-btn.wr-btn {
    display: flex;
    width: min(100%, 320px);
    margin-inline: auto;
    justify-content: center;
    text-align: center;
  }

  /* Direct-consultation buttons */
  .svc-cta-actions { align-items: center; justify-content: center; }
  .svc-cta-btn {
    width: min(100%, 320px);
    margin-inline: auto;
    justify-content: center;
    text-align: center;
  }

  /* Mobile drawer CTA and pagination */
  .hv-mobile-footer .hv-btn { justify-content: center; text-align: center; }
  .svc-pagination { justify-content: center; }
}


/* Warranty button: long label wraps inside the button with breathing room */
@media (max-width: 767px) {
  .wr-btn.wr-btn {
    white-space: normal;
    line-height: 1.3;
    padding: 13px 20px;
    font-size: 0.92rem;
    min-height: 48px;
  }
}


/* ==========================================================================
   PRODUCT CARD BUTTONS — centred on phones (front "Explore", back cart/buy row)
   Selectors are prefixed with .product-card-wrap so they beat products.css,
   which loads after this file.
   ========================================================================== */
@media (max-width: 767px) {
  .product-card-wrap .pc-footer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
  }
  .product-card-wrap .pc-footer .pc-price { text-align: center; }
  .product-card-wrap .product-card__cta.btn--explore-more {
    width: min(100%, 260px);
    margin-inline: auto;
    justify-content: center;
    text-align: center;
  }

  .product-card-wrap .card-back__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }
  .product-card-wrap .card-back__actions .btn--add-cart,
  .product-card-wrap .card-back__actions .btn--buy-now {
    width: min(100%, 260px);
    margin-inline: auto;
    justify-content: center;
    text-align: center;
  }
}


/* ==========================================================================
   HERO STAT CHIPS — phones: three equal-height, level tiles in one row
   (the desktop float animation staggered them vertically; "Same-Day" overflowed)
   ========================================================================== */
@media (max-width: 600px) {
  .svc-dashboard .svc-chip,
  .svc-dashboard .svc-chip--1,
  .svc-dashboard .svc-chip--2,
  .svc-dashboard .svc-chip--3 {
    animation: none;
    transform: none;
  }
  .svc-dashboard .svc-chip {
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
    height: auto;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 6px;
    text-align: center;
    overflow: hidden;
  }
  .svc-dashboard .svc-chip div {
    align-items: center;
    min-width: 0;
    max-width: 100%;
  }
  .svc-dashboard .svc-chip strong {
    font-size: clamp(0.8rem, 3.6vw, 0.98rem);
    white-space: nowrap;
    max-width: 100%;
  }
  .svc-dashboard .svc-chip span {
    font-size: 0.68rem;
    line-height: 1.25;
  }
}