/* Import Google Font: Raleway */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;800&display=swap');

/* ========== Theme / Base ========== */
:root{
  --bg:#0e0e10;
  --text:#eaeaea;
  --muted:#bdbdbd;
  --accent:#8be9fd;
  --card:#17171a;
  --shadow:0 10px 30px rgba(0,0,0,.3);
  --nav-h:88px;
  --grid-pad:24px;
  --maxw:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Raleway', Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

a{color:var(--accent); text-decoration:none}
img{max-width:100%; display:block}

/* Safe-area helper for iOS notch/home bar */
.safe-area{
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ========== Layout ========== */
.container{
  max-width: var(--maxw);
  margin:0 auto;
  padding:0 var(--grid-pad);
}
.section{padding:100px 0}
.section.pad-top{padding-top:120px}

/* ========== Header / Nav ========== */
.nav{
  position:fixed; top:0; left:0; right:0;
  background:rgba(14,14,16,.85); backdrop-filter: blur(10px);
  border-bottom:1px solid #222; z-index:1000;
}
.nav .wrap{display:flex; align-items:center; height:var(--nav-h);}
.brand{font-weight:800; font-size:28px; letter-spacing:.4px; color:var(--text);}
.brand a{color:inherit; text-decoration:none;}
.menu{display:flex; gap:28px; list-style:none; margin:0 0 0 auto; padding:0}
.menu a{color:var(--text); opacity:.9}
.menu a:hover{opacity:1}
.burger{display:none; font-size:24px; cursor:pointer}

/* Dropdown menu */
.menu li { position: relative; }
.dropdown-menu{
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  border-radius: 8px;
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  display: none;
  z-index: 100;
}
.dropdown-menu li a{
  display: block;
  padding: 10px 16px;
  color: var(--text);
  font-size: 15px;
}
.dropdown-menu li a:hover{ background: rgba(255,255,255,0.06); }
.dropdown .caret{ display:inline-block; transition:transform .15s ease; }
@media (hover:hover){
  .menu li.dropdown:hover > .dropdown-menu,
  .menu li.dropdown:focus-within > .dropdown-menu { display:block; }
  .menu li.dropdown:hover > .dropdown-toggle .caret { transform:rotate(180deg); }
}
.menu li.dropdown.open > .dropdown-menu { display:block; }
.menu li.dropdown.open > .dropdown-toggle .caret { transform:rotate(180deg); }
@media (max-width:880px){
  .dropdown-menu{position:static; min-width:0; margin-top:8px; box-shadow:none; background:rgba(10,10,10,0.85);}
  .dropdown-menu li a{padding:10px 12px;}
}

/* ========== Full-bleed Hero with Video Background ========== */
.hero-full{
  position:relative;
  /* dynamic viewport units so iOS URL bar changes don't break layout */
  min-height:100vh;          /* fallback */
  min-height:100svh;         /* iOS small viewport */
}
@supports (min-height: 100dvh){
  .hero-full{ min-height:100dvh; }
}

/* keep content clear of fixed header */
main, .section { padding-top: var(--nav-h); }

.hero-media{position:absolute; inset:0; overflow:hidden; z-index:0;}
.hero-media .hero-video{width:100%; height:100%; display:block; object-fit:cover;}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.15) 40%, rgba(0,0,0,0)),
    linear-gradient(0deg, rgba(0,0,0,.20), rgba(0,0,0,0));
  pointer-events:none;
}
.hero-content{
  position:relative; z-index:2; display:flex; flex-direction:column; gap:12px;
  padding:clamp(24px,6vw,96px) 20px;
  padding-top: calc(var(--nav-h) + 40px);
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.hero-content h1{margin:0 0 6px; font-size:clamp(28px,6vw,60px)}
.hero-content p{max-width:760px; color:#e7e7e7}
.hero-content a, .hero-content * { pointer-events:auto; }

/* ========== Work Grid / Cards ========== */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:900px){ .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .grid-3{grid-template-columns:1fr} }

.card{
  background:var(--card);
  border:1px solid #25252a;
  border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .2s ease;
}
.card:hover{transform:translateY(-4px)}
.card .thumb{aspect-ratio:16/9; background:#0b0b0d; display:flex; align-items:center; justify-content:center; position:relative;}
.card .thumb img,
.card .thumb video{width:100%; height:100%; object-fit:cover; display:block}
.card .body{padding:14px 16px}
.card h3{margin:0 0 6px; font-size:1.05rem}
.card p{margin:0; color:var(--muted); font-size:.95rem}

/* Title overlay for cards */
.card-overlay .thumb{position:relative}
.thumb-overlay{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:16px;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15) 40%, rgba(0,0,0,0));
  pointer-events:none;
}
.thumb-title{
  font-size:clamp(16px,2.4vw,22px);
  font-weight:800; color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
  letter-spacing:.2px; line-height:1.1;
}
.card-overlay:hover .thumb-overlay{
  background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.2) 40%, rgba(0,0,0,0));
}

/* Hover-to-play visual fade */
.card .thumb video{opacity:0; transition:opacity .25s ease; pointer-events:none}
.card:hover .thumb video{opacity:1}
.card:hover .thumb img{opacity:0}

