/* =============================================================
   CONCORD — widgets.css
   Styles for the Concord Elementor widgets.
   Direct port of the source site's hero/stats/sectors blocks.
   ============================================================= */

/* =============================================================
   HERO — base shared between full / page / sector
   ============================================================= */
.cph-hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  --cph-hero-accent: var(--cph-blue-d);
}

/* ============ FULL MODE (home page hero) ============ */
.cph-hero-full {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 22px 120px;
}

.cph-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--cph-black-2);
  transition: transform 0.5s var(--cph-ease-out);
}
.cph-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  will-change: opacity, transform;
}
.cph-hero-slide.is-active {
  animation: cph-kenburns 8s var(--cph-ease-out) forwards;
}
@keyframes cph-kenburns {
  0%   { opacity: 0; transform: scale(1.18); }
  10%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1.0); }
}
.cph-hero-slide.is-leaving {
  animation: cph-slide-leaving 1.4s var(--cph-ease-out) forwards;
}
@keyframes cph-slide-leaving {
  to { opacity: 0; transform: scale(1.04); }
}

/* Overlays */
.cph-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.65) 100%),
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.5) 100%);
}

.cph-hero-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.5) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 50%, transparent 0%, #000 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 50%, transparent 0%, #000 100%);
}

.cph-hero .cph-fx-circuit {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
  width: 100%;
  height: 100%;
}
.cph-hero-full .cph-fx-circuit { opacity: 0.4; }

/* Content column */
.cph-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
}
.cph-hero-full .cph-hero-content { padding: 0; }

/* Eyebrow pill (full) + page eyebrow + sector tag */
.cph-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
  margin-bottom: 28px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(12px);
  animation: cph-fade-up 1s var(--cph-ease-out) 0.3s forwards;
}
.cph-hero-eyebrow .cph-dot {
  width: 6px; height: 6px;
  background: var(--cph-green);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--cph-green);
  animation: cph-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes cph-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

/* Word-rise headline */
.cph-hero-headline {
  font-size: clamp(48px, 8.4vw, 116px);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.045em;
  color: #fff;
  margin: 0 0 28px;
  max-width: 940px;
}
.cph-hero-page .cph-hero-headline {
  font-size: clamp(48px, 8vw, 112px);
  line-height: 0.98;
  color: var(--cph-ink);
  margin: 0 auto 28px;
  max-width: 880px;
}
.cph-hero-sector .cph-hero-headline {
  font-size: clamp(48px, 8vw, 104px);
  line-height: 1.0;
}

.cph-hero-headline .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.05;
  padding: 0 0.02em;
}
.cph-hero-headline .word .inner {
  display: inline-block;
  transform: translateY(110%);
  animation: cph-word-rise 1.2s var(--cph-ease) forwards;
}
.cph-hero-headline .light .inner {
  color: rgba(255,255,255,0.55);
  font-weight: 400;
}
.cph-hero-page .cph-hero-headline .light .inner {
  color: var(--cph-mute);
  font-weight: 400;
}
@keyframes cph-word-rise { to { transform: translateY(0); } }

/* Per-word stagger — replicates source's 0.5–1.05s delays. */
.cph-hero-headline .word:nth-child(1)  .inner { animation-delay: 0.5s; }
.cph-hero-headline .word:nth-child(2)  .inner { animation-delay: 0.6s; }
.cph-hero-headline .word:nth-child(3)  .inner { animation-delay: 0.7s; }
.cph-hero-headline .word:nth-child(4)  .inner { animation-delay: 0.85s; }
.cph-hero-headline .word:nth-child(5)  .inner { animation-delay: 0.95s; }
.cph-hero-headline .word:nth-child(6)  .inner { animation-delay: 1.05s; }
.cph-hero-headline .word:nth-child(7)  .inner { animation-delay: 1.15s; }
.cph-hero-headline .word:nth-child(8)  .inner { animation-delay: 1.25s; }
.cph-hero-headline .word:nth-child(9)  .inner { animation-delay: 1.35s; }
.cph-hero-headline .word:nth-child(10) .inner { animation-delay: 1.45s; }

/* Lede */
.cph-hero-lede {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  color: rgba(255,255,255,0.82);
  max-width: 560px;
  margin: 0 0 36px;
  letter-spacing: -0.012em;
  opacity: 0;
  transform: translateY(16px);
  animation: cph-fade-up 1.2s var(--cph-ease) 1.4s forwards;
}
.cph-hero-page .cph-hero-lede {
  color: var(--cph-ink-2);
  font-size: clamp(19px, 1.6vw, 24px);
  max-width: 660px;
}
@keyframes cph-fade-up { to { opacity: 1; transform: translateY(0); } }

