/* ==========================================================================
   ScoreLabs Inc. - Services Hub (Dribbble-Inspired Design)
   Color Theme: Majorly #4074a0 (Steel Slate Blue)
   Typography: High-End Editorial Serif (Cormorant Garamond / Newsreader) &
               Clean Modern Sans (Outfit / Plus Jakarta Sans)
   ========================================================================== */

:root {
  /* Slate Blue Theme (#4074a0) */
  --slate-primary: #4074a0;
  --slate-light: #5b95c6;
  --slate-lighter: #8bb6db;
  --slate-ice: #eef5fb;
  --slate-subtle: rgba(64, 116, 160, 0.08);
  --slate-glow: rgba(64, 116, 160, 0.35);
  --slate-glow-strong: rgba(64, 116, 160, 0.55);
  
  --slate-dark: #275276;
  --slate-deep: #163652;
  --slate-navy: #0e2236;
  --slate-navy-deep: #091726;
  --slate-card-bg: #11263c;
  --slate-card-border: rgba(91, 149, 198, 0.22);
  
  /* Canvas Neutrals */
  --canvas-light: #f8fafc;
  --canvas-surface: #ffffff;
  --canvas-border: rgba(14, 34, 54, 0.08);
  --canvas-text-title: #0e2236;
  --canvas-text-body: #3b5066;
  --canvas-text-muted: #6b8299;
  
  /* Fonts */
  --font-serif: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==========================================================================
   01. Base & Reset for Services Page
   ========================================================================== */
.pt-svc {
  background-color: var(--canvas-light);
  color: var(--canvas-text-body);
  font-family: var(--font-body);
}

.pt-svc a {
  text-decoration: none;
}

/* ==========================================================================
   02. Hero Section (Dribbble Vertical Fluted / Accordion Theme)
   ========================================================================== */
.dribbble-hero {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(91, 149, 198, 0.32) 0%, rgba(14, 34, 54, 0.85) 60%, #091726 100%),
    url('../img/services/slate-hero-fluted-bg.jpg') center top / cover no-repeat;
  color: #ffffff;
  padding: 140px 0 90px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dribbble-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 23, 38, 0.4) 0%, rgba(9, 23, 38, 0.85) 75%, #091726 100%),
    repeating-linear-gradient(90deg, transparent 0, transparent 40px, rgba(255, 255, 255, 0.015) 40px, rgba(255, 255, 255, 0.015) 41px);
  pointer-events: none;
}

.dribbble-hero .container {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.hero-chip-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: rgba(64, 116, 160, 0.25);
  border: 1px solid rgba(139, 182, 219, 0.35);
  backdrop-filter: blur(12px);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #eef5fb;
  margin-bottom: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 15px var(--slate-glow);
}

.hero-chip-badge .pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5b95c6;
  box-shadow: 0 0 10px #7db1dc;
  animation: pulseLight 2s infinite ease-in-out;
}

@keyframes pulseLight {
  0%, 100% { opacity: 0.6; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.25); }
}

.hero-editorial-title {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: #ffffff;
  max-width: 980px;
  margin: 0 auto 24px;
  text-wrap: balance;
}

.hero-editorial-title em {
  font-style: italic;
  font-weight: 400;
  color: #8bb6db;
}

.hero-editorial-sub {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.65;
  color: #cbdbe9;
  max-width: 780px;
  margin: 0 auto 40px;
  font-weight: 400;
}

.hero-cta-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.btn-pill-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--slate-navy);
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.btn-pill-primary i {
  color: var(--slate-primary);
  transition: transform 0.3s ease;
}

.btn-pill-primary:hover {
  background: #f0f7fd;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), 0 0 20px var(--slate-glow);
}

.btn-pill-primary:hover i {
  transform: translateX(4px);
}

.btn-pill-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 500;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.btn-pill-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  color: #ffffff;
}

/* Quick Navigator Capsule */
.hero-quick-navigator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 1060px;
  margin: 0 auto;
  padding: 12px 18px;
  background: rgba(14, 34, 54, 0.7);
  border: 1px solid rgba(139, 182, 219, 0.2);
  backdrop-filter: blur(16px);
  border-radius: 999px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.hero-quick-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #d1e2f2;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  transition: all 0.25s ease;
}

.hero-quick-pill .pill-count {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.75rem;
  background: rgba(64, 116, 160, 0.35);
  color: #eef5fb;
}

.hero-quick-pill:hover {
  background: rgba(64, 116, 160, 0.35);
  border-color: rgba(139, 182, 219, 0.4);
  color: #ffffff;
  transform: translateY(-1px);
}

/* ==========================================================================
   03. Signature Editorial Statement (Dribbble 2-Column Split)
   ========================================================================== */
.editorial-intro-section {
  padding: 100px 0 60px;
  background-color: var(--canvas-light);
}

.editorial-intro-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 60px;
  align-items: flex-start;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.editorial-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-primary);
}

.editorial-label::before {
  content: '';
  width: 14px;
  height: 2px;
  background-color: var(--slate-primary);
  border-radius: 2px;
}

.editorial-statement {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.28;
  font-weight: 400;
  color: var(--canvas-text-title);
  letter-spacing: -0.01em;
}

.editorial-statement strong {
  font-weight: 600;
  color: var(--slate-deep);
}

/* ==========================================================================
   04. Signature Bento Grid: Split Slate Cards (As seen on Dribbble)
   ========================================================================== */
.signature-bento-section {
  padding: 30px 0 90px;
  background-color: var(--canvas-light);
}

.signature-bento-section .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}

.bento-grid-triple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* The Dribbble Slate Card */
.dribbble-slate-card {
  position: relative;
  border-radius: 24px;
  background: linear-gradient(145deg, #0e2236 0%, #163652 100%);
  border: 1px solid var(--slate-card-border);
  box-shadow: 0 20px 48px rgba(14, 34, 54, 0.16);
  padding: 36px;
  color: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.dribbble-slate-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 182, 219, 0.45), transparent);
}

.dribbble-slate-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(14, 34, 54, 0.28), 0 0 30px var(--slate-glow);
  border-color: rgba(139, 182, 219, 0.45);
}

/* Two-column layout inside the large cards */
.split-card-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  height: 100%;
}

.split-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.split-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-lighter);
  margin-bottom: 14px;
}

.split-card-title {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  line-height: 1.18;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 14px;
}

.split-card-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #c4d7e8;
  margin-bottom: 22px;
}

.split-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.split-tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.78rem;
  color: #d8e6f3;
  font-weight: 500;
}

.split-card-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #ffffff;
  transition: all 0.25s ease;
  margin-top: auto;
}

.split-card-link i {
  color: var(--slate-lighter);
  font-size: 0.8rem;
  transition: transform 0.25s ease;
}

.split-card-link:hover {
  color: var(--slate-lighter);
}

.split-card-link:hover i {
  transform: translateX(4px);
}

/* Right-Hand Crisp Light UI Widgets (Directly from Dribbble shot) */
.card-light-widget {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px;
  color: var(--canvas-text-title);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.9);
  min-height: 250px;
  position: relative;
  overflow: hidden;
}

.widget-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.widget-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--canvas-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.widget-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--slate-ice);
  border: 1px solid rgba(64, 116, 160, 0.2);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--slate-primary);
}

.widget-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--slate-primary);
}

.widget-kpi {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--slate-navy);
  margin-bottom: 4px;
}

.widget-kpi-sub {
  font-size: 0.82rem;
  color: var(--canvas-text-muted);
  margin-bottom: 18px;
}

/* SVG Chart Visual */
.widget-chart-svg {
  width: 100%;
  height: 90px;
  overflow: visible;
}

/* Stack Breakdown Bars */
.widget-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.widget-bar-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.widget-bar-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--canvas-text-body);
}

.widget-bar-track {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: #e9eff5;
  overflow: hidden;
}

.widget-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--slate-primary), var(--slate-light));
}

