/* =====================================================
   SERVICES PAGE — SCREEN FIT
   Every major section = 100vh, content vertically centred.
   Loaded last; overrides all prior service CSS.
   ===================================================== */

/* ── SHARED BASE ─────────────────────────────────────── */
.page-hero,
.starting-points,
.service-suite,
.proof-strip,
.process-section,
.engagements,
.hire-team-band,
.team-roster-band,
.services-faq,
.related-posts,
.cta-section {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Service blocks (6 individual services) each = 100vh */
.service-details { padding: 0 !important; }

.service-block {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.service-block > .container { width: 100%; }

/* ── HERO: 100vh ─────────────────────────────────────── */
.page-hero .container {
  padding-top: 5rem !important;
  padding-bottom: 2rem !important;
}

.page-hero h1 {
  font-size: clamp(2.6rem, 5vw, 5rem) !important;
  line-height: 0.95 !important;
  margin-bottom: 1.1rem !important;
}

.page-hero p {
  font-size: 1rem !important;
  margin-bottom: 0 !important;
}

.service-proof { margin-top: 1.25rem !important; }

.service-hero-metrics {
  margin-top: 1rem !important;
}

.service-hero-metrics div {
  min-height: 76px !important;
  padding: 0.75rem !important;
}

.service-hero-metrics strong {
  font-size: clamp(1.1rem, 1.8vw, 1.6rem) !important;
  margin-bottom: 0.3rem !important;
}

/* Hero image column: constrained height so it stays within screen */
.service-hero-art {
  min-height: clamp(240px, 28vh, 380px) !important;
  max-height: 42vh !important;
}

.service-hero-art img {
  max-height: 42vh !important;
  object-fit: cover !important;
}

/* ── SERVICE NAV: sticky strip (not full screen) ─────── */
.service-nav {
  position: sticky !important;
  top: 68px !important;
  z-index: 50 !important;
  background: rgba(6, 8, 16, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  margin-top: 1.5rem !important;
  min-height: unset !important;
  padding: 0 !important;
}

.service-nav-inner {
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  box-shadow: none !important;
}

.service-nav a {
  min-height: 64px !important;
}

/* ── STARTING POINTS: 100vh ──────────────────────────── */
.starting-points .container { width: 100%; }

.starting-points .section-title {
  font-size: clamp(1.7rem, 3vw, 2.6rem) !important;
  margin-bottom: 0.7rem !important;
}

.starting-points-inner {
  gap: clamp(1.5rem, 3vw, 3rem) !important;
}

.start-grid article {
  min-height: 96px !important;
  padding: 0.85rem !important;
}

.start-grid span { font-size: 0.78rem !important; margin-bottom: 0.35rem !important; }
.start-grid strong { font-size: 0.9rem !important; }

/* ── SERVICE SUITE: 100vh ────────────────────────────── */
.service-suite .container { width: 100%; }

.service-suite-head { margin-bottom: 1.25rem !important; }

.service-suite .section-title {
  font-size: clamp(1.7rem, 3vw, 2.6rem) !important;
}

.service-suite-grid {
  gap: 0.75rem !important;
}

.service-suite-grid article {
  min-height: 220px !important;
  padding: 1rem !important;
}

.service-suite-grid h3 { font-size: 1rem !important; margin-bottom: 0.45rem !important; }
.service-suite-grid p  { font-size: 0.8rem !important; line-height: 1.6 !important; }
.suite-meta { padding-top: 0.65rem !important; }
.suite-meta span { font-size: 0.56rem !important; }
.suite-meta strong { font-size: 0.8rem !important; margin-top: 0.15rem !important; }
.service-suite-grid a { margin-top: 0.55rem !important; }

/* ── SERVICE BLOCKS: each 100vh ──────────────────────── */
.sb-inner {
  gap: clamp(1.5rem, 4vw, 4rem) !important;
  padding: 1rem !important;
}

.sb-inner > div:first-child {
  padding: 0.5rem 1rem !important;
}

.sb-num { margin-bottom: 0.5rem !important; }

.sb-icon {
  width: 48px !important;
  height: 48px !important;
  margin: 0.75rem 0 0.75rem !important;
}

.sb-title {
  font-size: clamp(1.7rem, 2.8vw, 2.6rem) !important;
  margin-bottom: 0.65rem !important;
}

.sb-desc {
  font-size: 0.87rem !important;
  line-height: 1.65 !important;
  margin-bottom: 0.85rem !important;
}

/* Stat callout inside service block */
.sb-inner > div > div:has(> strong) {
  padding: 0.55rem 0.8rem !important;
  margin: 0.5rem 0 0.85rem !important;
}

.sb-features { gap: 0.4rem !important; margin-bottom: 1rem !important; }
.sb-features li { padding: 0.42rem 0.65rem !important; font-size: 0.8rem !important; min-height: unset !important; }

.sb-tags { margin-bottom: 0.85rem !important; }
.stag { font-size: 0.6rem !important; padding: 0.22rem 0.55rem !important; }

/* Visual panel: fit within screen */
.service-shot {
  aspect-ratio: 4 / 3 !important;
  max-height: 50vh !important;
}

.service-shot img { max-height: 50vh !important; }

/* ── PROOF STRIP: 100vh ──────────────────────────────── */
.proof-strip .container { width: 100%; }

.proof-strip .section-title {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem) !important;
}

.proof-strip-head { margin-bottom: 1.25rem !important; }

.proof-grid { gap: 0.75rem !important; }

.proof-grid img { aspect-ratio: 16 / 8 !important; }

.proof-grid article div { padding: 0.8rem !important; }
.proof-grid h3 { font-size: 0.95rem !important; margin: 0.3rem 0 0.3rem !important; }
.proof-grid p   { font-size: 0.78rem !important; line-height: 1.55 !important; }

/* ── PROCESS: 100vh ──────────────────────────────────── */
.process-section .container { width: 100%; }

.process-section .section-title {
  font-size: clamp(1.7rem, 3vw, 2.6rem) !important;
  margin-bottom: 0.5rem !important;
}

.process-steps { margin-top: 1.5rem !important; }

.ps-item {
  min-height: 180px !important;
  padding: 1.4rem 1.1rem !important;
}

.ps-num {
  width: 44px !important;
  height: 44px !important;
  font-size: 0.95rem !important;
  margin-bottom: 0.9rem !important;
}

.ps-title { font-size: 0.95rem !important; margin-bottom: 0.35rem !important; }
.ps-desc  { font-size: 0.78rem !important; }

.process-note { margin-top: 1rem !important; font-size: 0.82rem !important; }

/* ── ENGAGEMENTS: 100vh ──────────────────────────────── */
.engagements .container { width: 100%; }

.engagements-head { margin-bottom: 1.25rem !important; }

.engagements .section-title {
  font-size: clamp(1.7rem, 3vw, 2.6rem) !important;
}

.engagement-grid { gap: 0.85rem !important; }

.engagement-grid article {
  min-height: 280px !important;
  padding: 1.1rem !important;
}

.engagement-grid h3 { font-size: 1.1rem !important; margin-bottom: 0.55rem !important; }
.engagement-grid p  { font-size: 0.82rem !important; line-height: 1.6 !important; }
.engagement-grid ul { gap: 0.45rem !important; margin-top: 0.85rem !important; }
.engagement-grid li { font-size: 0.8rem !important; }

/* ── HIRE TEAM: 100vh ────────────────────────────────── */
.hire-team-band .container { width: 100%; }

.hire-team-band .section-title {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem) !important;
  margin-bottom: 0.65rem !important;
}

.hire-team-inner {
  gap: clamp(1.5rem, 3vw, 3rem) !important;
  padding: 1.1rem !important;
}

.hire-team-copy p { font-size: 0.85rem !important; line-height: 1.7 !important; }
.hire-team-actions { margin-top: 1rem !important; gap: 0.65rem !important; }

.team-pods { gap: 0.6rem !important; }
.team-pods article { padding: 0.85rem !important; }
.team-pods h3 { font-size: 0.95rem !important; margin: 0.25rem 0 0.25rem !important; }
.team-pods p  { font-size: 0.8rem !important; line-height: 1.55 !important; }

/* ── TEAM ROSTER: 100vh ──────────────────────────────── */
.team-roster-band .container { width: 100%; }

.team-roster-head { margin-bottom: 1.25rem !important; }

.team-roster-band .section-title {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem) !important;
}

