/* ============================================================
   Shas Events — Gold & Black theme (from logo)
   ============================================================ */
:root {
  --gold: #C9A227;
  --gold-mid: #D4AF37;
  --gold-light: #E5C04A;
  --gold-bright: #F0D878;
  --gold-pale: #FFF2AD;
  --gold-dark: #8B6914;
  --gold-deep: #6B5010;
  --gold-glow: rgba(201, 162, 39, 0.45);
  --gold-subtle: rgba(201, 162, 39, 0.12);
  --gold-border: rgba(201, 162, 39, 0.25);
  --bg-black: #000000;
  --bg-dark: #0a0a0a;
  --bg-card: #111111;
  --bg-elevated: #1a1a1a;
  --text-primary: #f5f5f5;
  --text-muted: rgba(255, 255, 255, 0.65);
  --gradient-gold: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-mid) 45%, var(--gold-light) 100%);
  --gradient-gold-hover: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 50%, var(--gold-bright) 100%);
  --shadow-gold: 0 8px 28px rgba(201, 162, 39, 0.35);
  --shadow-gold-sm: 0 4px 16px rgba(201, 162, 39, 0.25);
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Base & background ── */
.bg-base { background: var(--bg-black) !important; }
.bg-grid-dots {
  background-image: radial-gradient(rgba(201, 162, 39, 0.1) 1px, transparent 1px) !important;
}

/* ── Navigation ── */
nav {
  background: rgba(0, 0, 0, 0.92) !important;
  border-bottom-color: var(--gold-border) !important;
  transition: box-shadow var(--transition-smooth);
}
nav.scrolled { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); }

.nav-logo img {
  transition: filter var(--transition-smooth), transform var(--transition-smooth);
}
.nav-logo:hover img {
  filter: drop-shadow(0 0 12px var(--gold-glow));
  transform: scale(1.03);
}

.nav-links a {
  transition: color var(--transition-fast), opacity var(--transition-fast) !important;
  position: relative;
}
.nav-links > li > a:not(.nav-btn):not(.nav-dropdown-link)::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gradient-gold);
  transition: width var(--transition-smooth), left var(--transition-smooth);
  border-radius: 1px;
}
.nav-links > li > a:not(.nav-btn):not(.nav-dropdown-link):hover::after,
.nav-links > li > a.active:not(.nav-btn)::after {
  width: 100%;
  left: 0;
}
.nav-links a:hover { color: var(--gold-light) !important; }
.nav-links a.active { color: var(--gold) !important; }

.nav-btn,
.hero-btn,
.cta-big-btn,
.about-cta-btn,
.test-cta-btn,
.btn-cta,
.port-view-all,
.svc-view-all {
  background: var(--gradient-gold) !important;
  box-shadow: var(--shadow-gold-sm) !important;
  border: 1px solid rgba(255, 242, 173, 0.15) !important;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-smooth), filter var(--transition-fast) !important;
}
.nav-btn::after,
.hero-btn::after,
.cta-big-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 242, 173, 0.35), transparent);
  transition: left 0.55s ease;
  pointer-events: none;
}
.nav-btn:hover::after,
.hero-btn:hover::after,
.cta-big-btn:hover::after {
  left: 140%;
}
.nav-btn:hover,
.hero-btn:hover,
.cta-big-btn:hover,
.about-cta-btn:hover,
.test-cta-btn:hover,
.btn-cta:hover,
.port-view-all:hover,
.svc-view-all:hover {
  background: var(--gradient-gold-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-gold) !important;
}

.hero-btn-ghost {
  border-color: var(--gold) !important;
  color: var(--gold-light) !important;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}
.hero-btn-ghost:hover {
  background: var(--gold-subtle) !important;
  color: var(--gold-bright) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px var(--gold-glow);
}

/* ── Section labels & accents ── */
.sec-label { color: var(--gold) !important; }
.sec-label::before { background: var(--gold) !important; }

/* ── Stats ── */
.stats {
  background: var(--gradient-gold) !important;
  position: relative;
  overflow: hidden;
}
.stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 20px,
    rgba(0, 0, 0, 0.03) 20px,
    rgba(0, 0, 0, 0.03) 40px
  );
  pointer-events: none;
}
.stat-item {
  transition: transform var(--transition-smooth);
}
.stat-item:hover {
  transform: translateY(-4px) scale(1.02);
}

