/* ============================================================
   Panamoure v2 — Components
   Every class is documented in .claude/skills/panamoure-component-library/SKILL.md
   ============================================================ */

/* ============================================================
   1. NAV — sticky white, chameleon + wordmark + 4 links + pink CTA
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mid-grey);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-pad-x);
  height: 76px;
}
.nav-logo img { height: 32px; width: auto; }
.nav-links { display: flex; gap: 36px; }
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--small-text);
  transition: color 0.15s ease;
}
.nav-links a:hover,
.nav-links a.active { color: var(--pink); }
.nav-cta {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  background: var(--pink);
  padding: 12px 24px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.nav-cta:hover { background: #e60069; }

/* ============================================================
   2. HERO — dark navy + cityscape background
   Default sizing matches sub-pages (ai-factory.html style).
   Add .hero--home for the larger homepage variant.
   ============================================================ */
.hero {
  background:
    linear-gradient(90deg, rgba(22,15,68,0.88) 0%, rgba(22,15,68,0.55) 45%, rgba(22,15,68,0.15) 100%),
    url('/assets/img/homepage-banner-compressed-scaled.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 120px var(--page-pad-x) 100px;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gradient-full);
}
.hero::after {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,0,122,0.18) 0%, rgba(22,15,68,0) 70%);
  pointer-events: none;
}
.hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
}
.hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 24px;
}
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--pink);
  margin-right: 14px;
  vertical-align: middle;
}
.hero h1 {
  font-size: clamp(40px, 5.2vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1px;
  margin-bottom: 24px;
  max-width: 900px;
  color: var(--white);
}
.hero h1 em { font-style: normal; color: var(--pink); }
.hero-sub {
  font-size: clamp(17px, 1.4vw, 20px);
  color: rgba(255, 255, 255, 0.78);
  max-width: 720px;
  line-height: 1.6;
  margin-bottom: 40px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Homepage modifier — larger headline and padding */
.hero--home { padding: 140px var(--page-pad-x) 120px; }
.hero--home h1 {
  font-size: clamp(36px, 4.6vw, 60px);
  max-width: 940px;
  margin-bottom: 28px;
}
.hero--home .hero-eyebrow { margin-bottom: 28px; }
.hero--home .hero-sub { margin-bottom: 48px; max-width: 940px; }

/* Breadcrumb (sub-pages) */
.breadcrumb {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 32px;
}
.breadcrumb a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.15s ease;
}
.breadcrumb a:hover { color: var(--pink); }
.breadcrumb .sep {
  margin: 0 10px;
  color: rgba(255, 255, 255, 0.3);
}

/* ============================================================
   3. PROOF STRIP — 4 numbers on dark navy
   ============================================================ */
.proof-strip {
  background: var(--blue);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 56px var(--page-pad-x);
}
.proof-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px;
}
.proof-num {
  font-size: 56px;
  font-weight: 800;
  color: var(--pink);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
}
.proof-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
}
.proof-source {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 6px;
}

/* Compact variant used on AI-Factory style sub-pages */
.hero-proof {
  background: var(--blue);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 40px var(--page-pad-x);
}
.hero-proof-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.hp-num {
  font-size: 36px;
  font-weight: 800;
  color: var(--pink);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}
.hp-label {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

/* ============================================================
   4. LOGO STRIPS — dark navy with client / partner logos
   ============================================================ */
.logos-section {
  background: var(--blue);
  padding: 64px var(--page-pad-x);
}
.logos-section h2 { color: var(--white); }
.logos-section h2 em { color: var(--pink); }
.logos-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.logos-header {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.logos-eyebrow {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-transform: none;
  color: var(--pink);
}
.logos-eyebrow::before {
  display: none;
}
.logos-title {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 28px 36px;
  align-items: center;
}
.logos-grid img {
  width: 100%;
  max-width: 160px;
  height: 32px;
  object-fit: contain;
  opacity: 0.72;
  filter: brightness(1.15);
  transition: opacity 0.2s ease;
  justify-self: center;
}
.logos-grid img:hover { opacity: 1; }

/* ============================================================
   5. TRIAD — We Advise / We Deliver / We Support
   ============================================================ */
.triad-section {
  background: var(--white);
  padding: 100px var(--page-pad-x);
  border-bottom: 1px solid var(--mid-grey);
}
.triad-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.triad-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 16px;
}
.triad-headline {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
  color: var(--blue);
  line-height: 1.15;
  max-width: 860px;
  margin-bottom: 64px;
  letter-spacing: -0.5px;
}
.triad-headline em { font-style: normal; color: var(--pink); }
.triad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.triad-item h3 {
  font-size: 26px;
  font-weight: 800;
  color: var(--blue);
  margin-bottom: 14px;
  letter-spacing: -0.3px;
}
.triad-item h3 em { font-style: normal; color: var(--pink); }
.triad-item p {
  font-size: 15px;
  color: var(--small-text);
  line-height: 1.7;
}

/* ============================================================
   6. PILLARS (3-column services grid: Advise / Transform / Extend)
   ============================================================ */
.pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr 0.85fr;
  gap: 24px;
  align-items: stretch;
}
.pillar-column {
  background: var(--white);
  border: 1px solid var(--mid-grey);
  border-radius: 16px;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(22, 15, 68, 0.04);
}
.pillar-column::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--pink);
}
.pillar-column.transform {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}
.pillar-column.transform::before { background: var(--gradient-full); }
.pillar-column.extend::before { background: var(--green); }
.pillar-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 14px;
}
.pillar-column.extend .pillar-tag { color: var(--green); }
.pillar-name {
  font-size: 32px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.1;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}
