/* Lucy's real project, framed by Apple's unchanged original hardware. */
.hero .hero-static.hero-project{padding:12px 16px 26px;margin-top:25px;background:radial-gradient(ellipse at 50% 40%,#f2f3f4 0%,#e6e9ec 65%,#dce1e5 100%)}
.project-device{position:relative;isolation:isolate;width:100%;margin:0 auto}
.project-device.macbook{max-width:1036px;aspect-ratio:3860/2540}
.project-scene{position:absolute;inset:0;opacity:0;transition:opacity .65s ease;pointer-events:none}
.project-scene.active{opacity:1;z-index:1}
.project-scene.previous{opacity:1;z-index:0;transition:none}
.hero .hero-static .project-scene img,.project-scene img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;margin:0;animation:none;transform:none}
.project-caption{display:flex;align-items:center;justify-content:space-between;gap:22px;max-width:850px;margin:12px auto 0;padding:0 26px;text-align:left}
.project-scene-title{font-size:20px;line-height:1.45;color:var(--pine);font-weight:600;margin:0}
.project-scene-detail{font-size:14px;line-height:1.7;color:#58615c;margin:4px 0 0}
.project-navigation{display:flex;align-items:center;gap:15px;flex:none}
.project-steps{display:flex;align-items:center;gap:4px}
.project-steps button{position:relative;display:grid;place-items:center;width:34px;height:42px;background:transparent;border:0;padding:0;cursor:pointer;border-radius:8px}
.project-steps button span{position:relative;display:block;width:22px;height:4px;background:#b6bfb7;border-radius:5px;overflow:hidden}
.project-steps button[aria-pressed="true"] span{background:#a8b19b}
.project-steps button[aria-pressed="true"] span:after{content:"";position:absolute;inset:0;background:var(--pine);transform-origin:left;transform:scaleX(var(--story-progress,0))}
.project-steps button:hover span{background:var(--pine)}
.project-replay{display:grid;place-items:center;width:38px;height:38px;border:1px solid #c0c8b5;border-radius:50%;color:var(--pine);background:#ffffff80;cursor:pointer;font-size:24px;padding:0;line-height:1}
.project-replay:hover{background:#f5f8ef;border-color:var(--pine)}
.project-steps button:focus-visible,.project-replay:focus-visible{outline:2px solid var(--pine);outline-offset:3px}
.project-credit{font-size:11px;line-height:1.8;color:#59635d;text-align:center;max-width:950px;margin:23px auto 0;padding:0 10px}
.project-credit span{margin:0 7px}
.project-cursor{position:absolute;z-index:3;width:clamp(8px,1.7vw,21px);height:27px;left:44%;top:46%;opacity:0;pointer-events:none;transition:opacity .2s;filter:drop-shadow(0 1px 2px #0005)}
.project-cursor.visible{opacity:1}
.project-cursor svg{display:block;width:100%;height:100%}
.project-cursor i{position:absolute;left:-7px;top:-7px;width:22px;height:22px;border-radius:50%;border:2px solid #95c11f;opacity:0;transform:scale(.2)}
.project-cursor.clicking i{opacity:.85;transform:scale(1);transition:transform .35s ease,opacity .35s ease}
.presentation-stage.presentation-project{max-width:1310px;background:transparent;overflow:visible;border-radius:0}
.project-device.imac{aspect-ratio:1672/941;border-radius:12px;overflow:hidden;background:#e8ded1}
.presentation-project .project-caption{max-width:100%;margin:22px auto 0;padding:0 5px}
@media(min-width:1600px){.hero .hero-static.hero-project{padding-top:22px;padding-bottom:30px}}
@media(max-width:767px){.hero .hero-static.hero-project{padding:5px 8px 22px}.project-caption{padding:0 16px;gap:12px;max-width:620px}.project-scene-title{font-size:17px}.project-scene-detail{font-size:12px}.project-navigation{gap:9px}.project-steps{gap:0}.project-steps button{width:25px;height:42px}.project-steps button span{width:16px;height:4px}.project-replay{width:32px;height:32px;font-size:22px}.project-credit{font-size:10px;line-height:1.8;margin-top:18px}.project-credit span{margin:0 3px}.presentation-project .project-caption{padding:0;margin-top:16px}.project-device.imac{border-radius:8px}}
@media(max-width:480px){.project-caption{flex-wrap:wrap;justify-content:center;text-align:center;gap:7px}.project-scene-copy{width:100%;min-height:51px}.project-scene-title{font-size:17px}.project-scene-detail{font-size:11px;margin-top:2px}.project-navigation{gap:12px}.project-steps button{width:29px}.project-steps button span{width:19px}.project-credit{max-width:360px;padding:0 5px}.project-credit span{display:none}}
@media(prefers-reduced-motion:reduce){.project-scene{transition:none}.project-cursor{display:none}.project-steps button[aria-pressed="true"] span:after{transform:scaleX(1)}}

/* The first viewport retains the original heading and shows the whole device. */
.hero .hero-static.hero-intro{margin-top:18px;padding:8px 12px 14px}
.intro-device{position:relative;isolation:isolate;width:min(100%,var(--intro-device-width,700px));aspect-ratio:3860/2540;margin:auto}
.hero .hero-static .intro-macbook{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:contain}
.intro-display{position:absolute;inset:0;mask-image:url('assets/macbook-intro-display-mask-v15.png');-webkit-mask-image:url('assets/macbook-intro-display-mask-v15.png');mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-mode:luminance;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;pointer-events:none}
.intro-screen{position:absolute;left:10.8290155%;top:11.3385827%;width:78.341969%;height:77.3228346%;background:#fff}
.intro-screen video{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--intro-focus-x,100%) 50%;background:#fff}
.intro-replay{position:absolute;right:1.5%;bottom:1.5%;z-index:2;display:grid;place-items:center;width:36px;height:36px;border:1px solid #b7c1b0;border-radius:50%;background:#ffffffed;color:var(--pine);font-size:24px;line-height:1;padding:0}
.intro-replay:hover{background:#f4f8ec}
.project-caption.project-controls-only{justify-content:flex-end;margin-top:12px}