:root{
  /* Gold-on-black grade */
  --bg:#0a0a0b; --panel:#121214; --ink:#f7f5ee; --muted:#cbbf99;
  --brandA:#d4af37; --brandB:#f0cf61; --brandC:#b08d2b; --accent:#d4af37;
}
*{box-sizing:border-box}
html,body {
  margin: 0;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  /* Continuous, cinematic background */
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(212,175,55,.16), transparent 65%),
    radial-gradient(1200px 600px at 110% -10%, rgba(240,207,97,.12), transparent 60%),
    radial-gradient(800px 600px at -10% 100%, rgba(176,141,43,.10), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
@media (max-width: 900px){
  /* Avoid repaint jank on mobile browsers for fixed backgrounds */
  body{ background-attachment: scroll; }
}
body{margin:0; font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(212,175,55,.16), transparent 65%),
    radial-gradient(1200px 600px at 110% -10%, rgba(240,207,97,.12), transparent 60%),
    radial-gradient(800px 600px at -10% 100%, rgba(176,141,43,.10), transparent 70%),
    var(--bg);
  line-height:1.6; -webkit-font-smoothing:antialiased;}

.site-header{position:sticky; top:0; z-index:20; background:linear-gradient(180deg, rgba(8,9,12,.88), rgba(8,9,12,.55)); backdrop-filter: blur(12px); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{max-width:1200px; margin:auto; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:800}
.brand span{font-family:Poppins,sans-serif; font-weight:700}
.menu{display:flex; gap:20px; list-style:none; margin:0; padding:0}
.menu a{color:var(--ink); text-decoration:none; font-weight:700; opacity:.9}
.menu a:hover{opacity:1; text-underline-offset:3px; text-decoration:underline}

.hamburger{display:none; background:none; border:0; width:40px; height:40px; position:relative; cursor:pointer}
.hamburger span{position:absolute; left:8px; right:8px; height:2px; background:var(--ink); transform-origin:center; transition:.25s}
.hamburger span:nth-child(1){top:12px}
.hamburger span:nth-child(2){top:19px}
.hamburger span:nth-child(3){top:26px}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.hero.only-video{position:relative; min-height:90vh; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06)}
.bg-video{position:absolute; inset:0; overflow:hidden; z-index:0}
.bg-video iframe{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:120vw; height:67.5vw; min-height:100%; min-width:177.77%; pointer-events:none; filter:contrast(1.02) saturate(1.12) brightness(.85)}

.section{max-width:1100px; margin:60px auto; padding:0 20px}
.section-header h1,.section-header h2{margin:0 0 10px; font-size:clamp(28px, 2.5vw + 8px, 40px)}
.section-header p{color:var(--muted); margin:0 0 24px}
.center{text-align:center}

.btn{display:inline-block; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:800; letter-spacing:.02em;
  background:linear-gradient(135deg, var(--brandA), var(--brandB)); color:#0a0a0a; border:1px solid rgba(212,175,55,.35); box-shadow:0 12px 28px rgba(212,175,55,.18)}
.btn:hover{transform:translateY(-1px)}

.cols{display:grid; grid-template-columns:2fr 1fr; gap:26px}
.highlights{margin:0; padding-left:20px}
.about-side h3{margin:0 0 8px}
.social-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.social-list.with-icons img{width:18px; height:18px; display:inline-block; filter:brightness(1) contrast(1.2)}
.social-list a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:var(--panel); border:1px solid rgba(255,255,255,.06); text-decoration:none; color:var(--ink)}

.playlist-embed{position:relative; padding-bottom:56.25%; height:0; border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.25); margin:16px 0; background:#000}
.playlist-embed iframe{position:absolute; inset:0; width:100%; height:100%}

.video-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.video{grid-column:span 6; position:relative; padding-bottom:56.25%; height:0; background:#000; border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.25)}
.video iframe{position:absolute; inset:0; width:100%; height:100%}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:var(--panel); border:1px solid rgba(255,255,255,.06); padding:20px; border-radius:16px; box-shadow:0 10px 25px rgba(0,0,0,.2)}
.card h3{margin:0 0 8px}
.itemized{margin:0; padding-left:18px}

.contact-rows{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.contact-item{display:flex; flex-direction:column; gap:6px; padding:16px; border-radius:16px; background:var(--panel); border:1px solid rgba(255,255,255,.06); text-decoration:none; color:var(--ink)}
.contact-label{font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted)}
.contact-value{font-size:18px; font-weight:700}

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

/* Portfolio grid */
.grid-header{display:flex; align-items:center; justify-content:space-between; margin:8px 0 8px}
.grid-header .sub{margin:0; font-size:22px}
.thumb-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px}
.thumb-grid.tight{grid-template-columns:repeat(4,1fr)}
.thumb{position:relative; border-radius:14px; overflow:hidden; background:#000; border:1px solid rgba(255,255,255,.08); cursor:pointer; box-shadow:0 10px 24px rgba(0,0,0,.25)}
.thumb img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/9}
.thumb:after{content:'►'; position:absolute; right:10px; bottom:6px; background:rgba(0,0,0,.45); padding:6px 8px; border-radius:8px; font-weight:800; font-size:14px}
.thumb:hover{transform:translateY(-1px)}
@media (max-width: 1100px){ .thumb-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 700px){ .thumb-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 480px){ .thumb-grid{grid-template-columns:1fr} }