.pillar-column.transform .pillar-name { color: var(--white); }
.pillar-intro {
  font-size: 14.5px;
  color: var(--small-text);
  line-height: 1.65;
  margin-bottom: 28px;
}
.pillar-column.transform .pillar-intro { color: rgba(255, 255, 255, 0.78); }
.subservices {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  border-top: 1px solid var(--mid-grey);
}
.pillar-column.transform .subservices { border-top-color: rgba(255, 255, 255, 0.12); }
.subservice {
  padding: 16px 0;
  border-bottom: 1px solid var(--mid-grey);
}
.pillar-column.transform .subservice { border-bottom-color: rgba(255, 255, 255, 0.12); }
.subservice:last-child { border-bottom: none; }
.subservice-name {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--blue);
  margin-bottom: 4px;
}
.pillar-column.transform .subservice-name { color: var(--white); }
.subservice-desc {
  font-size: 13px;
  color: var(--small-text);
  line-height: 1.55;
}
.pillar-column.transform .subservice-desc { color: rgba(255, 255, 255, 0.68); }

/* --- Pillars on dark (section-dark) background --- */
.section-dark .pillar-column {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}
.section-dark .pillar-column.transform {
  background: var(--white);
  color: var(--blue);
  border-color: var(--white);
}
.section-dark .pillar-name { color: var(--white); }
.section-dark .pillar-column.transform .pillar-name { color: var(--blue); }
.section-dark .pillar-intro { color: rgba(255, 255, 255, 0.78); }
.section-dark .pillar-column.transform .pillar-intro { color: var(--small-text); }
.section-dark .subservices { border-top-color: rgba(255, 255, 255, 0.12); }
.section-dark .pillar-column.transform .subservices { border-top-color: var(--mid-grey); }
.section-dark .subservice { border-bottom-color: rgba(255, 255, 255, 0.12); }
.section-dark .pillar-column.transform .subservice { border-bottom-color: var(--mid-grey); }
.section-dark .subservice-name { color: var(--white); }
.section-dark .pillar-column.transform .subservice-name { color: var(--blue); }
.section-dark .subservice-desc { color: rgba(255, 255, 255, 0.65); }
.section-dark .pillar-column.transform .subservice-desc { color: var(--small-text); }
.section-dark .subservice a { color: inherit; }
.section-dark .pillar-column.transform .subservice a { color: var(--blue); }

/* ============================================================
   7. OPERATING MODEL — 5-stage horizontal flow (homepage)
   ============================================================ */
.operating-model {
  background: var(--white);
  color: var(--blue);
}
.operating-model h2 { color: var(--blue); }
.operating-model .section-intro { color: var(--small-text); }
.operating-model .flow-name { color: var(--blue); }
.operating-model .flow-desc { color: var(--small-text); }
.operating-model .flow-step::after { background: rgba(22, 15, 68, 0.1); }
.operating-model .model-link-row { border-top-color: rgba(22, 15, 68, 0.1); }
.operating-model .model-link-row p { color: var(--small-text); }
.flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}
.flow-step {
  position: relative;
  padding-right: 16px;
}
.flow-step::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 18px;
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.flow-step:last-child::after { display: none; }
.flow-num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--pink);
  margin-bottom: 12px;
}
.flow-name {
  font-size: 19px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 10px;
}
.flow-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
}
.model-link-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  flex-wrap: wrap;
  gap: 24px;
}
.model-link-row p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
  max-width: 720px;
  line-height: 1.65;
}

/* ============================================================
   8. AI FACTORY — vertical 5-stage detail (deep page)
   ============================================================ */
.stages-section { background: var(--light-grey); }
.stages {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stage {
  background: var(--white);
  border: 1px solid var(--mid-grey);
  border-radius: 16px;
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 140px 1fr 1fr;
  gap: 40px;
  align-items: start;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.stage:hover {
  border-color: rgba(255, 0, 122, 0.3);
  box-shadow: 0 6px 24px rgba(22, 15, 68, 0.06);
}
.stage-marker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stage-num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--pink);
}
.stage-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.stage-detail h4 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.stage-detail p {
  font-size: 14px;
  color: var(--small-text);
  line-height: 1.7;
  margin-bottom: 0;
}

