/* ============================================================
   Mediaology — Services pages styles
   Used by /services.html, /services/{category}.html,
   and /services/{category}/{service}.html
   ============================================================ */

/* ============================================================
   SERVICES HUB — Category cards
   ============================================================ */
.services-hub-cards {
  background: var(--surface-white);
  color: var(--text-on-light-primary);
  padding: var(--section-py) 0;
}
.services-hub-cards__intro {
  max-width: 760px;
  margin: 0 auto var(--space-16);
  text-align: center;
}
.services-hub-cards__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-4);
}
.services-hub-cards__eyebrow::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--brand-primary);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
}
.services-hub-cards__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}
.services-hub-cards__subtitle {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-on-light-secondary);
}
.services-hub-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}
.service-category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-near-black);
  color: var(--brand-white);
  padding: var(--space-12);
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  min-height: 380px;
  isolation: isolate;
  transition: transform var(--duration-slow) var(--ease-out);
}
.service-category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 80% 100%, rgba(236, 26, 100, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 0% 0%, rgba(173, 20, 79, 0.18) 0%, transparent 55%);
  z-index: -1;
  transition: opacity var(--duration-base) var(--ease-out);
}
.service-category-card:hover {
  transform: translateY(-4px);
}
.service-category-card:hover::before {
  opacity: 1.4;
}
.service-category-card__num {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}
.service-category-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.service-category-card__body {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-secondary);
  margin-bottom: var(--space-8);
}
.service-category-card__list {
  margin-bottom: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.service-category-card__list li {
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  color: var(--text-on-dark-tertiary);
  position: relative;
  padding-left: var(--space-3);
}
.service-category-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--brand-primary);
  border-radius: 50%;
  transform: translateY(-50%);
}
.service-category-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--brand-white);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}
.service-category-card__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--brand-white);
  transition: transform var(--duration-base) var(--ease-out);
}
.service-category-card:hover .service-category-card__cta-arrow {
  transform: translateX(4px);
}
.service-category-card__cta-arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 900px) {
  .services-hub-cards__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .service-category-card { padding: var(--space-8); min-height: 0; }
}

/* ============================================================
   SERVICES HUB — "Why us" benefits row
   ============================================================ */
.services-hub-benefits {
  background: var(--surface-near-black);
  color: var(--brand-white);
  padding: var(--section-py) 0;
}
.services-hub-benefits__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin-bottom: var(--space-12);
  max-width: 720px;
}
.services-hub-benefits__title .text-pink { color: var(--brand-primary); }
.services-hub-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
.benefit-tile {
  padding: var(--space-8) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.benefit-tile__icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  color: var(--brand-primary);
}
.benefit-tile__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.benefit-tile__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.benefit-tile__body {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-secondary);
}
@media (max-width: 900px) {
  .services-hub-benefits__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ============================================================
   CATEGORY PAGE — Stats / animated chart section
   ============================================================ */
.category-stats {
  background: var(--surface-white);
  color: var(--text-on-light-primary);
  padding: var(--section-py) 0 var(--space-12);
}
.category-stats__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-16);
  align-items: center;
}
.category-stats__copy h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}
.category-stats__copy p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-on-light-secondary);
  margin-bottom: var(--space-6);
}

/* Animated bar chart */
.category-chart {
  background: var(--surface-near-black);
  color: var(--brand-white);
  border-radius: 24px;
  padding: var(--space-10);
  position: relative;
  overflow: hidden;
}
.category-chart::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 80% 100%, rgba(236, 26, 100, 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.category-chart__title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-2);
}
.category-chart__subtitle {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-8);
  position: relative;
}
.category-chart__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
}
.chart-row {
  display: grid;
  grid-template-columns: 110px 1fr 60px;
  align-items: center;
  gap: var(--space-4);
}
.chart-row__label {
  font-size: var(--fs-caption);
  color: var(--text-on-dark-secondary);
  letter-spacing: 0.02em;
}
.chart-row__bar-wrap {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.chart-row__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%);
  border-radius: 999px;
  width: 0;
  transition: width 1.6s var(--ease-out);
}
.chart-row__value {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--brand-white);
  text-align: right;
}
.category-chart__footnote {
  font-size: var(--fs-caption);
  color: var(--text-on-dark-tertiary);
  margin-top: var(--space-6);
  font-style: italic;
}

@media (max-width: 900px) {
  .category-stats__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .chart-row { grid-template-columns: 90px 1fr 56px; gap: var(--space-3); }
}

/* ============================================================
   CATEGORY PAGE — 8-card sub-service grid
   ============================================================ */
