/* homepage enhancements: additive only, her layout untouched */
/* peek: hover reveals real work from that section inside the tile, uncropped */
.peek{position:absolute;inset:0;display:block;background:#fff;opacity:0;transition:opacity .45s ease;pointer-events:none;overflow:hidden}
.peek img{position:absolute;left:5%;top:5%;width:90%;height:78%;object-fit:contain;box-shadow:none!important}
.peek b{position:absolute;left:0;right:0;bottom:0;height:17%;background:#132169;color:#fff;font:800 38px/17% "Proxima Nova",sans-serif;display:flex;align-items:center;justify-content:center;letter-spacing:.02em;padding:0 20px;text-align:center}
.peek{display:block}
a.tile{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
a.tile img{transition:box-shadow .55s}
a.tile:hover,a.tile.hot{transform:translateY(-14px)}
a.tile:hover>img:first-child,a.tile.hot>img:first-child{box-shadow:10px 24px 40px rgba(104,101,102,.5)}
a.tile:hover .peek,a.tile.hot .peek{opacity:1}
.lbl a{transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .3s}
.lbl a.up{transform:translateY(-14px);opacity:0}
a.tile.pre{opacity:0;transform:translateY(60px)}
a.tile{transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .8s ease}
.lbl a.pre{opacity:0}
/* peek v2: slow drift, counter, progress, cue */
.peek img{transform-origin:50% 50%;transition:transform 4.5s ease-out}
.hot .peek img{transform:scale(1.045)}
.peek b{justify-content:flex-start;padding-left:4.5%;text-align:left}
.peek b em{font-style:normal;margin-left:auto;font:600 .5em/1 "Proxima Nova",sans-serif;opacity:.75;padding-right:4%;white-space:nowrap}
.peek i{position:absolute;left:0;bottom:0;height:5px;width:0;background:#6fd0ee}
.hot .peek i{animation:pg 1.5s linear infinite}
@keyframes pg{from{width:0}to{width:100%}}
.peek u{position:absolute;right:3%;top:2.4%;background:#fff;padding:7px 12px;border-radius:30px;box-shadow:0 2px 8px rgba(0,0,0,.25);text-decoration:none;font:800 24px/1 "Proxima Nova",sans-serif;color:#345dae;letter-spacing:.04em;text-transform:uppercase}
/* phone tiles */
.m .tg a{overflow:visible}
.m .peek{position:absolute;display:block;opacity:0;background:#fff;transition:opacity .35s;pointer-events:none;overflow:hidden}

.m .tg span.peek{left:0;right:0;top:0;bottom:0;transform:none;text-shadow:none;color:#fff;font:inherit}
.m .peek img{height:72%!important}
.m .peek b{text-shadow:none;font-size:clamp(11px,3.2vw,16px);height:19%;line-height:1.1}
.m .peek u{font-size:clamp(8px,2.3vw,12px);top:3%;padding:4px 8px}
.m .peek i{height:3px}
.m .tg a.hot .peek{opacity:1}
.m .tg a.hot span:not(.peek){opacity:0}
.m .tg a span:not(.peek){transition:opacity .25s}
.tapcue{display:block;text-align:center;font:600 14px/1.3 "Proxima Nova",sans-serif;color:#345dae;margin:-4px 0 12px}
.tapcue{display:block}
@media(min-width:821px){.tapcue{display:none!important}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* baked-in title text must not block tile hover */
svg.abs text{pointer-events:none}