/* CTAs */
.cph-hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 64px;
  opacity: 0;
  transform: translateY(16px);
  animation: cph-fade-up 1.2s var(--cph-ease) 1.6s forwards;
}
.cph-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--cph-r-pill);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.012em;
  transition: all 0.3s var(--cph-ease);
  text-decoration: none;
}
.cph-hero-cta-primary {
  background: var(--cph-hero-accent);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 8px 28px -8px rgba(41,151,255,0.5);
}
.cph-hero-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 12px 32px -8px rgba(41,151,255,0.7);
}
.cph-hero-cta-ghost {
  background: rgba(255,255,255,0.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.cph-hero-cta-ghost:hover { background: rgba(255,255,255,0.18); }

.cph-hero-page .cph-hero-cta-primary { background: var(--cph-blue); }
.cph-hero-page .cph-hero-cta-primary:hover { background: var(--cph-blue-h); }
.cph-hero-page .cph-hero-cta-ghost {
  background: var(--cph-bg-2);
  color: var(--cph-ink);
  border-color: var(--cph-hair);
  backdrop-filter: none;
}
.cph-hero-page .cph-hero-cta-ghost:hover { background: var(--cph-bg-3); }

/* Dot indicators */
.cph-hero-dots {
  position: absolute;
  bottom: 32px;
  left: 0; right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  animation: cph-fade-up 1s var(--cph-ease) 2s forwards;
}
.cph-hero-dot {
  width: 36px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: background 0.3s;
  border: none;
  padding: 0;
}
.cph-hero-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}
.cph-hero-dot.is-active::after {
  animation: cph-dot-fill 6s linear forwards;
}
@keyframes cph-dot-fill { to { transform: scaleX(1); } }

/* Hero meta strip (full mode — horizontal row) */
.cph-hero-meta {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(16px);
  animation: cph-fade-up 1.2s var(--cph-ease) 1.8s forwards;
}
.cph-hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cph-hero-meta-k {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cph-hero-meta-v {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.015em;
}
.cph-hero-page .cph-hero-meta-k { color: var(--cph-mute); }
.cph-hero-page .cph-hero-meta-v { color: var(--cph-ink); }

/* ============ PAGE MODE ============ */
.cph-hero-page {
  padding: 140px 22px 100px;
  background: linear-gradient(180deg, var(--cph-bg) 0%, #F0F0F2 100%);
  color: var(--cph-ink);
  min-height: auto;
}
.cph-hero-page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, #000 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, #000 100%);
  pointer-events: none;
  opacity: 0.6;
}
.cph-hero-page .cph-hero-content {
  text-align: left;
  max-width: 1024px;
}
.cph-hero-page.cph-hero-center .cph-hero-content {
  text-align: center;
}
.cph-hero-page.cph-hero-center .cph-hero-headline,
.cph-hero-page.cph-hero-center .cph-hero-lede,
.cph-hero-page.cph-hero-center .cph-breadcrumbs {
  margin-left: auto;
  margin-right: auto;
}
.cph-hero-page.cph-hero-center .cph-breadcrumbs ol {
  justify-content: center;
}
.cph-hero-page.cph-hero-center .cph-hero-ctas {
  justify-content: center;
}

.cph-hero-page .cph-page-eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--cph-blue);
  margin-bottom: 18px;
}
.cph-hero-page .cph-hero-headline .word .inner { animation-delay: 0.2s; }
.cph-hero-page .cph-hero-headline .word:nth-child(2) .inner { animation-delay: 0.32s; }
.cph-hero-page .cph-hero-headline .word:nth-child(3) .inner { animation-delay: 0.44s; }
.cph-hero-page .cph-hero-headline .word:nth-child(4) .inner { animation-delay: 0.56s; }
.cph-hero-page .cph-hero-headline .word:nth-child(5) .inner { animation-delay: 0.68s; }
.cph-hero-page .cph-hero-headline .word:nth-child(6) .inner { animation-delay: 0.80s; }
.cph-hero-page .cph-hero-headline .word:nth-child(7) .inner { animation-delay: 0.92s; }
.cph-hero-page .cph-hero-headline .word:nth-child(8) .inner { animation-delay: 1.04s; }
.cph-hero-page .cph-hero-lede {
  animation-delay: 0.8s;
}

/* ============ SECTOR MODE ============ */
.cph-hero-sector {
  min-height: 72vh;
  padding: 140px 22px 100px;
  color: var(--cph-paper);
  background: var(--cph-black);
  display: flex;
  align-items: flex-end;
}
.cph-hero-sector-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cph-hero-sector-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  animation: cph-sector-hero-in 1.6s var(--cph-ease) 0.1s forwards;
}
@keyframes cph-sector-hero-in {
  to { opacity: 0.6; transform: scale(1); }
}
.cph-hero-sector-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 30%, rgba(10,10,12,0.9) 100%),
    radial-gradient(ellipse at 70% 20%, rgba(41,151,255,0.18), transparent 60%);
  pointer-events: none;
}
.cph-hero-sector .cph-hero-grid-overlay {
  opacity: 0.16;
}
.cph-hero-sector .cph-fx-circuit { opacity: 0.55; }

.cph-hero-sector .cph-hero-content {
  max-width: 1240px;
}
.cph-hero-sector-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
}

.cph-sector-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 24px;
}
.cph-sector-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--cph-blue-d);
  color: var(--cph-black);
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: -8px;
}

.cph-hero-sector .cph-hero-headline {
  color: #fff;
}
.cph-hero-sector .cph-hero-headline .light .inner {
  color: rgba(255,255,255,0.55);
  font-weight: 400;
}
.cph-hero-sector .cph-hero-lede {
  font-size: clamp(18px, 1.5vw, 22px);
  max-width: 540px;
  color: rgba(255,255,255,0.82);
  animation-delay: 0.8s;
}

.cph-hero-sector-meta {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 0 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.cph-hero-sector-meta .cph-hero-meta-item {
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}
.cph-hero-sector-meta .cph-hero-meta-k {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cph-hero-sector-meta .cph-hero-meta-v {
  font-size: 16px;
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.012em;
}

@media (max-width: 900px) {
  .cph-hero-sector {
    min-height: auto;
    padding: 110px 22px 70px;
    align-items: stretch;
  }
  .cph-hero-sector-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ============ BREADCRUMBS ============ */
.cph-breadcrumbs {
  margin-bottom: 28px;
  font-size: 13px;
  letter-spacing: -0.005em;
}
.cph-breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.cph-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cph-breadcrumbs a { color: var(--cph-mute); }
.cph-breadcrumbs a:hover { color: var(--cph-ink); }
.cph-breadcrumbs .current { color: var(--cph-ink); }
.cph-breadcrumbs .sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--cph-hair);
  display: inline-block;
}
.cph-hero-sector .cph-breadcrumbs a,
.cph-hero-sector .cph-breadcrumbs { color: rgba(255,255,255,0.7); }
.cph-hero-sector .cph-breadcrumbs .current { color: #fff; }
.cph-hero-sector .cph-breadcrumbs .sep { background: rgba(255,255,255,0.3); }

/* Mobile hero adjustments */
@media (max-width: 640px) {
  .cph-hero-full { padding: 100px 22px 140px; min-height: 92vh; }
  .cph-hero-meta { gap: 24px; }
  .cph-hero-meta .cph-hero-meta-v { font-size: 15px; }
}

/* =============================================================
   STATS BAND
   ============================================================= */
.cph-stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--cph-bg);
  --cph-stat-accent: var(--cph-blue);
}
.cph-stat-band-bordered {
  border-top: 1px solid var(--cph-hair);
  border-bottom: 1px solid var(--cph-hair);
}
.cph-stat-band-cols-1 { grid-template-columns: 1fr; }
.cph-stat-band-cols-2 { grid-template-columns: 1fr 1fr; }
.cph-stat-band-cols-3 { grid-template-columns: repeat(3, 1fr); }

.cph-stat-band-cell {
  padding: 56px 32px;
  border-right: 1px solid var(--cph-hair);
  text-align: left;
}
.cph-stat-band-cell:last-child { border-right: none; }

.cph-stat-band-n {
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--cph-ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: baseline;
}
.cph-stat-band-suffix {
  color: var(--cph-stat-accent);
  margin-left: 2px;
}
.cph-stat-band-l {
  font-size: 14px;
  color: var(--cph-mute);
  letter-spacing: -0.005em;
  line-height: 1.4;
  max-width: 220px;
}

