/* HOMEPAGE PROJECT HERO */
.home-device-hero { --home-hero-wrap:1680px; --device-stage-padding:clamp(18px,calc(6svh - 21px),48px); --device-top-space:clamp(24px,calc(6svh - 15px),54px); --device-side-space:clamp(28px,calc(3vw - 5px),46px); --device-caption-min:clamp(118px,calc(10svh + 53px),152px); --device-caption-gap:clamp(12px,calc(2svh - 1px),24px); --device-controls-gap:clamp(10px,calc(2svh - 3px),20px); }
.home-device-hero .site-header .wrap { max-width:var(--home-hero-wrap); }
.home-device-hero .home-opening { position:relative; overflow:clip; display:grid; grid-template-rows:minmax(min-content,1fr) auto; min-height:calc(100svh - var(--home-header-height,85px)); }
.proof-band-slot { height:var(--home-proof-height,125px); }
.home-device-hero .hero { display:flex; min-height:0; padding:0; background:transparent; }
.home-device-hero .home-opening:before { content:''; position:absolute; pointer-events:none; inset:auto -9% -70px auto; width:clamp(760px,76vw,1200px); aspect-ratio:209 / 186; transform:rotate(-14deg); background-color:rgba(0,111,230,.025); background-image:repeating-linear-gradient(135deg,transparent 0 5px,rgba(0,111,230,.11) 5px 6px); -webkit-mask:url('../identity/dgd-soft-letter-rotor.svg') center / contain no-repeat; mask:url('../identity/dgd-soft-letter-rotor.svg') center / contain no-repeat; }
.home-device-hero .hero-stage { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(30px,calc(4vw - 14px),64px); align-items:center; width:100%; max-width:var(--home-hero-wrap); padding-top:var(--device-stage-padding); padding-bottom:var(--device-stage-padding); }
.home-device-hero .hero-content { width:100%; padding:0; }
.home-device-hero .hero .hero-title { font-size:clamp(52.9px,5.3475vw,80.5px); line-height:1.02; margin-bottom:28px; max-width:11em; }
.home-device-hero .hero-dek { font-size:18px; line-height:1.6; }
.home-device-hero .hero-actions { display:flex; margin-top:28px; }
.device-showcase { --device-caption-height:max(var(--device-caption-min),var(--device-caption-measured,0px)); margin:0; min-width:0; width:100%; max-width:740px; justify-self:end; }
.device-composition { --device-height-limit:calc((100svh - var(--home-header-height,85px) - var(--home-proof-height,125px) - 2 * var(--device-stage-padding) - var(--device-caption-height) - var(--device-caption-gap) - var(--device-controls-gap) - 42px - var(--device-top-space) - 26px) * 1.5 + var(--device-side-space)); position:relative; width:100%; max-width:min(100%,max(220px,var(--device-height-limit))); margin-inline:auto; padding:var(--device-top-space) var(--device-side-space) 0 0; }
.desktop-device { display:block; position:relative; text-decoration:none; filter:drop-shadow(0 16px 14px #102b3924); }
.laptop-screen { display:block; position:relative; overflow:hidden; margin:0 5.8%; padding:12px 7px 9px; border:2px solid #aab5bd; border-radius:13px 13px 3px 3px; background:#20292f; box-shadow:inset 0 0 0 1px #667078; }
.laptop-screen:before { content:''; position:absolute; top:4px; left:50%; width:3px; height:3px; border-radius:50%; background:#6c7c89; }
.laptop-screen img { width:100%; height:auto; display:block; aspect-ratio:1.6; object-fit:cover; object-position:top; }
.laptop-base { display:block; width:100%; height:auto; margin-top:-1px; }
.phone-device { position:absolute; top:0; right:0; display:block; width:23%; padding:4px; border:2px solid #aab5bd; border-radius:20px; box-shadow:0 12px 28px #102b3929; overflow:hidden; background:#20292f; z-index:2; }
.phone-device:after { content:''; position:absolute; bottom:7px; left:35%; right:35%; height:3px; border-radius:3px; background:#8c969c; }
.phone-device img { display:block; width:100%; height:auto; aspect-ratio:390/844; object-fit:cover; object-position:top; border-radius:13px; }
.device-showcase figcaption { display:grid; grid-template-columns:minmax(0,1fr) 96px; align-items:center; gap:24px; margin-top:var(--device-caption-gap); min-height:var(--device-caption-height); }
.device-client { width:96px; height:96px; border-radius:50%; border:5px solid white; box-shadow:0 0 0 1px #7d9eaf,0 5px 14px rgba(16,43,57,.12); object-fit:cover; object-position:center 25%; background:#d7e3e9; }
.device-showcase blockquote, .device-showcase .device-project-note { background:none; border:0; padding:0; margin:0 0 12px; font-size:18px; line-height:1.5; font-weight:500; font-style:normal; color:#102b39; }
.device-showcase figcaption p { font-size:12px; line-height:1.5; margin:0; color:#536773; }
.device-showcase figcaption strong { color:#102b39; font-weight:650; }
.device-controls { display:flex; align-items:center; justify-content:center; gap:17px; margin-top:var(--device-controls-gap); }
.device-controls button { display:grid; place-items:center; width:42px; height:42px; padding:0; cursor:pointer; color:#102b39; background:transparent; border:1px solid #6a8797; border-radius:50%; transition:background .18s,color .18s; }
.device-controls button:hover { color:white; background:#102b39; border-color:#102b39; }
.device-controls button svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.1; }
.device-count { white-space:nowrap; font-size:12px; color:#102b39; font-variant-numeric:tabular-nums; }
.device-controls button:focus-visible,.desktop-device:focus-visible,.phone-device:focus-visible { outline:2px solid #0069d9; outline-offset:5px; }
.home-device-hero .proof-band { position:fixed; bottom:0; padding:26px 0; }
@media(min-width:861px) { .home-device-hero .proof-band.is-compact { padding:12px 0; } }
@media(min-width:701px) and (max-height:850px) {
 .home-device-hero .hero .hero-title { font-size:clamp(50.6px,5.06vw,71.3px); margin-bottom:22px; }
 .home-device-hero .hero-dek { font-size:17px; line-height:1.5; }
 .home-device-hero .hero-actions { margin-top:24px; }
 .device-showcase figcaption { grid-template-columns:minmax(0,1fr) 84px; gap:18px; }
 .device-client { width:84px; height:84px; }
 .device-showcase blockquote, .device-showcase .device-project-note { font-size:16px; margin-bottom:8px; }
 .home-device-hero .proof-band { padding:20px 0; }
}
@media(max-width:1100px) and (min-width:701px) {
 .home-device-hero .hero .hero-title { font-size:50.6px; }
 .home-device-hero .hero-dek { font-size:16px; }
 .device-showcase figcaption { grid-template-columns:minmax(0,1fr) 74px; gap:16px; }
 .device-client { width:74px; height:74px; }
 .device-showcase blockquote, .device-showcase .device-project-note { font-size:16px; }
}
@media(min-width:701px) and (max-height:700px) {
 .device-showcase figcaption { grid-template-columns:minmax(0,1fr) 72px; }
 .device-client { width:72px; height:72px; }
 .device-showcase blockquote, .device-showcase .device-project-note { font-size:15px; line-height:1.45; }
}
@media(min-width:701px) and (max-width:1100px) { .home-device-hero { --device-caption-min:144px; } }
@media(max-width:700px) {
 .home-device-hero .home-opening:before { display:none; }
 .home-device-hero .home-opening { display:block; min-height:0; }
 .home-device-hero .hero-stage { grid-template-columns:minmax(0,1fr); gap:36px; padding-top:40px; padding-bottom:32px; }
 .home-device-hero .hero .hero-title { font-size:clamp(40px,12.9744vw,50.6px); }
 .home-device-hero .hero-dek { font-size:17px; }
 .home-device-hero .hero-actions { gap:12px; }
 .home-device-hero .hero-actions .btn { flex:1; padding:14px 12px; }
 .device-showcase { position:relative; isolation:isolate; max-width:500px; justify-self:center; }
 .device-showcase:before { content:''; position:absolute; pointer-events:none; z-index:-1; width:160%; aspect-ratio:209 / 186; top:-35px; right:-40%; transform:rotate(-14deg); background-color:rgba(0,111,230,.035); background-image:repeating-linear-gradient(135deg,transparent 0 5px,rgba(0,111,230,.14) 5px 6px); -webkit-mask:url('../identity/dgd-soft-letter-rotor.svg') center / contain no-repeat; mask:url('../identity/dgd-soft-letter-rotor.svg') center / contain no-repeat; }
 .device-composition { max-width:100%; padding-top:32px; padding-right:28px; }
 .laptop-screen { padding:8px 4px 6px; border-radius:9px 9px 2px 2px; }
 .phone-device { width:24%; padding:3px; border-radius:14px; }
 .phone-device img { border-radius:9px; }
 .device-showcase figcaption { grid-template-columns:minmax(0,1fr) 72px; gap:16px; min-height:max(204px,var(--device-caption-measured,0px)); margin-top:20px; }
 .device-client { width:72px; height:72px; border-width:4px; }
 .device-showcase blockquote, .device-showcase .device-project-note { font-size:16px; }
 .device-controls { margin-top:20px; }
 .device-controls button { width:44px; height:44px; }
 .home-device-hero .proof-band { padding:20px 0; }
}
@media(max-width:380px) { .home-device-hero .hero-actions .btn { min-width:0; padding-inline:8px; font-size:14px; } }
@media(max-width:600px) { .home-device-hero .proof-band { bottom:58px; padding:14px 0 12px; } }
@media(prefers-reduced-motion:reduce) { .device-controls button { transition:none; } }

/* Project descriptions are ordinary copy, never styled or attributed as reviews. */
.device-showcase [hidden] { display:none !important; }
.device-showcase figcaption.is-project-note { grid-template-columns:minmax(0,1fr); }
.device-case-link { display:inline-block; margin-top:10px; font-size:12px; font-weight:600; color:#005db8; text-underline-offset:3px; }

/* Avoid device-size jumps at short-window breakpoints. */
@media(min-width:701px) {
 .home-device-hero .proof-band:not(.is-compact) { padding-block:clamp(20px,calc(2svh + 3px),26px); }
 .home-device-hero .proof-band:not(.is-compact) .proof-item dd { font-size:clamp(2rem,min(3vw,calc(6svh - 22px)),3rem); }
 .home-device-hero .proof-band:not(.is-compact) .proof-item-words dd { font-size:clamp(1.5rem,min(2.05vw,calc(3svh - 3px)),2.05rem); }
}

/* Slightly larger project descriptions, with the existing responsive layout. */
.device-showcase .device-project-note { font-size:20px; }
@media(max-width:1100px), (max-height:850px) { .device-showcase .device-project-note { font-size:18px; } }

.device-slide { margin:0; }
.home-hero-no-watermark .home-opening:before, .home-hero-no-watermark .device-showcase:before { display:none; }
@media print { .home-device-hero .home-opening { display:block; min-height:0; overflow:visible; } .home-device-hero .home-opening:before, .home-device-hero .device-showcase:before, .home-device-hero .device-controls { display:none !important; } .home-device-hero .hero-stage { display:block; padding:0; } .home-device-hero .device-showcase { max-width:500px; margin:20px 0; } .home-device-hero .device-composition { max-width:100%; } .home-device-hero .proof-band { position:static; padding:12px 0; } .home-device-hero .proof-band-slot { height:auto !important; } }

/* Mobile review: put the work in the opening screen. */
.hero-dek-mobile, .hero-mobile-detail { display:none; }
@media(max-width:700px) {
 .home-device-hero .hero-stage { gap:24px; padding-top:24px; padding-bottom:28px; }
 .home-device-hero .hero .hero-title { font-size:clamp(34px,8.7vw,36px); line-height:1.05; margin-bottom:16px; }
 .home-device-hero .hero-dek-full { display:none; }
 .home-device-hero .hero-dek-mobile { display:block; font-size:16px; line-height:1.5; margin:0; }
 .home-device-hero .hero-mobile-detail { display:block; font-size:16px; line-height:1.6; margin:0; }
 .home-device-hero .hero-content { padding:0; }
 .home-device-hero .hero-actions { display:none; }
 .home-device-hero .device-composition { padding-top:24px; }
 .home-device-hero .device-controls { margin-top:10px; gap:12px; }
 .home-device-hero .device-count { white-space:normal; text-align:center; max-width:220px; line-height:1.4; }
 .home-device-hero [data-project-announcement] { position:static; width:auto; height:auto; padding:0; margin:4px 0 0; overflow:visible; clip:auto; clip-path:none; white-space:normal; display:block; font-weight:600; }
 .home-device-hero .device-controls button { flex-shrink:0; }
 .home-device-hero .device-showcase figcaption { min-height:var(--device-caption-measured,0px); margin-top:24px; }
 .home-device-hero .proof-band-slot { height:auto !important; }
 .home-device-hero .proof-band, .home-device-hero .proof-band.is-footer-obscured { position:relative; bottom:auto; opacity:1; visibility:visible; transform:none; pointer-events:auto; padding:18px 0; }
}