/* ============================================================
   9. LAYERS — three orchestration layers (dark navy stack)
   ============================================================ */
.layers-section { background: var(--blue); color: var(--white); }
.layers-section h2 { color: var(--white); }
.layers-section .section-intro { color: rgba(255, 255, 255, 0.72); }
.layer-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.layer {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: start;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.layer:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 0, 122, 0.45);
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}
.layer-tag {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.layer-num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--pink);
}
.layer-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.layer-body p {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
  margin-bottom: 16px;
}
.layer-body p:last-child { margin-bottom: 0; }
.layer-components {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.layer-pill {
  background: rgba(255, 0, 122, 0.12);
  border: 1px solid rgba(255, 0, 122, 0.3);
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 100px;
}

/* ============================================================
   10. EFFORT SPECTRUM — coloured bar + 4-quadrant legend
   ============================================================ */
.spectrum-block { margin-bottom: 64px; }
.spectrum-block:last-child { margin-bottom: 0; }
.spectrum-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
}
.spectrum-h {
  font-size: 22px;
  font-weight: 800;
  color: var(--blue);
  margin-bottom: 24px;
  letter-spacing: -0.3px;
}
.spectrum-bar {
  display: flex;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(22, 15, 68, 0.08);
}
.spec-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--white);
  padding: 0 16px;
  text-align: center;
}
.spec-pink   { flex: 4; background: var(--pink); }
.spec-purple { flex: 3; background: var(--purple); }
.spec-blue   { flex: 2; background: var(--blue); }
.spec-green  { flex: 1; background: var(--green); color: var(--blue); }
.spectrum-legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.legend-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--small-text);
  line-height: 1.5;
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.legend-dot.pink { background: var(--pink); }
.legend-dot.purple { background: var(--purple); }
.legend-dot.blue { background: var(--blue); }
.legend-dot.green { background: var(--green); }
.legend-item strong {
  display: block;
  color: var(--blue);
  font-weight: 800;
}

/* ============================================================
   11. FRAMEWORKS — 3-card grid (PAMI / PAVCS / COBIT 5)
   ============================================================ */
.frameworks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.framework {
  background: var(--white);
  border: 1px solid var(--mid-grey);
  border-radius: 16px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(22, 15, 68, 0.04);
}
.framework::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--pink);
}
.framework-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
}
.framework-name {
  font-size: 26px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.1;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}
.framework-desc {
  font-size: 14px;
  color: var(--small-text);
  line-height: 1.7;
}

.framework-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.framework-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   12. DELIVERY SCALE — India + GPN
   ============================================================ */
.scale-section { background: var(--blue); color: var(--white); }
.scale-section h2 { color: var(--white); }
.scale-section .section-intro { color: rgba(255, 255, 255, 0.72); }
.scale-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
}
.scale-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
}
.scale-stat-num {
  font-size: 48px;
  font-weight: 800;
  color: var(--pink);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
}
.scale-stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
}
.scale-body p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.7;
  margin-bottom: 18px;
}
.scale-body p:last-child { margin-bottom: 0; }

/* ============================================================
   13. BENEFITS REALISATION BOARD
   ============================================================ */
.realisation-section { background: var(--white); }
.realisation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.realisation-narrative p {
  font-size: 16px;
  color: var(--small-text);
  line-height: 1.8;
  margin-bottom: 18px;
}
.realisation-card {
  background: var(--blue);
  color: var(--white);
  border-radius: 16px;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
}
.realisation-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gradient-full);
}
.realisation-card h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.25;
}
.realisation-card > p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.65;
  margin-bottom: 24px;
}
.realisation-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.realisation-card li {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  padding: 12px 0 12px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.realisation-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 14px;
  height: 2px;
  background: var(--pink);
}
.realisation-card li:last-child { border-bottom: none; }

/* ============================================================
   14. CHALLENGE IN NUMBERS — industry stats
   ============================================================ */
.challenge-section { background: var(--white); }
.challenge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 40px;
}
.challenge-stat {
  background: var(--light-grey);
  border-radius: 16px;
  padding: 40px 36px;
  border: 1px solid var(--mid-grey);
  position: relative;
  overflow: hidden;
}
.challenge-stat::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--pink);
}
.challenge-stat-num {
  font-size: 64px;
  font-weight: 800;
  color: var(--pink);
  line-height: 1;
  letter-spacing: -2px;
  margin-bottom: 14px;
}
.challenge-stat-label {
  font-size: 14px;
  color: var(--small-text);
  line-height: 1.55;
}
.challenge-stat-source {
  font-size: 11px;
  color: var(--muted);
  margin-top: 12px;
  letter-spacing: 0.5px;
}
.challenge-frame {
  max-width: 800px;
  font-size: 16px;
  color: var(--small-text);
  line-height: 1.75;
}

/* ============================================================
   15. BARRIERS — six AI adoption barriers
   ============================================================ */
