/* Labs showcase: the same three experiment cards at every size. Phones stack
   them; tablets and desktops show a row. The older stats card stays hidden. */
.viewport-bottom-fade { display: none; }
#labs .labs-preview-wrapper { display: none; }
#labs .labs-desktop { display: block; margin-top: 28px; }
.labs-intro-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 42px; }
.labs-intro-row p { max-width: 45ch; margin: 0; font-size: 16px; line-height: 1.7; color: #9fa9a2; }
.labs-all-link { display: inline-flex; align-items: center; gap: 28px; min-height: 44px; color: #c5e9d1; font-size: 13px; border-bottom: 1px solid #8aa79766; white-space: nowrap; }
.labs-all-link:hover { color: #9cf3bc; border-color: currentColor; }
.labs-showcase { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.lab-experiment { display: block; min-width: 0; color: #edf1ec; }
.lab-preview { position: relative; height: clamp(220px,20vw,290px); overflow: hidden; border-radius: 12px; transition: filter .3s ease; }
.lab-experiment:hover .lab-preview { filter: brightness(1.12); }
.lab-caption { position: relative; padding: 23px 30px 20px 0; border-bottom: 1px solid #ffffff1c; }
.lab-kicker { color: #8d9c93; font: 10px/1.5 var(--font-body); text-transform: uppercase; letter-spacing: .14em; }
.lab-caption h3 { margin: 10px 0 9px; font: 500 27px/1.2 var(--font-heading); letter-spacing: -.04em; }
.lab-caption p { margin: 0; max-width: 38ch; color: #9da9a0; font-size: 13px; line-height: 1.65; }
.lab-open-arrow { position: absolute; right: 2px; top: 48px; font-size: 23px; color: #c5e9d1; transition: transform .25s ease; }
.lab-experiment:hover .lab-open-arrow { transform: translate(3px,-3px); }
.lab-preview-drive { background: radial-gradient(ellipse at 50% 20%,#2c385b,#11172a 60%,#080d16); perspective: 300px; }
.lab-drive-sun { position: absolute; left: calc(50% - 35px); top: 35px; width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(#ecb0ac,#a488d7); box-shadow: 0 0 50px #d39dc735; }
.lab-drive-road { position: absolute; left: -20%; bottom: -50%; width: 140%; height: 115%; background: repeating-linear-gradient(90deg,transparent 0 52px,#7184ab33 53px 54px),repeating-linear-gradient(0deg,transparent 0 35px,#7184ab33 36px 37px),#131b2c; transform: rotateX(58deg); border-top: 1px solid #9c9aca66; }
.lab-drive-road::after { content: ""; position: absolute; left: 47%; width: 6%; height: 100%; background: repeating-linear-gradient(0deg,transparent 0 22px,#b6ffe5 23px 55px); filter: drop-shadow(0 0 6px #b6ffe5); }
.lab-drive-car { position: absolute; bottom: 32px; left: calc(50% - 32px); width: 64px; height: 75px; border-radius: 14px 14px 8px 8px; transform: perspective(200px) rotateX(28deg); background: linear-gradient(90deg,#d4a466,#f8d495 28%,#eebf77 75%,#a97745); box-shadow: -7px 8px 0 -4px #020609,7px 8px 0 -4px #020609,0 15px 25px #0009; }
.lab-drive-car::before { content: ""; position: absolute; inset: 12px 8px 26px; border-radius: 8px 8px 3px 3px; background: linear-gradient(160deg,#9ab8bc,#28444f); border-bottom: 6px solid #e9bb78; }
.lab-drive-car::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 6px; height: 4px; background: linear-gradient(90deg,#ff6464 22%,transparent 22% 78%,#ff6464 78%); filter: drop-shadow(0 0 4px #ff6464); }
.lab-preview-proof { display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 65% 45%,#3c4240,#212b27 55%,#131c17); }
.lab-proof-page { position: relative; width: 76%; padding: 27px 25px; border-radius: 5px; background: #e5e7dc; color: #2d3930; transform: rotate(-5deg); box-shadow: 12px 20px 35px #0004; }
.lab-proof-page small { font: 9px/1.4 var(--font-body); letter-spacing: .16em; color: #677469; }
.lab-proof-page strong { display: block; margin-top: 17px; font: 500 clamp(22px,2.3vw,32px)/1.35 var(--font-heading); letter-spacing: -.04em; }
.lab-proof-page em { font-style: normal; text-decoration: underline wavy #b56552 2px; text-underline-offset: 5px; }
.lab-proof-correction { position: absolute; right: -12px; bottom: -18px; padding: 12px 18px; background: #afe3be; color: #23442c; font: 500 11px/1.5 var(--font-body); border-radius: 6px; box-shadow: 0 8px 20px #0003; transform: rotate(5deg); }
.lab-preview-palette { background: radial-gradient(ellipse at 50% 50%,#343045,#211f2c 65%,#16151d); }
.lab-swatch { position: absolute; left: calc(50% - 44px); top: 24%; width: 88px; height: 66%; border-radius: 7px; transform-origin: 50% 91%; transform: rotate(var(--swatch-angle)); background: var(--swatch-color); box-shadow: 3px 5px 12px #0004; transition: transform .35s ease; }
.lab-swatch::before { content: ""; position: absolute; left: 10px; right: 10px; bottom: 20px; height: 20%; border-radius: 2px; background: #fff5; }
.lab-swatch::after { content: ""; position: absolute; bottom: 10px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #3339; }
.lab-experiment:hover .lab-swatch { transform: rotate(calc(var(--swatch-angle) * 1.14)) translateY(-3px); }
/* Phones: intro above the link, one card per row. */
@media (max-width: 768px) {
    .labs-intro-row { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 30px; }
    .labs-intro-row p { font-size: 15px; }
    .labs-showcase { grid-template-columns: 1fr; gap: 26px; }
    .lab-preview { height: 210px; }
    .lab-caption h3 { font-size: 24px; }
}
@media (min-width: 769px) and (max-width: 1200px) {
    .labs-showcase { gap: 20px; }
    .lab-proof-page { padding: 24px 20px; }
    .lab-caption h3 { font-size: 24px; }
    .lab-preview { height: clamp(190px, 22vw, 260px); }
}
@media (prefers-reduced-motion: reduce) {
    #slotMachine *, .lab-experiment * { transition: none !important; animation: none !important; }
    .lab-experiment:hover .lab-swatch { transform: rotate(var(--swatch-angle)); }
}
/* Desktop-only page refinements. */
@media (min-width: 1025px) {
    /* Match the project stack's own responsive inset. */
    #works > .section-header { padding-inline: clamp(20px, 8vw, 150px); }
    .viewport-bottom-fade { display: block; position: fixed; z-index: 100; inset: auto 0 0; height: clamp(48px,7vh,72px); pointer-events: none; background: linear-gradient(transparent,#0a0a0a99); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); mask-image: linear-gradient(transparent,#0008 55%,#000); -webkit-mask-image: linear-gradient(transparent,#0008 55%,#000); }
    #testimonials > .section-header, #labs > .extras-content > .section-header {
        max-width: 1440px; margin: 0 auto; padding: 0;
    }
    #testimonials > .section-header { width: calc(100% - clamp(40px, 8vw, 120px)); padding-left: 69px; }
    #testimonials .section-title, #labs .section-title { font-size: clamp(54px, 5vw, 78px); line-height: 1.05; letter-spacing: -.055em; }
    #labs { padding-block: 90px; }
    #labs > .extras-content { max-width: 1440px; width: 100%; margin-inline: auto; }
    #labs .labs-desktop { margin-top: 32px; }
}