/* CREIG home: real portfolio artwork over the existing blue motion language. */
.hero[data-hero-projects]{isolation:isolate}
.hero[data-hero-projects] .hero-background{z-index:-1;background:var(--ink)}
.hero[data-hero-projects] .hero-bg{filter:none;mix-blend-mode:normal}
.hero-ambient{position:absolute;inset:0;background:radial-gradient(ellipse at 76% 34%,#07506566 0%,transparent 62%),linear-gradient(125deg,#02121c,#032b3e 72%,#052631)}
.hero-ambient::before{content:'';position:absolute;inset:0;background:radial-gradient(#93d2db35 .6px,transparent .8px);background-size:4px 4px;opacity:.23}
.hero-waves{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero-wave-flow{transform-origin:center;animation:creigWaveFlow 13s ease-in-out infinite alternate;animation-play-state:paused}
@keyframes creigWaveFlow{from{transform:translateY(18px) scaleY(.98);opacity:.75}to{transform:translateY(-16px) scaleY(1.03);opacity:1}}
.hero[data-visual-paused=false] .hero-wave-flow,.hero[data-visual-paused=false] .hero-project-float{animation-play-state:running}
.hero[data-visual-paused=true] .hero-wave-flow,.hero[data-visual-paused=true] .hero-project-float{animation-play-state:paused}
.hero[data-hero-projects] .hero-services,.hero[data-hero-projects] .hero-bottom{z-index:2}
.hero-projects{position:absolute;z-index:1;top:29%;right:max(40px,calc((100% - 1360px)/2));width:min(740px,57vw);color:white}
.hero-project-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;margin-bottom:6px}
.hero-project-top>p{font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1.45;color:#b1d4dd;margin:0}
[data-project-count]{display:none;font-size:10px;letter-spacing:.08em;margin-top:3px;color:#9ac5d2;font-variant-numeric:tabular-nums}
.hero-project-controls{display:flex;align-items:center;gap:6px}
.hero-project-controls button{display:grid;place-items:center;width:42px;height:42px;border:1px solid #b1d4dd55;border-radius:50%;color:#e9f8fa;background:#032b3e73;line-height:1;font-size:24px;transition:background-color .25s,border-color .25s}
.hero-project-controls button:hover{background:#0465b0;border-color:#9bdce5}
.hero-project-controls button:focus-visible,.hero-project-frame:focus-visible{outline:2px solid #9bdce5;outline-offset:5px}
.hero-project-controls button[hidden]{display:none!important}
[data-project-pause] [data-project-pause-icon]{font-size:14px}
.hero-project-stage{position:relative;perspective:1400px;transform-style:flat;height:342px;touch-action:pan-y}
.hero-project-card{position:absolute;margin:0;transform-style:flat}
.hero-project-card>[data-project-enter]{height:100%}
.hero-project-float{animation:creigProjectFloat 8s ease-in-out infinite alternate;animation-play-state:paused;transform-style:preserve-3d}
.hero-project-brand{width:245px;top:30px;left:0;transform:rotate(-11deg) rotateY(12deg);z-index:5}
.hero-project-web{width:430px;top:80px;left:150px;transform:rotate(-4deg) rotateY(-8deg);z-index:3}
.hero-project-campaign{width:180px;top:0;right:0;transform:rotate(9deg) rotateY(-13deg);z-index:4}
.hero-project-brand .hero-project-float{animation-duration:9s;animation-delay:-3s}
.hero-project-campaign .hero-project-float{animation-duration:10s;animation-delay:-5s}
@keyframes creigProjectFloat{from{transform:translate3d(0,5px,0)}to{transform:translate3d(0,-8px,0)}}
.hero-project-frame{display:block;position:relative;border:1px solid #91d1df80;border-radius:12px;background:#092c3f;box-shadow:0 24px 54px #0005,0 0 35px #009eb318;overflow:hidden;color:white;text-decoration:none;transition:border-color .3s,box-shadow .3s}
.hero-project-frame:hover{border-color:#adf1f5;box-shadow:0 24px 54px #0006,0 0 35px #009eb333}
.hero-project-image-wrap{display:block;overflow:hidden;background:#dfe8ed}
.hero-project-image-wrap img{display:block;width:100%;height:auto;object-fit:contain;filter:none;mix-blend-mode:normal;transform:none;aspect-ratio:auto}
.hero-browser-bar{display:flex;align-items:center;gap:5px;height:23px;background:#0b3448;padding:0 10px;border-bottom:1px solid #80c9d72c}
.hero-browser-bar i{width:5px;height:5px;display:block;border-radius:50%;background:#b6d5dd80}
.hero-browser-bar i+ i{opacity:.55}
.hero-browser-bar i+ i+ i{opacity:.3}
.hero-project-caption{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 13px;background:#082536;line-height:1.3}
.hero-project-caption>span:first-child{min-width:0}
.hero-project-caption strong{display:block;font-size:14px;font-weight:500;letter-spacing:-.01em}
.hero-project-caption>span>span{display:block;font-size:10px;line-height:1.4;color:#a9cbd6;margin-top:3px}
.hero-project-arrow{font-size:21px;color:#88d5e2;transition:translate .3s}
.hero-project-frame:hover .hero-project-arrow{translate:2px -2px}
.hero-project-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero[data-hero-projects] .showreel-card{display:flex;align-items:center;gap:12px;width:246px;height:68px;margin:0;padding:7px 12px 7px 7px;border:1px solid #b1d4dd55;border-radius:9px;background:#032b3eaa;box-shadow:none}
.hero[data-hero-projects] .reel-image{width:70px;height:52px;flex:none;border-radius:4px}
.hero[data-hero-projects] .showreel-card>span:last-child{display:flex;align-items:center;gap:16px;padding:0;background:none;font-size:12px;white-space:nowrap}
.hero[data-hero-projects] .showreel-card .play-circle{width:32px;height:32px;font-size:14px}
.hero[data-hero-projects] .showreel-card i{color:#8cd6e3}
@media(min-width:992px) and (max-width:1399px),(min-width:992px) and (max-height:780px){
  .hero[data-hero-projects] .hero-copy{max-width:50%}
  .hero[data-hero-projects] h1{font-size:clamp(42px,4.4vw,56px)}
  .hero-projects{top:250px;left:55%;right:28px;width:auto}
  .hero-project-stage{height:320px}
  .hero-project-brand{width:180px;top:0;left:0}
  .hero-project-web{width:310px;top:55px;left:52px}
  .hero-project-campaign{width:138px;top:-10px;right:0}
  .hero-project-caption{padding:9px 11px}
  .hero-project-caption strong{font-size:12px}
  .hero-project-caption>span>span{font-size:9px}
  .hero[data-hero-projects] .showreel-card{width:230px}
}
@media(min-width:992px) and (max-height:700px){
  .hero[data-hero-projects] .hero-services{top:125px}
  .hero-projects{top:165px}
}
@media(max-width:991px){
  .hero[data-hero-projects]{height:auto;min-height:0;max-height:none;padding:132px 0 36px}
  .hero[data-hero-projects] .hero-services{position:relative;top:auto;left:auto;right:auto;display:block;font-size:13px;line-height:1.4;margin:0 auto 24px}
  .hero[data-hero-projects] .hero-services>div{gap:22px}
  .hero[data-hero-projects] .hero-services>div+div{margin-top:16px;justify-content:flex-start}
  .hero-projects{position:relative;left:auto;right:auto;top:auto;width:calc(100% - 2 * var(--pad));max-width:600px;margin:0 auto 30px}
  .hero-project-top{margin-bottom:14px}
  .hero-project-top>p{font-size:11px;letter-spacing:.07em}
  [data-project-count]{display:block}
  .hero-project-controls{gap:4px}
  .hero-project-stage{height:340px;perspective:none;transform-style:flat}
  .hero-project-card{inset:0;width:100%;height:100%;transform:none;z-index:1}
  .hero-project-float{height:100%;animation:none}
  .hero-project-frame{display:flex;flex-direction:column;height:100%;border-radius:12px;box-shadow:0 15px 35px #0003}
  .hero-project-image-wrap{flex:1;min-height:0;position:relative;display:block;background:#12374b;padding:0}
  .hero-project-image-wrap img{position:absolute;inset:12px;max-width:none;max-height:none;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain;filter:none;mix-blend-mode:normal}
  .hero-project-caption{flex:none;padding:12px 16px}
  .hero-project-caption strong{font-size:15px}
  .hero-project-caption>span>span{font-size:11px}
  .hero-project-campaign .hero-project-image-wrap{background:#133d50}
  .hero-projects:not([data-ready]) .hero-project-card:not(:first-child){display:none}
  .hero-projects[data-ready] .hero-project-card{visibility:hidden;opacity:0;pointer-events:none;translate:18px 0;transition:opacity .6s var(--motion-out),translate .6s var(--motion-out),visibility .6s step-end}
  .hero-projects[data-ready] .hero-project-card.is-active{visibility:visible;opacity:1;pointer-events:auto;translate:0 0;z-index:2;transition:opacity .6s var(--motion-out),translate .6s var(--motion-out),visibility 0s}
  .hero[data-hero-projects] .hero-bottom{position:relative;bottom:auto;left:auto;right:auto;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
  .hero[data-hero-projects] .hero-copy{max-width:100%;width:100%;flex:none}
  .hero[data-hero-projects] .hero-actions{flex-direction:row;align-items:center;flex-wrap:wrap}
  .hero[data-hero-projects] .proof-images{display:none}
  .hero[data-hero-projects] .hero-proof{order:0;width:auto}
  .hero[data-hero-projects] .showreel-card{order:2;flex:none;max-width:100%;width:246px}
}
@media(max-width:767px){
  .hero[data-hero-projects]{padding-top:112px;padding-bottom:30px}
  .hero[data-hero-projects] .hero-services{font-size:12px;margin-bottom:20px}
  .hero[data-hero-projects] .hero-services>div{gap:17px}
  .hero[data-hero-projects] .hero-services>div+div{margin-top:14px}
  .hero-projects{margin-bottom:26px}
  .hero-project-stage{height:275px}
  .hero-project-top{gap:10px;margin-bottom:10px}
  .hero-project-top>p{font-size:10px}
  .hero-project-controls button{width:40px;height:40px}
  .hero[data-hero-projects] .hero-actions{gap:18px;margin-top:24px}
  .hero[data-hero-projects] .hero-proof{order:-1;width:100%}
  .hero[data-hero-projects] .hero-proof p{font-size:13px}
  .hero[data-hero-projects] .hero-proof>div>span{font-size:12px}
  .hero[data-hero-projects] .hero-bottom{gap:22px}
  .hero[data-hero-projects] .showreel-card{height:60px;width:228px}
  .hero[data-hero-projects] .reel-image{width:62px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  .hero-wave-flow,.hero-project-float{animation:none!important}
  .hero-project-card{transition:none!important;translate:none!important}
  .hero-project-frame,.hero-project-arrow{transition:none}
}