.category-services {
  background: var(--surface-white);
  color: var(--text-on-light-primary);
  padding: var(--space-12) 0;
  border-top: 1px solid var(--surface-card-border);
}
.category-services__intro {
  margin-bottom: var(--space-12);
  max-width: 720px;
}
.category-services__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.category-services__subtitle {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-on-light-secondary);
}
.category-services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
/* Column-based stagger: each row animates with the same 0/80/160/240ms
   cadence as row 1 instead of continuing to add delay per card. Without
   this, the global fade-up-stagger pushes cards 5-6 to 320-400ms, making
   row 2 visibly lag behind row 1. */
.category-services__grid.fade-up-stagger.is-visible > *:nth-child(4n+1) { transition-delay: 0ms; }
.category-services__grid.fade-up-stagger.is-visible > *:nth-child(4n+2) { transition-delay: 80ms; }
.category-services__grid.fade-up-stagger.is-visible > *:nth-child(4n+3) { transition-delay: 160ms; }
.category-services__grid.fade-up-stagger.is-visible > *:nth-child(4n)   { transition-delay: 240ms; }
.subservice-card {
  background: var(--surface-white);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
  color: var(--text-on-light-primary);
  display: flex;
  flex-direction: column;
  min-height: 240px;
  transition: border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
  position: relative;
}
.subservice-card:hover {
  border-color: var(--brand-primary);
  transform: translateY(-2px);
}
.subservice-card__icon {
  width: 36px;
  height: 36px;
  color: var(--brand-primary);
  margin-bottom: var(--space-4);
}
.subservice-card__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.subservice-card__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.subservice-card__body {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-on-light-secondary);
  margin-bottom: var(--space-4);
}
.subservice-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--brand-primary);
  letter-spacing: 0.02em;
}
.subservice-card__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-base) var(--ease-out);
}
.subservice-card:hover .subservice-card__cta-arrow { transform: translateX(3px); }
.subservice-card__cta-arrow svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1100px) {
  .category-services__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .category-services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .category-services__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SUB-SERVICE PAGE — Hero with bleed image
   ============================================================ */
.subservice-hero {
  background: var(--surface-white);
  padding: 100px 0 0;
  position: relative;
}
.subservice-hero__inner {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-20) var(--space-12);
  background-color: var(--surface-near-black);
  background-size: cover;
  background-position: center;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.4) 100%),
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(56, 100, 255, 0.5) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 70% 70%, rgba(236, 26, 100, 0.45) 0%, transparent 60%),
    linear-gradient(135deg, #0A0A2A 0%, #2A0820 100%);
}
.subservice-hero__content {
  max-width: 920px;
  color: var(--brand-white);
  position: relative;
}
.subservice-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}
.subservice-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: var(--fw-medium);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.subservice-hero__subtitle {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
  margin: 0 auto;
}

/* Three feature columns below the hero */
.subservice-features {
  background: var(--surface-white);
  padding: var(--space-12) 0;
}
.subservice-features__inner {
  background: #F5F5F7;
  border-radius: 24px;
  padding: var(--space-10);
  position: relative;
  z-index: 2;
}
.subservice-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
}
.feature-col {
  display: flex;
  flex-direction: column;
}
.feature-col__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-2);
}
.feature-col__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: 1.15;
  margin-bottom: var(--space-4);
}
.feature-col__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

/* Animated stat ring (SVG-based) */
.stat-ring {
  width: 140px;
  height: 140px;
  position: relative;
}
.stat-ring__bg,
.stat-ring__fg {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
}
.stat-ring__bg {
  stroke: rgba(0, 0, 0, 0.08);
}
.stat-ring__fg {
  stroke: url(#stat-ring-gradient);
  transform: rotate(-90deg);
  transform-origin: center;
  stroke-dasharray: 0 999;
  transition: stroke-dasharray 1.6s var(--ease-out);
}
.stat-ring__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: var(--fw-medium);
  color: var(--text-on-light-primary);
}
.feature-col__icon {
  width: 48px;
  height: 48px;
  color: var(--brand-primary);
}
.feature-col__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.feature-col__caption {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-on-light-secondary);
}

@media (max-width: 900px) {
  .subservice-features__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .subservice-hero__inner { padding: var(--space-12) var(--space-6); min-height: 400px; }
}

/* ============================================================
   SUB-SERVICE PAGE — Description block
   ============================================================ */
.subservice-description {
  background: var(--surface-white);
  padding: var(--space-12) 0 var(--section-py);
  border-top: 1px solid var(--surface-card-border);
}
.subservice-description__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.subservice-description__inner {
  max-width: 100%;
}
.subservice-description__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}
.subservice-description__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}
.subservice-description__intro {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-on-light-primary);
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  background: #FDF1F5;
  border-left: 3px solid var(--brand-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.subservice-description__body p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-on-light-secondary);
  margin-bottom: var(--space-4);
}

