/* Small fixes layered on top of styles.css (loaded by index.html and admin.html) */

/* client logos: white boxes, logos in their real colours */
.slots .slot{background:#ffffff;border-color:rgba(255,255,255,.9);color:#9a9a9a;overflow:hidden}
.slots .slot img{max-width:80%;max-height:70%;object-fit:contain;filter:none;opacity:1}
.ccell{background:#ffffff;border-color:rgba(255,255,255,.9);color:#8a8a8a;overflow:hidden;box-shadow:0 0 22px rgba(255,255,255,.08)}
.ccell img{max-width:78%;max-height:70%;object-fit:contain;filter:none;opacity:1}
a.ccell:hover{box-shadow:0 0 30px rgba(255,255,255,.25)}

/* admin: logo previews on white */
.thumb.logo{background:#ffffff}

/* About tile: full-resolution photo */
.tphoto.has-full{background:none;padding:0;image-rendering:auto;clip-path:none}
/* photo sized to its own shape, left-aligned, with the same stepped pixel corners as the tile */
.tphoto.has-full img.fullphoto{position:absolute;left:0;top:0;height:100%;width:auto;max-width:100%;object-fit:cover;display:block;clip-path:var(--stairs)}

/* Work tile: top 6 thumbnails, each 16:9, in a 3x2 grid */
.preview.has-grid{background:none;border-radius:0;display:flex;align-items:stretch;justify-content:flex-start}
.preview.has-grid::before,.preview.has-grid::after{display:none}
.wgrid4{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;height:100%;aspect-ratio:8/3;max-width:100%}
.wthumb4{position:relative;overflow:hidden;border-radius:6px;background:#111;aspect-ratio:16/9;min-height:0}
.wthumb4 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.wgrid4{height:auto;width:100%}}

/* Muted 30-second video previews (main screen + Work section) */
.pv{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:#000;object-fit:cover}
iframe.pv{transform:scale(1.22);transform-origin:center}
.wthumb4{cursor:pointer}
.wthumb4 img{z-index:1;transition:opacity .6s ease}
.wthumb4.pv-live img{opacity:0}
.wcell > .pv{position:absolute;inset:0;z-index:0}
.wcell > .wthumb{transition:opacity .6s ease}
.wcell.pv-live > .wthumb{opacity:0}
iframe.pv.pv-big{inset:auto;transform-origin:0 0}
.wthumb4.pv-live img{transition:none}
/* main screen: no thumbnail before the video (except videos that can't preview, e.g. Google Drive) */
.wgrid4.pv-on .wthumb4:not(.pv-still) img{opacity:0;transition:none}
/* phones: name + title on top, "Let's talk" on its own line below (no overlap) */
@media (max-width:760px){
.hub{padding-top:max(28px,env(safe-area-inset-top))}
.hub .hhead{order:-2;padding-right:0;margin-bottom:4px}
.hub .talk{order:-1;position:static;align-self:flex-start;margin:0 0 10px;top:auto;right:auto}
.htag{letter-spacing:.3em}
}
/* Footer credit */
.sitefoot{position:absolute;left:0;right:0;bottom:18px;text-align:center;pointer-events:none;font-family:"JetBrains Mono",ui-monospace,monospace;color:#8f8f8f}
.sitefoot p{margin:0}
.sitefoot .sf1{font-size:10px;letter-spacing:.32em;text-transform:uppercase}
.sitefoot .sf1 strong{color:#e8e8e8;font-weight:500;text-shadow:0 0 10px rgba(255,255,255,.35)}
.sitefoot .sf2{margin-top:6px;font-size:10px;letter-spacing:.12em;color:#7a7a7a}
@media (max-width:760px){.sitefoot{position:static;order:99;margin-top:18px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.sitefoot .sf1{letter-spacing:.22em;line-height:1.7}}
/* About: intro video full width under photo + text */
.agrid > .introvid.introwide{grid-column:1 / -1;width:100%;margin-top:8px}