@media (max-width: 900px) {
  .cph-stat-band,
  .cph-stat-band-cols-3,
  .cph-stat-band-cols-4 { grid-template-columns: 1fr 1fr; }
  .cph-stat-band-cell:nth-child(2) { border-right: none; }
  .cph-stat-band-cell:nth-child(1),
  .cph-stat-band-cell:nth-child(2) { border-bottom: 1px solid var(--cph-hair); }
}
@media (max-width: 540px) {
  .cph-stat-band,
  .cph-stat-band-cols-2,
  .cph-stat-band-cols-3,
  .cph-stat-band-cols-4 { grid-template-columns: 1fr; }
  .cph-stat-band-cell { border-right: none; border-bottom: 1px solid var(--cph-hair); padding: 36px 24px; }
  .cph-stat-band-cell:last-child { border-bottom: none; }
}

/* =============================================================
   SECTOR CARD GRID
   ============================================================= */
.cph-sectors { padding: 120px 0; }

.cph-section-head {
  text-align: center;
  margin-bottom: 56px;
}
.cph-section-head .cph-display-2 { max-width: 800px; margin: 0 auto; }
.cph-section-head .cph-display-2 .light { font-weight: 400; color: var(--cph-mute); }

.cph-sectors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.cph-sec-card {
  background: var(--cph-bg-2);
  border-radius: var(--cph-r-card);
  padding: 40px;
  transition: background 0.3s, transform 0.4s var(--cph-ease);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.cph-sec-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0,113,227,0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
}
.cph-sec-card:hover { background: var(--cph-bg-3); transform: translateY(-2px); }
.cph-sec-card:hover::before { opacity: 1; }

.cph-sec-card-wide { grid-column: 1 / -1; }

.cph-sec-card-text { position: relative; z-index: 1; }

.cph-sec-card-num {
  font-size: 14px;
  color: var(--cph-mute);
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
  letter-spacing: -0.005em;
}
.cph-sec-card-title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--cph-ink);
  margin: 0 0 8px;
}
.cph-sec-card-desc {
  font-size: 15px;
  color: var(--cph-mute);
  line-height: 1.45;
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 540px;
}
.cph-sec-card-arrow {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cph-bg);
  display: grid;
  place-items: center;
  color: var(--cph-ink);
  transition: all 0.3s var(--cph-ease);
  z-index: 1;
}
.cph-sec-card-arrow svg {
  width: 14px; height: 14px;
  display: block;
}
.cph-sec-card:hover .cph-sec-card-arrow {
  background: var(--cph-blue);
  color: #fff;
  transform: rotate(-45deg);
}

@media (max-width: 768px) {
  .cph-sectors-grid { grid-template-columns: 1fr; }
  .cph-sec-card-wide { grid-column: auto; }
  .cph-sectors { padding: 80px 0; }
  .cph-sec-card { padding: 28px; }
  .cph-sec-card-title { font-size: 22px; }
}

/* =============================================================
   STAGE 2 — Bento Highlights, Service Block, Capabilities Grid,
   Project Showcase + Modal
   ============================================================= */

/* =============================================================
   BENTO HIGHLIGHTS
   ============================================================= */
.cph-bento-section { padding: 120px 0; }

.cph-section-head-bento {
  text-align: left;
  max-width: 900px;
  margin: 0 auto 56px;
}
.cph-section-head-bento .cph-display-2 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.07;
  letter-spacing: -0.035em;
  color: var(--cph-ink);
  margin: 0;
}
.cph-section-head-bento .cph-display-2 .light {
  color: var(--cph-mute);
  font-weight: 400;
}
.cph-bento-head-link {
  font-size: 0.7em;
  font-weight: 400;
  letter-spacing: -0.022em;
  color: var(--cph-blue);
  text-decoration: none;
  white-space: nowrap;
}
.cph-bento-head-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.cph-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 12px;
}

.cph-b-card {
  background: var(--cph-bg-2);
  border-radius: var(--cph-r-card);
  padding: 36px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 360px;
}
.cph-b-dark { background: var(--cph-black); color: var(--cph-paper); }
.cph-b-tint-blue { background: linear-gradient(135deg, #E8F4FF, #D6E9FF); }

.cph-b-card .cph-b-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--cph-blue);
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}
.cph-b-dark .cph-b-label { color: var(--cph-blue-d); }

.cph-b-card .cph-b-title {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--cph-ink);
  margin-bottom: 12px;
}
.cph-b-large .cph-b-title { font-size: clamp(28px, 3vw, 44px); max-width: 460px; margin-bottom: 16px; }
.cph-b-dark .cph-b-title { color: var(--cph-paper); }

.cph-b-card .cph-b-copy {
  font-size: 16px;
  line-height: 1.4;
  color: var(--cph-ink-2);
  letter-spacing: -0.01em;
  max-width: 440px;
}
.cph-b-dark .cph-b-copy { color: var(--cph-paper-d); }

.cph-b-large  { grid-column: span 4; grid-row: span 2; }
.cph-b-small  { grid-column: span 2; }
.cph-b-medium { grid-column: span 3; }

.cph-b-visual {
  flex: 1;
  position: relative;
  margin: 16px -8px 0;
  min-height: 140px;
  display: flex;
  align-items: flex-end;
}
.cph-b-large .cph-b-visual { min-height: 220px; align-items: stretch; }
.cph-b-visual > svg,
.cph-b-visual > img { width: 100%; height: 100%; object-fit: contain; }
.cph-b-visual-progress-line,
.cph-b-visual-bar-chart { min-height: 60px; }
.cph-b-visual-split-panels { min-height: 80px; }

/* Split-panels preset (rendered as <div> not <svg>) */
.cph-fx-split {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 0 8px;
}
.cph-fx-split-card {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}
.cph-b-card:not(.cph-b-dark) .cph-fx-split-card {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}
.cph-fx-split-t {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.cph-fx-split-s {
  font-size: 11px;
  color: var(--cph-paper-d);
  margin-top: 2px;
}
.cph-b-card:not(.cph-b-dark) .cph-fx-split-s { color: var(--cph-mute); }

@media (max-width: 900px) {
  .cph-bento { grid-template-columns: repeat(2, 1fr); }
  .cph-b-large,
  .cph-b-medium,
  .cph-b-small { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 540px) {
  .cph-b-card { padding: 28px; min-height: 300px; }
  .cph-b-card .cph-b-title { font-size: 22px; }
}

/* =============================================================
   SERVICE BLOCK (feature)
   ============================================================= */
.cph-feature { padding: 120px 0; }
.cph-feature-light { background: var(--cph-bg-2); }
.cph-feature-dark  { background: var(--cph-black); color: var(--cph-paper); }

.cph-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.cph-feature-reverse .cph-feature-grid { direction: rtl; }
.cph-feature-reverse .cph-feature-grid > * { direction: ltr; }

.cph-feature-compact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 880px;
  margin: 0 auto;
}

.cph-feature-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cph-blue);
  margin-bottom: 20px;
}
.cph-feature-dark .cph-feature-eyebrow { color: var(--cph-blue-d); }
.cph-feature-eyebrow-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--cph-blue);
  color: #fff;
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}
.cph-feature-dark .cph-feature-eyebrow-num { background: var(--cph-blue-d); color: var(--cph-black); }

