/* Industry tiles, shared by the home page and /templates. The grid (a wide first tile, a dark "All templates" tile on home) (a wide first tile, a dark "All templates" tile) holding the /templates
   industry tiles (.catc/.cw from tpl27.css, which the home page does not load). */
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.catc{position:relative;display:flex;flex-direction:column;gap:16px;padding:14px;border-radius:var(--r);background:var(--s1);color:inherit;transition:transform .5s var(--ease)}
.catc:hover{transform:translateY(-3px);color:var(--ink)}
.catc:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.cw{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden}
.cw i{position:absolute;width:62%;aspect-ratio:4/3;border-radius:8px;background:var(--s2);box-shadow:var(--sh);overflow:hidden;transition:transform .7s var(--ease)}
.cw i:nth-child(1){left:6%;top:24%;transform:rotate(-5deg)}
.cw i:nth-child(2){left:20%;top:16%;z-index:2}
.cw i:nth-child(3){left:34%;top:28%;transform:rotate(4deg)}
.cw i:empty{background:var(--s3,var(--s2))}
.cw i img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.catc:hover .cw i:nth-child(1){transform:translateX(-6%) rotate(-8deg)}
.catc:hover .cw i:nth-child(3){transform:translateX(6%) rotate(7deg)}
.catc>div:last-of-type{display:flex;flex-direction:column;gap:2px;padding:0 6px}
.catc b{font-weight:500;font-size:16px}
.catc span{font-size:13.5px}
.catc em{position:absolute;right:20px;bottom:22px;font-style:normal;color:var(--ink2);transition:transform .4s var(--ease)}
.catc:hover em{transform:translateX(4px);color:var(--ink)}
.catc.w{grid-column:span 2}
.catc.w .cw{aspect-ratio:auto;flex:1;min-height:0}
.catc.w .cw i{width:40%}
.catc.w .cw i:nth-child(1){left:9%;top:22%}.catc.w .cw i:nth-child(2){left:30%;top:13%}.catc.w .cw i:nth-child(3){left:51%;top:24%}
.catc.w b{font-size:18px}
.catc.all{background:var(--btn);color:var(--btnT)}
.catc.all:hover{color:var(--btnT)}
.catc.all .cw{display:flex;align-items:flex-end;padding:6px}
.catc.all .cw b{font-size:clamp(56px,6vw,88px);font-weight:500;letter-spacing:-.05em;line-height:.9}
.catc.all span,.catc.all em,.catc.all:hover em{color:var(--btnT);opacity:.75}
/* the front (middle) shot is a full-page capture running to the bottom of the tile, and scrolls on hover */
.cw i:nth-child(2){aspect-ratio:auto;bottom:0;border-radius:8px 8px 0 0}
.cw i:nth-child(2) img{transition:object-position 3.2s cubic-bezier(.25,.1,.25,1)}
@media(hover:hover){.catc:hover .cw i:nth-child(2) img{object-position:left 40%}}
.catc.w .cw i:nth-child(2){top:10%}
@media(max-width:1000px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}.catc.w .cw{min-height:0;aspect-ratio:16/10}}
@media(max-width:560px){.cats{grid-template-columns:1fr}.catc.w{grid-column:auto}.catc.w .cw i{width:62%}.catc.w .cw i:nth-child(1){left:6%;top:24%}.catc.w .cw i:nth-child(2){left:20%;top:16%}.catc.w .cw i:nth-child(3){left:34%;top:28%}.catc.all .cw b{font-size:clamp(88px,32vw,150px)}}
@media(prefers-reduced-motion:reduce){.catc,.cw i,.catc em,.cw i:nth-child(2) img{transition:none}}