.barriers-section { background: var(--blue); color: var(--white); }
.barriers-section h2 { color: var(--white); }
.barriers-section .section-label { color: var(--pink); }
.barriers-section .section-intro { color: rgba(255, 255, 255, 0.72); }
.barriers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.barrier-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 32px 28px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.barrier-card:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 0, 122, 0.45);
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}
.barrier-name {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
}
.barrier-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}
.barrier-desc {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.65;
}

/* ============================================================
   16. THREE-PILLAR APPROACH (AI Factory)
   ============================================================ */
.approach-section { background: var(--blue); color: var(--white); }
.approach-section h2 { color: var(--white); }
.approach-section .section-intro { color: rgba(255, 255, 255, 0.72); }
.approach-section .lead-quote {
  font-size: 20px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  max-width: 820px;
  line-height: 1.5;
  margin-bottom: 56px;
  letter-spacing: -0.3px;
}
.approach-section .lead-quote em {
  font-style: normal;
  color: var(--pink);
  font-weight: 800;
}
.pillars-3-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pillar-3-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
}
.pillar-3-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gradient-full);
}
.pillar-3-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
}
.pillar-3-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 14px;
  letter-spacing: -0.4px;
}
.pillar-3-desc {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
}

/* ============================================================
   17. PROVEN RESULTS — 2-card outcome strip
   ============================================================ */
.proven-section { background: var(--white); }
.proven-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.proven-card {
  background: var(--light-grey);
  border-radius: 16px;
  padding: 40px 36px;
  border: 1px solid var(--mid-grey);
  position: relative;
  overflow: hidden;
}
.proven-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--pink);
}
.proven-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
}
.proven-client {
  font-size: 22px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.2;
  margin-bottom: 18px;
  letter-spacing: -0.4px;
}
.proven-headline {
  font-size: 16px;
  font-weight: 500;
  color: var(--blue);
  line-height: 1.5;
  margin-bottom: 22px;
}
.proven-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  padding-top: 22px;
  border-top: 1px solid var(--mid-grey);
}
.proven-stat-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--pink);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -0.4px;
}
.proven-stat-label {
  font-size: 12px;
  color: var(--small-text);
  line-height: 1.45;
}

/* ============================================================
   18. DIFFERENTIATORS
   ============================================================ */
.differentiators-section { background: var(--light-grey); }
.differentiators-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
}
.differentiator {
  background: var(--white);
  border-radius: 16px;
  padding: 36px 32px;
  border: 1px solid var(--mid-grey);
  border-top: 3px solid var(--pink);
  box-shadow: 0 4px 24px rgba(22, 15, 68, 0.04);
}
.differentiator-num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
}
.differentiator-text {
  font-size: 15px;
  color: var(--blue);
  line-height: 1.55;
  font-weight: 500;
}

/* ============================================================
   19. LET'S TALK CARD — named-partner contact band
   ============================================================ */
.lets-talk-card {
  background: var(--white);
  border-radius: 16px;
  padding: 36px;
  border: 1px solid var(--mid-grey);
  box-shadow: 0 4px 16px rgba(22, 15, 68, 0.05);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  margin-top: 56px;
}
.lets-talk-card .lt-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 8px;
}
.lets-talk-card .lt-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
}
.lets-talk-card .lt-role {
  font-size: 14px;
  color: var(--small-text);
}
.lets-talk-actions {
  display: flex;
  gap: 12px;
}
.lt-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 8px;
  transition: all 0.15s ease;
}
.lt-btn-primary {
  background: var(--pink);
  color: var(--white);
  border: none;
}
.lt-btn-primary:hover { background: #e60069; }
.lt-btn-ghost {
  background: transparent;
  color: var(--blue);
  border: 2px solid var(--blue);
}
.lt-btn-ghost:hover { background: var(--blue); color: var(--white); }

/* ============================================================
   20. LEAD GRID — body + pull quote
   ============================================================ */
.lead-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: start;
}
.lead-body p {
  font-size: 16px;
  color: var(--small-text);
  line-height: 1.8;
  margin-bottom: 20px;
}
.lead-body p:last-child { margin-bottom: 0; }
.pull-quote {
  background: var(--light-grey);
  border-left: 4px solid var(--pink);
  padding: 32px 32px 32px 28px;
  border-radius: 0 14px 14px 0;
}
.pull-quote p {
  font-size: 19px;
  color: var(--blue);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.2px;
  margin: 0;
}
.pull-quote p em {
  font-style: normal;
  color: var(--pink);
  font-weight: 800;
}
.pull-quote-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 14px;
}

/* ============================================================
   21. SELECTED WORK — case cards (featured + compact)
   ============================================================ */
