/* ============================================
   Synopsis Events — Stylesheet
   ============================================ */

:root {
  /* F1-inspired dark palette */
  --bg:           #15151e;  /* page background */
  --surface:      #1f1f27;  /* card / section surface */
  --surface-2:    #2a2a35;  /* elevated / hover surface */
  --text:         #ffffff;  /* primary text */

  /* Brand red (kept; matches F1's #E10600 closely) */
  --first-color:  var(--surface);   /* legacy alias: section tint -> dark card */
  --second-color: #ff4d57;
  --third-color:  #e50914;
  --fourth-color: #0f0f0f;

  --pink:       var(--third-color);
  --pink-light: var(--second-color);
  --pink-soft:  var(--second-color);
  --pink-deep:  var(--fourth-color);

  /* Legacy semantic colors flipped for dark theme */
  --dark:        var(--text);        /* "dark" was body text; in dark theme it's white */
  --gray:        #b6b7bc;            /* secondary text */
  --light-gray:  var(--surface-2);
  --border-gray: #38383f;
  --white:       #ffffff;            /* literal white (used for text on red, etc.) */
  --header-h:    80px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* ============================================
   HEADER / NAV
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgb(15, 15, 22);
  border-bottom: 1px solid var(--border-gray);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  height: var(--header-h);
  display: flex;
  align-items: center;
}

.header-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;        /* sit above any sibling/header decoration */
}

.logo-img {
  height: 46px;
  width: auto;
  display: block;
}

.footer-logo-img {
  height: 34px;
  width: auto;
  display: block;
}

/* Text-based brand logo (replaces SVG-as-img — renders identically on
   every device, no font-loading risk on iOS Safari). */
.brand-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 1.05;     /* tiny breathing room so descender area isn't clipped */
  padding: 2px 0;        /* prevents tight clipping against header edges */
  font-family: 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 900;
  color: var(--text);
  user-select: none;
}

.brand-logo-mark {
  font-size: 28px;
  letter-spacing: 2px;
}

.brand-logo-tag {
  font-size: 7px;
  letter-spacing: 4px;
  margin-top: 4px;
}

.site-footer .brand-logo-mark { font-size: 22px; }
.site-footer .brand-logo-tag  { font-size: 6px; letter-spacing: 3px; }

.logo-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--third-color), var(--fourth-color));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 24px;
  font-style: italic;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-name {
  font-size: 18px;
  color: var(--pink);
  font-weight: 500;
  letter-spacing: 1px;
}

.logo-sub {
  font-size: 9px;
  color: var(--gray);
  letter-spacing: 3px;
  margin-top: 2px;
}

.main-nav {
  background: rgba(31, 31, 39, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(229, 9, 20, 0.12);
  border-radius: 999px;
  padding: 5px 6px;
  box-shadow: 0 2px 10px rgba(15, 15, 15, 0.06);
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 2px;
  align-items: center;
}

/* Header social icons */
.header-social {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
}

.header-social a {
  color: var(--third-color);
  font-size: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-gray);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.header-social a:hover {
  background: var(--third-color);
  color: white;
  border-color: var(--third-color);
  transform: translateY(-2px);
}

.nav-link {
  display: inline-block;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--dark);
  border-radius: 999px;
  transition: background 0.3s ease, color 0.3s ease;
}

.nav-link:hover {
  background: rgba(229, 9, 20, 0.08);
  color: var(--third-color);
}

.nav-link.active {
  background: var(--third-color);
  color: white;
}

/* ============================================
   SOCIAL SIDEBAR
   ============================================ */
.social-sidebar {
  display: none;
}

.social-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--third-color);
  background: var(--surface);
  font-size: 14px;
  border: 1px solid var(--border-gray);
  box-shadow: 0 2px 6px rgba(15, 15, 15, 0.08);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.social-icon:hover {
  background: var(--third-color);
  color: white;
  border-color: var(--third-color);
  transform: translateX(-3px) scale(1.08);
}

/* X (formerly Twitter) icon — inline SVG fallback */
.x-icon {
  width: 0.95em;
  height: 0.95em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: currentColor;
}

/* ============================================
   HERO / SLIDESHOW
   ============================================ */
.hero {
  position: relative;
  height: calc(100vh - var(--header-h));
  margin-top: var(--header-h);
  overflow: hidden;
}

.slideshow {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.12) translate3d(-1%, 0.6%, 0);
  transition: opacity 0.9s ease-in-out, transform 0.9s linear;
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.slide.active {
  opacity: 1;
}

.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.15);
  border-radius: 50%;
  color: white;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 5;
}

.slide-arrow:hover {
  background: var(--pink);
  border-color: var(--pink);
}

.slide-arrow.prev { right: 88px; }
.slide-arrow.next { right: 28px; }

.scroll-down {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.85);
  font-size: 18px;
  animation: bounce 2s infinite;
  z-index: 5;
}

.scroll-down.dark {
  color: var(--pink);
}

@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ============================================
   WELCOME SECTION
   ============================================ */
.welcome {
  position: relative;
  padding: 90px 40px 70px;
  background: var(--surface);
}

.welcome-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.welcome-small {
  font-size: 28px;
  font-weight: 400;
  color: var(--dark);
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.welcome-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--pink);
  letter-spacing: 1px;
  margin-bottom: 28px;
}

.welcome-title .dot {
  color: var(--pink);
}

.welcome-text p {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 16px;
}

.btn-outline {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 30px;
  border: 1.5px solid var(--pink);
  border-radius: 999px;
  color: var(--pink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease,
              box-shadow 0.3s ease;
}

.btn-outline:hover {
  background: var(--pink);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(15, 15, 15, 0.4);
}

.welcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.grid-img {
  overflow: hidden;
}

.grid-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 567 / 642;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

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

/* ============================================
   QUOTE BANNER
   ============================================ */
.quote-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 100px 20px;
  text-align: center;
}

.quote-overlay {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
}

.quote-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 15, 15, 0.78), rgba(229, 9, 20, 0.65));
  z-index: 1;
}

.quote-text {
  color: white;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.7;
  margin-bottom: 24px;
}

.quote-author {
  color: var(--pink-light);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
}

/* ============================================
   SHARED SECTION HEADING
   ============================================ */
.section-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
}

.section-heading {
  margin-bottom: 50px;
}

.section-small {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--dark);
  line-height: 1.1;
}

.section-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--pink);
  margin-top: 4px;
}

.section-title .dot {
  color: var(--pink);
}

.title-underline {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--pink);
  margin-top: 14px;
}

/* ============================================
   SERVICES
   ============================================ */
.services {
  padding: 90px 0 60px;
  background: var(--surface);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.service-card {
  cursor: pointer;
}

.service-img {
  overflow: hidden;
  margin-bottom: 18px;
}

.service-img img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-card:hover .service-img img {
  transform: scale(1.05);
}

.service-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--pink);
  margin-bottom: 4px;
}

.service-sub {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--dark);
}

.service-sub .arrow {
  color: var(--pink);
  margin-left: 6px;
  transition: transform 0.3s ease;
  display: inline-block;
}

.service-card:hover .service-sub .arrow {
  transform: translateX(6px);
}

/* ============================================
   STATS BANNER
   ============================================ */
.stats-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 70px 20px;
}

.stats-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 15, 15, 0.82), rgba(229, 9, 20, 0.7));
  z-index: 1;
}

.stats-overlay {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  text-align: center;
}

.stat-icon {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.stat-icon img {
  max-height: 44px;
  width: auto;
  filter: brightness(0) invert(1);
}

.stat-num {
  font-size: 38px;
  font-weight: 600;
  color: var(--pink-light);
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--white);
}

/* ============================================
   PORTFOLIO
   ============================================ */
.portfolio {
  padding: 90px 0 60px;
  background: var(--surface);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.portfolio-card {
  cursor: pointer;
}

.portfolio-img {
  overflow: hidden;
  margin-bottom: 16px;
}

.portfolio-img img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.portfolio-card:hover .portfolio-img img {
  transform: scale(1.05);
}

.portfolio-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--pink);
  margin-bottom: 4px;
  line-height: 1.4;
}

.portfolio-sub {
  font-size: 12px;
  color: var(--gray);
  font-weight: 400;
}

.portfolio-grid.four-col {
  grid-template-columns: repeat(4, 1fr);
}

.portfolio-cta {
  text-align: center;
  margin-top: 50px;
}

/* ============================================
   FEATURED PARTNERS
   ============================================ */
.partners-banner {
  position: relative;
  background: var(--surface);
  background-image: none;
  padding: 80px 20px 90px;
}

.partners-banner::before {
  /* Removed: red/dark photo overlay. Section now uses a clean dark surface. */
  content: none;
  background: none;
  z-index: 1;
}

.partners-overlay {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.partners-title {
  color: white;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 4px;
  margin-bottom: 35px;
}

.partners-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

.partners-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  background: transparent;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.partners-arrow:hover {
  background: var(--pink);
  border-color: var(--pink);
}

.partners-track-window {
  flex: 1;
  overflow: hidden;
}

.partners-track {
  display: flex;
  gap: 18px;
  transition: transform 0.5s ease;
}

.partner-logo {
  flex: 0 0 calc((100% - 54px) / 4);
  padding: 0;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.partner-logo:hover {
  transform: scale(1.05);
}

.partner-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: brightness(1.1) contrast(1.05);
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials {
  padding: 90px 0 60px;
  background: var(--surface);
}

.testimonials-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
}

.t-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--pink);
  background: transparent;
  color: var(--pink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.t-arrow:hover {
  background: var(--pink);
  color: white;
}

.t-window {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.t-track {
  display: flex;
  width: 100%;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.testimonial-card {
  flex: 0 0 100%;
  width: 100%;
  text-align: center;
  padding: 30px 40px;
  box-sizing: border-box;
}

.t-quote-icon {
  width: 50px;
  height: 50px;
  background: var(--pink);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin: 0 auto 18px;
}

.t-name {
  color: var(--pink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.t-role {
  color: var(--dark);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 22px;
}

.t-text {
  color: var(--gray);
  font-size: 13px;
  line-height: 1.9;
  font-style: italic;
  margin-bottom: 18px;
}

.t-sign {
  color: var(--gray);
  font-size: 13px;
  font-style: italic;
}

.t-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}

.t-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
  transition: background 0.3s ease;
}

.t-dot.active {
  background: var(--pink);
}

/* ============================================
   SERVICE / DETAIL PAGE
   ============================================ */
.service-banner {
  position: relative;
  margin-top: var(--header-h);
  height: 380px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.service-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 15, 15, 0.18), rgba(15, 15, 15, 0.05));
  pointer-events: none;
}


.service-intro {
  padding: 50px 0 20px;
  background: var(--surface);
}

.crumb {
  font-size: 12px;
  color: var(--gray);
  letter-spacing: 1px;
  margin-bottom: 18px;
}

.crumb a {
  color: var(--gray);
  transition: color 0.2s ease;
}

.crumb a:hover {
  color: var(--third-color);
}

.crumb-sep {
  margin: 0 8px;
  color: var(--third-color);
}

.crumb span:last-child {
  color: var(--third-color);
  font-weight: 600;
}

.intro-lead {
  font-size: 14px;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 18px;
  letter-spacing: 0.5px;
}

.intro-body {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 14px;
}

/* Portfolio detail page */
.pf-detail {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 30px;
  align-items: start;
  margin-top: 14px;
}

.pf-detail-img {
  overflow: hidden;
  border-radius: 12px;
  width: 220px;
  height: 150px;
}

.pf-detail-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.pf-detail-img:hover img {
  transform: scale(1.03);
}

.pf-detail-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--third-color);
  margin-bottom: 12px;
  line-height: 1.4;
}

.pf-detail-meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 18px;
}

.pf-detail-cat {
  color: var(--second-color);
}

.pf-detail-sep {
  margin: 0 10px;
  color: var(--border-gray);
}

.pf-detail-date {
  color: var(--gray);
}

.pf-detail-desc {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.9;
}

.pf-events {
  padding: 30px 0 80px;
  background: var(--surface);
}

.section-title.small {
  font-size: 24px;
}

.pf-events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 30px;
}

.pf-event-card {
  cursor: pointer;
}

.pf-event-img {
  overflow: hidden;
  border-radius: 14px;
}

.pf-event-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.pf-event-card:hover .pf-event-img img {
  transform: scale(1.05);
}

.pf-event-name {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--third-color);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--third-color);
}

.pf-event-sub {
  margin-top: 4px;
  padding-left: 12px;
  font-size: 12px;
  color: var(--gray);
}

/* Portfolio videos */
.pf-videos-section {
  padding: 30px 0 30px;
  background: var(--surface);
}

.yt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 30px;
}

.yt-grid .video-frame {
  margin: 0;
  box-shadow: 0 4px 12px rgba(15, 15, 15, 0.12);
}