/* Visual on the right side: animated growth chart */
.subservice-description__visual {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--surface-near-black);
  border-radius: 24px;
  overflow: hidden;
  padding: var(--space-8);
}
.subservice-description__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(236, 26, 100, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.growth-chart {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.growth-chart__title {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
}
.growth-chart__metric {
  position: absolute;
  top: 28px;
  left: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  color: var(--brand-white);
}
.growth-chart__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.growth-chart__grid-line {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}
.growth-chart__axis-label {
  fill: rgba(255, 255, 255, 0.4);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.growth-chart__line {
  fill: none;
  stroke: var(--brand-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2.4s var(--ease-out);
  filter: drop-shadow(0 0 8px rgba(236, 26, 100, 0.6));
}
.growth-chart.is-visible .growth-chart__line {
  stroke-dashoffset: 0;
}
.growth-chart__area {
  fill: url(#growth-gradient);
  opacity: 0;
  transition: opacity 1.2s var(--ease-out) 1.2s;
}
.growth-chart.is-visible .growth-chart__area {
  opacity: 0.6;
}
.growth-chart__dot {
  fill: var(--brand-white);
  stroke: var(--brand-primary);
  stroke-width: 3;
  opacity: 0;
  transform-origin: center;
  transition: opacity 0.4s var(--ease-out);
}
.growth-chart.is-visible .growth-chart__dot { opacity: 1; }
.growth-chart.is-visible .growth-chart__dot--1 { transition-delay: 0.4s; }
.growth-chart.is-visible .growth-chart__dot--2 { transition-delay: 0.8s; }
.growth-chart.is-visible .growth-chart__dot--3 { transition-delay: 1.2s; }
.growth-chart.is-visible .growth-chart__dot--4 { transition-delay: 1.6s; }
.growth-chart.is-visible .growth-chart__dot--5 { transition-delay: 2.0s; }
.growth-chart.is-visible .growth-chart__dot--6 { transition-delay: 2.4s; }
.growth-chart__pulse {
  fill: var(--brand-primary);
  opacity: 0;
}
.growth-chart.is-visible .growth-chart__pulse {
  animation: chart-pulse 2s ease-out 2.6s infinite;
}
@keyframes chart-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3); opacity: 0; }
}

@media (max-width: 900px) {
  .subservice-description__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .subservice-description__visual { aspect-ratio: 4 / 3; padding: var(--space-6); }
}

/* ============================================================
   METRIC BARS — Type B (alt to growth chart)
   Stacked horizontal bars that fill on scroll with counters.
   Lives inside .subservice-description__visual.
   ============================================================ */
.metric-bars {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
.metric-bars__title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
}
.metric-bars__metric {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  color: var(--brand-white);
  margin-top: 4px;
  margin-bottom: var(--space-6);
}
.metric-bars__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
  justify-content: center;
}
.metric-bar { display: flex; flex-direction: column; gap: 8px; }
.metric-bar__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.metric-bar__label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.metric-bar__value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: var(--fw-medium);
  color: var(--brand-white);
}
.metric-bar__track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}
.metric-bar__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brand-primary) 0%, #FF4682 100%);
  border-radius: 4px;
  transition: width 1.4s var(--ease-out);
  box-shadow: 0 0 12px rgba(236, 26, 100, 0.45);
}
.metric-bars.is-visible .metric-bar:nth-child(1) .metric-bar__fill { width: var(--w, 0%); transition-delay: 0.0s; }
.metric-bars.is-visible .metric-bar:nth-child(2) .metric-bar__fill { width: var(--w, 0%); transition-delay: 0.2s; }
.metric-bars.is-visible .metric-bar:nth-child(3) .metric-bar__fill { width: var(--w, 0%); transition-delay: 0.4s; }
.metric-bars.is-visible .metric-bar:nth-child(4) .metric-bar__fill { width: var(--w, 0%); transition-delay: 0.6s; }

/* ============================================================
   METRIC DONUTS — Type C (alt to growth chart)
   3 donut rings each with a labeled target percentage.
   ============================================================ */
.metric-donuts {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
.metric-donuts__title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
}
.metric-donuts__metric {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  color: var(--brand-white);
  margin-top: 4px;
  margin-bottom: var(--space-8);
}
.metric-donuts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  flex: 1;
  align-items: center;
  justify-items: center;
  padding-bottom: 28px;
}
.metric-donut {
  position: relative;
  width: 100%;
  max-width: 130px;
  aspect-ratio: 1;
}
.metric-donut svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.metric-donut__bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 8;
}
.metric-donut__fg {
  fill: none;
  stroke: var(--brand-primary);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.6s var(--ease-out);
  filter: drop-shadow(0 0 6px rgba(236, 26, 100, 0.45));
}
.metric-donut__value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: var(--fw-medium);
  color: var(--brand-white);
}
.metric-donut__label {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  text-align: center;
}
@media (max-width: 600px) {
  .metric-donut__label { font-size: 9px; }
}

/* ============================================================
   METRIC KPIs — Type D (alt to growth chart)
   2x2 tile grid of large animated counter numbers.
   ============================================================ */
