@charset "utf-8";

/* CSS Document */

:root {
  --gold: #c9a94a;
  --gold-hover: #e6c772;
}

body {
  margin: 0;
  font-family: 'Helvetica Neue', sans-serif;
  background-color: #0f0f0f;
  color: #ffffff;
  padding-top: 100px; /* Adjust if nav height changes */ 	
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;

}

body.loaded {
  opacity: 1;
  transform: translateY(0);
}

/* 🔥 Start Procineum Animation Engine */

.section-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.section-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

.gallery-section img {
  opacity: 0;
  transform: scale(0.97) translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.gallery-section img.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.pricing-details {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.pricing-details.visible {
  opacity: 1;
  transform: translateY(0);
}

/* HEADER */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #000;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Brand (Left Side) */
.brand {
  display: flex;
  align-items: center;
}

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

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

.logo-image {
  height: 6rem; /* Adjust as needed */
  width: auto;
  display: block;
}

.brand-name {
  font-size: 1.6rem;
  font-weight: 600;
  color: #ffffff;
}



/* Center nav inside header */
.main-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2rem;
}

.main-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size:2.2rem;
  transition: color 0.3s ease;
}

.main-nav a:hover {
  color: var(--gold);
}

.main-nav a::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--gold-hover);
  width: 0%;
  transition: width 0.3s ease;
  margin-top: 5px;
}

.main-nav a:hover::after {
  width: 100%;
}

/* Book Now Button (far right) */
.book-now-btn {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--gold);
  color: #000;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-weight: bold;
  font-size:1.5rem;
  text-decoration: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.book-now-btn:hover {
  background-color: var(--gold-hover);
  box-shadow: 0 0 10px var(--gold-hover);
}

/* Hamburger Icon Styles */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  z-index: 1001;
  margin-right: 1rem;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: var(--gold);
  display: block;
  transition: all 0.3s ease;
}

/* Mobile Navigation Styles */
.mobile-nav {
  display: none;
  flex-direction: column;
  background-color: #000;
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  text-align: center;
  z-index: 1000;
  padding: 1rem 0;
}

.mobile-nav a {
  color: #fff;
  padding: 1rem;
  text-decoration: none;
  font-size: 1.5rem;
  border-bottom: 1px solid #333;
}

.mobile-nav a {
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.mobile-nav a:hover,
.mobile-nav a:active {
  background-color: #111;
  transform: scale(1.05);
}

.book-now-btn-mobile {
  background-color: var(--gold);
  color: #000;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  display: inline-block;
  margin-top: 1rem;
  font-weight: bold;
}

/* Show hamburger and mobile nav on smaller screens */
@media (max-width: 768px) {
  .main-nav, .book-now-btn {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .mobile-nav.open {
    display: flex;
  }
}

.hero {
  position: relative;
  height: 75vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(0.4); /* makes text more visible */
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 2rem;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.hero-content button {
  background-color: var(--gold);
  color: #000;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

/* ─── Move main-page hero text down ───────────────────────────────── */
/* only on home page */
body.home-page section.hero .hero-content {
  margin-top: 20vh;    /* adjust as needed */
}

//* ─── MOBILE: Lower Hero Text Below Mobile Nav ───────────────── */
/* Re-center hero only on tablets (769px–1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  body.home-page section.hero .hero-content {
    margin-top: 0;  /* no !important needed if placed after the other rules */
  }
}

/* ─── HOME PAGE: Center hero text on phones (≤768px) ───────── */
@media (max-width: 768px) {
  body.home-page section.hero .hero-content {
    margin-top: 10vh !important;
  }
}


/* ─── Film Highlight Section ───────────────────────────────────── */
.film-highlight {
  background-color: #111;
  color: #fff;
  padding: 3rem 2rem;
}

.film-highlight-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  align-items: center;
}

/* two-column on desktop */
@media (min-width: 1024px) {
  .film-highlight-container {
    grid-template-columns: 1fr 1.3fr;
  }
}

/* text styling */
.film-highlight .highlight-text h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.film-highlight .highlight-text p {
  font-size: 1.2rem;
  line-height: 1.6;
}

/* image styling */
.film-highlight .highlight-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 0 0 2px var(--gold);
}

/* Optional: reuse your fade-in animation */
.film-highlight.section-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.film-highlight.section-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Highlight Image Hover Effect ─────────────────────────── */
.film-highlight .highlight-image {
  overflow: hidden;              /* contain the zoom */
  cursor: pointer;               /* indicates interactivity */
}

.film-highlight .highlight-image img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease, filter 0.5s ease;
}

/* on hover: zoom in slightly and brighten */
.film-highlight .highlight-image:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* ─── Film Highlight: Golden Border ─────────────────────────── */
.film-highlight .highlight-image {
  overflow: hidden;                  /* contain the border + zoom */
  border-radius: 14px;               /* match .photo-button radius */ :contentReference[oaicite:0]{index=0}
  box-shadow: 0 0 0 2px var(--gold); /* golden outline */ :contentReference[oaicite:1]{index=1}
  transition: box-shadow 0.3s ease;
}

.film-highlight .highlight-image:hover {
  box-shadow: 0 0 10px var(--gold-hover); /* glow on hover */
}

.vignette-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.vignette-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.3) 55%,
    rgba(0, 0, 0, 0.6) 75%,
    rgba(0, 0, 0, 0.8) 100%
  );
  mix-blend-mode: multiply;
}

