/* built by pages/build.py: the Web Design prototype's base + shared/proto-extra.css + shared/pages.css + shared/kit.css */

html,body{margin:0;background:#070C0B}
.p-note{position:fixed;left:16px;bottom:16px;z-index:9999;max-width:420px;padding:10px 14px;border:1px solid rgba(255,196,0,.35);border-radius:12px;background:rgba(20,16,4,.92);color:#ffd166;font:12.5px/1.45 "Mona Sans",sans-serif}
.p-note b{color:#fff}
.cc-site.p{position:relative;background:var(--cc-bg);overflow:clip}
.p .p-wrap{width:100%;max-width:calc(var(--cc-max) + 2 * var(--cc-gutter));margin:0 auto;padding:0 var(--cc-gutter)}
/* the circuit down the left edge */
.p .p-trace{position:absolute;left:44px;top:150px;bottom:0;width:2px;background:rgba(255,255,255,.06);overflow:hidden;z-index:1}
.p .p-trace i{position:absolute;inset:0;background:linear-gradient(var(--cc-mint),var(--cc-green));transform-origin:top;transform:scaleY(0);box-shadow:0 0 12px var(--cc-mint)}
.p .p-node{position:absolute;left:38px;top:var(--nt,calc(clamp(72px,6vw,96px) + 8px));z-index:2;width:14px;height:14px;border:2px solid rgba(255,255,255,.22);border-radius:50%;background:var(--cc-bg);transition:border-color .4s,box-shadow .4s}
.p .p-node.on{border-color:var(--cc-mint);box-shadow:0 0 0 5px rgba(23,255,197,.14),0 0 16px var(--cc-mint)}
/* footer blends out of the page: it starts in the page colour and the circuit runs on to a node at its CTA */
.cc-site.cc-f{background:linear-gradient(180deg,#070C0B 0,#070C0B 60px,#040807 420px)}
.cc-site.cc-f .cc-f__art{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 240px);mask-image:linear-gradient(180deg,transparent 0,#000 240px)}
.p-ftrace{position:absolute;left:44px;top:0;z-index:2;width:2px;height:var(--fh,160px);background:rgba(255,255,255,.06);overflow:hidden}
.p-ftrace i{position:absolute;inset:0;background:linear-gradient(var(--cc-green),var(--cc-mint));transform-origin:top;transform:scaleY(0);box-shadow:0 0 12px var(--cc-mint)}
.p-fnode{position:absolute;left:37px;top:calc(var(--fh,160px) - 8px);z-index:3;width:16px;height:16px;border:2px solid rgba(255,255,255,.22);border-radius:50%;background:#050a09;transition:border-color .4s,box-shadow .4s,background .4s}
.p-fnode.on{border-color:var(--cc-mint);background:var(--cc-mint);box-shadow:0 0 0 6px rgba(23,255,197,.16),0 0 20px var(--cc-mint)}
@media (max-width:1199.98px){.p .p-trace,.p .p-node,.p-ftrace,.p-fnode{display:none}}
.p .p-sec{position:relative;padding:clamp(72px,6vw,96px) 0 0}
.p .p-sec.p-after-build{padding-top:clamp(88px,7vw,112px)}
.p .p-sec:last-child{padding-bottom:clamp(40px,4vw,64px)}
.p .p-h2{margin-top:18px;font-size:clamp(36px,4.4vw,56px);font-weight:500;font-stretch:104%;line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.p .p-intro{margin-top:18px;max-width:62ch;font-size:18px;line-height:1.6;color:var(--cc-soft)}
.p .p-head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.p .pill{display:inline-block;padding:3px 9px;border:1px solid var(--cc-line);border-radius:99px;font-size:11px;color:var(--cc-mute)}
.p .pill.s{border-color:rgba(255,196,0,.35);color:#ffd166}
/* hero */
.p .p-hero{position:relative;min-height:min(100vh,980px);padding:calc(var(--cc-header-h) + 64px) 0 110px;overflow:hidden}
.p .p-floor{position:absolute;left:-20%;right:-20%;bottom:-240px;height:560px;transform:perspective(520px) rotateX(64deg);transform-origin:50% 0;pointer-events:none;overflow:hidden;-webkit-mask-image:radial-gradient(55% 70% at 64% 0,#000,transparent);mask-image:radial-gradient(55% 70% at 64% 0,#000,transparent)}
.p .p-floor i{position:absolute;inset:-60px 0 0;background-image:linear-gradient(rgba(23,255,197,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(23,255,197,.13) 1px,transparent 1px);background-size:60px 60px;animation:p-floor 5s linear infinite}
@keyframes p-floor{to{transform:translateY(60px)}}
.p .p-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 45% at 74% 30%,rgba(23,255,197,.09),transparent 70%);pointer-events:none}
.p .p-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.p .p-crumbs{font-size:13.5px;color:var(--cc-mute)}
.p .p-crumbs a:hover{color:#fff}
.p .p-stage-chip{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:7px 16px 7px 8px;border:1px solid var(--cc-line);border-radius:999px;background:var(--cc-glass);font-size:13.5px;color:var(--cc-soft)}
.p .p-stage-chip span{display:grid;place-items:center;min-width:30px;height:24px;padding:0 8px;border-radius:999px;background:var(--cc-mint);color:var(--cc-on-mint);font-size:12px;font-weight:700}
.p .p-stage-chip b{color:#fff;font-weight:600}
.p .p-stage-chip em{font-style:normal}
.p .p-stage-chip em:before{content:"·";margin-right:10px;color:var(--cc-mute)}
.p h1.p-h1{margin-top:22px;font-size:clamp(46px,5.4vw,80px);font-weight:500;font-stretch:106%;line-height:.98;letter-spacing:-.035em}
.p .p-lede{margin-top:24px;max-width:46ch;font-size:18.5px;line-height:1.6;color:var(--cc-soft)}
.p .p-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.p .p-proof{display:flex;gap:40px;margin-top:42px}
.p .p-proof li b{display:flex;align-items:center;gap:6px;font-size:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.p .p-proof li>span{display:block;margin-top:2px;font-size:13px;color:var(--cc-mute)}
.p .p-proof .cc-star{width:24px;height:24px}
.p .p-stagewrap{position:relative;padding:34px 74px 64px 0}
.p .p-browser{position:relative;border:1px solid var(--cc-line);border-radius:14px;background:var(--cc-lift);overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(23,255,197,.05)}
.p .p-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-bottom:1px solid var(--cc-line);background:#0a1412}
.p .p-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.p .p-url{display:flex;align-items:center;gap:6px;flex:1;max-width:300px;height:20px;margin-left:14px;padding:0 10px;border-radius:6px;background:rgba(255,255,255,.06);font-size:11px;color:var(--cc-mute)}
.p .p-url:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cc-mint)}
.p .p-live{margin-left:auto;padding:3px 10px;border-radius:99px;background:var(--cc-mint);color:var(--cc-on-mint);font-size:11px;font-weight:700;letter-spacing:.06em;opacity:0}
.p .p-vp{position:relative;height:430px;overflow:hidden}
.p .p-vp img{display:block;width:100%;height:auto;max-width:none;will-change:transform}
.p .p-phone{position:absolute;right:0;bottom:0;width:188px;padding:9px;border-radius:38px;background:linear-gradient(145deg,#27322f,#0c1412);box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.14)}
.p .p-phone:before,.p .p-phone:after{content:"";position:absolute;left:-3px;width:3px;border-radius:2px;background:#27322f}
.p .p-phone:before{top:92px;height:34px}.p .p-phone:after{top:136px;height:52px}
.p .p-phone .p-side{position:absolute;right:-3px;top:118px;width:3px;height:62px;border-radius:2px;background:#27322f}
.p .p-screen{position:relative;height:372px;border-radius:30px;overflow:hidden;background:#000}
.p .p-screen img{display:block;width:100%;height:auto;max-width:none;will-change:transform}
.p .p-island{position:absolute;top:9px;left:50%;z-index:2;width:70px;height:20px;margin-left:-35px;border-radius:12px;background:#000}
.p .p-sbar{position:absolute;top:0;left:0;right:0;z-index:1;height:36px;background:linear-gradient(#000,rgba(0,0,0,0))}
.p .p-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;padding:11px 15px;border:1px solid var(--cc-line);border-radius:14px;background:rgba(9,16,14,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:13px;white-space:nowrap;box-shadow:0 16px 40px rgba(0,0,0,.55)}
.p .p-chip b{color:var(--cc-mint);font-weight:600}
.p .p-chip i{width:8px;height:8px;border-radius:50%;background:var(--cc-mint);box-shadow:0 0 10px var(--cc-mint)}
/* pinned build */
.p .p-build{position:relative}
.p .p-build-in{padding:clamp(72px,6vw,96px) 0 0}
.p .p-build-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:64px;align-items:center}
.p .p-steps{margin-top:30px;border-top:1px solid var(--cc-line)}
.p .p-step{display:grid;grid-template-columns:34px 1fr;gap:0 12px;padding:14px 0;border-bottom:1px solid var(--cc-line);opacity:.36;transition:opacity .35s}
.p .p-step.on{opacity:1}
.p .p-step .n{padding-top:3px;font-size:12.5px;font-weight:600;color:var(--cc-mint);font-variant-numeric:tabular-nums}
.p .p-step b{font-size:17px;font-weight:600}
.p .p-step .d{grid-column:2;display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--cc-ease)}
.p .p-step .d>span{overflow:hidden;font-size:14px;color:var(--cc-mute)}
.p .p-step.on .d{grid-template-rows:1fr}
.p .p-step.on .d>span{padding-top:4px}
.p .p-prog{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:12.5px;color:var(--cc-mute);font-variant-numeric:tabular-nums}
.p .p-prog>i{position:relative;flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.p .p-segs,.p .p-nowrow{display:none}
/* below 1100px: numbered step buttons under the frame (the active one fills while the build plays by itself), then the step's
   name with previous / next (Kyro, 2026-09-28, on the stories bar: "it isnt clear that the user can navigate"; no play button:
   "this not a media") */
.p .p-segs button{position:relative;height:44px;padding:0;border:1px solid var(--cc-line);border-radius:12px;background:rgba(255,255,255,.02);color:var(--cc-mute);font:inherit;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;overflow:hidden;transition:border-color .25s,background-color .25s,color .25s}
.p .p-segs button i{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--cc-mint);transform-origin:left;transform:scaleX(0)}
.p .p-segs button.done{color:#fff}
.p .p-segs button.on{border-color:rgba(23,255,197,.6);background-color:rgba(23,255,197,.08);color:var(--cc-mint)}
.p .p-segs button:focus-visible,.p .p-ctl button:focus-visible{outline:2px solid var(--cc-mint);outline-offset:2px}
.p .p-nowrow{align-items:center;gap:16px}
.p .p-now{flex:1;min-width:0;min-height:48px;margin:0}
.p .p-now .n{padding-top:3px;font-size:12.5px;font-weight:600;color:var(--cc-mint);font-variant-numeric:tabular-nums}
.p .p-now b{display:block;font-size:18px;font-weight:600;color:#fff}
.p .p-now .d{display:block;margin-top:2px;font-size:14px;color:var(--cc-mute)}
.p .p-ctl{display:flex;flex:none;gap:8px}
.p .p-ctl button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--cc-line);border-radius:12px;background:rgba(255,255,255,.02);color:#fff;cursor:pointer;transition:border-color .25s,color .25s}
@media (hover:hover){.p .p-segs button:hover,.p .p-ctl button:hover{border-color:rgba(255,255,255,.3);color:#fff}.p .p-segs button.on:hover{border-color:var(--cc-mint);color:var(--cc-mint)}}
.p .p-prog u{position:absolute;inset:0;background:var(--cc-mint);transform-origin:left;transform:scaleX(0);box-shadow:0 0 10px var(--cc-mint)}
.p .p-canvas{position:relative}
.p .p-canvas .p-vp{height:440px}
.p .p-layer{position:absolute;inset:0}
.p .p-blk{position:absolute;border-radius:6px}
.p .p-wire .p-blk{border:1.5px dashed rgba(255,255,255,.28)}
.p .p-draft .p-blk{background:rgba(255,255,255,.1)}
.p .p-draft .p-blk.m{background:var(--cc-mint)}
.p .p-draft .p-blk.img{background:linear-gradient(135deg,#123a31,#0a2230)}
.p .p-pin{position:absolute;display:flex;align-items:flex-start;gap:8px;opacity:0;transform-origin:left bottom}
.p .p-pin i{display:grid;place-items:center;width:26px;height:26px;border-radius:50% 50% 50% 4px;background:var(--cc-blue);font-size:11px;font-weight:700;font-style:normal;box-shadow:0 6px 18px rgba(24,99,220,.5)}
.p .p-pin .m{display:none}
.p .p-pin span{padding:8px 11px;border-radius:10px;background:#fff;color:#0b1513;font-size:12px;font-weight:500;white-space:nowrap}
.p .p-scores{position:absolute;left:-56px;bottom:calc(100% + 14px);z-index:4;display:flex;gap:10px;opacity:0}
.p .p-scores .p-score{box-shadow:0 24px 60px rgba(0,0,0,.6)}
.p .p-score{display:flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;border:1px solid var(--cc-line);border-radius:14px;background:rgba(9,16,14,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:12px;color:var(--cc-soft)}
.p .p-ring{width:38px;height:38px}
.p .p-ring circle{fill:none;stroke-width:4}
.p .p-ring .t{stroke:rgba(255,255,255,.1)}
.p .p-ring .v{stroke:var(--cc-mint);stroke-linecap:butt;stroke-dasharray:113.1;stroke-dashoffset:113.1;transform:rotate(-90deg);transform-origin:center}
.p .p-ring text{fill:#fff;font-size:12px;font-weight:700;text-anchor:middle;dominant-baseline:central}
/* analytics card: floats off the frame's bottom-right corner */
.p .p-ana{position:absolute;right:-64px;bottom:-72px;z-index:4;width:392px;padding:18px 20px 16px;border:1px solid rgba(23,255,197,.3);border-radius:18px;background:linear-gradient(180deg,#0e1d1a,#0a1412);box-shadow:0 40px 90px rgba(0,0,0,.65);opacity:0}
.p .p-ana-top{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--cc-soft)}
.p .p-ana-big{display:flex;align-items:baseline;gap:10px;margin-top:8px}
.p .p-ana-big b{font-size:32px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.p .p-delta{padding:3px 9px;border-radius:99px;background:rgba(23,255,197,.12);color:var(--cc-mint);font-size:12.5px;font-weight:600}
.p .p-bars{display:flex;align-items:flex-end;gap:7px;height:96px;margin-top:14px;padding-bottom:18px;position:relative;border-bottom:1px solid rgba(255,255,255,.08)}
.p .p-bars i{position:relative;flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,rgba(23,255,197,.5),rgba(23,255,197,.12));transform-origin:bottom;transform:scaleY(0)}
.p .p-bars i:last-child{background:linear-gradient(180deg,#17FFC5,rgba(23,255,197,.35))}
.p .p-bars i em{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);font-size:10px;font-style:normal;color:var(--cc-mute)}
.p .p-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.p .p-kpi{padding:9px 11px;border:1px solid var(--cc-line);border-radius:12px;background:rgba(255,255,255,.02)}
.p .p-kpi>span{display:block;font-size:11px;color:var(--cc-mute)}
.p .p-kpi b{display:block;margin-top:2px;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.p .p-kpi b small{margin-left:6px;font-size:11px;color:var(--cc-mint)}
/* features */
.p .p-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:56px}
.p .p-feat{overflow:hidden;border:1px solid var(--cc-line);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));transition:border-color .3s,translate .5s var(--cc-ease),box-shadow .4s}
.p .p-feat:hover{border-color:var(--cc-mint-24);translate:0 -4px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.p .p-fvis{position:relative;height:240px;overflow:hidden;border-bottom:1px solid var(--cc-line);background:#0a1311}
.p .p-fbody{padding:22px 26px 26px}
.p .p-fbody .n{font-size:12.5px;font-weight:600;color:var(--cc-mint)}
.p .p-fbody h3{margin-top:8px;font-size:22px;font-weight:600;letter-spacing:-.015em}.p .p-fbody h3{font-size:22px !important}
.p .p-fbody p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--cc-soft)}
.p .p-tag{position:absolute;right:14px;top:12px;z-index:2;font-size:11px;color:var(--cc-mute);font-variant-numeric:tabular-nums}
.p .p-lay{position:absolute;inset:28px}
.p .p-lay .p-blk{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.1)}
.p .p-lay .p-blk.m{border-color:transparent;background:rgba(23,255,197,.85)}
.p .p-resp{position:absolute;left:50%;top:36px;bottom:28px;width:88%;padding:12px;overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:#0d1917;transform:translateX(-50%)}
.p .p-resp .hd{width:40%;height:10px;margin-bottom:10px;border-radius:4px;background:rgba(255,255,255,.28)}
.p .p-resp .row{display:grid;gap:8px;margin-bottom:8px}
.p .p-resp{display:flex;flex-direction:column}
.p .p-resp .hd{flex:none}
/* one grid for all six blocks: at 3, 2 or 1 across every row is full and all of them fit the frame (two fixed rows of three left a hole at 2 across and ran out of the frame) */
.p .p-resp .row{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr);margin-bottom:0}
.p .p-resp .row i{min-height:0;border-radius:6px;background:rgba(255,255,255,.1)}
.p .p-resp .row i.m{background:rgba(23,255,197,.7)}
.p .p-film{position:absolute;inset:26px 26px 22px}
.p .p-frames{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.p .p-fr{position:relative;height:104px;padding:7px;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#0d1917}
.p .p-fr.on{border-color:rgba(23,255,197,.5)}
.p .p-fr u{display:block;border-radius:3px;background:rgba(255,255,255,.18);text-decoration:none}
.p .p-fr u.h{width:70%;height:6px}
.p .p-fr u.t{width:90%;height:10px;margin-top:8px;background:rgba(255,255,255,.4)}
.p .p-fr u.l{width:60%;height:5px;margin-top:6px}
.p .p-fr u.im{height:30px;margin-top:8px;background:linear-gradient(135deg,#123a31,#0a2230)}
.p .p-fr u.c{width:44%;height:9px;margin-top:6px;background:var(--cc-mint)}
.p .p-fr .ok{position:absolute;right:6px;bottom:6px;width:16px;height:16px;border-radius:50%;background:var(--cc-mint);opacity:0}
.p .p-fr-t{display:block;margin-top:6px;font-size:10.5px;color:var(--cc-mute);text-align:center;font-variant-numeric:tabular-nums}
.p .p-track{position:relative;height:3px;margin-top:22px;border-radius:2px;background:rgba(255,255,255,.1)}
.p .p-track i{position:absolute;inset:0;border-radius:2px;background:var(--cc-mint);transform-origin:left;transform:scaleX(0)}
.p .p-ready{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:13px;color:var(--cc-soft)}
.p .p-ready b{color:#fff;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.p .p-conv{position:absolute;inset:24px;padding:18px;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:#0d1917}
.p .p-conv .hd{width:55%;height:12px;border-radius:4px;background:rgba(255,255,255,.3)}
.p .p-conv .ln{width:75%;height:8px;margin-top:10px;border-radius:4px;background:rgba(255,255,255,.12)}
.p .p-cta{position:absolute;left:18px;bottom:22px;padding:11px 18px;border-radius:99px;background:var(--cc-mint);color:var(--cc-on-mint);font-size:13px;font-weight:700}
.p .p-ripple{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid #fff;border-radius:50%;opacity:0}
.p .p-cursor{position:absolute;left:0;top:0;z-index:3;width:22px;height:22px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.p .p-toast{position:absolute;right:16px;top:16px;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid rgba(23,255,197,.35);border-radius:12px;background:#0b1513;font-size:12.5px;opacity:0;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.p .p-toast i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(23,255,197,.15);color:var(--cc-mint);font-style:normal;font-weight:700}
.p .p-toast small{display:block;font-size:11px;color:var(--cc-mute)}
/* problems */
.p .p-rows{margin-top:56px;border-top:1px solid var(--cc-line)}
.p .p-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px 48px;padding:32px 0;border-bottom:1px solid var(--cc-line)}
.p .p-row h3{display:flex;align-items:baseline;gap:18px;font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.015em}.p .p-row h3{font-size:22px !important}
.p .p-row h3 small{font-size:13px;font-weight:600;color:var(--cc-mint)}
.p .p-pts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px}
.p .p-pts li{display:flex;gap:12px;font-size:16px;line-height:1.5;color:var(--cc-soft)}
.p .p-pts svg{flex:none;width:20px;height:20px;margin-top:1px}
.p .p-pts svg path{fill:none;stroke:var(--cc-mint);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:0}
.p .p-pts svg circle{fill:rgba(23,255,197,.1)}
/* work deck */
.p .p-deck-ctl{display:flex;align-items:center;gap:18px}
.p .p-deck-ctl .p-arrow:disabled{opacity:.35;cursor:default;pointer-events:none}
/* the launch scores float over the build frame's top-left, so its address sits at the right of the bar (no cut letters) */
.p .p-build .p-url{margin-left:auto}
/* phones: the deck controls fit one line (the counter's bar goes, nothing wraps) */
@media (max-width:600px){
  .p .p-deck-ctl{gap:10px}
  .p .p-ctr{font-size:26px;white-space:nowrap}
  .p .p-ctr-bar{display:none}
  .p .p-deck-ctl .cc-link{white-space:nowrap}
}
.p .p-ctr{display:flex;align-items:flex-end;gap:10px;font-size:34px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.p .p-ctr small{padding-bottom:6px;font-size:13px;color:var(--cc-mute)}
.p .p-ctr-bar{width:110px;height:3px;margin:0 0 10px 6px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.p .p-ctr-bar i{display:block;height:100%;background:var(--cc-mint);transform-origin:left;transition:transform .5s var(--cc-ease)}
.p .p-arrow{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--cc-line);border-radius:50%;color:var(--cc-mint);transition:border-color .2s,background .2s}
.p .p-arrow:hover{border-color:var(--cc-mint);background:var(--cc-mint-08)}
.p .p-arrow.prev svg{transform:rotate(180deg)}
.p .p-deck{display:flex;gap:24px;margin-top:48px;padding:0 var(--cc-gutter) 8px calc((100vw - min(100vw, var(--cc-max) + 2 * var(--cc-gutter))) / 2 + var(--cc-gutter));overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:calc((100vw - min(100vw, var(--cc-max) + 2 * var(--cc-gutter))) / 2 + var(--cc-gutter));scrollbar-width:none;cursor:grab}
.p .p-deck::-webkit-scrollbar{display:none}
.p .p-card{flex:0 0 min(440px,80vw);scroll-snap-align:start}
.p .p-card a{display:block}
.p .p-card .im{overflow:hidden;border:1px solid var(--cc-line);border-radius:20px;background:var(--cc-lift);transition:border-color .3s}
.p .p-card img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .9s var(--cc-ease)}
.p .p-card a:hover .im{border-color:var(--cc-mint-24)}
.p .p-card a:hover img{transform:scale(1.05)}
.p .p-card h3{margin-top:18px;font-size:19px;font-weight:600;letter-spacing:-.01em}.p .p-card h3{font-size:19px !important}
.p .p-card p{margin-top:6px;font-size:13.5px;color:var(--cc-mute)}
/* faq */
.p .p-faq-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.p .p-faq-in>div:first-child{position:sticky;top:120px}
.p .p-q{border-bottom:1px solid var(--cc-line)}
.p .p-q:first-child{border-top:1px solid var(--cc-line)}
.p .p-q summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;font-size:18px;font-weight:500;letter-spacing:-.01em;list-style:none;cursor:pointer}
.p .p-q summary::-webkit-details-marker{display:none}
.p .p-q summary i{display:grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid var(--cc-line);border-radius:50%;color:var(--cc-mint);transition:transform .4s var(--cc-ease),background .3s,border-color .3s}
.p .p-q[open] summary i{transform:rotate(45deg);border-color:var(--cc-mint-24);background:var(--cc-mint-08)}
.p .p-q .a{overflow:hidden}
.p .p-q .a p{padding:0 60px 26px 0;font-size:16px;line-height:1.65;color:var(--cc-soft)}
/* next */
.p .p-circuit{position:relative;display:grid;grid-template-columns:repeat(5,1fr);margin:56px 0 44px}
.p .p-circuit:before{content:"";position:absolute;left:0;right:20%;top:6px;height:2px;background:rgba(255,255,255,.1)}
.p .p-circuit .ln{position:absolute;left:0;top:6px;width:60%;height:2px;background:linear-gradient(90deg,var(--cc-mint),var(--cc-green));transform-origin:left;transform:scaleX(0);box-shadow:0 0 10px var(--cc-mint)}
.p .p-circuit li{position:relative;padding-top:30px;font-size:13px;color:var(--cc-mute)}
.p .p-circuit li b{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cc-mute)}
.p .p-circuit li:before{content:"";position:absolute;left:0;top:0;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-radius:50%;background:var(--cc-bg)}
.p .p-circuit li.done:before{border-color:var(--cc-mint)}
.p .p-circuit li.cur:before{border-color:var(--cc-mint);background:var(--cc-mint);box-shadow:0 0 0 6px rgba(23,255,197,.16),0 0 18px var(--cc-mint)}
.p .p-circuit li.cur b{color:var(--cc-mint)}
.p .p-circuit li.done b{color:#fff}
.p .p-next-list{display:grid;grid-template-columns:minmax(0,520px)}
@media (max-width:1099.98px){
  .p .p-hero-grid,.p .p-build-grid,.p .p-faq-in{grid-template-columns:minmax(0,1fr)}
  .p .p-build-in{min-height:0}
  .p .p-step{opacity:1}.p .p-step .d{grid-template-rows:1fr}
  /* the build, below 1100px, is one screen: the frame, the step it is on under it (a stories bar you can tap), then the results.
     It plays by itself while it is on screen (Kyro, 2026-09-28: tied to the scroll it ran late and kept the steps away from the frame) */
  .p .p-build--auto .p-build-grid{grid-template-areas:"eb" "hd" "frame" "prog" "ana";gap:0}
  .p .p-build--auto .p-build-grid>div:first-child,.p .p-build--auto .p-canvas{display:contents}
  .p .p-build--auto .cc-eyebrow{grid-area:eb}
  .p .p-build--auto .p-h2{grid-area:hd;margin-bottom:28px}
  .p .p-build--auto .p-steps{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .p .p-build--auto .p-canvas .p-browser{grid-area:frame;min-width:0;cursor:pointer;touch-action:pan-y;user-select:none}
  .p .p-build--auto .p-prog{grid-area:prog;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:44px}
  .p .p-build--auto .p-prog>i{display:none}
  .p .p-build--auto [data-stepno]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .p .p-build--auto .p-prog .cc-link{justify-self:start}
  .p .p-segs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
  .p .p-nowrow{display:flex}
  /* the step's name and line, one line each at a fixed height, so nothing under them moves as the steps change (the step buttons
     above already show its number) */
  .p .p-now{display:block;height:46px}
  .p .p-now .n{display:none}
  .p .p-now b,.p .p-now .d{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .p .p-pin.r{left:auto!important;right:5%;flex-direction:row-reverse;transform-origin:right bottom}
  /* the results card sits under the controls, complete from the moment it comes on screen; at step 06 its border lights */
  .p .p-ana{grid-area:ana;position:relative;right:auto;bottom:auto;width:auto;margin-top:28px;opacity:1;transition:border-color .5s,box-shadow .5s}
  .p .p-ana.is-now{border-color:rgba(23,255,197,.75);box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 0 1px rgba(23,255,197,.25)}
  .p .p-scores{grid-area:frame;position:relative;left:auto;top:auto;align-self:end;justify-self:center;margin-bottom:-24px}
  .p .p-faq-in>div:first-child{position:static}
}
@media (max-width:767.98px){
  .p .p-feats,.p .p-row,.p .p-pts{grid-template-columns:minmax(0,1fr)}
  .p .p-stagewrap{padding-right:40px}
  .p .p-phone{width:128px}.p .p-screen{height:252px}
  .p .p-chip{display:none}
  .p .p-proof{gap:24px}
  .p .p-circuit li{font-size:0}
  .p .p-circuit li b{width:min-content;font-size:11px;letter-spacing:.1em}
  /* phones: the window takes the full column width (a phone-shaped frame inside the phone made it narrower still) and builds the
     site's own phone layout */
  .p .p-build--auto .p-canvas .p-vp{height:430px}
  .p .p-build--auto .p-canvas .p-layer .p-blk:nth-child(1){left:6%!important;top:3%!important;width:30%!important;height:4%!important}
  .p .p-build--auto .p-canvas .p-layer .p-blk:nth-child(2){left:82%!important;top:3%!important;width:12%!important;height:4%!important}
  .p .p-build--auto .p-canvas .p-layer .p-blk:nth-child(3){left:6%!important;top:12%!important;width:88%!important;height:10%!important}
  .p .p-build--auto .p-canvas .p-layer .p-blk:nth-child(4){left:6%!important;top:25%!important;width:70%!important;height:4%!important}
  .p .p-build--auto .p-canvas .p-layer .p-blk:nth-child(5){left:6%!important;top:32%!important;width:44%!important;height:6%!important}
  .p .p-build--auto .p-canvas .p-layer .p-blk:nth-child(6){left:6%!important;top:42%!important;width:88%!important;height:24%!important}
  .p .p-build--auto .p-canvas .p-layer .p-blk:nth-child(7){left:6%!important;top:70%!important;width:88%!important;height:12%!important}
  .p .p-build--auto .p-canvas .p-layer .p-blk:nth-child(8){left:6%!important;top:85%!important;width:88%!important;height:12%!important}
  .p .p-build--auto .p-canvas .p-layer .p-blk:nth-child(9){display:none}
  .p .p-build--auto .p-canvas .p-pin:not(.r){left:52%!important;top:26%!important}
  .p .p-build--auto .p-canvas .p-pin.r{top:70%!important}
  .p .p-build--auto .p-pin .w{display:none}.p .p-build--auto .p-pin .m{display:block}
}
@media (prefers-reduced-motion:reduce){.p .p-floor i{animation:none}}
/* reduced motion, below 1100px: the finished build, then the six steps as a plain list (nothing to play, so no step buttons) */
@media (prefers-reduced-motion:reduce) and (max-width:1099.98px){
  .p .p-build--auto .p-build-grid{grid-template-areas:"eb" "hd" "frame" "steps" "prog" "ana"}
  .p .p-build--auto .p-steps{grid-area:steps;position:static;width:auto;height:auto;margin:48px 0 0;overflow:visible;clip-path:none;white-space:normal}
  .p .p-build--auto .p-segs,.p .p-build--auto .p-nowrow{display:none}
  .p .p-build--auto .p-prog{margin-top:20px}
}
/* Service page prototypes: everything the Web Design prototype does not already style.
   The base (layout, hero, pinned build, features, problems, deck, FAQ, next, footer blend) comes from its own <style>. */

/* ---------- shared UI pieces for scenes and tiles ---------- */
.p .s-l{position:absolute;inset:0;opacity:0}
.p .s-l[data-l="6"]{opacity:1}
.p .s-title{margin-left:14px;font-size:11.5px;color:var(--cc-mute)}
.p .s-a{position:absolute}
.p .s-card{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#0d1917;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.p .s-card.m{border-color:rgba(23,255,197,.42);background:linear-gradient(180deg,#0f231f,#0b1714)}
.p .s-card.sel{transition:border-color .3s,box-shadow .3s}
.p .s-card.s-ov{background:transparent;box-shadow:none;border-color:transparent}
.p .s-card.sel.on{border-color:var(--cc-mint);box-shadow:0 0 0 3px rgba(23,255,197,.18),0 18px 40px rgba(0,0,0,.4)}
.p .s-pad{padding:14px 16px}
.p .s-pad.s-slim{padding:10px 8px}
.p .s-cap{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cc-mute)}
.p .s-h{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;color:#fff}
.p .s-p{display:block;font-size:12px;line-height:1.45;color:var(--cc-soft)}
.p .s-big{display:block;font-size:30px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff}
.p .s-num{font-variant-numeric:tabular-nums}
.p .s-row{display:flex;align-items:center;gap:8px}
.p .s-wrap{display:flex;flex-wrap:wrap;gap:6px}
.p .s-ln{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.16)}
.p .s-ln.t{height:9px;background:rgba(255,255,255,.34)}
.p .s-ln.m{background:rgba(23,255,197,.6)}
.p .s-ln+.s-ln{margin-top:7px}
.p .s-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--cc-line);border-radius:99px;background:rgba(255,255,255,.04);font-size:11.5px;line-height:1.2;color:var(--cc-soft);white-space:nowrap}
.p .s-chip.m,.p .s-chip.on{border-color:rgba(23,255,197,.45);background:rgba(23,255,197,.12);color:#fff}
.p .s-chip.x{border-color:rgba(255,120,120,.45);background:rgba(255,120,120,.1);color:#ffc2c2}
.p .s-chip{transition:border-color .3s,background .3s,color .3s}
.p .s-ok,.p .s-no{display:inline-grid;flex:none;place-items:center;width:18px;height:18px;border-radius:50%;font-size:10.5px;font-weight:800;line-height:1}
.p .s-ok{background:var(--cc-mint);color:var(--cc-on-mint)}
.p .s-no{background:#ff7a7a;color:#1d0606}
.p .s-btn{display:inline-block;padding:7px 14px;border-radius:99px;background:var(--cc-mint);color:var(--cc-on-mint);font-size:11.5px;font-weight:700;white-space:nowrap}
.p .s-btn.g{background:rgba(255,255,255,.1);color:var(--cc-soft)}
.p .s-img{position:absolute;border-radius:8px;background:linear-gradient(135deg,#123a31,#0a2230)}
.p .s-img.b{background:linear-gradient(135deg,#17FFC5,#0A9E7E)}
.p .s-img.c{background:linear-gradient(160deg,#1a2b3d,#0d1917)}
.p .s-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.p .s-svg .ln{fill:none;stroke:rgba(23,255,197,.55);stroke-width:1.6;stroke-linecap:round}
.p .s-svg .ln.w{stroke:rgba(255,255,255,.28)}
.p .s-svg .ln.d{stroke-dasharray:4 5}
.p .s-svg .ln.b{stroke:#3d8bff;stroke-width:2}
.p .s-node{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;box-sizing:border-box;border:2px solid var(--cc-mint);border-radius:50%;background:#0a1311;transition:background .3s,box-shadow .3s}
.p .s-node.on,.p .s-node.f{background:var(--cc-mint);box-shadow:0 0 0 5px rgba(23,255,197,.16),0 0 14px var(--cc-mint)}
.p .s-node.r{border-color:#ff7a7a}
.p .s-node.r.on{border-color:var(--cc-mint)}
.p .s-dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:rgba(255,255,255,.35)}
.p .s-dot.m{background:var(--cc-mint);box-shadow:0 0 0 6px rgba(23,255,197,.16),0 0 16px var(--cc-mint)}
.p .s-dot.r{background:#ff7a7a}
.p .s-dot.r.on{background:var(--cc-mint)}
.p .s-bar{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,rgba(23,255,197,.55),rgba(23,255,197,.9));transform-origin:left}
.p .s-bar.w{background:rgba(255,255,255,.2)}
.p .s-col{position:absolute;bottom:0;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,rgba(23,255,197,.55),rgba(23,255,197,.12));transform-origin:bottom}
.p .s-col.m{background:linear-gradient(180deg,#17FFC5,rgba(23,255,197,.35))}
.p .s-pin{position:absolute;display:flex;align-items:flex-start;gap:7px;transform-origin:left bottom}
.p .s-pin i{display:grid;flex:none;place-items:center;width:24px;height:24px;border-radius:50% 50% 50% 4px;background:var(--cc-blue);color:#fff;font-size:11px;font-weight:700;font-style:normal;box-shadow:0 6px 18px rgba(24,99,220,.5)}
.p .s-pin i.m{background:var(--cc-mint);color:var(--cc-on-mint);box-shadow:0 6px 18px rgba(23,255,197,.35)}
.p .s-pin span{padding:7px 10px;border-radius:9px;background:#fff;color:#0b1513;font-size:11.5px;font-weight:500;white-space:nowrap}
.p .s-cur{position:absolute;display:flex;align-items:flex-start;gap:2px;pointer-events:none;z-index:3}
.p .s-cur svg{width:18px;height:18px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.p .s-cur span{margin-top:12px;padding:2px 7px;border-radius:5px;background:#3d8bff;color:#fff;font-size:10.5px;font-weight:600;white-space:nowrap}
.p .s-cur.m span{background:var(--cc-mint);color:var(--cc-on-mint)}
.p .s-cur.o span{background:#ff9f43;color:#1b0e02}
.p .s-mark{display:block;overflow:visible}
.p .s-mark .ring{fill:none;stroke:var(--cc-mint);stroke-width:7}
.p .s-mark .arc{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round}
.p .s-mark .dot{fill:var(--cc-mint)}
.p .s-mark.sk .ring,.p .s-mark.sk .arc{stroke:rgba(255,255,255,.55);stroke-width:2.5;stroke-dasharray:3 4}
.p .s-mark.sk .dot{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2.5}
/* the mark in a vector editor (parts.vec_mark): blue handles, white anchor points, the selected ones filled blue */
.p .s-vec .hd{fill:none;stroke:#3d8bff;stroke-width:1.5px;vector-effect:non-scaling-stroke}
.p .s-vec .he{fill:#3d8bff}
.p .s-vec .an{fill:#fff;stroke:#3d8bff;stroke-width:1.5px;vector-effect:non-scaling-stroke}
.p .s-vec .an.on{fill:#3d8bff;stroke:#fff}
.p .s-file{display:inline-grid;place-items:center;width:44px;height:54px;border:1px solid rgba(255,255,255,.18);border-radius:6px 14px 6px 6px;background:#0f1d1a;font-size:11px;font-weight:700;color:#fff}
.p .s-file.m{border-color:rgba(23,255,197,.5);color:var(--cc-mint)}
.p .s-sw{border-radius:10px;background:var(--c)}
.p .s-sw em{position:absolute;left:8px;bottom:7px;font-size:10px;font-style:normal;font-weight:600;color:var(--t,#04110D)}
.p .s-phone{position:absolute;box-sizing:border-box;padding:8px 7px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:#0d1917}
.p .s-phone:before{content:"";display:block;width:34%;height:4px;margin:0 auto 8px;border-radius:2px;background:rgba(255,255,255,.14)}
.p .s-frame{position:absolute;box-sizing:border-box;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#0d1917}
.p .s-lab{position:absolute;font-size:10.5px;color:var(--cc-mute);white-space:nowrap}
.p .s-tag{position:absolute;padding:2px 7px;border-radius:5px;background:#2563eb;color:#fff;font-size:10px;font-weight:600;white-space:nowrap}
.p .s-tag.r{background:#ff5c8a}
.p .s-x{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;font-weight:300;color:#ff7a7a}
.p .s-ripple{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border:2px solid #fff;border-radius:50%}
.p .s-type{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.7;color:#cfe}
.p .s-type b{color:var(--cc-mint);font-weight:500}
.p .s-glow{box-shadow:0 0 0 1px rgba(23,255,197,.25),0 0 30px rgba(23,255,197,.18)}
/* the canvas's grid background */
.p .s-grid{background-color:#0a1311;background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);background-size:22px 22px}
.p .p-vp.s-grid{background-color:#0a1311}
/* figma-like side panel */
.p .s-side{position:absolute;left:0;top:0;bottom:0;width:17%;box-sizing:border-box;padding:12px 8px;border-right:1px solid var(--cc-line);background:rgba(10,20,18,.8)}
.p .s-side span{display:flex;align-items:center;gap:6px;padding:6px 7px;border-radius:6px;font-size:11px;color:var(--cc-soft);transition:background .3s,color .3s}
.p .s-side span:before{content:"";width:8px;height:10px;border:1.5px solid currentColor;border-radius:2px;opacity:.7}
.p .s-side span.on{background:rgba(24,99,220,.32);color:#fff}
.p .s-av{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--cc-blue);color:#fff;font-size:10.5px;font-weight:700;font-style:normal}
.p .s-av.m{background:var(--cc-mint);color:var(--cc-on-mint)}
.p .s-av.o{background:#ff9f43;color:#1b0e02}
.p .p-bar .r{margin-left:auto;display:flex;gap:6px;align-items:center}
/* a part centred on a point (parts.at): a label or tag under (.b), over (.t) or on a mark stays centred on it at every size;
   .l / .r start or end it at the point instead */
.p .s-at{position:absolute;width:0;height:0;display:flex;justify-content:center;align-items:center}
.p .s-at.b{align-items:flex-start}
.p .s-at.t{align-items:flex-end}
.p .s-at.l{justify-content:flex-start}
.p .s-at.r{justify-content:flex-end}
.p .s-at>*{position:static!important;flex:none}
.p .s-at.b>*{margin-top:var(--g,12px)}
.p .s-at.t>*{margin-bottom:var(--g,12px)}
.p .s-tag.m{background:var(--cc-mint);color:var(--cc-on-mint)}
/* a card sized by what it holds, centred in the window (parts.mid), so it never ends with an empty half */
.p .s-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.p .s-mid>*{position:relative!important}
/* a card whose content spreads from its top to its bottom */
.p .s-spread{display:flex;flex-direction:column;justify-content:space-between}
/* a highlight on its own part (one row, one screen), lit for a while (data-for) so only one thing is current */
.p .s-hl{position:absolute;inset:-1px;border:1.5px solid transparent;border-radius:inherit;pointer-events:none;transition:border-color .3s,box-shadow .3s,background .3s}
.p .s-hl.on{border-color:var(--cc-mint);background:rgba(23,255,197,.06);box-shadow:0 0 0 3px rgba(23,255,197,.16)}
.p .s-hl.b.on{border-color:#3d8bff;background:rgba(61,139,255,.06);box-shadow:0 0 0 3px rgba(61,139,255,.2)}
/* a link from one screen to the next: a straight arrow edge to edge */
.p .s-arr{position:absolute;height:0;border-top:1.5px solid #3d8bff;transform-origin:left}
.p .s-arr:after{content:"";position:absolute;right:-2px;top:-5.5px;border:5px solid transparent;border-right:0;border-left:7px solid #3d8bff}
/* a tap on a button: the ring sits on the button's middle */
.p .s-tap{position:relative}
.p .s-tap .s-ripple{left:50%;top:50%}

/* ---------- floats off the pinned canvas (like the Web Design launch scores and analytics card) ---------- */
/* the scores sit above the window, clear of its title bar; the card hangs below its corner, over no more than its bottom
   edge (Kyro 2026-09-30: the scores covered the window's title, the card covered the last step's parts) */
.p .p-float{position:absolute;z-index:4}
.p .p-float.tl{left:-56px;bottom:calc(100% + 14px);display:flex;gap:10px}
.p .p-float.br{right:-64px;bottom:-104px;width:340px;padding:16px 18px;box-sizing:border-box;border:1px solid rgba(23,255,197,.3);border-radius:18px;background:linear-gradient(180deg,#0e1d1a,#0a1412);box-shadow:0 40px 90px rgba(0,0,0,.65)}
.p .p-float.tl .p-score{white-space:nowrap}
.p .p-float .s-list{display:grid;gap:9px;margin-top:10px}
.p .p-float .s-list li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--cc-soft)}
.p .p-float .p-bars{height:48px}

/* ---------- feature tiles ---------- */
/* a loop starting over (proto.js snap): nothing eases back, the fresh frame starts clean */
.t-snap,.t-snap *{transition:none!important}
.p .t-f{position:absolute;inset:0}
.p .t-f+.t-f{opacity:0}
.p .p-fbody ul{display:grid;gap:6px;margin-top:14px}
.p .p-fbody ul li{display:flex;gap:9px;font-size:14px;line-height:1.45;color:var(--cc-soft)}
.p .p-fbody ul li:before{content:"";flex:none;width:6px;height:6px;margin-top:7px;border-radius:50%;background:var(--cc-mint)}

/* ---------- hero variants ---------- */
.p .hx-frame{position:relative;border:1px solid var(--cc-line);border-radius:18px;background:var(--cc-lift);overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(23,255,197,.05)}
.p .hx-frame:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(23,255,197,.12);pointer-events:none}
.p .hx-frame .im{display:block;height:440px;overflow:hidden}
.p .hx-frame img{display:block;width:100%;height:100%;object-fit:cover;will-change:transform}
.p .hx-card{position:absolute;z-index:3;box-sizing:border-box;border:1px solid rgba(23,255,197,.3);border-radius:18px;background:linear-gradient(180deg,#0e1d1a,#0a1412);box-shadow:0 30px 80px rgba(0,0,0,.65);overflow:hidden}
.p .hx-card .im{display:block;overflow:hidden}
.p .hx-card img{display:block;width:100%;height:100%;object-fit:cover}
.p .hx-ui{position:relative;height:150px}

/* ---------- showcase (Web Functions in Action) ---------- */
.p .sc-rows{display:grid;gap:clamp(48px,5vw,72px);margin-top:56px}
.p .sc-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.p .sc-row:nth-child(even) .sc-media{order:2}
.p .sc-media{position:relative;height:380px;overflow:hidden;border:1px solid var(--cc-line);border-radius:24px;box-shadow:0 40px 100px rgba(0,0,0,.45)}
.p .sc-no{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--cc-mute)}
.p .sc-no b{display:grid;place-items:center;min-width:34px;height:26px;padding:0 9px;border-radius:99px;background:var(--cc-mint);color:var(--cc-on-mint);font-size:12px;font-weight:700}
.p .sc-row h3{margin-top:16px;font-size:clamp(26px,2.6vw,34px);font-weight:500;line-height:1.1;letter-spacing:-.02em}.p .sc-row h3{font-size:clamp(26px,2.6vw,34px) !important}
.p .sc-row .sc-name{margin-top:8px;font-size:14px;font-weight:600;color:var(--cc-mint)}
.p .sc-row p{margin-top:14px;font-size:16px;line-height:1.6;color:var(--cc-soft)}
.p .sc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.p .sc-pts{display:grid;gap:8px;margin-top:18px}
.p .sc-pts li{display:flex;gap:10px;font-size:15px;color:var(--cc-soft)}
.p .sc-pts li:before{content:"";flex:none;width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--cc-mint)}

/* ---------- how we work (website services, from the hub) ---------- */
.p .h-proc{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 18px;margin:56px 0 40px}
.p .h-proc:before{content:"";position:absolute;left:8px;width:calc(500% / 6 + 15px);top:7px;height:2px;background:rgba(255,255,255,.1)}
.p .h-proc .ln{position:absolute;left:8px;top:7px;width:calc(500% / 6 + 15px);height:2px;background:linear-gradient(90deg,var(--cc-mint),var(--cc-green));transform-origin:left;box-shadow:0 0 10px var(--cc-mint)}
.p .h-proc li{position:relative;padding-top:34px}
.p .h-proc li:before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;box-sizing:border-box;border:2px solid rgba(255,255,255,.3);border-radius:50%;background:var(--cc-bg);transition:border-color .4s,background .4s,box-shadow .4s}
.p .h-proc li.on:before{border-color:var(--cc-mint);background:var(--cc-mint);box-shadow:0 0 0 6px rgba(23,255,197,.16),0 0 18px var(--cc-mint)}
.p .h-proc b{display:block;font-size:12.5px;font-weight:600;color:var(--cc-mint);font-variant-numeric:tabular-nums}
.p .h-proc strong{display:block;margin-top:8px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.p .h-proc li span{display:block;margin-top:4px;font-size:14px;color:var(--cc-mute)}

/* a single project: one wide card instead of a deck */
.p .p-deck.one{cursor:auto}
.p .p-deck.one .p-card{flex-basis:min(620px,88vw)}

@media (max-width:1099.98px){
  .p .p-float.tl{position:relative;left:auto;top:auto;bottom:auto;margin-top:14px;flex-wrap:wrap}
  .p .p-float.br{position:relative;right:auto;bottom:auto;width:auto;margin-top:14px}
  .p .sc-row{grid-template-columns:minmax(0,1fr);gap:28px}
  .p .sc-row:nth-child(even) .sc-media{order:0}
  .p .h-proc{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px}
  .p .h-proc:before,.p .h-proc .ln{display:none}
}
@media (max-width:767.98px){
  .p .hx-frame .im{height:300px}
  .p .hx-card{transform:scale(.8);transform-origin:right bottom}
  .p .sc-media{height:320px}
  .p .h-proc{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .p .p-canvas .p-vp{height:360px}
}
/* Page-type components for the prototypes. Builds on the Web Design prototype's base and proto-extra.css. */

/* ---------- shared bits ---------- */
.p [hidden]{display:none!important} /* components set display:grid/flex; hidden must still win */
.p .pg-hero{position:relative;padding:calc(var(--cc-header-h) + 64px) 0 clamp(40px,4vw,64px);overflow:hidden}
.p .pg-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 50% 45% at 74% 30%,rgba(23,255,197,.09),transparent 70%);pointer-events:none}
.p .pg-grid{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:center}
.p .pg-lede{margin-top:24px;max-width:48ch;font-size:19px;line-height:1.6;color:var(--cc-soft)}
.p .pg-h1{margin-top:22px;font-size:clamp(46px,5.4vw,80px);font-weight:500;font-stretch:106%;line-height:.98;letter-spacing:-.035em;text-wrap:balance}
.p .pg-h1.s{font-size:clamp(40px,4.4vw,64px)}
.p .pg-kicker{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.p .pg-sec{position:relative;padding:clamp(72px,6vw,96px) 0 0}
.p .pg-sec:last-child{padding-bottom:clamp(40px,4vw,64px)}
.p .pg-2col{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.p .pg-2col.c{align-items:center}
.p .pg-sticky{position:sticky;top:120px}
.p .pg-prose p{margin-top:18px;font-size:17px;line-height:1.7;color:var(--cc-soft)}
.p .pg-prose p:first-child{margin-top:0}
.p .pg-big{font-size:clamp(22px,2.2vw,28px);font-weight:500;line-height:1.35;letter-spacing:-.015em;color:#fff;text-wrap:pretty}
.p .pg-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--cc-line);border-radius:99px;background:var(--cc-glass);font-size:13px;color:var(--cc-soft)}
.p .pg-chip b{color:#fff;font-weight:600}
.p .pg-chip i{width:8px;height:8px;border-radius:50%;background:var(--cc-mint);box-shadow:0 0 10px var(--cc-mint)}
.p .pg-frame{position:relative;border:1px solid var(--cc-line);border-radius:22px;background:var(--cc-lift);overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.55),0 0 0 1px rgba(23,255,197,.05)}
.p .pg-frame img{display:block;width:100%;height:100%;object-fit:cover}
.p .pg-link{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:500;border-bottom:1px solid rgba(23,255,197,.5);padding-bottom:2px}
.p .pg-link svg{width:18px;height:18px;color:var(--cc-mint);transition:translate .3s var(--cc-ease)}
.p .pg-link:hover svg{translate:4px 0}

/* ---------- about ---------- */
.p .ab-founder{position:relative}
.p .ab-founder .pg-frame{aspect-ratio:4/5}
.p .ab-founder .pg-frame img{object-position:50% 20%}
/* drifting pictures move ±6 % of their height: a little larger than their frame, so the frame never shows at an edge */
.p [data-drift]{scale:1.13}
.p .ab-sign{position:absolute;right:-28px;bottom:32px;z-index:2;padding:14px 18px;border:1px solid rgba(23,255,197,.3);border-radius:16px;background:linear-gradient(180deg,#0e1d1a,#0a1412);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.p .ab-sign b{display:block;font-size:17px;font-weight:600}
.p .ab-sign span{font-size:13px;color:var(--cc-mute)}
.p .ab-path{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 14px;margin-top:40px}
.p .ab-path:before{content:"";position:absolute;left:7px;right:calc(25% - 7px);top:7px;height:2px;background:linear-gradient(90deg,var(--cc-mint),var(--cc-green));box-shadow:0 0 10px var(--cc-mint)}
.p .ab-path li{position:relative;padding-top:30px;font-size:13.5px;line-height:1.45;color:var(--cc-soft)}
.p .ab-path li:before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;box-sizing:border-box;border:2px solid var(--cc-mint);border-radius:50%;background:var(--cc-bg)}
.p .ab-path li:last-child:before{background:var(--cc-mint);box-shadow:0 0 0 6px rgba(23,255,197,.16),0 0 16px var(--cc-mint)}
.p .ab-path b{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cc-mint)}
/* the timeline: pinned and walked sideways on wide screens, a swipeable row elsewhere */
.p .hs{position:relative;padding:clamp(72px,6vw,96px) 0 0}
.p .hs-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.p .hs-year{font-size:clamp(64px,8vw,120px);font-weight:600;font-stretch:110%;line-height:.9;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(23,255,197,.45);font-variant-numeric:tabular-nums}
.p .hs-view{position:relative;margin-top:48px;overflow:hidden}
.p .hs-track{position:relative;display:flex;gap:24px;width:max-content;padding:44px var(--cc-gutter) 8px calc((100vw - min(100vw, var(--cc-max) + 2 * var(--cc-gutter))) / 2 + var(--cc-gutter))}
.p .hs-line{position:absolute;left:0;right:0;top:14px;height:2px;background:rgba(255,255,255,.08)}
.p .hs-fill{position:absolute;left:0;right:0;top:14px;height:2px;background:linear-gradient(90deg,var(--cc-mint),var(--cc-green));transform-origin:left;transform:scaleX(0);box-shadow:0 0 10px var(--cc-mint)}
.p .hs-stop{position:relative;flex:0 0 340px;padding:26px 24px 24px;border:1px solid var(--cc-line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));opacity:.45;transition:opacity .5s,border-color .5s}
.p .hs-stop:before{content:"";position:absolute;left:24px;top:-38px;width:16px;height:16px;box-sizing:border-box;border:2px solid rgba(255,255,255,.3);border-radius:50%;background:var(--cc-bg);transition:border-color .4s,background .4s,box-shadow .4s}
.p .hs-stop.on{opacity:1;border-color:rgba(23,255,197,.24)}
.p .hs-stop.on:before{border-color:var(--cc-mint);background:var(--cc-mint);box-shadow:0 0 0 6px rgba(23,255,197,.16),0 0 16px var(--cc-mint)}
.p .hs-stop small{font-size:13px;font-weight:600;color:var(--cc-mint);font-variant-numeric:tabular-nums}
.p .hs-stop h3{margin-top:10px;font-size:21px;font-weight:600;letter-spacing:-.015em}.p .hs-stop h3{font-size:21px !important}
.p .hs-stop p{margin-top:10px;font-size:15px;line-height:1.55;color:var(--cc-soft)}
.p .hs-stop.big{flex-basis:420px;background:linear-gradient(180deg,rgba(23,255,197,.08),rgba(23,255,197,.02))}
/* below 1100 px and under reduced motion the years run down the page along a lit line: every stop in the page flow, reachable
   by an ordinary scroll (a sideways strip hid 2017 to 2026 from wheels and keyboards); the outline year has nothing to follow */
.p .hs.is-static{--hx:calc((100vw - min(100vw, var(--cc-max) + 2 * var(--cc-gutter))) / 2 + var(--cc-gutter))}
.p .hs.is-static .hs-year{display:none}
.p .hs.is-static .hs-view{margin-top:36px;overflow:visible}
.p .hs.is-static .hs-track{display:grid;gap:14px;width:auto;max-width:calc(var(--hx) + 34px + 720px);padding:4px var(--cc-gutter) 0 calc(var(--hx) + 34px)}
.p .hs.is-static .hs-line,.p .hs.is-static .hs-fill{left:calc(var(--hx) + 7px);right:auto;top:0;bottom:28px;width:2px;height:auto}
.p .hs.is-static .hs-stop,.p .hs.is-static .hs-stop.big{flex:none;opacity:1;border-color:rgba(23,255,197,.18)}
.p .hs.is-static .hs-stop:before{left:-35px;top:28px;border-color:var(--cc-mint);background:var(--cc-mint);box-shadow:0 0 0 5px rgba(23,255,197,.14)}
.p .ab-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px;border-top:1px solid var(--cc-line);border-bottom:1px solid var(--cc-line)}
.p .ab-nums li{padding:34px 24px;border-left:1px solid var(--cc-line)}
.p .ab-nums li:first-child{border-left:0;padding-left:0}
.p .ab-nums b{display:block;font-size:clamp(44px,5vw,68px);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.p .ab-nums li>span{display:block;margin-top:10px;font-size:14px;color:var(--cc-mute)}
.p .ab-team{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-top:48px}
.p .ab-mate{display:block;width:100%;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer;position:relative;overflow:hidden;border:1px solid var(--cc-line);border-radius:20px;background:var(--cc-lift);transition:border-color .3s,translate .5s var(--cc-ease)}
.p .ab-mate .im{display:block;aspect-ratio:4/5;overflow:hidden}
.p .ab-mate img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05);transition:filter .5s,transform .9s var(--cc-ease)}
.p .ab-mate .tx{display:block;padding:14px 16px 16px;transition:opacity .3s}
.p .ab-mate:hover .tx,.p .ab-mate:focus-visible .tx{opacity:0} /* the teaser takes the caption's place: no text on text */
.p .ab-mate b{display:block;font-size:16px;font-weight:600}
.p .ab-mate span{display:block;margin-top:3px;font-size:13px;color:var(--cc-mint)}
.p .ab-mate .ab-teaser{display:block;position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(180deg,rgba(7,12,11,0),rgba(7,12,11,.96) 34%);font-size:13px;line-height:1.5;color:var(--cc-soft);transform:translateY(101%);transition:transform .5s var(--cc-ease)}
.p .ab-mate:hover,.p .ab-mate:focus-visible{border-color:var(--cc-mint-24);translate:0 -4px}
.p .ab-mate:hover img,.p .ab-mate:focus-visible img{filter:none;transform:scale(1.05)}
.p .ab-mate:hover .ab-teaser,.p .ab-mate:focus-visible .ab-teaser{transform:none}

.p .ab-more{display:block;margin-top:8px;font-style:normal;font-weight:600;color:var(--cc-mint)}
/* the full bio opens in a dialog: photo on the left, the whole bio on the right, previous / next to walk the team */
.p .ab-dlg{width:min(980px,calc(100vw - 32px));max-width:none;max-height:min(86vh,720px);padding:0;border:1px solid rgba(23,255,197,.28);border-radius:26px;background:linear-gradient(180deg,#0e1d1a,#0a1412);color:#fff;box-shadow:0 60px 160px rgba(0,0,0,.7);overflow:hidden}
.p .ab-dlg::backdrop{background:rgba(3,7,6,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.p .ab-bio{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);height:min(86vh,720px)}
.p .ab-bio .im{overflow:hidden}
.p .ab-bio img{display:block;width:100%;height:100%;object-fit:cover}
/* the text fades out above the previous / next buttons instead of running under them */
.p .ab-bio .tx{padding:44px 48px 120px;overflow:auto;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 118px),transparent calc(100% - 64px));mask-image:linear-gradient(180deg,#000 calc(100% - 118px),transparent calc(100% - 64px))}
.p .ab-bio small{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cc-mute)}
.p .ab-bio h3{margin-top:14px;font-size:clamp(30px,3vw,42px);font-weight:500;letter-spacing:-.03em;line-height:1.05}.p .ab-bio h3{font-size:clamp(30px,3vw,42px) !important}
.p .ab-bio .role{display:inline-block;margin-top:12px;padding:5px 12px;border-radius:99px;background:rgba(23,255,197,.12);color:var(--cc-mint);font-size:13px;font-weight:600}
.p .ab-bio .pg-prose{margin-top:26px}
.p .ab-x{position:absolute;right:16px;top:16px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--cc-line);border-radius:50%;background:rgba(9,16,14,.85);color:#fff;font-size:16px;cursor:pointer;transition:border-color .2s}
.p .ab-dlg-nav{position:absolute;right:24px;bottom:24px;z-index:2;display:flex;gap:10px}
.p .ab-dlg-nav button{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--cc-line);border-radius:50%;background:rgba(9,16,14,.85);color:var(--cc-mint);font-size:18px;cursor:pointer;transition:border-color .2s,background .2s}
.p .ab-x:hover,.p .ab-dlg-nav button:hover{border-color:var(--cc-mint);background:rgba(23,255,197,.1)}
@media (max-width:767.98px){.p .ab-bio{grid-template-columns:minmax(0,1fr);grid-template-rows:240px minmax(0,1fr);height:min(88vh,760px)}.p .ab-bio .tx{padding:26px 22px 120px}.p .ab-bio img{object-position:50% 25%}}

/* ---------- process ---------- */
.p .pr-stage .d>span{display:block}
.p .pr-list{display:grid;gap:7px;margin-top:10px}
.p .pr-list li{display:flex;align-items:baseline;gap:9px;font-size:14px;color:var(--cc-soft)}
.p .pr-list li:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--cc-mint);transform:translateY(-1px)}
.p .pr-list em{margin-left:6px;padding:1px 7px;border:1px solid rgba(255,196,0,.35);border-radius:99px;font-size:10.5px;font-style:normal;color:#ffd166}
.p .pr-img{position:absolute;inset:0}
.p .pr-img img{display:block;width:100%;height:100%;object-fit:cover}
.p .pr-note{position:absolute;left:18px;bottom:18px;right:18px;display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid var(--cc-line);border-radius:14px;background:rgba(9,16,14,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13px;color:var(--cc-soft)}
.p .pr-note b{color:var(--cc-mint);font-weight:600;white-space:nowrap}
/* wide screens: the pinned stages fit a 900 px window (it pins centred, so its top padding only pushed the step bar off) */
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){
  .p .pr-build .p-build-in{padding-top:32px}
  .p .pr-build .p-canvas .p-vp{height:400px}
}
/* phones, tablets and reduced motion: no pinned canvas; each stage is a card with its own picture and caption */
.p .pr-mimg{display:none}
@media (max-width:1099.98px),(prefers-reduced-motion:reduce){
  .p .pr-build .p-canvas,.p .pr-build .p-prog{display:none}
  .p .pr-build .p-build-grid{grid-template-columns:minmax(0,1fr)}
  .p .pr-build .p-build-grid>div:first-child{max-width:760px}
  .p .pr-build .p-step{opacity:1}
  .p .pr-build .p-step .d{grid-template-rows:1fr}
  .p .pr-mimg{display:block;margin:14px 0 6px}.p figure.pr-mimg{margin:14px 0 6px !important}
  .p .pr-mimg img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--cc-line);border-radius:16px}
  .p .pr-mimg figcaption{display:flex;gap:10px;margin-top:10px;font-size:13px;line-height:1.45;color:var(--cc-soft)}
  .p .pr-mimg figcaption b{display:none} /* the stage number is already on the card */
}
.p .pr-princ{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:48px}

/* ---------- contact ---------- */
.p .ct-grid{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.p .ct-lines{display:grid;gap:12px;margin-top:32px}
.p .ct-lines a,.p .ct-lines span{display:inline-flex;align-items:center;gap:12px;font-size:16px;color:var(--cc-soft)}
.p .ct-lines a{color:#fff}
.p .ct-lines svg{width:20px;height:20px;color:var(--cc-mint)}
.p .ct-rating{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:12px 18px 12px 14px;border:1px solid var(--cc-line);border-radius:16px;background:var(--cc-glass)}
.p a.ct-rating{transition:border-color .25s}
.p a.ct-rating:hover{border-color:var(--cc-mint-24)}
.p .ct-rating b{font-size:28px;font-weight:600;letter-spacing:-.02em}
.p .ct-rating .cc-star{width:22px;height:22px}
.p .ct-rating span{font-size:13px;color:var(--cc-mute)}
.p .cf{position:relative;padding:32px;border:1px solid rgba(23,255,197,.24);border-radius:26px;background:linear-gradient(180deg,rgba(14,29,26,.92),rgba(10,20,18,.92));box-shadow:0 40px 120px rgba(0,0,0,.55)}
.p .cf h2{font-size:26px;font-weight:600;letter-spacing:-.02em}
.p .cf-sub{margin-top:6px;font-size:14px;color:var(--cc-mute)}
.p .cf-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.p .cf-chip{padding:8px 14px;border:1px solid var(--cc-line);border-radius:99px;background:rgba(255,255,255,.03);font-size:13.5px;color:var(--cc-soft);cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.p .cf-chip:hover{border-color:rgba(23,255,197,.4);color:#fff}
.p .cf-chip[aria-pressed="true"]{border-color:var(--cc-mint);background:rgba(23,255,197,.14);color:#fff}
.p .cf-chip[aria-pressed="true"]:before{content:"✓";margin-right:6px;color:var(--cc-mint);font-weight:700}
.p .cf-label{display:block;margin-top:24px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cc-mute)}
.p .cf-field{position:relative;margin-top:18px}
.p .cf-field input,.p .cf-field textarea{display:block;width:100%;box-sizing:border-box;padding:24px 16px 10px;border:1px solid var(--cc-line);border-radius:14px;background:rgba(255,255,255,.03);color:#fff;font:inherit;font-size:16px;outline:none;transition:border-color .25s,box-shadow .25s,background .25s}
.p .cf-field textarea{min-height:140px;resize:vertical}
.p .cf-field label{position:absolute;left:17px;top:17px;font-size:16px;color:var(--cc-mute);pointer-events:none;transform-origin:left top;transition:transform .25s var(--cc-ease),color .25s}
.p .cf-field input:focus,.p .cf-field textarea:focus{border-color:var(--cc-mint);background:rgba(23,255,197,.04);box-shadow:0 0 0 4px rgba(23,255,197,.12)}
.p .cf-field input:focus+label,.p .cf-field input:not(:placeholder-shown)+label,.p .cf-field textarea:focus+label,.p .cf-field textarea:not(:placeholder-shown)+label{transform:translateY(-10px) scale(.74);color:var(--cc-mint)}
.p .cf-field.is-bad input,.p .cf-field.is-bad textarea{border-color:#ff7a7a;box-shadow:0 0 0 4px rgba(255,122,122,.12)}
.p .cf-field .cf-err{display:none;margin-top:6px;font-size:13px;color:#ffb3b3}
.p .cf-field.is-bad .cf-err{display:block}
/* the message box: the label has its own band above the scrolling text, so long messages never run under it; the error and
   the counter share one line below the box */
.p .cf-box{position:relative;padding-top:28px;border:1px solid var(--cc-line);border-radius:14px;background:rgba(255,255,255,.03);transition:border-color .25s,background .25s,box-shadow .25s}
.p .cf-box textarea,.p .cf-box textarea:focus{padding:0 16px 12px;border:0;border-radius:0 0 14px 14px;background:transparent;box-shadow:none}
.p .cf-box:focus-within{border-color:var(--cc-mint);background:rgba(23,255,197,.04);box-shadow:0 0 0 4px rgba(23,255,197,.12)}
.p .cf-field.is-bad .cf-box{border-color:#ff7a7a;box-shadow:0 0 0 4px rgba(255,122,122,.12)}
.p .cf-under{display:flex;align-items:baseline;gap:12px}
.p .cf-count{margin:6px 2px 0 auto;font-size:12px;color:var(--cc-mute);font-variant-numeric:tabular-nums}
.p .cf-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}
.p .cf-foot small{font-size:12.5px;color:var(--cc-mute)}
.p .cf-send{position:relative;display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 26px 0 10px;border-radius:99px;background:var(--cc-mint);color:var(--cc-on-mint);font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 12px 36px rgba(23,255,197,.25);transition:transform .2s,box-shadow .3s}
.p .cf-send i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--cc-on-mint);color:var(--cc-mint)}
.p .cf-send i svg{width:18px;height:18px;transition:transform .5s var(--cc-ease)}
.p .cf-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} /* no person sees or reaches it; a bot fills it */
.p .cf-fail{margin-top:14px;font-size:14px;line-height:1.5;color:#ffb3b3}
.p .cf-send:hover{box-shadow:0 16px 44px rgba(23,255,197,.4)}
.p .cf-send:hover i svg{transform:translateX(3px)}
.p .cf-send.is-sending i svg{animation:cf-fly .9s var(--cc-ease) infinite}
@keyframes cf-fly{0%{transform:none;opacity:1}50%{transform:translate(14px,-14px);opacity:0}51%{transform:translate(-14px,14px);opacity:0}100%{transform:none;opacity:1}}
.p .cf.is-sent>*:not(.cf-done){visibility:hidden}
.p .cf-done{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;padding:32px;text-align:center;outline:none}
.p .cf-done .s-ok{width:56px;height:56px;font-size:26px;box-shadow:0 0 0 10px rgba(23,255,197,.12),0 0 40px rgba(23,255,197,.5)}
.p .cf-done h3{font-size:26px;font-weight:600}.p .cf-done h3{font-size:26px !important}
.p .cf-done p{max-width:36ch;font-size:15px;line-height:1.6;color:var(--cc-soft)}

/* ---------- work & insights grids ---------- */
.p .mq{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.p .mq+.mq{margin-top:18px}
.p .mq-track{display:flex;gap:18px;width:max-content}
.p .mq-track a{flex:none;width:300px;overflow:hidden;border:1px solid var(--cc-line);border-radius:16px;background:var(--cc-lift)}
.p .mq-track img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .9s var(--cc-ease)}
.p .mq-track a:hover img{transform:scale(1.06)}
/* the filter bar sticks at the top while its grid is in view; stuck, it becomes a glass bar (under the compact header when
   that slides in). One row: it scrolls sideways where the screen is too narrow */
.p .fl-bar{position:sticky;top:12px;z-index:40;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin-top:40px;padding:6px;border:1px solid transparent;border-radius:999px;overflow-x:auto;scrollbar-width:none;transition:top .4s var(--cc-ease),background .3s,border-color .3s,box-shadow .3s}
.p .fl-bar::-webkit-scrollbar{display:none}
.p .fl-bar>*{flex:none}
.p .fl-bar.is-stuck{background:rgba(9,16,14,.88);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-color:var(--cc-line);box-shadow:0 18px 50px rgba(0,0,0,.45)}
html:has(.cc-h.is-stuck.is-shown) .p .fl-bar{top:88px}
.p .fl-pick{display:inline-flex}
.p .fl-pick-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 13px 9px 16px;border:1px solid var(--cc-line);border-radius:99px;background:transparent;color:var(--cc-soft);font:inherit;font-size:14px;white-space:nowrap;cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.p .fl-pick-btn:hover,.p .fl-pick-btn[aria-expanded="true"]{border-color:rgba(23,255,197,.4);color:#fff}
.p .fl-pick-btn:focus-visible{outline:2px solid var(--cc-mint);outline-offset:2px}
.p .fl-pick.is-on .fl-pick-btn{border-color:var(--cc-mint);background:rgba(23,255,197,.14);color:#fff}
.p .fl-chev{color:var(--cc-mint);transition:transform .25s var(--cc-ease)}
.p .fl-pick-btn[aria-expanded="true"] .fl-chev{transform:rotate(180deg)}
.p .fl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* the industry list: moved to <body> while in use (the stuck bar's blur and sideways scroll would clip it), so no .p scope and
   no --cc- variables here */
.cc-pick-menu{position:fixed;z-index:9600;margin:0;padding:6px;list-style:none;overflow:auto;box-sizing:border-box;border:1px solid rgba(23,255,197,.22);border-radius:18px;background:linear-gradient(180deg,rgba(14,29,26,.97),rgba(9,17,15,.97));-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 24px 70px rgba(0,0,0,.6);font-family:"Mona Sans",system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.3;color:rgba(255,255,255,.76);outline:none;scrollbar-width:thin}
.cc-pick-menu[hidden]{display:none}
.cc-pick-menu li{position:relative;display:flex;align-items:center;padding:10px 12px 10px 30px;border-radius:12px;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.cc-pick-menu li:first-child{margin-bottom:7px}
.cc-pick-menu li:first-child:after{content:"";position:absolute;left:12px;right:12px;bottom:-4px;height:1px;background:rgba(255,255,255,.08)}
.cc-pick-menu li small{margin-left:auto;padding-left:22px;font-size:12px;color:rgba(255,255,255,.42);font-variant-numeric:tabular-nums}
.cc-pick-menu li.is-active{background:rgba(23,255,197,.09);color:#fff}
.cc-pick-menu li.is-active small{color:rgba(255,255,255,.7)}
.cc-pick-menu li[aria-selected="true"]{color:#fff}
.cc-pick-menu li[aria-selected="true"]:before{content:"";position:absolute;left:12px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#17ffc5;box-shadow:0 0 10px #17ffc5}
.p .fl-bar button{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--cc-line);border-radius:99px;font-size:14px;color:var(--cc-soft);cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.p .fl-bar button small{font-size:12px;color:var(--cc-mute);font-variant-numeric:tabular-nums}
.p .fl-bar button:hover{border-color:rgba(23,255,197,.4);color:#fff}
.p .fl-bar button[aria-pressed="true"]{border-color:var(--cc-mint);background:rgba(23,255,197,.14);color:#fff}
.p .fl-bar .sep{width:1px;height:26px;margin:0 6px;background:var(--cc-line)}
.p .fl-count{margin-left:auto;padding:0 10px;font-size:14px;color:var(--cc-mute);white-space:nowrap}
.p .fl-count b{color:#fff;font-variant-numeric:tabular-nums}
/* six columns: a card takes two; on the work page every seventh card from the first and the fourth takes four, so rows alternate
   wide + normal, normal + wide, three normal. Every image has the same height, so each row lines up with no gaps. */
.p .wk-h{margin:0;font-weight:inherit}
.p .wk-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:40px 22px;margin-top:32px}
.p .wk-grid>li{grid-column:span 2}
.p .wk-grid.asy:not(.is-filtered)>li:nth-child(7n+1),.p .wk-grid.asy:not(.is-filtered)>li:nth-child(7n+4){grid-column:span 4}
/* a row the list ends on part-way is filled by its last card */
.p .wk-grid.asy:not(.is-filtered)>li:nth-child(7n+1):last-child,.p .wk-grid.asy:not(.is-filtered)>li:nth-child(7n+3):last-child,.p .wk-grid.asy:not(.is-filtered)>li:nth-child(7n+5):last-child{grid-column:span 6}
.p .wk-grid.asy:not(.is-filtered)>li:nth-child(7n+6):last-child{grid-column:span 4}
/* the plain grid (three to a row) ends on a full row too: two cards left over share it, one left over takes all of it */
.p .wk-grid:not(.asy)>li:nth-child(3n+1):nth-last-child(2),.p .wk-grid:not(.asy)>li:nth-child(3n+2):last-child{grid-column:span 3}
.p .wk-grid:not(.asy)>li:nth-child(3n+1):last-child{grid-column:span 6}
.p .wk-grid.is-filtered>li.f-w3{grid-column:span 3}
.p .wk-grid.is-filtered>li.f-w6{grid-column:span 6}
.p .wk-card{display:block}
.p .wk-card .im{position:relative;overflow:hidden;border:1px solid var(--cc-line);border-radius:20px;background:var(--cc-lift);transition:border-color .3s}
.p .wk-card img{display:block;width:100%;height:clamp(220px,22vw,330px);object-fit:cover;transition:transform .9s var(--cc-ease)}
.p .wk-card .go{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--cc-mint);color:var(--cc-on-mint);opacity:0;transform:translateY(10px) scale(.8);transition:opacity .3s,transform .4s var(--cc-ease)}
.p .wk-card .go svg{width:20px;height:20px;transform:rotate(-45deg)}
.p .wk-card:hover .im{border-color:var(--cc-mint-24)}
.p .wk-card:hover img{transform:scale(1.05)}
.p .wk-card:hover .go,.p .wk-card:focus-visible .go{opacity:1;transform:none}
.p .wk-card h3{margin-top:16px;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.01em}.p .wk-card h3{font-size:18px !important}
.p .wk-card p{margin-top:5px;font-size:13.5px;color:var(--cc-mute)}
.p .in-feat{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);overflow:hidden;border:1px solid var(--cc-line);border-radius:26px;background:var(--cc-lift);transition:border-color .3s}
.p .in-feat .im{overflow:hidden}
.p .in-feat img{display:block;width:100%;height:100%;min-height:380px;object-fit:cover;transition:transform 1s var(--cc-ease)}
.p .in-feat .tx{display:flex;flex-direction:column;justify-content:center;padding:40px}
.p .in-feat h2{margin-top:16px;font-size:clamp(26px,2.8vw,38px);font-weight:500;line-height:1.1;letter-spacing:-.025em}
.p .in-feat p{margin-top:16px;font-size:16px;line-height:1.6;color:var(--cc-soft)}
.p .in-feat .pg-link{align-self:flex-start} /* the column stretched it: the underline is as long as the words */
.p .in-feat:hover{border-color:var(--cc-mint-24)}
.p .in-feat:hover img{transform:scale(1.04)}
.p .in-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--cc-mute)}
.p .in-cat{padding:4px 10px;border-radius:99px;background:rgba(23,255,197,.12);color:var(--cc-mint);font-size:12px;font-weight:600}
.p .in-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 22px;margin-top:32px}
.p .in-card{display:block}
.p .in-card .im--none{aspect-ratio:1024/640;background:radial-gradient(120% 90% at 20% 0,rgba(23,255,197,.14),transparent 60%),var(--cc-lift)}
.p .in-card .im{overflow:hidden;border:1px solid var(--cc-line);border-radius:18px;background:var(--cc-lift);transition:border-color .3s}
.p .in-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .9s var(--cc-ease)}
.p .in-card:hover .im{border-color:var(--cc-mint-24)}
.p .in-card:hover img{transform:scale(1.05)}
.p .in-card .in-meta{margin-top:16px}
.p .in-card h3{margin-top:10px;font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.01em}.p .in-card h3{font-size:19px !important}
.p .in-card p{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--cc-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- case study ---------- */
.p .cs-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:40px;border-top:1px solid var(--cc-line)}
.p .cs-meta div{padding:18px 18px 0 0}
.p .cs-meta small{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cc-mute)}
.p .cs-meta b{display:block;margin-top:6px;font-size:16px;font-weight:500}
.p .cs-hero-im{height:min(72vh,680px);margin-top:48px}
.p .cs-hero-im img{height:112%;margin-top:-6%}
.p .cs-goals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px;margin-top:32px}
.p .cs-goals li{display:flex;gap:12px;font-size:16px;line-height:1.5;color:var(--cc-soft)}
.p .cs-goals svg{flex:none;width:20px;height:20px;margin-top:1px}
.p .cs-goals svg circle{fill:rgba(23,255,197,.1)}
.p .cs-goals svg path{fill:none;stroke:var(--cc-mint);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.p .cs-quote{position:relative;padding:48px 0;text-align:center}
.p .cs-quote q{display:block;max-width:22ch;margin:0 auto;font-size:clamp(32px,4.2vw,58px);font-weight:500;font-stretch:104%;line-height:1.08;letter-spacing:-.03em;quotes:"“" "”";text-wrap:balance}
.p .cs-quote q:before,.p .cs-quote q:after{color:var(--cc-mint)}
.p .cs-quote span{display:block;margin-top:20px;font-size:14px;color:var(--cc-mute)}
.p .cs-gal{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:22px;margin-top:48px}
.p .cs-gal .pg-frame{height:520px}
.p .cs-gal .pg-frame img{height:112%;margin-top:-6%}
/* the post-launch guide (pages/singles.py guide_page): a board of topics, then one panel per topic */
.p .gd-lede a{color:#fff;text-decoration:underline;text-decoration-color:rgba(23,255,197,.6);text-underline-offset:3px}
.p .gd-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:56px 0 0;padding:0;list-style:none}
.p .gd-board a{display:grid;align-content:start;gap:8px;height:100%;padding:22px 22px 24px;border:1px solid var(--cc-line);border-radius:20px;background:var(--cc-lift);transition:border-color .3s,transform .4s var(--cc-ease)}
.p .gd-board a:hover{border-color:var(--cc-mint-24);transform:translateY(-3px)}
.p .gd-board i{font-style:normal;font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--cc-mint);font-variant-numeric:tabular-nums}
.p .gd-board b{font-size:19px;font-weight:500;line-height:1.25;letter-spacing:-.01em;color:#fff}
.p .gd-board span{font-size:14.5px;line-height:1.5;color:var(--cc-soft)}
.p .gd-topics{display:grid;gap:18px;margin-top:36px}
.p .gd-topic{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;padding:36px;border:1px solid var(--cc-line);border-radius:24px;background:var(--cc-lift);scroll-margin-top:110px}
.p .gd-side h2{margin-top:10px;font-size:clamp(24px,2.4vw,32px);font-weight:500;line-height:1.15;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.p .gd-body>:first-child{margin-top:0}
.p .gd-body .cx-steps li{background:rgba(255,255,255,.025)}
.p .gd-body .cx-steps{grid-template-columns:minmax(0,1fr)}
@media (max-width:1099px){
  .p .gd-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p .gd-topic{grid-template-columns:minmax(0,1fr);gap:20px;padding:28px}
}
@media (max-width:767px){
  .p .gd-board{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .p .gd-topic{padding:22px 20px}
}
/* the interactive business tools pages (pages/tools.py) */
.p .tl-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.p .tl-hero .cx-hero{margin-top:0}.p .tl-hero figure.cx-hero{margin-top:0 !important}
.p .tl-stack{position:relative;aspect-ratio:10/8.4}
.p .tl-stack-i{position:absolute;width:74%;border:1px solid var(--cc-line);border-radius:20px;background:var(--cc-lift);overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.6);transition:transform .6s var(--cc-ease),border-color .3s}
.p .tl-stack-i.s0{left:0;top:0;z-index:1}
.p .tl-stack-i.s1{right:0;bottom:0;z-index:2}
.p .tl-stack-i:hover{transform:translateY(-6px);border-color:var(--cc-mint-24);z-index:3}
.p .tl-stack-i img{display:block;width:100%;height:auto}
.p .tl-stack-i span{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 18px;border-top:1px solid var(--cc-line);font-size:15px;font-weight:500;color:#fff}
.p .tl-stack-i b{font-weight:500;color:var(--cc-mint);font-variant-numeric:tabular-nums}
.p .pg-sec.tl-close{padding-top:0}
@media (max-width:1099px){.p .tl-stack{max-width:640px}}
@media (max-width:767px){.p .tl-stack-i span{padding:10px 12px;font-size:13px}}
.p .tl-lede{max-width:70ch;margin-top:18px}
.p .tl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:44px}
.p .tl-grid.one{grid-template-columns:minmax(0,1fr);margin-top:28px}
.p .tl-card{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--cc-line);border-radius:26px;background:var(--cc-lift);overflow:hidden;transition:border-color .3s}
.p .tl-grid.one .tl-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;align-items:center}
.p .tl-card:hover{border-color:var(--cc-mint-24)}
.p .tl-card .im{overflow:hidden;background:#0a1512}
.p .tl-card .im img{display:block;width:100%;height:auto;transition:transform 1s var(--cc-ease)}
.p .tl-card:hover .im img{transform:scale(1.03)}
.p .tl-card .tx{display:flex;flex-direction:column;padding:28px 30px 30px}
.p .tl-card h3{margin-top:14px;font-size:clamp(24px,2.4vw,32px);font-weight:500;line-height:1.15;letter-spacing:-.02em;color:#fff}.p .tl-card h3{font-size:clamp(24px,2.4vw,32px) !important}
.p .tl-card p{margin-top:12px;font-size:16px;line-height:1.6;color:var(--cc-soft)}
.p .tl-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:auto;padding-top:26px}
.p .tl-price{display:flex;align-items:baseline;gap:8px;font-size:30px;font-weight:500;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.p .tl-price small{font-size:13px;font-weight:400;letter-spacing:0;color:var(--cc-mute)}
.p .tl-tags{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;padding:0;list-style:none}
.p .tl-tags li{display:flex;align-items:center;gap:10px;font-size:15.5px;color:#fff}
.p .tl-tags svg,.p .tl-ben svg{flex:none;width:20px;height:20px}
.p .tl-tags svg circle,.p .tl-ben svg circle{fill:rgba(23,255,197,.1)}
.p .tl-tags svg path,.p .tl-ben svg path{fill:none;stroke:var(--cc-mint);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.p .tl-embed{margin-top:48px;padding:40px 32px;border:1px dashed rgba(23,255,197,.35);border-radius:24px;background:rgba(23,255,197,.03);text-align:center}
.p .tl-embed p{max-width:64ch;margin:0 auto;font-size:15.5px;line-height:1.6;color:var(--cc-soft)}
.p .tl-embed b{color:#fff;font-weight:500}
.p .tl-video{margin-top:40px}.p figure.tl-video{margin-top:40px !important}
.p .tl-video video{display:block;width:100%;height:auto;background:#000}
.p .tl-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:44px 0 0;padding:0;list-style:none}
.p .tl-steps li{display:grid;align-content:start;gap:8px;padding:24px 22px 26px;border:1px solid var(--cc-line);border-radius:20px;background:var(--cc-lift)}
.p .tl-steps i{font-style:normal;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cc-mint);font-variant-numeric:tabular-nums}
.p .tl-steps b,.p .tl-ben b{display:block;font-size:19px;font-weight:500;line-height:1.25;color:#fff}
.p .tl-steps span,.p .tl-ben span{display:block;font-size:15px;line-height:1.55;color:var(--cc-soft)}
.p .tl-ben{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:44px 0 0;padding:0;list-style:none}
.p .tl-ben li{display:flex;gap:14px;padding:22px;border:1px solid var(--cc-line);border-radius:20px;background:var(--cc-lift)}
.p .tl-ben svg{margin-top:3px}
.p .tl-ben b{margin-bottom:6px;font-size:17px}
.p .tl-buy{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding:36px 40px;border:1px solid var(--cc-mint-24);border-radius:26px;background:linear-gradient(120deg,rgba(23,255,197,.07),rgba(23,255,197,.01) 60%),var(--cc-lift)}
.p .tl-buy h2{margin-top:12px;font-size:clamp(26px,2.8vw,38px);font-weight:500;line-height:1.1;letter-spacing:-.025em;color:#fff}
.p .tl-buy p{margin-top:10px;font-size:16px;line-height:1.55;color:var(--cc-soft)}
.p .tl-buy-r{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
@media (max-width:1099px){
  .p .tl-hero{grid-template-columns:minmax(0,1fr);gap:36px}
  .p .tl-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p .tl-ben{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .p .tl-grid,.p .tl-grid.one .tl-card,.p .tl-steps,.p .tl-ben{grid-template-columns:minmax(0,1fr)}
  .p .tl-buy{padding:26px 22px}
  .p .tl-card .tx{padding:22px}
}
/* category pages (pages/singles.py category_page) */
.p .ct-others{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.p .ct-others a{padding:9px 16px;border:1px solid var(--cc-line);border-radius:99px;font-size:14.5px;color:var(--cc-soft);transition:color .25s,border-color .25s}
.p .ct-others a:hover{color:#fff;border-color:var(--cc-mint-24)}
.p .ct-others a.all{color:#fff;border-color:rgba(23,255,197,.4)}
.p .ct-grid{display:grid;gap:40px 22px;margin:0;padding:0;list-style:none}
.p .ct-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p .ct-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.p .ct-grid.lead>li:first-child{grid-column:1/-1}
.p .ct-grid.c1{max-width:860px}
@media (max-width:1099px){.p .ct-grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}.p .ct-grid.c3:not(.lead)>li:last-child:nth-child(odd),.p .ct-grid.c3.lead>li:last-child:nth-child(even){grid-column:1/-1}}
@media (max-width:767px){.p .ct-grid.c3,.p .ct-grid.c2{grid-template-columns:minmax(0,1fr)}}
/* a project as a case file (pages/singles.py): facts and chapters stay beside the story; pictures are shown whole */
.p .cx-head{max-width:980px}
.p .cx-hero{margin:48px 0 0;border:1px solid var(--cc-line);border-radius:24px;background:var(--cc-lift);overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.55)}.p figure.cx-hero{margin:48px 0 0 !important}
.p .cx-hero img,.p .cx-pic img{display:block;width:100%;height:auto}
.p .cx-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:72px;align-items:start}
.p .cx-rail{position:sticky;top:120px;display:grid;gap:0;padding:26px 24px;border:1px solid var(--cc-line);border-radius:22px;background:var(--cc-lift)}
.p .cx-t{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cc-mute)}
.p .cx-facts{display:grid;gap:14px;margin:14px 0 0}
.p .cx-facts dt{font-size:12.5px;color:var(--cc-mute)}
.p .cx-facts dd{margin:2px 0 0;font-size:15.5px;font-weight:500;line-height:1.35;color:#fff}
.p .cx-rail .cx-facts+.cx-t{margin-top:26px;padding-top:24px;border-top:1px solid var(--cc-line)}
.p .cx-rail ol{position:relative;display:grid;gap:2px;margin-top:12px;padding-left:16px;border-left:2px solid rgba(255,255,255,.08);list-style:none}
.p .cx-rail ol a{position:relative;display:block;padding:6px 0;font-size:14.5px;line-height:1.4;color:var(--cc-mute);transition:color .25s}
.p .cx-rail ol a:before{content:"";position:absolute;left:-18px;top:0;bottom:0;width:2px;background:var(--cc-mint);box-shadow:0 0 10px var(--cc-mint);transform:scaleY(0);transition:transform .35s var(--cc-ease)}
.p .cx-rail ol a:hover,.p .cx-rail ol a.on{color:#fff}
.p .cx-rail ol a.on:before{transform:none}
.p .cx-cta{display:grid;justify-items:start;gap:16px;margin-top:26px;padding-top:24px;border-top:1px solid var(--cc-line)}
.p .cx-ch{scroll-margin-top:110px}
.p .cx-ch+.cx-ch{margin-top:88px;padding-top:72px;border-top:1px solid var(--cc-line)}
.p .cx-ch>h2[id]{scroll-margin-top:110px}
.p .cx-n{font-size:14px;font-weight:600;letter-spacing:.12em;color:var(--cc-mint);font-variant-numeric:tabular-nums}
.p .cx-ch .p-h2{margin-top:10px}
.p .cx-ch>p{max-width:68ch;margin-top:22px;font-size:17px;line-height:1.7;color:var(--cc-soft)}
.p .cx-ch>p.cx-big{margin-top:28px;font-size:clamp(20px,1.9vw,25px);line-height:1.45;letter-spacing:-.01em;color:#fff}
.p .cx-ch>h3{margin-top:36px;font-size:21px;font-weight:500;line-height:1.3;color:#fff}.p .cx-ch>h3{font-size:21px !important}
.p .cx-ch a{color:#fff;text-decoration:underline;text-decoration-color:rgba(23,255,197,.6);text-underline-offset:3px}
.p .cx-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:30px 0 0;padding:0;list-style:none}
.p .cx-steps.one{grid-template-columns:minmax(0,1fr)}
.p .cx-steps li{display:flex;gap:16px;padding:20px 22px;border:1px solid var(--cc-line);border-radius:18px;background:var(--cc-lift)}
.p .cx-steps li:last-child:nth-child(odd){grid-column:1/-1}
.p .cx-steps i{flex:none;font-style:normal;font-size:13px;font-weight:600;line-height:1.7;letter-spacing:.08em;color:var(--cc-mint);font-variant-numeric:tabular-nums}
.p .cx-steps b{display:block;margin-bottom:4px;font-size:16.5px;font-weight:500;line-height:1.35;color:#fff}
.p .cx-steps span{display:block;font-size:15.5px;line-height:1.55;color:var(--cc-soft)}
.p .cx-steps strong{font-weight:500;color:#fff}
/* pictures whole, in justified rows (Kyro, 2026-10-05: "contained.. not cut", and a layout that looks meant). --w / --h are
   the picture's real size, written by singles.py. In a row each frame grows by its own width / height, so every picture
   in the row comes out the same height and the row ends flush with the column. A picture never grows past --cap: a tall
   one then sits centred on its frame instead of filling the screen. The line is drawn over the frame (:after), so the
   picture inside keeps its exact shape. */
.p .cx-fit{position:relative;display:flex;justify-content:center;--w:3;--h:2;--cap:min(80vh,760px)}
@supports (height:1svh){.p .cx-fit{--cap:min(80svh,760px)}}
.p .cx-fit img{flex:none;width:min(100%,calc(var(--cap)*var(--w)/var(--h)));height:auto;aspect-ratio:var(--w)/var(--h)}
.p .cx-fit:after{content:"";position:absolute;inset:0;border:1px solid var(--cc-line);border-radius:inherit;pointer-events:none}
.p .cx-fit img[data-top]{object-fit:cover;object-position:50% 100%} /* a logo band baked into the top is left out; the frame is the rest of the picture exactly, so the sides stay whole */
.p .cx-hero.cx-fit{border:0}
.p .cx-pics{display:grid;gap:16px;margin-top:36px}
.p .cx-row{display:flex;gap:16px}
.p .cx-pic{margin:0;border-radius:18px;background:var(--cc-lift);overflow:hidden}.p figure.cx-pic{margin:0 !important}
.p .cx-row .cx-pic{flex-grow:calc(100*var(--w)/var(--h));flex-shrink:1;flex-basis:0;min-width:0}
@media (max-width:1099px){
  .p .cx-layout{grid-template-columns:minmax(0,1fr);gap:40px}
  .p .cx-rail{position:static}
  .p .cx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p .cx-rail ol,.p .cx-rail .cx-facts+.cx-t{display:none}
  .p .cx-ch+.cx-ch{margin-top:56px;padding-top:48px}
}
@media (max-width:767px){
  .p .cx-steps{grid-template-columns:minmax(0,1fr)}
  .p .cx-row{flex-direction:column}
  .p .cx-row .cx-pic{flex:none}
  .p .cx-hero{margin-top:32px;border-radius:18px}.p figure.cx-hero{margin-top:32px !important}
}
.p .cs-next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px;padding:28px;border:1px solid var(--cc-line);border-radius:26px;background:var(--cc-lift);transition:border-color .3s}
.p .cs-next .im{overflow:hidden;border-radius:16px}
.p .cs-next img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1s var(--cc-ease)}
.p .cs-next:hover{border-color:var(--cc-mint-24)}
.p .cs-next:hover img{transform:scale(1.05)}
.p .cs-next h3{margin-top:12px;font-size:clamp(24px,2.6vw,34px);font-weight:500;letter-spacing:-.02em}.p .cs-next h3{font-size:clamp(24px,2.6vw,34px) !important}

/* ---------- industry ---------- */
.p .cmp{position:relative;height:420px;overflow:hidden;border:1px solid var(--cc-line);border-radius:24px;cursor:ew-resize;touch-action:pan-y;user-select:none}
.p .cmp-before,.p .cmp-after{position:absolute;inset:0;padding:30px}
.p .cmp-before{background:#e9e6df;color:#3a3a3a}
.p .cmp-after{background:#0a1311;clip-path:inset(0 0 0 50%)}
.p .cmp-lab{position:absolute;top:18px;padding:5px 12px;border-radius:99px;font-size:12px;font-weight:600}
.p .cmp-before .cmp-lab{left:18px;background:#fff;color:#555}
.p .cmp-after .cmp-lab{right:18px;background:var(--cc-mint);color:var(--cc-on-mint)}
.p .cmp-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--cc-mint);box-shadow:0 0 16px var(--cc-mint);pointer-events:none}
.p .cmp-handle:after{content:"‹ ›";position:absolute;top:50%;left:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px;border-radius:50%;background:var(--cc-mint);color:var(--cc-on-mint);font-weight:800;letter-spacing:2px}
.p .cmp input{position:absolute;left:0;right:0;bottom:0;width:100%;opacity:0;cursor:ew-resize}
.p .cmp input:focus-visible+.cmp-handle:after{box-shadow:0 0 0 4px #0a1311,0 0 0 6px var(--cc-mint)}

/* ---------- article ---------- */
.p .ar-progress{position:fixed;left:0;right:0;top:0;z-index:9995;height:3px;pointer-events:none}
.p .ar-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--cc-green),var(--cc-mint));transform-origin:left;transform:scaleX(0);box-shadow:0 0 12px var(--cc-mint)}
.p .ar-head{max-width:860px}
.p .ar-cover{height:min(60vh,560px);margin-top:44px}
.p .ar-cover img{height:112%;margin-top:-6%}
.p .ar-layout{display:grid;grid-template-columns:240px minmax(0,720px);justify-content:center;gap:72px;margin-top:64px}
.p .ar-toc{position:sticky;top:120px;align-self:start}
.p .ar-toc p{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cc-mute)}
.p .ar-toc ol{position:relative;display:grid;gap:4px;margin-top:14px;padding-left:18px;border-left:2px solid rgba(255,255,255,.08)}
.p .ar-toc a{position:relative;display:block;padding:7px 0;font-size:14.5px;line-height:1.4;color:var(--cc-mute);transition:color .25s}
.p .ar-toc a:before{content:"";position:absolute;left:-20px;top:0;bottom:0;width:2px;background:var(--cc-mint);box-shadow:0 0 10px var(--cc-mint);transform:scaleY(0);transition:transform .35s var(--cc-ease)}
.p .ar-toc a:hover{color:#fff}
.p .ar-toc a.on{color:#fff}
.p .ar-toc a.on:before{transform:none}
.p .ar-share{display:flex;gap:8px;margin-top:28px}
.p .ar-share a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--cc-line);border-radius:50%;color:var(--cc-soft);transition:border-color .25s,color .25s}
.p .ar-share a:hover{border-color:var(--cc-mint);color:var(--cc-mint)}
.p .ar-share svg{width:18px;height:18px}
.p .ar-body{font-size:18.5px;line-height:1.75;color:rgba(255,255,255,.82)}
.p .ar-body>p{margin-top:24px}
.p .ar-body>p:first-child{margin-top:0;font-size:21px;line-height:1.6;color:#fff}
.p .ar-body>p:first-child:first-letter{float:left;margin:6px 12px 0 0;font-size:68px;font-weight:600;line-height:.8;color:var(--cc-mint)}
.p .ar-body--plain>p:first-child:first-letter{float:none;margin:0;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit} /* a guide opens plainly */
.p .ar-body h2{margin-top:56px;scroll-margin-top:110px;font-size:clamp(26px,2.6vw,34px);font-weight:500;line-height:1.15;letter-spacing:-.025em;color:#fff}
.p .ar-body em{color:#fff}
/* what the other posts bring that the example did not: sub-headings, lists, pictures, links (pages/singles.py) */
.p .ar-body h3{margin-top:40px;font-size:clamp(20px,1.9vw,24px);font-weight:500;line-height:1.25;letter-spacing:-.015em;color:#fff}.p .ar-body h3{font-size:clamp(20px,1.9vw,24px) !important}
.p .ar-body h2+h3{margin-top:24px}
.p .ar-body>:is(ul,ol){margin-top:24px;padding-left:1.25em;display:grid;gap:10px}
.p .ar-body>ul{list-style:none;padding-left:0}
.p .ar-body>ul>li{position:relative;padding-left:26px}
.p .ar-body>ul>li:before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--cc-mint)}
.p .ar-body>ol>li::marker{color:var(--cc-mint);font-weight:500}
.p .ar-body strong{font-weight:600;color:#fff}
.p .ar-body a{color:#fff;text-decoration:underline;text-decoration-color:rgba(23,255,197,.6);text-underline-offset:3px}
.p .ar-body a:hover{text-decoration-color:var(--cc-mint)}
.p .ar-fig{margin:40px 0 8px}.p figure.ar-fig{margin:40px 0 8px !important}
.p .ar-video{margin:40px 0 8px}
.p .ar-video iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:1px solid var(--cc-line);border-radius:18px;background:#000}
.p .ar-fig img{display:block;width:100%;height:auto;border:1px solid var(--cc-line);border-radius:18px}
.p .pg-prose .cs-goals--in{grid-template-columns:minmax(0,1fr);margin-top:22px}
.p .pg-prose .cs-goals--in strong{font-weight:500;color:#fff}
.p .pg-prose h3{margin-top:28px;font-size:20px;font-weight:500;line-height:1.3;color:#fff}.p .pg-prose h3{font-size:20px !important}
.p .ar-pull{position:relative;margin:48px 0;padding:40px 0 4px;border-top:1px solid var(--cc-line)}.p figure.ar-pull{margin:48px 0 !important}
.p .ar-pull:before{content:"“";position:absolute;left:0;top:-30px;padding-right:14px;background:var(--cc-bg);font-size:72px;font-weight:600;line-height:1;color:var(--cc-mint)}
.p .ar-pull p{font-size:clamp(24px,2.4vw,31px);font-weight:500;line-height:1.3;letter-spacing:-.02em;color:#fff}
.p .ar-author{display:flex;align-items:center;gap:14px;margin-top:56px;padding:22px;border:1px solid var(--cc-line);border-radius:20px;background:var(--cc-lift)}
.p .ar-author .av{flex:none;overflow:hidden;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#0f231f}
.p .ar-author .av img{display:block;width:52px;height:52px;max-width:none;border-radius:50%;object-fit:cover}
.p .ar-author b{display:block;font-size:16px}
.p .ar-author span{font-size:14px;color:var(--cc-mute)}
.p .ar-pn{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:32px}
.p .ar-pn a{display:block;padding:22px;border:1px solid var(--cc-line);border-radius:20px;transition:border-color .3s}
.p .ar-pn a:hover{border-color:var(--cc-mint-24)}
.p .ar-pn small{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cc-mint)}
.p .ar-pn b{display:block;margin-top:8px;font-size:16px;font-weight:600;line-height:1.35}
.p .ar-pn a:last-child{text-align:right}

/* ---------- about: the values, read down a list; the one in the middle lights and its picture takes the frame ---------- */
.p .vl{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start;margin-top:56px}
.p .vl-media{position:sticky;top:120px}
.p .vl-frame{position:relative;height:min(620px,calc(100vh - 180px));overflow:hidden;border:1px solid var(--cc-line);border-radius:26px;background:#0a1311;box-shadow:0 40px 120px rgba(0,0,0,.55)}
.p .vl-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p .vl-frame:after{content:"";position:absolute;inset:0;z-index:50;background:linear-gradient(180deg,transparent 55%,rgba(7,12,11,.8));pointer-events:none}
.p .vl-no{position:absolute;left:26px;bottom:22px;z-index:60;font-size:14px;color:var(--cc-soft);font-variant-numeric:tabular-nums}
.p .vl-no b{font-size:46px;font-weight:600;letter-spacing:-.03em;color:#fff}
.p .vl-list{border-top:1px solid var(--cc-line)}
.p .vl-item{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);padding:34px 0;border-bottom:1px solid var(--cc-line)}
.p .vl-item:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--cc-mint);box-shadow:0 0 10px var(--cc-mint);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--cc-ease)}
.p .vl-item .n{padding-top:10px;font-size:13px;font-weight:600;color:var(--cc-mute);font-variant-numeric:tabular-nums;transition:color .4s}
.p .vl-item h3{font-size:clamp(28px,3vw,42px);font-weight:500;line-height:1.1;letter-spacing:-.03em;color:rgba(255,255,255,.3);transition:color .5s}.p .vl-item h3{font-size:clamp(28px,3vw,42px) !important}
.p .vl-item p{max-width:46ch;margin-top:12px;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.3);transition:color .5s}
.p .vl-item.on:before{transform:none}
.p .vl-item.on .n{color:var(--cc-mint)}
.p .vl-item.on h3{color:#fff}
.p .vl-item.on p{color:var(--cc-soft)}
.p .vl-im{display:none}

/* ---------- feature cards in three or four columns ---------- */
.p .p-feats.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p .p-feats.c4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- contact: what happens next (three small scenes) ---------- */
.p .ct-msg{padding:8px 10px;margin-top:9px;border:1px solid rgba(255,255,255,.07);border-radius:10px;opacity:.55}
.p .ct-msg.new{margin-top:12px;border-color:rgba(23,255,197,.42);background:rgba(23,255,197,.07);opacity:1}
.p .ct-mt{display:block;flex:1;min-width:0}
.p .ct-mt .s-h{font-size:12.5px}
.p .ct-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff5c5c;box-shadow:0 0 8px #ff5c5c}
.p .ct-call{display:flex;align-items:center;justify-content:center;gap:14px;height:96px;margin:10px 0 8px}
.p .ct-face{display:grid;flex:none;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--cc-blue);color:#fff;font-size:18px;font-weight:700;box-shadow:0 0 0 4px rgba(24,99,220,.18)}
.p .ct-face.y{background:var(--cc-mint);color:var(--cc-on-mint);box-shadow:0 0 0 4px rgba(23,255,197,.18)}
.p .ct-wave{display:flex;align-items:center;gap:3px;height:44px}
.p .ct-wave i{width:4px;border-radius:2px;background:var(--cc-mint);transform-origin:center}
.p .ct-line{margin-top:10px}
.p .ct-fill{flex:1;height:1px;margin:0 8px;background:rgba(255,255,255,.12)}
/* contact: two clocks, one for each side of the team (build.py contact()) */
.p .ct-st.ct-duo{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 56px}
.p .ct-duo .ck{display:flex;align-items:center;gap:32px}
.p .ct-duo .clk{flex:none;width:180px;height:180px}
.p .ct-duo .clk b{top:8px;transform-origin:50% 80.5px}
.p .ct-duo .clk .clk-h{height:46px}
.p .ct-duo .clk .clk-m{height:66px}
.p .ct-duo .clk .clk-s{height:74px}
.p .ct-duo .ct-st-city{display:grid;gap:2px}
.p .ct-duo .hm{margin-top:10px}
.p .ct-duo .ck-diff{min-height:1.5em;margin-top:8px;font-size:15px;line-height:1.5;color:var(--cc-soft)}
.p .ct-duo .ck-you{grid-column:1/-1;padding-top:24px;border-top:1px solid var(--cc-line);font-size:16px;line-height:1.6;color:var(--cc-soft)}
.p .ct-duo .ck-you b{color:#fff;font-weight:500;font-variant-numeric:tabular-nums}
@media (max-width:1099px){.p .ct-st.ct-duo{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){.p .ct-duo{padding:28px 22px}.p .ct-duo .ck{gap:20px}.p .ct-duo .clk{width:124px;height:124px}.p .ct-duo .clk b{top:6px;transform-origin:50% 54.5px}.p .ct-duo .clk b:nth-child(3n+1){height:11px}.p .ct-duo .clk b{height:7px}.p .ct-duo .clk .clk-h{height:32px}.p .ct-duo .clk .clk-m{height:46px}.p .ct-duo .clk .clk-s{height:52px}}
/* contact: the studio, a live clock and its working day laid over yours */
.p .ct-st{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:56px;align-items:center;margin-top:48px;padding:44px 48px;overflow:hidden;border:1px solid var(--cc-line);border-radius:28px;background:#0a1311}
.p .ct-st:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(23,255,197,.12) 1px,transparent 1px);background-size:16px 16px;-webkit-mask-image:radial-gradient(50% 90% at 12% 50%,#000,transparent);mask-image:radial-gradient(50% 90% at 12% 50%,#000,transparent);pointer-events:none}
.p .ct-st>*{position:relative}
.p .clk{position:relative;width:220px;height:220px;border:1.5px solid rgba(255,255,255,.18);border-radius:50%;background:radial-gradient(circle,#10201c,#0a1311 70%);box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 0 10px rgba(255,255,255,.02)}
.p .clk b{position:absolute;left:50%;top:10px;width:2px;height:10px;margin-left:-1px;border-radius:1px;background:rgba(255,255,255,.3);transform:rotate(var(--r));transform-origin:50% 100px}
.p .clk b:nth-child(3n+1){height:16px;width:3px;margin-left:-1.5px;background:rgba(255,255,255,.7)}
.p .clk i{position:absolute;left:50%;bottom:50%;width:2px;margin-left:-1px;border-radius:2px;background:#fff;transform-origin:50% 100%}
.p .clk .clk-h{height:56px;width:4px;margin-left:-2px}
.p .clk .clk-m{height:82px;width:3px;margin-left:-1.5px;background:rgba(255,255,255,.85)}
.p .clk .clk-s{height:92px;width:1.5px;margin-left:-.75px;background:var(--cc-mint);box-shadow:0 0 8px var(--cc-mint)}
.p .clk:after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--cc-mint);box-shadow:0 0 12px var(--cc-mint)}
.p .ct-st-city{font-size:15px;color:var(--cc-soft)}
.p .ct-st-city b{font-size:22px;font-weight:600;color:#fff}
.p .ct-st-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-top:6px}
.p .ct-st .hm{font-size:clamp(48px,5vw,68px);font-weight:600;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.p .ct-st .st{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--cc-mute)}
.p .ct-st .st:before{content:"";width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3)}
.p .ct-st.is-open .st{color:#fff}
.p .ct-st.is-open .st:before{background:var(--cc-mint);box-shadow:0 0 10px var(--cc-mint)}
.p .ct-day{position:relative;display:grid;gap:18px;margin-top:30px;padding-left:76px}
.p .ct-day .row{position:relative;display:flex;align-items:center}
.p .ct-day .lab{position:absolute;left:-76px;width:68px;overflow:hidden;font-size:13px;color:var(--cc-soft);white-space:nowrap;text-overflow:ellipsis}
.p .ct-day .bar{position:relative;flex:1;height:12px;border-radius:6px;background:rgba(255,255,255,.07)}
.p .ct-day .win{position:absolute;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,rgba(23,255,197,.35),rgba(23,255,197,.6))}
.p .ct-day .now{position:absolute;top:-7px;bottom:-7px;width:2px;margin-left:-1px;border-radius:1px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.7)}
.p .ct-day .lnk{position:absolute;left:76px;right:0;top:6px;height:30px;width:calc(100% - 76px);overflow:visible;pointer-events:none}
.p .ct-day .lnk line{stroke:rgba(255,255,255,.5);stroke-width:1.5;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.p .ct-day .ticks{display:flex;justify-content:space-between;margin-top:-6px;font-size:11px;color:var(--cc-mute);font-variant-numeric:tabular-nums}
.p .ct-st-diff{margin-top:22px;max-width:52ch;font-size:16px;line-height:1.6;color:var(--cc-soft)}
.p .ct-st-diff b{color:#fff;font-weight:600}

/* ---------- industry ---------- */
.p .id-win{position:relative;overflow:hidden;border:1px solid var(--cc-line);border-radius:28px;background:#0a1311;box-shadow:0 40px 120px rgba(0,0,0,.55),0 0 0 1px rgba(23,255,197,.05)}
.p .id-wbar{display:flex;align-items:center;gap:6px;height:44px;padding:0 16px;border-bottom:1px solid var(--cc-line);background:rgba(10,20,18,.92);font-size:12px;color:var(--cc-mute)}
.p .id-wbar>i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.p .id-wbar>span{margin-left:12px}
.p .id-wbar .pill{margin-left:auto}
.p .id-win .p-fvis{height:440px;border-bottom:0;background-color:#0a1311;background-image:linear-gradient(rgba(23,255,197,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(23,255,197,.06) 1px,transparent 1px);background-size:24px 24px}
.p .id-gw{width:min(50%,300px)}
.p .id-gear{display:block;width:100%;height:auto;aspect-ratio:1;overflow:visible}
/* the dimension line spans the gear's outline (12% to 88% of the drawing) just under its teeth, its label on the line */
.p .id-dimrow{position:relative;height:24px;margin:-7% 12% 0}
.p .id-dtag{left:0;right:0;top:3px;width:max-content;margin:auto}
.p .id-gear path,.p .id-gear circle{fill:none;stroke:var(--cc-mint);stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(23,255,197,.45))}
.p .id-gear .c{stroke:rgba(61,139,255,.55);stroke-width:1;stroke-dasharray:4 5;filter:none}
.p .id-dim{position:absolute;left:0;right:0;top:11px;display:block;height:1.5px;background:#3d8bff;transform-origin:left}
.p .id-dim:before,.p .id-dim:after{content:"";position:absolute;top:-6px;width:1.5px;height:13px;background:#3d8bff}
.p .id-dim:before{left:0}.p .id-dim:after{right:0}
.p .id-spec{justify-content:space-between;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.1)}
.p .id-spec b{font-size:13px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.p .id-site{padding:16px 18px;background:linear-gradient(180deg,#0f1f1c,#0b1513)}
.p .id-nav{gap:10px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08)}
.p .id-nav b{font-size:14px;font-weight:600}
.p .id-nav .sp{flex:1}
.p .id-nav>i{width:34px;height:6px;border-radius:3px;background:rgba(255,255,255,.18)}
.p .id-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px;align-items:center;margin-top:18px}
.p .id-hl{display:block;min-height:3.3em;margin-top:8px;font-size:clamp(20px,2vw,27px);font-weight:600;line-height:1.1;letter-spacing:-.03em}
.p .id-im{height:190px;border-radius:12px;background-size:cover;background-position:50% 40%}
.p .id-trust{flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.p .id-stack{margin-top:48px}
.p .id-stk{position:sticky;top:calc(112px + var(--i) * 26px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:32px;padding:32px;border:1px solid var(--cc-line);border-radius:30px;background:linear-gradient(180deg,#0f1d1a,#0a1311);box-shadow:0 -24px 60px rgba(0,0,0,.45);transform-origin:50% 0}
.p .id-stk:first-child{margin-top:0}
.p .id-stk:after{content:"";position:absolute;inset:0;border-radius:inherit;background:#050908;opacity:var(--dim,0);pointer-events:none}
.p .id-stk-im{height:360px}
.p .id-stk-im img{height:112%;margin-top:-6%}
.p .id-stk small{font-size:12.5px;font-weight:600;letter-spacing:.12em;color:var(--cc-mint);font-variant-numeric:tabular-nums}
.p .id-stk h3{margin:12px 0 20px;font-size:clamp(26px,2.8vw,38px);font-weight:500;line-height:1.1;letter-spacing:-.025em}.p .id-stk h3{font-size:clamp(26px,2.8vw,38px) !important}
/* --ow is the open panel's width (--n panels, the open one grows 3.4 times as wide): every panel lays its text out at that width and
   clips it, so no line re-wraps while the panels open and close */
.p .id-acc{display:flex;gap:14px;height:460px;margin-top:40px;container-type:inline-size;--ow:calc((100cqw - (var(--n,6) - 1) * 14px) * 3.4 / (var(--n,6) + 2.4))}
.p .id-acc-i{position:relative;display:block;flex:1 1 0;min-width:0;overflow:hidden;border:1px solid var(--cc-line);border-radius:22px;transition:flex-grow .8s var(--cc-ease),border-color .3s}
.p .id-acc-i.on{flex-grow:3.4;border-color:var(--cc-mint-24)}
/* the photos carry a logo band along their bottom fifth: each hangs below its panel, so the band never shows */
.p .id-acc-i img{position:absolute;inset:0;width:100%;height:130%;object-fit:cover;transform:scale(1.08);transition:transform 1.2s var(--cc-ease)}
.p .id-acc-i.on img{transform:none}
.p .id-acc-i:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,12,11,.1) 30%,rgba(7,12,11,.94))}
.p .id-acc-i .t{position:absolute;left:20px;width:calc(var(--ow) - 40px);bottom:20px;z-index:1;display:flex;align-items:flex-end;gap:12px}
.p .id-acc-i small{font-size:12.5px;font-weight:600;color:var(--cc-mint)}
.p .id-acc-i b{flex:1;min-width:0;font-size:19px;font-weight:600;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .6s var(--cc-ease)}
.p .id-acc-i.on b{opacity:1;transform:none;transition-delay:.25s}
.p .id-acc-i .go{display:grid;flex:none;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--cc-mint);color:var(--cc-on-mint);opacity:0;transition:opacity .4s}
.p .id-acc-i .go svg{width:18px;height:18px;transform:rotate(-45deg)}
.p .id-acc-i.on .go{opacity:1;transition-delay:.3s}

/* industry pillar tiles */
.p .id-ax,.p .id-ay{display:block}
.p .id-ax i{display:block;height:1.5px;background:rgba(255,255,255,.16)}
.p .id-ay i{display:block;width:1.5px;height:100%;background:rgba(255,255,255,.16)}
.p .id-bm{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center}
.p .id-bmn{font-size:22px;font-weight:600;font-stretch:112%;letter-spacing:-.02em;color:#fff}
.p .id-sw{display:block;width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.p .id-aa{font-size:34px;font-weight:600;font-stretch:112%;line-height:1;letter-spacing:-.03em;color:#fff}
.p .id-fb{display:flex;flex-direction:column;justify-content:center;gap:4px;text-align:center}
.p .id-pipe{height:2px}
.p .id-pipe i{position:absolute;inset:0;background:rgba(23,255,197,.5);transform-origin:left}
.p .id-pk{position:absolute;top:-4px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--cc-mint);box-shadow:0 0 0 5px rgba(23,255,197,.16),0 0 14px var(--cc-mint)}
.p .id-ai{display:flex;flex-direction:column;justify-content:center}
/* narrow scene windows (a phone, or the pillar tiles two to a row on a tablet): the same scenes laid out for the width, so no row,
   chip or button ever leaves its card or the window (Kyro on his phone, 2026-09-28). Sized by the window, not the screen. */
.p .p-fvis,.p .p-canvas .p-vp{container-type:inline-size}
/* parts given their own narrow place (parts.py A(m=...), class s-np) take it in a narrow window */
@container (max-width:480px){.p .s-np{left:var(--mx)!important;top:var(--my)!important;width:var(--mw)!important;height:var(--mh)!important}}
/* and parts that only make sense in a wide window (class s-nh) step out of a narrow one */
@container (max-width:480px){.p .s-nh{display:none!important}}
@container (max-width:480px){
  /* hero, the drawing, stacked for a tall window: the gear with its dimension in the middle, the spec sheet across the width
     under it (two columns of values), the note in the corner where the next frame's verdict appears */
  .p .id-gw{left:0!important;right:0;top:5%!important;width:50%;margin:auto}
  .p .id-sheet{left:6%!important;right:6%;top:57%!important;width:auto!important;height:auto!important;display:grid;grid-template-columns:1fr 1fr;column-gap:18px;padding:10px 14px 6px}
  .p .id-sheet .s-cap{grid-column:1/-1;margin-bottom:2px;white-space:nowrap;letter-spacing:.1em}
  .p .id-sheet .id-spec{padding:6px 0}
  .p .id-sheet .id-spec .s-p{font-size:11px}
  .p .id-sheet .id-spec b{font-size:12px}
  .p .id-exp{left:auto!important;right:6%!important;top:auto!important;bottom:5%}
  /* hero, the new site: it shows its own phone layout, a menu icon for the links and button, one line of badges */
  .p .id-site{padding:14px}
  .p .id-nav>i,.p .id-nav .s-btn{display:none}
  .p .id-nav:after{content:"";flex:none;width:18px;height:12px;background:linear-gradient(rgba(255,255,255,.55) 0 2px,transparent 2px 5px,rgba(255,255,255,.55) 5px 7px,transparent 7px 10px,rgba(255,255,255,.55) 10px 12px)}
  .p .id-body{grid-template-columns:minmax(0,1fr) 36%;gap:12px;margin-top:14px}
  .p .id-hl{font-size:19px}
  .p .id-since,.p .id-t3{display:none}
  .p .id-im{height:140px}
  .p .id-clear{left:auto!important;right:9%!important;top:auto!important;bottom:9%}
  /* brand tile: mark and palette on top, type beside the mark, the brand's site header across the bottom */
  .p .id-bml{top:8%!important;height:58%!important}
  .p .id-pal{top:9%!important}
  .p .id-typ{top:29%!important;height:34%!important}
  .p .id-typ .id-aa{font-size:26px}
  .p .id-typ .s-p{font-size:10.5px}
  .p .id-app{left:5%!important;top:71%!important;width:90%!important;height:21%!important}
  /* AI tile: the list takes the width */
  .p .id-ai{left:6%!important;width:88%!important}
  /* digital tile: the three boxes keep their names inside ("Website" ran 4px past its padding at 390) */
  .p .id-fb{padding-left:6px;padding-right:6px}
}
@container (max-width:340px){.p .id-hl{font-size:17px}}

/* ---------- article: share ---------- */
.p .ar-share-t{margin-top:32px}
.p .ar-share-m{display:none}
.p .ar-share{flex-wrap:wrap;margin-top:12px}
.p .ar-share button{position:relative;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--cc-line);border-radius:50%;color:var(--cc-soft);cursor:pointer;transition:border-color .25s,color .25s}
.p .ar-share button:hover{border-color:var(--cc-mint);color:var(--cc-mint)}
.p .ar-copied{position:absolute;left:50%;bottom:calc(100% + 8px);padding:4px 9px;border-radius:7px;background:var(--cc-mint);color:var(--cc-on-mint);font-size:11.5px;font-weight:700;white-space:nowrap;transform:translateX(-50%);opacity:0;transition:opacity .25s;pointer-events:none}
.p .ar-copied.on{opacity:1}

/* ---------- responsive ---------- */
@media (max-width:1099.98px){
  .p .pg-grid,.p .pg-2col,.p .ct-grid,.p .cs-next,.p .in-feat{grid-template-columns:minmax(0,1fr)}
  .p .pg-sticky,.p .ar-toc{position:static}
  .p .ab-team{grid-template-columns:repeat(3,minmax(0,1fr))}
  .p .pr-princ{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p .wk-grid,.p .in-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p .wk-grid>li{grid-column:auto!important}
  .p .wk-grid>li:nth-child(odd):last-child{grid-column:1/-1!important}
  .p .wk-grid.is-filtered>li:nth-child(odd):last-child{grid-column:auto!important}
  .p .wk-grid.is-filtered>li.f-odd{grid-column:1/-1!important}
  .p .p-feats.c3,.p .p-feats.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p .vl{grid-template-columns:minmax(0,1fr);gap:0;margin-top:40px}
  .p .vl-media{display:none}
  .p .vl-im{display:block;height:220px;margin-top:18px;overflow:hidden;border-radius:18px}
  .p .vl-im img{display:block;width:100%;height:100%;object-fit:cover}
  .p .vl-item h3{color:#fff}
  .p .vl-item p{color:var(--cc-soft)}
  .p .vl-item .n{color:var(--cc-mint)}
  .p .ct-st{grid-template-columns:minmax(0,1fr);gap:32px;padding:32px}
  .p .ct-st-clock{display:flex;justify-content:center}
  .p .id-stk{position:relative;top:auto;grid-template-columns:minmax(0,1fr);gap:24px}
  /* phones and tablets: a plain list of links, every name shown; nothing opens, cycles or resizes under the finger */
  .p .id-acc{height:auto;flex-direction:column}
  .p .id-acc-i,.p .id-acc-i.on{flex:none;height:132px;border-color:var(--cc-line)}
  .p .id-acc-i img,.p .id-acc-i.on img{transform:none}
  .p .id-acc-i .t{width:auto;right:20px}
  .p .id-acc-i b,.p .id-acc-i .go{opacity:1;transform:none;transition:none}
  .p .id-acc-i b{white-space:normal}
  .p .ar-layout{grid-template-columns:minmax(0,1fr);gap:32px}
  /* the contents sit above the article as a card; the share row follows the article */
  .p .ar-toc{padding:20px 22px 14px;border:1px solid var(--cc-line);border-radius:18px;background:rgba(255,255,255,.02)}
  .p .ar-toc .ar-share-t,.p .ar-toc .ar-share{display:none}
  .p .ar-share-m{display:block;margin-top:40px}
  .p .ar-share-m .ar-share-t{margin-top:0}
  .p .ar-share-m .ar-share a,.p .ar-share-m .ar-share button{width:44px;height:44px}
  .p .ab-sign{right:16px}
}
@media (max-width:767.98px){
  .p .ab-team,.p .wk-grid,.p .in-grid,.p .pr-princ,.p .cs-goals,.p .cs-gal,.p .ar-pn{grid-template-columns:minmax(0,1fr)}
  .p .ab-team{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .p .ab-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p .ab-nums li:nth-child(3){border-left:0;padding-left:0}
  .p .ab-nums li:nth-child(n+3){border-top:1px solid var(--cc-line)}
  .p .ab-nums b{font-size:38px} /* two to a row: "3,000+" fits its cell down to 360px */
  .p .ab-path{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .p .ab-path:before{display:none}
  .p .cs-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p .cs-gal .pg-frame{height:300px}
  .p .cs-hero-im{height:340px}
  .p .hs-stop{flex-basis:78vw}
  .p .hs-stop.big{flex-basis:84vw}
  .p .cf{padding:22px}
  .p .mq-track a{width:220px}
  .p .fl-bar{border-radius:18px}
  .p .in-feat .tx{padding:24px}
  .p .in-feat img{min-height:240px}
  .p .wk-card img{height:auto;aspect-ratio:4/3}
  .p .p-feats.c3,.p .p-feats.c4{grid-template-columns:minmax(0,1fr)}
  .p .ct-st{padding:24px 20px}
  .p .clk{width:170px;height:170px}
  .p .clk b{transform-origin:50% 75px}
  .p .clk .clk-h{height:42px}
  .p .clk .clk-m{height:62px}
  .p .clk .clk-s{height:70px}
  .p .ct-day{padding-left:0}
  .p .ct-day .lab{position:static;width:auto;margin-bottom:6px}
  .p .ct-day .row{flex-direction:column;align-items:stretch}
  .p .ct-day .bar{flex:none;width:100%}
  .p .ct-day .lnk{display:none}
  .p .id-win .p-fvis{height:400px}
  .p .id-stk{padding:20px}
  .p .id-stk-im{height:220px}
  .p .cmp{height:340px}
}
@media (prefers-reduced-motion:reduce){.p .cf-send.is-sending i svg{animation:none}}
/* ---------- service pages (pages/services.py): what the Web Design page's base does not already style ---------- */
/* hero: a real project in a frame (it drifts slowly), a small live scene floating on its corner, the fact chips around them */
.p .sv-stage{padding:34px 74px 118px 0}
.p .sv-stage .p-chip[style*="bottom"]{bottom:66px!important}
.p .sv-frame{position:relative;height:420px;overflow:hidden;border:1px solid var(--cc-line);border-radius:18px;background:var(--cc-lift);box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(23,255,197,.05)}
.p .sv-frame:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(23,255,197,.12);pointer-events:none}
.p .sv-frame img{display:block;width:100%;height:100%;object-fit:cover;will-change:transform}
.p .sv-card{position:absolute;right:0;bottom:0;z-index:2;width:300px;overflow:hidden;border:1px solid rgba(23,255,197,.3);border-radius:18px;background:linear-gradient(180deg,#0e1d1a,#0a1412);box-shadow:0 30px 80px rgba(0,0,0,.65)}
.p .sv-card-top{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 14px;border-bottom:1px solid var(--cc-line);font-size:12px;font-weight:600;color:var(--cc-soft)}
.p .sv-card .p-fvis.sv-ctile{height:168px;border:0;border-radius:0;background:transparent}
.p .sv-sws{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;height:100%}
.p .sv-sw{display:block;border-radius:10px;transform-origin:bottom}
.p .sv-aa{display:block;font-size:64px;font-weight:600;font-stretch:112%;line-height:1;letter-spacing:-.04em;color:#fff}
/* Figma scene, narrow window: the pages panel steps out and the canvas takes the width */
@container (max-width:480px){.p .s-side{display:none}.p .s-fg{left:0!important}}
/* estimates in a narrow window: the range on one line */
@container (max-width:480px){.p .sv-cbig{font-size:21px!important}}
/* Web Functions in Action: each tool's live picture fills its panel */
.p .sc-media>.p-fvis{height:100%;border:0;border-radius:0}
/* the build's window says its contents are samples */
.p .sv-build .p-bar .sv-bpill{margin-left:auto}
@media (max-width:1099.98px){
  .p .sv-stage{padding-right:40px}
}
@media (max-width:767.98px){
  /* phones: the frame across the column; the live card tucked under its lower corner, so the picture stays in view */
  .p .sv-stage{padding:8px 0 0}
  .p .sv-frame{height:250px}
  .p .sv-card{position:relative;right:auto;bottom:auto;width:min(290px,84%);margin:-44px 0 0 auto}
}
/* 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(23,255,197,.2),#17FFC5 70%);box-shadow:0 0 12px rgba(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:#17FFC5;box-shadow:0 0 0 6px rgba(23,255,197,.14),0 0 18px #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(0,0,0,.62);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:#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(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:#fff}
.p .h-jnav button:hover i{background:rgba(255,255,255,.22)}
.p .h-jnav button.on{color:#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(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}
}