/* Shared treatment for Synk's cinematic device photography. */
.cinema-brand{
  position:absolute;z-index:5;display:inline-flex;align-items:center;gap:10px;
  left:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);
  padding:9px 13px 9px 10px;border:1px solid rgba(154,166,189,.24);border-radius:12px;
  background:linear-gradient(135deg,rgba(4,6,11,.82),rgba(17,24,39,.55));
  box-shadow:0 18px 50px -24px rgba(77,208,255,.65),inset 0 1px rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:none
}
.cinema-brand>img,.tablet-shot .cinema-brand>img{
  width:31px;height:31px;display:block;object-fit:contain;transform:none!important;filter:none!important;margin:0!important
}
.cinema-brand .brand-words{display:flex;flex-direction:column;line-height:1;text-align:left}
.cinema-brand .brand-project{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.43rem;letter-spacing:.31em;color:#9aa6bd;margin-bottom:3px}
.cinema-brand .brand-name{font-family:'Space Grotesk',system-ui,sans-serif;font-size:1rem;font-weight:700;letter-spacing:-.02em;color:#eef2f9}

/* No visible frame: all four sides dissolve into the page background. */
.context-cinema{
  position:relative;isolation:isolate;height:clamp(250px,28vw,390px);margin:0 26px;overflow:hidden;background:var(--bg,#04060b)
}
.context-cinema>.context-image{width:100%;height:100%;display:block;object-fit:cover;object-position:center 52%;filter:saturate(.94) contrast(1.02)}
.context-cinema::after{
  content:"";position:absolute;z-index:3;inset:-1px;pointer-events:none;
  background:
    linear-gradient(90deg,var(--bg,#04060b) 0,rgba(4,6,11,.54) 5%,transparent 16%,transparent 84%,rgba(4,6,11,.54) 95%,var(--bg,#04060b) 100%),
    linear-gradient(180deg,var(--bg,#04060b) 0,transparent 15%,transparent 68%,rgba(4,6,11,.72) 88%,var(--bg,#04060b) 100%)
}
.context-cinema.production>.context-image{object-position:center 48%}
.context-cinema .cinema-brand{z-index:4;bottom:clamp(22px,3vw,38px);left:clamp(22px,3vw,38px)}

/* The brand plate sits inside each photographic composition, above its vignette. */
.hero-cinema .cinema-brand{left:auto;right:clamp(22px,5vw,72px);top:clamp(34px,5vw,72px);bottom:auto;opacity:.94}
.tablet-shot .cinema-brand{left:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px)}

@media(max-width:700px){
  .cinema-brand{gap:8px;padding:7px 10px 7px 8px;border-radius:10px}
  .cinema-brand>img,.tablet-shot .cinema-brand>img{width:25px;height:25px}
  .cinema-brand .brand-project{font-size:.36rem}.cinema-brand .brand-name{font-size:.86rem}
  /* Mobile hero images intentionally bleed to roughly 2× viewport width. */
  .hero-cinema .cinema-brand{right:calc(25% + 16px);top:18px;bottom:auto;opacity:.9}
  .context-cinema{height:210px;margin:0}
  .context-cinema>.context-image{width:132%;max-width:none;margin-left:-16%}
  .context-cinema .cinema-brand{left:16px;bottom:24px}
}