/* Projects portfolio showcase — premium bento gallery */
body.page-road,body.page-projects{animation:roadPageIn .5s cubic-bezier(.22,1,.36,1) both}
@keyframes roadPageIn{from{opacity:0}to{opacity:1}}

.road-showcase{position:relative;margin:48px calc(50% - 50vw) 0;padding:clamp(48px,7vw,80px) clamp(20px,4vw,40px) clamp(64px,8vw,96px);background:#070c14;overflow:hidden}
.road-showcase-bg{position:absolute;inset:0;background:radial-gradient(ellipse 90% 60% at 15% -10%,rgba(0,86,179,.35),transparent 50%),radial-gradient(ellipse 70% 50% at 95% 20%,rgba(238,49,36,.12),transparent 45%),linear-gradient(180deg,#0a1220 0%,#070c14 100%);pointer-events:none}
.road-showcase::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(180deg,#000 0%,transparent 85%);pointer-events:none}
.road-showcase-inner{position:relative;z-index:1;max-width:1280px;margin:0 auto}

.road-showcase-header{margin-bottom:40px}
.road-showcase-eyebrow{margin:0 0 14px;font-size:11px;font-weight:900;letter-spacing:.3em;text-transform:uppercase;color:var(--blue-light)}
.road-showcase-heading{margin:0 0 16px;font-size:clamp(32px,5vw,52px);font-weight:900;line-height:1.05;letter-spacing:-.035em;color:#fff;max-width:14ch}
.road-showcase-intro{margin:0;font-size:clamp(15px,1.9vw,18px);line-height:1.75;color:rgba(255,255,255,.58);max-width:52ch}

.road-featured-wrap{margin-bottom:28px;margin-top:8px}
.road-featured-wrap.is-hidden{display:none}
.road-featured-card{margin:0;border-radius:24px;overflow:visible;box-shadow:0 32px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s cubic-bezier(.22,1,.36,1)}
.road-featured-card:has(.road-featured-btn:hover),.road-featured-card:has(.road-featured-btn:focus-visible){transform:translateY(-12px);box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 48px rgba(0,86,179,.22),0 0 0 1px rgba(126,184,232,.35)}
.road-featured-btn{width:100%;margin:0;padding:0;border:0;background:transparent;cursor:pointer;text-align:left;color:inherit;font:inherit;display:block;border-radius:24px;overflow:hidden}
.road-featured-btn:focus-visible{outline:2px solid var(--blue-light);outline-offset:4px}
.road-featured-media{position:relative;min-height:min(52vh,520px);background:#121a28;overflow:hidden}
.road-featured-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .85s cubic-bezier(.22,1,.36,1),filter .55s cubic-bezier(.22,1,.36,1)}
.road-featured-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,4vw,40px);background:linear-gradient(180deg,rgba(6,10,18,0) 0%,rgba(6,10,18,.35) 45%,rgba(6,10,18,.82) 100%);transition:background .55s cubic-bezier(.22,1,.36,1)}
.road-featured-overlay::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(0,86,179,.18),transparent 70%);opacity:0;transition:opacity .55s cubic-bezier(.22,1,.36,1);pointer-events:none}
.road-featured-btn:hover .road-featured-media img,.road-featured-btn:focus-visible .road-featured-media img{transform:scale(1.08);filter:brightness(1.08) saturate(1.05)}
.road-featured-btn:hover .road-featured-overlay,.road-featured-btn:focus-visible .road-featured-overlay{background:linear-gradient(180deg,rgba(6,10,18,.2) 0%,rgba(6,10,18,.55) 38%,rgba(6,10,18,.96) 100%)}
.road-featured-btn:hover .road-featured-overlay::after,.road-featured-btn:focus-visible .road-featured-overlay::after{opacity:1}
.road-featured-title{margin:10px 0 0;font-size:clamp(22px,3.5vw,36px);font-weight:900;line-height:1.15;color:#fff;letter-spacing:-.02em;max-width:20ch;text-shadow:0 4px 24px rgba(0,0,0,.45);transform:translateY(6px) scale(1);opacity:.92;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .45s cubic-bezier(.22,1,.36,1)}
.road-featured-btn:hover .road-featured-title,.road-featured-btn:focus-visible .road-featured-title{transform:translateY(-6px) scale(1.04);opacity:1}
.road-featured-btn .bento-card-badge{transform:translateY(10px);opacity:.85;transition:transform .5s cubic-bezier(.22,1,.36,1) .03s,opacity .45s cubic-bezier(.22,1,.36,1) .03s}
.road-featured-btn:hover .bento-card-badge,.road-featured-btn:focus-visible .bento-card-badge{transform:translateY(0);opacity:1}
.road-featured-btn .bento-card-cta{transform:translateY(16px);opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1) .08s,opacity .45s cubic-bezier(.22,1,.36,1) .08s}
.road-featured-btn:hover .bento-card-cta,.road-featured-btn:focus-visible .bento-card-cta{transform:translateY(0);opacity:1}
.road-featured-meta{display:none}
.road-featured-label{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-light)}