/* ── Services ── */
.svc-card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth) !important;
}
.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--gold-border);
}
.svc-card:hover .svc-bg { transform: scale(1.1) !important; }
.svc-view-all { color: #fff !important; }

/* ── Portfolio ── */
.portfolio { background: #f5f5f5 !important; }
.portfolio .port-title { color: #1a1a1a !important; }
.portfolio .port-hdr p { color: #555 !important; }
.port-card {
  background: #fff !important;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth) !important;
  border-color: #e5e5e5 !important;
}
.port-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--gold-border) !important;
}
.port-tag { color: #0a0a0a !important; background: var(--gold-light) !important; }
.port-name { color: #1a1a1a !important; }
.port-sub { color: #666 !important; }
.port-arrow { color: var(--gold-dark) !important; }
.port-view-all { color: #fff !important; }

/* ── Testimonials ── */
.testimonial::before { color: rgba(201, 162, 39, 0.08) !important; }
.testi-card {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth) !important;
}
.testi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--gold-border) !important;
}
.testi-strip {
  background: var(--gradient-gold) !important;
}

/* ── CTA banner ── */
.cta-banner {
  background: var(--bg-dark) !important;
  border-top: 1px solid var(--gold-border);
  border-bottom: 1px solid var(--gold-border);
  position: relative;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--gold-subtle) 0%, transparent 60%);
  pointer-events: none;
}
.cta-title { color: var(--gold-bright) !important; }
.cta-sub { color: rgba(255, 255, 255, 0.88) !important; }

/* CTA outline "Call Now" button */
.cta-big-btn[style*="transparent"] {
  border-color: var(--gold) !important;
  color: var(--gold-light) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.cta-big-btn[style*="transparent"]:hover {
  background: var(--gold-subtle) !important;
  color: var(--gold-bright) !important;
  box-shadow: 0 4px 20px var(--gold-glow) !important;
}

/* ── Brand / partner logos ── */
.brand-logo-item {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-fast) !important;
}
.brand-logo-item:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--gold-border) !important;
  border-color: var(--gold-border) !important;
}

/* ── Footer ── */
footer {
  background: var(--bg-black) !important;
  border-top: 1px solid var(--gold-border);
}
.fc-title { color: var(--gold) !important; }
.flinks a {
  transition: color var(--transition-fast), padding-left var(--transition-fast) !important;
}
.flinks a:hover {
  color: var(--gold-light) !important;
  padding-left: 4px;
}
.fci-icon { color: var(--gold) !important; }
.soc {
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast) !important;
}
.soc:hover {
  transform: translateY(-3px) scale(1.08);
  background: var(--gold-subtle) !important;
  color: var(--gold-light) !important;
  box-shadow: 0 4px 16px var(--gold-glow);
}

/* ── Video gallery ── */
.vg-thumb {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth) !important;
  border-radius: 12px;
  overflow: hidden;
}
.vg-thumb:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 0 2px var(--gold-border);
}
.vg-play-btn {
  transition: transform var(--transition-fast), background var(--transition-fast) !important;
}
.vg-thumb:hover .vg-play-btn {
  transform: scale(1.12);
  background: var(--gold) !important;
}

/* ── Hero ── */
.hero-title { color: #fff !important; }
.hero-title .g { color: var(--gold-light) !important; -webkit-text-fill-color: var(--gold-light) !important; }
.hero-title .hl {
  color: var(--gold-light) !important;
  background: var(--gradient-gold) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.hero [style*="color:#C9A227"],
.hero [style*="color: #C9A227"] {
  color: var(--gold-light) !important;
}

/* Hero slider dots — gold active state */
.hero button[style*="border-radius:4px"] {
  transition: width 0.3s ease, background 0.3s ease !important;
}

/* ── About / Why Us inline sections ── */
#about [style*="color:#C9A227"],
#why-us [style*="color:#C9A227"] {
  color: var(--gold-dark) !important;
}
#why-us h2 { color: #1a1a1a !important; }

/* ── Form inputs focus ── */
input:focus, textarea:focus, select:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-subtle) !important;
  outline: none;
}

/* ── Floating CTA (layout inline) ── */
a[style*="linear-gradient(135deg, #ff6a00"],
a[style*="linear-gradient(135deg,#ff6a00"] {
  background: var(--gradient-gold) !important;
  box-shadow: var(--shadow-gold) !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-smooth) !important;
}
a[style*="linear-gradient(135deg, #ff6a00"]:hover,
a[style*="linear-gradient(135deg,#ff6a00"]:hover {
  transform: translateX(-50%) translateY(-3px) !important;
  box-shadow: 0 12px 36px var(--gold-glow) !important;
}