/* Work cards (index page) always show title overlay */
.work-card .thumb-overlay{
  opacity:1 !important;
  background:linear-gradient(to top, rgba(0,0,0,.38), rgba(0,0,0,0) 55%);
  align-items:flex-end; padding:16px; justify-content:flex-start;
}
.work-card .thumb img{transition:transform .45s cubic-bezier(0.34,1.56,0.64,1);}
.work-card:hover .thumb img{transform:scale(1.08);}
.work-card .thumb img,
.work-card:hover .thumb img{opacity:1 !important;}

/* ========== Clients Grid ========== */
.clients-logos{
  display:grid; grid-template-columns:repeat(5,1fr); gap:18px; align-items:center;
}
@media (max-width:900px){ .clients-logos{grid-template-columns:repeat(3,1fr)} }
@media (max-width:600px){ .clients-logos{grid-template-columns:repeat(2,1fr)} }
.logo-tile{
  background:#141417; border:1px solid #242429; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  padding:18px; height:90px;
}

/* ========== Forms / Footer ========== */
form label{display:block; font-weight:600; margin:10px 0 6px}
input, textarea, button{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid #2a2a2f; background:#15151a; color:var(--text)
}
textarea{min-height:140px; resize:vertical}
button{background:linear-gradient(90deg, #7aa2ff, #9cecfb); color:#0b0b0c; border:none; cursor:pointer; font-weight:700}
button:hover{filter:brightness(1.05)}
.success, .error{padding:12px 14px; border-radius:12px; margin:10px 0}
.success{background:#153a24; border:1px solid #1f6a3b; color:#b9f6ca}
.error{background:#3a1515; border:1px solid #6a1f1f; color:#ffb3b3}

.footer{padding:50px 0; color:#9a9a9a; text-align:center; border-top:1px solid #202024; margin-top:40px}

/* ========== About Section ========== */
.about-wrap{display:flex; align-items:center; gap:40px;}
.about-logo, .about-text{flex:1; font-size:1.2rem; line-height:1.6;}
.about-logo img{width:95%; max-height:400px; object-fit:contain;}
.about-text{padding-right:20px;}
.about-text h2{margin-top:0;}
@media (max-width:768px){
  .about-wrap{flex-direction:column; text-align:center;}
  .about-logo img{width:60%; max-height:none; margin:0 auto 20px;}
}

/* ========== Anchor Offsets (fix header overlap) ========== */
html{ scroll-padding-top: calc(var(--nav-h) + 8px); }
#home, #about, #work, #clients, #contact{ scroll-margin-top: calc(var(--nav-h) + 8px); }

/* --- Brand logo in header --- */
.brand { display: flex; align-items: center; }
.brand a.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
}
.brand a.brand-link:visited { color: var(--text); }
.brand-logo { height: 60px; width: auto; display: block; }
@media (max-width: 740px) {
  .brand-logo { height: 24px; }
}

/* Screen-reader only text */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
/* ===== MOBILE NAV OVERLAY (matches JS `.is-open` and 740px) ===== */
@media (max-width: 740px){
  /* Show burger on phones */
  .burger{
    display: block;
    margin-left: auto;
    padding: 12px 14px;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
  }

  /* Keep header above content; menu overlays above header */
  .nav{ z-index: 2000; }

  /* Overlay panel (hidden by default) */
  .menu{
    position: fixed;
    top: var(--nav-h);               /* use top:0 & height:100vh to cover header too */
    left: 0; right: 0;
    height: calc(100vh - var(--nav-h));
    background: rgba(0,0,0,.96);
    backdrop-filter: blur(2px);
    z-index: 3000;

    /* Layout */
    margin: 0;
    padding: 20px;
    list-style: none;
    overflow-y: auto;

    /* Hidden by default (use opacity for smooth open) */
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }

  /* Vertical spacing for links */
  .menu li{ margin: 18px 0; }
  .menu a{
    display: inline-block;
    font-size: 20px;
    color: var(--text);
    text-decoration: none;
  }

  /* When opened by JS */
  .menu.is-open{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Prevent background scroll while menu is open */
  body.nav-open{ overflow: hidden; }
}
/* Hide overlay list on desktop; show header links on desktop only */
#site-menu{ /* mobile overlay menu */
  /* no desktop styles here */
}
.desktop-nav{ display:none; margin-left:auto; }

@media (min-width: 741px){
  #site-menu{ display:none; }   /* overlay hidden on desktop */
  .desktop-nav{ display:block; }
}

/* Desktop header menu styling */
.menu-desktop{
  display:flex;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
}
.menu-desktop a{
  color:var(--text);
  opacity:.9;
  text-decoration:none;
}
.menu-desktop a:hover{ opacity:1; }
.menu-desktop li{ position:relative; }

/* Dropdown for desktop menu */
.menu-desktop .dropdown-menu{
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  border-radius: 8px;
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  display: none;
  z-index: 100;
}
.menu-desktop .dropdown-menu li a{
  display: block;
  padding: 10px 16px;
  color: var(--text);
  font-size: 15px;
}
.menu-desktop .dropdown-toggle .caret{
  display:inline-block; transition: transform .15s ease;
}
@media (hover:hover){
  .menu-desktop li.dropdown:hover > .dropdown-menu,
  .menu-desktop li.dropdown:focus-within > .dropdown-menu { display:block; }
  .menu-desktop li.dropdown:hover > .dropdown-toggle .caret { transform: rotate(180deg); }
}

/* Mobile: hide the desktop header menu, show burger (you already have burger show rules) */
@media (max-width: 740px){
  .desktop-nav{ display:none; }
}