.team-roster-grid { gap: 0.85rem !important; }

.team-member-card {
  min-height: 200px !important;
  padding: 1rem !important;
}

.member-avatar {
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 0.75rem !important;
}

.team-member-card h3 { font-size: 1.02rem !important; margin-bottom: 0.35rem !important; }
.team-member-card p  { font-size: 0.8rem !important; line-height: 1.6 !important; }

/* ── FAQ: 100vh ──────────────────────────────────────── */
.services-faq .container { width: 100%; }

.services-faq .section-title {
  font-size: clamp(1.6rem, 2.8vw, 2.3rem) !important;
  margin-bottom: 0.5rem !important;
}

.faq-layout { gap: clamp(1.5rem, 3vw, 3.5rem) !important; }
.faq-list { gap: 0.45rem !important; }

.faq-list summary { padding: 0.75rem 0.95rem !important; font-size: 0.88rem !important; }
.faq-list p { padding: 0 0.95rem 0.85rem !important; font-size: 0.84rem !important; line-height: 1.65 !important; }

/* ── RELATED POSTS: 100vh ────────────────────────────── */
.related-posts .container { width: 100%; }

.related-posts .section-title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important;
}

.related-posts .section-head { margin-bottom: 1.25rem !important; }

.related-grid {
  margin-top: 1.25rem !important;
  gap: 0.85rem !important;
}

.related-grid article { padding: 1.1rem !important; border-radius: 14px !important; }
.related-grid h3 { font-size: 0.9rem !important; margin-bottom: 0.55rem !important; }
.related-grid p  { font-size: 0.8rem !important; line-height: 1.6 !important; }

/* ── CTA: 100vh ──────────────────────────────────────── */
.cta-section .container { width: 100%; }

.cta-inner h2 {
  font-size: clamp(2.2rem, 4vw, 3.6rem) !important;
  line-height: 0.98 !important;
  margin-bottom: 0.85rem !important;
}

.cta-inner p { font-size: 0.95rem !important; margin-bottom: 1.5rem !important; }

.cta-proof { margin-top: 1rem !important; }

/* ── RESPONSIVE FIXES ────────────────────────────────── */
@media (max-width: 1100px) {
  .service-hero-art { display: none; }
  .service-hero-layout { grid-template-columns: 1fr !important; }

  .starting-points-inner,
  .hire-team-inner {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  .service-nav-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .service-suite-grid,
  .proof-grid,
  .engagement-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .team-roster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .faq-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  /* On mobile, 100vh per section is fine but service-nav collapses */
  .service-nav-inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .service-suite-grid,
  .proof-grid,
  .engagement-grid,
  .start-grid,
  .related-grid,
  .team-roster-grid {
    grid-template-columns: 1fr !important;
  }

  .service-suite-grid article,
  .engagement-grid article {
    min-height: auto !important;
  }

  .sb-inner {
    grid-template-columns: 1fr !important;
  }

  .service-shot { max-height: 35vh !important; }
}