/* Creative Vault — shared stylesheet. Each page's rules are scoped by its <body> class. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ===== index.html ===== */
body.pg-home{margin:0;background:#ffffff}
.pg-home a{color:#0066cc;text-decoration:none}
.pg-home a:hover{color:#004a99;text-decoration:underline}
.pg-home .pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:980px;font-size:17px;font-weight:500;box-sizing:border-box}
.pg-home .pill-solid{background:#0071e3;color:#ffffff}
.pg-home .pill-solid:hover{background:#0062c4;color:#ffffff;text-decoration:none}
.pg-home .pill-ghost-dark{border:1px solid #2997ff;color:#2997ff}
.pg-home .pill-ghost-dark:hover{background:#2997ff;color:#000000;text-decoration:none}
.pg-home .pill-sm{min-height:32px;padding:0 14px;font-size:13px}
.pg-home .navlink{color:#1d1d1f;font-size:13px;opacity:.85}
.pg-home .navlink:hover{opacity:1;color:#1d1d1f;text-decoration:none}
.pg-home .foot a{color:#424245;font-size:12px}
.pg-home .foot a:hover{color:#1d1d1f}
.pg-home .field{width:100%;box-sizing:border-box;min-height:52px;padding:14px 16px;border:1px solid #d2d2d7;border-radius:12px;font:inherit;font-size:17px;color:#1d1d1f;background:#ffffff}
.pg-home .field:focus{outline:none;border-color:#0071e3;box-shadow:0 0 0 4px rgba(0,113,227,.2)}
.pg-home .tile{color:inherit}
.pg-home .tile:hover{text-decoration:none}
.pg-home .tile-img{transition:transform .6s ease}
.pg-home .tile:hover .tile-img{transform:scale(1.04)}
.pg-home ul.ticks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.pg-home ul.ticks li{position:relative;padding-left:22px;font-size:16px;line-height:1.45;color:#424245}
.pg-home .ss-track{--sw:76%;--peek:12%;display:flex;gap:12px;width:100%;transition:transform .9s cubic-bezier(.65,0,.35,1)}
.pg-home .ss-slide{flex:0 0 var(--sw);position:relative;overflow:hidden;height:clamp(400px,40vw,600px);border-radius:0}
.pg-home .ss-imgs{position:absolute;top:0;right:0;bottom:0;width:62%;display:flex;align-items:center;justify-content:center;gap:20px;padding:0 32px;box-sizing:border-box}
.pg-home .ss-imgs img{height:78%;width:auto;max-width:46%;object-fit:cover;border-radius:14px;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.pg-home .ss-imgs img:first-child{transform:rotate(-4deg)}
.pg-home .ss-imgs img:last-child{transform:rotate(3deg) translateY(16px)}
.pg-home .ss-text{position:absolute;left:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,40px);max-width:42%;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pg-home .ss-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:980px;background:#ffffff;color:#1d1d1f;font-size:16px;font-weight:500}
.pg-home .ss-btn:hover{background:#e8e8ed;color:#1d1d1f;text-decoration:none}
.pg-home .ss-ctrl{border:0;cursor:pointer;width:44px;height:44px;border-radius:50%;background:#e8e8ed;color:#1d1d1f;display:inline-flex;align-items:center;justify-content:center}
.pg-home .ss-ctrl:hover{background:#d2d2d7}
.pg-home .ss-dot{border:0;cursor:pointer;width:44px;height:44px;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center}
.pg-home .marquee{display:flex;gap:12px;width:max-content;animation:mq 60s linear infinite}
.pg-home .marquee:hover{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 6px))}}
.pg-home .mq-tile{position:relative;flex:0 0 auto;width:300px;height:220px;overflow:hidden;display:block;color:#ffffff}
.pg-home .mq-tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.pg-home .mq-tile:hover img{transform:scale(1.05)}
@media (max-width:760px){.pg-home .ss-track{--sw:88%;--peek:6%}
.pg-home .ss-imgs{width:100%;opacity:.5}
.pg-home .ss-text{max-width:84%}
.pg-home .mq-tile{width:220px;height:170px}}
@media (prefers-reduced-motion:reduce){.pg-home .ss-track{transition:none}
.pg-home .marquee{animation:none}}
.pg-home .hero-img{display:block;width:100%;height:clamp(560px,66vw,1100px);object-fit:cover;object-position:62% 30%}
.pg-home .hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,13,13,.9) 0%,rgba(13,13,13,.55) 32%,rgba(13,13,13,0) 58%)}
.pg-home .hero-copy{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding:0 clamp(22px,4vw,64px);box-sizing:border-box}
.pg-home .hero-text{max-width:min(500px,40vw)}
@media (max-width:760px){.pg-home .hero-img{height:auto;aspect-ratio:3 / 4;object-position:72% 20%}
.pg-home .hero-shade{background:linear-gradient(0deg,rgba(13,13,13,.95) 0%,rgba(13,13,13,.6) 40%,rgba(13,13,13,0) 70%)}
.pg-home .hero-copy{top:auto;bottom:28px;transform:none}
.pg-home .hero-text{max-width:100%}}
.pg-home ul.ticks li:before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:#0071e3}

/* ===== work.html ===== */
body.pg-work{margin:0;background:#ffffff}
.pg-work a{color:#0066cc;text-decoration:none}
.pg-work a:hover{color:#004a99;text-decoration:underline}
.pg-work .pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:980px;font-size:17px;font-weight:500;box-sizing:border-box}
.pg-work .pill-solid{background:#0071e3;color:#ffffff}
.pg-work .pill-solid:hover{background:#0062c4;color:#ffffff;text-decoration:none}
.pg-work .pill-sm{min-height:32px;padding:0 14px;font-size:13px}
.pg-work .navlink{color:#1d1d1f;font-size:13px;opacity:.85}
.pg-work .navlink:hover{opacity:1;color:#1d1d1f;text-decoration:none}
.pg-work .foot a{color:#424245;font-size:12px}
.pg-work .foot a:hover{color:#1d1d1f}
.pg-work .seg{border:0;cursor:pointer;font-family:inherit;min-height:52px;padding:0 28px;border-radius:980px;font-size:17px;font-weight:600;display:inline-flex;align-items:center;gap:10px;transition:background .25s ease,color .25s ease}
.pg-work .chip{border:0;cursor:pointer;font-family:inherit;min-height:40px;padding:0 16px;border-radius:980px;font-size:14px;font-weight:500}
.pg-work .tile{border:0;padding:0;margin:0;cursor:pointer;background:#e8e8ed;border-radius:18px;overflow:hidden;display:block;width:100%;aspect-ratio:4 / 5;position:relative}
.pg-work .tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pg-work .tile:hover img{transform:scale(1.04)}
.pg-work .tile:focus-visible{outline:3px solid #0071e3;outline-offset:3px}
.pg-work .playbadge{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:#ffffff}
.pg-work .lbbtn{border:0;cursor:pointer;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16);color:#ffffff;display:inline-flex;align-items:center;justify-content:center}
.pg-work .lbbtn:hover{background:rgba(255,255,255,.28)}
.pg-work .ss-track{--sw:76%;--peek:12%;display:flex;gap:12px;width:100%;transition:transform .9s cubic-bezier(.65,0,.35,1)}
.pg-work .ss-slide{flex:0 0 var(--sw);position:relative;overflow:hidden;height:clamp(420px,42vw,620px);background:#111111}
.pg-work .ss-full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-work .ss-phone{position:absolute;top:6%;bottom:6%;right:clamp(20px,6vw,90px);aspect-ratio:9 / 16;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.pg-work .ss-phone video{width:100%;height:100%;object-fit:cover;display:block}
.pg-work .ss-text{position:absolute;left:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,40px);max-width:46%;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.pg-work .ss-ctrl{border:0;cursor:pointer;width:44px;height:44px;border-radius:50%;background:#e8e8ed;color:#1d1d1f;display:inline-flex;align-items:center;justify-content:center}
.pg-work .ss-ctrl:hover{background:#d2d2d7}
.pg-work .ss-dot{border:0;cursor:pointer;width:36px;height:44px;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:760px){.pg-work .ss-track{--sw:90%;--peek:5%}
.pg-work .ss-text{max-width:88%}
.pg-work .ss-phone{right:50%;transform:translateX(50%);opacity:.6}}
@media (prefers-reduced-motion:reduce){.pg-work .ss-track{transition:none}}