.cph-feature-headline {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  color: var(--cph-ink);
}
.cph-feature-dark .cph-feature-headline { color: var(--cph-paper); }
.cph-feature-headline .light {
  font-weight: 400;
  color: var(--cph-mute);
}
.cph-feature-dark .cph-feature-headline .light { color: var(--cph-paper-d); }

.cph-feature-body {
  font-size: 19px;
  line-height: 1.5;
  color: var(--cph-ink-2);
  letter-spacing: -0.012em;
  max-width: 480px;
}
.cph-feature-body p { margin: 0 0 16px; }
.cph-feature-body p:last-child { margin-bottom: 0; }
.cph-feature-dark .cph-feature-body,
.cph-feature-dark .cph-feature-body p { color: var(--cph-paper-d); }

.cph-feature-bullets {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
}
.cph-feature-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cph-ink-2);
  letter-spacing: -0.005em;
}
.cph-feature-bullets strong {
  color: var(--cph-ink);
  font-weight: 600;
}
.cph-feature-dark .cph-feature-bullets li { color: var(--cph-paper-d); }
.cph-feature-dark .cph-feature-bullets strong { color: var(--cph-paper); }

.cph-feature-bullet-check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--cph-blue);
  color: #fff;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.cph-feature-dark .cph-feature-bullet-check { background: var(--cph-blue-d); color: var(--cph-black); }
.cph-feature-bullet-check svg { width: 12px; height: 12px; display: block; }

.cph-feature-ctas {
  margin-top: 28px;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.cph-feature-dark .cph-feature-ctas .cph-btn-link { color: var(--cph-blue-d); }

.cph-feature-vis {
  aspect-ratio: 1 / 1;
  border-radius: var(--cph-r-card);
  overflow: hidden;
  background: var(--cph-bg-3);
  position: relative;
}
.cph-feature-dark .cph-feature-vis { background: #141417; }
.cph-feature-vis > svg,
.cph-feature-vis > img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}

.cph-feature-status {
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.cph-feature-dark .cph-feature-status {
  background: rgba(20,20,23,0.85);
  color: var(--cph-paper);
}
.cph-feature-status-k {
  font-size: 11px;
  color: var(--cph-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cph-feature-status-v {
  font-size: 15px;
  font-weight: 500;
  color: var(--cph-ink);
}
.cph-feature-dark .cph-feature-status-v { color: var(--cph-paper); }
.cph-feature-status-tag {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cph-green);
  color: var(--cph-black);
}

@media (max-width: 900px) {
  .cph-feature { padding: 80px 0; }
  .cph-feature-grid { grid-template-columns: 1fr; gap: 48px; }
  .cph-feature-reverse .cph-feature-grid { direction: ltr; }
}

/* =============================================================
   CAPABILITIES GRID
   ============================================================= */
.cph-caps-section { padding: 96px 0; }

.cph-section-head-left { text-align: left; margin-bottom: 40px; max-width: 760px; }
.cph-section-head-left .cph-eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cph-blue);
  margin-bottom: 14px;
}
.cph-section-h2 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.03em;
  color: var(--cph-ink);
  margin: 0;
}
.cph-section-h2 .light { font-weight: 400; color: var(--cph-mute); }

.cph-caps-grid {
  display: grid;
  gap: 14px;
}
.cph-caps-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cph-caps-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cph-caps-cols-4 { grid-template-columns: repeat(4, 1fr); }

.cph-cap-tile {
  background: var(--cph-bg-2);
  border-radius: var(--cph-r-card);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 200px;
  transition: transform 0.4s var(--cph-ease), background 0.3s;
  text-decoration: none;
  color: inherit;
}
.cph-cap-tile:hover { transform: translateY(-4px); background: var(--cph-bg-3); }

.cph-cap-tile .cph-cap-ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--cph-ink);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cph-cap-tile .cph-cap-ico svg {
  width: 18px; height: 18px;
  stroke-width: 1.6;
}

.cph-cap-tile .cph-cap-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--cph-ink);
  margin: 0;
}
.cph-cap-tile .cph-cap-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--cph-ink-2);
  letter-spacing: -0.005em;
  margin: 0;
}

.cph-cap-num {
  font-size: 13px;
  font-weight: 500;
  color: var(--cph-mute);
  font-variant-numeric: tabular-nums;
}

.cph-cap-tile-numbered {
  min-height: 240px;
  padding: 32px;
  gap: 18px;
}
.cph-cap-tile-numbered .cph-cap-ico {
  width: 44px; height: 44px;
}
.cph-cap-tile-numbered .cph-cap-ico svg { width: 22px; height: 22px; }
.cph-cap-tile-numbered .cph-cap-title { font-size: 20px; }

.cph-cap-tile-method {
  position: relative;
  padding-bottom: 56px;
  cursor: pointer;
}
.cph-cap-tile-method .cph-cap-link {
  position: absolute;
  left: 24px;
  bottom: 24px;
  color: var(--cph-blue);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: transform 0.25s var(--cph-ease);
}
.cph-cap-tile-method:hover .cph-cap-link { transform: translateX(4px); }

@media (max-width: 1000px) {
  .cph-caps-cols-3,
  .cph-caps-cols-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .cph-caps-cols-2,
  .cph-caps-cols-3,
  .cph-caps-cols-4 { grid-template-columns: 1fr; }
}

/* =============================================================
   PROJECT SHOWCASE
   ============================================================= */
.cph-projects-showcase { padding: 96px 0; }

.cph-projects-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.cph-projects-head .cph-eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cph-blue);
  margin-bottom: 14px;
}

.cph-projects-grid {
  display: grid;
  gap: 24px;
}
.cph-projects-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cph-projects-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cph-projects-cols-4 { grid-template-columns: repeat(4, 1fr); }

