/* ══════════════════════════════════════════════════════
   pe-mod.css — Premium enhancement layer for pe-mod route
   Loaded after basispartners.css on every pe-mod page
══════════════════════════════════════════════════════ */

/* ── ACCESSIBILITY ── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.revealed,
  .hero-column > *, .route-hero .eyebrow,
  .route-hero .headline, .route-hero .route-hero-body,
  .c-hero-headline, .c-hero-body, .c-hero-cta,
  .c-hero-panel, .vc-hero-headline, .vc-hero-body,
  .vc-hero-cta, .vc-panel, .er-hero-headline,
  .er-hero-body, .er-hero-cta, .er-panel,
  .lp-hero-headline, .lp-hero-body, .lp-hero-cta, .lp-panel,
  .hdp, .hero-scroll-cue {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════
   1. SCROLL REVEAL SYSTEM
══════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: none;
}

.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }
.reveal[data-delay="4"] { transition-delay: 0.48s; }
.reveal[data-delay="5"] { transition-delay: 0.60s; }
.reveal[data-delay="6"] { transition-delay: 0.72s; }

/* ══════════════════════════════
   2. HEADER SCROLL SHADOW
══════════════════════════════ */

.site-header {
  transition: box-shadow 0.3s ease;
}

.site-header.scrolled {
  box-shadow: 0 2px 20px rgba(0, 34, 78, 0.1);
}

/* ══════════════════════════════
   3. DOT GRID — HERO BACKGROUNDS
══════════════════════════════ */

.hero,
.route-hero,
.c-hero,
.vc-hero,
.er-hero,
.lp-hero {
  background-image: radial-gradient(circle, rgba(38, 58, 153, 0.055) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: 0 0;
}

/* ══════════════════════════════
   4. HERO ENTRANCE ANIMATIONS
══════════════════════════════ */

@keyframes heroEnter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Index page hero column stagger */
.hero-column .eyebrow    { animation: heroEnter 0.75s ease 0.08s both; }
.hero-column .headline   { animation: heroEnter 0.75s ease 0.22s both; }
.hero-column .hero-body  { animation: heroEnter 0.75s ease 0.38s both; }
.hero-column .hero-cta   { animation: heroEnter 0.75s ease 0.52s both; }
.hero-column .logo-strip { animation: heroEnter 0.75s ease 0.66s both; }

/* Service page hero entrances */
.c-eyebrow-row, .vc-eyebrow-row, .er-eyebrow-row, .lp-eyebrow-row {
  animation: heroEnter 0.7s ease 0.1s both;
}
.c-hero-headline, .vc-hero-headline, .er-hero-headline, .lp-hero-headline {
  animation: heroEnter 0.75s ease 0.22s both;
}
.c-hero-body, .vc-hero-body, .er-hero-body, .lp-hero-body {
  animation: heroEnter 0.75s ease 0.38s both;
}
.c-hero-cta, .vc-hero-cta, .er-hero-cta, .lp-hero-cta {
  animation: heroEnter 0.75s ease 0.52s both;
}
.c-hero-panel, .vc-panel, .er-panel, .lp-panel {
  animation: heroEnter 0.8s ease 0.32s both;
}

/* Route hero page entrance */
.route-hero .eyebrow    { animation: heroEnter 0.7s ease 0.1s both; }
.route-hero .headline   { animation: heroEnter 0.75s ease 0.22s both; }
.route-hero .route-hero-body { animation: heroEnter 0.75s ease 0.38s both; }

/* ══════════════════════════════
   5. HERO SCROLL CUE
══════════════════════════════ */

.hero-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: clamp(40px, 5vw, 60px);
  animation: heroEnter 1s ease 0.8s both;
}

.hero-scroll-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--brand), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); transform-origin: top; }
  50%       { opacity: 0.9; transform: scaleY(1.1); transform-origin: top; }
}

/* ══════════════════════════════
   6. HERO DASHBOARD PREVIEW (bespoke asset — index only)
══════════════════════════════ */

.hdp {
  border: none;
  border-top: 3px solid var(--brand);
  background: var(--white);
  padding: clamp(16px, 2vw, 20px) clamp(16px, 2vw, 24px);
  margin-bottom: 16px;
  animation: heroEnter 0.85s ease 0.28s both;
}

.hdp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.hdp-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--navy);
}