button,
.hero-content button,
.service-button,
.gold-button {
  background-color: var(--gold);
  color: #000;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  font-size:1.5rem;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

button:hover,
.hero-content button:hover,
.service-button:hover,
.gold-button:hover {
 background-color: var(--gold-hover);
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}


.photo-button-grid {
  display: grid;
  gap: 2rem;
  padding: 3rem 2rem;
  margin: 0 auto;
  max-width: 1400px;

  /* Default: single column for mobile */
  grid-template-columns: 1fr;
  justify-items: center;
}

@media (min-width: 768px) {
  .photo-button-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .photo-button-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


.photo-button.horizontal-card {
  grid-column: 1 / -1; /* force it to span entire row */
  height: 200px;
  max-width: 100%;
  width: 100%;
  margin-top: 1rem;
}



.photo-button {
  position: relative;
  width: 100%;
  max-width: 600px; /* ↑ Make it WIDER */
  height: 800px;     /* ↑ Make it TALLER */
   text-align: center;	
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 0 0 2px var(--gold);
  transition: box-shadow 0.3s ease;
}


.photo-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.photo-button:hover img {
  transform: scale(1.05);
}

/* Horizontal version of photo-button */
.photo-button.horizontal-card {
  height: 200px; /* shorter than others */
  max-width: 1500px; /* spans more width */
  width: 100%;
  margin-top: 1rem;
}

.photo-action {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--gold);
  color: #000;
  padding: 0.75rem 1.5rem;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.photo-action:hover {
  background-color: var(--gold-hover);
  box-shadow: 0 0 10px var(--gold-hover);
}

/* Responsive scaling */
@media (max-width: 900px) {
  .photo-button {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 1920px) {
  .photo-button {
    height: 650px;
  }
}

@media (max-width: 1440px) {
  .photo-button {
    height: 500px;
  }
}

@media (max-width: 1024px) {
  .photo-button {
    height: 400px;
  }
}

  .photo-action {
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
  }

.photo-button-grid {
  display: grid;
  gap: 2rem;
  padding: 3rem 2rem;
  margin: 0 auto;
  max-width: 1400px;
  grid-template-columns: 1fr; /* Default: stacked on small screens */
  justify-items: center;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .photo-button-grid {
    grid-template-columns: 1fr; /* Force 1 column even on tablet */
  }
}

@media (min-width: 1024px) {
  .photo-button-grid {
    grid-template-columns: repeat(3, 1fr); /* Only allow 3 across on desktop */
  }
}


.services-overview .photo-button-grid {
  max-width: 10000px;
  margin: 0 auto;
}

.other-service-card {
  margin: 3rem auto 0 auto;
  max-width: 1000px;
  text-align: center;
}

.other-service-card a {
  text-decoration: none;
  display: block;
}

.card-image {
  height: 180px;
  width: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 0 2px var(--gold);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-label {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--gold);
  background-color: rgba(0, 0, 0, 0.6);
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.card-image:hover {
  transform: scale(1.02);
  box-shadow: 0 0 10px var(--gold-hover);
}

.card-image:hover .card-label {
  background-color: var(--gold);
  color: #000;
}

.about, .portfolio {
  padding: 4rem 2rem;
  text-align: center;
}

.gallery {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.gallery img {
  width: 300px;
  height: auto;
  border-radius: 8px;
  background-color: #222;
}

footer {
  background: #1a1a1a;
  text-align: center;
  padding: 1.5rem;
  font-size: 0.9rem;
}

.value-prop {
  text-align: center;
  padding: 4rem 2rem;
  background-color: #111;
  color: #fff;
}

.value-prop h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.value-prop p {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

.services-overview {
  text-align: center;
  padding: 1.5rem 2rem;
  background-color: #0e0e0e;
}

.services-overview h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: #fff;
}

.service-buttons {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.service-button {
  background-color: #1a1a1a;
  color: var(--gold);
  padding: 1.5rem 2rem;
  border: 2px solid var(--gold);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.service-button:hover {
  background-color: var(--gold-hover);
color: #000;
  transform: scale(1.05);
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.services-hero {
  background-color: #111;
  color: #fff;
  text-align: center;
  padding: 5rem 2rem;
}

.services-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.services-hero p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto;
}

.service-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.services-flex {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 4rem 2rem;
  background-color: #111;
}

.service-card {
  background-color: #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
  flex: 1 1 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.service-content {
  padding: 2rem 1.5rem;
}

.service-content h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.service-content p {
  font-size: 1rem;
  color: #ccc;
  margin-bottom: 1.5rem;
}


/* ─── SERVICES PAGE HERO OVERRIDES ─────────────────────────── */

/* ─── SERVICES PAGE: Full-Bleed Hero ───────────────────────── */
body.services-page .services-hero {
  /* remove that 2rem left/right gutter */
  padding: 0;
}

body.services-page .hero {
  height: 30vh;             /* was 75vh – adjust to taste */
  min-height: 300px;         /* never collapse too small */
}
body.services-page .hero-video {
  filter: brightness(0.35);  /* darken a bit for contrast */
}
body.services-page .hero-content {
  padding: 5.5rem;        /* tighten the content inset */
}

/* Optional: center the BOOK NOW button on services page only */
body.services-page .service-button {
  margin-top: 1.5rem;
  font-size: 1.25rem;
}

/* If you want to hide the Home-page hero text offset on Services: */
body.services-page section.hero .hero-content {
  margin-top: 0 !important;
}

/* ─── SERVICES PAGE HERO: Raise content on phones (≤768px) ───────── */
@media (max-width: 768px) {
  /* 1) Shrink the hero container so its content sits higher */
  body.services-page .hero {
    height: 50vh !important;      /* was 30vh on desktop/tablet */
    min-height: 250px;            /* keep a floor so video never vanishes */
  }

  /* 2) Reduce top/bottom padding on the full-bleed section */
  body.services-page .services-hero {
    
  }

  /* 3) Pull the .hero-content up even more, and tighten its inset */
  body.services-page .services-hero .hero-content {
    padding-top: 5rem !important;  /* nudge it up above center */
    
  }
}




/* ─── About Page Overrides ────────────────────────────────────── */
/* ─── About Page: remove gap under fixed nav ───────────────── */
body.about-page {
  padding-top: 0 !important;   /* kill the 100px push-down */
}

/* pull the hero up under the nav, and make it full-bleed */
body.about-page .hero {
  margin-top: -100px;           /* nav height (same amount you just removed) */
  height: 70vh !important;     /* fill the full viewport */
  min-height: 600px;            /* or whatever your lower bound is */
}

/* ─── Tablet (≤1024px): give it extra vertical space ─────────── */
@media (max-width: 1024px) {
  body.about-page .hero {
    margin-top: -100px;
	  height: 70vh;
    min-height: 600px;
  }
}

/* ─── Mobile (≤768px): really expand so text stays visible ────── */
@media (max-width: 768px) {
  body.about-page .hero {
    margin-top: -100px;
	  height: auto;
    min-height: 625px;
  }
  body.about-page .hero .hero-content {
    padding: 3rem 1rem;    /* tighten insets so text never gets lost */
  }
}

/* pull the hero up under the nav, and give your text some breathing room */
body.about-page .hero {
  margin-top: -100px;      /* keep it flush under the fixed header */
  height: 70vh !important; /* or whatever you had already */
  min-height: 600px;
}

/* ─── ABOUT PAGE: keep hero-content clear of fixed nav ───────────────── */
body.about-page .hero .hero-content {
  /* push down by approx. your header height (≈6rem) */
  padding-top: 18rem !important;
}

/* Mobile tweak: give it a bit more breathing room on phones */
@media (max-width: 768px) {
  body.about-page .hero .hero-content {
    padding-top: 15rem !important;
  }
}

/* 2) Tweak the photo-button grid spacing */
body.about-page .photo-button-grid {
  gap: 1.5rem;              /* tighten up or expand the gap */
  justify-content: center;  /* center the row */
  padding: 2rem 1rem;       /* adjust outer padding */
}

/* 3) Resize each card on About */
body.about-page .photo-button {
  max-width: 600px;         /* narrower than the 600px default */
  height: 800px;            /* shorter than the 800px default */
}

/* 4) Reposition the “Moyses/Alex/Chets” buttons */
body.about-page .photo-action {
  top: auto !important;     /* cancel top:50% */
  bottom: 1.5rem;           /* place 1.5rem up from bottom of card */
  left: 50%;                /* center horizontally */
  transform: translateX(-50%);
  padding: 0.5rem 3rem;     /* slightly smaller pill */
  font-size: 2.5rem;        /* tweak font-size if needed */
}

/* 5) Optional: adjust image cropping */
body.about-page .photo-button img {
  object-fit: cover;        /* ensure full coverage of new card size */
  height: 100%;
}

body.about-page .section-fade {
Margin-top: 0;	
	
	
}

/* ─── ABOUT PAGE: FORCE 3-COL LAYOUT & MOBILE TWEAKS ───────────────── */
@media (max-width: 1023px) {
  /* 1) Always show 3 across on About (override the 1-col tablet rule) */
  body.about-page .photo-button-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* 2) Cap each card’s width so they don’t overflow on small screens */
    body.about-page .photo-button {
    max-width: 300px    !important;  /* your chosen card width */
    width: 90%          !important;  /* fluid on small phones */
    aspect-ratio: 1 / 1 !important;  /* force a perfect square */
    height: auto        !important;  /* let the aspect-ratio govern height */
    margin: 0 auto 1.5rem !important;/* center + bottom gap */
    overflow: hidden     !important;
    border-radius: 8px   !important;
  }
  /* 3) Tweak the “Meet the Team” buttons for tablet/mobile */
  body.about-page .photo-action {
    padding: 0.5rem 1rem !important;
    font-size: 1.2rem !important;
  }
}

/* ─── ABOUT PAGE: stack team grid on phones (≤768px) ───────────────── */
@media (max-width: 768px) {
  body.about-page .photo-button-grid {
    grid-template-columns: 1fr !important;
  }
}



/* ABOUT PAGE: constrain the intro paragraph */
body.about-page .about.section-fade p {
  /* limit line length to ~60 characters for readability */
  max-width: 60ch;
  /* center the block in the viewport */
  margin: 0 auto 1rem;
  /* small side-padding so it never touches the edge on narrow screens */
  padding: 0 1rem;
  /* optional: tweak line-height for better readability */
  line-height: 2;
}


/* ─── ABOUT PAGE: Procineum Story – Social Icons ───────────────── */
body.about-page .about-story-social {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 2rem 0;    /* space above & below */
}

body.about-page .about-story-social a img {
  width: 32px;
  height: 32px;
  /* same gold-tint filter you use in the footer */
  filter:
    invert(74%) sepia(89%) saturate(350%)
    hue-rotate(2deg) brightness(95%)
    contrast(90%);
  transition: transform 0.3s ease;
}

body.about-page .about-story-social a:hover img {
  transform: scale(1.1);
}


/* Gold Button */
.gold-button {
  background-color: transparent;
  color: var(--gold);
border: 2px solid var(--gold);
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
}

.gold-button:hover {
  color: #000;
border: 2px solid var(--gold);
background-color: var(--gold);
}

/* Responsive Layout */
@media (max-width: 900px) {
  .services-flex {
    flex-direction: column;
    align-items: center;
  }

  .service-card {
    width: 100%;
    max-width: 500px;
  }

  .service-card img {
    height: 250px;
  }
}






/* hidden photography page section */


/* CATEGORY BUTTONS SHARED STYLE */
.category-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1rem;
  overflow: visible; /* Ensures hover expansion isn’t clipped */
}

.category-buttons button,
.category-buttons a {
  background-color: var(--gold);
  color: #000;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  display: inline-block;
}

.category-buttons button:hover,
.category-buttons a:hover {
  background-color: var(--gold-hover);
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}


/* Feather fade state */
.scroll-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== CLEANED GALLERY LAYOUT FOR portrait PAGE ===== */

.page-portraits .gallery-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  justify-content: center;
  padding: 2rem;
  max-width: 1366px;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 1s ease;
}


.page-portraits .gallery-section.visible {
  opacity: 1;
}

.page-portraits .gallery-section .portrait-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  height: auto;
  object-fit: cover;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
}

.page-portraits .gallery-section .portrait-image:hover{
  transform: scale(1.02);
  z-index: 1;
}

.page-portraits .gallery-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
  transition: max-height 0.8s ease;
   padding-bottom: 4rem; /* Ensures layout isn't cut off */
  z-index: 0; /* Ensure it establishes a new stacking context */
}

/* ===== CLEANED GALLERY LAYOUT FOR EVENT PAGE ===== */

.page-events .gallery-section {
  display: grid;
  grid-template-columns: 0fr 1fr 1fr;
  gap: 1rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 1s ease;
  align-items: start;
}

.page-events .gallery-section.visible {
  opacity: 1;
}

.page-events .gallery-section img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
}

.page-events .gallery-section img.portrait-left,
.page-events .gallery-section img.portrait-right,
.page-events .gallery-section img.portrait-image {
  max-height: 600px; /* Match your landscape max height */
  width: auto;
  object-fit: contain;
  align-self: center;
}

.page-events .gallery-section img:hover {
  transform: scale(1.02);
  z-index: 1;
}

.page-events .gallery-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
  transition: max-height 0.8s ease;
  padding-bottom: 4rem;
  z-index: 0;
}

/* ===== CLEANED GALLERY LAYOUT FOR Commercial PAGE ===== */

.page-commercial .gallery-section {
  display: grid;
  grid-template-columns: 0fr 1fr 1fr;
  gap: 1rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 1s ease;
  align-items: start;
}

.page-commercial .gallery-section.visible {
  opacity: 1;
}

.page-commercial .gallery-section img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
}

