/* Device frames are HTML/CSS, keeping the original interfaces crisp and accessible. */
.project-media { margin: 28px 0; min-width: 0; }
.project-media-stage { padding: 28px 22px; background: radial-gradient(ellipse at 25% 10%, #f9f0e9, transparent 70%), #e3ded5; border-radius: 18px; }
.project-device { position: relative; overflow: hidden; border: 1px solid #b6b4b1; border-radius: 10px; background: #fff; box-shadow: 0 18px 35px #1f2a4420; }
.project-device-bar { display: flex; align-items: center; gap: 5px; height: 29px; padding: 0 12px; background: #efede9; border-bottom: 1px solid #d4d0ca; }
.project-device-bar > span { width: 6px; height: 6px; border-radius: 50%; background: #b8b1a7; }
.project-device-bar small { margin: auto; padding-right: 28px; color: #645e56; font: 10px/1.2 Lato, sans-serif; letter-spacing: .04em; }
.project-device-screen { overflow: hidden; }
.project-device-screen a { display: block; }
.project-device-screen img, .project-device-screen video { display: block; width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; }
.project-media figcaption { margin-top: 16px; color: #565d68; font: 13px/1.65 Lato, sans-serif; }
.project-media figcaption a { color: inherit; margin-left: 5px; text-underline-offset: 3px; }
.project-media-hint { display: block; font-size: 12px; }
.project-media--laptop .project-media-stage { padding: 40px 34px 30px; }
.project-media--laptop .project-device { border: 8px solid #282b32; border-top-width: 15px; border-bottom-width: 15px; border-radius: 14px 14px 5px 5px; }
.project-media--laptop .project-device-bar { display: none; }
.project-laptop-base { position: relative; height: 12px; margin: 0 -18px; background: linear-gradient(#d8d9dc, #9c9fa5); border-radius: 2px 2px 55% 55%; box-shadow: 0 12px 15px #1f2a4426; }
.project-laptop-base::before { content: ''; display: block; width: 18%; height: 5px; margin: auto; border-radius: 0 0 8px 8px; background: #7e828b; }
.project-media--phone .project-media-stage { background: transparent; padding: 0 20px; }
.project-media--phone .project-device { max-width: 280px; margin: auto; border: 8px solid #252830; border-top-width: 20px; border-bottom-width: 18px; border-radius: 32px; box-shadow: 0 22px 45px #41342330; }
.project-media--phone .project-device-bar { display: none; }
.project-media--phone video { aspect-ratio: 360/810; object-fit: cover; object-position: left; }
.project-media--phone figcaption { max-width: 300px; margin: 18px auto 0; }
.journey-product-pair { grid-template-columns: minmax(250px, .7fr) minmax(0, 1.5fr); align-items: center; }
.journey-product-pair .project-media-stage { background: transparent; }
.denlie-product-hero { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 40px; padding-top: 65px; padding-bottom: 45px; }
.denlie-product-hero h1 { font-size: clamp(3.6rem, 6vw, 6.5rem); }
.denlie-product-hero .project-media-stage { background: #eaded2; }
.denlie-home-hero .denlie-hero-image img { width: 100%; height: 590px; object-fit: cover; object-position: center 60%; }
.denlie-home-hero .mt-hero-copy { left: 7%; transform: translateY(-50%); max-width: 420px; }
.denlie-home-hero .denlie-hero-image::after { background: linear-gradient(90deg, #172131c9, #17213130 62%, transparent); }
@media(max-width: 767.98px) {
    .project-media-stage { padding: 20px 12px; }
    .project-media--laptop .project-media-stage { padding: 25px 22px; }
    .project-media--laptop .project-device { border-width: 5px; border-top-width: 10px; border-bottom-width: 10px; }
    .project-laptop-base { margin: 0 -12px; height: 9px; }
    .journey-product-pair, .denlie-product-hero { grid-template-columns: 1fr; gap: 24px; }
    .denlie-product-hero { padding-top: 35px; }
    .denlie-home-hero .denlie-hero-image img { height: 560px; object-position: 60% center; }
    .denlie-home-hero .mt-hero-copy { left: 8% !important; right: 8%; top: 40%; width: auto; text-align: left; }
    .denlie-home-hero .mt-hero-copy h1 { font-size: 42px; }
}