.hdp-period {
  font-size: 10px;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.hdp-pulse-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  margin-right: 5px;
  position: relative;
  top: -1px;
  animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50%       { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}

.hdp-chart {
  margin-bottom: 12px;
  line-height: 0;
}

.hdp-chart svg {
  width: 100%;
  height: auto;
  display: block;
}

.hdp-status {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.hdp-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 400;
  color: var(--navy);
}

.hdp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hdp-dot-ok   { background: var(--brand); }
.hdp-dot-flag { background: var(--flame); }

.hdp-cycle-label {
  margin-left: auto;
  font-size: 10px;
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* Ensure pe-service-grid is staggered below hdp */
.pe-service-grid .path-card { animation: heroEnter 0.75s ease both; }
.pe-service-grid .path-card:nth-child(1) { animation-delay: 0.35s; }
.pe-service-grid .path-card:nth-child(2) { animation-delay: 0.44s; }
.pe-service-grid .path-card:nth-child(3) { animation-delay: 0.53s; }
.pe-service-grid .path-card:nth-child(4) { animation-delay: 0.62s; }

/* ══════════════════════════════
   7. DARK SECTION GRID TEXTURE
══════════════════════════════ */

.pe-problem-section,
.c-why,
.vc-dark,
.er-dark,
.lp-dark {
  position: relative;
  overflow: hidden;
}

.pe-problem-section::before,
.c-why::before,
.vc-dark::before,
.er-dark::before,
.lp-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(107, 174, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 174, 255, 0.032) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
}

.pe-problem-section .container,
.c-why .container,
.vc-dark .container,
.er-dark .container,
.lp-dark .container {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════
   8. STEP CONNECTOR LINES
══════════════════════════════ */

.c-steps,
.vc-steps,
.er-steps,
.lp-steps {
  position: relative;
}

.c-steps::before,
.vc-steps::before,
.er-steps::before,
.lp-steps::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    var(--brand) 0%,
    rgba(38, 58, 153, 0.12) 85%,
    transparent 100%);
  z-index: 0;
}

