/* =======================================================
   STRATNEST SHARED THEME — applied on all interior pages
   Two-colour: Dark Teal (#051A1F) + Warm Ivory (#F5F0E8)
   ======================================================= */

:root {
  --teal-dark:   #051A1F;
  --teal-mid:    #07272E;
  --teal-light:  #0C3640;
  --ivory:       #F5F0E8;
  --ivory-warm:  #EDE6D6;
  --ivory-border:#D4C9B0;
  --text-dark:   #1A2832;
  --text-mid:    #374151;
  --text-light:  #6B7280;
  --amber:       #7B5E2A;
}

/* ---- BODY & GLOBAL ---- */
body { background: var(--teal-dark) !important; }

/* ---- NAVBAR ---- */
#navbar {
  background: rgba(7,39,46,0.97) !important;
  border-bottom: 1px solid rgba(0,212,255,0.15) !important;
}
#navbar.scrolled { background: rgba(5,26,31,0.99) !important; }

/* ---- LOGO pill (navbar + footer) ---- */
.nav-logo img {
  background: #fff !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  height: 46px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}
footer .nav-logo img,
footer img[alt="Stratnest"] {
  background: #fff !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  height: 44px !important;
  object-fit: contain !important;
}

/* ---- PAGE HERO (always dark teal) ---- */
.page-hero {
  background: linear-gradient(135deg, #051A1F 0%, #07272E 55%, #051C22 100%) !important;
}

/* ---- METRICS BAR (dark teal strip) ---- */
.metrics-bar-strip {
  background: var(--teal-mid);
  border-bottom: 1px solid rgba(201,168,76,0.15);
  padding: 2rem 0;
}
.metrics-row {
  display: flex;
  gap: 2rem;
  justify-content: space-around;
  flex-wrap: wrap;
}
.metric-item { text-align: center; }
.metric-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}
.metric-num span { color: var(--gold, #C9A84C); }
.metric-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em;
  margin-top: 0.3rem;
}

/* ---- MAIN SERVICE LAYOUT ---- */
.svc-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 3rem;
  align-items: start;
}
@media(max-width: 900px) {
  .svc-layout { grid-template-columns: 1fr; }
  .svc-sidebar { display: none; }
}

/* ---- SIDEBAR ---- */
.svc-sidebar { position: sticky; top: 90px; }
.sidebar-nav-block {
  background: var(--teal-mid);
  border: 1px solid rgba(0,212,255,0.15);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.sidebar-nav-block h5 {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 1rem;
}
.sidebar-nav-block a {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  font-size: 0.83rem;
  color: rgba(255,255,255,0.65);
  transition: all 0.2s;
  margin-bottom: 0.2rem;
}
.sidebar-nav-block a:hover,
.sidebar-nav-block a.active {
  background: rgba(0,212,255,0.1);
  color: #00D4FF;
}
.sidebar-cta-block {
  background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(0,212,255,0.06));
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 14px;
  padding: 1.5rem;
  text-align: center;
}
.sidebar-cta-block h4 { font-size: 1rem; margin-bottom: 0.6rem; }
.sidebar-cta-block p  { font-size: 0.82rem; color: rgba(255,255,255,0.55); margin-bottom: 1rem; }

/* ---- SECTION BANDS ---- */
.band-dark   { background: var(--teal-dark); padding: 4rem 0; }
.band-mid    { background: var(--teal-mid);  padding: 4rem 0; }
.band-ivory  {
  background: var(--ivory);
  padding: 4rem 0;
}
.band-ivory h2, .band-ivory h3, .band-ivory h4 { color: var(--text-dark) !important; }
.band-ivory p { color: var(--text-mid) !important; }
.band-ivory .section-eyebrow { color: var(--amber) !important; }

.band-ivory-warm {
  background: var(--ivory-warm);
  padding: 4rem 0;
}
.band-ivory-warm h2, .band-ivory-warm h3, .band-ivory-warm h4 { color: var(--text-dark) !important; }
.band-ivory-warm p { color: var(--text-mid) !important; }
.band-ivory-warm .section-eyebrow { color: var(--amber) !important; }

/* ---- SERVICE FEATURE CARDS (ivory bands) ---- */
.svc-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}
@media(max-width:700px){ .svc-cards-grid { grid-template-columns: 1fr; } }

