/* CAB FACTORY – base styles. Most layout lives inline in each page. */
:root { --accent: #1EA9E8; }
* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0B0B0C; }
img, video { max-width: 100%; }
a { color: #EDF1F4; transition: color .15s, opacity .15s, background-color .15s; }
a:hover { color: #FFFFFF; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
nav a:hover { color: #FFFFFF !important; }
a[style*="background: #1EA9E8"]:hover, button[style*="background: #1EA9E8"]:hover { opacity: .88; }
a[style*="aspect-ratio: 3 / 4"] img { transition: transform .6s ease; }
a[style*="aspect-ratio: 3 / 4"]:hover img { transform: scale(1.04); }
input:focus, select:focus, textarea:focus { border-color: var(--accent) !important; outline: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Phones */
@media (max-width: 640px) {
  header nav { padding: 14px 16px !important; }
  header nav > div { gap: 6px 18px !important; font-size: 14px !important; }
  header nav img { height: 30px !important; }
  section > div[style*="min-height: 860px"] { min-height: 640px !important; padding-top: 180px !important; }
  form { padding: 24px 18px !important; }
}

/* Work filters */
.flt { font: inherit; font-size: 14px; padding: 10px 16px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; cursor: pointer;
       background: transparent; border: 1px solid #2A2F35; color: #C3CAD1; border-radius: 0; }
.flt:hover { border-color: #5B636B; color: #EDF1F4; }
.flt[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #06121A; font-weight: 600; }
.proj img { transition: opacity .2s; }
.proj:hover img { opacity: .85; }

/* Work: video cards */
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #16191C; border: 1px solid #262B30; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .2s; }
.proj:hover .thumb img { transform: scale(1.04); }
.thumb .play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: var(--accent); color: #06121A; display: flex; align-items: center; justify-content: center; opacity: .92; transition: transform .2s; }
.proj:hover .thumb .play { transform: scale(1.1); opacity: 1; }
.thumb-empty { display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .1em; color: #8A939C; }
.vmodal { position: fixed; inset: 0; z-index: 100; background: rgba(5,6,7,.92); display: flex; align-items: center; justify-content: center; padding: 24px; }
.vmodal[hidden] { display: none; }
.vmodal-box { position: relative; width: min(1200px, 100%); }
.vmodal-frame { aspect-ratio: 16 / 9; background: #000; }
.vmodal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vmodal-close { position: absolute; top: -52px; right: 0; width: 44px; height: 44px; border: 1px solid #343A40; background: #0B0B0C; color: #EDF1F4; font-size: 18px; cursor: pointer; }
.vmodal-close:hover { border-color: var(--accent); }
.is-hidden { display: none !important; }
.thumb .ext { position: absolute; right: 10px; top: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em; color: #EDF1F4; background: rgba(11,11,12,.75); padding: 4px 8px; }
.vmodal-frame video { width: 100%; height: 100%; background: #000; display: block; }
.vparts { position: absolute; left: 0; top: -52px; display: flex; gap: 6px; }
.vparts button { width: 44px; height: 44px; border: 1px solid #343A40; background: #0B0B0C; color: #EDF1F4; font: 600 15px 'IBM Plex Mono', monospace; cursor: pointer; }
.vparts button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #06121A; }