.c-step-num,
.vc-step-num,
.er-step-num,
.lp-step-num {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════
   9. ENHANCED CARD HOVER
══════════════════════════════ */

/* Receive cards — add lift */
.c-receive-card,
.er-receive-card,
.lp-receive-card {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.c-receive-card:hover,
.er-receive-card:hover,
.lp-receive-card:hover {
  box-shadow: 0 14px 44px rgba(0, 34, 78, 0.1);
  transform: translateY(-4px);
}

/* VC lever cards — deeper shadow on hover */
.vc-lever-card {
  transition: box-shadow 0.3s ease, border-left-color 0.25s ease, transform 0.3s ease;
}
.vc-lever-card:hover {
  transform: translateY(-3px);
}

/* Overview cards on index */
.pe-overview-card {
  transition: box-shadow 0.3s ease, transform 0.25s ease;
}
.pe-overview-card:hover {
  box-shadow: 0 12px 40px rgba(0, 34, 78, 0.1);
  transform: translateY(-3px);
}

/* Exit readiness dimension cards */
.er-dim-card {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.er-dim-card:hover {
  box-shadow: 0 10px 36px rgba(0, 34, 78, 0.09);
  transform: translateY(-3px);
}

/* ══════════════════════════════
   10. ACTIVE NAV STATE
══════════════════════════════ */

.nav-links a[aria-current="page"]:not(.nav-cta)::after {
  transform: translateX(-50%) scaleX(1) !important;
  background: var(--brand);
}

/* ══════════════════════════════
   11. HERO PANEL ENHANCEMENTS
══════════════════════════════ */

/* Live indicator bar on hero panels */
.c-panel-label,
.vc-panel-label,
.er-panel-label,
.lp-panel-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-live-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: pulseDot 2s ease-in-out infinite;
}

/* ══════════════════════════════
   12. STAT STRIP ENHANCEMENTS
══════════════════════════════ */

/* Counter numbers: prevent layout shift during animation */
[data-counter] {
  display: inline-block;
  min-width: 1ch;
}

/* ══════════════════════════════
   13. CTA SECTION REFINEMENT
══════════════════════════════ */

.cta-section {
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.cta-section .container { position: relative; z-index: 1; }

/* ══════════════════════════════
   14. CONTACT PAGE — TWO COLUMN
══════════════════════════════ */

.contact-hero-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: clamp(48px, 6vw, 100px);
  align-items: start;
}

.contact-trust-panel {
  background: var(--light-blue);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-trust-title {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 4px;
}

.contact-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.contact-trust-marker {
  width: 2px;
  height: 20px;
  background: var(--brand);
  flex-shrink: 0;
  margin-top: 3px;
  opacity: 0.5;
}

.contact-trust-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.contact-trust-item-desc {
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.6;
}

.contact-trust-stat {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 4px;
}

.contact-trust-stat-item {
  background: var(--white);
  padding: 16px;
  text-align: center;
}

.contact-trust-stat-num {
  font-family: var(--serif);
  font-size: clamp(24px, 2.5vw, 32px);
  font-weight: 400;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.contact-trust-stat-label {
  font-size: 11px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.4;
}

/* ══════════════════════════════
   15. COMPARISON TABLE REFINEMENT
══════════════════════════════ */

.c-compare-table tbody tr,
.lp-compare-table tbody tr {
  transition: background 0.2s ease;
}

/* Shared badge styles used in both monitoring and lp-reporting comparison tables */
.c-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  margin-right: 8px;
  flex-shrink: 0;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.c-badge-yes { background: var(--brand); color: var(--white); }
.c-badge-no  { background: rgba(0,34,78,0.1); color: rgba(0,34,78,0.4); }

/* ══════════════════════════════
   16. SECTION ACCENT RULE
      Thin flame-colored top rule on key sections
══════════════════════════════ */

.pe-overview-section {
  position: relative;
}

.pe-overview-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--flame) 0%, transparent 60%);
}

/* ══════════════════════════════
   17. NUMBERED TABLE ROWS REVEAL
══════════════════════════════ */

.numbered-row {
  transition: background 0.2s ease;
}
.numbered-row:hover {
  background: rgba(236, 244, 250, 0.5);
}

/* ══════════════════════════════
   18. FOOTER SUBTLE ENHANCEMENTS
══════════════════════════════ */

footer {
  border-top: 2px solid var(--border);
}

/* ══════════════════════════════
   19. HERO LOGO STRIP
══════════════════════════════ */

.logo-strip {
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--border);
  border-bottom: none;
}

.logo-strip-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 20px;
  text-align: center;
}

.logo-strip-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3.5vw, 48px);
  flex-wrap: wrap;
}

.logo-strip-pair {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.5vw, 48px);
}

.logo-strip-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.logo-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--navy);
  border: 1px solid rgba(107,174,255,0.2);
  padding: 10px 14px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

.logo-strip-link:hover .logo-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.logo-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--navy);
}

.logo-tooltip-name {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-sky);
  margin-bottom: 7px;
}

.logo-tooltip-tags {
  margin: 0;
  font-size: 12px;
  font-weight: 300;
  color: var(--white);
  letter-spacing: 0.01em;
}

.logo-strip-logo {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  opacity: 0.38;
  filter: grayscale(100%);
  transition: opacity 0.22s ease, filter 0.22s ease, transform 0.22s ease;
}

.logo-strip-link:hover .logo-strip-logo {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.08);
}

.logo-strip-logo--invert {
  filter: invert(1) grayscale(100%);
}

.logo-strip-link:hover .logo-strip-logo--invert {
  filter: invert(1) grayscale(0%);
}

@media (max-width: 768px) {
  .logo-strip-logos {
    gap: clamp(16px, 4vw, 28px);
  }
  .logo-strip-logo {
    height: 34px;
    max-width: 130px;
  }
}

/* ══════════════════════════════
   RESPONSIVE OVERRIDES
══════════════════════════════ */

@media (max-width: 1024px) {
  .contact-hero-grid {
    grid-template-columns: 1fr;
  }

  .c-steps::before,
  .vc-steps::before,
  .er-steps::before,
  .lp-steps::before {
    left: 24px;
  }
}

@media (max-width: 768px) {
  .hdp { display: none; }

  .hero-scroll-cue { display: none; }

  .c-steps::before,
  .vc-steps::before,
  .er-steps::before,
  .lp-steps::before {
    left: 22px;
  }

  .contact-trust-stat {
    grid-template-columns: 1fr 1fr;
  }
}