:root{
  --yellow: #ffcc00;
  --black: #222222;
  --dark: #222222;
  --white: #fff;
  --text: #fff;
  --borderYellow: #ffcc00;
  --maxw: clamp(1080px, 85vw, 1440px);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: Montserrat, system-ui, sans-serif;
  color:#222;
  background:#222;
}

header{
  background: var(--yellow);
  border-bottom: 4px solid #222;
}

.nav{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  gap:18px;
}

.nav-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width: 280px;
}

.avatar{
  width:100px;
  height:100px;
  border-radius:50%;
  overflow:hidden;
  flex:0 0 auto;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }

.name{
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 44px;
  letter-spacing: 1.5px;
  color:#fff;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
  white-space:nowrap;
}

.nav-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:26px;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 22px;
  text-transform: uppercase;
  color:#fff;
  letter-spacing: .6px;
}

.nav-right a{
  color:#fff;
  text-decoration:none;
  position: relative;   
  padding-bottom: 0;    
}

.nav-right a.active{
  border-bottom: none;
}

.nav-right a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:3px;
  background:#fff;
  bottom: 0px;
}


.contact-btn{
  background:#222;
  color:#fff !important;
  padding:8px 14px;
  border-radius:12px;
  font-weight:400;
  border:2px solid #222;
  line-height:1;
  display:inline-block;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: .6px;
  font-size: 22px;
}

.nav-right a.contact-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 14px 0px; 

  line-height: 1;

  transform: translateY(-2px);
}

main{
  background: var(--dark);
  border-top: 6px solid #222;
  border-bottom: 6px solid #222;
}

.main-wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 58% 42%;
  min-height: 520px;
}

.left-panel{
  background:#222;
  padding:0;
  border-right: 6px solid #222;
  display:flex;
  align-items:center;
  justify-content:center;
}

.image-frame{
  width: 95%;
  height: 92%;
  background:#cfefff;
  border: 4px solid var(--borderYellow);
  border-radius: 16px;
  position:relative;
  overflow:hidden;
}

.image-frame img{
  width:100%; height:100%; object-fit:cover;
}

.right-panel{
  padding: 54px 40px;
  color: var(--text);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  text-align:center;
}

.right-panel h2{
  font-family: "Bebas Neue", sans-serif;
  font-size: 46px;
  letter-spacing: 1.5px;
  margin: 10px 0 18px;
  text-transform: uppercase;
  color:#fff;
  font-weight:400;
}

.right-panel p{
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  margin:0 auto;
  max-width: var();
  color:#fff;
  font-weight:400;
}

/* ===== Footer ===== */
.footer-strip{
  background:#fff;
  border-top: 6px solid #222;
  padding: 18px 0;
}

.footer-wrap{
  max-width: var(--maxw);
  margin:0 auto;
  padding: 8px 18px;
  display:grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items:center;
  gap:12px;
}

.footer-left{
  display:flex; align-items:center; gap:10px;
}

.footer-avatar{
  width:70px; height:70px; border-radius:100%;
  overflow:hidden; 
}
.footer-avatar img{ width:100%; height:100%; object-fit:cover; }

.footer-center{
  text-align:center;
  font-family: "Bebas Neue", sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#222222;
  display:flex;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
  font-size: 20px;
}

.footer-center a{
  color:#222;
  text-decoration:none;
  border-bottom: 3px solid transparent;
  padding-bottom:2px;
}

.footer-center a.active{
  border-bottom-color:#222;
}

.footer-center a.yellow{
  color: var(--yellow);
  border-bottom-color: transparent;
}

.footer-right{
  text-align:right;
  font-family: "Bebas Neue", sans-serif;
  font-weight:400;
  text-transform:uppercase;
  color: var(--yellow);
  font-size: 20px;
  letter-spacing: 1px;
}