.cph-projects-empty {
  text-align: center;
  padding: 60px 0;
  color: var(--cph-mute);
  font-size: 15px;
}

.cph-pc {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cph-bg-2);
  border-radius: var(--cph-r-card);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.5s var(--cph-ease), box-shadow 0.5s var(--cph-ease);
  outline: none;
}
.cph-pc:hover,
.cph-pc:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -24px rgba(0,0,0,0.18);
}
.cph-pc:focus-visible { box-shadow: 0 0 0 3px var(--cph-blue), 0 24px 50px -24px rgba(0,0,0,0.18); }

.cph-pc-cover {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background: var(--cph-ink);
}
.cph-pc-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--cph-ease);
}
.cph-pc:hover .cph-pc-cover img { transform: scale(1.06); }
.cph-pc-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

.cph-pc-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  z-index: 2;
}

.cph-pc-images {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  z-index: 2;
}
.cph-pc-images svg { width: 12px; height: 12px; }

.cph-pc-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cph-pc-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--cph-ink);
  margin: 0;
}
.cph-pc-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--cph-mute);
  letter-spacing: -0.005em;
  flex-wrap: wrap;
}
.cph-pc-meta-sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--cph-hair);
  align-self: center;
}
.cph-pc-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cph-blue);
  letter-spacing: -0.005em;
  margin-top: 4px;
}
.cph-pc:hover .cph-pc-cta { transform: translateX(3px); transition: transform 0.3s var(--cph-ease); }

@media (max-width: 1000px) {
  .cph-projects-cols-3,
  .cph-projects-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cph-projects-cols-2,
  .cph-projects-cols-3,
  .cph-projects-cols-4 { grid-template-columns: 1fr; gap: 18px; }
}

/* Editor placeholder for Modal Mount */
.cph-modal-mount-placeholder {
  border: 2px dashed var(--cph-hair);
  border-radius: 14px;
  padding: 24px;
  color: var(--cph-mute);
  background: var(--cph-bg-2);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.cph-modal-mount-placeholder strong { color: var(--cph-ink); display: inline-block; margin-bottom: 6px; }

/* =============================================================
   PROJECT MODAL
   ============================================================= */
.cph-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  pointer-events: none;
  visibility: hidden;
}
.cph-modal.is-open { visibility: visible; pointer-events: auto; }

.cph-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 16, 0.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  transition: opacity 0.4s var(--cph-ease);
}
.cph-modal.is-open .cph-modal-backdrop { opacity: 1; }

.cph-modal-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  max-height: calc(100vh - 32px);
  margin: 16px auto;
  background: var(--cph-bg);
  border-radius: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,0.5);
  transform: translateY(40px) scale(0.96);
  opacity: 0;
  transition: transform 0.55s var(--cph-ease), opacity 0.4s var(--cph-ease);
  scrollbar-width: thin;
}
.cph-modal.is-open .cph-modal-shell {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.cph-modal-shell::-webkit-scrollbar { width: 8px; }
.cph-modal-shell::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; }

.cph-modal-close {
  position: sticky;
  top: 16px;
  margin-left: auto;
  margin-right: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--cph-ink);
  cursor: pointer;
  z-index: 5;
  transition: all 0.2s var(--cph-ease);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.05);
  float: right;
}
.cph-modal-close:hover { background: var(--cph-ink); color: #fff; transform: rotate(90deg); }

.cph-modal-head {
  padding: 8px 40px 24px;
  clear: both;
}
.cph-modal-cat {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cph-blue);
  margin-bottom: 12px;
}
.cph-modal-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--cph-ink);
  margin: 0;
}

.cph-modal-carousel {
  position: relative;
  margin: 0 40px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--cph-ink);
  aspect-ratio: 16 / 10;
}
.cph-modal-stage {
  position: relative;
  width: 100%;
  height: 100%;
}
.cph-modal-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s var(--cph-ease), transform 0.7s var(--cph-ease);
  pointer-events: none;
}
.cph-modal-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.cph-modal-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.cph-modal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--cph-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.25s var(--cph-ease);
  z-index: 4;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  border: none;
}
.cph-modal-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.cph-modal-prev { left: 14px; }
.cph-modal-next { right: 14px; }

.cph-modal-counter {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  z-index: 4;
}

.cph-modal-thumbs-wrap { padding: 16px 40px 0; margin-top: 0; }
.cph-modal-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.cph-modal-thumbs::-webkit-scrollbar { height: 6px; }
.cph-modal-thumbs::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
.cph-modal-thumb {
  flex-shrink: 0;
  width: 90px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  background: var(--cph-bg-3);
  transition: all 0.25s var(--cph-ease);
  opacity: 0.6;
  padding: 0;
}
.cph-modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cph-modal-thumb:hover { opacity: 1; transform: translateY(-2px); }
.cph-modal-thumb.is-active { opacity: 1; border-color: var(--cph-blue); transform: translateY(-2px); }

.cph-modal-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 32px 40px 0;
  background: var(--cph-bg-2);
  border-radius: 14px;
  overflow: hidden;
}
.cph-modal-meta-cell {
  padding: 22px 24px;
  border-right: 1px solid var(--cph-hair);
}
.cph-modal-meta-cell:last-child { border-right: none; }
.cph-modal-meta-cell .cph-modal-meta-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cph-mute);
  margin-bottom: 8px;
}
.cph-modal-meta-cell .cph-modal-meta-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--cph-ink);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .cph-modal-meta { grid-template-columns: 1fr; margin: 24px 22px 0; }
  .cph-modal-meta-cell { border-right: none; border-bottom: 1px solid var(--cph-hair); padding: 16px 20px; }
  .cph-modal-meta-cell:last-child { border-bottom: none; }
}

.cph-modal-body {
  padding: 32px 40px 40px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cph-ink-2);
  letter-spacing: -0.005em;
  max-width: 760px;
}

@media (max-width: 740px) {
  .cph-modal-shell { margin: 0; max-height: 100vh; border-radius: 0; }
  .cph-modal-head { padding: 8px 22px 20px; }
  .cph-modal-carousel { margin: 0 22px; aspect-ratio: 4 / 3; }
  .cph-modal-arrow { width: 36px; height: 36px; }
  .cph-modal-prev { left: 10px; }
  .cph-modal-next { right: 10px; }
  .cph-modal-thumbs-wrap { padding: 14px 22px 0; }
  .cph-modal-thumb { width: 72px; }
  .cph-modal-body { padding: 24px 22px 32px; font-size: 15px; }
  .cph-modal-close { margin-right: 14px; top: 14px; }
}

body.cph-modal-open { overflow: hidden; }

