/* TNS Kinetic service page styles. Converted from the approved static build.
   Six class names (wrap,kick,tag,intro,hero) are prefixed sv- and the theatre
   html class is svc-on, to avoid collisions with the global homepage stylesheet. */
:root{
  --yel:#F9E900; --ink:#414141; --pa:#F2F1EC; --blk:#1B1B1B;
  --f:Helvetica,"Helvetica Neue",Arial,sans-serif;
  --gap:84px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--f);background:var(--blk);color:var(--ink);-webkit-font-smoothing:antialiased}
.pagebg{background:var(--pa)}

.introwrap{position:relative}
.darkfold{position:absolute;inset:0;background:var(--ink);z-index:0}

/* full-circle halftone, two stacked layers, colour-wipe via clip on grey */
.htwrap{position:fixed;inset:0;overflow:hidden;z-index:1;pointer-events:none}
.htsweep{position:absolute;top:-30vh;right:-14vw;width:min(118vh,1150px);aspect-ratio:1/1;will-change:transform,opacity}
.hc{position:absolute;inset:0;width:100%;height:100%;display:block}
.hc-y{opacity:.10;clip-path:inset(0 0 0 0)}
.hc-g{clip-path:inset(100% 0 0 0)}


.svintro{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;padding:0 7vw}
.svhero{max-width:660px}

