/* Two independent, silent reels in a single device composition. */
.portfolio-opening{grid-template-columns:.76fr 1.24fr;gap:5%;padding-top:62px;padding-bottom:62px}
.portfolio-copy h2{font-size:clamp(55px,6vw,88px);letter-spacing:-4px}
.portfolio-devices{position:relative;min-width:0;height:410px}
.devices-caption,.devices-note{position:absolute;font-size:7px;letter-spacing:1.5px;color:#a8bfdf}
.devices-caption{top:10px;left:7%}.devices-note{bottom:3px;left:7%;font-size:6px;letter-spacing:1.3px}
.laptop-device{position:absolute;width:78%;left:0;top:110px;filter:drop-shadow(0 20px 25px #0006)}
.laptop-display{background:#111a2b;border:4px solid #7583a0;border-bottom-width:9px;border-radius:13px 13px 3px 3px;position:relative;overflow:hidden}
.laptop-bar{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:8px 10px;color:#b5c9e9;font-size:5px;letter-spacing:.8px}
.laptop-bar>span{display:flex;gap:4px}.laptop-bar i{display:block;width:4px;height:4px;border-radius:50%;background:#66778d}.laptop-bar i:first-child{background:#e4aa84}.laptop-bar b{font-weight:500}
.laptop-bar button{width:24px;height:24px;display:grid;place-items:center;border:1px solid #647088;border-radius:50%;background:none;color:#ddeafa;font-size:9px;cursor:pointer}
.laptop-display video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#071020}
.laptop-camera{position:absolute;width:3px;height:3px;border-radius:50%;background:#1a2332;top:-2px;left:50%}
.laptop-base{height:12px;width:114%;margin-left:-7%;border-radius:1px 1px 60% 60%/1px 1px 90% 90%;background:linear-gradient(#a5b0c4,#52637f 60%,#24324e);box-shadow:0 4px 4px #03071188;position:relative}
.laptop-base>span{display:block;width:17%;height:4px;background:#51627d;border-radius:0 0 8px 8px;margin:auto}
.phone-device{position:absolute;width:27%;right:0;top:42px;transform:rotate(5deg);filter:drop-shadow(0 18px 20px #0006)}
.portfolio-devices .hero-video-card{position:relative;inset:auto;width:100%;max-width:none;transform:none;border:4px solid #8191b2;border-radius:12px;overflow:hidden;box-shadow:none;background:#101a2c}
.portfolio-devices .hero-video-card video{display:block;width:100%;height:auto;max-height:none;aspect-ratio:9/16;object-fit:cover}
.portfolio-devices .video-card-bar{font-size:5px;padding:8px;gap:5px}.portfolio-devices .video-card-bar i{background:#97c4ff}
.portfolio-devices .video-card-bar button{width:24px;height:24px;font-size:9px;flex-shrink:0}
.portfolio-devices .hero-video-link{font-size:5px;padding:8px;color:#182a49;letter-spacing:.5px;background:#edf1f8}
/* Original AI concept, with the actual client work one click away. */
.ai-showcase{position:relative;isolation:isolate;overflow:hidden;min-height:570px;border-radius:16px;background:#070e21;color:#f4f7ff;margin-top:60px;display:flex;align-items:center}
.ai-concept-art{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center}
.ai-showcase:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#070e21bd,transparent 24%),linear-gradient(90deg,#070e2190,transparent 72%)}
.ai-showcase-copy{width:49%;padding:55px 0 100px 5.5%}
.ai-showcase-kicker{display:flex;gap:9px;align-items:center;font-size:8px;letter-spacing:1.6px;color:#a8c1ec}
.ai-showcase-kicker i{width:6px;height:6px;background:#ffb68b;border-radius:50%;box-shadow:0 0 17px #ffa873}
.ai-showcase-copy h3{font:600 clamp(38px,4.8vw,68px)/1.1 Manrope,sans-serif;letter-spacing:-2.8px;margin:27px 0 20px}
.ai-showcase-copy h3 em{font-style:normal;color:#ffc19d}
.ai-showcase-copy p{font-size:12px;line-height:1.9;color:#a7b9d5;max-width:310px}
.ai-video-link{display:inline-flex;align-items:center;gap:26px;margin-top:20px;border:0;border-bottom:1px solid #91acd25c;background:none;color:#f3f6fc;font:500 11px/1.5 Manrope,sans-serif;padding:0 0 10px;cursor:pointer;text-decoration:none}
.ai-video-link>span{color:#ffc19d;font-size:20px}.ai-video-link:hover{border-bottom-color:#ffc19d}
.ai-showcase-bottom{position:absolute;left:5.5%;right:5.5%;bottom:28px;border-top:1px solid #c2d5ff28;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.ai-showcase-bottom>div{display:flex;gap:20px;color:#bed0e8;font-size:8px}.ai-showcase-bottom small{font-size:6px;letter-spacing:1px;color:#91a4c2;line-height:1.7;max-width:165px;text-align:right}
@media(min-width:1400px){.portfolio-devices{height:470px}.laptop-device{top:130px}.phone-device{top:40px}}
@media(max-width:1050px){.portfolio-opening{grid-template-columns:.8fr 1.2fr;gap:35px}.portfolio-devices{height:340px}.laptop-device{top:112px}.phone-device{top:48px}.portfolio-copy h2{font-size:62px;letter-spacing:-3px}.devices-note{bottom:12px}.ai-showcase{min-height:500px}.ai-showcase-copy{width:51%;padding-bottom:85px}.ai-showcase-copy h3{font-size:48px}.ai-showcase-copy p{font-size:11px}}
@media(max-width:850px){.portfolio-opening{grid-template-columns:1fr;gap:30px}.portfolio-copy h2{font-size:66px;margin:18px 0}.portfolio-copy>p{font-size:12px}.portfolio-copy>.eyebrow{font-size:8px}.portfolio-index{margin-top:24px}.portfolio-index a{font-size:8px}.portfolio-index b{font-size:26px}.portfolio-devices{width:100%;max-width:590px;height:400px;margin:auto}.laptop-device{top:115px}.phone-device{top:30px}.devices-caption{top:0}.devices-note{bottom:0}.ai-showcase{min-height:450px}.ai-showcase-copy h3{font-size:42px;letter-spacing:-2px}.ai-showcase-bottom>div{gap:12px;font-size:7px}}
@media(max-width:560px){.portfolio-opening{padding-top:44px;padding-bottom:40px;gap:25px}.portfolio-copy h2{font-size:55px}.portfolio-copy>p br{display:block}.portfolio-devices{height:285px}.laptop-device{width:78%;top:105px}.phone-device{width:28%;top:28px}.devices-caption{font-size:5px;letter-spacing:1px;left:0}.devices-note{font-size:5px;left:0;bottom:3px}.laptop-display{border-width:3px;border-bottom-width:6px;border-radius:8px 8px 2px 2px}.laptop-bar{padding:5px 6px;font-size:3px;letter-spacing:.3px}.laptop-bar button{width:23px;height:23px}.laptop-bar>span{gap:2px}.laptop-bar i{width:3px;height:3px}.laptop-base{height:9px}.portfolio-devices .hero-video-card{border-width:3px;border-radius:8px}.portfolio-devices .video-card-bar{font-size:3px;padding:5px;letter-spacing:0}.portfolio-devices .video-card-bar button{width:23px;height:23px;font-size:8px}.portfolio-devices .hero-video-link{font-size:3px;padding:6px;letter-spacing:0}.ai-showcase{display:block;padding-top:270px;margin-top:35px;border-radius:12px}.ai-concept-art{height:310px;object-position:right top;object-fit:cover}.ai-showcase:before{background:linear-gradient(0deg,#070e21 0%,#070e21 44%,transparent 67%)}.ai-showcase-copy{width:100%;padding:0 26px 26px}.ai-showcase-copy h3{font-size:45px;margin:20px 0 16px}.ai-showcase-copy p{font-size:12px;max-width:100%}.ai-showcase-kicker{font-size:7px;letter-spacing:1px}.ai-video-link{margin-top:15px;font-size:11px}.ai-showcase-bottom{position:relative;inset:auto;margin:0 26px;padding:17px 0 22px;display:block}.ai-showcase-bottom>div{font-size:7px;justify-content:space-between;gap:5px}.ai-showcase-bottom small{display:block;text-align:left;max-width:none;margin-top:15px;font-size:5px;letter-spacing:1px}}
@media(max-width:360px){.portfolio-devices{height:250px}.laptop-device{top:95px}.phone-device{top:25px}.devices-note{bottom:0}.portfolio-copy h2{font-size:49px}.portfolio-devices .video-card-bar{gap:2px;padding:4px}.portfolio-devices .hero-video-link{font-size:2.8px}.ai-showcase-copy{padding-left:22px;padding-right:22px}.ai-showcase-copy h3{font-size:40px}}
