/* P2P2 colorful theme — generated by CMS */
:root {
  --color-ink:         23 23 23;
  --color-paper:       255 251 245;
  --color-muted:       110 100 92;
  --color-border:      232 213 192;
  --color-border-dark: 201 168 136;
  --color-accent:      193 18 31;
  --c-red:    193  18  31;
  --c-pink:   233  30 140;
  --c-purple: 107  45 139;
  --c-green:   56 102  65;
  --c-lime:   124 181  24;
  --c-blue:    21 101 192;
  --c-orange: 231 111  81;
  --c-gold:   255 186   8;
  --c-teal:     0 150 199;
}

/* ─── Selection & focus ─────────────────────────── */
::selection {
  background-color: rgb(var(--c-red));
  color: rgb(var(--color-paper));
}

*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--color-paper)), 0 0 0 4px rgb(var(--c-red));
}

/* ─── Buttons ───────────────────────────────────── */
.btn-primary {
  background-color: rgb(var(--c-red));
  color: rgb(var(--color-paper));
  background-image: linear-gradient(135deg, rgb(var(--c-red)), rgb(var(--c-orange) / 0.85));
}
.btn-primary:hover {
  background-image: linear-gradient(135deg, rgb(var(--c-red) / 0.9), rgb(var(--c-orange) / 0.75));
}
.btn-outline {
  border-color: rgb(var(--c-red));
  color: rgb(var(--c-red));
}
.btn-outline:hover {
  background-color: rgb(var(--c-red));
  color: rgb(var(--color-paper));
}

/* ─── Nav ───────────────────────────────────────── */
.nav-link:hover { color: rgb(var(--c-red)); }
.nav-link-active { color: rgb(var(--c-red)); }

/* ─── Rainbow divider ───────────────────────────── */
.divider {
  border: none;
  height: 3px;
  background: linear-gradient(90deg,
    rgb(var(--c-red)),
    rgb(var(--c-orange)),
    rgb(var(--c-gold)),
    rgb(var(--c-lime)),
    rgb(var(--c-teal)),
    rgb(var(--c-blue)),
    rgb(var(--c-purple)),
    rgb(var(--c-pink))
  );
  opacity: 0.8;
}

/* ─── Kente geometric stripe ─────────────────────── */
.ethnic-stripe {
  height: 20px;
  background:
    /* Diamond cross-hatch — simulates kente weave threads */
    repeating-linear-gradient(
      45deg,
      transparent          0px, transparent          9px,
      rgba(0, 0, 0, 0.22)  9px, rgba(0, 0, 0, 0.22) 10px,
      transparent         10px, transparent         19px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent          0px, transparent          9px,
      rgba(0, 0, 0, 0.22)  9px, rgba(0, 0, 0, 0.22) 10px,
      transparent         10px, transparent         19px
    ),
    /* Vertical kente colour bands */
    repeating-linear-gradient(
      90deg,
      rgb(var(--c-red))    0px,  rgb(var(--c-red))    20px,
      rgb(var(--c-orange)) 20px, rgb(var(--c-orange)) 40px,
      rgb(var(--c-gold))   40px, rgb(var(--c-gold))   60px,
      rgb(var(--c-lime))   60px, rgb(var(--c-lime))   80px,
      rgb(var(--c-teal))   80px, rgb(var(--c-teal))   100px,
      rgb(var(--c-blue))   100px, rgb(var(--c-blue))  120px,
      rgb(var(--c-purple)) 120px, rgb(var(--c-purple)) 140px,
      rgb(var(--c-pink))   140px, rgb(var(--c-pink))  160px
    );
}

