/* ============================================================
   LAYOUT · SERVICE PAGE
   Big editorial treatment for the 9 service detail pages:
   a full-height 3D hero, marquee bands, oversized statements,
   a deliverables tag cloud and scrolling client quotes.
   All classes are sp-* prefixed so they never collide with the
   homepage section styles that share the same stylesheet set.
   ============================================================ */

/* ---------- 1 · 3D HERO ---------- */
.sp-hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  background:var(--ink);color:#fff;overflow:hidden;
  padding:calc(clamp(66px,8vw,86px) + 40px) 0 90px;
}
#svcgl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.sp-hero .vig{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(0,10,61,.92) 100%)}
.sp-hero .in{position:relative;z-index:2;width:100%}
body.nogl #svcgl{display:none}

.sp-eyebrow{display:flex;align-items:center;gap:12px;font-family:'Geist Mono',monospace;
  font-size:clamp(10px,1.1vw,12px);letter-spacing:.18em;text-transform:uppercase;color:var(--b300)}
.sp-eyebrow i{width:34px;height:1px;background:var(--onblue);display:block;flex:0 0 auto}

/* the oversized display headline */
.sp-hero h1{
  font-family:Archivo;font-weight:800;font-size:clamp(42px,10.5vw,164px);
  letter-spacing:-.045em;line-height:.88;margin:26px 0 0;text-transform:uppercase;
}
/* rotating word underneath, Bike Bear style */
.sp-rotator{
  display:block;height:1.05em;overflow:hidden;position:relative;margin-top:.04em;
  font-family:Archivo;font-weight:800;font-size:clamp(30px,6.4vw,96px);
  letter-spacing:-.04em;line-height:1.05;color:var(--b300);text-transform:uppercase;
}
.sp-rotator span{
  position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(100%);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.sp-hero.right .sp-rotator span{right:0;left:auto}
.sp-rotator span.on{opacity:1;transform:none}
.sp-rotator span.out{opacity:0;transform:translateY(-100%)}

.sp-hero .lead{margin-top:34px;max-width:54ch;color:var(--dim);
  font-size:clamp(15px,1.6vw,19px);line-height:1.62}
.sp-hero .btns{margin-top:34px}

.sp-cue{position:absolute;left:50%;translate:-50% 0;bottom:24px;z-index:2;
  font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.16em;color:#7d88b8;
  text-transform:uppercase;animation:bob 2.4s ease-in-out infinite}

/* ---------- 2 · MARQUEE BAND ---------- */
.sp-band{background:var(--navy);overflow:hidden;display:flex;white-space:nowrap;
  padding:clamp(12px,2.2vw,20px) 0}
.sp-band .t{display:flex;align-items:center;gap:clamp(16px,3vw,36px);flex:0 0 auto;
  padding-right:clamp(16px,3vw,36px);animation:mslide 30s linear infinite}
.sp-band.rev .t{animation-direction:reverse}
.sp-band .t span{font-family:Archivo;font-weight:800;font-size:clamp(18px,3.4vw,40px);
  letter-spacing:-.025em;color:#fff;text-transform:uppercase}
.sp-band .t i{width:9px;height:9px;background:var(--b300);transform:rotate(45deg);
  display:block;flex:0 0 auto}

/* ---------- 3 · BIG STATEMENT ---------- */
.sp-statement{padding:clamp(72px,10vw,140px) 0;background:#fff}
.sp-statement .big{
  font-family:Archivo;font-weight:700;font-size:clamp(26px,4.4vw,62px);
  letter-spacing:-.032em;line-height:1.06;color:#050916;max-width:18ch;
}
.sp-statement .big em{font-style:normal;color:var(--b500)}
.sp-statement .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);margin-top:clamp(34px,4vw,52px)}
.sp-statement p{font-size:16px;line-height:1.7;color:var(--ink500);max-width:60ch}

/* ---------- 4 · DELIVERABLES TAG CLOUD ---------- */
.sp-deliver{padding:clamp(64px,9vw,120px) 0;background:var(--ink);color:#fff}
.sp-deliver h2{font-family:Archivo;font-weight:700;font-size:clamp(26px,3.4vw,46px);
  letter-spacing:-.028em;color:#fff;margin:20px 0 40px;line-height:1.05}
.sp-tags{display:flex;flex-wrap:wrap;gap:12px}
.sp-tags span{
  font-family:Archivo;font-weight:600;font-size:clamp(14px,1.7vw,22px);letter-spacing:-.01em;
  color:var(--dim);border:1px solid var(--onblue);border-radius:100px;
  padding:12px 22px;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease);
}
.sp-tags span:hover{background:var(--b500);border-color:var(--b500);color:#fff;
  transform:translateY(-3px)}

/* ---------- 5 · WHY IT MATTERS ---------- */
.sp-matters{padding:clamp(72px,9vw,120px) 0;background:#fff}
.sp-matters .head{max-width:60ch;margin-bottom:clamp(34px,4vw,54px)}
.sp-matters h2{font-family:Archivo;font-weight:700;font-size:clamp(26px,3.4vw,46px);
  letter-spacing:-.028em;color:#050916;margin:20px 0 0;line-height:1.05}
.sp-next h2,.sp-stack h2{font-family:Archivo;font-weight:700;
  font-size:clamp(22px,2.6vw,34px);letter-spacing:-.024em;color:#050916;margin:18px 0 0}
.sp-mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(30px,5vw,72px)}
.sp-mgrid li{list-style:none;display:flex;gap:18px;align-items:flex-start;
  padding:22px 0;border-top:1px solid var(--line)}
.sp-mgrid li b{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.12em;
  color:var(--b500);flex:0 0 auto;padding-top:.25em;width:26px}
.sp-mgrid li p{font-size:15.5px;line-height:1.6;color:var(--ink700);margin:0;max-width:46ch}

/* ---------- 6 · STACK STRIP ---------- */
.sp-stack{padding:clamp(52px,7vw,84px) 0;background:var(--mist);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sp-stack .row{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,56px);align-items:center;
  margin-top:26px}
.sp-stack .row i{font-style:normal;font-family:Archivo;font-weight:600;
  font-size:clamp(16px,2.4vw,30px);color:var(--ink300);transition:color .25s}
.sp-stack .row i:hover{color:var(--navy)}

/* ---------- 7 · CLIENT QUOTES MARQUEE ---------- */
.sp-quotes{padding:clamp(64px,9vw,110px) 0 clamp(72px,9vw,120px);background:#fff;overflow:hidden}
.sp-qrow{display:flex;overflow:hidden;padding:8px 0}
.sp-qtrack{display:flex;flex:0 0 auto;gap:16px;padding-right:16px;
  animation:mslide 46s linear infinite}
.sp-qrow.rev .sp-qtrack{animation-direction:reverse;animation-duration:56s}
.sp-qtrack q{
  display:block;white-space:nowrap;font-family:Archivo;font-weight:600;
  font-size:clamp(15px,1.9vw,24px);letter-spacing:-.012em;color:var(--ink700);
  border:1px solid var(--line);border-radius:100px;padding:14px 26px;quotes:none;
  transition:border-color .3s,color .3s,background .3s;
}
.sp-qtrack q:hover{border-color:var(--navy);color:var(--navy);background:var(--b50)}

/* ---------- 8 · PROCESS ---------- */
.sp-steps{padding:clamp(72px,9vw,120px) 0;background:var(--ink);color:#fff}
.sp-steps h2{font-family:Archivo;font-weight:700;font-size:clamp(26px,3.4vw,46px);
  letter-spacing:-.028em;color:#fff;margin:20px 0 clamp(36px,5vw,60px);line-height:1.05}
.sp-sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
.sp-step{border-top:2px solid var(--b500);padding-top:24px}
.sp-step b{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.12em;
  color:var(--b300);display:block}
.sp-step h3{font-family:Archivo;font-weight:600;font-size:clamp(16px,1.6vw,21px);
  color:#fff;margin:14px 0 10px}
.sp-step p{font-size:14px;line-height:1.55;color:var(--dim);margin:0}

/* ---------- 9 · NEXT SERVICES ---------- */
.sp-next{padding:clamp(64px,9vw,110px) 0;background:var(--mist)}
.sp-ngrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:32px}
.sp-ncard{display:flex;flex-direction:column;gap:8px;padding:26px 24px;background:#fff;
  border:1px solid var(--line);border-radius:8px;text-decoration:none;
  transition:transform .3s var(--ease),border-color .3s,background .3s}
.sp-ncard:hover{transform:translateY(-5px);border-color:var(--navy);background:var(--b50)}
.sp-ncard b{font-family:Archivo;font-weight:600;font-size:18px;color:var(--ink900)}
.sp-ncard span{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  color:var(--ink300)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .sp-statement .cols{grid-template-columns:1fr;gap:24px}
  .sp-mgrid{grid-template-columns:1fr;gap:0}
  .sp-sgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 22px}
  .sp-ngrid{grid-template-columns:1fr}
  .sp-hero{padding-bottom:110px}
}
@media(max-width:560px){
  .sp-sgrid{grid-template-columns:1fr}
  .sp-tags span{font-size:13.5px;padding:10px 17px}
}
@media(prefers-reduced-motion:reduce){
  .sp-band .t,.sp-qtrack{animation:none}
  .sp-cue{animation:none}
  .sp-rotator span{transition:none}
}