/* =============================================================
   STAGE 3 — Projects-Filterable, Process Steps, Timeline,
   Affiliations, Leadership, Adjacent Sectors, CTA Banner,
   Testimonial Carousel, Capability Matrix.
   ============================================================= */

/* Common helpers */
.cph-section-head-center { text-align: center; margin-bottom: 56px; max-width: 760px; margin-left: auto; margin-right: auto; }
.cph-section-head-center .cph-eyebrow,
.cph-section-head-left   .cph-eyebrow,
.cph-section-head-dark   .cph-eyebrow-dark {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cph-blue);
  margin-bottom: 14px;
}
.cph-section-head-dark .cph-eyebrow-dark { color: var(--cph-blue-d); }
.cph-section-lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--cph-ink-2);
  letter-spacing: -0.005em;
  margin: 16px auto 0;
  max-width: 640px;
}
.cph-section-head-left  .cph-section-lede { margin-left: 0; margin-right: 0; }
.cph-section-lede-dark  { color: var(--cph-paper-d); }
.cph-section-h2-dark    { color: #fff; }
.cph-section-h2-dark .light { color: var(--cph-paper-d); }

/* =============================================================
   PROJECTS — Filterable grid (extends .cph-pc card from Stage 2)
   ============================================================= */
.cph-pf-section { padding: 24px 0 140px; }

.cph-pf-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 24px 0 40px;
}
.cph-pf-bar-sticky {
  position: sticky;
  top: 60px;
  z-index: 40;
  background: rgba(251, 251, 253, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  padding: 20px 0;
  margin-bottom: 32px;
}
.cph-pf-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--cph-r-pill);
  background: var(--cph-bg-2);
  color: var(--cph-ink-2);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.012em;
  border: 1px solid transparent;
  transition: all 0.3s var(--cph-ease);
  cursor: pointer;
}
.cph-pf-pill:hover { background: var(--cph-bg-3); color: var(--cph-ink); }
.cph-pf-pill-count {
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--cph-mute);
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.04);
  min-width: 22px;
  text-align: center;
  transition: all 0.3s var(--cph-ease);
}
.cph-pf-pill.is-active {
  background: var(--cph-ink);
  color: #fff;
}
.cph-pf-pill.is-active .cph-pf-pill-count {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
}

.cph-pf-grid {
  display: grid;
  gap: 24px;
}
.cph-pf-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cph-pf-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cph-pf-cols-4 { grid-template-columns: repeat(4, 1fr); }

.cph-pf-card { transition: transform 0.5s var(--cph-ease), box-shadow 0.5s var(--cph-ease), opacity 0.4s var(--cph-ease); }
.cph-pf-card.is-hidden { display: none; }
.cph-pf-card.is-fading { opacity: 0; transform: translateY(-12px) scale(0.98); }

.cph-pf-empty {
  text-align: center;
  padding: 80px 0;
  color: var(--cph-mute);
  font-size: 16px;
}

@media (max-width: 1000px) {
  .cph-pf-cols-3, .cph-pf-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cph-pf-bar-sticky { top: 60px; padding: 16px 0; }
  .cph-pf-bar { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 4px 22px 16px; margin: 0 -22px 16px; scrollbar-width: none; }
  .cph-pf-bar::-webkit-scrollbar { display: none; }
  .cph-pf-pill { flex-shrink: 0; }
  .cph-pf-cols-2, .cph-pf-cols-3, .cph-pf-cols-4 { grid-template-columns: 1fr; gap: 18px; }
}

/* =============================================================
   PROCESS STEPS
   ============================================================= */
.cph-process-section {
  padding: 96px 0;
  background: var(--cph-bg);
  border-top: 1px solid var(--cph-hair);
}
.cph-process-steps {
  display: grid;
  gap: 0;
  position: relative;
}
.cph-process-steps-3 { grid-template-columns: repeat(3, 1fr); }
.cph-process-steps-4 { grid-template-columns: repeat(4, 1fr); }
.cph-process-steps-5 { grid-template-columns: repeat(5, 1fr); }
.cph-process-steps-6 { grid-template-columns: repeat(6, 1fr); }
.cph-process-steps-7 { grid-template-columns: repeat(7, 1fr); }
.cph-process-steps::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 5%;
  right: 5%;
  height: 1.5px;
  background: var(--cph-hair);
  z-index: 0;
}
.cph-process-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 12px;
}
.cph-process-dot {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cph-bg);
  border: 1.5px solid var(--cph-hair);
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
  font-size: 22px;
  font-weight: 600;
  color: var(--cph-ink);
  letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums;
  position: relative;
  transition: all 0.4s var(--cph-ease);
}
.cph-process-step:hover .cph-process-dot {
  border-color: var(--cph-blue);
  background: var(--cph-blue);
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 0 0 8px rgba(0, 113, 227, 0.10);
}
.cph-process-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--cph-ink);
  margin-bottom: 6px;
}
.cph-process-desc {
  font-size: 13px;
  color: var(--cph-mute);
  line-height: 1.45;
  letter-spacing: -0.005em;
}
@media (max-width: 900px) {
  .cph-process-steps,
  .cph-process-steps-3,
  .cph-process-steps-4,
  .cph-process-steps-5,
  .cph-process-steps-6,
  .cph-process-steps-7 { grid-template-columns: 1fr; gap: 0; }
  .cph-process-steps::before { display: none; }
  .cph-process-step {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 20px;
    text-align: left;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--cph-hair);
  }
  .cph-process-step:last-child { border-bottom: none; }
  .cph-process-dot { margin: 0; }
}

/* =============================================================
   TIMELINE
   ============================================================= */