.svkick{font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:#b7b5ad}
.svhero h1{font-size:clamp(42px,7.4vw,96px);line-height:.9;margin:.12em 0 .14em;font-weight:800;letter-spacing:-.02em;color:var(--pa)}
.svtag{font-size:clamp(20px,2.5vw,31px);line-height:1.12;font-weight:800;letter-spacing:-.01em;color:var(--pa);margin:0 0 .5em}
.svhero p{font-size:clamp(15px,1.6vw,19px);max-width:31em;line-height:1.5;color:#cfcdc6;margin:0 0 24px}

/* Public Relations icon: the homepage megaphone inside a wireframe ring (one
   drawing, matched stroke). Rest: yellow ring + yellow icon. Hover: paper (white)
   plus the Pop: same lift and offset as the card pop, but the shadow is cast in
   YELLOW, not black, because a near-black shadow on the dark fold has almost no
   contrast and reads as absent. Yellow is the design's pop-on-dark colour, so the
   crescent is clearly visible. Placed at the circular marker. Mobile: inline. */
.pricon{display:block;width:120px;height:120px;color:var(--yel);margin:0 0 24px;line-height:0;position:relative}
.pricon svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.prsh{opacity:0}
@media (min-width:881px){
  .pricon{position:absolute;top:15.28vh;right:7.34vw;width:clamp(260px,24.89vw,500px);height:auto;aspect-ratio:1/1;margin:0;z-index:3}
  .pric{transition:transform .18s cubic-bezier(.4,0,.2,1)}
  .prsh{transition:opacity .18s cubic-bezier(.4,0,.2,1)}
  .pricon:hover .pric{transform:translate(-5px,-5px)}
  .pricon:hover .prsh{opacity:.2}
}

.hlist{list-style:none;margin:0 0 24px;padding:0;max-width:480px}
.hlist li{display:flex;align-items:baseline;gap:16px;padding:11px 10px 11px 0;
  border-top:1px solid rgba(242,241,236,.20);
  transition:transform .2s cubic-bezier(.4,0,.2,1);
  opacity:0;animation:fade .5s ease both}
.hlist li:last-child{border-bottom:1px solid rgba(242,241,236,.20)}
.hlist li:nth-child(1){animation-delay:.05s}
.hlist li:nth-child(2){animation-delay:.12s}
.hlist li:nth-child(3){animation-delay:.19s}
.hlist li:nth-child(4){animation-delay:.26s}
.hlist li:nth-child(5){animation-delay:.33s}
.hlist .n{font-size:13px;font-weight:700;color:#b7b5ad;min-width:24px;font-variant-numeric:tabular-nums;transition:color .2s}
.hlist .lb{font-size:16px;color:#e7e5de;flex:1}
.hlist .vv{font-size:clamp(16px,1.6vw,20px);font-weight:800;color:var(--pa);white-space:nowrap;
  padding:2px 7px;border-radius:5px;transition:background .2s,color .2s}
.hlist li:hover{transform:translateX(8px)}
.hlist li:hover .vv{background:var(--yel);color:var(--ink)}
.hlist li:hover .n{color:var(--pa)}
@keyframes fade{to{opacity:1}}

.cue{font-size:13px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:var(--pa);display:flex;align-items:center;gap:11px}
@media (min-width:881px){ .cue{transform:translateY(60px)} }
.cue .ar{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:8px solid var(--pa);animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.svwrap{position:relative;z-index:2}
.stage{padding:9vh 0}
.rail{display:flex;flex-direction:column;align-items:center;gap:5vh}
.svgcnx{display:none}
.dots{display:none}

html.svc-on .svwrap{height:var(--pin,500vh)}
html.svc-on .stage{position:sticky;top:0;height:100vh;overflow:hidden;padding:0}
html.svc-on .rail{flex-direction:row;align-items:center;gap:var(--gap);position:absolute;top:0;left:0;
  height:100vh;will-change:transform}
html.svc-on .svgcnx{display:block;position:absolute;top:0;left:0;height:100vh;overflow:visible;z-index:0;pointer-events:none}
html.svc-on .dots{display:flex}

.card{position:relative;z-index:1;border-radius:18px;padding:46px 48px;width:min(86vw,640px);
  box-shadow:5px 6px 0 rgba(27,27,27,.13);
  transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1)}
html.svc-on .card{width:clamp(440px,42vw,600px);flex:0 0 auto}
/* the pop is engine driven on both breakpoints; hover is not the trigger (6) */
.card .ck{font-size:12.5px;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-bottom:18px;display:block}
.card h2{font-size:clamp(27px,2.9vw,42px);line-height:1.05;margin:0 0 16px;font-weight:800;letter-spacing:-.01em}
.card p{font-size:16.5px;line-height:1.5;margin:0}

.card.dark{background:var(--ink);color:var(--pa)}
.card.dark .ck{color:var(--yel)}
.card.dark h2{color:var(--pa)}
.card.dark p{color:#dad8d1}
.card.gold{background:var(--yel);color:var(--ink)}
.card.gold .ck{color:var(--blk)}
.card.gold h2{color:var(--ink)}
.card.gold p{color:#33322e}

/* what's included: one muted, uppercase, middot-separated line per capability */
.inc{margin-top:22px;padding-top:15px;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;line-height:1.75}
.card.dark .inc{color:#bdbbb4;border-top:1px solid rgba(242,241,236,.18)}
.card.gold .inc{color:#46443f;border-top:1px solid rgba(27,27,27,.18)}

.dots{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:60;gap:13px;align-items:center;opacity:1;transition:opacity .35s ease}
.dots.off{opacity:0;pointer-events:none}
.dots i{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);background:transparent;transition:background .25s,transform .25s}
.dots i.on{background:var(--ink);transform:scale(1.28)}

.cue2{position:absolute;left:0;top:0;z-index:5;white-space:nowrap;transition:transform .18s cubic-bezier(.4,0,.2,1);display:none;
  align-items:center;gap:11px;font-size:13px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:var(--ink);pointer-events:none}
html.svc-on .cue2{display:flex}
.card.ispop+.cue2{transform:translate(-4px,-9px)}
@media (prefers-reduced-motion:reduce){.card.ispop+.cue2{transform:none}}
.cue2 .ar2{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:8px solid var(--ink);animation:bob 1.6s ease-in-out infinite}

.after{position:relative;z-index:2;padding:13vh 7vw;background:var(--pa)}
.after .svkick{color:#9a988f}
.after h3{font-size:clamp(24px,3vw,38px);font-weight:800;margin:.2em 0 18px;color:var(--blk)}
.after p{font-size:16.5px;line-height:1.6;max-width:47em;color:#46443f;margin:0 0 14px}

/* CTA: the signature pop, on paper */
.cta{display:inline-flex;align-items:center;gap:11px;margin-top:14px;background:var(--yel);color:var(--ink);
  font-weight:800;font-size:15px;letter-spacing:.3px;padding:15px 26px;border-radius:12px;text-decoration:none;
  box-shadow:5px 6px 0 rgba(27,27,27,.13);
  transition:transform .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1)}
.cta:hover{transform:translate(-4px,-9px);box-shadow:12px 14px 0 var(--blk)}
.cta .ar3{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid var(--ink)}

.foot{position:relative;z-index:2;padding:30px 7vw 64px;color:#8c8a83;font-size:13px;background:var(--pa)}

@media (max-width:880px){
  .htwrap{display:none}
  html.svc-on .svwrap{height:auto}
  html.svc-on .stage{position:static;height:auto;overflow:visible;padding:9vh 0}
  html.svc-on .rail{flex-direction:column;align-items:center;gap:5vh;position:static;height:auto;transform:none!important}
  html.svc-on .card{width:min(88vw,640px)}
  html.svc-on .svgcnx{display:none}
  html.svc-on .dots{display:none}
}
@media (prefers-reduced-motion:reduce){
  .htwrap{display:none}
  .cue .ar{animation:none}
  .cue2 .ar2{animation:none}
  .hlist li{animation:none;opacity:1}
  .pric,.prsh{transition:none}
  .pricon:hover .pric{transform:none}
  .pricon:hover .prsh{opacity:0}
}
@media (min-width:881px){
  html.svc-on .card.sz1{width:clamp(440px,42vw,540px);padding:48px 50px}
  html.svc-on .card.sz2{width:clamp(560px,52vw,680px);padding:44px 54px}
  html.svc-on .card.sz3{width:clamp(400px,34vw,440px);padding:58px 46px}
  html.svc-on .card.sz4{width:clamp(580px,54vw,700px);padding:50px 52px}
  html.svc-on .card.sz5{width:clamp(450px,40vw,510px);padding:66px 50px}
}

/* tagline accent word (was an inline yellow style in the mockup) */
.svtag .acc{color:var(--yel)}

/* v1.0.45 mobile: guaranteed hero breathing under the nav, cue air, and an
   in-view Pop for the cards, since touch has no hover. */
@media(max-width:880px){
  .svintro{align-items:flex-start;padding-top:112px;padding-bottom:44px}
  .cue{margin-top:40px;margin-bottom:8px}
}
.card.ispop{transform:translate(-4px,-9px);box-shadow:12px 14px 0 var(--blk)}
@media(prefers-reduced-motion:reduce){.card.ispop{transform:none;box-shadow:5px 6px 0 rgba(27,27,27,.13)}}