/* =========================================================
   Section rhythm — spacing, surfaces, hero polish (site-wide)
   Load after page-system.css
   ========================================================= */

:root {
  --detail-hero-y: clamp(28px, 4.5vw, 40px);
  --detail-hero-grid-gap: var(--detail-hero-y);
  --detail-hero-stack-gap: var(--detail-hero-y);
}

/* —— Service / case study / industry hero — equal top & bottom inset —— */
.service-detail-hero,
.service-detail-hero.ind-hero {
  padding-top: 120px;
  padding-bottom: 60px !important;
}

.page-industry .service-detail-hero.ind-hero {
  padding-top: 100px;
  padding-bottom: 80px !important;
}

.service-detail-hero .container {
  padding-top: 0;
  padding-bottom: 0;
}

.service-detail-hero .hero-grid {
  gap: var(--detail-hero-grid-gap);
  align-items: start;
}

.service-detail-hero .hero-copy {
  display: flex;
  flex-direction: column;
  max-width: 640px;
}

.service-detail-hero .hero-copy > .pill,
.service-detail-hero .hero-copy > .pill-dark,
.service-detail-hero .hero-copy > .pill-hero,
.service-detail-hero .hero-copy h1,
.service-detail-hero .hero-copy p,
.service-detail-hero .hero-copy .hero-ctas,
.service-detail-hero .hero-copy .cs-stat-pills,
.service-detail-hero .hero-copy .ea-hero-metrics {
  margin: 0 !important;
}

.service-detail-hero .hero-copy h1 {
  text-wrap: balance;
  line-height: 1.08;
  padding-top: 20px;
  padding-bottom: 20px;
}

body[class*="page-"] .service-detail-hero .hero-copy h1 .line-block {
  display: inline !important;
}

.service-detail-hero .hero-copy p:last-of-type {
  margin-bottom: 0;
}

.service-detail-hero .hero-ctas {
  padding-top: 20px;
  gap: 16px;
}

.service-detail-hero .hero-panel,
.service-detail-hero .cs-hero-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-detail-hero .hero-panel .panel-caption,
.service-detail-hero .hero-panel .panel-header,
.service-detail-hero .hero-panel .service-form,
.service-detail-hero .hero-panel .panel-note {
  margin: 0;
}

.page-mobile-app .service-detail-hero .hero-panel .panel-header h2 {
  padding-top: 10px;
}

.service-detail-hero .hero-panel .panel-header h2,
.service-detail-hero .hero-panel .panel-header p {
  margin: 0;
}

.service-detail-hero .hero-panel .panel-header {
  display: flex;
  flex-direction: column;
  gap: calc(var(--detail-hero-stack-gap) * 0.65);
}

/* —— One proposal pill per form surface —— */
.hero-panel [class*="form-badges"],
.project-card [class*="form-badges"],
.contact-right > .pill:not(:first-of-type),
.hero-panel .panel-caption + .panel-caption,
.project-card-top .pill + .pill {
  display: none !important;
}

/* —— Inner page section padding (lighter than marketing homepage) —— */
body[class*="page-"] > section.service-detail-hero ~ section:not(.project-section):not(.contact-section):not(.cta-section):not(.cta-footer):not(.footer-section),
body[class*="page-"] > section.ind-hero ~ section:not(.project-section):not(.contact-section):not(.cta-section):not(.cta-footer):not(.footer-section),
body.page-industry > section.ind-hero ~ section:not(.project-section):not(.contact-section):not(.cta-section),
body.page-case-study > section.service-detail-hero ~ section:not(.project-section):not(.contact-section):not(.cta-section) {
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(48px, 6vw, 72px);
}

/* Zebra surfaces after dark heroes — overrides same-tone stacking */
body[class*="page-"] > section.service-detail-hero ~ section:nth-of-type(2n):not(.project-section):not(.contact-section):not(.cta-section):not(.cta-footer):not(.footer-section),
body[class*="page-"] > section.ind-hero ~ section:nth-of-type(2n):not(.project-section):not(.contact-section):not(.cta-section),
body.page-industry > section.ind-hero ~ section:nth-of-type(2n):not(.project-section):not(.contact-section):not(.cta-section),
body.page-case-study > section.service-detail-hero ~ section:nth-of-type(2n):not(.project-section):not(.contact-section):not(.cta-section) {
  background-color: var(--bg-grey);
}

body[class*="page-"] > section.service-detail-hero ~ section:nth-of-type(2n+1):not(.project-section):not(.contact-section):not(.cta-section):not(.cta-footer):not(.footer-section),
body[class*="page-"] > section.ind-hero ~ section:nth-of-type(2n+1):not(.project-section):not(.contact-section):not(.cta-section),
body.page-industry > section.ind-hero ~ section:nth-of-type(2n+1):not(.project-section):not(.contact-section):not(.cta-section),
body.page-case-study > section.service-detail-hero ~ section:nth-of-type(2n+1):not(.project-section):not(.contact-section):not(.cta-section) {
  background-color: #fff;
}

/* Testimonials band — clearer break from preceding section */
.client-testimonials {
  background: var(--bg-grey-2) !important;
  border-top: 1px solid var(--line);
}

section:has(+ .client-testimonials):not(.project-section):not(.service-detail-hero) {
  padding-bottom: clamp(40px, 5vw, 56px);
}

.client-testimonials {
  padding-top: clamp(40px, 5vw, 56px);
}

/* Card / feature titles — balanced wraps in grids */
[class*="-card"] h3,
[class*="-why-card"] h3,
[class*="-problem-card"] h3,
[class*="-benefit-card"] h3,
.build-service-item h3 {
  text-wrap: balance;
}

@media (max-width: 768px) {
  :root {
    --detail-hero-y: 32px;
  }

  .service-detail-hero .hero-grid {
    gap: var(--detail-hero-grid-gap);
  }

  .service-detail-hero .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .service-detail-hero .hero-ctas .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}