/* ==========================================================================
   PS Digital Marketing — Service pages 2026
   Loads on top of ps-home-2026.css, so it inherits the same tokens,
   nav, buttons, footer and reveal system.
   ========================================================================== */

/* ---------- hero ---------- */
.shero{
  position:relative;background:var(--paper);
  padding-block:clamp(140px,15vw,190px) clamp(48px,6vw,76px);
  overflow:hidden;
}
.shero__dots{
  position:absolute;top:14%;right:-2%;width:min(420px,42vw);aspect-ratio:1.3;
  pointer-events:none;opacity:.5;
  background-image:radial-gradient(var(--orange) 1.6px,transparent 1.6px);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse at 70% 40%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 10%,transparent 72%);
}
.shero__in{position:relative;z-index:2;max-width:920px;}
.shero h1{
  font-size:clamp(2.5rem,7vw,4.9rem);
  line-height:.98;letter-spacing:-.035em;text-transform:uppercase;
  margin-top:18px;
}
.shero h1 .l2{color:var(--orange);}
.shero__lede{
  margin-top:clamp(24px,3vw,34px);
  font-size:clamp(1.02rem,1.5vw,1.22rem);
  color:var(--muted);max-width:52ch;line-height:1.6;
}
.shero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,4vw,42px);}

/* ---------- split panel: copy + measured bars ---------- */
.spanel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,2.6vw,32px);align-items:stretch;}
.spanel__copy{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(28px,3.6vw,48px);display:flex;flex-direction:column;justify-content:center;
}
.spanel__copy h2{font-size:clamp(1.5rem,2.6vw,2.15rem);letter-spacing:-.025em;margin:14px 0 18px;white-space:pre-line;}
.spanel__copy p{color:var(--muted);font-size:1rem;}

.sbars{
  background:var(--ink);color:var(--text-inv);
  border-radius:var(--r-lg);padding:clamp(28px,3.6vw,44px);
  position:relative;overflow:hidden;
}
.sbars::after{
  content:"";position:absolute;right:-60px;top:-60px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,112,26,.22),transparent 70%);pointer-events:none;
}
.sbars__k{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lite);font-weight:600;position:relative;z-index:2;}
.sbar{margin-top:clamp(22px,2.6vw,30px);position:relative;z-index:2;}
.sbar__top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;}
.sbar__l{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mutedInverse,var(--muted-inv));font-weight:600;}
.sbar__v{font-family:var(--font-display);font-weight:700;font-size:clamp(1.35rem,2.4vw,1.9rem);letter-spacing:-.03em;color:var(--orange);}
.sbar__track{margin-top:10px;height:2px;background:var(--hairlineDark,var(--line-inv));position:relative;overflow:hidden;border-radius:2px;}
.sbar__fill{
  position:absolute;inset:0 auto 0 0;width:0;background:var(--orange);
  transition:width 1.25s var(--ease);
}
.sbar.in .sbar__fill{width:var(--w);}
.sbars__note{
  margin-top:clamp(26px,3vw,34px);padding-top:18px;border-top:1px solid var(--line-inv);
  font-size:.78rem;line-height:1.55;color:var(--muted-inv);position:relative;z-index:2;
}
@media (max-width:900px){.spanel{grid-template-columns:1fr;}}

/* ---------- stat strip ---------- */
.sstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.sstat{background:var(--white);padding:clamp(22px,2.6vw,32px);}
.sstat__v{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.035em;color:var(--text);line-height:1;}
.sstat__l{margin-top:10px;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text);font-weight:600;}
.sstat__s{margin-top:5px;font-size:.8rem;color:var(--muted);}
@media (max-width:820px){.sstats{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.sstats{grid-template-columns:1fr;}}

/* ---------- capability cards ---------- */
.scaps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);}
.scap{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(24px,2.8vw,34px);position:relative;overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.scap::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.scap:hover{transform:translateY(-6px);box-shadow:0 26px 48px -30px rgba(0,0,0,.34);}
.scap:hover::after{transform:scaleX(1);}
.scap__no{font-family:var(--font-mono,var(--font-display));font-weight:700;font-size:.8rem;letter-spacing:.18em;color:var(--gold);}
.scap h3{margin:14px 0 12px;font-size:1.2rem;letter-spacing:-.015em;}
.scap p{color:var(--muted);font-size:.95rem;}
@media (max-width:980px){.scaps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.scaps{grid-template-columns:1fr;}}

/* ---------- process rail ---------- */
.srail{position:relative;}
.srail::before{
  content:"";position:absolute;left:19px;top:8px;bottom:8px;width:1px;background:var(--line-inv);
}
.sstep{
  position:relative;padding-left:64px;padding-block:clamp(18px,2.4vw,26px);
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:clamp(14px,2.4vw,36px);align-items:baseline;
}
.sstep::before{
  content:"";position:absolute;left:13px;top:calc(50% - 6px);width:13px;height:13px;border-radius:50%;
  background:var(--ink);border:2px solid var(--orange);
}
.sstep__no{font-family:var(--font-mono,var(--font-display));font-size:.76rem;letter-spacing:.18em;color:var(--gold-lite);display:block;margin-bottom:8px;}
.sstep h3{font-size:clamp(1.15rem,2vw,1.55rem);letter-spacing:-.02em;}
.sstep p{color:var(--muted-inv);font-size:.97rem;}
@media (max-width:760px){
  .sstep{grid-template-columns:1fr;gap:10px;padding-left:52px;}
  .srail::before{left:15px;}
  .sstep::before{left:9px;top:26px;}
}

/* ---------- other capabilities ---------- */
.sother{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.sother a{
  background:var(--white);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:10px;
  transition:background .4s var(--ease);
}
.sother a:hover{background:var(--paper-2);}
.sother__no{font-size:.72rem;letter-spacing:.18em;color:var(--gold);font-weight:700;}
.sother b{font-family:var(--font-display);font-size:1.06rem;letter-spacing:-.015em;color:var(--text);}
.sother small{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.sother__go{margin-top:6px;color:var(--orange);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;gap:8px;align-items:center;transition:gap .3s var(--ease);}
.sother a:hover .sother__go{gap:14px;}
@media (max-width:900px){.sother{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.sother{grid-template-columns:1fr;}}

/* ---------- closing CTA ---------- */
.sclose{text-align:center;position:relative;overflow:hidden;}
.sclose h2{
  font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.035em;text-transform:uppercase;
  white-space:pre-line;line-height:1.02;
}
.sclose .btn{margin-top:clamp(28px,3.4vw,40px);}