.selected-work { background: var(--blue); }
.selected-work h2 { color: var(--white); }
.selected-work .section-label { color: var(--pink); }
.selected-work .section-intro { color: rgba(255, 255, 255, 0.72); }
.case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.case-card {
  background: var(--white);
  border: 1px solid var(--mid-grey);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 24px rgba(22, 15, 68, 0.06);
}
.case-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(22, 15, 68, 0.1);
}
.case-header {
  background: var(--blue);
  padding: 36px 36px 32px;
  color: var(--white);
}
.case-sector {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 10px;
}
.case-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 14px;
}
.case-meta {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.case-meta span::after {
  content: '·';
  margin-left: 20px;
  color: rgba(255, 255, 255, 0.3);
}
.case-meta span:last-child::after { display: none; }
.case-body { padding: 32px 36px 28px; }
.case-body p {
  font-size: 14.5px;
  color: var(--small-text);
  line-height: 1.65;
  margin-bottom: 24px;
}
.case-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--mid-grey);
}
.case-stat-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--pink);
  line-height: 1;
  margin-bottom: 4px;
}
.case-stat-label {
  font-size: 11px;
  color: var(--small-text);
  line-height: 1.4;
}
.case-card-footer { padding: 0 36px 32px; }

/* --- Compact case card --- */
.more-work-header { margin: 64px 0 28px; max-width: 720px; }
.more-work-header h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--blue);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}
.more-work-header p {
  font-size: 14px;
  color: var(--small-text);
  margin: 0;
}
.more-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.case-card-compact {
  background: var(--white);
  border: 1px solid var(--mid-grey);
  border-radius: 14px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.case-card-compact:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255, 0, 122, 0.4);
  box-shadow: 0 8px 24px rgba(22, 15, 68, 0.08);
}
.case-card-compact .case-sector {
  color: var(--pink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.case-card-compact h4 {
  font-size: 17px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.3;
  margin: 10px 0 14px;
}
.case-card-compact p {
  font-size: 13.5px;
  color: var(--small-text);
  line-height: 1.6;
  margin: 0 0 18px;
}
.case-card-compact .compact-stat {
  font-size: 24px;
  font-weight: 800;
  color: var(--pink);
  margin-bottom: 18px;
  letter-spacing: -0.5px;
}
.case-card-compact .compact-link {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--mid-grey);
  font-size: 13px;
  font-weight: 500;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.15s ease;
}
.case-card-compact .compact-link:hover {
  gap: 12px;
  color: var(--pink);
}

/* ============================================================
   22. FEATURE BAND — Proposition / News / Insight (3-up image cards)
   ============================================================ */
.feature-band {
  background: var(--light-grey);
  padding: 100px var(--page-pad-x);
  border-bottom: 1px solid var(--mid-grey);
}
.feature-band-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.feature-band-header {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}
.feature-band-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pink);
}
.feature-band-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--pink);
  margin-right: 12px;
  vertical-align: middle;
}
.feature-band-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--small-text);
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.feature-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--mid-grey);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 24px rgba(22, 15, 68, 0.04);
}
.feature-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(22, 15, 68, 0.1);
}
.feature-image {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--blue);
  position: relative;
}
.feature-image::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.feature-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.feature-body {
  padding: 28px 30px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.feature-category {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 10px;
}
.feature-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.25;
  margin-bottom: 14px;
  letter-spacing: -0.3px;
}
.feature-desc {
  font-size: 13.5px;
  color: var(--small-text);
  line-height: 1.65;
  margin-bottom: 18px;
}
.feature-link {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--mid-grey);
  font-size: 13px;
  font-weight: 500;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.15s ease, color 0.15s ease;
}
.feature-card:hover .feature-link { gap: 12px; color: var(--pink); }

/* ============================================================
   23. TAGLINE BAND — gradient feature row
   ============================================================ */
.tagline-band {
  background: var(--gradient-full);
  color: var(--white);
  padding: 100px var(--page-pad-x);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.tagline-band-inner {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}
.tagline-band h2 {
  color: var(--white);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 0;
}

/* ============================================================
   24. PRINCIPLES — 3-column with top-border
   ============================================================ */
.principles { background: var(--white); }
.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 16px;
}
.principle {
  padding-top: 32px;
  border-top: 2px solid var(--blue);
}
.principle-num {
  font-size: 12px;
  font-weight: 500;
  color: var(--pink);
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.principle h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.25;
  margin-bottom: 14px;
}
.principle p {
  font-size: 15px;
  color: var(--small-text);
  line-height: 1.75;
}
.principles-quote {
  margin-top: 80px;
  padding: 48px 0 0;
  border-top: 1px solid var(--mid-grey);
  max-width: 860px;
}
.principles-quote p {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  color: var(--blue);
  line-height: 1.4;
  letter-spacing: -0.3px;
}
.principles-quote p em {
  font-style: normal;
  color: var(--pink);
}

/* ============================================================
   24b. PHILOSOPHY PRINCIPLES — slick 3+2 card grid (ai-factory)
   ============================================================ */

/* ============================================================
   24c. HOW WE ENGINEER — numbered steps + client outcomes
   ============================================================ */