/* Calendar / Timeline Widget */
.widget-calendar-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 12px 0 16px;
}

.calendar-day-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  border-radius: 10px;
  background: #f4f8fb;
  font-size: 0.72rem;
}

.calendar-day-col.active {
  background: var(--slate-primary);
  color: #ffffff;
}

.calendar-day-col.active .cal-num {
  color: #ffffff;
  font-weight: 700;
}

.cal-name {
  text-transform: uppercase;
  font-size: 0.65rem;
  color: var(--canvas-text-muted);
}

.calendar-day-col.active .cal-name {
  color: #d8e7f5;
}

.cal-num {
  font-weight: 600;
  color: var(--canvas-text-title);
  margin-top: 2px;
}

/* Layered Glassmorphic Card Stack */
.widget-card-stack {
  position: relative;
  padding-top: 10px;
}

.stacked-card {
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  transition: all 0.25s ease;
}

.stacked-card.primary {
  background: #ffffff;
  border: 1px solid rgba(64, 116, 160, 0.2);
  box-shadow: 0 4px 14px rgba(14, 34, 54, 0.08);
}

.stacked-card.ghost {
  background: #f4f8fb;
  border: 1px dashed rgba(64, 116, 160, 0.25);
  opacity: 0.85;
}

.stacked-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slate-ice);
  color: var(--slate-primary);
  font-size: 0.95rem;
}

/* ==========================================================================
   05. Capability Delivery Matrix (Left Artboard from Dribbble shot)
   ========================================================================== */
.delivery-framework-section {
  padding: 90px 0;
  background: #ffffff;
  border-top: 1px solid var(--canvas-border);
  border-bottom: 1px solid var(--canvas-border);
}

.delivery-framework-section .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.framework-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

.framework-table-card {
  background: var(--canvas-light);
  border: 1px solid var(--canvas-border);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(14, 34, 54, 0.04);
}

.framework-table-card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--canvas-text-title);
  margin-bottom: 6px;
}

.framework-table-card p {
  font-size: 0.88rem;
  color: var(--canvas-text-muted);
  margin-bottom: 22px;
}

.framework-table {
  width: 100%;
  border-collapse: collapse;
}

.framework-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--canvas-text-muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--canvas-border);
}

.framework-table td {
  padding: 14px;
  font-size: 0.88rem;
  color: var(--canvas-text-title);
  border-bottom: 1px solid rgba(14, 34, 54, 0.04);
}

.framework-table tr:last-child td {
  border-bottom: none;
}

.status-badge-ready {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: #eef7f2;
  color: #108548;
}

.status-badge-ready::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #108548;
}

/* 4 Elevated White Feature Tiles (Right side of framework) */
.framework-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.framework-tile {
  background: var(--canvas-light);
  border: 1px solid var(--canvas-border);
  border-radius: 18px;
  padding: 24px;
  transition: all 0.3s ease;
}

.framework-tile:hover {
  background: #ffffff;
  transform: translateY(-4px);
  border-color: rgba(64, 116, 160, 0.3);
  box-shadow: 0 16px 36px rgba(14, 34, 54, 0.08);
}

.framework-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--slate-ice);
  color: var(--slate-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 16px;
}

.framework-tile-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--canvas-text-title);
  margin-bottom: 8px;
}

.framework-tile-desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--canvas-text-body);
}

/* ==========================================================================
   06. Complete 42-Service Interactive Directory
   ========================================================================== */
.services-directory-section {
  padding: 100px 0 120px;
  background-color: var(--canvas-light);
}

.services-directory-section .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.directory-head {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px;
}

.directory-head .directory-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--slate-ice);
  border: 1px solid rgba(64, 116, 160, 0.2);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--slate-primary);
  margin-bottom: 16px;
}

.directory-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 500;
  color: var(--canvas-text-title);
  margin-bottom: 16px;
}

.directory-head p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--canvas-text-muted);
}

/* Directory Controls (Search + Category Filter Tabs) */
.directory-controls {
  margin-bottom: 40px;
}

.directory-search-wrapper {
  max-width: 520px;
  margin: 0 auto 28px;
  position: relative;
}

.directory-search-input {
  width: 100%;
  padding: 14px 20px 14px 48px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(14, 34, 54, 0.12);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--canvas-text-title);
  outline: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(14, 34, 54, 0.04);
}

.directory-search-input:focus {
  border-color: var(--slate-primary);
  box-shadow: 0 8px 24px rgba(64, 116, 160, 0.15);
}

.directory-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--canvas-text-muted);
  font-size: 0.95rem;
}

.directory-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.directory-tab-btn {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(14, 34, 54, 0.08);
  background: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--canvas-text-body);
  cursor: pointer;
  transition: all 0.25s ease;
}

.directory-tab-btn:hover {
  border-color: var(--slate-light);
  color: var(--slate-primary);
  transform: translateY(-1px);
}

.directory-tab-btn.active {
  background: var(--slate-primary);
  border-color: var(--slate-primary);
  color: #ffffff;
  box-shadow: 0 6px 18px var(--slate-glow);
}

/* 42-Service Cards Grid */
.directory-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-dir-card {
  background: #ffffff;
  border: 1px solid var(--canvas-border);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(14, 34, 54, 0.03);
  position: relative;
  overflow: hidden;
}

.service-dir-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--slate-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-dir-card:hover {
  transform: translateY(-5px);
  border-color: rgba(64, 116, 160, 0.35);
  box-shadow: 0 20px 45px rgba(14, 34, 54, 0.08), 0 0 20px var(--slate-subtle);
}

.service-dir-card:hover::after {
  opacity: 1;
}

.dir-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.dir-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--slate-ice);
  color: var(--slate-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  transition: all 0.3s ease;
}

.service-dir-card:hover .dir-card-icon {
  background: var(--slate-primary);
  color: #ffffff;
  box-shadow: 0 6px 16px var(--slate-glow);
}

.dir-card-category-pill {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--canvas-text-muted);
}

.dir-card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--canvas-text-title);
  margin-bottom: 10px;
}

.dir-card-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--canvas-text-body);
  margin-bottom: 20px;
  flex: 1;
}

.dir-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(14, 34, 54, 0.06);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--slate-primary);
}

.dir-card-footer i {
  transition: transform 0.25s ease;
}

.service-dir-card:hover .dir-card-footer i {
  transform: translateX(4px);
}

/* ==========================================================================
   07. Consultation CTA Banner (Dribbble Slate Backdrop)
   ========================================================================== */
.slate-consultation-banner {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(91, 149, 198, 0.28) 0%, rgba(14, 34, 54, 0.9) 70%, #091726 100%),
    url('../img/services/slate-hero-fluted-bg.jpg') center center / cover no-repeat;
  color: #ffffff;
  padding: 100px 0;
  overflow: hidden;
  text-align: center;
}

.slate-consultation-banner .container {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

.slate-consultation-banner h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.8vw, 3.8rem);
  font-weight: 500;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 20px;
}

.slate-consultation-banner p {
  font-size: 1.15rem;
  line-height: 1.6;
  color: #c4d7e8;
  max-width: 680px;
  margin: 0 auto 36px;
}

/* ==========================================================================
   08. Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1024px) {
  .editorial-intro-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .bento-grid {
    grid-template-columns: 1fr;
  }
  
  .bento-grid-triple {
    grid-template-columns: 1fr;
  }
  
  .split-card-inner {
    grid-template-columns: 1fr;
  }
  
  .framework-grid {
    grid-template-columns: 1fr;
  }
  
  .directory-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .dribbble-hero {
    padding: 110px 0 70px;
  }
  
  .hero-quick-navigator {
    border-radius: 20px;
    padding: 10px;
  }
  
  .directory-cards-grid {
    grid-template-columns: 1fr;
  }
  
  .framework-tiles {
    grid-template-columns: 1fr;
  }
  
  .dribbble-slate-card {
    padding: 24px;
  }
}

/* Match the main site's heading style (Outfit, bold, tight tracking) */
.hero-editorial-title,
.editorial-statement,
.split-card-title,
.directory-head h2,
.slate-consultation-banner h2 {
  font-weight: 700;
  letter-spacing: -0.03em;
}