.page-commercial .gallery-section img.portrait-left,
.page-commercial .gallery-section img.portrait-right,
.page-commercial .gallery-section img.portrait-image {
  max-height: 600px; /* Match your landscape max height */
  width: auto;
  object-fit: contain;
  align-self: center;
}

.page-commercial .gallery-section img:hover {
  transform: scale(1.02);
  z-index: 1;
}

.page-commercial .gallery-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
  transition: max-height 0.8s ease;
  padding-bottom: 4rem;
  z-index: 0;
}

/* ===== CLEANED GALLERY LAYOUT FOR lifestyle PAGE ===== */

.page-lifestyle .gallery-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1rem;
  row-gap: 4.5rem; /* 👈 this is the key change */
  justify-content: center;
  padding: 2rem;
  max-width: 1366px;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 1s ease;
}

.page-lifestyle .gallery-section.visible {
  opacity: 1;
}

.page-lifestyle .gallery-section img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
}

.page-lifestyle .gallery-section img.portrait-left,
.page-lifestyle .gallery-section img.portrait-right,
.page-lifestyle .gallery-section img.portrait-image {
  max-height: 600px; /* Match your landscape max height */
  width: auto;
  object-fit: contain;
  align-self: center;
}

.page-lifestyle .gallery-section img:hover {
  transform: scale(1.05);
  z-index: 1;
}