/* ─── π² Logo mark ──────────────────────────────── */
.pi-logo-box {
  border-color: rgb(var(--c-red));
  border-width: 3px;
  box-shadow: 10px 10px 0 rgb(var(--c-red) / 0.25), 6px 6px 0 rgb(var(--c-orange) / 0.2);
  background-image:
    linear-gradient(45deg, rgb(var(--c-gold) / 0.07) 25%, transparent 25%),
    linear-gradient(-45deg, rgb(var(--c-teal) / 0.07) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgb(var(--c-purple) / 0.06) 75%),
    linear-gradient(-45deg, transparent 75%, rgb(var(--c-lime) / 0.06) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

.pi-logo-edge {
  color: rgb(var(--c-red));
  font-size: 0.78rem;
  font-weight: 700;
}

/* ─── π display gradient ────────────────────────── */
.pi-display {
  background: linear-gradient(135deg,
    rgb(var(--c-red)),
    rgb(var(--c-pink)),
    rgb(var(--c-purple))
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Hero panel overrides ──────────────────────── */
.hero-panel-left {
  background: rgb(var(--c-red));
}

.hero-panel-left::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      -60deg,
      transparent 0,
      transparent 22px,
      rgba(255, 255, 255, 0.04) 22px,
      rgba(255, 255, 255, 0.04) 23px
    ),
    repeating-linear-gradient(
      60deg,
      transparent 0,
      transparent 22px,
      rgba(255, 255, 255, 0.04) 22px,
      rgba(255, 255, 255, 0.04) 23px
    );
}

.hero-panel-left .pi-logo-box {
  border-color: rgb(var(--color-paper));
  border-width: 2.5px;
  box-shadow: 9px 9px 0 rgba(255, 255, 255, 0.14);
  background-image: none;
}

.hero-panel-left .pi-logo-edge {
  color: rgba(255, 251, 245, 0.7);
}

.hero-panel-left .pi-display {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: rgb(var(--color-paper));
}

/* ─── π digits marquee ──────────────────────────── */
.pi-marquee {
  background: rgb(var(--color-paper));
  padding: 0.75rem 0;
  border-color: rgb(var(--color-border));
}

.pi-marquee-inner {
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  background: linear-gradient(90deg,
    rgb(var(--c-red)),
    rgb(var(--c-orange)),
    rgb(var(--c-gold)),
    rgb(var(--c-lime)),
    rgb(var(--c-teal)),
    rgb(var(--c-blue)),
    rgb(var(--c-purple)),
    rgb(var(--c-pink)),
    rgb(var(--c-red))
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 300% 100%;
  animation: pi-scroll 55s linear infinite, pi-rainbow 12s linear infinite;
}

@keyframes pi-rainbow {
  from { background-position: 0 0; }
  to   { background-position: 300% 0; }
}

/* ─── Manifest dark panel ───────────────────────── */
.manifest-dark-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      -55deg,
      transparent 0,
      transparent 20px,
      rgba(255, 255, 255, 0.03) 20px,
      rgba(255, 255, 255, 0.03) 21px
    );
}

/* ─── History section ────────────────────────────── */
.history-section-header {
  background: rgb(var(--c-teal));
}

.history-bg-deco {
  opacity: 0.08;
  background: linear-gradient(135deg, rgb(var(--c-teal)), rgb(var(--c-blue)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ─── Services column headers ────────────────────── */
.services-col-header--business {
  background: rgb(var(--c-red));
}

.services-col-header--private {
  background: rgb(var(--c-blue));
}

/* ─── Manifest section ──────────────────────────── */
.manifest-section {
  background-image:
    linear-gradient(45deg, rgb(var(--c-gold) / 0.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgb(var(--c-teal) / 0.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgb(var(--c-purple) / 0.03) 75%),
    linear-gradient(-45deg, transparent 75%, rgb(var(--c-lime) / 0.03) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

.manifest-heading {
  background: linear-gradient(135deg, rgb(var(--c-red)), rgb(var(--c-purple)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Section label accents ─────────────────────── */
.text-muted.uppercase.tracking-widest {
  position: relative;
  padding-left: 0.875rem;
}
.text-muted.uppercase.tracking-widest::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, rgb(var(--c-red)), rgb(var(--c-orange)));
  border-radius: 2px;
}

/* ─── WhyPi section ─────────────────────────────── */
.why-pi-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      110deg,
      transparent 0,
      transparent 40px,
      rgba(255, 255, 255, 0.02) 40px,
      rgba(255, 255, 255, 0.02) 41px
    );
}

.why-pi-symbol {
  opacity: 0.22;
}

/* ─── Service cards ─────────────────────────────── */
.service-card {
  border-left: 3px solid transparent;
  transition: border-color 0.2s, border-left-color 0.2s;
}
.service-card:nth-child(9n+1) { border-left-color: rgb(var(--c-red)); }
.service-card:nth-child(9n+2) { border-left-color: rgb(var(--c-blue)); }
.service-card:nth-child(9n+3) { border-left-color: rgb(var(--c-green)); }
.service-card:nth-child(9n+4) { border-left-color: rgb(var(--c-purple)); }
.service-card:nth-child(9n+5) { border-left-color: rgb(var(--c-orange)); }
.service-card:nth-child(9n+6) { border-left-color: rgb(var(--c-teal)); }
.service-card:nth-child(9n+7) { border-left-color: rgb(var(--c-pink)); }
.service-card:nth-child(9n+8) { border-left-color: rgb(var(--c-lime)); }
.service-card:nth-child(9n+9) { border-left-color: rgb(var(--c-gold)); }
.service-card:hover {
  border-color: rgb(var(--color-border));
  background-color: rgb(var(--color-paper));
  filter: brightness(0.97);
}

/* ─── Service list diamond bullets ──────────────── */
.service-diamond {
  opacity: 1;
  transition: transform 0.15s;
}
a:hover .service-diamond {
  transform: rotate(45deg) scale(1.4);
}

/* ─── Team member monograms (individual page) ───── */
[data-member-index="0"] .pi-display { background: linear-gradient(135deg, rgb(var(--c-red)), rgb(var(--c-orange))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-member-index="1"] .pi-display { background: linear-gradient(135deg, rgb(var(--c-blue)), rgb(var(--c-teal))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-member-index="2"] .pi-display { background: linear-gradient(135deg, rgb(var(--c-green)), rgb(var(--c-lime))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ─── Navigation rainbow border ─────────────────── */
.site-nav-header {
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(
    90deg,
    rgb(var(--c-red)),
    rgb(var(--c-orange)),
    rgb(var(--c-gold)),
    rgb(var(--c-lime)),
    rgb(var(--c-teal)),
    rgb(var(--c-blue)),
    rgb(var(--c-purple)),
    rgb(var(--c-pink))
  ) 1;
}

/* ─── Footer dark treatment ──────────────────────── */
.site-footer {
  background: rgb(var(--color-ink));
}

.site-footer .footer-muted,
.site-footer .footer-label {
  color: rgba(255, 251, 245, 0.35);
}

.site-footer .footer-link {
  color: rgba(255, 251, 245, 0.5);
}

.site-footer .footer-link:hover {
  color: rgba(255, 251, 245, 0.9);
}

.site-footer .footer-divider {
  border-color: rgba(255, 251, 245, 0.08);
}

/* ─── Service detail sidebar ─────────────────────── */
.service-sidebar-header {
  background: rgb(var(--c-orange));
}

/* ─── CTA section ───────────────────────────────── */
.cta-section {
  background: rgb(var(--c-red));
  color: rgb(var(--color-paper));
}

.cta-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      120deg,
      transparent 0,
      transparent 24px,
      rgb(255 255 255 / 0.04) 24px,
      rgb(255 255 255 / 0.04) 25px
    );
}

.cta-section blockquote {
  border-color: rgb(var(--color-paper) / 0.4);
  color: rgb(var(--color-paper));
}

.cta-section .btn-primary {
  background: rgb(var(--color-paper));
  color: rgb(var(--c-red));
  background-image: none;
}

.cta-section .btn-primary:hover {
  background: rgb(var(--color-paper) / 0.88);
  background-image: none;
}

.cta-section .ethnic-stripe {
  opacity: 0.6;
}