.road-bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(160px,auto);gap:clamp(14px,2vw,20px)}
.bento-card{margin:0;border-radius:18px;overflow:visible;box-shadow:0 16px 48px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.06);transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s cubic-bezier(.22,1,.36,1),opacity .4s}
.bento-card:has(.bento-card-btn:hover),.bento-card:has(.bento-card-btn:focus-visible){transform:translateY(-10px);box-shadow:0 28px 64px rgba(0,0,0,.48),0 0 36px rgba(0,86,179,.18),0 0 0 1px rgba(126,184,232,.28)}
.bento-card.is-filtered-out{display:none}
.bento-card--hero{grid-column:span 8;grid-row:span 2;min-height:340px}
.bento-card--wide{grid-column:span 8;min-height:220px}
.bento-card--tall{grid-column:span 4;grid-row:span 2;min-height:300px}
.bento-card--std{grid-column:span 4;min-height:200px}
.bento-card-btn{width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;cursor:pointer;display:block;text-align:left;color:inherit;font:inherit;border-radius:18px;overflow:hidden}
.bento-card-btn:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px}
.bento-card-media{position:relative;height:100%;min-height:inherit;background:#121a28;overflow:hidden}
.bento-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .8s cubic-bezier(.22,1,.36,1),filter .55s cubic-bezier(.22,1,.36,1)}
.bento-card-btn:hover .bento-card-media img,.bento-card-btn:focus-visible .bento-card-media img{transform:scale(1.08);filter:brightness(1.07) saturate(1.04)}
.bento-card-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;background:linear-gradient(180deg,rgba(6,10,18,0) 0%,rgba(6,10,18,.45) 42%,rgba(6,10,18,.92) 100%);opacity:0;transition:opacity .5s cubic-bezier(.22,1,.36,1),background .5s cubic-bezier(.22,1,.36,1)}
.bento-card-overlay::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 90% 70% at 50% 100%,rgba(0,86,179,.2),transparent 65%);opacity:0;transition:opacity .5s cubic-bezier(.22,1,.36,1);pointer-events:none}
.bento-card-btn:hover .bento-card-overlay,.bento-card-btn:focus-visible .bento-card-overlay{opacity:1;background:linear-gradient(180deg,rgba(6,10,18,.15) 0%,rgba(6,10,18,.6) 40%,rgba(6,10,18,.97) 100%)}
.bento-card-btn:hover .bento-card-overlay::after,.bento-card-btn:focus-visible .bento-card-overlay::after{opacity:1}
.bento-card-badge{align-self:flex-start;padding:5px 12px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transform:translateY(14px);opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1) .04s,opacity .45s cubic-bezier(.22,1,.36,1) .04s}
.bento-card-btn:hover .bento-card-badge,.bento-card-btn:focus-visible .bento-card-badge{transform:translateY(0);opacity:1}
.bento-card-title{margin:8px 0 0;font-size:clamp(14px,1.6vw,17px);font-weight:800;line-height:1.35;color:#fff;letter-spacing:-.01em;text-shadow:0 2px 16px rgba(0,0,0,.5);transform:translateY(22px) scale(.94);opacity:0;transition:transform .55s cubic-bezier(.22,1,.36,1) .06s,opacity .5s cubic-bezier(.22,1,.36,1) .06s}
.bento-card-btn:hover .bento-card-title,.bento-card-btn:focus-visible .bento-card-title{transform:translateY(0) scale(1.03);opacity:1}
.bento-card-cta{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.95);transform:translateY(18px);opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1) .1s,opacity .45s cubic-bezier(.22,1,.36,1) .1s}
.bento-card-btn:hover .bento-card-cta,.bento-card-btn:focus-visible .bento-card-cta{transform:translateY(0);opacity:1}

/* Touch devices: keep titles readable without hover */
@media(hover:none){
  .bento-card-overlay{opacity:1;background:linear-gradient(180deg,transparent 20%,rgba(6,10,18,.88) 100%)}
  .bento-card-badge,.bento-card-title,.bento-card-cta{transform:none;opacity:1}
  .road-featured-title{transform:none;opacity:1}
}

.bento-card.js-reveal-pending,.road-featured-card.js-reveal-pending{opacity:0;transform:translateY(20px) scale(.98)}
.bento-card.is-visible,.road-featured-card.is-visible{opacity:1;transform:none}