.page-lifestyle .gallery-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
  transition: max-height 0.8s ease;
  padding-bottom: 4rem;
  z-index: 0;
}

@media (max-width: 1024px) {
  .page-lifestyle .gallery-section {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
  }
}

@media (max-width: 600px) {
  .page-lifestyle .gallery-section {
    grid-template-columns: 1fr; /* stack on mobile */
  }
}

/* ─── ONE-COLUMN GALLERY ON TABLETS (≤1024px) ───────── */
@media (max-width: 1024px) {
  body.page-portraits   .gallery-section,
  body.page-events      .gallery-section,
  body.page-commercial  .gallery-section,
  body.page-lifestyle   .gallery-section {
    grid-template-columns: 1fr !important;
    gap:                 1rem !important;
  }
  body.page-portraits   .gallery-section img,
  body.page-events      .gallery-section img,
  body.page-commercial  .gallery-section img,
  body.page-lifestyle   .gallery-section img {
    max-width: 90vw;
    margin:    0 auto;
    height:    auto;
  }
}

/* ─── ONE-COLUMN GALLERY ON TABLETS & PHONES (≤1024px) ───────── */
@media (max-width: 768px) {
  body.page-portraits .gallery-section,
  body.page-events   .gallery-section,
  body.page-commercial .gallery-section,
  body.page-lifestyle  .gallery-section {
    /* collapse everything into one column */
    grid-template-columns: 1fr !important;
    gap: 1rem            !important;
  }

  /* Optional: cap image width so they never overflow */
  body.page-portraits .gallery-section img,
  body.page-events   .gallery-section img,
  body.page-commercial .gallery-section img,
  body.page-lifestyle  .gallery-section img {
    max-width: 90vw;
    margin: 0 auto;
    height: auto;
  }
}

@media (max-width: 768px) {
  /* … your existing 1fr rule … */

  /* override all fade animations so nothing stays hidden */
  .gallery-section,
  .gallery-section img {
    opacity:   1 !important;
    transform: none !important;
  }
}


/* ─── PHONE-ONLY ADJUSTMENTS (≤768px) ───────── */
@media (max-width: 768px) {
  body.page-events  .gallery-section,
  body.page-commercial .gallery-section,
  body.page-lifestyle .gallery-section {
    /* e.g. tighten the gap a bit on phones: */
    gap: 0.5rem !important;
    /* or tweak image sizing if needed: */
    /* grid-template-columns: 1fr !important; // already set by the 1024px rule */
  }
}

/* ─── MOBILE & TABLET: Scale down Event + Commercial thumbs (≤1024px) ───────── */
@media (max-width: 1024px) {
  body.page-events   .gallery-section img,
  body.page-commercial .gallery-section img {
    /* make each thumb no wider than 85% of the viewport */
    width: 85vw !important;
    /* but never exceed 360px, to keep them manageable on tablets */
    max-width: 360px !important;
    height: auto !important;
    /* center each image in its grid cell */
    display: block;
    margin: 0 auto 1rem !important;
  }
}


/* === CLEAN VIDEO GALLERY (Only for Videography EVENT Page) === */


.page-videography-events .gallery-scroll-area {
  overflow-y: auto;
  max-height: 800px;
  margin: 0 auto;              /* ✅ center horizontally */
  width: 100%;                  /* ✅ smaller width */
  max-width: 1000px;            /* ✅ limit width */
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

.page-videography-events .gallery-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  padding: 2rem 1rem;
}


.page-videography-events .video-thumbnail {
  position: relative;
  cursor: pointer;
  width: 90%; /* or 80%, try what feels right */
  max-width: 1200px; /* optionally restrict max size */
  border-radius: 8px;
  overflow: visible;
}

.page-videography-events .video-thumbnail video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

 .page-videography-events .video-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 2.5rem;
  opacity: 0;
  transition: all 0.3s ease;
}


.page-videography-events .gallery-wrapper {
  position: relative;
}


.page-videography-events .video-thumbnail:hover .video-title {
  all: unset;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 6px 10px;
  opacity: 1;
  pointer-events: none;
}

.page-videography-events .video-thumbnail video {
  transition: transform 0.3s ease;
}

.page-videography-events .gallery-section video:hover {
transform: scale(1.05);
  z-index: 1;
}

.page-videography-events .gallery-scroll-area::-webkit-scrollbar {
  width: 8px;
}
.page-videography-events .gallery-scroll-area::-webkit-scrollbar-thumb {
  background-color: var(--gold);
  border-radius: 8px;
}

.page-videography-events .gallery-wrapper {
  margin: 0 auto;
  padding-left: 10px; /* Adjust this pixel value to match your category buttons' start */
  box-sizing: border-box;
}

/* === CLEAN VIDEO GALLERY (Only for Videography Corporate Page) === */


.page-videography-corporate .gallery-scroll-area {
  overflow-y: auto;
  max-height: 800px;
  margin: 0 auto;              /* ✅ center horizontally */
  width: 100%;                  /* ✅ smaller width */
  max-width: 1000px;            /* ✅ limit width */
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

.page-videography-corporate .gallery-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  padding: 2rem 1rem;
}


.page-videography-corporate .video-thumbnail {
  position: relative;
  cursor: pointer;
  width: 90%; /* or 80%, try what feels right */
  max-width: 1200px; /* optionally restrict max size */
  border-radius: 8px;
  overflow: visible;
}

.page-videography-corporate .video-thumbnail video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

 .page-videography-corporate .video-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 2.5rem;
  opacity: 0;
  transition: all 0.3s ease;
}


.page-videography-corporate .gallery-wrapper {
  position: relative;
}


.page-videography-corporate .video-thumbnail:hover .video-title {
  all: unset;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 6px 10px;
  opacity: 1;
  pointer-events: none;
}

.page-videography-corporate .video-thumbnail video {
  transition: transform 0.3s ease;
}

.page-videography-corporate .gallery-section video:hover {
transform: scale(1.05);
  z-index: 1;
}

.page-videography-corporate .gallery-scroll-area::-webkit-scrollbar {
  width: 8px;
}
.page-videography-corporate .gallery-scroll-area::-webkit-scrollbar-thumb {
  background-color: var(--gold);
  border-radius: 8px;
}