.metric-kpis {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
.metric-kpis__title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
}
.metric-kpis__metric {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  color: var(--brand-white);
  margin-top: 4px;
  margin-bottom: var(--space-6);
}
.metric-kpis__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  flex: 1;
}
.metric-kpi {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}
.metric-kpi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 3px;
  background: var(--brand-primary);
  box-shadow: 0 0 8px rgba(236, 26, 100, 0.55);
}
.metric-kpi__value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: var(--fw-medium);
  color: var(--brand-white);
  line-height: 1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.metric-kpi__label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.metric-kpis.is-visible .metric-kpi__value { opacity: 1; transform: translateY(0); }
.metric-kpis.is-visible .metric-kpi:nth-child(1) .metric-kpi__value { transition-delay: 0.0s; }
.metric-kpis.is-visible .metric-kpi:nth-child(2) .metric-kpi__value { transition-delay: 0.15s; }
.metric-kpis.is-visible .metric-kpi:nth-child(3) .metric-kpi__value { transition-delay: 0.3s; }
.metric-kpis.is-visible .metric-kpi:nth-child(4) .metric-kpi__value { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  .growth-chart__line { stroke-dashoffset: 0 !important; transition: none; }
  .growth-chart__area { opacity: 0.6 !important; transition: none; }
  .growth-chart__dot { opacity: 1 !important; transition: none; }
  .growth-chart__pulse { animation: none; }
}

/* ============================================================
   SUB-SERVICE PAGE — Deliverables grid
   ============================================================ */
.subservice-deliverables {
  background: var(--surface-near-black);
  color: var(--brand-white);
  padding: var(--section-py) 0;
}
.subservice-deliverables__intro {
  margin-bottom: var(--space-12);
  max-width: 720px;
}
.subservice-deliverables__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}
.subservice-deliverables__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.subservice-deliverables__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
/* Same column-based stagger trick as category-services__grid: each row
   restarts at 0ms/80ms/160ms instead of stacking on top of row 1's delay. */
.subservice-deliverables__grid.fade-up-stagger.is-visible > *:nth-child(3n+1) { transition-delay: 0ms; }
.subservice-deliverables__grid.fade-up-stagger.is-visible > *:nth-child(3n+2) { transition-delay: 80ms; }
.subservice-deliverables__grid.fade-up-stagger.is-visible > *:nth-child(3n)   { transition-delay: 160ms; }
.deliverable-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: background-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.deliverable-card:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-2px);
}
.deliverable-card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  color: var(--brand-primary);
}
.deliverable-card__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.deliverable-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.deliverable-card__body {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-secondary);
}

@media (max-width: 900px) {
  .subservice-deliverables__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SUB-SERVICE PAGE — Benefits + contact split
   ============================================================ */
.subservice-benefits {
  background: var(--surface-white);
  padding: var(--section-py) 0;
}
.subservice-benefits__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-16);
  align-items: start;
}
.subservice-benefits__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin-bottom: var(--space-8);
}
.subservice-benefits__title .text-pink { color: var(--brand-primary); }
.subservice-benefits__cta {
  margin-top: var(--space-8);
}
.subservice-contact-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.contact-card {
  background: var(--surface-near-black);
  color: var(--brand-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-base) var(--ease-out);
}
.contact-card:hover { transform: translateY(-2px); }
.contact-card__icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-3);
  color: var(--brand-primary);
}
.contact-card__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.contact-card__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.contact-card__body {
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-secondary);
}

@media (max-width: 900px) {
  .subservice-benefits__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .subservice-contact-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   INDUSTRIES PAGE — sub-service-style sections, one per industry,
   with a sticky-ish TOC bar and a niche-pill aside.
   ============================================================ */
.industry-toc {
  background: #FFFFFF;
  border-bottom: 1px solid var(--surface-card-border);
  padding: var(--space-4) 0;
  position: sticky;
  top: 64px;
  z-index: 5;
}
.industry-toc__row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.industry-toc__row::-webkit-scrollbar { display: none; }
.industry-toc__link {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--surface-card-border);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-on-light-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.industry-toc__link:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-white);
}

.industry-section {
  background: var(--surface-white);
  padding: var(--space-20) 0;
  border-bottom: 1px solid var(--surface-card-border);
  scroll-margin-top: 130px;
}
.industry-section:nth-child(even) { background: var(--surface-off-white); }

.industry-section__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-12);
}
.industry-section__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}
.industry-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw + 0.5rem, 2.6rem);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-light-primary);
  margin-bottom: var(--space-3);
}
.industry-section__tagline {
  font-size: var(--fs-body-lg);
  color: var(--text-on-light-secondary);
  line-height: 1.55;
}

