/* Home service photographs. Image filters and interaction stay local to this grid. */
.hero-showcase{min-width:0;width:100%}
.hero-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.hero-portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;perspective:1200px}
.hero-tile-slot{min-width:0}
.hero-tile-slot:nth-child(2){margin-block-start:42px}
.hero-tile-slot:nth-child(3){margin-block-start:-42px}
.hero-tile{
  --tilt-x:0deg;--tilt-y:0deg;--tile-lift:0px;--tile-scale:1;
  position:relative;isolation:isolate;display:flex;align-items:flex-end;min-width:0;
  aspect-ratio:.98;min-height:220px;padding:22px;border-radius:22px;overflow:hidden;
  background:#242424;border:1px solid #ffffff38;color:#fff;
  box-shadow:0 14px 32px #0004;touch-action:manipulation;
  transform:perspective(900px) translateY(var(--tile-lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--tile-scale));
  transition:transform .32s cubic-bezier(.2,.75,.25,1),border-color .32s,box-shadow .32s;
}
.hero-tile-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;filter:grayscale(1) brightness(.94);transform:scale(1.01);transition:transform .65s cubic-bezier(.2,.75,.25,1),filter .5s}
.hero-tile::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,#08080808 12%,#08080816 35%,#080808bd 72%,#080808f5 100%),linear-gradient(145deg,#b81f2559,#b81f251a 55%,transparent 90%)}
.hero-tile::after{content:"";position:absolute;inset:-70%;z-index:2;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#ffffff00 44%,#ffffff48 50%,#ffffff00 56%,transparent 60%);transform:translateX(-78%) rotate(-8deg);opacity:0}
.hero-tile.is-shining::after{animation:heroTileShine .72s ease-out both}
.hero-tile-copy{position:relative;z-index:3;display:block;min-width:0;width:100%;text-shadow:0 2px 12px #000b}
.hero-tile-copy::before{content:"";display:block;width:25px;height:3px;border-radius:3px;background:#e74750;box-shadow:0 0 12px #e7475070;margin-bottom:12px;transition:width .35s}
.hero-tile-title{display:block;font-size:clamp(1.05rem,1.6vw,1.38rem);line-height:1.5;font-weight:900;color:#fff;overflow-wrap:break-word}
.hero-tile-cta{display:flex;align-items:center;gap:7px;margin-block-start:5px;font-size:.8rem;font-weight:700;color:#f8c8cb;line-height:1.5;transition:opacity .3s,transform .3s}
.hero-tile-arrow{position:absolute;inset-block-start:16px;inset-inline-end:16px;z-index:3;display:grid;place-items:center;width:32px;height:32px;border:1px solid #ffffff80;border-radius:50%;color:#fff;background:#1118;line-height:1;font-size:1.1rem;transition:transform .35s,background .35s,border-color .35s}
.hero-tile:focus-visible{--tile-lift:-6px;outline:2px solid #ff8b91;outline-offset:5px;border-color:#e74750;box-shadow:0 22px 40px #0006,0 0 26px #b81f2559}
.hero-tile:focus-visible .hero-tile-image{transform:scale(1.065)}
.hero-tile:focus-visible .hero-tile-cta{opacity:1;transform:none}
.hero-tile:focus-visible .hero-tile-arrow{background:#b81f25;border-color:#ed7780}
.hero-tile:active{--tile-lift:0px;--tile-scale:.98;border-color:#ff7379;box-shadow:0 5px 18px #0005,0 0 20px #b81f254d}
.hero .hero-showcase-note{font-size:.72rem;color:#a9a9a9;margin:18px 0 0;line-height:1.6;text-align:center}
.hero-portfolio-grid[data-reveal="pending"] .hero-tile-slot{opacity:0;transform:translateY(22px)}
.hero-portfolio-grid[data-reveal="ready"] .hero-tile-slot{animation:heroTileEnter .65s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--tile-index)*.09s)}
@keyframes heroTileEnter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroTileShine{0%{opacity:0;transform:translateX(-78%) rotate(-8deg)}20%{opacity:.5}80%{opacity:.35}100%{opacity:0;transform:translateX(78%) rotate(-8deg)}}
@media(hover:hover) and (pointer:fine){
  .hero-tile-cta{opacity:0;transform:translateY(7px)}
  .hero-tile:hover{--tile-lift:-7px;--tile-scale:1.015;border-color:#e74750;box-shadow:0 24px 44px #0008,0 0 30px #b81f2566;z-index:4}
  .hero-tile:hover .hero-tile-image{transform:scale(1.075);filter:grayscale(1) brightness(1.07)}
  .hero-tile:hover .hero-tile-copy::before{width:45px}
  .hero-tile:hover .hero-tile-cta{opacity:1;transform:translateY(0)}
  .hero-tile:hover .hero-tile-arrow{transform:rotate(9deg);background:#b81f25;border-color:#ed7780}
}
@media(max-width:1020px){.hero-showcase{max-width:680px;margin-inline:auto}.hero-portfolio-grid{max-width:none}.hero-tile{min-height:0;aspect-ratio:1.16}}
@media(max-width:640px){.hero-portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.hero-tile-slot:nth-child(n){margin-block-start:0}.hero-tile{aspect-ratio:.86;padding:16px;border-radius:18px}.hero-tile-title{font-size:1rem}.hero-tile-cta{font-size:.72rem}.hero-tile-arrow{width:27px;height:27px;inset-block-start:12px;inset-inline-end:12px}.hero-tile-copy::before{margin-bottom:9px}}
@media(max-width:360px){.hero-tile{padding:12px;aspect-ratio:.78}.hero-tile-title{font-size:.88rem}.hero-tile-cta{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){
  .hero-tile,.hero-tile-image,.hero-tile-arrow,.hero-tile-copy::before,.hero-tile-cta{transition:none}
  .hero-tile,.hero-tile:hover,.hero-tile:active,.hero-tile:focus-visible,.hero-tile:hover .hero-tile-image,.hero-tile:focus-visible .hero-tile-image,.hero-tile:hover .hero-tile-arrow{transform:none}
  .hero-portfolio-grid[data-reveal] .hero-tile-slot{animation:none;opacity:1;transform:none}
  .hero-tile.is-shining::after{animation:none;opacity:0}
}