/* Modal */
.modal{position:fixed; inset:0; display:none; z-index:40}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute; inset:0; background:rgba(7,8,12,.85); backdrop-filter: blur(4px)}
.modal-dialog{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(900px,92vw); border-radius:16px; overflow:hidden; background:#000; box-shadow:0 30px 80px rgba(0,0,0,.5)}
.modal-close{position:absolute; z-index:5; right:8px; top:8px; border:0; border-radius:10px; background:rgba(255,255,255,.12); color:#fff; width:36px; height:36px; cursor:pointer}
.modal #modal-player{position:relative; padding-bottom:56.25%; height:0}
.modal #modal-player iframe{position:absolute; inset:0; width:100%; height:100%}

/* Responsive */
@media (max-width: 900px){
  .cards{grid-template-columns:1fr 1fr}
  .contact-rows{grid-template-columns:1fr}
  .menu{display:none; position:absolute; top:64px; right:16px; left:16px; background:var(--panel); padding:14px; border-radius:12px; border:1px solid rgba(255,255,255,.08)}
  .menu.open{display:flex; flex-direction:column}
  .hamburger{display:block}
  .cols{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .hero.only-video{min-height:90vh}
}


/* Titles under thumbnails */
.thumb .caption{
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  padding:8px 6px 0;
  color:var(--ink);
  text-align:left;
}
.thumb .caption .muted{ color: var(--muted); font-weight:500; font-size:12px; display:block; margin-top:2px }


/* === Mobile polish === */
:root{ --tap: 48px }
img{ max-width:100%; height:auto }

/* Tighter container on mobile */
@media (max-width: 900px){
  .section{max-width: 800px}
}
@media (max-width: 720px){
  .section{max-width: 640px}
  .section-header h1,.section-header h2{font-size:clamp(24px, 5vw, 30px)}
  .video{grid-column:span 12}
  .cols{grid-template-columns:1fr}
}

/* Larger tap targets */
.menu a, .btn, .contact-item{ min-height: var(--tap) }

/* Sticky mobile CTA */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:none; gap:10px; padding:10px 14px;
  background:linear-gradient(180deg, rgba(10,10,11,.0), rgba(10,10,11,.85) 18%, rgba(10,10,11,.95) 100%);
  backdrop-filter: blur(8px); border-top:1px solid rgba(255,255,255,.06)
}
.sticky-cta .cta-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  border-radius:12px; text-decoration:none; font-weight:800; letter-spacing:.02em;
  background:linear-gradient(135deg, var(--brandA), var(--brandB)); color:#0a0a0a; border:1px solid rgba(212,175,55,.35);
  padding:12px
}
@media (max-width: 720px){
  .sticky-cta{ display:flex }
  body{ padding-bottom:70px } /* prevent overlap */
}

/* Captions: wrap nicely on small screens */
.thumb .caption{ padding:8px 2px 0 }


/* Gold hover for grid tiles */
.thumb{ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease }
.thumb:hover, .thumb:focus-visible{
  border-color: rgba(212,175,55,.85);
  box-shadow: 0 12px 28px rgba(212,175,55,.22), 0 6px 14px rgba(0,0,0,.35);
  outline: none;
  transform: translateY(-2px);
}
.thumb:focus-visible::after{ outline: 2px solid rgba(212,175,55,.85); outline-offset: 2px }

/* v15 contact spacing */
.contact-rows{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.contact-item{ padding:18px 20px }
@media (max-width: 900px){
  .contact-rows{ grid-template-columns:1fr; gap:14px }
}


/* === Mobile Services Accordion === */
.services-accordion{ display:none }
.services-accordion details{
  background: var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  margin:10px 0;
  box-shadow: 0 10px 18px rgba(0,0,0,.20);
  overflow:hidden
}
.services-accordion summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  font-weight:800;
  display:flex; align-items:center; justify-content:space-between;
}
.services-accordion summary::-webkit-details-marker{ display:none }
.services-accordion .acc-arrow{ width:18px; height:18px; margin-left:10px; flex:0 0 auto }
.services-accordion details[open] .acc-arrow{ transform:rotate(90deg) }
.services-accordion .acc-body{ padding:0 16px 14px 16px }
.services-accordion .acc-body ul{ margin:8px 0 0 18px }

/* Switch to accordion on small screens */
@media (max-width: 720px){
  .cards{ display:none }
  .services-accordion{ display:block }
}


/* Soft vignette over hero video for readability */
.bg-video::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 70% at 50% 20%, rgba(0,0,0,.15), rgba(0,0,0,.55) 70%);
  pointer-events: none;
}


@media (prefers-reduced-motion: reduce){
  .bg-video iframe{ display:none; }
  .hero.only-video{ min-height: 90vh; }
}