.industry-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-10);
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}
.industry-section__copy {
  font-family: var(--font-body);
}
.industry-section__desc {
  font-size: var(--fs-body-md);
  line-height: 1.7;
  color: var(--text-on-light-primary);
  margin-bottom: var(--space-8);
}
.industry-section__how-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  margin-bottom: var(--space-4);
  color: var(--text-on-light-primary);
}
.industry-section__how-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
}
.industry-section__how-list li {
  position: relative;
  padding: 10px 0 10px 28px;
  border-bottom: 1px solid var(--surface-card-border);
  font-size: var(--fs-body-md);
  line-height: 1.55;
  color: var(--text-on-light-primary);
}
.industry-section__how-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 10px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary);
  color: var(--brand-white);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}
.industry-section__how-list li:last-child { border-bottom: none; }
.industry-section__cta { margin-top: var(--space-4); }

.industry-section__niches {
  background: #FFFFFF;
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: sticky;
  top: 130px;
}
.industry-section:nth-child(even) .industry-section__niches { background: var(--surface-off-white); }
.industry-section__niches-label {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-on-light-secondary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--surface-card-border);
}
.industry-section__niches-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.industry-niche {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(236, 26, 100, 0.08);
  color: var(--brand-primary);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  scroll-margin-top: 130px;
}

@media (max-width: 900px) {
  .industry-section__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .industry-section__niches { position: static; }
}
@media (max-width: 600px) {
  .industry-toc { top: 56px; }
  .industry-section { padding: var(--space-16) 0; }
}

/* ============================================================
   INDUSTRIES — hub page category cards + category-page niche
   cards. Both share the lift-on-hover pattern from the projects
   tiles but tuned for an editorial/portfolio feel.
   ============================================================ */
/* Scoped to section.industries-hub so it can never bleed onto
   <body class="industries-hub"> (which would push the page-header
   below the fixed nav and leave the nav floating over the off-white
   body background — invisible white-on-white text). */
section.industries-hub {
  background: var(--surface-off-white);
  padding: var(--space-16) 0 var(--space-24);
}
.industries-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--space-6);
  max-width: 1200px;
  margin: 0 auto;
}
.industry-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.industry-card:hover {
  transform: translateY(-3px);
  border-color: rgba(236, 26, 100, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
.industry-card__head { margin-bottom: var(--space-5); }
.industry-card__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}
.industry-card__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: var(--fw-medium);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-light-primary);
  margin-bottom: var(--space-3);
}
.industry-card__tagline {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-on-light-secondary);
}
.industry-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-5);
}
.industry-card__pill {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(236, 26, 100, 0.08);
  color: var(--brand-primary);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.industry-card__pill--more {
  background: var(--surface-off-white);
  color: var(--text-on-light-secondary);
}
.industry-card__cta {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--brand-primary);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--duration-base) var(--ease-out);
}
.industry-card:hover .industry-card__cta { gap: 10px; }

/* Niche cards (rendered on the category landing page). Smaller,
   denser grid than the hub cards. */
.industry-niches-section {
  background: var(--surface-white);
  padding: var(--space-12) 0 var(--space-20);
}
.industry-niches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  max-width: 1100px;
  margin: 0 auto;
}
.industry-niche-card {
  display: block;
  background: var(--surface-off-white);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.industry-niche-card:hover {
  transform: translateY(-2px);
  background: rgba(236, 26, 100, 0.04);
  border-color: rgba(236, 26, 100, 0.4);
}
.industry-niche-card__inner { display: flex; flex-direction: column; gap: var(--space-2); }
.industry-niche-card__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-light-primary);
}
.industry-niche-card__tagline {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-on-light-secondary);
  margin: 0;
}
.industry-niche-card__cta {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--duration-base) var(--ease-out);
}
.industry-niche-card:hover .industry-niche-card__cta { gap: 10px; }

/* ============================================================
   PRICING PAGE — used by /pricing.html
   Card grid + comparison table for the Monthly Advertising
   Packages, the Website packages, and the add-on list.
   Page is intentionally not linked from the main nav/footer —
   accessible only by knowing the URL.
   ============================================================ */
.pricing-section { padding: var(--space-16) 0; }
.pricing-section--alt { background: var(--surface-off-white); }

.pricing-section__head {
  max-width: 760px;
  margin: 0 auto var(--space-10);
  text-align: center;
}
.pricing-section__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}
.pricing-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-light-primary);
  margin-bottom: var(--space-3);
}
.pricing-section__subtitle {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-on-light-secondary);
}

.pricing-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pricing-grid--five {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1380px) { .pricing-grid--five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 880px)  { .pricing-grid--five { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .pricing-grid--five { grid-template-columns: 1fr; } }

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E8E8EA;
  border-radius: 16px;
  padding: var(--space-6) var(--space-5) var(--space-5);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}