.editorial-statement {
  font-weight: 600;
}

/* Outfit has no italic, so keep the accent word upright */
.hero-editorial-title em {
  font-style: normal;
  font-weight: 700;
}

/* Category pages: service cards are links */
.cat-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.cat-card .sx-card-desc {
  flex: 1;
}

.cat-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-weight: 600;
  font-size: 0.92rem;
  color: #4074a0;
}

.cat-more i {
  transition: transform 0.2s ease;
}

.cat-card:hover .cat-more i {
  transform: translateX(4px);
}

/* Category page hero: single column */
.pp-hero-grid.cat-hero {
  grid-template-columns: 1fr;
}

.pp-hero-grid.cat-hero .pp-lead {
  max-width: 720px;
}

/* --------------------------------------------------------------------------
   Shared service / category page components
   -------------------------------------------------------------------------- */

/* four process steps in one row */
.pp-steps.svc-steps4 {
  grid-template-columns: repeat(4, 1fr);
}

/* related links / other categories: tidy responsive tiles */
.svc-rels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.svc-rel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid var(--sx-line);
  border-radius: 16px;
  box-shadow: var(--sx-shadow);
  color: var(--sx-ink);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.svc-rel > span {
  flex: 1;
}

.svc-rel > i:first-child {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #eaf1f8;
  color: #4074a0;
  font-size: 1rem;
}

.svc-rel > i:last-child {
  flex: none;
  color: #4074a0;
  transition: transform 0.2s ease;
}

.svc-rel:hover {
  transform: translateY(-2px);
  border-color: #4074a0;
}

.svc-rel:hover > i:last-child {
  transform: translateX(4px);
}

/* overview split + glance card (service pages) */
.svc-split {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 48px;
  align-items: start;
}

.svc-glance {
  padding: 28px;
  background: #ffffff;
  border: 1px solid var(--sx-line);
  border-radius: 22px;
  box-shadow: var(--sx-shadow);
}

.svc-glance h3 {
  margin-bottom: 16px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--sx-ink);
}

.svc-glance ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
  list-style: none;
}

.svc-glance li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--sx-mute);
}

.svc-glance li i {
  margin-top: 4px;
  color: #4074a0;
}

/* FAQs */
.svc-narrow {
  max-width: 820px;
}

.svc-faqs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.svc-faq {
  background: #ffffff;
  border: 1px solid var(--sx-line);
  border-radius: 16px;
  box-shadow: var(--sx-shadow);
}

.svc-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--sx-ink);
}

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

.svc-faq summary i {
  color: #4074a0;
  transition: transform 0.2s ease;
}

.svc-faq[open] summary i {
  transform: rotate(45deg);
}

.svc-a {
  padding: 0 22px 20px;
  color: var(--sx-mute);
  line-height: 1.65;
}

/* hero image presentation */
.svc-media {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(14, 34, 54, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(91, 149, 198, 0.2);
}

.svc-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-media:hover img {
  transform: scale(1.03);
}

.svc-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.4);
  z-index: 1;
}

@media (max-width: 1024px) {
  .pp-steps.svc-steps4 { grid-template-columns: repeat(2, 1fr); }
  .svc-rels { grid-template-columns: repeat(2, 1fr); }
  .svc-split { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 640px) {
  .pp-steps.svc-steps4,
  .svc-rels { grid-template-columns: 1fr; }
}

/* category tiles: centred rows, no lopsided last row */
.svc-rels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.svc-rel {
  flex: 0 1 calc(25% - 11px);
  min-width: 220px;
}

@media (max-width: 640px) {
  .svc-rel { flex-basis: 100%; }
}

/* Category page hero: photo background under a navy tint (darker on the text side) */
.pp-hero.cat-bg {
  background:
    linear-gradient(90deg, rgba(6, 17, 36, 0.92) 0%, rgba(6, 17, 36, 0.74) 48%, rgba(6, 17, 36, 0.42) 100%),
    var(--cat-img) center / cover no-repeat;
}

.pp-hero.cat-bg .pp-glow {
  opacity: 0.35;
}

@media (max-width: 900px) {
  .pp-hero.cat-bg {
    background:
      linear-gradient(rgba(6, 17, 36, 0.82), rgba(6, 17, 36, 0.82)),
      var(--cat-img) center / cover no-repeat;
  }
}

/* Category page hero: taller photo area (extra room below the text, text position unchanged) */
.pp-hero.cat-bg {
  padding-bottom: 230px;
}

@media (max-width: 900px) {
  .pp-hero.cat-bg {
    padding-bottom: 150px;
  }
}

/* Wider content on large screens: less empty space on the left and right */
.signature-bento-section .container,
.delivery-framework-section .container,
.services-directory-section .container,
.editorial-intro-grid {
  max-width: 1640px;
}

.editorial-intro-grid {
  padding-left: 48px;
  padding-right: 48px;
}

.dribbble-hero .container {
  max-width: 1480px;
}

/* Widget: two headline numbers side by side, evenly split */
.widget-kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 4px 0 18px;
}

.widget-kpi-item {
  min-width: 0;
}

.widget-kpi-item + .widget-kpi-item {
  padding-left: 20px;
  border-left: 1px solid #e3eaf2;
}

.widget-kpi-row .widget-kpi {
  font-size: 2.1rem;
  white-space: nowrap;
}

.widget-kpi-row .widget-kpi-sub {
  margin-bottom: 0;
}

.widget-kpi-accent {
  color: #4074a0;
}

.widget-kpi-row + .widget-bars {
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px solid #eef2f7;
  gap: 12px;
}

.widget-pill {
  flex: none;
  white-space: nowrap;
}

/* Tighter vertical spacing between sections */
.dribbble-hero {
  padding-bottom: 64px;
}

.editorial-intro-section {
  padding: 56px 0 28px;
}

.signature-bento-section {
  padding: 20px 0 56px;
}

.delivery-framework-section {
  padding: 56px 0;
}

.services-directory-section {
  padding: 56px 0 64px;
}

.directory-head {
  margin-bottom: 32px;
}

.slate-consultation-banner {
  padding: 64px 0;
}

@media (max-width: 768px) {
  .editorial-intro-section { padding: 40px 0 20px; }
  .signature-bento-section { padding: 16px 0 40px; }
  .delivery-framework-section { padding: 40px 0; }
  .services-directory-section { padding: 40px 0 48px; }
  .slate-consultation-banner { padding: 48px 0; }
}

/* --------------------------------------------------------------------------
   Services page: mobile polish
   -------------------------------------------------------------------------- */
.framework-grid > *,
.bento-grid > *,
.bento-grid-triple > * {
  min-width: 0;
}

@media (max-width: 640px) {
  .pt-main {
    overflow-x: hidden;
  }

  /* hero */
  .hero-editorial-title {
    font-size: clamp(2rem, 9vw, 2.5rem);
    line-height: 1.12;
  }

  .hero-quick-navigator {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border-radius: 18px;
  }

  .hero-quick-pill {
    justify-content: center;
    padding: 9px 10px;
    font-size: 0.78rem;
  }

  /* statement */
  .editorial-intro-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .editorial-statement {
    font-size: 1.35rem;
    line-height: 1.4;
  }

  /* bento + framework + directory containers */
  .signature-bento-section .container,
  .delivery-framework-section .container,
  .services-directory-section .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .framework-table-card {
    padding: 20px 16px;
    overflow-x: auto;
  }

  .framework-table {
    min-width: 520px;
    font-size: 0.82rem;
  }

  /* directory */
  .directory-head h2 {
    font-size: 1.9rem;
  }

  .directory-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .directory-tabs::-webkit-scrollbar {
    display: none;
  }

  .directory-tab-btn {
    flex: none;
    white-space: nowrap;
  }

  .slate-consultation-banner h2 {
    font-size: 1.9rem;
  }
}