.yt-grid .yt-play {
  width: 48px;
  height: 48px;
  font-size: 14px;
  border-width: 2px;
}

.yt-grid.single { grid-template-columns: 1fr; max-width: 760px; margin: 30px auto 0; }
.yt-grid.single .yt-play { width: 72px; height: 72px; font-size: 22px; border-width: 3px; }

@media (max-width: 900px) {
  .yt-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .yt-grid { grid-template-columns: 1fr; }
}

/* Portfolio gallery */
.pf-gallery-section {
  padding: 30px 0 80px;
  background: var(--surface);
}

.pf-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 30px;
}

/* Video gallery item — sized identically to a regular .pf-gal-item, with a
   centred red play-button overlay. Clicking opens the linked YouTube URL
   (we link out rather than embed because some videos disable embedding). */
.pf-gal-video {
  position: relative;
}

.pf-gal-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(229, 9, 20, 0.92);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  padding-left: 4px;
  border: 3px solid rgba(255, 255, 255, 0.95);
  pointer-events: none;
  z-index: 2;
  transition: transform 0.25s ease, background 0.25s ease;
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.55);
}

.pf-gal-video:hover .pf-gal-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--third-color);
}

.pf-gal-item {
  display: block;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  border-radius: 14px;
}

.pf-gal-item::after {
  content: "\f00e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  color: white;
  font-size: 22px;
  background: rgba(15, 15, 15, 0.7);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2;
}

.pf-gal-item:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.pf-gal-item img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, filter 0.3s ease;
}

/* Portrait galleries — for portfolio items whose source photos are tall.
   Sets each cell to portrait aspect-ratio so subjects stay fully visible. */
.pf-gallery-portrait .pf-gal-item img {
  height: auto;
  aspect-ratio: 2 / 3;
}

/* Self-hosted <video> swapped in on click — matches the standard
   .pf-gal-item img tile size so it fits into the normal gallery grid. */
.pf-gal-video-el {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  background: #000;
  outline: none;
}

.pf-gal-item:hover img {
  transform: scale(1.06);
  filter: brightness(0.7);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 5, 25, 0.95);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lightbox[hidden] { display: none; }

.lightbox-img {
  max-width: 92%;
  max-height: 86vh;
  object-fit: contain;
  box-shadow: 0 14px 40px rgba(0,0,0,0.6);
  user-select: none;
}

.lightbox-close,
.lightbox-nav {
  background: rgba(31, 31, 39, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: white;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.2s ease;
}

.lightbox-close {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 44px;
  height: 44px;
  font-size: 18px;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 18px;
}

.lightbox-prev { left: 26px; }
.lightbox-next { right: 26px; }

.lightbox-close:hover,
.lightbox-nav:hover {
  background: var(--third-color);
  border-color: var(--third-color);
}

.lightbox-counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 600;
}

/* Portfolio listing page */
.portfolio-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
}

.section-heading.no-mb { margin-bottom: 0; }

.portfolio-filters {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.pf-filter {
  display: flex;
  flex-direction: column;
  min-width: 180px;
}

.pf-filter-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--third-color);
  margin-bottom: 6px;
}

.pf-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--dark);
  background: var(--surface);
  border: 1px solid var(--border-gray);
  padding: 9px 36px 9px 12px;
  border-radius: 2px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--third-color) 50%),
                    linear-gradient(135deg, var(--third-color) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  transition: border-color 0.25s ease;
}

.pf-select:focus {
  outline: none;
  border-color: var(--third-color);
}

.portfolio-list {
  padding: 40px 0 80px;
  background: var(--surface);
}

.pf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 22px;
}

.pf-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.pf-img {
  overflow: hidden;
  border-radius: 14px;
  position: relative;
}

.pf-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 15, 15, 0) 50%, rgba(15, 15, 15, 0.55) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pf-card:hover .pf-img::after { opacity: 1; }

.pf-img img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.pf-card:hover .pf-img img {
  transform: scale(1.06);
}

.pf-title {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--third-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  color: var(--third-color);
  line-height: 1.45;
}

.pf-sub {
  margin-top: 6px;
  padding-left: 12px;
  font-size: 12px;
  color: var(--gray);
  font-weight: 400;
}

.pf-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--gray);
  font-size: 14px;
  font-style: italic;
}

/* Testimonials full page */
.testimonials-page {
  padding: 30px 0 80px;
  background: var(--surface);
}

.t-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.t-card {
  border: 1.5px solid var(--third-color);
  padding: 28px 28px 22px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.t-card:hover {
  box-shadow: 0 10px 26px rgba(15, 15, 15, 0.15);
  transform: translateY(-3px);
}

.t-card-quote {
  font-size: 13px;
  line-height: 1.9;
  color: var(--gray);
  font-style: italic;
  margin-bottom: 22px;
  text-align: center;
  flex: 1;
}

.t-card-quote::before {
  content: "\201C";
  color: var(--third-color);
  font-size: 22px;
  font-weight: 700;
  margin-right: 6px;
  vertical-align: -2px;
}

.t-card-quote::after {
  content: "\201D";
  color: var(--third-color);
  font-size: 22px;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: -6px;
}

.t-card-person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--first-color);
}

.t-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--third-color);
}

.t-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t-card-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--third-color);
  margin-bottom: 2px;
}

.t-card-role {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--second-color);
}

/* ============================================
   TESTIMONIALS STATIC GRID (testimonials.html)
   All quotes visible at once, polished card design.
   ============================================ */
.t-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 30px 0 80px;
}

.t-item {
  position: relative;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 56px 30px 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.t-item:hover {
  transform: translateY(-6px);
  border-color: rgba(229, 9, 20, 0.45);
  box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.55);
}

.t-item-mark {
  position: absolute;
  top: -10px;
  left: 22px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 110px;
  font-weight: 700;
  color: var(--third-color);
  opacity: 0.22;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.t-item-quote {
  position: relative;
  z-index: 1;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
  font-style: italic;
  font-weight: 300;
  margin-bottom: 28px;
}

.t-item-by {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 1;
}

.t-item-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.t-item-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t-item-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--third-color);
  margin-bottom: 3px;
}

.t-item-role {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--gray);
}

@media (max-width: 900px) {
  .t-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
}

@media (max-width: 680px) {
  .t-grid { grid-template-columns: 1fr; gap: 16px; margin: 20px 0 60px; }
  .t-item { padding: 48px 22px 22px; }
  .t-item-mark { font-size: 90px; top: -6px; left: 16px; }
  .t-item-quote { font-size: 13px; }
}

/* ============================================
   (Old) TESTIMONIALS SPOTLIGHT SLIDER — kept for reference, unused now.
   ============================================ */
.t-slider {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 30px 60px 30px;
}

.t-slider-track {
  position: relative;
  min-height: 420px;
}

.t-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 30px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    visibility 0s linear 0.55s;
}

.t-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    visibility 0s linear 0s;
}

/* Decorative red opening quote in the background */
.t-slide-mark {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 200px;
  font-weight: 700;
  color: var(--third-color);
  opacity: 0.16;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.t-slide-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 28px;
  border: 3px solid var(--third-color);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.t-slide-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.t-slide-quote {
  font-size: 20px;
  line-height: 1.65;
  color: var(--text);
  font-weight: 300;
  font-style: italic;
  max-width: 720px;
  margin: 0 auto 28px;
  position: relative;
  z-index: 1;
}

.t-slide-by {
  position: relative;
  z-index: 1;
}

.t-slide-name {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--third-color);
  margin-bottom: 4px;
}

.t-slide-role {
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--gray);
}

/* Arrows */
.t-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(31, 31, 39, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 3;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.t-slider-arrow:hover {
  background: var(--third-color);
  border-color: var(--third-color);
  transform: translateY(-50%) scale(1.08);
}

.t-slider-prev { left: 0; }
.t-slider-next { right: 0; }

/* Dots */
.t-slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
}

.t-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, transform 0.25s ease;
}

.t-dot.is-active {
  background: var(--third-color);
  transform: scale(1.35);
}

.t-dot:hover {
  background: rgba(255, 255, 255, 0.55);
}

@media (max-width: 768px) {
  .t-slider { padding: 20px 12px; }
  .t-slider-track { min-height: 520px; }
  .t-slide { padding: 20px 14px; }
  .t-slide-mark { font-size: 130px; top: -4px; }
  .t-slide-quote { font-size: 15px; line-height: 1.65; }
  .t-slide-avatar { width: 84px; height: 84px; margin-bottom: 22px; border-width: 2px; }
  .t-slide-name { font-size: 12px; letter-spacing: 2px; }
  .t-slide-role { font-size: 10px; letter-spacing: 2px; }
  .t-slider-arrow { width: 40px; height: 40px; font-size: 12px; }
  .t-slider-prev { left: -8px; }
  .t-slider-next { right: -8px; }
  .t-slider-dots { margin-top: 24px; }
}

@media (max-width: 380px) {
  .t-slide-quote { font-size: 14px; }
  .t-slide-avatar { width: 72px; height: 72px; }
  .t-slider-arrow { width: 36px; height: 36px; }
}

/* Event management list page */
.ems-section {
  padding: 10px 0 80px;
  background: var(--surface);
}

.ems-heading {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--third-color);
  text-transform: uppercase;
  margin: 20px 0 24px;
  padding-left: 14px;
  border-left: 3px solid var(--third-color);
}

.ems-block {
  margin-bottom: 38px;
}

.ems-block-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.ems-list {
  list-style: decimal;
  padding-left: 22px;
  margin: 0;
}

.ems-list li {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 8px;
  padding-left: 6px;
}

.ems-list li::marker {
  color: var(--third-color);
  font-weight: 600;
}

.ems-text {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.9;
  padding-left: 4px;
}

/* Artists grid */
.artists-section {
  padding: 30px 0 80px;
  background: var(--surface);
}

.artists-heading {
  font-size: 22px;
  font-weight: 600;
  color: var(--third-color);
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.artists-section .section-heading {
  margin-top: 30px;
  margin-bottom: 40px;
}

.artists-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.artist-card {
  cursor: pointer;
}

.artist-img {
  overflow: hidden;
  border-radius: 14px;
  position: relative;
}

.artist-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 15, 15, 0) 50%, rgba(15, 15, 15, 0.55) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.artist-card:hover .artist-img::after {
  opacity: 1;
}

.artist-img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.artist-card:hover .artist-img img {
  transform: scale(1.06);
}

.artist-name {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--third-color);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--third-color);
  line-height: 1.4;
}

/* ============================================
   ABOUT PAGE — TABS & LAYOUT
   ============================================ */
.page-about .stats-banner.page-stats {
  margin-top: var(--header-h);
  padding: 60px 20px;
}

.page-tabs-wrap {
  position: relative;
  z-index: 5;
  background: var(--surface);
  border-bottom: 1px solid var(--border-gray);
  /* Top padding = header height + breathing room so the tabs sit clearly
     below the fixed header instead of being clipped by it. */
  padding: calc(var(--header-h) + 36px) 0 0;
}

.page-tabs {
  display: flex;
  gap: 28px;
  padding-bottom: 0;
}

.page-tab {
  background: none;
  border: none;
  padding: 12px 4px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--gray);
  cursor: pointer;
  position: relative;
  transition: color 0.25s ease;
}

.page-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--third-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.page-tab:hover {
  color: var(--third-color);
}

.page-tab.active {
  color: var(--third-color);
}

.page-tab.active::after {
  transform: scaleX(1);
}

.tab-panel {
  display: none;
  padding: 70px 0;
}

.tab-panel.active {
  display: block;
}

/* ============================================
   ABOUT TAB — cinematic split-screen
   ============================================ */

/* Make the about and timeline tabs full-bleed so the split can extend
   to viewport edges */
.tab-panel.about-section,
.tab-panel.timeline-section { padding: 0; }

.about-split {
  display: grid;
  grid-template-columns: 0.85fr 1.4fr;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 640px;
  background: var(--bg);
  position: relative;
}

.about-split-img {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 320px;
}

.about-split-img::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(229, 9, 20, 0.4) 50%,
    transparent 100%
  );
  z-index: 2;
}

.about-split-img-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 15, 30, 0) 35%, rgba(15, 15, 30, 0.8) 100%),
    linear-gradient(180deg, rgba(15, 15, 30, 0.2) 0%, rgba(15, 15, 30, 0.5) 100%);
  pointer-events: none;
}

.about-split-text {
  display: flex;
  align-items: center;
  padding: 90px 60px 90px 50px;
  background: var(--bg);
}

.about-split-inner {
  max-width: 540px;
}

.about-eyebrow {
  font-size: 12px;
  letter-spacing: 6px;
  font-weight: 700;
  color: var(--third-color);
  text-transform: uppercase;
  margin-bottom: 26px;
}

.about-manifesto {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 54px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: #ffffff;
  margin-bottom: 36px;
  text-transform: none;
}

