/* CSS Document */

/* Font plumbing */
@font-face {
  font-family: "SBP-Custom";
  src: url("/assets/fonts/custom.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
:root {
  --bg:#0b0b0b; --fg:#ffffff; --muted:#b7b7b7; --brand:#f04d3a;
}
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.55 SBP-Custom, system-ui, Segoe UI, Roboto, Helvetica, Arial; }
a { color: var(--fg); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }

.sbp-nav { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; background:rgba(0,0,0,.4); backdrop-filter: blur(6px) saturate(130%); z-index:20; }
.sbp-nav ul { display:flex; gap:16px; list-style:none; margin:0; padding:0; }
.sbp-nav a.active { color: var(--brand); font-weight:600; }
.sbp-burger { display:none; background:none; border:1px solid rgba(255,255,255,.25); padding:6px 10px; color:var(--fg); border-radius:8px; }

.hero { position:relative; min-height:72vh; display:grid; place-items:center; overflow:hidden; }
.hero-media { position:absolute; inset:0; }
.hero-video { width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.65)); }
.hero-content { position:relative; text-align:center; padding: 0 24px; z-index:1; }
.hero-logo { width:min(40vw, 420px); filter: drop-shadow(0 6px 24px rgba(0,0,0,.5)); }
.tagline { margin-top:10px; color:var(--muted); }
.btn { display:inline-block; margin-top:14px; padding:10px 16px; background:var(--brand); color:#fff; border-radius:999px; border:0; }

.page-header { padding:28px 20px 0; }
.grid { display:grid; gap:16px; padding:24px 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { position:relative; padding:18px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background: rgba(255,255,255,.03); overflow:hidden; }
.card-project { background-image: var(--bgimg, none); background-size:cover; background-position:center; }
.card-project::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.55)); z-index:0; }
.card-project > * { position:relative; z-index:1; }
.card-project .reveal { max-height:0; overflow:hidden; transition:max-height .28s ease; }
.card-project.open .reveal { max-height:220px; }
.card-toggle { margin-top:10px; border:1px solid rgba(255,255,255,.25); background:transparent; color:var(--fg); border-radius:10px; padding:6px 10px; }
.link { color: var(--brand); font-weight:600; }

.columns { display:grid; gap:24px; grid-template-columns: 1fr 1fr; padding:24px 20px; }
.contact label { display:block; margin:10px 0; }
.contact input, .contact textarea { width:100%; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.03); color:var(--fg); }

.project-hero { min-height:40vh; display:grid; align-content:end; padding:24px 20px; background-image: var(--bgimg, none); background-size:cover; background-position:center; position:relative; }
.project-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.7)); }
.project-hero > * { position:relative; z-index:1; }

.gallery { display:grid; gap:8px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); padding:20px; }
.gallery img { width:100%; height:140px; object-fit:cover; border-radius:10px; }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); display:grid; place-items:center; z-index:50; }
.lightbox img { max-width:90vw; max-height:80vh; border-radius:12px; }
.lightbox button { position:absolute; top:16px; right:16px; font-size:28px; background:transparent; color:#fff; border:0; }

.sbp-footer { padding:22px; color:var(--muted); text-align:center; border-top:1px solid rgba(255,255,255,.1); }

@media (prefers-reduced-motion: reduce) { .hero-video { display:none; } }
@media (max-width: 820px) {
  .sbp-burger { display:block; }
  .sbp-nav ul { display:none; }
  .sbp-nav ul.open { display:block; position:absolute; top:58px; right:20px; background:rgba(0,0,0,.9); padding:12px 14px; border-radius:12px; }
  .columns { grid-template-columns: 1fr; }
}