/* ============ TOKENS ============ */
  :root{
    --bg:#FFFFFF;
    --bg-alt:#F1F1F1;
    --ink:#0D0D0D;
    --ink-soft:#454545;
    --ink-faint:#8C8C8C;
    --gold:#F5C400;
    --gold-deep:#A8790A;
    --line:#E2E2E2;
    --card:#FFFFFF;
    --shadow: 0 20px 50px -25px rgba(13,13,13,0.35);
    --radius: 2px;
    --maxw: 1240px;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; 
  scroll-behavior: smooth;
  scroll-padding-top: 90px;   /* matches your nav-inner height */}
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; 
    scroll-behavior: smooth;
  scroll-padding-top: 90px;   /* matches your nav-inner height */}
    *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  }
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'Inter',sans-serif; font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Archivo',sans-serif; font-weight:900;
    letter-spacing:-0.01em; margin:0; color:var(--ink);
  }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  button{ font-family:inherit; cursor:pointer; }
  .container{ max-width:var(--maxw); margin:0 auto; padding:0 40px; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px;
    letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-deep);
    margin-bottom:14px;
  }
  .eyebrow::before{ content:''; width:22px; height:1px; background:var(--gold-deep); }
  .section-head{ text-align:center; margin:0 auto 56px; max-width:640px; }
  .section-head h2{ font-size:clamp(30px,4vw,44px); text-transform:uppercase; }
  .underline{
    display:block; width:56px; height:3px; background:var(--gold);
    margin:16px auto 0;
  }
  .section-head.left{ text-align:left; margin-left:0; }
  .section-head.left .underline{ margin:16px 0 0; }

  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 28px; border:1px solid var(--ink); background:transparent;
    font-size:12.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--ink); transition:all .25s ease;
  }
  .btn:hover{ background:var(--ink); color:var(--bg); }
  .btn.gold{ border-color:var(--gold); color:var(--ink); background:var(--gold); }
  .btn.gold:hover{ background:var(--ink); color:var(--gold); border-color:var(--ink); }
  .btn.solid{ background:var(--ink); color:var(--bg); }
  .btn.solid:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
  .btn svg{ width:14px; height:14px; transition:transform .25s ease; }
  .btn:hover svg{ transform:translateX(3px); }

  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in-view{ opacity:1; transform:translateY(0); }

  /* ============ NAV ============ */
  .nav{
    position: fixed;      /* was: sticky */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 500;
    background: rgba(13,13,13,0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--gold);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
  }

  .nav.nav-visible{
    transform: translateY(0);
  }


  .nav-inner{
    height: 90px;        /* can now be bigger than the bar itself */
    width: auto;
    max-width:var(--maxw); margin:0 auto; padding:20px 40px;
    display:flex; align-items:center; justify-content:space-between;
  }

  .logo {
      display: flex;
      align-items: center;
  }

  .logo-img {
      height: 40px;        /* can now be bigger than the bar itself */
      width: auto;
      display: block;
      filter: brightness(0) invert(1);
  }

  .nav-links{ display:flex; align-items:center; gap:38px; list-style:none; margin:0; padding:0; }
  .nav-links a{
    font-size:12.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
    color:#FFFFFF; padding-bottom:6px; border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
  }
  .nav-links a:hover, .nav-links a.active{ color:var(--gold); border-color:var(--gold); }
  .burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
  .burger span{ width:24px; height:2px; background:#FFFFFF; }
  .mobile-menu{
    display:none; position:fixed; inset:0; background:var(--bg); z-index:600;
    flex-direction:column; align-items:center; justify-content:center; gap:30px;
  }
  .mobile-menu.open{ display:flex; }
  .mobile-menu a{ font-size:20px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; }
  .mobile-close{ position:absolute; top:26px; right:32px; background:none; border:none; font-size:28px; color:var(--ink); }

  /* ============ HERO ============ */
    .hero{
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-inner{
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 40px;
      width: 100%;
      display: flex;
      justify-content: center;
      text-align: center;   /* optional, if you want centered text too */
    }

    .hero-inner > div{
      max-width: 700px;     /* keeps the text block from stretching edge to edge */
    }
    .hero h1{
      font-size: clamp(46px,7vw,84px);
      line-height: 0.98;
      text-transform: uppercase;
      margin: 14px 0 0;
      color: #FFFFFF;
    }
    .hero-rule{
      width: 70px;
      height: 3px;
      background: var(--gold);
      margin: 26px auto;   /* auto on left/right centers it */
    }
    .hero p.lede{
      font-size: 17px;
      color: rgba(255,255,255,0.78);
      max-width: 340px;
      margin: 0 auto 34px;   /* auto left/right centers it, keeps bottom spacing */
      text-align: center;     /* centers the text lines within the block too */
    }
    .hero-cta-row{ margin-bottom:46px; }
    .hero-tag{ font-size:12px; font-weight:700; letter-spacing:0.16em; color: rgba(255,255,255,0.78); text-transform:uppercase; }
    .hero-script{
      font-family:'Playfair Display',serif; font-style:italic; font-size:32px; color:var(--gold-deep); margin-top:4px;
    }
    .hero-media{ position:relative; }

    .hero-media::before{
      content:'';
      position:absolute; inset:0;
      background:linear-gradient(90deg, var(--bg) 0%, rgba(255,255,255,0) 22%);
      z-index:1;
      pointer-events:none;
    }

    .hero-media img{ width:100%; height:560px; object-fit:cover; border-radius:var(--radius); }

    .hero-media::after{
      content:''; position:absolute; inset:0; border:1px solid var(--gold);
      margin:14px; pointer-events:none;
      z-index:2;   /* keeps the gold border frame above the new gradient */
      border: none;
    }

    
  

  /* ============ WORK / FEATURED ============ */
  .work{ padding:100px 0; background:var(--bg); }
  .tabs{ display:flex; justify-content:center; gap:14px; margin-bottom:56px; }
  .tab-btn{
    padding:13px 30px; border:1px solid var(--ink); background:transparent;
    font-size:12.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink);
    transition:all .25s ease;
  }
  .tab-btn.active{ background:var(--ink); color:var(--gold); }
  .tab-btn:not(.active):hover{ border-color:var(--gold); color:var(--gold-deep); }

  .panel{ display:none; }
  .panel.active{ display:block; animation:fadein .4s ease; }
  @keyframes fadein{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

  /* Videography grid */
  .video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  .video-card{ cursor:pointer; }
  .video-thumb{
    position:relative; overflow:hidden; aspect-ratio:4/3; margin-bottom:16px;
  }
  .video-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
  .video-card:hover .video-thumb img{ transform:scale(1.06); }
  .play-btn{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:58px; height:58px; border-radius:50%; background:rgba(13,13,13,0.6);
    border:1.5px solid #fff; display:flex; align-items:center; justify-content:center;
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .video-card:hover .play-btn{ background:var(--gold); border-color:var(--gold); transform:translate(-50%,-50%) scale(1.08); }
  .video-card:hover .play-btn svg{ fill:var(--ink); }
  .play-btn svg{ width:16px; height:16px; fill:#fff; margin-left:3px; }
  .video-card h3{ font-size:15px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:5px; }
  .video-card .yr{ font-size:12.5px; color:var(--ink-faint); }

  /* Photography events */
  .event-block{ margin-bottom:74px; }
  .event-block:last-child{ margin-bottom:0; }
  .event-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:20px;
    margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid var(--line);
  }
  .event-head h3{ font-size:20px; text-transform:uppercase; letter-spacing:0.01em; }
  .event-head .yr{ font-size:12.5px; letter-spacing:0.1em; color:var(--gold-deep); font-weight:700; }
  .photo-mosaic{
    display:grid; gap:14px;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:repeat(2,180px);
  }
  .photo-mosaic figure{ margin:0; overflow:hidden; position:relative; cursor:pointer; }
  .photo-mosaic figure img{ width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
  .photo-mosaic figure:hover img{ transform:scale(1.08); }
  .photo-mosaic figure::after{
    content:'\2197'; position:absolute; top:12px; right:12px; width:30px; height:30px;
    border-radius:50%; background:var(--gold); color:var(--ink);
    display:flex; align-items:center; justify-content:center; font-size:15px;
    opacity:0; transition:opacity .25s ease;
  }
  .photo-mosaic figure:hover::after{ opacity:1; }
  .photo-mosaic figure.large{ grid-column:span 2; grid-row:span 2; }
  .photo-mosaic figure.tall{ grid-row:span 2; }

  .view-all{ text-align:center; margin-top:56px; }

  /* ============ ABOUT ============ */
  .about{ padding:100px 0; background:var(--bg-alt); }
  .about-inner{
    max-width:var(--maxw); margin:0 auto; padding:0 40px;
    display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center;
  }
  .about-media img{ width:100%; height:520px; object-fit:cover; }
  .about h2{ font-size:clamp(28px,3.6vw,40px); text-transform:uppercase; margin-bottom:20px; }
  .about p.lede{ color:var(--ink-soft); max-width:520px; margin-bottom:40px; }
  .stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .stat{ text-align:left; padding-right:10px; }
  .stat svg{ width:26px; height:26px; color:var(--gold-deep); margin-bottom:12px; }
  .stat .num{ font-family:'Archivo',sans-serif; font-weight:900; font-size:30px; }
  .stat .label{ font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin-top:4px; }

  /* ============ SERVICES ============ */
  .services{ padding:100px 0; }
  .service-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:0; }
  .service{
    padding:0 22px; border-right:1px solid var(--line);
    text-align:left;
  }
  .service:last-child{ border-right:none; }
  .service svg{ width:34px; height:34px; color:var(--gold-deep); margin-bottom:20px; }
  .service h3{ font-size:14.5px; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:10px; }
  .service p{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; }

  /* ============ CLIENTS STRIP ============ */
  .clients{ padding:56px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .clients-inner{ display:flex; align-items:center; gap:44px; flex-wrap:wrap; justify-content:space-between; }
  .clients .tag{ font-size:11.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; }
  .client-names{ display:flex; gap:44px; flex-wrap:wrap; }
  .client-names span{ font-family:'Archivo',sans-serif; font-weight:700; font-size:16px; letter-spacing:0.03em; color:var(--ink-soft); opacity:0.75; }

  /* ============ CONTACT ============ */
  .contact{ position:relative; padding:110px 0; overflow:hidden; }
  .contact-bg{ position:absolute; inset:0; z-index:0; }
  .contact-bg img{ width:100%; height:100%; object-fit:cover; }
  .contact-bg::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(100deg, rgba(13,13,13,0.94) 30%, rgba(13,13,13,0.72) 55%, rgba(13,13,13,0.5) 100%);
  }
  .contact-inner{
    position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 40px;
    display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px;
  }
  .contact-left .eyebrow{ color:var(--gold); }
  .contact-left .eyebrow::before{ background:var(--gold); }
  .contact-left h2{ color:#fff; font-size:clamp(30px,4vw,42px); text-transform:uppercase; margin-bottom:18px; }
  .contact-left p{ color:rgba(255,255,255,0.72); max-width:380px; margin-bottom:34px; }
  .contact-info{ list-style:none; margin:0 0 34px; padding:0; display:flex; flex-direction:column; gap:16px; }
  .contact-info li{ display:flex; align-items:center; gap:14px; color:#fff; font-size:15px; }
  .contact-info svg{ width:18px; height:18px; color:var(--gold); flex-shrink:0; }
  .socials{ display:flex; gap:14px; }
  .socials a{
    width:38px; height:38px; border:1px solid rgba(255,255,255,0.35); border-radius:50%;
    display:flex; align-items:center; justify-content:center; transition:all .25s ease;
  }
  .socials a:hover{ background:var(--gold); border-color:var(--gold); }
  .socials a:hover svg{ color:var(--ink); }
  .socials svg{ width:16px; height:16px; color:#fff; }

  .contact-form{
    background:rgba(255,255,255,0.98); padding:44px; box-shadow:var(--shadow);
  }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .field{ margin-bottom:20px; }
  .field label{
    display:block; font-size:11.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--ink-soft); margin-bottom:8px;
  }
  .field input, .field select, .field textarea{
    width:100%; border:none; border-bottom:1.5px solid var(--line); background:transparent;
    padding:11px 2px; font-family:'Inter',sans-serif; font-size:15px; color:var(--ink);
    transition:border-color .2s ease;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--gold);
  }
  .field textarea{ resize:vertical; min-height:100px; }
  .form-note{ font-size:12.5px; color:var(--ink-faint); margin-top:6px; }
  .form-status{
    display:none; padding:14px 16px; margin-bottom:20px; font-size:13.5px;
    background:var(--bg-alt); border-left:3px solid var(--gold); color:var(--ink-soft);
  }
  .form-status.show{ display:block; }
  .submit-btn{ width:100%; justify-content:center; padding:16px; }

  /* ============ LIGHTBOX ============ */
  .lightbox{
    position:fixed; inset:0; background:rgba(8,8,8,0.96); z-index:1000;
    display:none; align-items:center; justify-content:center; padding:40px;
  }
  .lightbox.open{ display:flex; }
  .lightbox-inner{ max-width:900px; width:100%; }
  .lightbox-inner img, .lightbox-inner video{ width:100%; max-height:78vh; object-fit:contain; background:#000; }
  .yt-embed{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
  .yt-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .lightbox-cap{ color:#fff; margin-top:16px; font-size:14px; letter-spacing:0.04em; text-align:center; opacity:0.8; }
  .lightbox-close{
    position:absolute; top:28px; right:36px; background:none; border:none; color:var(--gold);
    font-size:32px; line-height:1;
  }

  /* ============ FOOTER ============ */
  .site-footer{ padding:30px 0; background:var(--ink); }
  .footer-inner{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
    font-size:12.5px; color:rgba(255,255,255,0.55);
  }
  .footer-links{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
  .footer-links a{ text-transform:uppercase; letter-spacing:0.08em; font-size:11.5px; color:rgba(255,255,255,0.8); }
  .footer-links a:hover{ color:var(--gold); }
  .back-top{ display:flex; align-items:center; gap:8px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; font-size:11.5px; color:var(--gold); }
  .back-top svg{ width:13px; height:13px; }

  /* ============ RESPONSIVE ============ */
  @media (max-width:980px){
    .nav-links{ display:none; }
    .burger{ display:flex; }
    .hero-inner{ grid-template-columns:1fr; }
    .hero-media img{ height:380px; }
    .about-inner{ grid-template-columns:1fr; }
    .about-media img{ height:360px; }
    .service-grid{ grid-template-columns:repeat(3,1fr); }
    .service{ border-right:none; border-bottom:1px solid var(--line); padding:26px 10px; }
    .contact-inner{ grid-template-columns:1fr; }
    .video-grid{ grid-template-columns:repeat(2,1fr); }
    .photo-mosaic{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,160px); }
    .photo-mosaic figure.large{ grid-column:span 2; grid-row:span 1; }
    .photo-mosaic figure.tall{ grid-row:span 1; }
    .photo-mosaic figure img{ object-position:top; }

  }
  @media (max-width:600px){
    .container, .hero-inner, .about-inner, .contact-inner, .nav-inner{ padding-left:22px; padding-right:22px; }
    .service-grid{ grid-template-columns:repeat(2,1fr); }
    .video-grid{ grid-template-columns:1fr; }
    .form-row{ grid-template-columns:1fr; }
    .stat-row{ grid-template-columns:repeat(2,1fr); row-gap:24px; }
    .clients-inner{ flex-direction:column; align-items:flex-start; gap:20px; }
    .contact-form{ padding:28px; }
  }

  @media (min-width:601px) and (max-width:980px){
    .photo-mosaic figure img{ object-position:center 30%; }
  }

  /* Hero Section */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Background Video */
.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -2;

    /* Make the video grayscale */
    filter: grayscale(100%);
}

/* Optional dark overlay for readability */
.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: -1;
}

/* Content */
.content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}