.about-manifesto .dot { color: var(--third-color); }

.founder-role {
  font-size: 13px;
  letter-spacing: 3px;
  font-weight: 600;
  color: var(--gray);
  text-transform: uppercase;
  margin-top: -18px;
  margin-bottom: 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: inline-block;
}

.about-body p {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--gray);
  margin-bottom: 18px;
}

.about-body .about-tagline {
  font-style: italic;
  color: var(--third-color) !important;
  font-size: 15px !important;
  margin-top: 28px !important;
}

/* Divider band between the cinematic split-screen intro and the next
   section (video on About tab, year-scrub on Timeline tab). Slightly
   lighter surface + accent line gives a clear visual break. */
.tab-divider {
  background: var(--surface);
  padding: 56px 40px 50px;
  text-align: center;
  border-top: 1px solid var(--border-gray);
  border-bottom: 1px solid var(--border-gray);
}

.tab-divider-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--third-color);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.tab-divider-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
  line-height: 1.1;
}

.tab-divider-title .dot { color: var(--third-color); }

.tab-divider-line {
  display: block;
  width: 50px;
  height: 2px;
  background: var(--third-color);
  margin: 20px auto 0;
}

@media (max-width: 768px) {
  .tab-divider { padding: 40px 20px 36px; }
  .tab-divider-title { font-size: 22px; }
  .tab-divider-eyebrow { letter-spacing: 4px; }
}

.about-video-wrap {
  padding: 70px 40px 80px;
}

.about-video-wrap .about-video {
  max-width: 720px;
  margin: 0 auto;
  position: static;
}

/* Mobile: stack the split vertically */
@media (max-width: 900px) {
  .about-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .about-split-img {
    height: 42vh;
    min-height: 220px;
  }
  .about-split-img-overlay {
    background:
      linear-gradient(180deg, rgba(15, 15, 30, 0) 40%, rgba(15, 15, 30, 0.85) 100%);
  }
  .about-split-text {
    padding: 50px 24px 60px;
  }
  .about-manifesto {
    font-size: 34px;
    margin-bottom: 26px;
  }
  .about-eyebrow {
    margin-bottom: 18px;
    letter-spacing: 4px;
  }
  .about-video-wrap {
    padding: 40px 20px 50px;
  }
}

/* Extra-narrow phones (≤380px) — pull the cinematic headlines and partner
   logos in a touch more so nothing crowds the viewport edges. */
@media (max-width: 380px) {
  .about-manifesto { font-size: 28px; }
  .about-split-text { padding: 36px 18px 48px; }
  .about-eyebrow { letter-spacing: 3px; font-size: 11px; }
  .tab-divider { padding: 32px 16px 28px; }
  .tab-divider-title { font-size: 18px; }
  .tab-divider-eyebrow { letter-spacing: 3px; font-size: 11px; }
  .marquee-item { height: 56px; padding: 0 4px; }
  .marquee-item img { max-width: 110px; }
  .marquee-track { gap: 24px; }
  .partners-banner { padding: 50px 16px 60px; }
}

/* Legacy two-column about layout (kept for any other page that uses it) */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: start;
}

.about-text p {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 16px;
}

.about-tagline {
  margin-top: 22px;
  font-style: italic;
  color: var(--third-color) !important;
  font-size: 15px !important;
}

.about-video {
  position: sticky;
  top: 100px;
}

.video-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #0f0f0f;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(15, 15, 15, 0.18);
  cursor: pointer;
}

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

/* YouTube click-to-play facade */
.yt-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s ease, transform 0.4s ease;
}

.yt-facade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.5) 100%);
  z-index: 1;
  transition: opacity 0.3s ease;
}

.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(229, 9, 20, 0.92);
  color: white;
  border: 3px solid white;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.25s ease, background 0.25s ease;
  padding-left: 4px;
}

.yt-facade:hover .yt-thumb {
  filter: brightness(1.05);
  transform: scale(1.03);
}

.yt-facade:hover .yt-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--fourth-color);
}

.video-caption {
  margin-top: 12px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 3px;
  font-weight: 600;
  color: var(--gray);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.video-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--third-color);
  font-size: 11px;
  letter-spacing: 2px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.video-link i {
  color: #ff0000;
  font-size: 14px;
}

.video-link:hover {
  color: var(--text);
}

/* ============================================
   TIMELINE
   ============================================ */
.timeline {
  position: relative;
  padding: 30px 0 20px;
  max-width: 960px;
  margin: 0 auto;
}

.timeline-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--third-color);
  transform: translateX(-50%);
  opacity: 0.45;
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: start;
  margin-bottom: 50px;
}

.tl-year {
  grid-column: 2;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--fourth-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  justify-self: center;
  z-index: 2;
  box-shadow: 0 0 0 6px white, 0 6px 14px rgba(15, 15, 15, 0.35);
}

.tl-content {
  background: transparent;
}

.tl-item.left .tl-content {
  grid-column: 1;
  text-align: right;
  padding-right: 30px;
}

.tl-item.right .tl-content {
  grid-column: 3;
  text-align: left;
  padding-left: 30px;
}

.tl-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--third-color);
  margin-bottom: 10px;
  line-height: 1.4;
}

.tl-desc {
  font-size: 13px;
  line-height: 1.8;
  color: var(--gray);
  margin-bottom: 14px;
}

.tl-img {
  overflow: hidden;
  border-radius: 14px;
  max-width: 260px;
  margin-top: 14px;
}

.tl-item.left .tl-img {
  margin-left: auto;
}

.tl-img img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}

.tl-item:hover .tl-img img {
  transform: scale(1.05);
}

/* ============================================
   MAP
   ============================================ */
.map-section {
  position: relative;
  line-height: 0;
  background: var(--first-color);
}

.map-wrap {
  position: relative;
}

.map-section iframe {
  display: block;
  width: 100%;
  filter: saturate(1.05);
}

/* Floating CTA bottom-right */
.map-cta {
  position: absolute;
  bottom: 22px;
  right: 22px;
  background: var(--third-color);
  color: white;
  padding: 12px 22px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(15, 15, 15, 0.35);
  z-index: 3;
  transition: background 0.25s ease, transform 0.2s ease;
}

.map-cta:hover {
  background: var(--fourth-color);
  transform: translateY(-2px);
}

.map-cta i {
  font-size: 14px;
}

/* ============================================
   CONTACT
   ============================================ */
.contact {
  padding: 90px 0 80px;
  background: var(--surface);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 70px;
  align-items: start;
}

.contact-info .office {
  margin-bottom: 30px;
}

.office-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--third-color);
  margin-bottom: 10px;
}

.office-addr,
.office-phone {
  color: var(--gray);
  font-size: 13px;
  line-height: 1.8;
}

.office-phone .lbl {
  color: var(--third-color);
  font-weight: 600;
  margin-right: 6px;
}

.office-phone a {
  color: var(--gray);
  transition: color 0.2s ease;
}

.office-phone a:hover {
  color: var(--third-color);
}

/* form */
.contact-form .form-row {
  margin-bottom: 14px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--first-color);
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  color: var(--dark);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #999999;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--third-color);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.12);
}

.contact-form textarea {
  resize: vertical;
  min-height: 130px;
}

.form-captcha {
  margin: 14px 0 20px;
}

.captcha-box {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--first-color);
  border: 1px solid var(--border-gray);
  border-radius: 4px;
  padding: 12px 18px;
  font-size: 13px;
  color: var(--dark);
  cursor: pointer;
  user-select: none;
}

.captcha-box input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.captcha-checkmark {
  width: 22px;
  height: 22px;
  border: 2px solid #b5b5b5;
  border-radius: 3px;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease;
}

.captcha-box input[type="checkbox"]:checked + .captcha-checkmark {
  background: var(--third-color);
  border-color: var(--third-color);
}

.captcha-box input[type="checkbox"]:checked + .captcha-checkmark::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 11px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.btn-solid {
  display: inline-block;
  padding: 13px 38px;
  background: var(--third-color);
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 16px -6px rgba(15, 15, 15, 0.4);
}

.btn-solid:hover {
  background: var(--fourth-color);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(15, 15, 15, 0.55);
}

.form-status {
  font-size: 12px;
  color: var(--third-color);
  font-weight: 600;
  letter-spacing: 1px;
}

