/* Shared by every prototype page: the spine, the hero deck, heading line boxes and section spacing (see shared/kit.js). */

/* ---------- sections breathe more between each other ---------- */
.p .p-sec,.p .pg-sec,.p .hs{padding-top:clamp(80px,9.5vw,144px)}
.p .p-sec.p-after-build{padding-top:clamp(96px,10vw,152px)}

/* ---------- headings: a little more line height, and the rising words never lose their descenders ---------- */
.p h1.p-h1,.p .pg-h1{line-height:1.05}
.p .p-h2{line-height:1.08}
.cc-ln-mask{padding:.08em 0 .24em;margin:-.08em 0 -.24em}

/* ---------- the spine: the lit part and its dot are fixed to the window (placed by kit.js). They sit outside .cc-site, so no --cc- variables here ---------- */
.cc-spine-live{position:fixed;left:0;top:0;z-index:2;width:2px;height:100vh;background:linear-gradient(180deg,rgba(var(--cc-mint-rgb, 23, 255, 197),.2),var(--cc-mint-hex, #17FFC5) 70%);box-shadow:0 0 12px rgba(var(--cc-mint-rgb, 23, 255, 197),.5);transform-origin:0 0;pointer-events:none;visibility:hidden;will-change:transform}
.cc-spine-dot{position:fixed;left:0;top:0;z-index:3;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--cc-mint-hex, #17FFC5);box-shadow:0 0 0 6px rgba(var(--cc-mint-rgb, 23, 255, 197),.14),0 0 18px var(--cc-mint-hex, #17FFC5);pointer-events:none;visibility:hidden;will-change:transform}
.p .p-node,.p-fnode{z-index:4}
.p .p-trace i,.p-ftrace i{transition:transform .5s var(--cc-ease)}
@media (max-width:1199.98px){.cc-spine-live,.cc-spine-dot{display:none}}
/* a pinned section stays put while the dot runs on, so its own node would sit frozen beside the dot: the dot marks it instead */
.p [data-build]>.p-node,.p [data-hscroll]>.p-node,.p [data-reel]>.p-node{display:none}
/* carousels fade to nothing just before the line (--sx is the line's x inside the carousel, set by kit.js) */
@media (min-width:1200px){
  .p .cc-sfade{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent calc(var(--sx,45px) + 10px),#000 calc(var(--cx,100px) - 2px),#000 calc(100% - 80px),transparent);mask-image:linear-gradient(90deg,transparent 0,transparent calc(var(--sx,45px) + 10px),#000 calc(var(--cx,100px) - 2px),#000 calc(100% - 80px),transparent)}
}

/* ---------- hero deck ---------- */
.p .h-jwrap{position:relative;padding:20px 0 0 12px}
.p .h-jdeck{position:relative;height:440px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.p .h-jc{position:absolute;left:0;bottom:0;display:block;width:min(440px,76%);border:1px solid var(--cc-line);border-radius:20px;background:var(--cc-lift);overflow:hidden;box-shadow:0 40px 100px rgba(var(--cc-k, 0, 0, 0), calc(.62 * var(--cc-ka, 1)));transform-origin:50% 100%;will-change:transform;cursor:grab;color:inherit;text-decoration:none}
.p .h-jdeck.is-drag .h-jc{cursor:grabbing}
.p .h-jc .im{display:block;height:270px;overflow:hidden;background:var(--cc-d-0a1311, #0a1311)}
.p .h-jc img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.p .h-jc .lb{display:flex;align-items:center;gap:10px;height:56px;padding:0 10px 0 16px;border-top:1px solid var(--cc-line);font-size:14px;white-space:nowrap}
.p .h-jc .lb .n{display:grid;place-items:center;min-width:30px;height:22px;border-radius:99px;background:var(--cc-mint);color:var(--cc-on-mint);font-size:11.5px;font-weight:700}
.p .h-jc .lb b{font-weight:600}
.p .h-jc .lb em{min-width:0;overflow:hidden;text-overflow:ellipsis;font-style:normal;color:var(--cc-mute)}
.p .h-jc .lb em:before{content:"·";margin-right:10px}
.p .h-jgo{display:grid;flex:none;place-items:center;width:34px;height:34px;margin-left:auto;border:1px solid var(--cc-line);border-radius:50%;color:var(--cc-mint);transition:background .3s,border-color .3s,color .3s}
.p .h-jgo svg{width:16px;height:16px;transform:rotate(-45deg)}
.p .h-jgo:hover{border-color:var(--cc-mint);background:var(--cc-mint);color:var(--cc-on-mint)}
/* the stage bar: each stage's segment fills while its card is up */
.p .h-jnav{position:relative;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:10px;max-width:572px;margin-top:34px}
.p .h-jnav button{position:relative;display:block;min-height:40px;padding:16px 0 4px;text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cc-mute);cursor:pointer;transition:color .3s}
.p .h-jnav button i{position:absolute;left:0;right:0;top:0;height:3px;border-radius:2px;background:rgba(var(--cc-fg, 255, 255, 255),.12);overflow:hidden;transition:background .3s}
.p .h-jnav button u{position:absolute;inset:0;border-radius:2px;background:linear-gradient(90deg,var(--cc-green),var(--cc-mint));box-shadow:0 0 10px var(--cc-mint);transform-origin:left;transform:scaleX(0)}
.p .h-jnav button:hover{color:var(--cc-fff, #fff)}
.p .h-jnav button:hover i{background:rgba(var(--cc-fg, 255, 255, 255),.22)}
.p .h-jnav button.on{color:var(--cc-fff, #fff)}
.p .h-jnav button:focus-visible{outline:2px solid var(--cc-mint);outline-offset:4px;border-radius:4px}
/* a small tag follows the pointer over the deck */
.p .h-jcur{position:absolute;left:0;top:0;z-index:20;padding:6px 12px;border-radius:99px;background:var(--cc-mint);color:var(--cc-on-mint);font-size:12px;font-weight:700;letter-spacing:.02em;pointer-events:none;box-shadow:0 10px 30px rgba(var(--cc-mint-rgb, 23, 255, 197),.3);opacity:0}
@media (max-width:1099.98px){.p .h-jwrap{padding:0}.p .h-jdeck{height:404px}} /* stacked under the text: the deck box ends where its card stack does (the last back card tops out 381px up) */
@media (max-width:767.98px){
  .p .h-jdeck{height:292px} /* just the stack: the last back card tops out 290px up, fanned (3 x 20px lift x 1.32 + its 85% card) */
  .p .h-jc{width:80%}
  .p .h-jc .im{height:190px}
  .p .h-jc .lb{height:56px;font-size:13px}
  /* long service names take a second line instead of an ellipsis ("Digital Growth A...") */
  .p .h-jc .lb em{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;line-height:1.25}
  .p .h-jnav{gap:6px}
  .p .h-jnav button{min-height:24px;font-size:0;padding-top:12px}
  .p .h-jcur{display:none}
}