/* Dark theme only — this is the site's one and only look now, no light
   variant, no toggle. */
:root{
  --bg:#121212;
  --surface:#1e1e1e;
  --surface-2:#262626;
  --border:#3a3a3a;
  --text:#ededed;
  --text-dim:#a3a3a3;
  --text-faint:#7a7a7a;
  --accent:#ec5a2e;
  --accent-dark:#ff8256;
  --accent-soft:#3d2419;
  --accent-soft-hover:#4a2c1e;
  --ink:#ededed;
  --header-bg:#ec5a2e;
  --good:#12b76a;
  --toast-bg:#000000;
  --danger-bg:#3a1613;
  --danger-border:#5c241e;
  --danger-text:#ff8a80;
  --checker:#262626;
  --checker-bg:#191919;
  --radius-lg:8px;
  --radius-md:6px;
  --radius-sm:4px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 16px rgba(0,0,0,.4);
  --font:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0; overflow-x:hidden; max-width:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  min-height:100vh;
}
img{max-width:100%;display:block;}
button{font:inherit;}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:12px 24px;
  background:var(--header-bg);
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-wrap:nowrap;
}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.brand-logo{height:26px; width:auto; max-width:200px;}
.topbar-right{display:flex; align-items:center; gap:8px; min-width:0;}

/* Full crumb trail (Company / Project) — desktop only. */
.breadcrumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  font-size:13px; color:rgba(255,255,255,.85);
}
.breadcrumb button{
  background:none; border:none; color:rgba(255,255,255,.85); cursor:pointer;
  padding:4px 8px; border-radius:6px; font-size:13px; font-weight:600;
}
.breadcrumb button:hover{background:rgba(255,255,255,.15); color:#fff;}
.breadcrumb .crumb-current{color:#fff; font-weight:700; padding:4px 8px;}
.breadcrumb .sep{color:rgba(255,255,255,.5);}

/* Compact mobile crumb — just a back arrow (to the company's project list)
   plus whatever the current deepest label is, so it sits comfortably next
   to the logo instead of wrapping to a second line. */
.breadcrumb-mobile{
  display:none;
  align-items:center; gap:6px;
  min-width:0;
}
.breadcrumb-mobile .back-btn{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex-shrink:0;
  background:rgba(255,255,255,.12);
  border:none; border-radius:999px;
  color:#fff; font-size:16px; line-height:1;
  cursor:pointer;
}
.breadcrumb-mobile .back-btn:hover{background:rgba(255,255,255,.22);}
.breadcrumb-mobile .current-label{
  color:#fff; font-weight:700; font-size:13px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- App layout ---------- */
.app{
  max-width:980px;
  margin:0 auto;
  padding:28px 20px 80px;
}

/* ---------- Picker screens (City / Company / Project / Month) ---------- */
.picker-head{margin-bottom:20px;}
.picker-head h1{font-size:22px; margin:0 0 4px;}
.picker-head p{margin:0; color:var(--text-dim); font-size:14px;}
.picker-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:12px;
}
.picker-card{
  display:flex; flex-direction:column; gap:6px;
  padding:18px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  cursor:pointer;
  text-align:left;
  transition:border-color .15s, box-shadow .15s, transform .1s;
}
.picker-card:hover{border-color:var(--accent); box-shadow:var(--shadow-sm); transform:translateY(-1px);}
.picker-card .card-icon{font-size:22px;}
.picker-card .card-logo{height:32px; width:auto; max-width:100%; object-fit:contain; align-self:flex-start;}
.picker-card .card-label{font-weight:600; font-size:15px; color:var(--text);}
.picker-card .card-sub{font-size:12px; color:var(--text-faint);}
.empty-state{
  padding:40px 20px; text-align:center; color:var(--text-dim);
  background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius-md);
}
.loading-state{padding:40px 20px; text-align:center; color:var(--text-dim);}
.error-state{
  padding:16px 18px; background:var(--danger-bg); border:1px solid var(--danger-border); color:var(--danger-text);
  border-radius:var(--radius-md); font-size:14px;
}

/* ---------- Company login gate ---------- */
.login-wrap{
  display:flex; justify-content:center;
  padding:60px 20px;
}
.login-form{
  display:flex; flex-direction:column; gap:14px;
  width:100%; max-width:340px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  text-align:center;
}
.login-form h1{font-size:20px; margin:0;}
.login-hint{margin:0; color:var(--text-dim); font-size:13.5px; line-height:1.5;}
.login-form input{
  padding:11px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:16px;
  letter-spacing:.03em;
  text-align:center;
  background:var(--surface-2);
  color:var(--text);
}
.login-form input:hover{border-color:var(--ink);}
.login-form input:focus{outline:none; border-color:var(--ink); background:var(--surface);}
.login-error{color:var(--danger-text); font-size:13px; min-height:16px;}

/* ---------- Project header ---------- */
.project-header{
  display:flex; gap:18px; align-items:center;
  padding:22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  margin-bottom:18px;
  flex-wrap:wrap;
}
.project-logo{
  width:64px; height:64px; border-radius:14px; overflow:hidden; flex-shrink:0;
  background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:22px;
}
.project-logo img{width:100%; height:100%; object-fit:cover;}
.project-meta{flex:1; min-width:200px;}
.project-meta h1{font-size:22px; margin:0 0 6px;}
.project-meta .project-bio{margin:0; color:var(--text-dim); font-size:14px; line-height:1.55; max-width:640px;}

/* ---------- Contact form ---------- */
.contact-form{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px 22px;
  margin-bottom:18px;
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
}
.contact-form .field{display:flex; flex-direction:column; gap:6px; flex:1; min-width:180px;}
.contact-form label{font-size:12px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.03em;}
.contact-form input{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  /* 16px, not 15 — anything smaller makes iOS Safari auto-zoom the page on
     focus, which then leaves the viewport mis-scrolled sideways after. */
  font-size:16px;
  background:var(--surface-2);
  color:var(--text);
}
.contact-form input:hover{border-color:var(--ink);}
.contact-form input:focus,
.contact-form input:active{outline:none; border-color:var(--ink); background:var(--surface);}
.contact-form .submit-btn{
  padding:11px 22px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  white-space:nowrap;
}
.contact-form .submit-btn:hover{background:var(--accent-dark);}
.contact-hint{font-size:12px; color:var(--text-faint); width:100%; margin-top:-4px;}

/* ---------- Tabs ---------- */
.tabs{
  display:flex; gap:4px;
  border-bottom:1px solid var(--border);
  margin-bottom:20px;
  overflow-x:auto;
}
.tab-btn{
  padding:11px 18px;
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  font-weight:600;
  font-size:14px;
  color:var(--text-dim);
  cursor:pointer;
  white-space:nowrap;
}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--accent); border-bottom-color:var(--accent);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---------- Posters ---------- */
.poster-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:18px;
}
.poster-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm);
}
.poster-canvas-wrap{
  background:
    linear-gradient(45deg, var(--checker) 25%, transparent 25%),
    linear-gradient(-45deg, var(--checker) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--checker) 75%),
    linear-gradient(-45deg, transparent 75%, var(--checker) 75%);
  background-size:16px 16px;
  background-position:0 0, 0 8px, 8px -8px, -8px 0px;
  background-color:var(--checker-bg);
}
.poster-canvas-wrap canvas{width:100%; height:auto; display:block;}
.poster-card-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  gap:8px;
}
.poster-card-foot .poster-name{font-size:12px; color:var(--text-faint);}
.download-btn{
  padding:7px 14px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:13px; font-weight:600;
  cursor:pointer;
  color:var(--text);
}
.download-btn:hover{border-color:var(--accent); color:var(--accent);}
.download-btn:disabled{opacity:.6; cursor:wait;}