.svc-feature-card {
  background: #fff;
  border: 1px solid var(--ivory-border);
  border-radius: 14px;
  padding: 1.5rem;
  transition: all 0.25s;
  border-left: 4px solid transparent;
}
.svc-feature-card:hover {
  border-color: var(--ivory-border);
  border-left-color: #07272E;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(7,39,46,0.1);
}
.svc-feature-card .card-icon { font-size: 1.8rem; margin-bottom: 0.75rem; }
.svc-feature-card h4 { font-size: 0.95rem; color: var(--text-dark) !important; margin-bottom: 0.4rem; }
.svc-feature-card p  { font-size: 0.84rem; color: var(--text-mid) !important; margin: 0; line-height: 1.6; }

/* ---- PROCESS STEPS (dark band) ---- */
.process-steps { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.5rem; }
.process-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.5rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  transition: all 0.25s;
}
.process-step:hover { background: rgba(0,212,255,0.04); border-color: rgba(0,212,255,0.15); }
.step-num {
  width: 42px; height: 42px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(201,168,76,0.2), rgba(0,212,255,0.1));
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800; font-size: 0.9rem;
  color: var(--gold, #C9A84C);
}
.step-content h4 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.step-content p  { font-size: 0.84rem; color: rgba(255,255,255,0.55); margin: 0; line-height: 1.6; }

/* ---- DELIVERABLES LIST ---- */
.deliverables-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; }
.deliv-item {
  display: flex; align-items: flex-start; gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  background: #fff;
  border: 1px solid var(--ivory-border);
  border-radius: 10px;
}
.deliv-check {
  width: 22px; height: 22px; flex-shrink: 0;
  background: var(--teal-mid);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.7rem; font-weight: 700;
  margin-top: 2px;
}
.deliv-item span { font-size: 0.88rem; color: var(--text-dark); line-height: 1.5; }

/* ---- WHY STRATNEST PILLARS ---- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}
@media(max-width:650px){ .why-grid { grid-template-columns: 1fr; } }
.why-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 1.5rem;
  transition: all 0.25s;
}
.why-card:hover { background: rgba(201,168,76,0.06); border-color: rgba(201,168,76,0.2); }
.why-card .wicon { font-size: 1.8rem; margin-bottom: 0.75rem; }
.why-card h4 { font-size: 0.95rem; margin-bottom: 0.4rem; }
.why-card p  { font-size: 0.84rem; color: rgba(255,255,255,0.55); margin: 0; line-height: 1.6; }

/* ---- SECTORS GRID ---- */
.sectors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
}
@media(max-width:700px){ .sectors-grid { grid-template-columns: repeat(2,1fr); } }
.sector-chip {
  background: #fff;
  border: 1px solid var(--ivory-border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  text-align: center;
  transition: all 0.25s;
}
.sector-chip:hover { border-color: var(--teal-mid); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(7,39,46,0.1); }
.sector-chip .si { font-size: 1.5rem; margin-bottom: 0.4rem; }
.sector-chip h5 { font-size: 0.8rem; color: var(--text-dark) !important; margin: 0; font-weight: 600; }
.sector-chip p  { font-size: 0.7rem; color: var(--text-light) !important; margin: 0.2rem 0 0; line-height: 1.4; }

/* ---- CTA BANNER ---- */
.svc-cta-banner {
  padding: 2.5rem;
  background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(0,212,255,0.04));
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 20px;
  text-align: center;
  margin-top: 3rem;
}
.svc-cta-banner h3 { margin-bottom: 0.75rem; }
.svc-cta-banner p  { margin-bottom: 1.75rem; max-width: 500px; margin-left: auto; margin-right: auto; color: rgba(255,255,255,0.6); }
.svc-cta-banner .btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---- FOOTER (dark teal) ---- */
footer { background: var(--teal-dark) !important; }

/* ---- HONORARY CARDS — responsive ---- */
@media(max-width: 600px) {
  .honorary-h-card { flex-direction: column !important; }
  .honorary-h-card .honorary-photo-col {
    width: 100% !important;
    height: 140px !important;
    border-right: none !important;
    border-bottom: 1px solid #D4C9B0;
    flex-direction: row !important;
    padding: 1rem !important;
  }
}

/* ---- MOTION VIDEO in story wrapper ---- */
.story-img-wrapper { overflow: hidden; }
.motion-video-wrap { width: 100%; height: 100%; position: absolute; inset: 0; }
.motion-logo-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}