@media (max-width: 640px) {
  /* keep the matrix readable without sideways scrolling: drop the status column */
  .framework-table {
    min-width: 0;
  }

  .framework-table th:nth-child(4),
  .framework-table td:nth-child(4) {
    display: none;
  }

  .framework-table th,
  .framework-table td {
    padding-left: 0;
    padding-right: 10px;
  }
}

/* --------------------------------------------------------------------------
   Service + category page hero: centred, balanced text over the photo
   -------------------------------------------------------------------------- */
.pp-hero.cat-bg {
  display: flex;
  align-items: center;
  min-height: 600px;
  padding: 140px 0 96px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(6, 17, 36, 0.72) 0%, rgba(6, 17, 36, 0.62) 50%, rgba(6, 17, 36, 0.78) 100%),
    var(--cat-img) center / cover no-repeat;
}

.pp-hero.cat-bg .container {
  width: 100%;
}

.pp-hero.cat-bg .pp-chip {
  margin-bottom: 24px;
}

.pp-hero.cat-bg .pp-title {
  max-width: 920px;
  margin: 0 auto 22px;
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  line-height: 1.1;
  text-wrap: balance;
}

/* one solid accent colour instead of a patchy per-word gradient */
.pp-hero.cat-bg .pp-title .sx-grad .wi {
  background: none;
  -webkit-text-fill-color: #8fc4ee;
  color: #8fc4ee;
}

.pp-hero.cat-bg .pp-lead {
  max-width: 740px;
  margin: 0 auto 34px;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.7;
  color: #dbe6f2;
  text-wrap: pretty;
}

.pp-hero.cat-bg .pp-cta {
  justify-content: center;
}

@media (max-width: 900px) {
  .pp-hero.cat-bg {
    min-height: 480px;
    padding: 120px 0 64px;
  }
}

@media (max-width: 640px) {
  .pp-hero.cat-bg {
    min-height: 0;
    padding: 108px 0 56px;
  }

  .pp-hero.cat-bg .pp-title {
    font-size: clamp(2rem, 9vw, 2.5rem);
  }

  .pp-hero.cat-bg .pp-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .pp-hero.cat-bg .pp-cta .sx-btn {
    justify-content: center;
  }
}

/* Hero photo area: a little taller */
.pp-hero.cat-bg {
  min-height: 700px;
}

@media (max-width: 900px) {
  .pp-hero.cat-bg {
    min-height: 560px;
  }
}

@media (max-width: 640px) {
  .pp-hero.cat-bg {
    padding-bottom: 96px;
  }
}

/* No cursor-following glow on cards (service + category pages) */
.pt-svc .sx-card::before,
.pt-svc .bento-card::before {
  display: none;
}

/* Section headings: don't clip descenders (the "g" in "categories") */
.pt-svc .sx-title .w {
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}

.pt-svc .sx-title .wi {
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}

/* --------------------------------------------------------------------------
   Category tiles: hover animation (colour sweep, lift, focus on the hovered tile)
   -------------------------------------------------------------------------- */
.svc-rel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease,
              border-color 0.35s ease, opacity 0.35s ease, color 0.3s ease;
}

.svc-rel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #0b2a63 0%, #1e40af 60%, #14b8a6 140%);
  transform: translateY(101%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-rel > i:first-child {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease;
}

.svc-rel > i:last-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0.85rem;
  transition: transform 0.35s ease, background 0.3s ease, color 0.3s ease;
}

.svc-rel:hover,
.svc-rel:focus-visible {
  transform: translateY(-6px);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 22px 40px rgba(11, 42, 99, 0.28);
}

.svc-rel:hover::before,
.svc-rel:focus-visible::before {
  transform: translateY(0);
}