/* ---------- Videos ---------- */
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:18px;
}
.video-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-sm);
}
.video-frame-wrap{
  position:relative;
  background:#000;
  container-type:inline-size;
  overflow:hidden; /* a long name/phone must never push the page wider than the frame */
  max-width:100%;
}
.video-frame-wrap video{width:100%; height:auto; display:block;}
.video-overlay-text{
  position:absolute;
  max-width:94%;
  font-family:var(--font);
  font-weight:600;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 1px 3px rgba(0,0,0,.6), 0 0 1px rgba(0,0,0,.4);
  pointer-events:none;
  transition:opacity .15s linear;
}

/* ---------- Marketing text ---------- */
.marketing-list{display:flex; flex-direction:column; gap:14px;}
.marketing-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:18px 20px;
}
.marketing-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:10px;}
.marketing-card-head .label{font-size:12px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em;}
.copy-btn{
  padding:6px 13px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  border:none;
  border-radius:var(--radius-sm);
  font-size:12.5px; font-weight:600;
  cursor:pointer;
}
.copy-btn:hover{background:var(--accent-soft-hover);}
.marketing-text{
  white-space:pre-wrap;
  overflow-wrap:break-word;
  font-size:14px;
  line-height:1.6;
  color:var(--text);
  margin:0;
  font-family:var(--font);
}
.ph-highlight{background:var(--accent-soft); color:var(--accent-dark); border-radius:3px; padding:0 2px;}

/* ---------- Notifications ---------- */
.notif-list{display:flex; flex-direction:column; gap:12px;}
.notif-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-md);
  padding:14px 18px;
}
.notif-date{font-size:11.5px; font-weight:700; color:var(--accent-dark); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px;}
.notif-headline{font-size:15px; font-weight:700; margin:0 0 6px;}
.notif-content{font-size:13.5px; color:var(--text-dim); margin:0; line-height:1.55; white-space:pre-wrap; overflow-wrap:break-word;}

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:22px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--toast-bg); color:#fff;
  font-size:13px; font-weight:600;
  padding:10px 18px; border-radius:999px;
  opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s;
  z-index:50;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

@media (max-width:600px){
  .app{padding:18px 14px 70px;}
  .project-header{padding:16px;}
  .contact-form{padding:14px 16px;}
  .contact-form .submit-btn{width:100%;}

  /* Compact header: logo + back arrow/current label side by side, no full
     Company / Project trail (which was long enough to wrap the logo onto
     its own line). */
  .topbar{padding:12px 14px;}
  .brand-logo{height:22px;}
  .breadcrumb{display:none;}
  .breadcrumb-mobile{display:flex;}
}