/* ============ HERO ============ */
.hero{
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  padding:0 48px 64px;
  background:var(--bg);
}
.hero-meta{
  font-family:'JetBrains Mono',monospace;
  font-size:0.75rem;
  color:var(--ink-dim);
  letter-spacing:0.05em;
  margin-bottom:24px;
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  opacity:0;
  animation:fadeUp 1s ease 0.6s forwards;
}
.hero-title{
  font-family:'Archivo',sans-serif;
  font-weight:100;
  font-size:clamp(3rem, 11vw, 8rem);
  line-height:0.95;
  letter-spacing:-0.02em;
  opacity:0;
  animation:fadeUp 1s ease 0.2s forwards;
}
.hero-title em{
  font-style:normal;
  font-weight:900;
  color:var(--accent);
}
.hero-sub{
  font-size:1.05rem;
  color:var(--ink-dim);
  max-width:480px;
  margin-top:24px;
  line-height:1.6;
  opacity:0;
  animation:fadeUp 1s ease 0.9s forwards;
}
.scroll-hint{
  position:absolute;
  bottom:64px; right:48px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.75rem;
  color:var(--ink-dim);
  display:flex; align-items:center; gap:10px;
  writing-mode:vertical-rl;
  opacity:0;
  animation:fadeUp 1s ease 1.2s forwards;
}
.scroll-hint::after{
  content:'';
  width:1px; height:48px;
  background:var(--ink-dim);
  display:block;
}

/* ============ CATEGORY CARDS (homepage) ============ */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:16px;
}
.cat-card{
  position:relative;
  overflow:hidden;
  border-radius:2px;
  cursor:pointer;
  background:var(--bg-soft);
  text-decoration:none;
  color:var(--ink);
  display:block;
}
.cat-card img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.8s cubic-bezier(.16,1,.3,1), filter 0.6s ease;
  filter:grayscale(15%) brightness(0.85);
}
.cat-card:hover img{
  transform:scale(1.05);
  filter:grayscale(0%) brightness(1);
}
.cat-card:nth-child(1){grid-column:span 4; grid-row:span 2;}
.cat-card:nth-child(2){grid-column:span 2; aspect-ratio:1/1;}
.cat-card:nth-child(3){grid-column:span 2; aspect-ratio:1/1;}
.cat-card:nth-child(4){grid-column:span 2; grid-row:span 2; aspect-ratio:auto;}
.cat-card:nth-child(5){grid-column:span 3; aspect-ratio:4/3;}
.cat-card:nth-child(6){grid-column:span 3; aspect-ratio:4/3;}

.cat-card-label{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:24px;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);
}
.cat-card-name{
  font-family:'Archivo',sans-serif;
  font-size:1.6rem;
  font-weight:200;
  margin-bottom:6px;
  transition:color 0.3s ease;
}
.cat-card:hover .cat-card-name{color:var(--accent);}
.cat-card-arrow{
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-dim);
  display:flex;
  align-items:center;
  gap:8px;
  transition:gap 0.3s ease;
}
.cat-card:hover .cat-card-arrow{gap:14px;}

/* ============ ABOUT ============ */
.about{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:80px;
  align-items:center;
}
.about-img{
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:2px;
}
.about-img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(20%);
}
.about-text p{
  font-size:1.15rem;
  line-height:1.85;
  color:var(--ink-dim);
  margin-bottom:24px;
}
.about-text p:first-child{
  font-family:'Archivo',sans-serif;
  font-size:1.7rem;
  font-weight:300;
  color:var(--ink);
  line-height:1.5;
}
.about-text em{color:var(--accent); font-style:normal; font-weight:700;}
.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:48px;
  padding-top:32px;
  border-top:1px solid var(--line);
}
.stat-num{
  font-family:'Archivo',sans-serif;
  font-size:2.2rem;
  font-weight:300;
  color:var(--accent);
}
.stat-label{
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;
  color:var(--ink-dim);
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-top:4px;
}

