/* Project highlight: Canopy at Lullwater. Loaded only on /canopy-at-lullwater/ along with css/project.css. */

.hl-hero{background:var(--forest);color:#fff;position:relative;overflow:hidden}
.hl-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:72px;align-items:center;padding-top:168px;padding-bottom:88px}
.hl-hero .crumb{display:flex;align-items:center;gap:10px;color:var(--on-dark-muted);font-size:14px;margin-bottom:26px;flex-wrap:wrap}
.hl-hero .crumb a{color:var(--on-dark-muted)}.hl-hero .crumb a:hover{color:var(--sage)}
.hl-tag{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--forest);background:var(--sage);padding:8px 16px;border-radius:var(--r-pill)}
.hl-hero h1{color:#fff;margin:24px 0 0;max-width:12ch;text-wrap:balance}
.hl-lead{font-size:24px;font-weight:300;line-height:1.35;color:var(--on-dark-muted);max-width:34ch;margin:26px 0 0;text-wrap:pretty}
.hl-meta{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:34px;padding-top:28px;border-top:1px solid rgba(255,255,255,.16)}
.hl-meta span{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:#fff}
.hl-meta i{width:17px;height:17px;color:var(--sage)}
.hl-photo{margin:0;position:relative}
.hl-photo-frame{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--forest-deep);box-shadow:var(--shadow-lg);cursor:zoom-in}
.hl-photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .9s var(--ease),transform 1.2s var(--ease)}
.hl-photo-frame img.is-on{opacity:1;pointer-events:auto}
.hl-photo-frame:hover img.is-on{transform:scale(1.03)}
.hl-bars{position:absolute;left:18px;right:18px;top:16px;z-index:2;display:flex;gap:6px}
.hl-bars button{flex:1;height:22px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.hl-bars span{display:block;width:100%;height:3px;border-radius:3px;background:rgba(255,255,255,.38);overflow:hidden;position:relative}
.hl-bars span::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.hl-bars .is-done span::after{transform:scaleX(1)}
.hl-bars .is-on span::after{animation:hlBar var(--hl-dur,6s) linear forwards}
.hl-photo-frame.is-paused .hl-bars .is-on span::after{animation-play-state:paused}
@keyframes hlBar{to{transform:scaleX(1)}}
.hl-arrows{display:flex;gap:6px;flex:none}
.hl-arrows button{border:0;color:#fff;cursor:pointer;transition:background .2s}
.hl-arrows button:hover{background:rgba(255,255,255,.28)}
.hl-photo-badge{z-index:2}
@media (prefers-reduced-motion:reduce){.hl-photo-frame img{transition:none}.hl-bars .is-on span::after{animation:none;transform:scaleX(1)}}
.hl-photo-badge{position:absolute;left:18px;bottom:18px;right:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(30,51,40,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;border-radius:var(--r-pill);padding:10px 12px 10px 20px;font-size:14px;font-weight:600}
.hl-photo-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--sage);flex:none;box-shadow:0 0 0 4px rgba(176,208,128,.25)}
.hl-photo-badge .lbl{display:flex;align-items:center;gap:10px}
.hl-photo-badge .zoom{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex:none}
.hl-photo-badge .zoom i{width:16px;height:16px}
.hl-photo figcaption{font-size:13.5px;color:var(--on-dark-faint);margin-top:14px}
.hl-status{list-style:none;margin:0;padding:0;display:grid;gap:0}
.hl-status li{display:grid;grid-template-columns:20px 1fr;gap:14px;position:relative;padding-bottom:20px}
.hl-status li:last-child{padding-bottom:0}
.hl-status li::before{content:"";position:absolute;left:9px;top:22px;bottom:0;width:2px;background:var(--line)}
.hl-status li:last-child::before{display:none}
.hl-status .pt{width:20px;height:20px;border-radius:50%;border:2px solid var(--accent);background:#fff;margin-top:1px;position:relative;z-index:1}
.hl-status .pt.done{background:var(--accent)}
.hl-status .pt.now{background:#fff;box-shadow:0 0 0 4px var(--sage-tint)}
.hl-status b{display:block;font-size:15px;font-weight:700;color:var(--forest)}
.hl-status small{display:block;font-size:14px;line-height:1.45;color:var(--fg-muted);margin-top:3px}
.hl-scope{background:var(--canvas-soft)}
.hl-scope-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px}
.hl-scope-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:28px;display:flex;flex-direction:column;gap:14px}
.hl-scope-card .ic-sq{width:46px;height:46px;border-radius:50%;background:var(--sage-tint);color:var(--forest);display:flex;align-items:center;justify-content:center}
.hl-scope-card .ic-sq i{width:21px;height:21px}
.hl-scope-card h3{font-size:19px;font-weight:700;color:var(--forest);margin:4px 0 0;letter-spacing:-.2px}
.hl-scope-card p{font-size:15px;line-height:1.55;color:var(--fg-muted);margin:0;text-wrap:pretty}
.hl-sign{display:flex;align-items:center;gap:16px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.hl-sign img{height:34px;width:auto}
.hl-sign span{font-size:14px;color:var(--fg-muted)}
.hl-gal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hl-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:44px 0 0;padding:0;list-style:none}
.hl-gal li{margin:0}
.hl-gal button{display:block;width:100%;padding:0;border:0;background:var(--forest);border-radius:var(--r-md);overflow:hidden;position:relative;aspect-ratio:4/5;cursor:zoom-in}
.hl-gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.hl-gal button:hover img{transform:scale(1.04)}
.hl-gal button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hl-gal .chip{position:absolute;left:14px;top:14px;z-index:1;font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--forest);background:rgba(255,255,255,.92);padding:6px 12px;border-radius:var(--r-pill)}
.hl-credit{display:flex;align-items:center;gap:8px;margin:18px 0 0;font-size:14px;color:var(--fg-muted)}
.hl-credit i{width:15px;height:15px}
@media (max-width:900px){.hl-gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (max-width:420px){.hl-gal{gap:8px}.hl-gal .chip{left:8px;top:8px;font-size:11px;padding:4px 9px}}
@media (max-width:1080px){.hl-scope-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.hl-hero-grid{grid-template-columns:1fr;gap:48px;padding-top:140px;padding-bottom:64px}.hl-photo-frame{aspect-ratio:4/4.4;max-height:78vh}}
@media (max-width:640px){.hl-lead{font-size:20px}.hl-scope-grid{grid-template-columns:1fr}.hl-scope-card{padding:24px}.hl-photo-frame{border-radius:var(--r-md)}.hl-photo-badge{left:12px;right:12px;bottom:12px;font-size:13px}}