.page-videography-corporate .gallery-wrapper {
  margin: 0 auto;
  padding-left: 10px; /* Adjust this pixel value to match your category buttons' start */
  box-sizing: border-box;
}

/* === CLEAN VIDEO GALLERY (Only for Videography COMMERCIAL Page) === */


.page-videography-commercial .gallery-scroll-area {
  overflow-y: auto;
  max-height: 800px;
  margin: 0 auto;              /* ✅ center horizontally */
  width: 100%;                  /* ✅ smaller width */
  max-width: 1000px;            /* ✅ limit width */
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

.page-videography-commercial .gallery-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  padding: 2rem 1rem;
}


.page-videography-commercial .video-thumbnail {
  position: relative;
  cursor: pointer;
  width: 90%; /* or 80%, try what feels right */
  max-width: 1200px; /* optionally restrict max size */
  border-radius: 8px;
  overflow: visible;
}

.page-videography-commercial .video-thumbnail video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

 .page-videography-commercial .video-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 2.5rem;
  opacity: 0;
  transition: all 0.3s ease;
}


.page-videography-commercial .gallery-wrapper {
  position: relative;
}


.page-videography-commercial .video-thumbnail:hover .video-title {
  all: unset;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 6px 10px;
  opacity: 1;
  pointer-events: none;
}

.page-videography-commercial .video-thumbnail video {
  transition: transform 0.3s ease;
}

.page-videography-commercial .gallery-section video:hover {
transform: scale(1.05);
  z-index: 1;
}

.page-videography-commercial .gallery-scroll-area::-webkit-scrollbar {
  width: 8px;
}
.page-videography-commercial .gallery-scroll-area::-webkit-scrollbar-thumb {
  background-color: var(--gold);
  border-radius: 8px;
}

.page-videography-commercial .gallery-wrapper {
  margin: 0 auto;
  padding-left: 10px; /* Adjust this pixel value to match your category buttons' start */
  box-sizing: border-box;
}

/* === CLEAN VIDEO GALLERY (Only for Videography BRANDING Page) === */


.page-videography-branding .gallery-scroll-area {
  overflow-y: auto;
  max-height: 800px;
  margin: 0 auto;              /* ✅ center horizontally */
  width: 100%;                  /* ✅ smaller width */
  max-width: 1000px;            /* ✅ limit width */
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

.page-videography-branding .gallery-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  padding: 2rem 1rem;
}


.page-videography-branding .video-thumbnail {
  position: relative;
  cursor: pointer;
  width: 90%; /* or 80%, try what feels right */
  max-width: 1200px; /* optionally restrict max size */
  border-radius: 8px;
  overflow: visible;
}

.page-videography-branding .video-thumbnail video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

 .page-videography-branding .video-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 2.5rem;
  opacity: 0;
  transition: all 0.3s ease;
}


.page-videography-branding .gallery-wrapper {
  position: relative;
}


.page-videography-branding .video-thumbnail:hover .video-title {
  all: unset;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 6px 10px;
  opacity: 1;
  pointer-events: none;
}

.page-videography-branding .video-thumbnail video {
  transition: transform 0.3s ease;
}

.page-videography-branding .gallery-section video:hover {
transform: scale(1.05);
  z-index: 1;
}

.page-videography-branding .gallery-scroll-area::-webkit-scrollbar {
  width: 8px;
}
.page-videography-branding .gallery-scroll-area::-webkit-scrollbar-thumb {
  background-color: var(--gold);
  border-radius: 8px;
}

.page-videography-branding .gallery-wrapper {
  margin: 0 auto;
  padding-left: 10px; /* Adjust this pixel value to match your category buttons' start */
  box-sizing: border-box;
}


/* === CLEAN VIDEO GALLERY (Only for creative-FILM Page) === */


.page-creative-film .gallery-scroll-area {
  overflow-y: auto;
  max-height: 800px;
  margin: 0 auto;              /* ✅ center horizontally */
  width: 100%;                  /* ✅ smaller width */
  max-width: 1000px;            /* ✅ limit width */
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

.page-creative-film .gallery-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  padding: 2rem 1rem;
}


.page-creative-film .video-thumbnail {
  position: relative;
  cursor: pointer;
  width: 90%; /* or 80%, try what feels right */
  max-width: 1200px; /* optionally restrict max size */
  border-radius: 8px;
  overflow: visible;
}

.page-creative-film .video-thumbnail video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

 .page-creative-film .video-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 2.5rem;
  opacity: 0;
  transition: all 0.3s ease;
}


.page-creative-film .gallery-wrapper {
  position: relative;
}


.page-creative-film .video-thumbnail:hover .video-title {
  all: unset;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 6px 10px;
  opacity: 1;
  pointer-events: none;
}

.page-creative-film .video-thumbnail video {
  transition: transform 0.3s ease;
}

.page-creative-film .gallery-section video:hover {
transform: scale(1.05);
  z-index: 1;
}

.page-creative-film .gallery-scroll-area::-webkit-scrollbar {
  width: 8px;
}
.page-creative-film .gallery-scroll-area::-webkit-scrollbar-thumb {
  background-color: var(--gold);
  border-radius: 8px;
}

.page-creative-film .gallery-wrapper {
  margin: 0 auto;
  padding-left: 10px; /* Adjust this pixel value to match your category buttons' start */
  box-sizing: border-box;
}



/* === CLEAN VIDEO GALLERY (Only for creative-FILM Page) === */



.page-creative-music .gallery-scroll-area {
  overflow-y: auto;
  max-height: 800px;
  margin: 0 auto;              /* ✅ center horizontally */
  width: 100%;                  /* ✅ smaller width */
  max-width: 1000px;            /* ✅ limit width */
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

.page-creative-music .gallery-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  padding: 2rem 1rem;
}


.page-creative-music .video-thumbnail {
  position: relative;
  cursor: pointer;
  width: 90%; /* or 80%, try what feels right */
  max-width: 1200px; /* optionally restrict max size */
  border-radius: 8px;
  overflow: visible;
}

.page-creative-music .video-thumbnail video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

 .page-creative-music .video-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 2.5rem;
  opacity: 0;
  transition: all 0.3s ease;
}


.page-creative-music .gallery-wrapper {
  position: relative;
}


.page-creative-music .video-thumbnail:hover .video-title {
  all: unset;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 6px 10px;
  opacity: 1;
  pointer-events: none;
}

.page-creative-music .video-thumbnail video {
  transition: transform 0.3s ease;
}

.page-creative-music .gallery-section video:hover {
transform: scale(1.05);
  z-index: 1;
}

.page-creative-music .gallery-scroll-area::-webkit-scrollbar {
  width: 8px;
}
.page-creative-music .gallery-scroll-area::-webkit-scrollbar-thumb {
  background-color: var(--gold);
  border-radius: 8px;
}

