/* =========================================================
   Section rhythm — vertical spacing + soft transitions
   Does NOT resize internal clarity diagram / cards / type.
   ========================================================= */

:root{
  --section-space-desktop:clamp(76px,7vw,112px);
  --section-space-tablet:clamp(64px,7vw,88px);
  --section-space-mobile:clamp(48px,10vw,68px);
  --space-section:var(--section-space-desktop);
  --space-section-dense:clamp(64px,6vw,88px);
  --space-section-soft:clamp(64px,7vw,80px);
  --space-heading-content:clamp(44px,5vw,64px);
  --space-title-description:20px;
  --space-content-cta:2rem;
  --space-section-x:clamp(1rem,3vw,2.5rem);
  --title-to-description:20px;
  --description-to-visual:clamp(44px,5vw,64px);
  --visual-to-section-end:clamp(64px,6vw,92px);
}

/* ---- Soft section transitions (light → light) ---- */
.clarity,
.process,
.services,
.difference{
  position:relative;
}
/* process owns the handoff line at its top — clarity has no bottom hairline */
.services::after,
.difference::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:min(100% - 2 * var(--space-section-x),1120px);
  max-width:1120px;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(17,17,17,.06) 18%,
    rgba(255,106,0,.14) 50%,
    rgba(17,17,17,.06) 82%,
    transparent 100%
  );
  pointer-events:none;
  z-index:2;
}
/* No hairline into dark sections */
.services:has(+ .method)::after,
.difference:has(+ .social-strip)::after{display:none}

/* Subtle off-white progression (not a hard cut) */
.clarity{
  background:
    linear-gradient(180deg,#f7f4ef 0%,#f5f2ec 100%)!important;
}
/* process background owned by process-flow.css */
.services{
  background:
    linear-gradient(180deg,#f7f4ef 0%,#f3f0e9 100%)!important;
}
.difference{
  background:
    linear-gradient(180deg,#f3f0e9 0%,#f7f4ef 40%,#f5f2ec 100%)!important;
}

/* =========================================================
   Section shell paddings (external rhythm only)
   ========================================================= */

/* Trusted strip under hero — layout height owned by hero-anim-final.css */
.hero-trusted{
  /* não forçar padding que quebra height:64px da faixa */
  padding:0!important;
}

/* Clarity: keep composition; tighten only outer shell + head→content */
.clarity{
  padding:
    clamp(64px,7vw,96px)
    var(--space-section-x)
    var(--space-section-soft)!important;
  gap:var(--space-heading-content)!important;
}
.clarity__head{
  gap:var(--space-title-description)!important;
  margin:0 auto!important;
}

.process{min-height:0!important}

/* Services intro + first block: services-web.css */
.service-experience:not(.service-experience--web){
  min-height:0!important;
  padding:clamp(2.5rem,4.5vw,3.75rem) 0!important;
}
.service-art{
  min-height:clamp(320px,42vw,440px)!important;
}

/* Method cards */
.method--cards{
  padding:var(--space-section) 0!important;
}
.method-cards__intro{
  margin-bottom:var(--space-heading-content)!important;
}
.method-cards__intro h2{
  margin:.2rem 0 .85rem!important;
}

/* Difference — denser than full section rhythm (one viewport) */
.difference{
  padding:clamp(48px,5.5vw,72px) 0!important;
}
.difference__heading{
  margin-bottom:clamp(1.15rem,2.2vw,1.65rem)!important;
  gap:clamp(.85rem,2vw,1.25rem)!important;
}
.difference__heading h2{
  font-size:clamp(1.85rem,3.4vw,2.65rem)!important;
  line-height:1.08!important;
}
.difference__heading>p:last-child{
  margin-top:.15rem!important;
  font-size:clamp(.9rem,1.15vw,1rem)!important;
  line-height:1.5!important;
}
/* stage height owned by difference-console.css */
.difference-stage{
  min-height:0!important;
}

/* Social */
.social-strip{
  padding:var(--space-section-dense) 0!important;
}

/* Contact — stop forcing tall empty viewport */
.contact{
  min-height:0!important;
}
.contact__content{
  padding:var(--space-section) 0!important;
}
.contact__content>p:not(.eyebrow){
  margin:1.15rem auto 1.5rem!important;
}

/* Footer — layout owned by revel-footer.css */
.footer:not(.footer--revel){
  padding:clamp(2.75rem,5vw,4rem) 0 1.5rem!important;
}

/* =========================================================
   Responsive rhythm
   ========================================================= */
@media (max-width:960px){
  :root{
    --space-section:clamp(56px,8vw,80px);
    --space-section-dense:clamp(48px,7vw,72px);
    --space-section-soft:clamp(48px,6vw,64px);
    --space-heading-content:clamp(32px,5vw,48px);
  }
  .service-experience{padding:clamp(2.25rem,5vw,3.25rem) 0!important}
  .service-art{min-height:clamp(280px,50vw,380px)!important}
}

@media (max-width:720px){
  :root{
    --space-section:clamp(48px,10vw,64px);
    --space-section-dense:clamp(44px,9vw,56px);
    --space-section-soft:clamp(36px,8vw,48px);
    --space-heading-content:clamp(28px,6vw,40px);
    --space-title-description:1rem;
  }
  .hero-trusted{
    padding:12px 24px 22px!important;
  }
  .clarity{
    padding:
      clamp(48px,10vw,64px)
      1rem
      var(--space-section-soft)!important;
  }

  .services__intro{
    padding:var(--space-section) 0 1.5rem!important;
  }
  .difference-stage{
    min-height:320px!important;
  }
  .contact__content{
    padding:var(--space-section) 0!important;
  }
  .social-strip{
    padding:var(--space-section-dense) 0!important;
  }
}

/* Hairline full-bleed fallback for older browsers without :has */
@supports not selector(:has(*)){
  .services::after,
  .difference::after{display:none}
}