@media (max-width: 1080px){
  .nav{ flex-wrap:wrap; }
  .nav-left{ min-width:auto; }
  .name{ font-size:36px; }
  .nav-right{ font-size:20px; gap:16px; }

  .main-wrap{ grid-template-columns:1fr; }
  .left-panel{ min-height:320px; border-right:none; border-bottom:6px solid #222; }
  .right-panel{ padding:38px 22px; }
}

@media (max-width: 520px){
  .avatar{ width:56px; height:56px; }
  .name{ font-size:30px; }
  .nav-right{ font-size:18px; }
  .right-panel h2{ font-size:38px; }
}

.cards-section{
  background: var(--dark);
  padding: 26px 0 34px;
  border-top: 6px solid #222;
}

.cards-wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 18px;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* Card container: similar to your style, but rounded + modern like the example */
.card{
  display: block;
  text-decoration: none;
  color: inherit;

  background: #2a2a2a;
  border: 2px solid #1b1b1b;
  border-radius: 18px;
  overflow: hidden;

  /* subtle depth, keeps the “card” feel */
  box-shadow: 0 10px 22px rgba(0,0,0,.35);

  /* small hover polish */
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
}

/* Fixed ratio media area */
.card-media{
  width: 100%;
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;

  border: 4px solid var(--borderYellow);
  border-radius: 16px;
  background: #111;

  transition: border-color .45s cubic-bezier(.2,.8,.2,1) .05s;
}

.card:hover .card-media{
  border-color: #fff;
}

/* KEY: force the image to fill the ratio box */
.card-media img{
  position: relative;
  overflow: hidden;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;

  transition: transform .9s ease;
}

/* Hover zoom */
.card:hover .card-media img{
  transform: scale(1.08);
}

.card-media::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(
    315deg,
    rgba(255, 204, 0, 1) 0%,
    rgba(255, 204, 0, 0) 65%
  );
}

.card-media::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background: linear-gradient(
    315deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 65%
  );

  opacity: 0;
  transition: opacity .45s cubic-bezier(.2,.8,.2,1);
}


.card:hover .card-media::after{
  opacity: 1;
}

/* Wrap each card + title as one grid item */
.card-item{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Centered text above each card */
.card-title{
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 44px;
  color: #fff;

  text-align: center;
  margin: 0 0 10px;
}

.collage{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 18px;

  display: grid;

  /* tighter, more predictable columns (prevents 6+ tiny columns on wide screens) */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));


  grid-auto-rows: 10px;
  gap: 16px;

  /* IMPORTANT: lets the grid backfill holes */
  grid-auto-flow: dense;

  align-content: start;
}

/* Masonry magic */
.collage img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;

  grid-row-end: span 15; /* fallback */
	
  transition: filter .25s ease;
}

.collage:hover img{
  filter: brightness(.25);
}

.collage img:hover{
  filter: brightness(1);
}

/* ===== Lightbox ===== */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 9999;
}

.lightbox.open{
  opacity: 1;
  pointer-events: auto;
}

.lightbox img{
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  background: #222;
}

/* ===== Video Embed ===== */
.video-section{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 18px;
	
  display: grid;
  gap: 32px;
}

.video-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;

  background: #222;
  border-width: 6px;
  border-color: #ffcc00;
  border-radius: 16px;
  overflow: hidden;

  box-shadow: 0 14px 36px rgba(0,0,0,.45);
}

.video-frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Hide checkbox */
.nav-toggle{
  display:none;
}

/* Hide hamburger by default */
.nav-toggle-label{
  display:none;
  margin-left:auto;
  width:44px;
  height:36px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-direction:column;
}

.nav-toggle-label span{
  width:30px;
  height:3px;
  background:#fff;
  border-radius:2px;
}

/* MOBILE */
@media (max-width: 520px){

  /* show hamburger */
  .nav-toggle-label{
    display:flex;
  }

  /* animated dropdown menu */
  .nav-right{
    width:100%;
    display:flex;                 /* keep it renderable */
    flex-direction:column;
    align-items:center;
    gap:14px;
    padding-top:10px;

    /* closed state */
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    overflow: hidden;
    pointer-events: none;

    transition:
      max-height .35s ease,
      opacity .25s ease,
      transform .25s ease;
  }

  /* open state */
  .nav-toggle:checked ~ .nav-right{
    max-height: 420px;            /* must be tall enough for all links */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* hamburger line animation */
  .nav-toggle-label span{
    transition: transform .25s ease, opacity .25s ease;
  }

  .nav-toggle:checked + .nav-toggle-label span:nth-child(1){
    transform: translateY(9px) rotate(45deg);
  }
  .nav-toggle:checked + .nav-toggle-label span:nth-child(2){
    opacity:0;
  }
  .nav-toggle:checked + .nav-toggle-label span:nth-child(3){
    transform: translateY(-9px) rotate(-45deg);
  }
}


/* Responsive behavior */
@media (max-width: 1080px){
  .cards-wrap{
    grid-template-columns: 1fr;
  }
  .card-media{
    margin: 12px;
  }
  .nav{
    flex-wrap: wrap;
  }
  .nav-left{
    min-width: 0;
  }
}