/* Lightbox */
.gallery-lightbox{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:clamp(8px,2vw,20px);pointer-events:none;visibility:hidden;opacity:0}
.gallery-lightbox.is-open{pointer-events:auto;visibility:visible;opacity:1}
.gallery-lightbox-backdrop{position:absolute;inset:0;background:rgba(3,6,12,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);opacity:0;transition:opacity .4s}
.gallery-lightbox.is-open .gallery-lightbox-backdrop{opacity:1}
.gallery-lightbox-shell{position:relative;z-index:1;width:min(1240px,100%);max-height:96vh;display:flex;flex-direction:column;gap:14px;transform:scale(.95);opacity:0;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .45s}
.gallery-lightbox.is-open .gallery-lightbox-shell{transform:scale(1);opacity:1}
.gallery-lightbox-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px}
.gallery-lightbox-counter{margin:0;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.gallery-lightbox-close{width:46px;height:46px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.06);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .25s,transform .25s}
.gallery-lightbox-close:hover{background:rgba(255,255,255,.14);transform:scale(1.05)}
.gallery-lightbox-figure{margin:0;position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.gallery-lightbox-media{border-radius:14px;overflow:hidden;background:#060a12;box-shadow:0 40px 100px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.06)}
.gallery-lightbox-img{width:100%;max-height:min(62vh,680px);object-fit:contain;display:block;margin:0 auto;background:#060a12}
.gallery-lightbox-caption{padding:16px 8px 0;text-align:center}
.gallery-lightbox-title{margin:0 auto;font-size:clamp(15px,2.2vw,21px);font-weight:800;color:#fff;line-height:1.4;max-width:720px;letter-spacing:-.02em}
.gallery-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:1px solid rgba(255,255,255,.1);border-radius:50%;background:rgba(255,255,255,.07);color:#fff;cursor:pointer;display:grid;place-items:center;z-index:5;transition:background .25s,transform .25s}
.gallery-lightbox-nav:hover{background:rgba(255,255,255,.15);transform:translateY(-50%) scale(1.06)}
.gallery-lightbox-prev{left:8px}.gallery-lightbox-next{right:8px}
.gallery-lightbox-thumbs{display:flex;gap:8px;overflow-x:auto;padding:8px 2px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.gallery-lightbox-thumb{flex:0 0 auto;width:76px;height:54px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;opacity:.5;scroll-snap-align:center;transition:opacity .25s,border-color .25s,transform .25s}
.gallery-lightbox-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-lightbox-thumb.is-active{opacity:1;border-color:var(--blue-light);transform:scale(1.04)}
body.lightbox-open{overflow:hidden}

@media(max-width:900px){
  .road-bento{grid-template-columns:repeat(6,1fr)}
  .bento-card--hero{grid-column:span 6;grid-row:span 1;min-height:280px}
  .bento-card--wide{grid-column:span 6}
  .bento-card--tall{grid-column:span 3;grid-row:span 2}
  .bento-card--std{grid-column:span 3}
  .road-featured-media{min-height:min(44vh,400px)}
  .gallery-lightbox-prev{left:4px}.gallery-lightbox-next{right:4px}
}
@media(max-width:560px){
  .road-showcase{margin-top:40px;padding-inline:16px}
  .road-bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .bento-card--hero,.bento-card--wide,.bento-card--tall,.bento-card--std{grid-column:span 1;grid-row:span 1;min-height:240px}
  .road-featured-media{min-height:260px}
  .gallery-lightbox-nav{width:42px;height:42px}
  .gallery-lightbox-thumb{width:64px;height:46px}
}
@media(prefers-reduced-motion:reduce){
  body.page-road,body.page-projects{animation:none}
  .bento-card-media img,.road-featured-media img,.bento-card,.road-featured-card,.bento-card-overlay,.bento-card-title,.bento-card-badge,.bento-card-cta,.road-featured-title,.road-featured-overlay,.gallery-lightbox-shell,.gallery-lightbox-backdrop{transition:none}
  .bento-card.js-reveal-pending,.road-featured-card.js-reveal-pending{opacity:1;transform:none}
  .bento-card:has(.bento-card-btn:hover),.bento-card:has(.bento-card-btn:focus-visible),.road-featured-card:has(.road-featured-btn:hover){transform:none}
  .bento-card-overlay,.bento-card-badge,.bento-card-title,.bento-card-cta{opacity:1;transform:none}
  .bento-card-btn:hover .bento-card-media img,.bento-card-btn:focus-visible .bento-card-media img,.road-featured-btn:hover .road-featured-media img{transform:none}
}

.gallery-loading-msg{margin:48px auto;padding:24px;text-align:center;color:rgba(255,255,255,.72);font-size:15px;font-weight:600}
.bento-card-desc,.road-featured-overlay .bento-card-desc{margin:8px 0 0;font-size:13px;line-height:1.45;color:rgba(255,255,255,.82);max-width:42ch;opacity:0;transform:translateY(8px);transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1) .04s}
.bento-card-btn:hover .bento-card-desc,.bento-card-btn:focus-visible .bento-card-desc,.road-featured-btn:hover .bento-card-desc,.road-featured-btn:focus-visible .bento-card-desc{opacity:1;transform:translateY(0)}
.gallery-lightbox-desc{margin:8px auto 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.78);max-width:640px;font-weight:500}
.road-featured-card.is-featured,.bento-card.is-featured-item{position:relative;box-shadow:0 32px 80px rgba(0,0,0,.5),0 0 0 1px rgba(126,184,232,.35),0 0 32px rgba(0,86,179,.18)}
.bento-card.is-featured-item::before{content:"Featured";position:absolute;top:14px;right:14px;z-index:4;padding:6px 10px;border-radius:999px;background:rgba(0,86,179,.88);color:#fff;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
@media(max-width:900px){
  .bento-card-desc,.road-featured-overlay .bento-card-desc{opacity:1;transform:none}
}