.cph-tl-section { padding: 96px 0; background: var(--cph-bg-2); }
.cph-tl {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}
.cph-tl::before {
  content: '';
  position: absolute;
  left: 100px;
  top: 0; bottom: 0;
  width: 1.5px;
  background: linear-gradient(180deg, transparent 0%, var(--cph-hair) 8%, var(--cph-hair) 92%, transparent 100%);
}
.cph-tl-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 48px;
  padding: 28px 0;
  position: relative;
}
.cph-tl-row::before {
  content: '';
  position: absolute;
  left: 96px;
  top: 38px;
  width: 9px;
  height: 9px;
  background: var(--cph-bg-2);
  border: 2px solid var(--cph-blue);
  border-radius: 50%;
  z-index: 1;
  transition: all 0.4s var(--cph-ease);
}
.cph-tl-row:hover::before {
  background: var(--cph-blue);
  transform: scale(1.3);
  box-shadow: 0 0 0 6px rgba(0,113,227,0.15);
}
.cph-tl-year {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--cph-blue);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 16px;
  padding-top: 32px;
}
.cph-tl-content { padding: 24px 0 24px 28px; }
.cph-tl-title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.022em;
  margin: 0 0 8px;
  color: var(--cph-ink);
}
.cph-tl-desc {
  font-size: 16px;
  line-height: 1.55;
  color: var(--cph-ink-2);
  letter-spacing: -0.005em;
  max-width: 540px;
  margin: 0;
}
@media (max-width: 700px) {
  .cph-tl::before { left: 12px; }
  .cph-tl-row { grid-template-columns: 24px 1fr; gap: 16px; padding: 20px 0; }
  .cph-tl-row::before { left: 8px; top: 28px; }
  .cph-tl-year {
    text-align: left;
    padding: 0;
    grid-column: 2;
    grid-row: 1;
    font-size: 13px;
    color: var(--cph-mute);
  }
  .cph-tl-content {
    grid-column: 2;
    grid-row: 2;
    padding: 4px 0 0 0;
  }
}

/* =============================================================
   AFFILIATIONS (dark section)
   ============================================================= */
.cph-aff-section {
  padding: 96px 0;
  background: var(--cph-black);
  color: var(--cph-paper);
  position: relative;
  overflow: hidden;
}
.cph-aff-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.cph-aff-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 30%, rgba(41,151,255,0.12), transparent 50%);
  pointer-events: none;
}
.cph-aff-section .cph-wrap-wide { position: relative; z-index: 1; }

.cph-aff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cph-union-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--cph-r-card);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: background 0.3s, border-color 0.3s, transform 0.4s var(--cph-ease);
}
.cph-union-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-4px);
}
.cph-union-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cph-blue-d);
}
.cph-union-dot {
  width: 6px; height: 6px;
  background: var(--cph-blue-d);
  border-radius: 50%;
}
.cph-union-name {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1;
  color: #fff;
}
.cph-union-full {
  font-size: 17px;
  color: var(--cph-paper);
  line-height: 1.5;
  letter-spacing: -0.012em;
  font-weight: 500;
}
.cph-union-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--cph-paper-d);
  letter-spacing: -0.005em;
  margin: 0;
}
.cph-union-stat {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.cph-union-stat-n {
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.cph-union-stat-l {
  font-size: 13px;
  color: var(--cph-paper-d);
  letter-spacing: -0.005em;
}

.cph-industry-card {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--cph-r-card);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.cph-industry-left { display: flex; flex-direction: column; gap: 4px; }
.cph-industry-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cph-paper-d);
}
.cph-industry-name {
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.012em;
}
.cph-industry-pos {
  font-size: 13px;
  color: var(--cph-paper-d);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .cph-aff-grid { grid-template-columns: 1fr; }
  .cph-union-card { padding: 32px 28px; }
  .cph-industry-card { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   LEADERSHIP CARDS
   ============================================================= */
.cph-leaders-section { padding: 96px 0; background: var(--cph-bg); }
.cph-leaders-grid { display: grid; gap: 16px; }
.cph-leaders-cols-2 { grid-template-columns: 1fr 1fr; }
.cph-leaders-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cph-leader-card {
  background: var(--cph-bg-2);
  border-radius: var(--cph-r-card);
  padding: 36px;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  align-items: start;
  transition: transform 0.4s var(--cph-ease), background 0.3s;
}
.cph-leader-card:hover { transform: translateY(-4px); background: var(--cph-bg-3); }
.cph-leader-avi {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cph-ink), #424245);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.025em;
  overflow: hidden;
  flex-shrink: 0;
}
.cph-leader-avi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cph-leader-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--cph-ink);
  margin: 0 0 4px;
}
.cph-leader-role {
  font-size: 13px;
  color: var(--cph-blue);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.cph-leader-bio {
  font-size: 15px;
  line-height: 1.55;
  color: var(--cph-ink-2);
  letter-spacing: -0.005em;
  margin: 0;
}
@media (max-width: 800px) {
  .cph-leaders-cols-2,
  .cph-leaders-cols-3 { grid-template-columns: 1fr; }
  .cph-leader-card { grid-template-columns: 60px 1fr; gap: 20px; padding: 28px; }
  .cph-leader-avi { width: 60px; height: 60px; font-size: 22px; }
}

/* =============================================================
   ADJACENT SECTORS
   ============================================================= */
.cph-adj-section {
  padding: 80px 0;
  background: var(--cph-bg-2);
  border-top: 1px solid var(--cph-hair);
}
.cph-adj-heading {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--cph-ink);
  margin: 0 0 28px;
}
.cph-adj-grid { display: grid; gap: 12px; }
.cph-adj-cols-2 { grid-template-columns: 1fr 1fr; }
.cph-adj-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cph-adj-cols-4 { grid-template-columns: repeat(4, 1fr); }
.cph-adj-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px;
  background: var(--cph-bg);
  border-radius: 14px;
  transition: background 0.3s, transform 0.4s var(--cph-ease), color 0.3s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.cph-adj-card:hover {
  background: var(--cph-ink);
  color: #fff;
  transform: translateY(-2px);
}
.cph-adj-name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.cph-adj-arrow {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--cph-bg-2);
  color: var(--cph-ink);
  display: grid;
  place-items: center;
  transition: all 0.3s var(--cph-ease);
}
.cph-adj-card:hover .cph-adj-arrow {
  background: var(--cph-blue-d);
  color: var(--cph-black);
  transform: rotate(-45deg);
}
@media (max-width: 800px) {
  .cph-adj-cols-3,
  .cph-adj-cols-4 { grid-template-columns: 1fr 1fr; }
  .cph-adj-section { padding: 56px 0; }
}
@media (max-width: 480px) {
  .cph-adj-cols-2,
  .cph-adj-cols-3,
  .cph-adj-cols-4 { grid-template-columns: 1fr; }
}

/* =============================================================
   CTA BANNER
   ============================================================= */