.form-status.error { color: #c0392b; }

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: var(--fourth-color);
  color: rgba(255, 255, 255, 0.85);
  padding: 18px 0;
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

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

.footer-logo .logo-circle {
  width: 36px;
  height: 36px;
  font-size: 18px;
  background: linear-gradient(135deg, var(--second-color), var(--third-color));
}

.footer-brand {
  color: white;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 400;
}

.footer-copy {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  letter-spacing: 1px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .header-inner { padding: 0 20px; }
  .main-nav ul { gap: 0; }
  .nav-link { padding: 8px 10px; font-size: 11px; letter-spacing: 1px; }
  .welcome-inner { grid-template-columns: 1fr; gap: 40px; }
  .quote-text { font-size: 16px; }
  .social-sidebar { display: none; }
  .header-social { display: none; }
  .services-grid { grid-template-columns: 1fr; }
  .stats-overlay { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
  .portfolio-grid,
  .portfolio-grid.four-col { grid-template-columns: repeat(2, 1fr); }
  .stat-num { font-size: 30px; }
  .partner-logo { flex: 0 0 calc((100% - 18px) / 2); }
  .testimonial-card { padding: 20px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .map-section iframe { height: 320px; }
  .footer-inner { padding: 0 20px; justify-content: center; text-align: center; }

  /* About page */
  .about-grid { grid-template-columns: 1fr; gap: 30px; }
  .about-video { position: static; }

  /* Timeline: single column, all content on right */
  .timeline-line { left: 35px; }
  .tl-item {
    grid-template-columns: 70px 1fr;
    gap: 18px;
  }
  .tl-year { grid-column: 1; }
  .tl-item.left .tl-content,
  .tl-item.right .tl-content {
    grid-column: 2;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
  }
  .tl-item.left .tl-img { margin-left: 0; }

  /* Service / artist pages */
  .service-banner { height: 240px; }
  .artists-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .artist-img img { height: 180px; }
  .t-cards-grid { grid-template-columns: 1fr; gap: 20px; }
  .t-card { padding: 22px 20px 18px; }

  /* Portfolio listing */
  .portfolio-top { flex-direction: column; align-items: stretch; }
  .portfolio-filters { gap: 14px; }
  .pf-filter { min-width: 0; flex: 1; }
  .pf-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .pf-img img { height: 140px; }

  /* Portfolio detail */
  .pf-detail { grid-template-columns: 1fr; gap: 24px; }
  .pf-events-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .pf-event-img img { height: 160px; }
  .pf-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pf-gal-item img { height: 180px; }
  .lightbox-close { top: 14px; right: 14px; width: 38px; height: 38px; }
  .lightbox-nav { width: 42px; height: 42px; }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
}

@media (max-width: 480px) {
  .pf-events-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .artists-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .logo-text { display: none; }
  .main-nav ul { flex-wrap: wrap; justify-content: flex-end; }
  .nav-link { padding: 6px 8px; font-size: 10px; }
  .welcome { padding: 60px 20px; }
  .welcome-small { font-size: 22px; }
  .welcome-title { font-size: 24px; }
  .section-inner { padding: 0 20px; }
  .services, .portfolio { padding: 60px 0 40px; }
  .stats-overlay { grid-template-columns: 1fr 1fr; }
  .section-small { font-size: 22px; }
  .section-title { font-size: 24px; }
}

/* ============================================================
   DESIGN v2 — Home-page mock (glassy + cinematic)
   Scoped to so other pages stay on the v1 look.
   ============================================================ */

/* --- Soft gradient page background (dark theme) --- */
body {
  background:
    radial-gradient(circle at 0% 0%,  rgba(229, 9, 20, 0.10), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(229, 9, 20, 0.10), transparent 45%),
    var(--bg);
}

/* --- Editorial title sizing (kept Montserrat) --- */
.welcome-title,
.section-title {
  font-weight: 700;
  letter-spacing: 1px;
}

.welcome-small,
.section-small {
  font-weight: 300;
  letter-spacing: 6px;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--gray);
}

.welcome-title { font-size: 38px; }
.section-title { font-size: 34px; }

/* --- Scroll-reveal animation --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-delay="1"] { transition-delay: 0.10s; }
[data-reveal-delay="2"] { transition-delay: 0.20s; }
[data-reveal-delay="3"] { transition-delay: 0.30s; }
[data-reveal-delay="4"] { transition-delay: 0.40s; }

/* --- Ken Burns slideshow --- */
.slide.active {
  animation: kenburns 10s linear forwards;
}
@keyframes kenburns {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  100% { transform: scale(1.12) translate3d(-1%, 0.6%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .slide { transform: none; transition: opacity 0.6s ease-in-out; }
  .slide.active { animation: none; transform: none; }
}

/* --- Diagonal section dividers --- */
.welcome,
.services,
.portfolio,
.testimonials,
.contact {
  position: relative;
}

.welcome::before,
.quote-banner::before,
.services::before,
.stats-banner::after,
.partners-banner::after {
  /* additive slanted edges via pseudo-elements (overlays already on .quote-banner/.stats-banner/.partners-banner remain) */
}

.quote-banner,
.stats-banner,
.partners-banner {
  clip-path: polygon(0 3.5%, 100% 0, 100% 96.5%, 0 100%);
  margin-top: -3vw;
  margin-bottom: -3vw;
}

.stats-banner { clip-path: polygon(0 0, 100% 3.5%, 100% 100%, 0 96.5%); }

/* --- Glassy welcome card --- */
.welcome-inner {
  position: relative;
}

.welcome-text {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.welcome-grid {
  gap: 16px;
}

.grid-img {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.55);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease;
  z-index: 1;
}

/* Subtle staggered vertical offsets — keeps the grid from feeling rigid */
.grid-img:nth-child(1) { transform: translateY(-8px); }
.grid-img:nth-child(4) { transform: translateY(8px); }

.grid-img:hover {
  transform: translateY(-10px);
  z-index: 5;
  box-shadow: 0 24px 40px -16px rgba(0, 0, 0, 0.7);
}

.grid-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 567 / 642;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}

.grid-img:hover img { transform: scale(1.06); }

/* --- Service cards: glassy + rounded --- */
.service-card {
  background: rgba(31, 31, 39, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  overflow: hidden;
  padding: 14px 14px 22px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 28px -14px rgba(15, 15, 15, 0.22);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -16px rgba(15, 15, 15, 0.32);
}

.service-img { border-radius: 12px; margin-bottom: 16px; }
.service-img img { height: 220px; }

.service-title,
.service-sub { padding-left: 6px; }

/* --- Portfolio cards: rounded + glassy hover --- */
.portfolio-card {
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.35s ease;
}

.portfolio-card:hover { transform: translateY(-4px); }
.portfolio-img { border-radius: 12px; }

/* --- Quote banner: cinematic letter spacing --- */
.quote-text {
  font-weight: 300;
  font-size: 24px;
  line-height: 1.6;
  letter-spacing: 2px;
}

/* --- Stats banner: glassy icon halos --- */
.stat-icon {
  position: relative;
  width: 70px;
  height: 70px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(31, 31, 39, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.stat-num {
  font-weight: 600;
  font-size: 44px;
  letter-spacing: 1px;
}

/* --- Testimonials carousel: glassy card --- */
.testimonial-card {
  background: rgba(31, 31, 39, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 16px 40px -14px rgba(15, 15, 15, 0.18);
  padding: 36px 40px;
}

.t-text {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.3px;
}

/* --- Contact form: floating glass card --- */
.contact-info,
.contact-form {
  position: relative;
  padding: 32px 30px;
  background: rgba(31, 31, 39, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 14px 30px -14px rgba(15, 15, 15, 0.18);
}

.contact-form input,
.contact-form textarea {
  background: rgba(31, 31, 39, 0.85);
  border-radius: 8px;
}

/* --- Footer accent above --- */
.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 24px;
  background: var(--fourth-color);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  transform: translateY(-100%);
}

/* --- Smaller adjustments --- */
@media (max-width: 900px) {
  .welcome-title { font-size: 32px; }
  .section-title { font-size: 30px; }
  .quote-banner,
  .stats-banner,
  .partners-banner { clip-path: none; margin-top: 0; margin-bottom: 0; }
  .grid-img:nth-child(1),
  .grid-img:nth-child(4) { transform: none; }
}

/* ============================================================
   DESIGN v2.1 — Home page restructure
   Sticky service reveal + bento portfolio + partners marquee
   ============================================================ */

/* ---- Sticky service reveal ---- */
.services-sticky {
  position: relative;
  background: var(--surface);
}

.services-pin-wrap {
  height: 210vh; /* 3 scenes × 70vh */
}

.services-pin {
  position: sticky;
  top: var(--header-h);
  height: min(80vh, 680px);
  overflow: hidden;
}

.service-scene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: center;
  padding: 30px 60px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.service-scene.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scene-text { padding-right: 30px; }

.scene-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--third-color);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.scene-title {
  font-size: 44px;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.05;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.scene-title .dot { color: var(--third-color); }

.scene-desc {
  font-size: 14px;
  line-height: 1.75;
  color: var(--gray);
  margin-bottom: 22px;
  max-width: 460px;
}

.scene-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px 12px 26px;
  border: 1.5px solid var(--third-color);
  border-radius: 999px;
  color: var(--third-color);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.scene-cta:hover {
  background: var(--third-color);
  color: white;
  transform: translateY(-2px);
}

.scene-cta .arrow {
  transition: transform 0.3s ease;
}

.scene-cta:hover .arrow { transform: translateX(4px); }

.scene-img {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 22px 50px -22px rgba(15, 15, 15, 0.32);
  height: 50vh;
  max-height: 460px;
}

.scene-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(229, 9, 20, 0.15), transparent 60%);
  pointer-events: none;
}

.scene-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.2s ease;
}

.service-scene.is-active .scene-img img {
  transform: scale(1);
}

/* Progress dots on the right */
.services-progress {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 10;
}

.services-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(229, 9, 20, 0.25);
  cursor: pointer;
  transition: all 0.35s ease;
  position: relative;
}

.services-progress-dot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.services-progress-dot.active {
  background: var(--third-color);
  transform: scale(1.6);
  box-shadow: 0 0 0 5px rgba(229, 9, 20, 0.15);
}

/* ---- Bento portfolio grid ---- */
.portfolio-grid.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 220px 220px 220px 220px;
  gap: 14px;
}

.portfolio-grid.bento .portfolio-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  margin: 0;
  cursor: pointer;
  height: 100%;
}

.portfolio-grid.bento .portfolio-card.pf-feat {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.portfolio-grid.bento .portfolio-card.pf-wide {
  grid-column: 3 / 5;
  grid-row: 2;
}

.portfolio-grid.bento .portfolio-card.pf-feat-2 {
  grid-column: 3 / 5;
  grid-row: 3 / 5;
}

.portfolio-grid.bento .portfolio-card.pf-wide-2 {
  grid-column: 1 / 3;
  grid-row: 4;
}

.portfolio-grid.bento .portfolio-img {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 0;
  width: 100%;
  height: 100%;
}

.portfolio-grid.bento .portfolio-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-grid.bento .portfolio-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(15, 15, 15, 0.82) 100%);
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.portfolio-grid.bento .portfolio-card:hover .portfolio-img img {
  transform: scale(1.05);
}

.portfolio-grid.bento .portfolio-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 22px 18px 22px;
  color: white;
  z-index: 2;
}

.portfolio-grid.bento .portfolio-title {
  color: white;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  line-height: 1.4;
  margin: 0 0 4px;
  padding-left: 12px;
  border-left: 2px solid white;
}

.portfolio-grid.bento .portfolio-card.pf-feat .portfolio-title,
.portfolio-grid.bento .portfolio-card.pf-feat-2 .portfolio-title {
  font-size: 16px;
}

.portfolio-grid.bento .portfolio-sub {
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0;
  padding-left: 14px;
}

/* ---- Partners marquee ---- */
.marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-top: 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.marquee-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: marquee-scroll 55s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-item {
  flex-shrink: 0;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}

.marquee-item img {
  height: 100%;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  opacity: 0.95;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.marquee-item:hover img {
  opacity: 1;
  transform: scale(1.08);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .services-pin-wrap { height: auto; }
  .services-pin {
    position: static;
    height: auto;
  }
  .service-scene {
    position: relative;
    inset: auto;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 60px 30px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .scene-title { font-size: 38px; }
  .scene-img { height: 50vh; }
  .services-progress { display: none; }

  .portfolio-grid.bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .portfolio-grid.bento .portfolio-card.pf-feat,
  .portfolio-grid.bento .portfolio-card.pf-wide,
  .portfolio-grid.bento .portfolio-card.pf-feat-2,
  .portfolio-grid.bento .portfolio-card.pf-wide-2 {
    grid-column: 1 / 3;
    grid-row: auto;
    height: 240px;
  }
  .portfolio-grid.bento .portfolio-card { height: 200px; }

  .marquee-item { height: 70px; }
}

/* ============================================================
   DESIGN v2.2 — Testimonials redesign (split layout)
   ============================================================ */

.testimonials .t-stage {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

/* Photo column — circular portrait */
.t-photos {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 280px;
  box-shadow: 0 22px 50px -20px rgba(15, 15, 15, 0.35);
}

.t-photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.t-photo.active {
  opacity: 1;
  transform: scale(1);
}

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

/* Purple gradient corner over the photo */
.t-photos::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(15, 15, 15, 0.45) 0%, transparent 35%),
    linear-gradient(0deg, rgba(15, 15, 15, 0.35) 0%, transparent 50%);
  pointer-events: none;
  z-index: 2;
}

/* Quote badge — circular, bottom-right of the avatar */
.t-mark {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--third-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 44px;
  line-height: 1;
  padding-top: 14px;
  box-sizing: border-box;
  z-index: 3;
  user-select: none;
  border: 3px solid white;
  box-shadow: 0 8px 18px -6px rgba(15, 15, 15, 0.5);
}

/* Content column */
.t-content {
  position: relative;
}

.t-quotes {
  position: relative;
  min-height: 280px;
}

.t-q {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.7s ease;
  pointer-events: none;
}

.t-q.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.t-q-text {
  position: relative;
  font-size: 16px;
  line-height: 1.85;
  color: var(--dark);
  font-style: italic;
  margin: 30px 0 32px;
  padding-left: 0;
}

/* Soft watermark quote behind the text */
.t-q-text::before {
  content: "\201C";
  position: absolute;
  top: -56px;
  left: -10px;
  font-family: Georgia, serif;
  font-size: 130px;
  line-height: 1;
  color: rgba(229, 9, 20, 0.10);
  z-index: 0;
  pointer-events: none;
}

.t-q-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--third-color);
  margin-bottom: 4px;
}

.t-q-role {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gray);
  text-transform: uppercase;
}

/* Avatar thumbs */
.t-thumbs {
  display: flex;
  gap: 14px;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid rgba(229, 9, 20, 0.12);
}

.t-thumb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  padding: 0;
  opacity: 0.55;
  filter: grayscale(0.4);
  transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.3s ease,
              filter 0.3s ease;
}

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

.t-thumb:hover {
  opacity: 0.9;
  filter: grayscale(0);
}

.t-thumb.active {
  opacity: 1;
  filter: grayscale(0);
  transform: scale(1.08);
  box-shadow: 0 6px 16px -6px rgba(15, 15, 15, 0.35);
}

/* Responsive */
@media (max-width: 900px) {
  .testimonials .t-stage {
    grid-template-columns: 1fr;
    gap: 56px;                       /* extra room so quote mark can't bleed up into photo */
    justify-items: center;
    text-align: center;
  }
  .t-photos {
    max-width: 200px;
    margin-top: 20px;                /* lower the photo from the section top */
  }
  .t-mark { width: 44px; height: 44px; font-size: 34px; padding-top: 10px; border-width: 2px; }
  .t-quotes { min-height: 320px; }
  .t-thumbs {
    justify-content: center;
    margin-top: 56px;                /* lower the thumbnail row on tablet/mobile */
    padding-top: 30px;
  }
  .t-q-text::before { top: -16px; }  /* keep the decorative quote inside the text column */
}

/* ============================================================
   DESIGN v2.3 — Contact section redesign
   ============================================================ */

.contact-v2 .section-heading.center {
  text-align: center;
  margin-bottom: 50px;
}

.contact-v2 .section-heading.center .title-underline {
  margin-left: auto;
  margin-right: auto;
}

/* Three info cards across the top */
.contact-info-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 50px;
}

.ci-card {
  background: rgba(31, 31, 39, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 20px;
  padding: 32px 28px 28px;
  text-align: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 10px 24px -14px rgba(15, 15, 15, 0.18);
}

.ci-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -16px rgba(15, 15, 15, 0.3);
}

.ci-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--second-color), var(--third-color));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  margin: 0 auto 20px;
  box-shadow: 0 10px 20px -8px rgba(15, 15, 15, 0.45);
}

.ci-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 10px;
}

.ci-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray);
  margin-bottom: 14px;
  min-height: 44px;
}

.ci-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--third-color);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ci-link:hover {
  color: var(--text);
  border-bottom-color: var(--text);
}