.pricing-card--popular {
  border: 2px solid var(--brand-primary);
  box-shadow: 0 16px 40px rgba(236, 26, 100, 0.12);
}
.pricing-card--popular::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-primary);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.pricing-card__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--text-on-light-primary);
  margin-bottom: 4px;
}
.pricing-card__tagline {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-on-light-tertiary);
  margin-bottom: var(--space-4);
  min-height: 36px;
}
.pricing-card__price-row { margin-bottom: var(--space-2); }
.pricing-card__price {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--brand-primary);
}
.pricing-card__price-suffix {
  font-size: 0.9rem;
  color: var(--text-on-light-tertiary);
  margin-left: 4px;
}
.pricing-card__weekly {
  font-size: 12px;
  color: var(--text-on-light-tertiary);
  margin-bottom: var(--space-3);
}
.pricing-card__bundles {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-on-light-tertiary);
  padding: var(--space-3) 0;
  border-top: 1px dashed #E8E8EA;
  border-bottom: 1px dashed #E8E8EA;
  margin-bottom: var(--space-3);
}
.pricing-card__bundles strong { color: var(--text-on-light-secondary); font-weight: var(--fw-medium); }
.pricing-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  flex: 1;
}
.pricing-card__list li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-on-light-secondary);
  border-bottom: 1px solid #F0F0F2;
}
.pricing-card__list li:last-child { border-bottom: none; }
.pricing-card__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--brand-primary);
  font-weight: var(--fw-bold);
}
.pricing-card__list li.is-disabled {
  color: var(--text-on-light-tertiary);
  text-decoration: line-through;
}
.pricing-card__list li.is-disabled::before { content: '—'; color: #C8C8CC; }
.pricing-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  background: var(--brand-primary);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-medium);
  text-decoration: none;
  border-radius: 99px;
  transition: background-color var(--duration-base) var(--ease-out);
}
.pricing-card__cta:hover { background: var(--brand-primary-dark, #AD144F); color: #FFFFFF; }

/* Web package cards reuse .pricing-card with a few tweaks */
.pricing-card--web .pricing-card__price-row::before {
  content: 'Starting at ';
  font-size: 11px;
  color: var(--text-on-light-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 2px;
}

/* Comparison table */
.pricing-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  border: 1px solid #E8E8EA;
  background: #FFFFFF;
}
.pricing-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-size: 13px;
}
.pricing-table th, .pricing-table td {
  padding: 12px 16px;
  text-align: center;
  border-bottom: 1px solid #F0F0F2;
}
.pricing-table thead th {
  position: sticky;
  top: 0;
  background: #FFFFFF;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  color: var(--text-on-light-primary);
  font-size: 14px;
  border-bottom: 2px solid #E8E8EA;
  padding-top: 16px;
  padding-bottom: 12px;
}
.pricing-table thead th:first-child { text-align: left; min-width: 240px; }
.pricing-table thead th .ptable-tier-tag {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-regular);
  color: var(--text-on-light-tertiary);
  margin-top: 2px;
  text-transform: none;
  letter-spacing: 0;
}
.pricing-table thead th .ptable-price {
  display: block;
  font-size: 15px;
  color: var(--brand-primary);
  margin-top: 4px;
}
.pricing-table tbody td:first-child {
  text-align: left;
  font-weight: var(--fw-medium);
  color: var(--text-on-light-primary);
}
.pricing-table .ptable-section td {
  background: var(--surface-off-white);
  text-align: left;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  padding: 10px 16px;
}
.pricing-table .ptable-yes { color: var(--brand-primary); font-weight: var(--fw-bold); }
.pricing-table .ptable-no { color: #C8C8CC; }
.pricing-table .ptable-num { color: var(--text-on-light-primary); font-weight: var(--fw-medium); }
.pricing-table .ptable-text { color: var(--text-on-light-secondary); font-size: 12px; }

/* Add-ons grid */
.pricing-addons-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.pricing-addon-group {
  background: #FFFFFF;
  border: 1px solid #E8E8EA;
  border-radius: 12px;
  padding: var(--space-5);
}
.pricing-addon-group__title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid #F0F0F2;
}
.pricing-addon-group ul { list-style: none; padding: 0; margin: 0; }
.pricing-addon-group li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 0;
  font-size: 13px;
  color: var(--text-on-light-secondary);
  border-bottom: 1px solid #F8F8FA;
}
.pricing-addon-group li:last-child { border-bottom: none; }
.pricing-addon-group li .name { flex: 1; }
.pricing-addon-group li .price {
  font-weight: var(--fw-medium);
  color: var(--text-on-light-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pricing-bandstrip {
  background: var(--surface-off-white);
  padding: var(--space-12) 0;
  text-align: center;
}
.pricing-bandstrip h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-3);
  color: var(--text-on-light-primary);
}
.pricing-bandstrip p {
  max-width: 640px;
  margin: 0 auto var(--space-5);
  color: var(--text-on-light-secondary);
}
.pricing-disclaimer {
  text-align: center;
  font-size: 12px;
  color: var(--text-on-light-tertiary);
  margin-top: var(--space-6);
}