.cph-cta-banner {
  padding: 120px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cph-cta-banner-dark {
  background: var(--cph-black);
  color: var(--cph-paper);
}
.cph-cta-banner-light {
  background: var(--cph-bg-2);
  color: var(--cph-ink);
}
.cph-cta-banner-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center 30%, rgba(41,151,255,0.18), transparent 60%);
  pointer-events: none;
}
.cph-cta-banner-inner {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}
.cph-cta-banner-h2 {
  font-size: clamp(38px, 6vw, 76px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.04em;
  margin: 0 0 20px;
}
.cph-cta-banner-dark  .cph-cta-banner-h2 { color: #fff; }
.cph-cta-banner-light .cph-cta-banner-h2 { color: var(--cph-ink); }
.cph-cta-banner-h2 .light { font-weight: 400; }
.cph-cta-banner-dark  .cph-cta-banner-h2 .light { color: var(--cph-paper-d); }
.cph-cta-banner-light .cph-cta-banner-h2 .light { color: var(--cph-mute); }
.cph-cta-banner-p {
  font-size: 19px;
  line-height: 1.5;
  max-width: 560px;
  margin: 0 auto 32px;
  letter-spacing: -0.012em;
}
.cph-cta-banner-dark  .cph-cta-banner-p { color: var(--cph-paper-d); }
.cph-cta-banner-light .cph-cta-banner-p { color: var(--cph-ink-2); }
.cph-cta-banner-ctas {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Primary button on dark — keep existing .cph-btn-primary, ensure white-on-blue */
.cph-btn-on-dark.cph-btn-link  { color: var(--cph-blue-d); }
.cph-btn-on-light.cph-btn-link { color: var(--cph-blue); }
@media (max-width: 768px) {
  .cph-cta-banner { padding: 80px 22px; }
}

/* =============================================================
   TESTIMONIAL CAROUSEL
   ============================================================= */
.cph-testi-section { background: var(--cph-bg-2); padding: 120px 0; }

.cph-testi-feature {
  text-align: center;
  max-width: 880px;
  margin: 0 auto 80px;
}
.cph-testi-feature .cph-eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cph-blue);
  margin-bottom: 14px;
}
.cph-testi-feature-quote {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.028em;
  color: var(--cph-ink);
  margin: 0 0 24px;
}
.cph-testi-feature-quote .light { font-weight: 400; color: var(--cph-mute); }
.cph-testi-feature-who {
  font-size: 17px;
  font-weight: 500;
  color: var(--cph-ink);
  letter-spacing: -0.018em;
}
.cph-testi-feature-role {
  font-size: 14px;
  color: var(--cph-mute);
  margin-top: 2px;
  letter-spacing: -0.005em;
}

.cph-testi-carousel {
  position: relative;
}
.cph-testi-track {
  overflow: hidden;
}
.cph-testi-lane {
  display: flex;
  gap: 12px;
  transition: transform 0.55s var(--cph-ease);
  will-change: transform;
}
.cph-testi-card {
  background: var(--cph-bg);
  border-radius: var(--cph-r-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  flex: 0 0 calc((100% - (var(--cph-testi-visible, 3) - 1) * 12px) / var(--cph-testi-visible, 3));
  /* Uniform height: actual value is computed by JS at mount time and
     set as --cph-testi-card-h on the carousel. */
  min-height: var(--cph-testi-card-h, 240px);
  transition: transform 0.4s var(--cph-ease), box-shadow 0.4s var(--cph-ease);
}
.cph-testi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.12);
}
.cph-testi-card-quote {
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: var(--cph-ink);
  font-weight: 500;
  margin: 0;
}
.cph-testi-card-name { font-size: 15px; font-weight: 500; color: var(--cph-ink); }
.cph-testi-card-role { font-size: 13px; color: var(--cph-mute); margin-top: 2px; }

.cph-testi-arrows {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 32px;
}
.cph-testi-arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--cph-bg);
  color: var(--cph-ink);
  border: 1px solid var(--cph-hair);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.25s var(--cph-ease);
}
.cph-testi-arrow:hover { background: var(--cph-ink); color: #fff; transform: translateY(-2px); }
.cph-testi-arrow:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.cph-testi-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}
.cph-testi-dot {
  width: 28px;
  height: 4px;
  border-radius: 4px;
  background: var(--cph-hair);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s var(--cph-ease);
}
.cph-testi-dot:hover { background: var(--cph-mute); }
.cph-testi-dot.is-active { background: var(--cph-ink); }

@media (max-width: 900px) {
  .cph-testi-card { flex-basis: calc((100% - 12px) / 2); }
}
@media (max-width: 600px) {
  .cph-testi-card { flex-basis: 100%; }
  .cph-testi-section { padding: 80px 0; }
}

/* =============================================================
   CAPABILITY MATRIX
   ============================================================= */
.cph-matrix-section {
  padding: 96px 0;
  background: var(--cph-bg-2);
}
.cph-matrix-table {
  background: var(--cph-bg);
  border-radius: var(--cph-r-card);
  overflow: hidden;
  border: 1px solid var(--cph-hair);
}
.cph-matrix-row {
  display: grid;
  grid-template-columns: repeat(var(--cph-matrix-cols, 4), 1fr);
  border-bottom: 1px solid var(--cph-hair);
  transition: background 0.3s;
}
.cph-matrix-row:last-child { border-bottom: none; }
.cph-matrix-row:hover { background: var(--cph-bg-2); }
.cph-matrix-head {
  background: var(--cph-bg-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cph-mute);
}
.cph-matrix-head:hover { background: var(--cph-bg-3); }
.cph-matrix-cell {
  padding: 18px 24px;
  border-right: 1px solid var(--cph-hair);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--cph-ink);
}
.cph-matrix-cell:last-child { border-right: none; }
.cph-matrix-feature {
  font-weight: 600;
  color: var(--cph-ink);
  font-size: 15px;
}
.cph-matrix-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--cph-blue);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cph-matrix-check svg { width: 12px; height: 12px; stroke-width: 3; }
.cph-matrix-dash {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--cph-bg-3);
  color: var(--cph-mute);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cph-matrix-dash::after {
  content: '–';
  font-weight: 400;
}
@media (max-width: 800px) {
  .cph-matrix-section { padding: 64px 0; }
  .cph-matrix-table { border: none; background: transparent; }
  .cph-matrix-head { display: none; }
  .cph-matrix-row {
    display: block;
    background: var(--cph-bg);
    border: 1px solid var(--cph-hair);
    border-radius: 14px;
    margin-bottom: 12px;
    padding: 8px 0;
  }
  .cph-matrix-row:hover { background: var(--cph-bg); }
  .cph-matrix-cell {
    display: flex;
    justify-content: space-between;
    border-right: 0;
    padding: 10px 18px;
  }
  .cph-matrix-cell::before {
    content: attr(data-label);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cph-mute);
    font-weight: 500;
  }
  .cph-matrix-feature {
    background: var(--cph-bg-2);
    padding: 14px 18px;
    border-bottom: 1px solid var(--cph-hair);
  }
  .cph-matrix-feature::before { content: none; }
}