/* Form card */
.contact-form-v2 {
  max-width: 780px;
  margin: 0 auto;
  background: rgba(31, 31, 39, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  padding: 44px 44px 36px;
  box-shadow: 0 22px 50px -20px rgba(15, 15, 15, 0.25);
}

.form-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--third-color);
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.form-sub {
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 26px;
  line-height: 1.7;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ff-row {
  position: relative;
}

.ff-row.full { grid-column: 1 / -1; }

.ff-row input,
.ff-row textarea {
  width: 100%;
  padding: 22px 16px 10px;
  background: rgba(31, 31, 39, 0.85);
  border: 1.5px solid rgba(229, 9, 20, 0.18);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--dark);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  outline: none;
}

.ff-row textarea {
  resize: vertical;
  min-height: 110px;
  padding-top: 24px;
}

.ff-row label {
  position: absolute;
  top: 17px;
  left: 18px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  letter-spacing: 0.3px;
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease, letter-spacing 0.2s ease;
}

.ff-row input:focus + label,
.ff-row input:not(:placeholder-shown) + label,
.ff-row textarea:focus + label,
.ff-row textarea:not(:placeholder-shown) + label {
  top: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--third-color);
  text-transform: uppercase;
}

.ff-row input:focus,
.ff-row textarea:focus {
  border-color: var(--third-color);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.12);
}

/* --- Select field (matches input style + floating label) --- */
.ff-row select {
  width: 100%;
  padding: 22px 42px 10px 16px;
  background: rgba(31, 31, 39, 0.85);
  border: 1.5px solid rgba(229, 9, 20, 0.18);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--dark);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%23e50914' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}
.ff-row select:focus {
  border-color: var(--third-color);
  background-color: var(--surface);
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.12);
}
.ff-row select option {
  background: #1f1f27;
  color: #fff;
}
/* Select label floats when focused or a valid (non-empty) option is chosen */
.ff-row select:focus + label,
.ff-row select:valid + label {
  top: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--third-color);
  text-transform: uppercase;
}

.form-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.contact-form-v2 .btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
}

.contact-form-v2 .btn-solid i {
  font-size: 11px;
  transition: transform 0.3s ease;
}

.contact-form-v2 .btn-solid:hover i {
  transform: translateX(4px);
}

.contact-form-v2 .form-status {
  display: block;
  margin-top: 14px;
  text-align: right;
}

/* Responsive */
@media (max-width: 900px) {
  .contact-info-row { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-form-v2 { padding: 30px 24px; }
  .form-bottom { flex-direction: column; align-items: stretch; }
  .contact-form-v2 .btn-solid { justify-content: center; }
}

/* ============================================================
   Horizontal scroll-through timeline
   ============================================================ */

/* Hide the old vertical timeline rules — none of the .tl-h selectors
   conflict with .tl-item/.tl-year/.tl-img since the HTML no longer uses
   those, so the old CSS is now inert. */

.tl-h {
  position: relative;
  margin-top: 40px;
  padding: 0 20px;
}

.tl-h-window {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 20px 0 30px;
  /* Mask the left/right edges so cards fade in on scroll */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  scrollbar-width: none;
}

.tl-h-window::-webkit-scrollbar { display: none; }

/* Horizontal dashed line running through all the year markers */
.tl-h-line {
  position: absolute;
  top: 56px; /* aligned with the year-badge centre */
  left: 0;
  right: 0;
  border-top: 2px dashed rgba(229, 9, 20, 0.35);
  z-index: 1;
}

.tl-h-track {
  display: flex;
  gap: 28px;
  padding: 0 8px;
  width: max-content;
  position: relative;
  z-index: 2;
}

.tl-h-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-top: 0;
}

.tl-h-year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--fourth-color);
  color: white;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 0 auto 22px;
  box-shadow: 0 0 0 6px var(--white), 0 8px 18px -6px rgba(15, 15, 15, 0.5);
  position: relative;
  z-index: 3;
}

.tl-h-img {
  overflow: hidden;
  border-radius: 14px;
  margin-bottom: 16px;
  box-shadow: 0 14px 30px -14px rgba(15, 15, 15, 0.3);
}

.tl-h-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.tl-h-card:hover .tl-h-img img {
  transform: scale(1.05);
}

.tl-h-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--third-color);
  margin-bottom: 10px;
  line-height: 1.4;
  text-transform: uppercase;
  padding: 0 8px;
}

.tl-h-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray);
  padding: 0 8px;
}

/* Arrow buttons */
.tl-h-arrow {
  position: absolute;
  top: 130px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--third-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 8px 20px -6px rgba(15, 15, 15, 0.45);
  transition: background 0.25s ease, transform 0.2s ease, opacity 0.2s ease;
}

.tl-h-arrow:hover:not(:disabled) {
  background: var(--fourth-color);
  transform: scale(1.08);
}

.tl-h-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.tl-h-arrow.prev { left: -8px; }
.tl-h-arrow.next { right: -8px; }

/* Progress bar */
.tl-h-progress {
  height: 3px;
  background: rgba(229, 9, 20, 0.15);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 6px;
}

.tl-h-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--third-color), var(--fourth-color));
  border-radius: 99px;
  transition: width 0.2s ease;
}

@media (max-width: 700px) {
  .tl-h-card { flex: 0 0 270px; }
  .tl-h-arrow { display: none; }
  .tl-h { padding: 0 8px; }
  .tl-h-img img { height: 170px; }
}

/* ============================================================
   VERTICAL-SCRUB TIMELINE (about page)
   Full-bleed bg image that crossfades as the user scrolls between
   milestones. Year rail down the centre, with the active year scaled
   up to hero size. Description card pinned in the upper-right.
   ============================================================ */

/* ============================================================
   PAGE LOADER (shown until window.load fires)
   Brand wordmark + equalizer bars — on-brand for an events agency.
   ============================================================ */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.page-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* fully out of the layout once done, so it can't possibly clip the
     fixed header during back/forward navigation */
  display: none;
}

.page-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.page-loader-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  font-family: 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 900;
  color: #ffffff;
  user-select: none;
  animation: pl-pulse 2.4s ease-in-out infinite;
}
.page-loader-jfk { font-size: 56px; letter-spacing: 4px; }
.page-loader-tag {
  font-size: 11px;
  letter-spacing: 8px;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.85);
}

.page-loader-bars {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 34px;
}
.page-loader-bars span {
  display: block;
  width: 4px;
  height: 8px;
  background: var(--third-color);
  border-radius: 4px;
  animation: pl-bar 1.1s ease-in-out infinite;
}
.page-loader-bars span:nth-child(1) { animation-delay: 0s; }
.page-loader-bars span:nth-child(2) { animation-delay: 0.12s; }
.page-loader-bars span:nth-child(3) { animation-delay: 0.24s; }
.page-loader-bars span:nth-child(4) { animation-delay: 0.36s; }
.page-loader-bars span:nth-child(5) { animation-delay: 0.48s; }

@keyframes pl-bar {
  0%, 100% { height: 8px;  opacity: 0.45; }
  50%      { height: 34px; opacity: 1; }
}
@keyframes pl-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.78; }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader-bars span { animation: none; height: 18px; opacity: 1; }
  .page-loader-mark      { animation: none; }
}

.vt-timeline {
  position: relative;
  background: var(--bg);
  height: calc(100vh - var(--header-h));
  width: 100%;
  overflow: hidden;
}

.vt-stage {
  position: absolute;
  inset: 0;
}

.vt-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.vt-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1),
    transform 10s cubic-bezier(0.22, 1, 0.36, 1);
}

.vt-bg-layer.is-active {
  opacity: 1;
  transform: scale(1);
}

.vt-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(15, 15, 30, 0.55) 0%, rgba(15, 15, 30, 0.55) 100%),
    linear-gradient(90deg, rgba(15, 15, 30, 0.15) 0%, rgba(15, 15, 30, 0.55) 100%);
  pointer-events: none;
}

.vt-rail {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  pointer-events: none;
}

.vt-rail::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.22);
  transform: translateX(-0.5px);
}

.vt-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
}

.vt-year {
  position: absolute;
  right: calc(50% + 22px);
  font-family: 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.55);
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
  user-select: none;
  line-height: 0.9;
}

.vt-item.is-active .vt-year {
  font-size: 120px;
  color: #ffffff;
  letter-spacing: 2px;
}

.vt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: all 0.5s ease;
  position: relative;
  z-index: 1;
}

.vt-item.is-active .vt-dot {
  background: #ffffff;
  width: 14px;
  height: 14px;
  box-shadow: 0 0 0 4px rgba(229, 9, 20, 0.45);
}

.vt-card {
  position: absolute;
  /* `top` is set dynamically by JS to align with the active year.
     translateY(-50%) makes the card's vertical centre match the year's. */
  top: 50%;
  right: 60px;
  z-index: 4;
  max-width: 380px;
  text-align: right;
  color: #ffffff;
  transform: translateY(-50%);
  transition: top 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.45s ease;
}

.vt-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 5px;
  color: var(--third-color);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.vt-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1.2;
  text-transform: uppercase;
}

.vt-desc {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
}

.vt-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-size: 10px;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: vtHint 2.4s ease-in-out infinite;
}
.vt-hint i { font-size: 11px; }

@keyframes vtHint {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
  50%      { transform: translate(-50%, 4px); opacity: 1; }
}

/* Year rail items are clickable (pointer cursor + restore pointer-events
   so the user can jump straight to a year, useful on touch where scroll
   speed makes scrubbing awkward). */
