/* ================================================================
   Innov8 — Service page showcase layer
   Loaded only by the 14 service pages. Pure CSS, no JS, so nothing
   depends on script timing or survives-a-rerender behaviour.
   Hooks used already exist in the markup:
     [data-svcp-box]  process + trust boxes
     [data-depth-card] in-depth cards
     [data-svc-box]   service tiles
     [data-cta-glow]  quote CTA panel
     [data-ghost]     section-level ghost wordmark (added per page)
   ================================================================ */

/* ---------- keyframes ---------- */
@keyframes scRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes scFade{from{opacity:0}to{opacity:1}}
@keyframes scGlow{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}}
@keyframes scSweep{0%{background-position:170% 0}100%{background-position:-70% 0}}
@keyframes scBeam{0%{transform:translateX(-120%) skewX(-18deg)}55%,100%{transform:translateX(320%) skewX(-18deg)}}
@keyframes scScan{0%{top:-8%;opacity:0}12%{opacity:.85}88%{opacity:.85}100%{top:104%;opacity:0}}
@keyframes scDash{to{stroke-dashoffset:0}}
@keyframes scRail{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes scOrbit{to{transform:rotate(360deg)}}
@keyframes scDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(14px,-10px,0)}}

/* ---------- 1. Section ghost wordmark ---------- */
[data-ghost]{position:relative;overflow:clip;counter-reset:scstep}
/* sections holding sticky headings must not create a clip container */
[data-ghost]:has(h2[style*="position:sticky"]),[data-ghost]:has(h2[style*="position: sticky"]){overflow:visible}
/* sticky-heading sections cannot clip, so keep the wordmark inside their own box */
[data-ghost]:has(h2[style*="position:sticky"])::before,[data-ghost]:has(h2[style*="position: sticky"])::before{bottom:0}

[data-ghost]::before{
  content:attr(data-ghost);
  position:absolute;right:34px;bottom:-14px;
  font-family:'Barlow Condensed',sans-serif;font-size:150px;font-weight:700;
  line-height:.8;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px rgba(111,172,70,.14);
  pointer-events:none;z-index:0;
  animation:scFade 1.1s ease both;
}
[data-ghost]>*{position:relative;z-index:1}
@media (max-width:1100px){[data-ghost]::before{font-size:96px;right:18px}}
@media (max-width:767px){[data-ghost]::before{display:none}}

/* ---------- 2. Process + trust boxes ---------- */
[data-svcp-box]{
  position:relative;overflow:hidden;isolation:isolate;
  counter-increment:scstep;
  transition:transform .28s cubic-bezier(.2,.8,.3,1),border-color .28s,box-shadow .28s;
}
/* texture lives in the element's own background stack: the page's inline rule
   owns ::before (3px accent bar) and my glow owns ::after, so competing for
   ::before just loses to the later inline sheet. A radial gradient layered
   ABOVE the tile fades it out, which reproduces the mask without needing one. */
[data-svcp-box][data-svcp-box]{
  background-image:radial-gradient(300px 240px at 100% 100%,rgba(36,32,33,0),#242021 76%),url('hex-tile.png')!important;
  background-size:auto,72px 125px!important;
  background-repeat:no-repeat,repeat!important;
  background-position:center,0 0!important;
}
[data-svcp-box]::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  width:250px;height:250px;
  background:radial-gradient(circle,rgba(111,172,70,.2),transparent 68%);
  animation:scGlow 8s ease-in-out infinite;
}
[data-svcp-box]:hover{transform:translateY(-5px);border-color:rgba(111,172,70,.5)!important;box-shadow:0 18px 40px rgba(0,0,0,.42)}
[data-svcp-box]:hover{background-blend-mode:normal}