/* Answer block — a question heading and one liftable paragraph, sitting
   between the hero and the feature columns.

   Spans the same content width as every other section on the page. It was
   previously capped at 68ch, which rendered ~686px against the 1185px
   grey card directly below it and read as a half-width column. The
   paragraphs are 30-55 words, so at full width they set as two lines —
   the line-length objection to a wide measure does not bite at this
   length. */
.subservice-answer {
  background: var(--surface-white);
  padding: var(--space-12) 0 0;
}
.subservice-answer__q {
  font-family: var(--font-display);
  /* One step below the section titles: this is an answer, not the page's
     main claim, and it should not compete with the h1 above it. */
  font-size: clamp(1.6rem, 2.6vw + 0.4rem, 2.25rem);
  font-weight: var(--fw-medium);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-light-primary);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
.subservice-answer__a {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-on-light-secondary);
  margin: 0;
}


/* ============================================================
   CASE STUDIES
   These pages reuse the subservice furniture, but two things do not
   carry over cleanly.

   A service page pairs each prose block with a visual in a two-column
   grid, so the text gets a sensible measure for free. A case study has
   no paired visual, so the same markup let paragraphs run the full
   1200px container — roughly twice a comfortable line, and the reason
   the page read as a wall rather than as an article.

   The scope list inherited nothing: .subservice-description__body
   styles p, not li, so the service links rendered as unstyled black
   text with the bullets suppressed.
   ============================================================ */

/* Scope of work: buttons, not tags.

   Every one of these was already a link to the service that did the work,
   but a pill reads as a label, so nobody clicked one. As tiles carrying a
   name and an arrow they read as what they are: the way into that service. */
.case-study-scope {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: var(--space-4);
  max-width: none;
}
.case-study-scope a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 68px;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-white);
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  color: var(--text-on-light-primary);
  text-decoration: none;
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}
.case-study-scope a:hover,
.case-study-scope a:focus-visible {
  border-color: rgba(236, 26, 100, 0.45);
  box-shadow: 0 14px 30px -18px rgba(236, 26, 100, 0.45);
  transform: translateY(-2px);
}
.case-study-scope__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(236, 26, 100, 0.08);
  color: var(--brand-primary);
  transition:
    background var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}
.case-study-scope__arrow svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.case-study-scope a:hover .case-study-scope__arrow,
.case-study-scope a:focus-visible .case-study-scope__arrow {
  background: rgba(236, 26, 100, 0.16);
  transform: translateX(3px);
}
/* A case study headline is a sentence, not a service name.

   .subservice-hero__title is clamp(3rem, 7vw, 6rem) uppercase, which suits
   "SEO Optimization" and makes "Growing an Apparel Brand Into a $936K
   Storefront" fill the entire hero at 96px. Same treatment, sized for a
   line of prose rather than a two-word label. */
.case-study-hero .subservice-hero__title {
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: 1.08;
}
.case-study-hero .subservice-hero__subtitle {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* Case study body sections.

   The situation and the approach were two identical slabs of centred prose on
   white, one after the other, with nothing to tell them apart or to pull the
   eye down the page. Every service page solves this by pairing prose with a
   visual, but a confidential case study has no imagery to pair it with, so the
   structure has to carry it instead.

   An editorial split: the heading holds the left rail and stays put while the
   prose scrolls past it, which gives the reader an anchor and gives the page
   the asymmetry it was missing. The approach then breaks into numbered steps,
   because it is a sequence of decisions and reads far better as one. */
.case-study-split {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: var(--space-12);
  align-items: start;
}
.case-study-split__heading {
  position: sticky;
  top: 112px;
}
.case-study-split__heading .subservice-description__eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}
.case-study-split__body {
  max-width: 62ch;
}

/* Numbered steps for the approach. */
.case-study-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-10);
}
.case-study-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: start;
}
.case-study-step__num {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--brand-primary);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.case-study-step__text {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-on-light-secondary);
  margin: 0;
}

/* A timeline is a fact about the engagement, not a paragraph. */
.case-study-meta {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--surface-card-border);
  font-size: var(--fs-body-sm);
  color: var(--text-on-light-secondary);
}
.case-study-meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  color: var(--text-on-light-primary);
  margin-bottom: var(--space-1);
}