.vt-item { pointer-events: auto; cursor: pointer; }
.vt-item:hover .vt-year { color: rgba(255, 255, 255, 0.85); }
.vt-item:hover .vt-dot  { background: #ffffff; }

/* Remove the .tab-panel's default bottom padding under the timeline so the
   section ends flush with the last milestone — no dead space before footer. */
.tab-panel.timeline-section { padding-bottom: 0; }

@media (max-width: 768px) {
  /* Smaller active year so it doesn't crowd adjacent rail items */
  .vt-rail { padding: 50px 0; }
  .vt-item.is-active .vt-year { font-size: 34px; letter-spacing: 1px; }
  .vt-year { right: calc(50% + 12px); font-size: 11px; }

  /* Card lives on the RIGHT half of the viewport and follows the active
     year's vertical position (JS sets `top`). Translucent backdrop keeps
     the text legible over the photo. */
  .vt-card {
    bottom: auto;
    right: 14px;
    left: auto;
    max-width: none;
    width: calc(50% - 24px);
    text-align: left;
    background: rgba(15, 15, 30, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 14px 14px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .vt-title { font-size: 15px; margin-bottom: 8px; line-height: 1.25; }
  .vt-desc { font-size: 12px; line-height: 1.6; }
  .vt-eyebrow { font-size: 10px; letter-spacing: 4px; margin-bottom: 6px; }
  .vt-hint { display: none; }
}

/* Extra-narrow phones — give the card a touch less width so the year
   column on the left stays readable */
@media (max-width: 380px) {
  .vt-item.is-active .vt-year { font-size: 30px; }
  .vt-card { width: calc(50% - 16px); right: 10px; padding: 12px; }
  .vt-title { font-size: 14px; }
  .vt-desc { font-size: 11px; }
}

/* ============================================================
   MOBILE RESPONSIVE — comprehensive pass
   ============================================================ */

/* Hamburger button (hidden on desktop) */
.nav-toggle {
  display: none;
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 1100;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--third-color);
  margin: 5px auto;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Prevent horizontal scroll everywhere */
html, body { overflow-x: hidden; }

/* ============ Phone (<= 768px) ============ */
@media (max-width: 768px) {

  /* ---- Header / Nav drawer ---- */
  .header-inner { padding: 0 18px; position: relative; }
  .logo-img { height: 38px; }
  .brand-logo-mark { font-size: 24px; letter-spacing: 1.5px; }
  .brand-logo-tag  { font-size: 6px; letter-spacing: 3px; }
  .header-social { display: none; }
  .nav-toggle { display: block; }

  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(31, 31, 39, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--border-gray);
    padding: 24px 18px 32px;
    box-shadow: none;
    /* Fully hidden when closed — translate up AND set visibility:hidden so
       it cannot bleed through the header's backdrop-filter (which blurs
       whatever sits behind it, even at lower z-index). */
    transform: translateY(-100%);
    visibility: hidden;
    opacity: 0;
    transition:
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.25s ease,
      visibility 0s linear 0.35s;
    z-index: 999;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }

  body.nav-open .main-nav {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    box-shadow: 0 16px 30px -10px rgba(15, 15, 15, 0.4);
    /* When opening, visibility flips to visible IMMEDIATELY (no delay),
       so the slide-in animation is visible from the start. */
    transition:
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.25s ease,
      visibility 0s linear 0s;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
  }

  .nav-link {
    display: block;
    padding: 14px 18px;
    font-size: 13px;
    letter-spacing: 2px;
    text-align: left;
    border-radius: 12px;
  }

  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, 0.35);
    z-index: 998;
    animation: fadeIn 0.25s ease;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* ---- Hero / slideshow ---- */
  .hero { height: 70vh; min-height: 480px; }
  .slide-arrow { width: 36px; height: 36px; }
  .slide-arrow.prev { right: 60px; left: auto; }
  .slide-arrow.next { right: 12px; }

  /* ---- Welcome section ---- */
  .welcome { padding: 60px 20px 50px; }
  .welcome-inner { grid-template-columns: 1fr; gap: 30px; }
  .welcome-title { font-size: 28px !important; }
  .welcome-small { font-size: 22px; }
  .welcome-text { padding: 28px 24px !important; }
  .grid-img:nth-child(1),
  .grid-img:nth-child(4) { transform: none; }
  /* aspect-ratio on .grid-img img handles sizing — no fixed height needed */

  /* ---- Quote banner ---- */
  .quote-banner {
    padding: 70px 20px;
    clip-path: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .quote-text {
    font-size: 16px !important;
    letter-spacing: 1px !important;
    line-height: 1.6 !important;
  }

  /* ---- Sticky services -> stack vertically ---- */
  .services-pin-wrap { height: auto !important; }
  .services-pin {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  .service-scene {
    position: relative !important;
    inset: auto !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 50px 20px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    border-bottom: 1px solid rgba(229, 9, 20, 0.1);
  }
  .scene-title { font-size: 32px !important; line-height: 1.1; }
  .scene-img { height: 220px !important; }
  .services-progress { display: none !important; }

  /* ---- Stats banner ---- */
  .stats-banner {
    padding: 60px 20px;
    clip-path: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* About page: stats banner is the first section after the fixed header,
     so it needs to clear --header-h or the photos overlap the header. */
  .page-about .stats-banner.page-stats {
    margin-top: var(--header-h) !important;
  }
  .stats-overlay { grid-template-columns: 1fr 1fr; gap: 30px 16px; }
  .stat-num { font-size: 30px !important; }
  .stat-label { font-size: 9px; }
  .stat-icon { width: 54px !important; height: 54px !important; }
  .stat-icon img { max-height: 30px; }

  /* ---- Portfolio bento -> single column ---- */
  .portfolio { padding: 60px 0 50px; }
  .portfolio-grid.bento {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 14px;
  }
  .portfolio-grid.bento .portfolio-card,
  .portfolio-grid.bento .portfolio-card.pf-feat,
  .portfolio-grid.bento .portfolio-card.pf-wide,
  .portfolio-grid.bento .portfolio-card.pf-feat-2,
  .portfolio-grid.bento .portfolio-card.pf-wide-2 {
    grid-column: 1;
    grid-row: auto;
    height: 220px;
  }
  .portfolio-grid.bento .portfolio-title { font-size: 12px; }
  .portfolio-grid.bento .portfolio-card.pf-feat .portfolio-title,
  .portfolio-grid.bento .portfolio-card.pf-feat-2 .portfolio-title { font-size: 13px; }

  /* ---- Partners marquee ---- */
  .partners-banner {
    padding: 50px 16px;
    clip-path: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .partners-title { font-size: 18px; letter-spacing: 2px; }
  .marquee-item { height: 64px; }
  .marquee-item img { max-width: 130px; }

  /* ---- Testimonials home ---- */
  .testimonials { padding: 60px 0 40px; }
  .testimonials .t-stage {
    grid-template-columns: 1fr;
    gap: 48px;                       /* clear of the decorative quote mark */
    justify-items: center;
    text-align: center;
  }
  .t-photos {
    max-width: 200px;
    margin-top: 16px;                /* lower the photo from the section top */
  }
  .t-q-text { font-size: 14px !important; line-height: 1.7 !important; }
  .t-q-text::before { font-size: 80px; top: -10px; }
  .t-thumbs {
    justify-content: center;
    margin-top: 60px;                /* lower the thumbnail row on mobile */
    padding-top: 32px;
  }

  /* ---- Map ---- */
  .map-section iframe { height: 280px; }
  .map-cta {
    bottom: 14px;
    right: 14px;
    padding: 10px 16px;
    font-size: 11px;
  }

  /* ---- Contact ---- */
  .contact { padding: 60px 0 60px; }
  .contact-info-row {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
  }
  .ci-card { padding: 24px 20px; }
  .ci-text { min-height: 0; }
  .contact-form-v2 { padding: 28px 22px; border-radius: 18px; }
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .form-bottom { flex-direction: column; align-items: stretch; gap: 14px; }
  .contact-form-v2 .btn-solid { justify-content: center; }
  .form-title { font-size: 20px; }

  /* ---- Section headings ---- */
  .section-heading { margin-bottom: 30px; }
  .section-small { font-size: 20px !important; letter-spacing: 4px; }
  .section-title { font-size: 28px !important; }

  /* ---- Footer ---- */
  .footer-inner {
    flex-direction: column;
    gap: 14px;
    padding: 14px 20px;
    text-align: center;
  }

  /* ---- Service / portfolio detail pages ---- */
  .service-banner { height: 200px !important; }
  .service-intro { padding: 40px 0 30px; }
  .crumb { font-size: 11px; }
  .pf-detail {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .pf-detail-img {
    width: 100% !important;
    max-width: 280px;
    height: 180px !important;
    margin: 0 auto;
  }
  .pf-detail-title { font-size: 17px; }
  .pf-events-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pf-event-img img { height: 130px; }

  /* Galleries */
  .pf-gallery { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .pf-gal-item img { height: 140px; }

  /* Portfolio listing */
  .portfolio-top {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .portfolio-filters { gap: 12px; }
  .pf-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
  }
  .pf-img img { height: 110px; }
  .pf-title { font-size: 10px; }

  /* About page */
  .page-tabs-wrap { padding: calc(var(--header-h) + 24px) 0 0; }
  .page-tabs { gap: 20px; padding: 0 20px; }
  .page-tab { font-size: 11px; letter-spacing: 2px; padding: 10px 4px 12px; }
  .tab-panel { padding: 50px 0; }
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .about-video { position: static; }

  /* Artist management page */
  .artists-section { padding: 30px 0 60px; }
  .artists-grid { grid-template-columns: 1fr 1fr !important; gap: 14px; }
  .artist-img img { height: 160px; }

  /* Events Management page */
  .ems-section { padding: 10px 0 50px; }
  .ems-block-title { font-size: 14px; }
  .ems-list li { font-size: 13px; }

  /* Testimonials full page */
  .testimonials-page { padding: 30px 0 60px; }
  .t-cards-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Lightbox */
  .lightbox-img { max-width: 96%; }
  .lightbox-close { width: 36px; height: 36px; }
  .lightbox-nav { width: 38px; height: 38px; }
}

/* ============ Small phones (<= 380px) ============ */
@media (max-width: 380px) {
  .scene-title { font-size: 26px !important; }
  .quote-text { font-size: 14px !important; }
  .stats-overlay { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .stat-num { font-size: 26px !important; }
  .ci-card { padding: 22px 16px; }
  .form-title { font-size: 18px; }
  .pf-grid,
  .artists-grid,
  .pf-events-grid,
  .pf-gallery {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   3D mouse-tilt effect (desktop only — toggled by JS)
   ============================================================ */
.is-tilt {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease;
}

/* While mouse is moving over the card, JS removes the transition
   so the tilt tracks the cursor instantly. On mouseleave the JS sets
   the reset transform and the transition above eases it back. */
.is-tilt:hover {
  /* Deeper purple glow as a depth cue when tilted */
  box-shadow:
    0 14px 30px -10px rgba(15, 15, 15, 0.28),
    0 6px 14px -8px rgba(15, 15, 15, 0.20);
}

/* Disable existing hover transforms on tilt cards so the JS transform
   isn't fighting CSS :hover translateY rules. */
.is-tilt.service-card:hover,
.is-tilt.portfolio-card:hover,
.is-tilt.pf-card:hover,
.is-tilt.pf-event-card:hover,
.is-tilt.t-card:hover,
.is-tilt.ci-card:hover,
.is-tilt.artist-card:hover,
.is-tilt.tl-h-card:hover {
  transform: none; /* let JS-driven inline transform take over */
}

/* Disable tilt entirely on touch — JS already gates this, but belt-and-braces */
@media (hover: none) {
  .is-tilt {
    transform: none !important;
  }
}
/* ============================================================
   Services — rich split scenes (statically stacked, no scroll anim)
   ============================================================ */
.services-rich {
  position: relative;
  padding: 90px 0 60px;
  background: var(--surface);
}

.service-scene-static {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 40px 0;
}

.service-scene-static + .service-scene-static {
  border-top: 1px solid rgba(229, 9, 20, 0.08);
  padding-top: 60px;
  margin-top: 20px;
}

/* Alternate sides: every other row flips image/text positions */
.service-scene-static.reverse .scene-text { order: 2; }
.service-scene-static.reverse .scene-img  { order: 1; }

.service-scene-static .scene-text {
  padding: 20px 0;
}

.service-scene-static .scene-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--third-color);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.service-scene-static .scene-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.05;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.service-scene-static .scene-title .dot { color: var(--third-color); }

.service-scene-static .scene-desc {
  font-size: 14px;
  line-height: 1.8;
  color: var(--gray);
  margin-bottom: 24px;
  max-width: 460px;
}

.service-scene-static .scene-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px 12px 26px;
  border: 1.5px solid var(--third-color);
  border-radius: 999px;
  color: var(--third-color);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.service-scene-static .scene-cta:hover {
  background: var(--third-color);
  color: white;
  transform: translateY(-2px);
}

.service-scene-static .scene-cta .arrow {
  transition: transform 0.3s ease;
}

.service-scene-static .scene-cta:hover .arrow { transform: translateX(4px); }

.service-scene-static .scene-img {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 22px 50px -22px rgba(15, 15, 15, 0.32);
  height: 360px;          /* match the image — no gap below */
  max-height: none;       /* override the legacy 460px cap */
  line-height: 0;         /* belt-and-braces against inline-image baseline */
}

.service-scene-static .scene-img img {
  width: 100%;
  height: 100%;           /* fill the parent exactly */
  object-fit: cover;
  display: block;
  transform: scale(1);    /* cancel the legacy permanent scale(1.04) */
  transition: transform 0.6s ease;
}

.service-scene-static .scene-img:hover img {
  transform: scale(1.04);
}

@media (max-width: 900px) {
  .service-scene-static {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 0;
  }
  .service-scene-static.reverse .scene-text { order: unset; }
  .service-scene-static.reverse .scene-img  { order: unset; }
  .service-scene-static .scene-title { font-size: 28px; }
  /* Match container to image — prevents the empty gap below the photo */
  .service-scene-static .scene-img { height: 260px; }
}
@media (max-width: 600px) {
  .service-scene-static .scene-img { height: 220px; }
}
/* ============================================================
   UNIFIED ELEVATION SYSTEM
   Consistent resting shadow + lift-on-hover for every interactive
   card/button, modelled after the contact form's SEND MESSAGE button.
   Placed last in the stylesheet so it takes precedence over the
   per-component hover rules defined earlier.
   ============================================================ */

/* Cards — soft drop-shadow at rest, deeper shadow + 4px lift on hover */
.portfolio-card,
.pf-card,
.pf-event-card,
.ci-card,
.service-card,
.artist-card,
.grid-img,
.t-item,
.pf-gal-item {
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  will-change: transform;
}

.portfolio-card:hover,
.pf-card:hover,
.pf-event-card:hover,
.ci-card:hover,
.service-card:hover,
.artist-card:hover,
.grid-img:hover,
.t-item:hover,
.pf-gal-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.6);
}

/* Buttons — same elevation pattern; the existing .btn-solid already does
   this, the others get aligned to it. */
.btn-solid,
.btn-outline,
.scene-cta,
.ci-link {
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    background 0.3s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.btn-solid:hover,
.btn-outline:hover,
.scene-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -8px rgba(0, 0, 0, 0.55);
}

/* Page tabs (about page) — subtle lift on hover so they feel clickable */
.page-tab {
  transition:
    color 0.25s ease,
    transform 0.2s ease;
}
.page-tab:hover { transform: translateY(-1px); }

/* Slider arrows + nav-toggle — keep their existing styles but add the
   floating shadow at rest so they don't look flat */
.t-slider-arrow,
.tl-h-arrow {
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.55);
}

/* Polaroid grid uses the same lift but slightly more pronounced because
   the photos read as physical objects */
.grid-img:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px -10px rgba(0, 0, 0, 0.65);
}

/* Reduced motion — disable the lift but keep colour/shadow transitions */
@media (prefers-reduced-motion: reduce) {
  .portfolio-card:hover,
  .pf-card:hover,
  .pf-event-card:hover,
  .ci-card:hover,
  .service-card:hover,
  .artist-card:hover,
  .grid-img:hover,
  .t-item:hover,
  .pf-gal-item:hover,
  .btn-solid:hover,
  .btn-outline:hover,
  .scene-cta:hover { transform: none; }
}

/* ============================================================
   JFK THE AGENCY — HOME PAGE ADDITIONS
   ============================================================ */

/* Hero split layout — text panel left, slideshow right */
.hero.hero-split {
  display: block;
  position: relative;
  width: 100%;
  margin-top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow: hidden;
}

.hero-split .slideshow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.hero-split .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* Subtle dark wash over the slideshow — keeps the image bright, gently darkens left edge for text */
.hero-split .slideshow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(15, 15, 30, 0.45) 0%,
    rgba(15, 15, 30, 0.25) 35%,
    rgba(15, 15, 30, 0.05) 65%,
    rgba(15, 15, 30, 0.20) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.hero-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: clamp(420px, 46%, 640px);
  display: flex;
  align-items: center;
  padding: 60px 64px;
  z-index: 3;
  background: linear-gradient(
    90deg,
    rgba(15, 15, 30, 0.55) 0%,
    rgba(15, 15, 30, 0.28) 65%,
    rgba(15, 15, 30, 0) 100%
  );
}

.hero-panel::before {
  display: none;
}

.hero-panel-inner {
  max-width: 520px;
  color: #fff;
}

.hero-rule {
  display: block;
  width: 56px;
  height: 3px;
  background: var(--pink);
  margin-bottom: 28px;
}

.hero-eyebrow {
  font-size: 12px;
  letter-spacing: 5px;
  font-weight: 600;
  color: var(--pink);
  margin-bottom: 22px;
  text-transform: uppercase;
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 18px;
  text-transform: uppercase;
  color: #fff;
}

.hero-mark {
  font-size: clamp(60px, 8vw, 120px);
  letter-spacing: 4px;
  line-height: 0.95;
}

.hero-tag {
  font-size: clamp(13px, 1.4vw, 20px);
  letter-spacing: clamp(8px, 1.2vw, 16px);
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.92);
}

/* Slide-in animation: enters from left, settles into place */
@keyframes heroTitleSlideIn {
  0%   { opacity: 0; transform: translateX(-80px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}

.hero-title-slide {
  opacity: 0;
  animation: heroTitleSlideIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

.hero-subtitle {
  font-size: clamp(16px, 1.95vw, 26px);
  font-weight: 400;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 22px;
  letter-spacing: 0.3px;
  font-style: italic;
}

.hero-lead {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 16px;
}

.hero-sub {
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 32px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* New CTA buttons — bolder, with icon, clean hover */
.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-hero i {
  font-size: 11px;
  transition: transform 0.3s ease;
}

.btn-hero:hover i {
  transform: translateX(4px);
}

.btn-hero-primary {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 6px 20px -8px rgba(229, 9, 20, 0.6);
}

.btn-hero-primary:hover {
  background: var(--pink-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -8px rgba(229, 9, 20, 0.7);
}

.btn-hero-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-hero-ghost:hover {
  border-color: var(--pink);
  color: var(--pink);
  background: rgba(229, 9, 20, 0.05);
}

/* Hero scroll-down anchor sits over both columns */
.hero-split .scroll-down {
  z-index: 5;
}

/* Tablet — slightly narrower overlay panel */
@media (max-width: 1080px) {
  .hero-panel {
    width: clamp(380px, 52%, 560px);
    padding: 48px 40px;
  }
  .hero-rule { width: 44px; margin-bottom: 22px; }
}

/* Mobile — full-width overlay covering the slideshow */
@media (max-width: 820px) {
  .hero.hero-split {
    height: calc(100vh - var(--header-h));
    min-height: 560px;
  }
  .hero-panel {
    width: 100%;
    padding: 56px 28px 44px;
    background: linear-gradient(
      180deg,
      rgba(15, 15, 30, 0.65) 0%,
      rgba(15, 15, 30, 0.4) 55%,
      rgba(15, 15, 30, 0.65) 100%
    );
  }
  .hero-panel::before { display: none; }
  .hero-panel-inner { max-width: 100%; }
  .hero-eyebrow { font-size: 11px; letter-spacing: 3px; margin-bottom: 16px; }
  .hero-title { margin-bottom: 14px; }
  .hero-mark { font-size: clamp(48px, 11vw, 78px); letter-spacing: 3px; }
  .hero-tag  { font-size: clamp(11px, 2.5vw, 15px); letter-spacing: 6px; }
  .hero-subtitle { font-size: clamp(14px, 3.4vw, 19px); margin-bottom: 18px; }
  .hero-lead { font-size: 13px; }
  .hero-sub { font-size: 11px; letter-spacing: 1.5px; margin-bottom: 28px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .btn-hero { justify-content: center; padding: 14px 22px; }
}

@media (max-width: 440px) {
  .hero-panel { padding: 44px 20px 36px; }
  .hero-rule { width: 36px; height: 2px; margin-bottom: 18px; }
}

/* Proof / "The Record" — split layout: text list left, big image right */
.proof-split {
  display: grid;
  grid-template-columns: minmax(480px, 1.4fr) 0.85fr;
  background: var(--bg);
  position: relative;
}

.proof-panel {
  background:
    linear-gradient(135deg, rgba(229, 9, 20, 0.05) 0%, rgba(15, 15, 30, 0) 55%),
    var(--bg);
  padding: 90px 64px;
  position: relative;
}

.proof-panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(229, 9, 20, 0.4) 50%,
    transparent 100%
  );
}

.proof-panel-inner {
  max-width: 540px;
  color: #fff;
}

.proof-rule {
  display: block;
  width: 56px;
  height: 3px;
  background: var(--pink);
  margin-bottom: 24px;
}

.proof-eyebrow {
  font-size: 12px;
  letter-spacing: 5px;
  font-weight: 600;
  color: var(--pink);
  margin-bottom: 18px;
  text-transform: uppercase;
}

.proof-title {
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin-bottom: 40px;
  text-transform: uppercase;
}

.proof-title .dot { color: var(--pink); }

.proof-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.proof-list-item {
  border-left: 2px solid var(--pink);
  padding: 4px 0 4px 18px;
}

.proof-h {
  font-size: 13px;
  letter-spacing: 3px;
  font-weight: 700;
  color: var(--pink);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.proof-p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
}

.proof-image {
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 520px;
}

.proof-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(15, 15, 30, 0.55) 0%,
    rgba(15, 15, 30, 0) 35%,
    rgba(15, 15, 30, 0) 70%,
    rgba(15, 15, 30, 0.25) 100%
  );
  pointer-events: none;
}

@media (max-width: 1080px) {
  .proof-split { grid-template-columns: 1.3fr 1fr; }
  .proof-panel { padding: 70px 40px; }
  .proof-rule { width: 44px; margin-bottom: 20px; }
  .proof-image { min-height: 460px; }
}

@media (max-width: 820px) {
  .proof-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto 320px;
  }
  .proof-panel { padding: 60px 28px 50px; }
  .proof-panel::after { display: none; }
  .proof-panel-inner { max-width: 100%; }
  .proof-image { min-height: 0; }
}

@media (max-width: 440px) {
  .proof-panel { padding: 50px 20px 40px; }
  .proof-rule { width: 36px; height: 2px; margin-bottom: 16px; }
  .proof-h { font-size: 12px; letter-spacing: 2px; }
  .proof-p { font-size: 13px; }
  .proof-list { gap: 22px; }
}

/* Partner notes intro — sits above the testimonials stage */
.partner-notes-intro {
  max-width: 820px;
  margin: 0 auto 48px;
  text-align: center;
  font-size: 15px;
  line-height: 1.75;
  color: var(--gray);
  padding: 0 20px;
}

/* Closing CTA lead — sits above the inquiry form */
.closing-cta-lead {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: 16px;
  line-height: 1.75;
  color: var(--gray);
  padding: 0 20px;
}

@media (max-width: 540px) {
  .partner-notes-intro,
  .closing-cta-lead { font-size: 14px; line-height: 1.65; }
}

/* Regional direct lines — quick-contact strip above the inquiry form */
.regional-lines {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 920px;
  margin: 0 auto 44px;
  padding: 0 20px;
}

.rl-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(31, 31, 39, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.rl-card:hover {
  transform: translateY(-3px);
  border-color: rgba(229, 9, 20, 0.6);
  background: rgba(31, 31, 39, 0.85);
  box-shadow: 0 14px 28px -14px rgba(229, 9, 20, 0.35);
}

.rl-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--second-color), var(--third-color));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: 0 8px 16px -8px rgba(229, 9, 20, 0.55);
}

.rl-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.rl-region {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gray);
}

.rl-number {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .regional-lines { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .regional-lines {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 32px;
  }
  .rl-card { padding: 14px 16px; }
}

/* ============================================================
   ABOUT PAGE — editorial single-page layout
   ============================================================ */

/* Shared rule + eyebrow + section title helpers */
.ab-rule {
  display: block;
  width: 56px;
  height: 3px;
  background: var(--pink);
  margin-bottom: 22px;
}

.ab-eyebrow {
  font-size: 12px;
  letter-spacing: 5px;
  font-weight: 600;
  color: var(--pink);
  margin-bottom: 18px;
  text-transform: uppercase;
}

.ab-section-title {
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin-bottom: 24px;
  text-transform: uppercase;
  color: #fff;
}

.ab-section-title .dot { color: var(--pink); }

/* ---------- 1. Cinematic hero banner ---------- */
.ab-hero {
  position: relative;
  margin-top: var(--header-h);
  min-height: 62vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 80px 64px;
  overflow: hidden;
}

.ab-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 15, 30, 0.75) 0%,
    rgba(15, 15, 30, 0.6) 50%,
    rgba(15, 15, 30, 0.95) 100%
  );
}

