/* ══════════════════════════════════════════════════════════
   SoS PH PROJECT PAGE — sosph.css
   Brand colours:
     Peach:    #F79489
     Pink:     #FF738E
     Red-pink: #E55754
     Orange:   #EB8664
     Black:    #3B3535
     BG:       #EFF0EB
══════════════════════════════════════════════════════════ */

/* ── Page base ───────────────────────────────────────────── */
body.sosph-page {
  background: #EFF0EB;
  color: #3B3535;
  font-family: 'Inter', 'Rethink Sans', sans-serif;
}

.sosph-page h1,
.sosph-page h2,
.sosph-page h3,
.sosph-page p,
.sosph-page span,
.sosph-page a,
.sosph-page button { font-family: 'Inter', 'Rethink Sans', sans-serif; color: inherit; }

/* ── Section title ───────────────────────────────────────── */
.sosph-page .vp-section-title { color: #3B3535; }

/* ── Hero logo — larger than base 52px ───────────────────── */
.sosph-page .vp-hero-logo,
.sos-hero-logo { height: 80px; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.sosph-page .vp-tag {
  background: #E55754;
  color: #EFF0EB !important;
  border-color: #E55754;
}
.sosph-page .vp-tag--date {
  background: transparent;
  color: #000000 !important;
  border-color: #DDD8D0;
}
.sosph-page .vp-back       { color: #E55754; }
.sosph-page .vp-back:hover { color: #FF738E; }

/* ── Hero chips ──────────────────────────────────────────── */
.sosph-page .vp-chip {
  background: #E55754;
  color: #EFF0EB !important;
  border-color: #E55754;
}

/* ── Results metrics ─────────────────────────────────────── */
.sosph-page .vp-results {
  border-top-color: #DDD8D0;
  border-bottom-color: #DDD8D0;
}
.sosph-page .vp-metric {
  background: #E55754;
  border-color: #E55754;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.sosph-page .vp-metric:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(229,87,84,0.25);
}
.sosph-page .vp-metric-value { color: #EFF0EB; }
.sosph-page .vp-metric-label { color: #EFF0EB; opacity: 0.8; }

/* "Live" — sized to match card height of numeric values */
.sos-metric-label {
  font-family: 'Rethink Sans', sans-serif !important;
  font-weight: 800;
  font-size: clamp(1.75rem, 3.5vw, 2.6rem) !important;
  line-height: 1;
  color: #EFF0EB !important;
}

/* ── Quote ───────────────────────────────────────────────── */
.sosph-page .vp-quote {
  background: #E55754;
  border-left-color: #FF738E;
  border-top-color: #C94441;
  border-right-color: #C94441;
  border-bottom-color: #C94441;
  color: #EFF0EB;
}

/* ── Problem diagram ─────────────────────────────────────── */
.sosph-page .vp-lag-container {
  background: #EFF0EB;
  border-color: #DDD8D0;
}
.sosph-page .vp-lag-arrow { color: #F79489; font-weight: 700; }
.sosph-page .vp-lag-quote { color: #3B3535; opacity: 0.7; }

/* Pain point issue cards */
.sos-issues-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(229,87,84,0.15);
}
@media (max-width: 640px) {
  .sos-issues-grid { grid-template-columns: 1fr; }
}
.sos-issue-card {
  border-radius: 12px;
  padding: 1rem 1rem 1.1rem;
  border: 1.5px solid;
  text-align: left;
}
.sos-issue-card strong {
  display: block;
  font-size: 0.80rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.sos-issue-card p {
  font-size: 0.72rem;
  line-height: 1.55;
  margin: 0;
}
.sos-issue--pink {
  background: rgba(255,115,142,0.09);
  border-color: rgba(255,115,142,0.35);
}
.sos-issue--pink strong { color: #d63a5a; }
.sos-issue--pink p { color: rgba(50,30,35,0.72); }

.sos-issue--redpink {
  background: rgba(229,87,84,0.09);
  border-color: rgba(229,87,84,0.35);
}
.sos-issue--redpink strong { color: #c0393a; }
.sos-issue--redpink p { color: rgba(50,30,30,0.72); }

.sos-issue--orange {
  background: rgba(235,134,100,0.09);
  border-color: rgba(235,134,100,0.35);
}
.sos-issue--orange strong { color: #b85a30; }
.sos-issue--orange p { color: rgba(50,35,28,0.72); }

/* Scattered Presence — pink */
.sos-box--pink {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.75rem 2.5rem;
  border-radius: 16px;
  background: #FF738E;
  border: 1.5px solid #FF738E;
  font-weight: 700;
  font-size: 1.05rem;
  color: #EFF0EB;
  min-width: 180px;
  text-align: center;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.sos-box--pink:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(255,115,142,0.35);
}
.sos-box--pink .vp-lag-sub { color: rgba(239,240,235,0.8); }

/* Platform Lag — orange */
.sos-box--orange {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.75rem 2.5rem;
  border-radius: 16px;
  background: #EB8664;
  border: 1.5px solid #EB8664;
  font-weight: 700;
  font-size: 1.05rem;
  color: #EFF0EB;
  min-width: 180px;
  text-align: center;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.sos-box--orange:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(235,134,100,0.35);
}
.sos-box--orange .vp-lag-sub { color: rgba(239,240,235,0.8); }

/* Visual Inconsistency gap — red-pink override */
.sosph-page .vp-lag-box--gap {
  background: #E55754;
  border-color: #E55754;
  color: #EFF0EB;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.sosph-page .vp-lag-box--gap:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(229,87,84,0.35);
}
.sosph-page .vp-lag-box--gap .vp-lag-sub { color: rgba(239,240,235,0.8); }

/* ── Process ─────────────────────────────────────────────── */
.sosph-page .vp-process {
  border-top-color: #DDD8D0;
  border-bottom-color: #DDD8D0;
}

/* 2-column grid (4 steps, no dividers) */
.sosph-page .vp-process-steps {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 640px) {
  .sosph-page .vp-process-steps {
    grid-template-columns: 1fr;
  }
}

/* Process & solution title overrides */
.sosph-page .vp-step-title {
  font-size: 1.25rem;
  font-weight: 600;
}
.sosph-page .vp-feature-title {
  font-size: 1.2rem;
  font-weight: 600;
}

/* Hover lift on all process steps */
.sosph-page .vp-step {
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.sosph-page .vp-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.14);
}

/* Phase 1 — red-pink */
.sosph-page .vp-process-steps > .vp-step:nth-child(1) {
  background: #E55754;
  border-color: #E55754;
}
.sosph-page .vp-process-steps > .vp-step:nth-child(1) .vp-step-num,
.sosph-page .vp-process-steps > .vp-step:nth-child(1) .vp-step-title,
.sosph-page .vp-process-steps > .vp-step:nth-child(1) .vp-step-desc { color: #EFF0EB; }

/* Phase 2 — pink */
.sosph-page .vp-process-steps > .vp-step:nth-child(2) {
  background: #FF738E;
  border-color: #FF738E;
}
.sosph-page .vp-process-steps > .vp-step:nth-child(2) .vp-step-num,
.sosph-page .vp-process-steps > .vp-step:nth-child(2) .vp-step-title,
.sosph-page .vp-process-steps > .vp-step:nth-child(2) .vp-step-desc { color: #EFF0EB; }

/* Phase 3 — orange */
.sosph-page .vp-process-steps > .vp-step:nth-child(3) {
  background: #EB8664;
  border-color: #EB8664;
}
.sosph-page .vp-process-steps > .vp-step:nth-child(3) .vp-step-num,
.sosph-page .vp-process-steps > .vp-step:nth-child(3) .vp-step-title,
.sosph-page .vp-process-steps > .vp-step:nth-child(3) .vp-step-desc { color: #EFF0EB; }

/* Phase 4 — peach */
.sosph-page .vp-process-steps > .vp-step:nth-child(4) {
  background: #F79489;
  border-color: #F79489;
}
.sosph-page .vp-process-steps > .vp-step:nth-child(4) .vp-step-num,
.sosph-page .vp-process-steps > .vp-step:nth-child(4) .vp-step-title,
.sosph-page .vp-process-steps > .vp-step:nth-child(4) .vp-step-desc { color: #3B3535; }

/* ── Corner tag pill ─────────────────────────────────────── */
.sos-corner-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.sos-tag--orange  { background: #EB8664; color: #EFF0EB !important; }
.sos-tag--redpink { background: #E55754; color: #EFF0EB !important; }
.sos-tag--pink    { background: #FF738E; color: #EFF0EB !important; }
.sos-tag--peach   { background: #F79489; color: #3B3535 !important; }

/* ── Feature cards ───────────────────────────────────────── */

/* Red-pink card — Brand */
.sos-card--redpink {
  background: #E55754;
  border: 1.5px solid #E55754;
  border-radius: var(--radius-20);
  padding: 1.75rem 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  min-height: 440px;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.sos-card--redpink:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(229,87,84,0.3);
}
.sos-card--redpink .vp-feature-title { color: #EFF0EB; }
.sos-card--redpink .vp-feature-desc  { color: rgba(239,240,235,0.85); }
.sos-card--redpink .vp-feature-mockup-wrap { border-top-color: rgba(239,240,235,0.2); }

/* Pink card — Motion */
.sos-card--pink {
  background: #FF738E;
  border: 1.5px solid #FF738E;
  border-radius: var(--radius-20);
  padding: 1.75rem 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  min-height: 440px;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.sos-card--pink:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(255,115,142,0.3);
}
.sos-card--pink .vp-feature-title { color: #EFF0EB; }
.sos-card--pink .vp-feature-desc  { color: rgba(239,240,235,0.85); }
.sos-card--pink .vp-feature-mockup-wrap { border-top-color: rgba(239,240,235,0.2); }

/* Orange card — Multimedia */
.sos-card--orange {
  background: #EB8664;
  border: 1.5px solid #EB8664;
  border-radius: var(--radius-20);
  padding: 1.75rem 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  min-height: 440px;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.sos-card--orange:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(235,134,100,0.3);
}
.sos-card--orange .vp-feature-title { color: #EFF0EB; }
.sos-card--orange .vp-feature-desc  { color: rgba(239,240,235,0.85); }
.sos-card--orange .vp-feature-mockup-wrap { border-top-color: rgba(239,240,235,0.2); }

/* Peach card — Scalable */
.sos-card--peach {
  background: #F79489;
  border: 1.5px solid #F79489;
  border-radius: var(--radius-20);
  padding: 1.75rem 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  min-height: 440px;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.sos-card--peach:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(247,148,137,0.3);
}
.sos-card--peach .vp-feature-title { color: #3B3535; }
.sos-card--peach .vp-feature-desc  { color: rgba(59,53,53,0.8); }
.sos-card--peach .vp-feature-mockup-wrap { border-top-color: rgba(59,53,53,0.15); }

/* ── Links ───────────────────────────────────────────────── */
.sosph-page .vp-links { border-top-color: #DDD8D0; }
.sosph-page .vp-link-btn {
  background: #000000 !important;
  color: #EFF0EB !important;
}
.sosph-page .vp-link-btn:hover {
  background: #1a1a1a !important;
  color: #EFF0EB !important;
}

/* ── More projects — match velora styling ────────────────── */
.sosph-page .vp-more          { background: #FDFCFB; border-top-color: #E4E4E7; }
.sosph-page .vp-more-card     { background: #FDFCFB; border-color: #E4E4E7; }
.sosph-page .vp-more-card:hover { box-shadow: 0 16px 48px rgba(96,96,160,0.12); }
.sosph-page .vp-more-img-wrap { background: #F6F1FA; }
.sosph-page .vp-more-title    { color: var(--color-near-black); }
.sosph-page .vp-more-cta      { background: var(--color-lilac-main); color: var(--color-near-black); }
.sosph-page .vp-more-card:hover .vp-more-cta { background: var(--color-soft-lavender); }

/* ── Footer ──────────────────────────────────────────────── */
.sosph-page .cta-footer-area { background: var(--color-soft-lavender); }

.sosph-page .new-footer-heading  { color: var(--color-dark-espresso); font-family: 'Rethink Sans', sans-serif; }
.sosph-page .new-footer-accent   { color: var(--color-dark-espresso); font-family: 'Rethink Sans', sans-serif; }
.sosph-page .new-footer-kry      { color: var(--color-deep-purple);   font-family: 'Parisienne', cursive; }
.sosph-page .new-footer-tagline  { color: var(--color-ivory);         font-family: 'Rethink Sans', sans-serif; }
.sosph-page .new-footer-col-label{ color: var(--color-deep-purple);   font-family: 'Rethink Sans', sans-serif; }
.sosph-page .new-footer-link     { color: var(--color-dark-espresso); font-family: 'Rethink Sans', sans-serif; }
.sosph-page .new-footer-link:hover { color: var(--color-deep-purple); }
.sosph-page .new-footer-info     { color: var(--color-dark-espresso); font-family: 'Rethink Sans', sans-serif; }
.sosph-page .new-footer-copy     { color: var(--color-ivory);         font-family: 'Rethink Sans', sans-serif; }


/* ══════════════════════════════════════════════════════════
   SOSPH — RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Tablet (768–1024px) ─────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  .sos-issues-grid { grid-template-columns: repeat(2, 1fr); }
  .sosph-page .vp-more-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile (< 768px) ───────────────────────────────────── */
@media (max-width: 767px) {
  .sos-box--pink,
  .sos-box--orange {
    min-width: unset;
    width: 100%;
    padding: 1rem 1.25rem;
  }
  .sosph-page .vp-process-steps { grid-template-columns: 1fr !important; }
  /* Feature cards — reduce fixed min-height on mobile */
  .sos-card--redpink,
  .sos-card--pink,
  .sos-card--orange,
  .sos-card--peach { min-height: auto; padding: 1.5rem 1.5rem 0; }
  /* Breadcrumb padding for sticky nav */
  .sosph-page .vp-breadcrumb { padding-top: 5.5rem; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}