/* six placements so no two boxes read the same */
[data-svcp-box]:nth-child(6n+1):nth-child(6n+1){background-image:radial-gradient(300px 240px at 100% 100%,rgba(36,32,33,0),#242021 76%),url('hex-tile.png')!important;background-size:auto,72px 125px!important}
[data-svcp-box]:nth-child(6n+1)::after{right:-80px;bottom:-90px}
[data-svcp-box]:nth-child(6n+2):nth-child(6n+2){background-image:radial-gradient(290px 230px at 0% 100%,rgba(36,32,33,0),#242021 74%),url('hex-tile.png')!important;background-size:auto,60px 104px!important}
[data-svcp-box]:nth-child(6n+2)::after{left:-90px;bottom:-100px;animation-delay:1.2s}
[data-svcp-box]:nth-child(6n+3):nth-child(6n+3){background-image:radial-gradient(280px 220px at 100% 0%,rgba(36,32,33,0),#242021 72%),url('hex-tile.png')!important;background-size:auto,88px 152px!important}
[data-svcp-box]:nth-child(6n+3)::after{right:-70px;top:-100px;animation-delay:2.4s}
[data-svcp-box]:nth-child(6n+4):nth-child(6n+4){background-image:radial-gradient(320px 200px at 50% 100%,rgba(36,32,33,0),#242021 78%),url('hex-tile.png')!important;background-size:auto,72px 125px!important}
[data-svcp-box]:nth-child(6n+4)::after{left:50%;bottom:-110px;margin-left:-125px;animation-delay:3.6s}
[data-svcp-box]:nth-child(6n+5):nth-child(6n+5){background-image:radial-gradient(280px 240px at 0% 0%,rgba(36,32,33,0),#242021 72%),url('hex-tile.png')!important;background-size:auto,64px 111px!important}
[data-svcp-box]:nth-child(6n+5)::after{left:-70px;top:-100px;animation-delay:4.8s}
[data-svcp-box]:nth-child(6n):nth-child(6n){background-image:radial-gradient(320px 260px at 100% 50%,rgba(36,32,33,0),#242021 74%),url('hex-tile.png')!important;background-size:auto,76px 132px!important}
[data-svcp-box]:nth-child(6n)::after{right:-100px;top:22%;animation-delay:6s}
/* giant ghost step numeral, generated from a CSS counter */
[data-svcp-box] > span:first-child{position:relative;z-index:2}
[data-svcp-box] > span:first-child::before{
  content:counter(scstep,decimal-leading-zero);
  position:absolute;left:-8px;top:-14px;
  font-family:'Barlow Condensed',sans-serif;font-size:88px;font-weight:700;line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(111,172,70,.16);
  pointer-events:none;z-index:-1;
}

/* ---------- 3. In-depth cards ---------- */
[data-depth-card]{position:relative;overflow:clip;isolation:isolate;transition:border-color .28s,box-shadow .28s}
[data-depth-card]::before,
[data-depth-card]::after{content:"";position:absolute;width:22px;height:22px;pointer-events:none;transition:width .3s,height .3s,border-color .3s}
[data-depth-card]::before{top:12px;left:12px;border-top:2px solid rgba(140,196,99,.45);border-left:2px solid rgba(140,196,99,.45);border-radius:6px 0 0 0}
[data-depth-card]::after{bottom:12px;right:12px;border-bottom:2px solid rgba(140,196,99,.3);border-right:2px solid rgba(140,196,99,.3);border-radius:0 0 6px 0}
[data-depth-card]:hover{border-color:rgba(111,172,70,.45)!important;box-shadow:0 16px 36px rgba(0,0,0,.35)}
[data-depth-card]:hover::before,[data-depth-card]:hover::after{width:38px;height:38px;border-color:#6fac46}

/* ---------- 4. Service tiles ---------- */
[data-svc-box]{position:relative;overflow:hidden;isolation:isolate}
[data-svc-box]::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('hex-tile.png') repeat;background-size:76px 132px;opacity:.4;
  -webkit-mask-image:radial-gradient(420px 300px at 100% 0%,#000,transparent 74%);
  mask-image:radial-gradient(420px 300px at 100% 0%,#000,transparent 74%);
  transition:opacity .3s;
}
[data-svc-box]:nth-child(even)::before{-webkit-mask-image:radial-gradient(420px 300px at 0% 100%,#000,transparent 74%);mask-image:radial-gradient(420px 300px at 0% 100%,#000,transparent 74%);background-size:64px 111px}
[data-svc-box]:hover::before{opacity:.62}

/* ---------- 5. Quote CTA — 8 watermark + light beam ---------- */
[data-cta-glow]{position:relative;overflow:hidden;isolation:isolate}
[data-cta-glow]::before{
  content:"";position:absolute;right:-70px;top:50%;width:430px;height:430px;
  transform:translateY(-50%);z-index:-1;pointer-events:none;
  background:url('logo-8-only.png') no-repeat center/contain;opacity:.05;
  animation:scDrift 14s ease-in-out infinite;
}
[data-cta-glow]::after{
  content:"";position:absolute;right:-70px;top:50%;width:430px;height:430px;
  margin-top:-215px;border-radius:50%;z-index:-1;pointer-events:none;
  border:2px solid transparent;
  border-top-color:rgba(111,172,70,.55);
  border-right-color:rgba(111,172,70,.2);
  animation:scOrbit 3.6s linear infinite;
}
/* ---------- 6. Scroll-linked entrances (progressive, no JS) ---------- */
@supports (animation-timeline: view()) {
  [data-depth-card],[data-svc-box]{
    animation:scRise .7s cubic-bezier(.2,.8,.3,1) both;
    animation-timeline:view();
    animation-range:entry 0% entry 62%;
  }
  [data-ghost]::before{
    animation:scFade 1s ease both;
    animation-timeline:view();
    animation-range:entry 0% entry 55%;
  }
}

/* ---------- 7. Section heading rail ---------- */
[data-ghost] > h2{position:relative;padding-bottom:12px}
[data-ghost] > h2::after{
  content:"";position:absolute;left:0;bottom:0;width:62px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#6fac46,rgba(111,172,70,.15));
  transform-origin:left;
}
@supports (animation-timeline: view()) {
  [data-ghost] > h2::after{animation:scRail .9s cubic-bezier(.2,.8,.3,1) both;animation-timeline:view();animation-range:entry 0% entry 60%}
}

/* ---------- 8. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  [data-depth-card],[data-svc-box],
  [data-svcp-box]::after,[data-cta-glow]::before,[data-cta-glow]::after,
  [data-ghost]::before,[data-ghost] > h2::after{animation:none!important}
}


/* ---------- relevant-services pills ---------- */
@keyframes relRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes relSweep{0%{left:-60%}100%{left:130%}}
[data-rel-pill]{position:relative;overflow:clip;isolation:isolate;background:linear-gradient(165deg,#2a2725,#1d1a1b)!important;border:1px solid rgba(111,172,70,.32)!important;border-radius:12px!important;transition:transform .28s cubic-bezier(.2,.8,.3,1),border-color .28s,box-shadow .28s;animation:relRise .55s cubic-bezier(.2,.8,.3,1) both}
[data-rel-pill]::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#6fac46,transparent 70%);pointer-events:none;z-index:2}
[data-rel-pill]::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;background:linear-gradient(100deg,transparent,rgba(140,196,99,.14),transparent);transform:skewX(-14deg);pointer-events:none;z-index:1}
[data-rel-pill]:hover{transform:translateY(-4px);border-color:#6fac46!important;box-shadow:0 16px 34px rgba(0,0,0,.4),0 0 26px rgba(111,172,70,.22)}
[data-rel-pill]:hover::after{animation:relSweep .75s ease}
[data-rel-pill]>*{position:relative;z-index:2}
[data-rel-pill]:nth-child(1){animation-delay:.04s}
[data-rel-pill]:nth-child(2){animation-delay:.12s}
[data-rel-pill]:nth-child(3){animation-delay:.2s}
[data-rel-pill]:nth-child(4){animation-delay:.28s}
@media (prefers-reduced-motion:reduce){[data-rel-pill]{animation:none!important}[data-rel-pill]:hover::after{animation:none!important}}