.eng-steps {
  display: flex;
  flex-direction: column;
  margin-bottom: 48px;
}
.eng-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 32px;
  padding: 36px 0;
  border-top: 1px solid rgba(22, 15, 68, 0.1);
}
.eng-step:last-child {
  border-bottom: 1px solid rgba(22, 15, 68, 0.1);
}
.eng-step-num {
  font-size: 36px;
  font-weight: 800;
  color: var(--pink);
  line-height: 1;
  padding-top: 4px;
}
.eng-step-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.2;
  margin-bottom: 10px;
}
.eng-step-body p {
  font-size: 15px;
  color: var(--small-text);
  line-height: 1.75;
}
.eng-outcomes {
  background: var(--blue);
  border-radius: 16px;
  padding: 40px;
}
.eng-outcome-header {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 28px;
}
.eng-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.eng-outcome h4 {
  font-size: 16px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 8px;
}
.eng-outcome p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}
.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.philosophy-card {
  grid-column: span 2;
  background: var(--white);
  border-radius: 16px;
  padding: 36px 32px;
  border: 1px solid var(--mid-grey);
  border-top: 3px solid var(--pink);
  box-shadow: 0 4px 24px rgba(22, 15, 68, 0.04);
}
.philosophy-card:nth-child(4),
.philosophy-card:nth-child(5) {
  grid-column: span 3;
}
.philosophy-card-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 14px;
}
.philosophy-card h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.2;
  letter-spacing: -0.2px;
  margin-bottom: 12px;
}
.philosophy-card p {
  font-size: 14px;
  color: var(--small-text);
  line-height: 1.75;
}

/* ============================================================
   25. CTA — dark navy with gradient accent
   ============================================================ */
.cta {
  background: var(--blue);
  color: var(--white);
  text-align: center;
  padding: 120px var(--page-pad-x);
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gradient-full);
}
.cta-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}
.cta h2 {
  color: var(--white);
  margin-bottom: 24px;
  font-size: clamp(32px, 3.6vw, 48px);
}
.cta p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
.cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   26. FOOTER — 4-column dark navy
   ============================================================ */
.footer {
  background: var(--blue);
  color: var(--white);
  padding: 64px var(--page-pad-x) 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand img {
  height: 32px;
  width: auto;
  margin-bottom: 18px;
}
.footer-brand p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  max-width: 320px;
}
.footer-col h4 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 18px;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 10px;
  transition: color 0.15s ease;
}
.footer-col a:hover { color: var(--pink); }
.footer-bottom {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

/* ============================================================
   27. CASE STUDY DETAIL — production-page components
   ============================================================ */
.case-detail-section {
  background: var(--white);
  padding: 100px var(--page-pad-x);
}
.case-detail-inner {
  max-width: 920px;
  margin: 0 auto;
}
.case-detail-block { margin-bottom: 56px; }
.case-detail-block:last-child { margin-bottom: 0; }
.case-detail-block h2 {
  font-size: clamp(26px, 2.8vw, 36px);
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}
.case-detail-block p {
  font-size: 16px;
  color: var(--small-text);
  line-height: 1.8;
  margin-bottom: 16px;
}
.case-detail-block p:last-child { margin-bottom: 0; }
.case-detail-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.case-detail-list li {
  position: relative;
  font-size: 15.5px;
  color: var(--small-text);
  line-height: 1.7;
  padding: 14px 0 14px 28px;
  border-bottom: 1px solid var(--mid-grey);
}
.case-detail-list li:last-child { border-bottom: none; }
.case-detail-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  width: 14px;
  height: 2px;
  background: var(--pink);
}

.outcome-strip {
  background: var(--blue);
  color: var(--white);
  padding: 56px var(--page-pad-x);
}
.outcome-strip-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 36px;
}
.outcome-num {
  font-size: 44px;
  font-weight: 800;
  color: var(--pink);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -1px;
}
.outcome-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

/* ============================================================
   28. SECTOR PAGE — challenge grid, stats row
   ============================================================ */
.sector-stats {
  background: var(--light-grey);
  padding: 64px var(--page-pad-x);
}
.sector-stats-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.sector-stat-num {
  font-size: 52px;
  font-weight: 800;
  color: var(--pink);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -1px;
}
.sector-stat-label {
  font-size: 14px;
  color: var(--small-text);
  line-height: 1.55;
}
.sector-stat-source {
  font-size: 11px;
  color: var(--muted);
  margin-top: 10px;
  letter-spacing: 0.5px;
}

.challenges-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.challenge-card {
  background: var(--white);
  border: 1px solid var(--mid-grey);
  border-radius: 14px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}
.challenge-card .challenge-num {
  font-size: 14px;
  font-weight: 800;
  color: var(--pink);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.challenge-card .challenge-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--blue);
  margin-bottom: 8px;
  letter-spacing: -0.3px;
  line-height: 1.25;
}
.challenge-card .challenge-body {
  font-size: 14px;
  color: var(--small-text);
  line-height: 1.65;
}