.svc-rel:hover > i:first-child,
.svc-rel:focus-visible > i:first-child {
  transform: scale(1.12) rotate(-8deg);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.svc-rel:hover > i:last-child,
.svc-rel:focus-visible > i:last-child {
  transform: translateX(4px);
  background: #ffffff;
  color: #1e40af;
}

/* the other tiles step back while one is hovered */
.svc-rels:hover .svc-rel:not(:hover) {
  opacity: 0.55;
  transform: scale(0.97);
}

@media (hover: none) {
  .svc-rels:hover .svc-rel:not(:hover) {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-rel,
  .svc-rel::before,
  .svc-rel > i {
    transition: none;
  }
}

/* Tile icons stay still on hover (colour change only) */
.svc-rel:hover > i:first-child,
.svc-rel:focus-visible > i:first-child,
.svc-rel:hover > i:last-child,
.svc-rel:focus-visible > i:last-child {
  transform: none;
}

/* Hero title (the bold text): bigger */
.pp-hero.cat-bg .pp-title {
  max-width: 1100px;
  font-size: clamp(2.8rem, 6.4vw, 5.2rem);
  line-height: 1.06;
}

@media (max-width: 640px) {
  .pp-hero.cat-bg .pp-title {
    font-size: clamp(2.3rem, 11vw, 3rem);
  }
}

/* Hero pill (category / "Our Services" tag): larger, cleaner */
.pp-hero.cat-bg .pp-chip {
  gap: 12px;
  padding: 8px 22px 8px 8px;
  margin-bottom: 28px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.pp-hero.cat-bg .pp-chip i {
  width: 36px;
  height: 36px;
  font-size: 0.95rem;
  flex: none;
}

.pp-hero.cat-bg .pp-chip:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 640px) {
  .pp-hero.cat-bg .pp-chip {
    gap: 10px;
    padding: 6px 16px 6px 6px;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
  }

  .pp-hero.cat-bg .pp-chip i {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }
}

/* Hero pill: narrower (horizontal only, height unchanged) */
.pp-hero.cat-bg .pp-chip {
  gap: 8px;
  padding-right: 14px;
  letter-spacing: 0.01em;
}

@media (max-width: 640px) {
  .pp-hero.cat-bg .pp-chip {
    gap: 7px;
    padding-right: 12px;
    letter-spacing: 0;
  }
}

/* Hero pill: small and sleek */
.pp-hero.cat-bg .pp-chip {
  gap: 8px;
  padding: 4px 13px 4px 4px;
  margin-bottom: 22px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

.pp-hero.cat-bg .pp-chip i {
  width: 22px;
  height: 22px;
  font-size: 0.62rem;
}

@media (max-width: 640px) {
  .pp-hero.cat-bg .pp-chip {
    padding: 3px 11px 3px 3px;
    font-size: 0.68rem;
    gap: 7px;
  }

  .pp-hero.cat-bg .pp-chip i {
    width: 20px;
    height: 20px;
    font-size: 0.56rem;
  }
}

/* ==========================================================================
   Category page heroes: a themed animation on top of the photo (behind the text)
   ========================================================================== */
.cat-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}


@media (prefers-reduced-motion: reduce) {
  .cat-fx * { animation: none !important; }
}

@keyframes fxFloat { from { transform: translateY(-8px); } to { transform: translateY(8px); } }
@keyframes fxSpin { to { transform: rotate(360deg); } }
@keyframes fxPulse { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(3); opacity: 0; } }
@keyframes fxBreath { from { transform: translate(-50%, -50%) scale(0.85); } to { transform: translate(-50%, -50%) scale(1.1); } }

/* 2. Design & UX: a bezier curve drawn live, with anchors, handles, a cursor and a palette */
.dz-draw { animation: fxFade 7s ease-in-out infinite; }
@keyframes fxFade { 0% { opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
.dz-curve {
  fill: none; stroke: #8fc4ee; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1;
  filter: drop-shadow(0 0 6px rgba(143, 196, 238, 0.7)); animation: fxDraw 7s ease-in-out infinite;
}
@keyframes fxDraw { 0% { stroke-dashoffset: 1; } 72% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
.dz-handle { stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.2; stroke-dasharray: 4 5; }
.dz-hdot { fill: #ffffff; }
.dz-anchor { fill: #0b2a63; stroke: #ffffff; stroke-width: 2; }
.dz-cursor path { fill: #ffffff; stroke: #0b2a63; stroke-width: 1.5; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)); }
.dz-sw {
  opacity: 0.9; transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35)); animation: fxPop 5s ease-in-out infinite; animation-delay: var(--d);
}
@keyframes fxPop {
  0%, 100% { transform: scale(0.72); opacity: 0.45; }
  18%, 40% { transform: scale(1); opacity: 1; }
  60% { transform: scale(0.85); opacity: 0.6; }
}
.dz-ruler line { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; }

/* 3. Application Development: wireframe windows that build themselves */
.ap-frame { fill: rgba(255, 255, 255, 0.07); stroke: rgba(143, 196, 238, 0.55); stroke-width: 1.5; }
.ap-bar { stroke: rgba(143, 196, 238, 0.35); stroke-width: 1.2; fill: rgba(143, 196, 238, 0.35); }
.ap-dot { fill: rgba(255, 255, 255, 0.5); }
.ap-float { animation: fxFloat 6s ease-in-out infinite alternate; animation-delay: var(--f); }
.blk {
  fill: rgba(143, 196, 238, 0.42); transform-box: fill-box; transform-origin: left center;
  animation: fxBuild 7s ease-in-out infinite backwards; animation-delay: var(--d);
}
.blk.acc { fill: #5eead4; }
@keyframes fxBuild {
  0% { transform: scaleX(0); opacity: 0; }
  14% { transform: scaleX(1); opacity: 1; }
  78% { transform: scaleX(1); opacity: 1; }
  92%, 100% { transform: scaleX(0); opacity: 0; }
}

/* 4. System & Software: meshing gears */
.gr { transform-box: fill-box; transform-origin: center; animation: fxSpin var(--t) linear infinite; animation-direction: var(--dir); }
.gr-body { fill: rgba(143, 196, 238, 0.1); stroke: rgba(143, 196, 238, 0.6); stroke-width: 1.6; }
.gr-hub { fill: rgba(94, 234, 212, 0.75); }
.gr-led { fill: #5eead4; filter: drop-shadow(0 0 5px #2dd4bf); animation: fxBlink 2.2s ease-in-out infinite; animation-delay: var(--d); }
@keyframes fxBlink { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }

/* 5. AI & ML: gyroscopes of rings in 3D */
.fx-aiml .gy { position: absolute; aspect-ratio: 1; perspective: 900px; }
.fx-aiml .gy.big { width: min(30vw, 380px); right: 3%; top: 12%; }
.fx-aiml .gy.small { width: min(18vw, 230px); left: 5%; bottom: 10%; }
.gy-r {
  position: absolute; inset: 0; border-radius: 50%; border: 1.6px solid rgba(143, 196, 238, 0.55);
  transform-style: preserve-3d; box-shadow: 0 0 18px rgba(143, 196, 238, 0.15), inset 0 0 18px rgba(143, 196, 238, 0.1);
}
.gy-r.r1 { animation: gyY 14s linear infinite; }
.gy-r.r2 { inset: 12%; border-color: rgba(94, 234, 212, 0.6); animation: gyX 11s linear infinite; }
.gy-r.r3 { inset: 26%; border-style: dashed; border-color: rgba(255, 255, 255, 0.45); animation: fxSpin 18s linear infinite reverse; }
.gy-r.r1::after, .gy-r.r2::after {
  content: ''; position: absolute; top: -6px; left: 50%; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%;
  background: #5eead4; box-shadow: 0 0 14px 3px rgba(45, 212, 191, 0.9);
}
.gy-r.r2::after { background: #8fc4ee; box-shadow: 0 0 14px 3px rgba(143, 196, 238, 0.9); }
@keyframes gyY { to { transform: rotateY(360deg); } }
@keyframes gyX { to { transform: rotateX(360deg); } }
.gy-core {
  position: absolute; left: 50%; top: 50%; width: 16%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8fe9dd, #14b8a6 55%, #0b2a63); box-shadow: 0 0 40px rgba(45, 212, 191, 0.7);
  animation: fxBreath 3s ease-in-out infinite alternate;
}

/* 6. Data & BI: live bars, donut, a line chart that draws itself */
.db-bar {
  fill: rgba(143, 196, 238, 0.28); transform-box: fill-box; transform-origin: bottom;
  animation: fxBar 3.6s ease-in-out infinite alternate; animation-delay: var(--d);
}
.db-bar:nth-child(3n) { fill: rgba(94, 234, 212, 0.4); }
@keyframes fxBar { from { transform: scaleY(var(--a)); } to { transform: scaleY(var(--b)); } }
.db-track { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 14; }
.db-ring { fill: none; stroke: #14b8a6; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 6 100; transform: rotate(-90deg); animation: fxDonut 6s ease-in-out infinite alternate; }
.db-ring.r2 { stroke: #8fc4ee; stroke-width: 10; animation-duration: 7s; animation-delay: 0.6s; }
@keyframes fxDonut { from { stroke-dasharray: 6 100; } to { stroke-dasharray: 78 100; } }
.db-grid { stroke: rgba(255, 255, 255, 0.12); stroke-dasharray: 4 6; }
.db-line {
  fill: none; stroke: #5eead4; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1;
  filter: drop-shadow(0 0 6px #2dd4bf); animation: fxDrawD 5s ease-in-out infinite;
}
@keyframes fxDrawD {
  0% { stroke-dashoffset: 1; opacity: 1; }
  80% { stroke-dashoffset: 0; opacity: 1; }
  95% { opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
.db-pt { fill: #ffffff; filter: drop-shadow(0 0 8px #5eead4); }

/* 7. Business Support: chat bubbles float up and get resolved */
.sp-b { opacity: 0; animation: fxRise 8s ease-in-out infinite; animation-delay: var(--d); }
@keyframes fxRise {
  0% { opacity: 0; transform: translateY(46px); }
  12% { opacity: 1; }
  72% { opacity: 1; transform: translateY(-14px); }
  100% { opacity: 0; transform: translateY(-52px); }
}
.sp-bub { fill: rgba(255, 255, 255, 0.12); stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.4; }
.sp-t { fill: #ffffff; animation: fxType 1.2s ease-in-out infinite; animation-delay: var(--d); }
@keyframes fxType { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
.sp-l { fill: rgba(255, 255, 255, 0.45); }
.sp-ok { transform-box: fill-box; transform-origin: center; animation: fxTick 8s ease-in-out infinite; animation-delay: var(--d); }
.sp-ok circle { fill: #14b8a6; stroke: #ffffff; stroke-width: 2; }
.sp-ok path { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes fxTick { 0%, 30% { transform: scale(0); } 40% { transform: scale(1.25); } 48%, 100% { transform: scale(1); } }

/* 8. SAP: a honeycomb of ERP modules lighting up in a wave */
.sp-hex {
  fill: rgba(143, 196, 238, 0.05); stroke: rgba(143, 196, 238, 0.32); stroke-width: 1.4;
  animation: fxHex 5.5s ease-in-out infinite; animation-delay: var(--d);
}
.sp-hex.lab { stroke-width: 2; }
@keyframes fxHex {
  0%, 100% { fill: rgba(143, 196, 238, 0.05); stroke: rgba(143, 196, 238, 0.3); }
  35% { fill: rgba(45, 212, 191, 0.32); stroke: rgba(94, 234, 212, 0.95); }
  60% { fill: rgba(143, 196, 238, 0.05); }
}
.sp-hl { fill: #ffffff; font-family: var(--font-heading); font-size: 15px; font-weight: 700; opacity: 0.88; letter-spacing: 0.02em; }


/* ==========================================================================
   Service pages, "How we work": a light travels the path and wakes each step in turn
   ========================================================================== */
.pp-steps.steps-flow {
  position: relative;
}

.steps-flow .pp-step {
  animation: stepLit 9s ease-in-out infinite;
}

.steps-flow .pp-step:nth-child(1) { animation-delay: 0s; }
.steps-flow .pp-step:nth-child(2) { animation-delay: 2.25s; }
.steps-flow .pp-step:nth-child(3) { animation-delay: 4.5s; }
.steps-flow .pp-step:nth-child(4) { animation-delay: 6.75s; }

.steps-flow .pp-step::before {
  transform-origin: left center;
  animation: numLit 9s ease-in-out infinite;
  animation-delay: inherit;
}

@keyframes stepLit {
  0%, 24%, 100% {
    transform: none;
    border-color: var(--sx-line);
    box-shadow: var(--sx-shadow);
    background: #ffffff;
  }
  4%, 20% {
    transform: translateY(-9px);
    border-color: rgba(20, 184, 166, 0.75);
    box-shadow: 0 20px 44px rgba(20, 184, 166, 0.24), 0 0 0 4px rgba(20, 184, 166, 0.1);
    background: linear-gradient(180deg, #ffffff 0%, #effcf9 100%);
  }
}

@keyframes numLit {
  0%, 24%, 100% { transform: scale(1); filter: none; }
  4%, 20% { transform: scale(1.14); filter: drop-shadow(0 6px 10px rgba(20, 184, 166, 0.35)); }
}

@media (prefers-reduced-motion: reduce) {
  .steps-flow .pp-step,
  .steps-flow .pp-step::before { animation: none; }
}

/* ---- each step has its own tiny living scene, played when the light reaches its card ---- */
.steps-flow .pp-step:nth-child(1) { --b: 0s; }
.steps-flow .pp-step:nth-child(2) { --b: 2.25s; }
.steps-flow .pp-step:nth-child(3) { --b: 4.5s; }
.steps-flow .pp-step:nth-child(4) { --b: 6.75s; }

.st-art {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 84px;
  height: 84px;
  opacity: 0.5;
  transform: scale(0.94);
  animation: stArt 9s ease-in-out infinite;
  animation-delay: var(--b);
}

.st-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.st-art .gl { fill: none; stroke: rgba(30, 64, 175, 0.18); stroke-width: 1; }

@keyframes stArt {
  0%, 24%, 100% { opacity: 0.5; transform: scale(0.94); }
  4%, 20% { opacity: 1; transform: scale(1); }
}

/* 1 radar */
.st-sweep { transform-origin: 48px 48px; animation: stSweep 9s linear infinite; animation-delay: var(--b); opacity: 0; }
.st-sweep path { fill: rgba(20, 184, 166, 0.32); }
.st-sweep line { stroke: #14b8a6; stroke-width: 2; stroke-linecap: round; }
@keyframes stSweep {
  0%, 3% { opacity: 0; transform: rotate(0deg); }
  5% { opacity: 1; }
  20% { opacity: 1; transform: rotate(360deg); }
  23%, 100% { opacity: 0; transform: rotate(360deg); }
}
.st-blip {
  fill: #1e40af; transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: stBlip 9s ease-in-out infinite; animation-delay: calc(var(--b) + var(--o, 0s));
}
@keyframes stBlip {
  0%, 7% { opacity: 0; transform: scale(0.3); }
  10% { opacity: 1; transform: scale(1.7); }
  15%, 20% { opacity: 1; transform: scale(1); }
  25%, 100% { opacity: 0; transform: scale(0.3); }
}

/* 2 blueprint + 4 trend line */
.st-draw {
  fill: none; stroke: #14b8a6; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
  animation: stDraw 9s ease-in-out infinite; animation-delay: calc(var(--b) + var(--o, 0s));
}
@keyframes stDraw {
  0%, 4% { stroke-dashoffset: 1; opacity: 0; }
  5% { opacity: 1; }
  16%, 22% { stroke-dashoffset: 0; opacity: 1; }
  28%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.st-node {
  fill: #1e40af; transform-box: fill-box; transform-origin: center; opacity: 0;
  animation: stPop 9s ease-in-out infinite; animation-delay: calc(var(--b) + var(--o, 0s));
}
@keyframes stPop {
  0%, 5% { transform: scale(0); opacity: 0; }
  9% { transform: scale(1.4); opacity: 1; }
  12%, 22% { transform: scale(1); opacity: 1; }
  27%, 100% { transform: scale(0); opacity: 0; }
}

/* 3 stacked blocks + sign-off */
.st-blk {
  fill: rgba(20, 184, 166, 0.22); stroke: #14b8a6; stroke-width: 1.6; opacity: 0;
  animation: stRise 9s ease-in-out infinite; animation-delay: calc(var(--b) + var(--o, 0s));
}
@keyframes stRise {
  0%, 4% { transform: translateY(18px); opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  22% { transform: translateY(0); opacity: 1; }
  27%, 100% { transform: translateY(18px); opacity: 0; }
}
.st-ok { transform-box: fill-box; transform-origin: center; opacity: 0; animation: stPop 9s ease-in-out infinite; animation-delay: calc(var(--b) + var(--o, 0s)); }
.st-ok circle { fill: #14b8a6; stroke: #ffffff; stroke-width: 2; }
.st-ok path { fill: none; stroke: #ffffff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* 4 climbing bars */
.st-bar {
  fill: rgba(30, 64, 175, 0.75); transform-box: fill-box; transform-origin: bottom; opacity: 0.4;
  animation: stBar 9s ease-in-out infinite; animation-delay: calc(var(--b) + var(--o, 0s));
}
.st-bar:nth-of-type(4) { fill: #14b8a6; }
@keyframes stBar {
  0%, 4% { transform: scaleY(0.08); opacity: 0.4; }
  13%, 22% { transform: scaleY(1); opacity: 1; }
  28%, 100% { transform: scaleY(0.08); opacity: 0.4; }
}

@media (max-width: 640px) {
  .st-art { width: 64px; height: 64px; top: 16px; right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-art, .st-sweep, .st-blip, .st-draw, .st-node, .st-blk, .st-ok, .st-bar { animation: none; opacity: 1; }
  .st-draw { stroke-dashoffset: 0; }
  .st-bar { transform: none; }
}

/* ==========================================================================
   Service pages, "What we offer": clean cards, a roaming light on the borders
   ========================================================================== */
.pt-svc .offer-grid { position: relative; gap: 22px; }

.pt-svc .offer-grid .sx-card {
  --px: -400px;
  --py: -400px;
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 16px;
  row-gap: 14px;
  align-items: center;
  align-content: start;
  padding: 26px 28px 28px;
  background: #ffffff;
  border: 1px solid rgba(30, 64, 175, 0.1);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(11, 42, 99, 0.04);
  transform: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, opacity 0.6s ease;
}

/* icon and title on one row, the description underneath: no empty space above the text */
.pt-svc .offer-grid .sx-icon { grid-column: 1; grid-row: 1; margin: 0; }
.pt-svc .offer-grid .sx-card-title { grid-column: 2; grid-row: 1; margin: 0; }
.pt-svc .offer-grid .sx-card-desc { grid-column: 1 / -1; grid-row: 2; margin: 0; }

/* the light on the border */
.pt-svc .offer-grid .sx-card::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  transform: none;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(280px circle at var(--px) var(--py), rgba(20, 184, 166, 1), rgba(30, 64, 175, 0.75) 42%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 1;
  transition: none;
  pointer-events: none;
  z-index: 2;
}

/* the same light, as a faint glow inside the card */
.pt-svc .offer-grid .sx-card::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--px) var(--py), rgba(20, 184, 166, 0.11), transparent 62%);
  -webkit-mask: none;
  mask: none;
  opacity: 1;
  transition: none;
  pointer-events: none;
  z-index: -1;
}

.pt-svc .offer-grid .sx-icon {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pt-svc .offer-grid .sx-card:hover .sx-icon {
  transform: translateY(-4px) scale(1.08);
}

.pt-svc .offer-grid.offer-in .sx-card:hover,
.pt-svc .offer-grid.offer-done .sx-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(11, 42, 99, 0.12);
}

/* dealt out from the middle of the grid */
.pt-svc .offer-grid.offer-pre .sx-card {
  opacity: 0;
  transform: translate(var(--dx), var(--dy)) scale(0.55) rotate(var(--r));
  transition: none;
}

.pt-svc .offer-grid.offer-in .sx-card {
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, box-shadow 0.4s ease;
  transition-delay: var(--d, 0s);
}

.pt-svc .offer-grid.offer-done .sx-card {
  transition-delay: 0s;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, opacity 0.5s ease;
}

@media (max-width: 640px) {
  .pt-svc .offer-grid { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-svc .offer-grid.offer-pre .sx-card { opacity: 1; transform: none; }
  .pt-svc .offer-grid .sx-card::before,
  .pt-svc .offer-grid .sx-card::after { opacity: 0.5; }
}

/* ==========================================================================
   Category pages, services section: an index (left) and a stage (right)
   ========================================================================== */
.svc-index-ready .pp-grid { display: none; }

.svc-index {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: stretch;
}

.svc-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(30, 64, 175, 0.12);
}

.svc-list li { border-bottom: 1px solid rgba(30, 64, 175, 0.12); }

.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr 26px;
  align-items: center;
  width: 100%;
  padding: 19px 6px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-heading);
  color: #7d8ca5;
  transition: color 0.3s ease, padding 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-n {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #a9b6c9;
  transition: color 0.3s ease;
}

.svc-t {
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.svc-arr {
  color: #14b8a6;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-row:hover,
.svc-row.on { color: #0b2a63; padding-left: 20px; }
.svc-row.on .svc-n { color: #14b8a6; }
.svc-row.on .svc-arr { opacity: 1; transform: none; }
.svc-row:focus-visible { outline: 2px solid #14b8a6; outline-offset: -2px; border-radius: 8px; }

/* the hairline that fills under the active row, then hands over to the next */
.svc-bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, #1e40af, #14b8a6);
}

.svc-row.on .svc-bar { animation: svcBar 5s linear forwards; }
@keyframes svcBar { to { width: 100%; } }
.svc-index.pause .svc-bar,
.svc-index.offscreen .svc-bar { animation-play-state: paused; }
.svc-index.still .svc-row.on .svc-bar { animation: none; width: 100%; }

/* the stage */
.svc-stage {
  --rot: 0deg;
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border-radius: 30px;
  background: linear-gradient(160deg, #ffffff 0%, #f0f6ff 100%);
  border: 1px solid rgba(30, 64, 175, 0.1);
  box-shadow: 0 30px 60px rgba(11, 42, 99, 0.08);
}

/* a soft shape that keeps changing form and turns a little for each service */
.svc-blob {
  position: absolute;
  right: -90px;
  top: -90px;
  width: 430px;
  height: 430px;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.36), rgba(30, 64, 175, 0.28));
  filter: blur(6px);
  border-radius: 42% 58% 62% 38% / 45% 40% 60% 55%;
  transform: rotate(var(--rot));
  transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  animation: svcMorph 14s ease-in-out infinite alternate;
}

@keyframes svcMorph {
  0% { border-radius: 42% 58% 62% 38% / 45% 40% 60% 55%; }
  50% { border-radius: 62% 38% 40% 60% / 58% 62% 38% 42%; }
  100% { border-radius: 38% 62% 54% 46% / 60% 38% 62% 40%; }
}

/* the number rolls like an odometer */
.svc-num {
  position: absolute;
  right: 30px;
  bottom: 6px;
  display: flex;
  font-family: var(--font-heading);
  font-size: 9rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(30, 64, 175, 0.2);
  user-select: none;
}

.svc-num .col { display: block; height: 1em; overflow: hidden; }
.svc-num .strip {
  display: block;
  transform: translateY(calc(var(--d, 0) * -1em));
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc-num b { display: block; height: 1em; font-weight: 800; line-height: 1; }

.svc-panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 44px 120px;
  opacity: 0;
  pointer-events: none;
}

.svc-panel.on { opacity: 1; pointer-events: auto; }

.svc-panel > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.svc-panel.on > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-panel.on > :nth-child(1) { transition-delay: 0.05s; }
.svc-panel.on > :nth-child(2) { transition-delay: 0.12s; }
.svc-panel.on > :nth-child(3) { transition-delay: 0.2s; }
.svc-panel.on > :nth-child(4) { transition-delay: 0.28s; }

.svc-ic {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, #1e40af, #14b8a6);
  color: #ffffff;
  font-size: 1.6rem;
  box-shadow: 0 14px 30px rgba(20, 184, 166, 0.3);
}

.svc-panel h3 {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 2.5vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #0b1b3a;
}

.svc-panel p {
  max-width: 460px;
  margin: 0 0 26px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #4b5b75;
}

.svc-go {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #0b2a63;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease, gap 0.3s ease;
}

.svc-go:hover { background: #14b8a6; gap: 15px; }

@media (max-width: 900px) {
  .svc-index { grid-template-columns: 1fr; gap: 28px; }
  .svc-stage { order: -1; min-height: 440px; }
  .svc-panel { padding: 32px 26px 90px; }
  .svc-num { font-size: 6rem; right: 20px; }
  .svc-row { padding: 15px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-blob { animation: none; }
  .svc-num .strip,
  .svc-panel > *,
  .svc-panel.on > * { transition: none; }
}

/* ==========================================================================
   AI Agents hero: a live feed of autonomous agent tasks (queued, working, done)
   ========================================================================== */
.fx-agents-feed { top: 84px; height: calc(100% - 84px); }

.ag-col {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 254px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 26px 0;
  perspective: 1100px;
}
.ag-col.l { left: 3.5%; }
.ag-col.r { right: 3.5%; padding-top: 58px; padding-bottom: 0; }

.ag-card {
  --ry: 13deg;
  padding: 14px 16px 15px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(10, 26, 60, 0.55), rgba(10, 26, 60, 0.32));
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: rotateY(var(--ry));
  opacity: 0;
  animation: agCard 12s ease-in-out infinite backwards;
  animation-delay: var(--d);
}
.ag-col.r .ag-card { --ry: -13deg; }

@keyframes agCard {
  0% { opacity: 0; translate: 0 26px; scale: 0.94; }
  5%, 76% { opacity: 1; translate: 0 0; scale: 1; }
  82%, 100% { opacity: 0; translate: 0 -20px; scale: 0.97; }
}

.ag-top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.ag-top b {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #cfe3f7;
}

/* the agent: a small orb that pulses while it works */
.ag-orb {
  position: relative;
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a7f3e6, #14b8a6);
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.8);
}
.ag-orb::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(94, 234, 212, 0.7);
  opacity: 0;
  animation: agOrb 12s ease-out infinite;
  animation-delay: var(--d);
}
@keyframes agOrb {
  0%, 10% { opacity: 0; transform: scale(0.8); }
  14% { opacity: 0.9; transform: scale(0.9); }
  26% { opacity: 0; transform: scale(1.9); }
  28% { opacity: 0.9; transform: scale(0.9); }
  40% { opacity: 0; transform: scale(1.9); }
  42% { opacity: 0.9; transform: scale(0.9); }
  54% { opacity: 0; transform: scale(1.9); }
  100% { opacity: 0; }
}

.ag-card p {
  margin: 0 0 12px;
  font-size: 0.93rem;
  font-weight: 500;
  line-height: 1.3;
  color: #ffffff;
}

.ag-bot { display: flex; align-items: center; gap: 12px; }

.ag-track {
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
}
.ag-track i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #3b82f6, #2dd4bf);
  transform-origin: left center;
  transform: scaleX(0);
  animation: agFill 12s ease-in-out infinite backwards;
  animation-delay: var(--d);
}
@keyframes agFill {
  0%, 9% { transform: scaleX(0); }
  58%, 100% { transform: scaleX(1); }
}

/* status: Queued, then Working, then the result */
.ag-stat { position: relative; width: 84px; height: 22px; flex: none; }
.ag-stat span {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  opacity: 0;
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
  animation-delay: var(--d);
}
.ag-stat .q { background: rgba(255, 255, 255, 0.16); color: #d6e3f2; animation-name: agQ; }
.ag-stat .w { background: rgba(59, 130, 246, 0.35); color: #dbeafe; animation-name: agW; }
.ag-stat .d { background: #14b8a6; color: #ffffff; animation-name: agD; }

@keyframes agQ { 0%, 9% { opacity: 1; } 12%, 100% { opacity: 0; } }
@keyframes agW { 0%, 10% { opacity: 0; } 14%, 56% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes agD {
  0%, 58% { opacity: 0; transform: scale(0.8); }
  63% { opacity: 1; transform: scale(1.12); }
  67%, 100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 1280px) {
  .ag-col { width: 226px; }
  .ag-card { padding: 12px 14px 13px; }
}

@media (max-width: 1060px) {
  .fx-agents-feed { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-card { opacity: 1; animation: none; }
  .ag-orb::after { animation: none; }
  .ag-track i { animation: none; transform: scaleX(1); }
  .ag-stat span { animation: none; opacity: 0; }
  .ag-stat .d { opacity: 1; }
}

/* Design & UX hero: no photo, the page's own deep blue instead */
.pp-hero.cat-bg.no-photo {
  background: linear-gradient(155deg, #071a3f 0%, #0b2a63 100%);
}

/* ==========================================================================
   Service pages, "Why ScoreLabs Inc": four statements, one lit at a time
   ========================================================================== */
.wm-ready .svc-why { display: none; }

.wm {
  max-width: 1040px;
  margin: 10px auto 0;
  border-top: 1px solid rgba(30, 64, 175, 0.14);
}

.wm-row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 300px;
  align-items: center;
  column-gap: 28px;
  min-height: 128px;
  padding: 24px 6px;
  border-bottom: 1px solid rgba(30, 64, 175, 0.14);
  cursor: default;
  outline: none;
}

.wm-ic {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #e6edf7;
  color: #9db0c9;
  font-size: 1.3rem;
  transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wm-t {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: rgba(11, 27, 58, 0.26);
  transition: color 0.5s ease;
}

/* the marker: a highlight over the full height of the words, line by line */
.wm-txt {
  padding: 0.05em 0.16em;
  margin: 0 -0.16em;
  border-radius: 0.16em;
  background: linear-gradient(90deg, rgba(20, 184, 166, 0.36), rgba(30, 64, 175, 0.2)) no-repeat 0 50% / 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.3s ease;
}

.wm-w { display: inline-block; }

.wm-d {
  margin: 0;
  padding-left: 20px;
  border-left: 2px solid rgba(20, 184, 166, 0.55);
  font-size: 1rem;
  line-height: 1.65;
  color: #4b5b75;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.wm-row:hover .wm-t,
.wm-row.on .wm-t { color: #0b1b3a; }

.wm-row.on .wm-ic {
  background: linear-gradient(135deg, #1e40af, #14b8a6);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(20, 184, 166, 0.3);
  transform: scale(1.06);
}

.wm-row.on .wm-txt { background-size: 100% 100%; transition: background-size 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; }

.wm-row.on .wm-w { animation: wmRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--k) * 70ms); }
@keyframes wmRise { from { opacity: 0.25; transform: translateY(0.3em); } to { opacity: 1; transform: none; } }

.wm-row.on .wm-d {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease 0.35s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.wm .yr { font-variant-numeric: tabular-nums; }

@media (max-width: 960px) {
  .wm-row { grid-template-columns: 56px minmax(0, 1fr); row-gap: 10px; min-height: 0; padding: 22px 4px; }
  .wm-d {
    grid-column: 2;
    max-height: 0;
    overflow: hidden;
    padding-left: 16px;
    transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.4s ease;
  }
  .wm-row.on .wm-d { max-height: 150px; }
}

@media (max-width: 560px) {
  .wm-row { grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; }
  .wm-ic { width: 46px; height: 46px; border-radius: 14px; font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-row.on .wm-txt { background-size: 100% 100%; transition: none; }
  .wm-row.on .wm-w { animation: none; }
  .wm-row.on .wm-ic { transform: none; }
}

/* --------------------------------------------------------------------------
   Category pages, services section: phones and small tablets
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* the stage grows with its content instead of having a fixed height */
  .svc-stage {
    display: grid;
    min-height: 0;
    border-radius: 24px;
  }

  .svc-panel {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    padding: 30px 24px 92px;
  }

  .svc-ic {
    flex: none;
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    border-radius: 17px;
    font-size: 1.35rem;
  }

  .svc-panel h3 { font-size: 1.55rem; }
  .svc-panel p { max-width: none; margin-bottom: 22px; font-size: 1rem; }

  .svc-go { padding: 12px 20px; }

  .svc-blob { width: 280px; height: 280px; right: -90px; top: -110px; }

  .svc-num { font-size: 4.4rem; right: 18px; bottom: 12px; -webkit-text-stroke-width: 1.2px; }

  /* easy-to-tap rows */
  .svc-row { min-height: 54px; padding: 12px 4px; grid-template-columns: 38px 1fr 22px; }
  .svc-row:hover,
  .svc-row.on { padding-left: 12px; }
  .svc-t { font-size: 1.08rem; }
}

@media (max-width: 420px) {
  .svc-panel { padding: 26px 20px 86px; }
  .svc-panel h3 { font-size: 1.4rem; }
  .svc-num { font-size: 3.8rem; }
}

/* ---- phones: the hero animation gets its own band below the buttons ---- */
.cat-fx-m { display: none; }

@media (max-width: 900px) {
  .pp-hero.cat-bg { padding-bottom: 290px; }

  /* every animation sits in a 250px band at the bottom of the hero, clear of the text and buttons */
  .cat-fx-d { display: none; }

  .cat-fx-m {
    display: flex;
    top: auto;
    bottom: 0;
    height: 250px;
    inset: auto 0 0 0;
    align-items: center;
    padding: 0 6px;
  }

  .cat-fx-m svg { width: 100%; height: 100%; }

  /* AI & ML: the two gyroscopes */
  .fx-aiml { top: auto; bottom: 0; height: 250px; inset: auto 0 0 0; }
  .fx-aiml .gy.big { width: 214px; right: auto; left: 50%; margin-left: -107px; top: 16px; }
  .fx-aiml .gy.small { width: 92px; left: 6%; right: auto; bottom: 16px; top: auto; }

  /* AI Agents: two columns of task cards */
  .fx-agents-feed { display: block; top: auto; bottom: 0; height: 250px; inset: auto 0 0 0; }
  .ag-col.r { display: none; }
  .ag-col.l { left: 50%; right: auto; width: min(88%, 340px); transform: translateX(-50%); padding: 12px 0; justify-content: space-around; }
  .ag-card:nth-child(3) { display: none; }
  .ag-card { --ry: 0deg; padding: 13px 15px 14px; border-radius: 15px; }
  .ag-card p { font-size: 0.88rem; margin-bottom: 10px; }
  .ag-top b { font-size: 0.74rem; }
  .ag-stat { width: 78px; height: 21px; }
  .ag-stat span { font-size: 0.66rem; }
}

@media (max-width: 640px) {
  .pp-hero.cat-bg { padding-bottom: 270px; }
}

/* Phones and small tablets: no hero animation, just the photo (hero height back to normal) */
@media (max-width: 900px) {
  .cat-fx,
  .cat-fx-m,
  .fx-aiml,
  .fx-agents-feed { display: none; }

  .pp-hero.cat-bg { padding-bottom: 150px; }
}

@media (max-width: 640px) {
  .pp-hero.cat-bg { padding-bottom: 96px; }
}