/* ===== Base (light theme) ===== */
:root {
  /* Existing color variables ... */
  --bg:#ffffff;
  --panel:#f7f7f9;
  --text:#0f0f12;
  --muted:#5b5b66;
  --brand:#5b8cff;
  --brand-2:#9a6bff;
  --accent:#00dc82;
  --header-h:68px;

  /* Controls for the hero section */
  --hero-h: 70vh; /* Adjust hero height: try 45vh, 50vh, etc. */
  --hero-overlay-color: 255,255,255; /* White overlay */
  --hero-overlay-opacity: .55;       /* 0 = transparent, 1 = solid */
}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text)}
img{max-width:100%; display:block; height:auto}
.container{width:min(1100px, 92%); margin-inline:auto}
.container.narrow{width:min(780px, 92%)}
.center{text-align:center}

/* ===== Header ===== */
.site-header{position:fixed; inset-block-start:0; inset-inline:0; height:var(--header-h); z-index:30; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom:1px solid #e8e8ef}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; height:var(--header-h)}
.logo img{height:40px; width:auto}
.main-nav{display:flex; align-items:center; gap:16px}
.main-nav ul{display:flex; list-style:none; gap:20px; margin:0; padding:0}
.main-nav a{color:var(--text); text-decoration:none; opacity:.9}
.main-nav a:hover{color:var(--brand)}
.hamburger{display:none; width:40px; height:40px; background:transparent; border:1px solid #d9d9e2; border-radius:8px; position:relative; color:var(--text)}
.hamburger span{position:absolute; left:8px; right:8px; height:2px; background:var(--text); transition:.3s}
.hamburger span:nth-child(1){top:10px}
.hamburger span:nth-child(2){top:18px}
.hamburger span:nth-child(3){top:26px}
.social{display:flex; gap:12px}
.social a{color:#7a7a86}
.social a:hover{color:var(--text)}

@media (max-width: 920px){
  .hamburger{display:inline-block}
  .main-nav ul{position:absolute; top:var(--header-h); right:0; left:0; background:var(--panel); flex-direction:column; padding:16px; gap:12px; border-bottom:1px solid #e6e6ee; display:none}
  .main-nav.open ul{display:flex}
}

/* Offset for fixed header */
section{scroll-margin-top:calc(var(--header-h) + 20px)}

/* ===== Hero (section-scoped background that scrolls) ===== */
#hero{
  position: relative;
  height: var(--hero-h);
  min-height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* YouTube background fills the hero, but is not fixed anymore */
.video-background{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* �Cover� the hero with a 16:9 iframe */
.video-background iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  /* Cover technique for any hero height */
  width: 177.78vh;     /* 100 * 16/9 � wide enough to cover when tall */
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* clicks pass through */
}

/* Adjustable overlay tint (white by default, see variables) */
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(var(--hero-overlay-color), var(--hero-overlay-opacity));
}

/* Content sits above video + overlay */
.hero-content{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1rem;
}


/* ===== Sections ===== */
.section{padding:84px 0}
.section h2{font-size:clamp(1.6rem, 3vw, 2.2rem); margin:0 0 1rem; color:#222222;}
blockquote{font-weight:800; font-size:clamp(1.1rem, 2.6vw, 1.6rem); text-align:center; margin:0; line-height:1.45; color:#222222;}

.about-flex {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.about-photo {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

.about-text {
  flex: 1;
}

.headshot {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
  display: block;
  margin: 0; /* reset so it aligns naturally in flex */
}


/* ===== Video grid ===== */
.video-grid{display:grid; gap:16px; grid-template-columns:repeat(4, 1fr)}
.video-card{position:relative; border-radius:14px; overflow:hidden; border:1px solid #e6e6ee; background:#fff}
.video-card img{aspect-ratio:16/9; width:100%; object-fit:cover; display:block}
.video-card .play{position:absolute; inset:auto auto 12px 12px; background:rgba(0,0,0,.6); border:1px solid #444; color:#fff; padding:.35rem .5rem; border-radius:999px; font-size:.9rem}
.video-card h3{position:absolute; inset:auto 12px 12px auto; bottom:12px; color:#fff; margin:0; background:rgba(0,0,0,.45); padding:.3rem .5rem; border-radius:8px; font-weight:600}
.video-card:hover img{transform:scale(1.02); transition:.3s}

@media (max-width: 960px){.video-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width: 540px){.video-grid{grid-template-columns:1fr}}

/* ===== Video Fancybox ===== */
.video-card {
  position: relative;
  display: inline-block;
  text-align: center;
  cursor: pointer;
}

.video-card .play {
  position: absolute;
  top: 40%;
  left: 45%;
  font-size: 2rem;
  color: white;
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  padding: 0.5rem;
}

/* ===== Masonry Gallery ===== */
.masonry{column-count:4; column-gap:16px}
.masonry .item{display:inline-block; width:100%; margin:0 0 16px; break-inside:avoid; border-radius:12px; overflow:hidden; border:1px solid #e6e6ee; background:#fff;}
.masonry .item.hidden{display:none}
.masonry .item:hover img {transform: scale(1.02);transition: transform 0.3s ease;}
.masonry img{width:100%; height:auto; display:block}
@media (max-width: 1100px){.masonry{column-count:3}}
@media (max-width: 780px){.masonry{column-count:2}}
@media (max-width: 520px){.masonry{column-count:1}}

.filters{display:flex; gap:8px; align-items:center}
.filter-btn{padding:.45rem .75rem; border-radius:999px; background:#ffffff; color:var(--text); border:1px solid #d9d9e2; cursor:pointer}
.filter-btn.active{background:linear-gradient(135deg, var(--brand), var(--brand-2)); border-color:transparent; color:#fff}
.portfolio-header{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* ===== Lightbox ===== */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:50}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw; max-height:86vh; box-shadow:0 20px 60px rgba(0,0,0,.2); border-radius:10px}
.lightbox-close, .lightbox-prev, .lightbox-next{position:fixed; top:24px; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.18); color:#fff; width:40px; height:40px; border-radius:8px; display:grid; place-items:center; cursor:pointer}
.lightbox-close{right:24px; font-size:24px; line-height:1}
.lightbox-prev{left:24px; top:50%; transform:translateY(-50%); font-size:28px}
.lightbox-next{right:24px; top:50%; transform:translateY(-50%); font-size:28px}

/* ===== Footer ===== */
.site-footer{padding:24px 0; border-top:1px solid #ededf4; background:#fafafe; color:#6b6b78}
.site-footer p{margin:0; text-align:center}

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; 
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}