/* ============================================================
   29. INSIGHT ARTICLE — prose styles
   ============================================================ */
.article-section {
  background: var(--white);
  padding: 100px var(--page-pad-x);
}
.article-inner {
  max-width: 760px;
  margin: 0 auto;
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  font-size: 13px;
  color: var(--muted);
}
.article-meta .article-author {
  font-weight: 500;
  color: var(--blue);
}
.article-meta .article-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mid-grey);
}
.article-body p,
.article-body ul,
.article-body ol {
  font-size: 17px;
  color: var(--small-text);
  line-height: 1.8;
  margin-bottom: 22px;
}
.article-body h2 {
  font-size: clamp(24px, 2.4vw, 32px);
  margin-top: 48px;
  margin-bottom: 18px;
  letter-spacing: -0.3px;
}
.article-body h3 {
  font-size: 22px;
  margin-top: 36px;
  margin-bottom: 14px;
  color: var(--blue);
  letter-spacing: -0.3px;
}
.article-body ul,
.article-body ol {
  padding-left: 24px;
}
.article-body li {
  margin-bottom: 8px;
}
.article-body strong { color: var(--blue); }
.article-body a {
  color: var(--pink);
  border-bottom: 1px solid rgba(255, 0, 122, 0.4);
  transition: border-color 0.15s ease;
}
.article-body a:hover { border-bottom-color: var(--pink); }
.article-callout {
  background: var(--light-grey);
  border-left: 4px solid var(--pink);
  padding: 24px 28px;
  border-radius: 0 14px 14px 0;
  margin: 32px 0;
}
.article-callout p {
  font-size: 17px;
  color: var(--blue);
  line-height: 1.55;
  font-weight: 500;
  margin-bottom: 0;
}

/* ============================================================
   30. INDEX PAGE — filter chips + card grid
   ============================================================ */
.index-controls {
  background: var(--white);
  border-bottom: 1px solid var(--mid-grey);
  padding: 24px var(--page-pad-x);
}
.index-controls-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.index-chip {
  font-size: 13px;
  font-weight: 500;
  color: var(--blue);
  background: var(--light-grey);
  border: 1px solid var(--mid-grey);
  padding: 8px 18px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.index-chip.active,
.index-chip:hover {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--white);
}

.index-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ============================================================
   31. UTILITY PAGE — prose container with light hero
   ============================================================ */
.utility-section {
  background: var(--white);
  padding: 100px var(--page-pad-x);
}
.utility-inner {
  max-width: 800px;
  margin: 0 auto;
}
.utility-inner h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  margin-bottom: 18px;
  margin-top: 40px;
  letter-spacing: -0.3px;
}
.utility-inner h2:first-child { margin-top: 0; }
.utility-inner h3 {
  font-size: 20px;
  margin-bottom: 12px;
  margin-top: 28px;
  color: var(--blue);
}
.utility-inner p {
  font-size: 16px;
  color: var(--small-text);
  line-height: 1.8;
  margin-bottom: 18px;
}
.utility-inner ul {
  padding-left: 22px;
  margin-bottom: 18px;
}
.utility-inner li {
  font-size: 16px;
  color: var(--small-text);
  line-height: 1.8;
  margin-bottom: 6px;
}

/* Contact-specific */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
}
.contact-card {
  background: var(--light-grey);
  border: 1px solid var(--mid-grey);
  border-radius: 16px;
  padding: 36px 32px;
}
.contact-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--blue);
  margin-bottom: 10px;
}
.contact-card p,
.contact-card a {
  font-size: 14.5px;
  color: var(--small-text);
  line-height: 1.7;
}
.contact-card a {
  display: inline-block;
  color: var(--pink);
  font-weight: 500;
  margin-top: 4px;
}
.contact-card + .contact-card { margin-top: 20px; }

/* ============================================================
   32. TEAM GRID — leadership cards (Who We Are)
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.team-card {
  background: var(--white);
  border: 1px solid var(--mid-grey);
  border-radius: 16px;
  padding: 28px 26px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.team-card:hover {
  border-color: rgba(255, 0, 122, 0.3);
  box-shadow: 0 6px 20px rgba(22, 15, 68, 0.06);
}
.team-card .team-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--blue);
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}
.team-card .team-role {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 14px;
}
.team-card .team-bio {
  font-size: 13.5px;
  color: var(--small-text);
  line-height: 1.65;
}

/* ============================================================
   BARRIER-CARD TEMPLATE — applied to all similar grid sections
   on dark backgrounds. Glassmorphism card: semi-transparent,
   pink border on hover, consistent with .barrier-card.
   ============================================================ */

/* Framework cards inside dark sections — matched to barrier-card spec */
.section-dark .framework {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
.section-dark .framework:hover {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(255, 0, 122, 0.45) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22) !important;
}
.section-dark .framework-tag { text-transform: uppercase; letter-spacing: 2px; }
.section-dark .framework-name { color: var(--white); }
.section-dark .framework-desc { color: rgba(255, 255, 255, 0.65); }