.page-creative-music .gallery-wrapper {
  margin: 0 auto;
  padding-left: 10px; /* Adjust this pixel value to match your category buttons' start */
  box-sizing: border-box;
}


/* ─── FORCE CREATIVE THUMBS TO CARD SIZE ─────────────────────── */
.page-creative-film .video-thumbnail,
.page-creative-music .video-thumbnail {
  width: 100%    !important;  /* fill the container */
  max-width: 600px !important;/* cap it at 600px */
  margin: 0 auto !important;  /* center it */
}

/* ensure the poster IMG and the <video> inside match that container */
.page-creative-film .video-thumbnail video,
.page-creative-music .video-thumbnail video,
.page-creative-film .video-poster,
.page-creative-music .video-poster {
  width: 100% !important;
  height: auto  !important;
}


/* show posters immediately once “visible” is added */
.video-poster {
  opacity: 0;
  transform: scale(0.97) translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.video-poster.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* constrains both img and video to the same card size */
.page-creative-film .video-thumbnail,
.page-creative-music .video-thumbnail {
  width: 100%;
  max-width: 600px;    /* your desired width */
  margin: 2rem auto;
}
.page-creative-film .video-thumbnail video,
.page-creative-music .video-thumbnail video {
  width: 100% !important;
  height: auto  !important;
  display: block;
}



/* always show the fallback poster */
.video-poster {
  opacity: 1 !important;
  transform: none !important;
}



/* Lightbox for Embedded Vimeo Video */
#video-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#video-lightbox.visible {
  visibility: visible;
  opacity: 1;
}

#video-iframe {
  width: 90vw;       /* bump up to 90% of the viewport width */
  height: 60vw;      /* 16:9 ratio (90 × 9/16 ≈ 50.6, but you can tweak) */
  max-width: 1280px; /* optional cap */
  max-height: 720px; /* optional cap */
  border: none;
}

#video-lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10000;
}

@media (min-width: 1200px) {
  .gallery-wrapper {
    max-width: 95vw;
  }
}

.gallery-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px; /* Slightly taller for smoother gradient */
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(15, 15, 15, 1) 0%,
    rgba(15, 15, 15, 0.85) 25%,
    rgba(15, 15, 15, 0.4) 60%,
    transparent 80%
  );
}


/* Final image appearance logic */
.gallery-section img {
  opacity: 0;
  transform: scale(0.97) translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.gallery-section img.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}


/* SEE MORE / LESS BUTTONS */
.gallery-toggle {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1rem;
  overflow: visible; /* Ensures hover expansion isn’t clipped */
}

.gallery-toggle button {
  background-color: var(--gold);
  color: #000;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  display: inline-block;
}
.gallery-toggle button:hover {
  background-color: var(--gold-hover);
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

.see-more-container {
  position: relative;
  z-index: 3;
  margin-top: -100px;
  padding-bottom: 2rem;
}

.gallery-scroll-area {
  max-height: 800px; /* adjust as needed */
  overflow-y: auto;
  width: 100%;
  padding-right: 10px; /* optional for scrollbar room */
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

.gallery-scroll-area::-webkit-scrollbar {
  width: 8px;
}

.gallery-scroll-area::-webkit-scrollbar-thumb {
  background-color: var(--gold);
  border-radius: 8px;
}

/* LIGHTBOX STYLE */
#lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px); /* adjust this to control blur strength */
  background: rgba(0, 0, 0, 0.65); /* reduce darkness to reveal blur more */
  z-index: 1000;
  padding: 2rem;
}

#lightbox::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
  z-index: 1;
}

#lightbox.visible {
  display: flex;
}

#lightbox img {
  z-index: 2;
  position: relative;
  max-width: 100%;
  max-height: 100vh;
  object-fit: contain;
  margin: auto;
}

/* ─── FIX: Hide Lightbox by Default ────────────────────────── */
#lightbox {
  display: none !important;   /* ensure it’s hidden on page load */
}

#lightbox.visible {
  display: flex !important;   /* only show when your JS adds .visible */
}

/* PRICING SECTION */
.dynamic-pricing-container {
  display: flex;
  flex-direction: column !important; /* stack buttons above details on ALL screens */
  align-items: center !important;    /* center the buttons + pricing panel */
  justify-content: center;           /* center vertically if container grows */
  gap: 2rem;
  max-width: 1400px;
  margin: 3rem auto;
}

h2 {
  text-align: center;
}

/* ─── MOBILE-ONLY FULLSCREEN LIGHTBOX ───────────────────────── */
@media (max-width: 768px) {
  /* hide until JS adds .open */
  #lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.3s ease;
  }
  #lightbox.open {
    display: flex;
    opacity: 1;
  }
  #lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.6);
    transform: scale(0.95);
    transition: transform 0.3s ease;
  }
  #lightbox.open #lightbox-img {
    transform: scale(1);
  }
}