/* ── Scroll animations (enhance existing fade-up) ── */
.fade-up {
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.fade-up.ready { transform: translateY(28px); }
.fade-up.vis { transform: translateY(0); }

/* Stagger children in grids */
.testi-grid .fade-up:nth-child(2) { transition-delay: 0.06s !important; }
.testi-grid .fade-up:nth-child(3) { transition-delay: 0.12s !important; }
.testi-grid .fade-up:nth-child(4) { transition-delay: 0.18s !important; }

.svc-grid .svc-card { animation: none; }
.port-grid .port-card:nth-child(odd).fade-up.vis { transition-delay: 0.05s; }
.port-grid .port-card:nth-child(even).fade-up.vis { transition-delay: 0.1s; }

/* ── Subtle page-load shimmer on nav logo area ── */
@keyframes gold-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(201, 162, 39, 0.2)); }
  50% { filter: drop-shadow(0 0 14px rgba(201, 162, 39, 0.5)); }
}
.nav-logo img { animation: gold-pulse 4s ease-in-out infinite; }

@keyframes float-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.hero-cta-row .hero-btn {
  animation: float-subtle 3s ease-in-out infinite;
  animation-delay: 1s;
}

/* Marquee pause on hover */
.marquee-viewport:hover .marquee-track {
  animation-play-state: paused !important;
}

/* ── Dropdown menu hover ── */
.hide-mobile a[style*="padding:10px 14px"]:hover {
  background: var(--gold-subtle) !important;
  color: var(--gold-bright) !important;
}

/* ── Stat numbers gold accent on dark sections ── */
#about [style*="background:#0d0d0d"] {
  background: var(--bg-elevated) !important;
}
#about [style*="background:#0d0d0d"] [style*="font-size:36px"] {
  color: var(--gold-light) !important;
}
#about [style*="background:#0d0d0d"] [style*="font-size:11px"] {
  color: rgba(255, 255, 255, 0.7) !important;
}
#about [style*="background:#C9A227"] [style*="font-size:36px"] {
  color: #0a0a0a !important;
}
#about [style*="background:#C9A227"] [style*="font-size:11px"] {
  color: rgba(0, 0, 0, 0.7) !important;
}