.ab-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  color: #fff;
}

.ab-hero-title {
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -1px;
  margin-bottom: 28px;
  text-transform: uppercase;
}

.ab-hero-title .dot { color: var(--pink); }

.ab-hero-lead {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 300;
  max-width: 600px;
}

/* ---------- 2. Narrative column ---------- */
.ab-narrative {
  background: var(--bg);
  padding: 100px 32px 80px;
}

.ab-column {
  max-width: 720px;
  margin: 0 auto;
  color: var(--gray);
}

.ab-column p {
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 24px;
}

.ab-column p:last-child {
  margin-bottom: 0;
}

/* Pull quote — large italic statement */
.ab-pullquote {
  position: relative;
  margin: 56px 0;
  padding: 28px 0 28px 36px;
  border-left: 3px solid var(--pink);
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  color: #fff;
  letter-spacing: -0.3px;
}

.ab-quote-mark {
  position: absolute;
  top: -6px;
  left: 22px;
  font-size: 60px;
  line-height: 1;
  color: var(--pink);
  font-family: Georgia, serif;
  opacity: 0.6;
}

/* ---------- 3. Track record ---------- */
.ab-track {
  background: var(--surface);
  padding: 90px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ab-track-inner {
  max-width: 980px;
  margin: 0 auto;
}

.ab-track-head {
  margin-bottom: 56px;
  text-align: center;
}

.ab-track-head .ab-rule {
  margin: 0 auto 22px;
}

.ab-track-grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.ab-track-col {
  position: relative;
}

/* Decorative red vertical accent on the left of each section */
.ab-track-col::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 6px;
  width: 3px;
  height: 22px;
  background: var(--pink);
  border-radius: 2px;
}

.ab-track-h {
  font-size: 12px;
  letter-spacing: 4px;
  font-weight: 700;
  color: var(--pink);
  text-transform: uppercase;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(229, 9, 20, 0.3);
}

.ab-track-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ab-track-list li {
  font-size: 14px;
  line-height: 1.3;
  color: #fff;
  padding: 11px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(229, 9, 20, 0.18);
  border-radius: 999px;
  letter-spacing: 0.2px;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
              border-color 0.3s ease,
              background 0.3s ease;
  cursor: default;
}

.ab-track-list li:hover {
  background: linear-gradient(180deg, rgba(229,9,20,0.10), rgba(255,255,255,0.02));
  border-color: var(--pink);
  transform: translateY(-3px);
}

.ab-track-list li:last-child {
  border-bottom: none;
}

/* ---------- 4. Founder profile ---------- */
.ab-founder {
  position: relative;
  background: var(--bg);
  padding: 110px 32px;
  overflow: hidden;
}

/* Decorative giant "JK" initials behind the content */
.ab-founder-mark {
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: clamp(220px, 36vw, 460px);
  font-weight: 900;
  line-height: 0.85;
  color: var(--pink);
  opacity: 0.06;
  letter-spacing: -10px;
  pointer-events: none;
  user-select: none;
}

.ab-founder-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}

.ab-founder-role {
  font-size: 13px;
  letter-spacing: 4px;
  font-weight: 600;
  color: var(--gray);
  text-transform: uppercase;
  margin: -10px 0 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ab-founder-body p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--gray);
  margin-bottom: 22px;
}

.ab-founder-body p:last-child {
  margin-bottom: 0;
}