@media (max-width: 768px) {
  .dynamic-pricing-container {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

.pricing-section-title {
	font-size: 2rem;
	
	
}

.dynamic-pricing-container.dual {
  flex-direction: column;
  align-items: center;
}

 #subcategory-buttons {
  margin-bottom: 0.25rem;
}

.subcategory-buttons {
   display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1rem;
  overflow: visible; /* Ensures hover expansion isn’t clipped */
}

.subcategory-buttons button {
   background-color: var(--gold);
  color: #000;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1.25rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  display: inline-block;
}

.subcategory-buttons button:hover {
  background-color: var(--gold-hover);
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

.pricing-details {
  flex: 1 1 65%;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.pricing-details.visible {
  opacity: 1;
}

.pricing-details h3 {
  color: var(--gold);
  margin-bottom: 1rem;
}

.pricing-details ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricing-details li {
  margin-bottom: 0.5rem;
}

.pricing-details .price {
  margin-top: 1rem;
  font-size: 2rem;
  font-weight: bold;
  color: var(--gold);
	
}

.pricing-box-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 1.5rem;
}

.pricing-box {
  flex: 1 1 50%;
  max-width: 45%;
  background-color: #1a1a1a;
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding-left: 6.5rem;
  padding-right: 6.5rem;
  padding-top: 0rem;
  padding-bottom:1.5rem;
  text-align: center;
}

.pricing-box h3 {
  color: var(--gold);
  margin-bottom: 1rem;
  font-size: 2rem;  /* 👈 Larger title */
}

.pricing-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
 font-size: 1.4rem;  /* 👈 Larger title */
}

.pricing-box li {
  margin-bottom: 0.5rem;
}

.pricing-box .price {
  margin-top: 1rem;
  font-size: 2rem;
  font-weight: bold;
 color: var(--gold);
}

@media (max-width: 768px) {
  .pricing-box-container {
    flex-direction: column;
  }
}


.book-now-pricing {
  display: block;
  width: fit-content;
  margin: 2rem auto 0 auto;
  padding: 0.75rem 2rem;
  background-color: var(--gold);
  color: #000;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1.25rem;
  text-align: center;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}


.book-now-pricing:hover {
 background-color: var(--gold-hover);
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

.book-now-wrapper {
  text-align: center;
  margin-top: 2rem;
}

.price-highlight {
  font-size: 2rem;
  font-weight: bold;
  color: var(--gold);
  margin-bottom: 0rem;
}

/* FEATURED IMAGES IN MASONRY LAYOUT */
.featured-image {
  grid-row-end: span 2;
  transform: scale(1.05);
  z-index: 2;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

@media (min-width: 900px) {
  .gallery-section .featured-image {
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
  }
}

.featured-image:hover {
  transform: scale(1.12);
  z-index: 10;
}


/* ─── MEMBER‐PAGE HERO OVERRIDES ─────────────────────────────── */
body.member-page .hero {
  height: 28vh;      /* shorter hero just for member pages */
  min-height: 300px;
}
body.member-page .hero .hero-content {
  padding: 5rem 1rem;
}

/* ─── MEMBER PROFILE LAYOUT ─────────────────────────── */
body.member-page .member-profile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 2rem;
  align-items: center;
}

/* Bio column */
body.member-page .member-info h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
body.member-page .member-info p {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}
body.member-page .social-links {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}
body.member-page .social-links img {
  width: 32px;
  height: 32px;
}
body.member-page .contact-btn {
  display: inline-block;
  background-color: var(--gold);
  color: #000;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}
body.member-page .contact-btn:hover {
  background-color: var(--gold-hover);
}

/* Photo column */
body.member-page .member-photo img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

/* STACK ON MOBILE */
@media (max-width: 768px) {
  body.member-page .member-profile {
    grid-template-columns: 1fr;
    text-align: center;
  }
  body.member-page .member-photo {
    order: -1;  /* photo first if you prefer */
    margin-bottom: 2rem;
  }
}

/* ─── MEMBER-PAGE: Centered Bio + Photo-Grid Box ───────────────── */
body.member-page .member-info {
  text-align: center;      /* center-align all text */
}

body.member-page .member-title {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold);
  margin: 0.5rem 0 1rem;
}

body.member-page .member-quote {
  font-style: italic;
  color: var(--gold-hover);
  margin: 0 0 1.5rem;
  font-size: 1.2rem;
}

body.member-page .member-bio p {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* photo-grid box styling */
body.member-page .member-photo .photo-button-grid {
  justify-content: center; /* center the single card */
  padding: 0;              /* remove extra grid padding */
}

body.member-page .member-photo .photo-button {
  max-width: 400px;         /* match your grid’s proportions */
  height: auto;             /* image defines its own height */
  box-shadow: 0 0 0 2px var(--gold);
  border-radius: 8px;
  overflow: hidden;
}

body.member-page .member-photo .photo-button img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* keep the existing 2-col layout & spacing */
body.member-page .member-profile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1000px;
  margin: 0 auto;
  padding: 4rem 2rem;
  align-items: center;
}

/* responsive: stack on mobile */
@media (max-width: 768px) {
  body.member-page .member-profile {
    grid-template-columns: 1fr;
    text-align: center;
  }
  body.member-page .member-photo {
    order: -1;    /* photo on top if you prefer */
    margin-bottom: 2rem;
  }
}



/* ─── MEMBER PAGE: Larger Type & Button ───────────────────────── */
body.member-page {
  /* Base up the font-size so rems/ems everywhere scale up */
  font-size: 1.125rem; /* ≈18px if root is 16px; tweak between 1.0625–1.25 */
}

/* Headings */
body.member-page .member-info h2 {
  font-size: 3rem;     /* was 2.5rem → now ~54px */
}

/* Job title */
body.member-page .member-title {
  font-size: 1.5rem;   /* was 1.1rem → now ~24px */
}

/* Quote */
body.member-page .member-quote {
  font-size: 1.4rem;   /* was 1.2rem → now ~22px */
}

/* Bio text */
body.member-page .member-info p {
  font-size: 1.25rem;  /* was 1.125rem → now ~20px */
  line-height: 1.75;   /* give a little extra leading */
}

/* Contact button */
body.member-page .contact-btn {
  font-size: 1.25rem;     /* bump up button text */
  padding: 1rem 2.5rem;    /* more tappable hit-area */
  border-radius: 8px;      /* match your other buttons */
  transition: transform 0.2s ease;
}
body.member-page .contact-btn:hover {
  transform: scale(1.05);
}


/* ─── MOBILE MEMBER PAGES: cap & stack portrait ≤768px ───────────────── */
@media (max-width: 768px) {
  /* 1) Force one-column stack (image above bio) */
  body.member-page .member-profile {
    display: grid !important;
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  /* 2) Photo container first, with breathing room */
  body.member-page .member-photo {
    order: -1;
    margin-bottom: 1.5rem;
  }
  /* The actual portrait “card” */
  body.member-page .member-photo .photo-button {
    display: inline-block;     /* so margin auto works and it shrinks to fit */
    width: 100%;               /* full width of its container */
    max-width: 550px;          /* cap at desktop‐friendly size */
    height: auto;              /* let the img determine height */
    margin: 0 auto 1.5rem;     /* center horizontally + bottom gap */
    overflow: hidden;          
    border-radius: 8px;
    box-shadow: 0 0 0 2px var(--gold);
	 aspect-ratio: unset !important; /* cancel the 4/3 cap */
  }
  /* 4) Image fills its container cleanly */
  body.member-page .member-photo .photo-button img {
    width: 100%    !important;
    height: auto   !important;
    object-fit: cover !important;
  }
}
  

/* Tame the portrait between 769px–900px on member pages */
@media (max-width: 900px) and (min-width: 769px) {
  /* keep two-column bio + photo side-by-side */
  body.member-page .member-profile {
    grid-template-columns: 1fr 1fr !important;
  }
  /* constrain photo to 400px again */
  body.member-page .member-photo .photo-button {
    max-width: 400px !important;
    width: 100%;
    height: auto !important;
    margin: 0 auto;
    overflow: hidden;
  }
}

/* ─── MEMBER PAGE: Center & Tint Social Icons ───────────────── */
body.member-page .social-links {
  display: flex;
  justify-content: center;   /* center the icons under your bio */
  align-items: center;
  gap: 1.5rem;               /* a bit more breathing room */
  margin: 2rem 0;            /* space above & below */
}

body.member-page .social-links img {
  width: 48px;               /* bigger icons */
  height: 48px;
  /* tint them to your gold variable via CSS filter: */
  filter:
    invert(74%) sepia(89%) saturate(350%)
    hue-rotate(2deg) brightness(95%)
    contrast(90%);
  transition: filter 0.2s ease, transform 0.2s ease;
}

body.member-page .social-links img:hover {
  transform: scale(1.1);
    filter:
    invert(74%) sepia(89%) saturate(350%)
    hue-rotate(2deg) brightness(95%)
    contrast(90%);
}

.member-photo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  overflow: visible;
}

.member-photo .photo-button {
  width: 800px;
  height: 800px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.member-photo .photo-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

.member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}




/* ─── CONTACT PAGE FORM STYLES ───────────────────────────────── */
body.contact-page .contact-section {
  max-width: 600px;
  margin: 0 auto 4rem;
  padding: 3rem 2rem;
  text-align: center;
}
body.contact-page .contact-section h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
body.contact-page .contact-section p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
}
body.contact-page .contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
body.contact-page .contact-form label {
  display: flex;
  flex-direction: column;
  text-align: left;
  font-size: 1rem;
  color: #fff;
}
body.contact-page .contact-form input,
body.contact-page .contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  margin-top: 0.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  background: #111;
  color: #fff;
  font-size: 1rem;
}
body.contact-page .contact-form button {
  align-self: center;
  background: var(--gold);
  color: #000;
  border: none;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
body.contact-page .contact-form button:hover {
  background: var(--gold-hover);
  transform: scale(1.05);
}
@media (max-width: 768px) {
  body.contact-page .contact-section {
    padding: 2rem 1rem;
  }
}

/* ─── CONTACT PAGE HERO HEIGHT OVERRIDE ────────────────────── */
body.contact-page .hero {
  height: 40vh;       /* ← adjust this (e.g. 30vh, 50vh, etc.) */
  min-height: 250px;  /* ensures it never gets too squat */
}

/* ─── CONTACT PAGE: Nudge Hero Text Down ────────────────────── */
body.contact-page .hero .hero-content {
  margin-top: 10vh;    /* pushes the text down 10% of viewport height */
}

/* Optional: tweak for mobile so it’s not too low on small screens */
@media (max-width: 768px) {
  body.contact-page .hero .hero-content {
    margin-top: 5vh;   /* smaller offset on phones */
  }
}

/* ─── NEW MOBILE HEADER OVERRIDES (place at bottom of styles.css) ───────────────── */
@media (max-width: 768px) {
  header .brand {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
  }
  header .brand .hamburger {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }
  .mobile-nav {
    width: 100%;
    padding: 1rem 1.5rem;
    box-sizing: border-box;
  }
  .mobile-nav a {
    padding: 1rem 0;
  }
}

/* ─── MOBILE OVERRIDE: stack & full-width image ≤ 900px ───────── */
@media (max-width: 900px) {
  /* 1) Collapse your two-column member layout to one */
  .member-profile {
    display: grid !important;
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  /* 2) Let the photo-button expand to fill its container */
  .member-photo .photo-button {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    overflow: visible !important;
    border-radius: 0 !important; /* remove the circle */
  }
  /* 3) Show the entire image uncropped */
  .member-photo .photo-button img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}


/* ─── GLOBAL FOOTER + SOCIAL ICONS ────────────────────────────── */
footer {
  background-color: #1a1a1a;  /* match your existing footer bg */
  color: #ccc;                /* lighter text */
  padding: 2rem 1rem;         /* give it some breathing room */
}

footer .footer-content {
  display: flex;
  flex-direction: column;     /* vertical stack */
  align-items: center;
  gap: 1rem;
  text-align: center;
}

/* ─── FORCE VERTICAL FOOTER EVERYWHERE ────────────────── */
footer .footer-content {
  flex-direction: column !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Social icons row */
footer .footer-social {
  display: flex;
  gap: 1.5rem;
}

/* ─── FOOTER ICONS: tint to site-wide gold & size PNGs ───────────────── */
footer .footer-social a img {
  width: 32px;    /* force all icons to 32×32px */
  height: 32px;  
  filter:
    invert(74%) sepia(89%) saturate(350%)
    hue-rotate(2deg) brightness(95%)
    contrast(90%);  /* your gold-tint filter */                     /* :contentReference[oaicite:4]{index=4} */
  transition: filter 0.3s ease, transform 0.3s ease;
}

footer .footer-social a:hover img {
  filter:
    invert(74%) sepia(89%) saturate(350%)
    hue-rotate(2deg) brightness(95%)
    contrast(90%);
  transform: scale(1.1);
}

/* On larger screens, keep the footer content in a row */
@media (min-width: 768px) {
  footer .footer-content {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ─── FOOTER ICONS: tint to site-wide gold ───────────────────────── */
footer .footer-social a img {
  /* filters to convert a white/black SVG into #c9a94a */
  filter:
    invert(74%)      /* swap black→white base */
    sepia(89%)       /* add warmth */
    saturate(350%)   /* boost color */
    hue-rotate(2deg) /* fine-tune hue toward yellow */
    brightness(95%)  /* adjust lightness */
    contrast(90%);   /* tighten up contrast */
}


/* ─── PHONE-ONLY TWEAKS (≤768px) ─────────────────────────── */
@media (max-width: 768px) {

  /* 1) Cap & center the film-highlight image */
  .film-highlight .highlight-image {
    max-width: 90vw;        /* never wider than 90% of the viewport */
    margin: 1.5rem auto;    /* center + vertical breathing room */
  }
  .film-highlight .highlight-image img {
    width: 100%;            /* fill that capped container */
    height: auto;
    transform: none;        /* cancel the hover/desktop zoom baseline */
  }

  /* 2) Shrink footer icons for phones */
  footer .footer-social a img {
    width: 24px;            /* down from 32px */ 
    height: 24px;
  }

}

/* ─── FINAL MOBILE & GLOBAL FOOTER + HIGHLIGHT OVERRIDES ─────────────────── */

/* 1) Global footer icon sizing & gold tint */
.footer-social a img {
  width: 32px;
  height: auto;
  filter:
    invert(74%) sepia(89%) saturate(350%)
    hue-rotate(2deg) brightness(95%)
    contrast(90%);
  transition: transform 0.3s ease;
}
.footer-social a:hover img {
  transform: scale(1.1);
}

/* 2) Cap the film-highlight still on phones */
@media (max-width: 768px) {
  .film-highlight .highlight-image {
    max-width: 90vw !important;    /* never wider than 90% of viewport */
    margin: 1.5rem auto !important;/* center it */
  }
  .film-highlight .highlight-image img {
    width: 100% !important;        /* fill that capped container */
    height: auto !important;
    transform: none !important;    /* drop any desktop zoom */
  }
}