/* ── Testimonial author name ── */
.testi-body [style*="color:#C9A227"] {
  color: var(--gold-dark) !important;
}
.testi-body p { color: #444 !important; }
.testi-body [style*="color:#888"] { color: #666 !important; }

/* ── Gradient bars in testimonials ── */
.testi-body [style*="linear-gradient(to right, #C9A227"] {
  background: var(--gradient-gold) !important;
}

.s1 .svc-bg { background: linear-gradient(145deg, #1a1408, #2a2010) !important; }
.s2 .svc-bg { background: linear-gradient(145deg, #0d0d0d, #1a1508) !important; }
.s3 .svc-bg { background: linear-gradient(145deg, #1a1205, #2d2210) !important; }
.s4 .svc-bg { background: linear-gradient(145deg, #12100a, #1f1a0d) !important; }
.s5 .svc-bg { background: linear-gradient(145deg, #0a0a0a, #1a1608) !important; }
.s6 .svc-bg { background: linear-gradient(145deg, #151008, #252010) !important; }

.services { background: #000 !important; }
.svc-hdr .svc-title { color: #fff !important; }
.svc-title span { color: var(--gold-light) !important; }
.svc-name { color: #fff !important; }
.svc-desc { color: rgba(255, 255, 255, 0.88) !important; }
.stat-label { color: rgba(0, 0, 0, 0.72) !important; }
.stat-num { color: #0a0a0a !important; }

/* ── Testimonial stars ── */
.testi-body svg[fill="#f5a623"] { fill: var(--gold) !important; }

/* ── Hero overlay warmer tone ── */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.65) 55%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.hero.hero--no-gradient::after,
.hero.hero--no-gradient .hero-overlay-gradient {
  opacity: 0 !important;
  visibility: hidden !important;
}
.hero.hero--no-text .hero-content {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.hero.hero--minimal {
  background: #fff;
}
.hero.hero--auto-height {
  transition: min-height 0.35s ease, height 0.35s ease;
}
.hero.hero--light-dots .hero-dot:not(.is-active) {
  background: rgba(0, 0, 0, 0.25) !important;
}
.hero-content {
  position: relative;
  z-index: 3 !important;
}

/* ============================================================
   Text visibility & contrast (readability pass)
   ============================================================ */

/* Navigation */
.nav-links a { color: rgba(255, 255, 255, 0.92) !important; }
.nav-links a.active { color: var(--gold-light) !important; }
.nav-dropdown-link { color: rgba(255, 255, 255, 0.92) !important; }
.hide-mobile a[style*="padding:10px 14px"] { color: rgba(255, 255, 255, 0.88) !important; }

/* Footer */
.flinks a { color: rgba(255, 255, 255, 0.82) !important; }
.fb-desc { color: rgba(255, 255, 255, 0.78) !important; }
.fci-text { color: rgba(255, 255, 255, 0.88) !important; }
.fci-text a { color: rgba(255, 255, 255, 0.88) !important; }
.fcopy { color: rgba(255, 255, 255, 0.55) !important; }
.flegal a { color: rgba(255, 255, 255, 0.55) !important; }
.flegal a:hover { color: rgba(255, 255, 255, 0.85) !important; }
.soc { color: rgba(255, 255, 255, 0.82) !important; }

/* Section headings on white/light backgrounds */
.test-title { color: #1a1a1a !important; }
.sec-label { color: var(--gold-dark) !important; }

/* Video gallery */
.vg-title { color: rgba(255, 255, 255, 0.88) !important; }

/* Dark inline sections — subtitles */
section[style*="background: rgb(10"] p,
section[style*="background:rgb(10"] p,
section[style*="background:#0"] p[style*="color:rgba(255"] {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Globe / location section chips */
.loc-city-chip { color: rgba(255, 255, 255, 0.75) !important; }
.loc-city-chip.active { color: #fff !important; }

/* Form labels — ensure readable */
label { color: rgba(0, 0, 0, 0.65) !important; }
input, textarea, select {
  color: #111 !important;
  background: #fff !important;
}
input::placeholder, textarea::placeholder {
  color: rgba(0, 0, 0, 0.4) !important;
}

/* Lead form dark wrapper subtitles */
section[style*="background:#0"] h2[style*="color:#fff"],
section[style*="background: rgb(10"] h2 {
  color: #fff !important;
}

/* Gold text on light backgrounds — use darker gold for contrast */
section[style*="background:#fff"] [style*="color:#C9A227"],
section[style*="background:#f8fafc"] [style*="color:#C9A227"],
section[style*="background:#f5f5f5"] [style*="color:#C9A227"] {
  color: #8B6914 !important;
}

/* Portfolio page hero */
.page-hero p { color: rgba(255, 255, 255, 0.78) !important; }

/* About page hero overlay */
section[style*="background-image:url"] p[style*="rgba(255,255,255"] {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Prevent gradient text from becoming invisible */
.hero-title .g,
.hero-title .hl {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* ── Services dropdown ── */
@media (min-width: 901px) {
  .nav-links > li:has(.nav-dropdown-link) > .hide-mobile > div {
    transition: opacity 0.18s ease, transform 0.18s ease !important;
  }
  .nav-links > li:has(.nav-dropdown-link):hover > .hide-mobile > div,
  .nav-links > li:has(.nav-dropdown-link):focus-within > .hide-mobile > div {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
  }
  .nav-links > li:has(.nav-dropdown-link):hover .nav-dropdown-link svg,
  .nav-links > li:has(.nav-dropdown-link):focus-within .nav-dropdown-link svg {
    transform: rotate(180deg);
  }
  .nav-links > li:has(.nav-dropdown-link) > .hide-mobile > div > div {
    min-width: 280px;
    max-height: 70vh;
    overflow-y: auto;
  }
}

@media (max-width: 900px) {
  .nav-links > li.services-open .show-mobile-only > div {
    max-height: 480px !important;
  }
  .nav-links > li.services-open .nav-dropdown-link svg {
    transform: rotate(180deg);
  }
}

.nav-dropdown-link {
  cursor: pointer;
}

/* Service detail pages */
.svc-hero h1 { color: #fff !important; }
.svc-hero p { color: rgba(255, 255, 255, 0.82) !important; }
section[style*="background:#f6f8f2"] h2,
section[style*="background:#fff"] h2,
section[style*="background:#fff"] h3 { color: #111 !important; }
section[style*="background:#0d1117"] h2,
section[style*="background:#0d1117"] h3 { color: #fff !important; }
section[style*="background:#0d1117"] p { color: rgba(255, 255, 255, 0.72) !important; }

@media (prefers-reduced-motion: reduce) {
  .fade-up, .nav-logo img, .hero-cta-row .hero-btn, .marquee-track {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}