/* ============ VIDEO CATEGORY GRID (photo tiles with overlaid label) ============ */
.video-cat-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.video-cat-tile{
  aspect-ratio:1/1;
  background:var(--bg-soft);
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:28px;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.video-cat-tile:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(0,0,0,0.35);
}
.video-cat-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1;
  filter:saturate(1.05);
  transition:transform 0.5s cubic-bezier(.16,1,.3,1);
  z-index:0;
}
.video-cat-tile:hover .video-cat-bg{
  transform:scale(1.06);
}
/* Full-tile scrim (text is centered now, not bottom-anchored, so the
   darkening needs to cover the whole frame rather than just the base). */
.video-cat-tile::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(10,10,10,0.5);
  z-index:1;
  pointer-events:none;
  transition:background 0.3s ease;
}
.video-cat-tile:hover::after{
  background:rgba(10,10,10,0.62);
}
.video-cat-name{
  font-family:'Archivo',sans-serif;
  font-weight:200;
  font-size:clamp(1.3rem, 3.1vw, 2.05rem);
  line-height:1.05;
  letter-spacing:-0.01em;
  color:var(--ink);
  position:relative;
  z-index:2;
  text-align:center;
  width:100%;
  transition:color 0.3s ease;
}
.video-cat-name em{
  font-style:normal;
  font-weight:900;
  color:var(--accent);
  transition:color 0.3s ease;
}
.video-cat-tile:hover .video-cat-name em{
  color:var(--ink);
}

/* ============ SERVICES ============ */
.services-list{
  border-top:1px solid var(--line);
}
.service-row{
  display:grid;
  grid-template-columns:80px 1fr 320px;
  gap:32px;
  padding:36px 0;
  border-bottom:1px solid var(--line);
  align-items:center;
  transition:padding-left 0.4s ease;
}
.service-row:hover{padding-left:16px;}
.service-num{
  font-family:'JetBrains Mono',monospace;
  color:var(--ink-dim);
  font-size:0.85rem;
}
.service-name{
  font-family:'Archivo',sans-serif;
  font-size:clamp(1.4rem, 3vw, 2.2rem);
  font-weight:200;
}
.service-row:hover .service-name{color:var(--accent);}
.service-desc{
  color:var(--ink-dim);
  font-size:0.9rem;
  line-height:1.7;
}

/* ============ CONTACT ============ */
.contact{
  text-align:center;
  padding-top:80px;
}
.contact-title{
  font-family:'Archivo',sans-serif;
  font-size:clamp(2.5rem, 8vw, 6rem);
  font-weight:300;
  line-height:1.05;
  margin-bottom:32px;
}
.contact-title em{font-style:normal; font-weight:900; color:var(--accent);}
.contact-email{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:1.1rem;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--accent);
  padding-bottom:6px;
  margin-bottom:64px;
  transition:color 0.3s ease;
}
.contact-email:hover{color:var(--accent);}
.contact-grid{
  display:flex;
  justify-content:center;
  gap:48px;
  flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;
  font-size:0.8rem;
  color:var(--ink-dim);
  letter-spacing:0.05em;
}
.contact-grid a{color:var(--ink-dim); text-decoration:none; transition:color 0.3s ease;}
.contact-grid a:hover{color:var(--accent);}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .cat-card:nth-child(1){grid-column:span 2; grid-row:span 1; aspect-ratio:4/3;}
  .cat-card:nth-child(4){grid-column:span 2; grid-row:span 1; aspect-ratio:4/3;}
  .cat-card:nth-child(2),.cat-card:nth-child(3),
  .cat-card:nth-child(5),.cat-card:nth-child(6){grid-column:span 1;}
  .about{grid-template-columns:1fr; gap:48px;}
  .about-img{aspect-ratio:16/10;}
  .service-row{grid-template-columns:50px 1fr; }
  .service-desc{display:none;}
  .hero{padding:0 24px 48px;}
  .scroll-hint{display:none;}
  .video-cat-grid{grid-template-columns:repeat(2,1fr);}
}