@media (max-width: 900px) {
  .case-study-split {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .case-study-split__heading { position: static; }
}

/* The result, in two boxes.

   .about-results__grid is a two-column grid and a case study renders one
   card into it, so the figures hugged the left edge with half the section
   empty beside them. They are two different things to read anyway: the
   numbers, and the reporting period, source and caveat that qualify them.
   A box each, and the grid is full. */
.case-study-figures__lead {
  padding: var(--space-5) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.case-study-figures__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.6vw, 3.25rem);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--brand-primary);
}
.case-study-figures__label {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-on-dark-tertiary);
}
.case-study-figures__rest {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.case-study-source__list {
  margin: 0;
  padding: 0;
}
.case-study-source__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.case-study-source__row dt {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-on-dark-tertiary);
}
.case-study-source__row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  color: var(--brand-white);
  text-align: right;
}
.case-study-source .case-card__body {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* The industry cross-link: a call to action, not a footnote.

   It used to be the tail of a sentence, which is where a link goes to be
   ignored. It is now the same shape as the AI-Enhanced Workflows card on
   the home page: its own surface, an icon, and a destination you can see.
   The effects are rewritten here rather than borrowed from home.css. A
   case study page has no business depending on the home page stylesheet
   happening to be loaded. */
.case-study-cta {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-10);
  padding: var(--space-7) var(--space-8);
  background:
    radial-gradient(circle at 0% 0%, rgba(236, 26, 100, 0.06) 0%, transparent 35%),
    radial-gradient(circle at 100% 100%, rgba(173, 20, 79, 0.05) 0%, transparent 40%),
    linear-gradient(135deg, #FFFFFF 0%, #FFF7FB 60%, #FFEEF6 100%);
  border: 1px solid rgba(236, 26, 100, 0.14);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition:
    transform var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}
.case-study-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(236, 26, 100, 0.08) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 0.9s var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.case-study-cta:hover,
.case-study-cta:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(236, 26, 100, 0.32);
  box-shadow: 0 22px 48px -22px rgba(236, 26, 100, 0.32);
}
.case-study-cta:hover::before {
  transform: translateX(100%);
}
.case-study-cta__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.case-study-cta__orb--1 {
  width: 120px;
  height: 120px;
  left: 6%;
  top: -30px;
  background: radial-gradient(circle, rgba(236, 26, 100, 0.5) 0%, transparent 70%);
  animation: csOrbA 9s ease-in-out infinite;
}
.case-study-cta__orb--2 {
  width: 90px;
  height: 90px;
  right: 14%;
  bottom: -25px;
  background: radial-gradient(circle, rgba(173, 20, 79, 0.42) 0%, transparent 70%);
  animation: csOrbB 11s ease-in-out infinite;
}
@keyframes csOrbA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(18px, 14px) scale(1.06); }
}
@keyframes csOrbB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-22px, -10px) scale(0.94); }
}
.case-study-cta__icon {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
  background: rgba(236, 26, 100, 0.10);
  transition: background var(--duration-base) var(--ease-out);
}
.case-study-cta:hover .case-study-cta__icon {
  background: rgba(236, 26, 100, 0.16);
}
.case-study-cta__icon svg {
  position: relative;
  z-index: 2;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.case-study-cta__ring {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 1.5px solid rgba(236, 26, 100, 0.5);
  opacity: 0;
  animation: csRing 2.6s ease-out infinite;
}
.case-study-cta__ring--2 {
  animation-delay: 1.3s;
}
@keyframes csRing {
  0%   { transform: scale(1);    opacity: 0.6; }
  80%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
.case-study-cta__text {
  position: relative;
  z-index: 1;
}
.case-study-cta__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 6px;
}
.case-study-cta__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-primary);
  animation: csDot 1.8s ease-out infinite;
}
@keyframes csDot {
  0%   { box-shadow: 0 0 0 0   rgba(236, 26, 100, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(236, 26, 100, 0); }
  100% { box-shadow: 0 0 0 0   rgba(236, 26, 100, 0); }
}
.case-study-cta__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-on-light-primary);
  margin-bottom: 6px;
}
.case-study-cta__body {
  display: block;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-on-light-secondary);
  max-width: 58ch;
}
.case-study-cta__go {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  color: var(--brand-white);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: background var(--duration-base) var(--ease-out);
}
.case-study-cta:hover .case-study-cta__go,
.case-study-cta:focus-visible .case-study-cta__go {
  background: var(--brand-primary-dark);
}
.case-study-cta__go-arrow {
  display: inline-flex;
  transition: transform var(--duration-base) var(--ease-out);
}
.case-study-cta__go-arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.case-study-cta:hover .case-study-cta__go-arrow {
  transform: translateX(4px);
}

@media (max-width: 720px) {
  .case-study-cta {
    grid-template-columns: auto 1fr;
    padding: var(--space-6);
    gap: var(--space-4);
  }
  .case-study-cta__icon { grid-row: 1; }
  .case-study-cta__text { grid-row: 1; grid-column: 2; }
  .case-study-cta__go { grid-row: 2; grid-column: 1 / -1; justify-self: start; }
}

/* On a phone the icon was taking 60px off a 311px card and squeezing the
   headline into two lines beside it. Give the text the whole width. */
@media (max-width: 560px) {
  .case-study-cta {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .case-study-cta__icon,
  .case-study-cta__text,
  .case-study-cta__go {
    grid-row: auto;
    grid-column: auto;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-study-cta__orb--1,
  .case-study-cta__orb--2,
  .case-study-cta__ring,
  .case-study-cta__dot {
    animation: none !important;
  }
}