.ab-approach {
  margin-top: 48px;
  padding: 28px 32px;
  background: rgba(229, 9, 20, 0.06);
  border-left: 3px solid var(--pink);
  border-radius: 0 4px 4px 0;
}

.ab-approach-label {
  font-size: 11px;
  letter-spacing: 4px;
  font-weight: 700;
  color: var(--pink);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.ab-approach-text {
  font-size: 17px;
  line-height: 1.55;
  color: #fff;
  font-style: italic;
  font-weight: 300;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ab-hero { padding: 70px 32px; min-height: 56vh; }
  .ab-narrative { padding: 70px 24px 60px; }
  .ab-track { padding: 70px 24px; }
  .ab-track-grid { gap: 36px; }
  .ab-founder { padding: 80px 24px; }
  .ab-pullquote { margin: 40px 0; padding: 20px 0 20px 24px; }
  .ab-quote-mark { left: 14px; font-size: 48px; }
}

@media (max-width: 540px) {
  .ab-hero { padding: 60px 20px; min-height: 52vh; }
  .ab-rule { width: 40px; height: 2px; margin-bottom: 16px; }
  .ab-eyebrow { font-size: 11px; letter-spacing: 3px; margin-bottom: 14px; }
  .ab-hero-lead { font-size: 14px; }
  .ab-column p { font-size: 15px; line-height: 1.75; }
  .ab-track-list li { font-size: 13px; padding: 9px 16px; }
  .ab-founder { padding: 70px 20px; }
  .ab-founder-mark { font-size: clamp(180px, 60vw, 260px); right: -20px; opacity: 0.05; }
  .ab-approach { padding: 22px 22px; }
  .ab-approach-text { font-size: 15px; }
  .ab-narrative { padding: 60px 20px 50px; }
  .ab-track { padding: 60px 20px; }
}

/* ============================================================
   SERVICE LIST — smooth rounded cards w/ soft hover fill
   ============================================================ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 28px 0 12px;
}

.svc-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Soft gradient sweep that fades in on hover (the smooth fill) */
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(229, 9, 20, 0.16) 0%,
    rgba(229, 9, 20, 0.06) 45%,
    rgba(229, 9, 20, 0) 90%
  );
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.svc-card:hover {
  transform: translateY(-3px);
  border-color: rgba(229, 9, 20, 0.32);
  box-shadow:
    0 14px 36px -18px rgba(229, 9, 20, 0.55),
    0 6px 18px -10px rgba(0, 0, 0, 0.4);
}

.svc-card:hover::before {
  opacity: 1;
}

/* Dot indicator removed — text-only smooth tiles */
.svc-card-icon { display: none; }

.svc-card-text {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.1px;
  transition: color 0.5s ease;
}

.svc-card:hover .svc-card-text {
  color: #fff;
}

@media (max-width: 1080px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .svc-grid { grid-template-columns: 1fr; gap: 10px; }
  .svc-card { padding: 18px 22px; border-radius: 12px; }
  .svc-card-text { font-size: 14.5px; }
}

/* ============================================
   WELCOME SLIDESHOW — Crossfading production highlights
   ============================================ */
.welcome-slideshow {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.6);
  isolation: isolate;
}

.welcome-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: welcomeSlideFade 24s infinite ease-in-out;
  will-change: opacity, transform;
}
.welcome-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.welcome-slide:nth-child(1) { animation-delay: 0s; }
.welcome-slide:nth-child(2) { animation-delay: 6s; }
.welcome-slide:nth-child(3) { animation-delay: 12s; }
.welcome-slide:nth-child(4) { animation-delay: 18s; }

/* Each slide visible for 5s then fades over 1s. 4 slides x 6s = 24s loop. */
@keyframes welcomeSlideFade {
  0%   { opacity: 0; transform: scale(1.04); }
  4%   { opacity: 1; }
  25%  { opacity: 1; transform: scale(1); }
  29%  { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}

/* Subtle bottom vignette for visual depth */
.welcome-slideshow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Dot indicators — animated to highlight the active slide */
.welcome-slide-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.welcome-slide-dots span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  animation: welcomeDotPulse 24s infinite ease-in-out;
}
.welcome-slide-dots span:nth-child(1) { animation-delay: 0s; }
.welcome-slide-dots span:nth-child(2) { animation-delay: 6s; }
.welcome-slide-dots span:nth-child(3) { animation-delay: 12s; }
.welcome-slide-dots span:nth-child(4) { animation-delay: 18s; }

@keyframes welcomeDotPulse {
  0%, 4%, 25%, 100% { background: rgba(255, 255, 255, 0.4); width: 7px; }
  6%, 23%           { background: var(--pink); width: 18px; border-radius: 4px; }
}

@media (max-width: 768px) {
  .welcome-slideshow { aspect-ratio: 4 / 3; max-width: 100%; border-radius: 14px; }
}

/* ============================================
   PROOF v2 — Animated stats / "The Record"
   ============================================ */
.proof-v2 {
  position: relative;
  background: var(--bg);
  color: #fff;
  padding: 80px 24px 90px;
  overflow: hidden;
  isolation: isolate;
}

/* Subtle background — soft red glow only */
.proof-v2-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 420px at 12% 30%, rgba(229, 9, 20, 0.12), transparent 70%),
    radial-gradient(600px 360px at 92% 78%, rgba(229, 9, 20, 0.07), transparent 70%);
  z-index: -1;
}

.proof-v2-inner {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}

.proof-v2-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
}

.proof-v2-eyebrow {
  font-size: 11px;
  letter-spacing: 5px;
  font-weight: 700;
  color: var(--pink);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.proof-v2-title {
  font-family: 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.8px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.proof-v2-title .dot { color: var(--pink); }

.proof-v2-sub {
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}

.proof-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.stat-card {
  position: relative;
  padding: 28px 22px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.008));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  text-align: left;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
              border-color 0.4s ease,
              background 0.4s ease;
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--pink), transparent);
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.stat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(229, 9, 20, 0.35);
  background: linear-gradient(180deg, rgba(229,9,20,0.06), rgba(255,255,255,0.01));
}
.stat-card:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.stat-num {
  display: block;
  font-family: 'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(34px, 3.8vw, 54px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.6px;
  background: linear-gradient(180deg, #fff 0%, #b9b9c4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

.stat-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3.5px;
  color: var(--pink);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.stat-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
}

/* Tablet + mobile */
@media (max-width: 900px) {
  .proof-stats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .proof-v2 { padding: 60px 20px 70px; }
  .proof-v2-head { margin-bottom: 38px; }
  .stat-card { padding: 24px 20px 22px; }
}
@media (max-width: 520px) {
  .proof-stats { grid-template-columns: 1fr; }
  .stat-num { font-size: clamp(34px, 9vw, 46px); }
}

/* ============================================
   REVEAL ON SCROLL — generic utility
   ============================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children inside a grid when they all reveal at once */
.proof-stats .stat-card:nth-child(1).is-visible { transition-delay: 0s; }
.proof-stats .stat-card:nth-child(2).is-visible { transition-delay: 0.12s; }
.proof-stats .stat-card:nth-child(3).is-visible { transition-delay: 0.24s; }
.proof-stats .stat-card:nth-child(4).is-visible { transition-delay: 0.36s; }

/* ============================================
   NAV DROPDOWN — Services menu on hover
   ============================================ */
.nav-item-dropdown { position: relative; }

.nav-item-dropdown > .nav-link::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 8px;
  margin-left: 6px;
  display: inline-block;
  opacity: 0.7;
  transition: transform 0.25s ease;
}
.nav-item-dropdown:hover > .nav-link::after,
.nav-item-dropdown:focus-within > .nav-link::after {
  transform: rotate(180deg);
}

/* Invisible hover bridge so cursor can travel from nav-link to dropdown */
.nav-item-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 300px;
  padding: 10px;
  background: rgba(21, 21, 30, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(229, 9, 20, 0.14);
  border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  z-index: 1100;
  display: flex;
  flex-direction: column;
}
.nav-item-dropdown:hover > .nav-dropdown,
.nav-item-dropdown:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 10px;
  color: #d8d8e0;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.nav-dropdown-item:hover {
  background: rgba(229, 9, 20, 0.10);
  color: #fff;
  transform: translateX(2px);
}
.nav-dropdown-num {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--third-color);
  font-weight: 700;
  min-width: 22px;
}
.nav-dropdown-label { flex: 1; line-height: 1.3; }

/* --- Mobile: collapse popup, render items inline within the mobile menu --- */
@media (max-width: 768px) {
  .nav-item-dropdown::after { display: none; }
  .nav-item-dropdown > .nav-link::after { display: none; }
  .nav-dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    padding: 2px 0 8px 14px;
    margin-top: 2px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-left: 1px solid rgba(229, 9, 20, 0.18);
    border-radius: 0;
    box-shadow: none;
    transition: none;
  }
  .nav-dropdown-item {
    padding: 9px 14px;
    font-size: 11px;
    color: #a8a8b0;
  }
  .nav-dropdown-item:hover { transform: none; }
}

/* ============================================================================
   MOBILE FIXES — comprehensive rules for everything we built recently
   ============================================================================ */

/* --- HERO: shrink JFK title + tag on small phones --- */
@media (max-width: 600px) {
  .hero-mark { font-size: clamp(44px, 13vw, 64px); letter-spacing: 2px; }
  .hero-tag  { font-size: clamp(10px, 2.8vw, 13px); letter-spacing: 5px; }
  .hero-panel { padding: 48px 22px 38px; }
  .hero-lead { font-size: 13px; line-height: 1.55; }
  .hero-ctas { flex-direction: column; gap: 10px; }
  .btn-hero { width: 100%; padding: 13px 18px; font-size: 11px; }
}

/* --- PROOF v2: stats card padding + heading sizing on small screens --- */
@media (max-width: 600px) {
  .proof-v2 { padding: 50px 18px 60px; }
  .proof-v2-title { font-size: clamp(24px, 7vw, 38px); }
  .proof-v2-sub { font-size: 12.5px; }
  .stat-card { padding: 22px 18px 20px; }
  .stat-num { font-size: clamp(32px, 9vw, 44px); }
  .stat-label { font-size: 9px; letter-spacing: 2.5px; }
  .stat-desc { font-size: 11.5px; line-height: 1.45; }
}

/* --- WELCOME SLIDESHOW: ensure it sits well in the mobile column --- */
@media (max-width: 768px) {
  .welcome-slideshow {
    max-width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    margin-top: 8px;
  }
  .welcome-slide-dots { bottom: 10px; gap: 6px; }
  .welcome-slide-dots span { width: 6px; height: 6px; }
}

/* --- SERVICES SECTION: tighter on mobile --- */
@media (max-width: 600px) {
  .services-rich { padding: 50px 18px 60px; }
  .service-scene-static { padding: 30px 0; gap: 18px; }
  .service-scene-static .scene-title { font-size: 24px !important; line-height: 1.15; }
  .service-scene-static .scene-eyebrow { font-size: 9px; letter-spacing: 3px; margin-bottom: 12px; }
  .service-scene-static .scene-desc { font-size: 13.5px; line-height: 1.55; }
  .service-scene-static .scene-cta { font-size: 11px; padding-top: 8px; }
}

/* --- NAV DROPDOWN: keep service sub-items readable inline on mobile --- */
@media (max-width: 600px) {
  .nav-dropdown { padding: 2px 0 6px 12px; margin-top: 0; }
  .nav-dropdown-item { padding: 8px 12px; font-size: 10.5px; letter-spacing: 1.5px; }
  .nav-dropdown-num { font-size: 9px; min-width: 18px; }
}

/* --- CONTACT FORM: stack to single column on small screens, fix select --- */
@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .ff-row.full { grid-column: 1 / -1; }
  .ff-row input,
  .ff-row textarea,
  .ff-row select { font-size: 16px; /* iOS won't zoom in on focus if >= 16px */ padding: 20px 14px 9px; }
  .ff-row select { padding-right: 38px; }
  .ff-row label { font-size: 12.5px; }
  .ff-row textarea { min-height: 90px; }
  .form-bottom { flex-direction: column; align-items: stretch; gap: 14px; }
  .form-bottom .btn-solid { width: 100%; justify-content: center; }
  .captcha-box { justify-content: center; }
}

/* --- PORTFOLIO CARDS on small mobile --- */
@media (max-width: 520px) {
  .pf-card .pf-img img { height: 150px; }
  .pf-title { font-size: 14px; }
}

/* --- ABOUT track-list pills shrink on tiny screens --- */
@media (max-width: 400px) {
  .ab-track-list li { font-size: 12px; padding: 8px 13px; }
  .ab-track-list { gap: 8px; }
}

/* --- DETAIL PAGE galleries: 2-column thumbnails on mobile (was 3) --- */
@media (max-width: 600px) {
  .pf-gallery { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .pf-gal-item img { height: 130px; }
}

/* --- General overflow-X guard so nothing horizontally scrolls on mobile --- */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
}