/* Pillar-3-cards: matched to barrier-card spec */
.pillar-3-card {
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.pillar-3-card::before { background: var(--pink) !important; }
.pillar-3-card:hover {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(255, 0, 122, 0.45) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

/* Challenge cards (sector pages) on dark: matched to barrier-card spec */
.section-dark .challenge-card,
.challenges-grid .challenge-card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.section-dark .challenge-card:hover,
.challenges-grid .challenge-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 0, 122, 0.45);
  transform: translateY(-4px) !important;
}

/* AI steps (service page content canvases) */
.ai-step {
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
.ai-step:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(22,15,68,0.09) !important;
}

/* ============================================================
   33. WHITE BOX HOVER NORMALISATION
   All white/light-background card components receive the same
   lift-and-shadow behaviour on hover for visual consistency.
   ============================================================ */

/* Framework cards */
.framework {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.framework.reveal,
.framework.af-reveal {
  transition: opacity 0.7s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.framework:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(22,15,68,0.1);
  border-color: rgba(255,0,122,0.25);
}

/* AI Factory stages */
.stage {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.stage:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255,0,122,0.3);
  box-shadow: 0 12px 40px rgba(22,15,68,0.1);
}

/* Service pillar columns */
.pillar-column {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pillar-column:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(22,15,68,0.1);
}

/* Differentiator cards */
.differentiator {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.differentiator:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(22,15,68,0.1);
}

/* Proven results cards */
.proven-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.proven-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(22,15,68,0.1);
}

/* Challenge stat cards */
.challenge-stat {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.challenge-stat:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(22,15,68,0.1);
  border-color: rgba(255,0,122,0.25);
}

/* Philosophy cards */
.philosophy-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.philosophy-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(22,15,68,0.1);
}

/* Team cards — already has border/shadow, add the lift */
.team-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.team-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255,0,122,0.3);
  box-shadow: 0 12px 40px rgba(22,15,68,0.1);
}

/* Let's Talk partner card */
.lets-talk-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.lets-talk-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(22,15,68,0.1);
  border-color: rgba(255,0,122,0.25);
}

/* Contact cards */
.contact-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.contact-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(22,15,68,0.1);
  border-color: rgba(255,0,122,0.25);
}

/* Challenge cards (sector pages, white bg) */
.challenge-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.challenge-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(22,15,68,0.1);
  border-color: rgba(255,0,122,0.25);
}

/* Realisation card (dark blue — subtle lift only) */
.realisation-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.realisation-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.25);
}

/* Pull quote */
.pull-quote {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pull-quote:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 32px rgba(22,15,68,0.09);
}

/* Panel cards (lifecycle / strategy tabs content) */
.panel-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.panel-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 48px rgba(22,15,68,0.1);
}

/* Panel features (sidebar list items) — horizontal slide */
.panel-feature {
  transition: background 0.2s ease, transform 0.2s ease;
}
.panel-feature:hover {
  transform: translateX(4px);
}

/* Barrier cards — add lift to dark-bg glass cards */
.barrier-card {
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.barrier-card.reveal,
.barrier-card.af-reveal {
  transition: opacity 0.7s ease, background 0.2s ease, border-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* Diag cards (service page three-up sections) */
.diag-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.diag-card.reveal {
  transition: opacity 0.7s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.diag-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(22,15,68,0.1);
}

/* lc-tab (strategy/lifecycle tab selectors) */
.lc-tab {
  transition: all 0.25s ease;
}

/* ============================================================
   MOBILE NAV — hamburger button + full-screen drawer (≤980px)
   ============================================================ */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}
.nav-burger--open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-burger--open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-burger--open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav-mobile {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--blue);
  z-index: 99;
  overflow-y: auto;
  flex-direction: column;
  padding: 24px 24px 48px;
}
.nav-mobile.nav-mobile--open {
  display: flex;
}
.nav-mobile .nav-links {
  display: flex !important;
  flex-direction: column;
  gap: 0;
}
.nav-mobile .nav-links a {
  font-size: 20px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: -0.2px;
  transition: color 0.15s ease, padding-left 0.15s ease;
}
.nav-mobile .nav-links a:hover,
.nav-mobile .nav-links a.active {
  color: var(--pink);
  padding-left: 8px;
}
.nav-mobile-cta {
  display: inline-block;
  margin-top: 32px;
  background: var(--pink);
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: 8px;
  text-align: center;
  transition: background 0.15s ease;
  align-self: flex-start;
}
.nav-mobile-cta:hover { background: #e60069; }

@media (max-width: 980px) {
  .nav-burger { display: flex; }

  /* When drawer is open: pin nav to viewport so it never scrolls away */
  .nav--open {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
  }
}

/*  Case study "More Work" grid: collapse to single column on mobile */
@media (max-width: 768px) {
  .more-work-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
}