:root{
  --bg:#000;
  --ink:#fff;
  --muted:#aaaaaa;
  --line:#333;
  --radius:20px;
  --container:1120px;
  --topbar-h:56px;

  /* accent sablé (luxe) */
  --sand:#c7b89a;
  --sand-2:#e0d3b0;
}
/* TITLES in Playfair Display (keep body text as is) */
.h1, .h2, .h3,
.cards .card h3,
.nav a{
  font-family:"Playfair Display", serif;
  letter-spacing:0.2px;
}

/* keep small explanatory text in the current font */
body, p, .lede, .sub, .shot-caption, label, input, textarea, select, .footer, small{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}


*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  padding-top:var(--topbar-h);
}

.container{max-width:var(--container);margin-inline:auto;padding:0 20px}
.center{text-align:center}
.mt{margin-top:2rem}

.h1{font-size:clamp(2rem,3vw,3rem);line-height:1.1;margin:.2em 0}
.h2{font-size:clamp(1.5rem,2.5vw,2.2rem);line-height:1.2;margin:.2em 0}
.h3{font-size:1.15rem;margin:.2em 0}
.lede{color:var(--muted)}
.sub{color:var(--ink);font-weight:500}

/* NAV */
.topbar{
  position:fixed;top:0;left:0;right:0;
  height:var(--topbar-h);
  background:var(--bg);
  border-bottom:1px solid var(--line);
  z-index:100;
  display:flex;align-items:center;
}
.nav-center{display:flex;justify-content:center;width:100%;}
.nav{
  list-style:none;
  display:flex;
  gap:40px;
  margin:0;
  padding:0;
  align-items:center;
}
.nav a{
  text-decoration:none;
  color:var(--ink);
  font-size:1rem;
  font-weight:600;
  padding:8px 6px;
  border-radius:10px;
}
.nav a:hover{color:var(--sand);}

/* SECTIONS */
.section{padding:56px 0}

/* HERO */
.hero{padding:64px 0 70px;}
.hero__grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:36px;
  align-items:center;
}
.hero__media{
  background:#111;
  padding:18px;
  border-radius:32px;
}
.video{
  width:100%;
  height:360px;
  display:block;
  border:none;
  border-radius:12px;
  background:#000;
}

/* LOGOS */
.logos{
  border-block:1px solid var(--line);
  background:#040404;
  padding:20px 0;
}
.marquee{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;
  flex-wrap:wrap;
}
.marquee img{
  width:120px;
  height:40px;
  object-fit:contain;
  filter:brightness(2) invert(1);
  opacity:.85;
  transition:opacity .3s ease;
}
.marquee img:hover{opacity:1}

/* GENERIC GRIDS */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* CARDS (portfolio home) */
.cards .card{
  display:block;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  text-decoration:none;
  color:inherit;
  background:#111;
  transition:box-shadow .3s ease, transform .2s ease;
}
.cards .card:hover{
  box-shadow:0 6px 20px rgba(255,255,255,.10);
  transform:translateY(-1px);
}

/* image in portfolio cards */
.cards.grid-4 .card-img{
  width:100%;
  height:380px;
  object-fit:cover;
  border-radius:16px;
  margin-bottom:14px;
  display:block;
}
.cards.grid-4 .card h3{
  margin:0;
  font-size:1.05rem;
  line-height:1.3;
}

/* SERVICES */
.service{
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  background:#111;
}

/* MASONRY */
.masonry{columns:2;gap:16px}
.masonry img{
  width:100%;
  height:900px;
  max-height:100vh;
  object-fit:cover;
  border-radius:12px;
  display:block;
  margin:0 0 16px;
}

/* VIDEO GRID (basic) */
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.video-grid video{width:100%;border-radius:12px;background:#000}

/* CATEGORY GRID (photos/videos cards) */
.shots-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-top:14px;
}
.shot{
  margin:0;
  border:1px solid var(--line);
  background:#111;
  border-radius:16px;
  overflow:hidden;
}
.shot img,
.shot video{
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
  background:#000;
}
.shot-caption{
  padding:10px 12px 12px;
  font-size:.95rem;
  color:var(--muted);
}
.shot-caption span{color:var(--ink);font-weight:600}

/* VIDEOS SPECIAL LAYOUTS */
.video-grid-2{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
}
.shot-video-wide{
  overflow:hidden;
  border-radius:16px;
}
.shot-video-wide video{
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
  background:#000;
}

/* square video card (if you use it) */
.shot-video-horizontal{
  aspect-ratio:1 / 1;
  overflow:hidden;
  background:#000;
}
.shot-video-horizontal video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* FORM (generic) */
.form{display:grid;gap:14px}
.form label{display:grid;gap:6px;font-weight:600}
input, textarea, select{
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  font:inherit;
  background:#111;
  color:var(--ink);
}

/* CONTACT (sablé, no black borders) */
.contact{
  background:rgba(199,184,154,0.06);
  border-radius:20px;
  padding:40px 30px;
  border:none;
}
.contact .h2,
.contact p{color:var(--sand)}
.contact label{color:var(--sand);font-weight:500}

.contact input,
.contact textarea{
  background:rgba(0,0,0,0.55);
  border:none;
  outline:1px solid rgba(199,184,154,0.25);
  color:var(--sand);
  border-radius:12px;
}
.contact input::placeholder,
.contact textarea::placeholder{
  color:rgba(199,184,154,0.55);
}
.contact input:focus,
.contact textarea:focus{
  outline:1px solid rgba(199,184,154,0.75);
}

.btn{
  display:inline-block;
  text-decoration:none;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#111;
  color:var(--ink);
  font-weight:600;
}
.btn:hover{border-color:rgba(199,184,154,0.6)}
.contact .btn{
  background:var(--sand);
  color:#000;
  border:none;
  transition:background .3s ease, transform .2s ease;
}
.contact .btn:hover{
  background:var(--sand-2);
  transform:translateY(-1px);
}

/* FOOTER */
.footer{
  border-top:1px solid var(--line);
  padding:24px 0;
  background:#111;
  color:var(--muted);
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--sand)}

/* RESPONSIVE */
@media (max-width:960px){
  .nav{gap:22px}
  .hero__grid{grid-template-columns:1fr}
  .video{height:260px}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .masonry{columns:1}
  .video-grid{grid-template-columns:1fr}
  .shots-grid{grid-template-columns:repeat(2,1fr)}
  .video-grid-2{grid-template-columns:1fr}
}
@media (max-width:520px){
  .grid-4{grid-template-columns:1fr}
  .shots-grid{grid-template-columns:1fr}
}