/* Home only. Project geometry lives in project.css. */
:root { --black:#000; --white:#fff; --line:#262626; --muted:#929292; }
* { box-sizing:border-box; }
html, body { margin:0; background:#000; color:#fff; font-family:Arial,Helvetica,sans-serif; }
body { min-height:100vh; }
.site-header { height:68px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; background:#000; }
.wordmark { display:inline-flex; align-items:center; position:relative; font-size:20px; letter-spacing:-.08em; font-weight:700; color:#fff; text-decoration:none; }
.wordmark .site-name { font-weight:400; letter-spacing:-.06em; }
.wordmark strong { font-weight:700; }
@media (min-width:901px) {
  .wordmark::after { content:'— VFX'; position:absolute; left:100%; margin-left:10px; opacity:0; white-space:nowrap; font-size:.5em; font-weight:300; letter-spacing:-.015em; transition:opacity .14s ease; }
  .wordmark:hover::after { opacity:1; }
}
.header-actions { display:flex; gap:24px; align-items:center; font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.header-actions a, .language { color:#fff; text-decoration:none; background:none; border:0; padding:0; font:inherit; cursor:pointer; }
.language span { opacity:.35; margin:0 2px; }
.header-actions a { display:inline-flex; align-items:center; gap:5px; }
.external-icon { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.work-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; padding:2px 2px 84px; }
.work-card { border:0; background:#111; aspect-ratio:1; position:relative; overflow:hidden; padding:0; color:#fff; text-align:left; cursor:pointer; }
.work-card:focus { outline:none; }
.work-card:focus-visible { outline:2px solid white; outline-offset:-3px; }
.work-card[data-pointer-focus]:focus { outline:none; }
.grid-video, .grid-poster, .video-placeholder { width:100%; height:100%; object-fit:cover; display:block; background:#111; }
.work-card:nth-child(6n+1) .video-placeholder { background:linear-gradient(135deg,#47352e,#151515); }
.work-card:nth-child(6n+2) .video-placeholder { background:linear-gradient(135deg,#18333c,#151515); }
.work-card:nth-child(6n+3) .video-placeholder { background:linear-gradient(135deg,#412d3d,#151515); }
.work-card:nth-child(6n+4) .video-placeholder { background:linear-gradient(135deg,#293b2d,#151515); }
.work-card:nth-child(6n+5) .video-placeholder { background:linear-gradient(135deg,#38353e,#151515); }
.work-card:nth-child(6n) .video-placeholder { background:linear-gradient(135deg,#4b4029,#151515); }
.grid-poster, .grid-video { position:absolute; inset:0; transition:opacity .18s ease,transform .55s ease,filter .55s ease; }
.grid-video { opacity:1; }
.grid-poster { z-index:1; pointer-events:none; }
.work-card.is-playing .grid-video { opacity:1; }
.work-card.is-playing .grid-poster { opacity:0; }
.work-card:hover .grid-video, .work-card:hover .grid-poster { transform:scale(1.045); filter:brightness(.75); }
.work-card__shade { position:absolute; z-index:2; inset:0; background:linear-gradient(180deg,transparent 56%,rgba(0,0,0,.78)); }
.work-card__copy { position:absolute; z-index:3; left:12px; right:12px; bottom:10px; display:flex; flex-direction:column; gap:3px; opacity:0; transition:opacity .25s; }
.work-card:hover .work-card__copy, .work-card:focus-visible:not([data-pointer-focus]) .work-card__copy { opacity:1; }
.work-card__copy b { font-size:13px; font-weight:500; }
.work-card__copy small { font-size:10px; color:#bbb; text-transform:uppercase; letter-spacing:.08em; }
.empty-state { height:calc(100vh - 68px); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; }
.empty-state p { font-size:clamp(36px,8vw,110px); margin:0; letter-spacing:-.07em; }
.empty-state span { color:#999; }
.brand-bar { position:fixed; bottom:0; left:0; right:0; height:64px; z-index:4; background:rgba(0,0,0,.86); backdrop-filter:blur(12px); border-top:1px solid #252525; display:flex; align-items:center; padding:0 6px; }
.brand-viewport { overflow:hidden; flex:1; height:100%; }
.brand-track { display:flex; align-items:center; gap:22px; height:100%; width:max-content; }
.brand-logo { height:42px; width:112px; margin:0; display:grid; place-items:center; flex:0 0 auto; user-select:none; }
.brand-logo img { max-width:100%; max-height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none; }
@media (max-width:900px) {
  .work-grid { grid-template-columns:repeat(3,minmax(0,1fr)); padding-bottom:2px; }
  .brand-bar { position:relative; height:58px; }
  .work-card__copy { opacity:1; }
  .header-actions { gap:14px; }
}
@media (max-width:520px) {
  .site-header { padding:0 14px; }
  .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .work-card__copy { left:8px; bottom:7px; }
  .work-card__copy b { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) { .grid-video, .grid-poster { transition:none; } }

/* Stage 4: header identity and compact contact menu. */
.wordmark { max-width:45%; min-width:0; font-weight:400; }
.site-name { overflow-wrap:anywhere; }
.language { display:flex; align-items:center; gap:4px; }
.language button,.email-copy,.contact-toggle { color:inherit; background:none; border:0; padding:5px 0; font:inherit; cursor:pointer; }
.language button { opacity:.55; }
.language button[aria-pressed="true"] { opacity:1; text-decoration:underline; text-underline-offset:5px; }
.contact-area { position:relative; }
.contact-links { display:flex; align-items:center; gap:20px; }
.contact-toggle { display:none; }
.email-copy { text-transform:none; }
.contact-feedback { position:absolute; right:0; top:calc(100% + 12px); background:#111; border:1px solid #555; padding:10px; width:max-content; max-width:85vw; opacity:0; transition:opacity .2s; pointer-events:none; text-transform:none; }
.contact-feedback.is-visible { opacity:1; }
.back-top { position:fixed; right:18px; bottom:100px; z-index:5; border:1px solid #777; border-radius:50%; background:#111c; color:white; width:42px; height:42px; font-size:24px; cursor:pointer; }
.back-top[hidden] { display:none; }
@media(max-width:900px) {
 .contact-toggle { display:block; }
 .contact-links { display:none; position:absolute; right:0; top:calc(100% + 15px); padding:16px; border:1px solid #555; background:#111; align-items:flex-start; flex-direction:column; width:max-content; max-width:85vw; }
 .contact-area.is-open .contact-links { display:flex; }
 .contact-feedback { top:calc(100% + 185px); }
 .wordmark { font-size:18px; max-width:50%; }
 .back-top { bottom:82px; }
}
@media(prefers-reduced-motion:reduce) { .contact-feedback { transition:none; } }

.site-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.email-copy { overflow-wrap:anywhere; text-align:left; min-width:0; }
.site-header { gap:24px; }
@media(min-width:901px) { .site-header { gap:80px; } .header-actions { flex-shrink:0; } }

/* Contact revision: a separate language group and consistent vector arrows. */
.header-actions { gap:48px; }
.email-copy { display:inline-flex; align-items:center; gap:5px; text-transform:uppercase; }
.contact-feedback { line-height:1.5; overflow-wrap:anywhere; text-align:left; user-select:text; pointer-events:auto; visibility:hidden; transition:opacity .2s,visibility .2s; }
.contact-feedback.is-visible { visibility:visible; }
.contact-feedback strong { font-weight:700; }
@media(max-width:900px) {
 .header-actions { gap:26px; flex-shrink:0; }
 .contact-toggle { border:1px solid #fff; padding:8px 10px; }
 .contact-toggle[aria-expanded="true"] { background:#fff; color:#000; }
}

.contact-feedback { display:flex; align-items:center; gap:12px; }
.contact-feedback > span { min-width:0; }
.contact-dismiss { flex:none; border:1px solid white; border-radius:0; background:none; color:white; font-size:16px; line-height:1; width:22px; height:22px; padding:1px; margin-left:4px; cursor:pointer; }
.contact-dismiss:hover { background:white; color:black; }
.contact-dismiss:focus-visible { outline:1px solid white; }