/* ============================================================
   PLACEMENTNINJA — RESTRAINED THEME (v2)
   Scaler-inspired: monochrome base, single accent, minimal chrome.
   Loaded AFTER each page's inline <style> so it wins on cascade
   without needing !important. Do not reorder the <link> tag.
   ============================================================ */

:root {
  /* Core palette — near-black ink instead of bright blue/gradient mix */
  --blue: #14161a;           /* primary accent (was bright blue) */
  --blue-dark: #000000;
  --blue-light: #f5f5f6;     /* neutral light gray, replaces cream/blue tints */
  --blue-mid: #dcdcde;
  --text: #14161a;
  --text2: #40434a;
  --muted: #767a82;
  --border: #e9e9eb;
  --bg: #ffffff;
  --bg2: #ffffff;             /* pure white — was a cream/off-white tone */
  --bg3: #f5f5f6;             /* neutral light gray for subtle contrast only */
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20,22,26,0.06), 0 6px 20px rgba(20,22,26,0.05);
  --shadow-lg: 0 10px 30px rgba(20,22,26,0.10);
}

body { background: var(--bg); }

/* ── NAVBAR: flatten to monochrome, drop the multicolor pill treatment ── */
nav {
  border-top: none !important;
  border-image: none !important;
  background: rgba(255,255,255,0.97) !important;
  border-bottom: 1px solid var(--border) !important;
}

.nav-links a { color: var(--text2) !important; }
.nav-links a:hover { color: var(--text) !important; }
.nav-links a.active { color: var(--blue) !important; font-weight: 700; }

.btn-primary { background: var(--blue) !important; }
.btn-primary:hover { background: var(--blue-dark) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.22) !important; }
.btn-ghost:hover { border-color: var(--text) !important; color: var(--text) !important; }

/* ── Section accents & links ── */
.cta-section:not(.section-wine):not(.section-navy):not(.section-green) { background: var(--blue) !important; }
.cta-section h2 em { color: #ffd9a0 !important; }
.btn-white { color: var(--blue) !important; }

/* Neutralize the rainbow of icon-background tints on service/blog cards —
   keep one consistent warm-paper tint instead of blue/green/orange/purple mix */
.svc-icon { background: var(--blue-light); }

/* ── Numbered card variant used on the homepage services grid ── */
.svc-card { position: relative; }
.svc-num {
  font-family: var(--font-head);
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 400;
  margin-bottom: 14px;
  display: block;
}

/* ── Trust / value strip (new homepage section) ── */
.trust-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg2); }
.trust-strip-inner { max-width: 1200px; margin: 0 auto; padding: 22px 6%; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.trust-strip-item { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--text2); font-weight: 600; }
.trust-strip-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text); flex-shrink: 0; }

/* ── Stat block (new homepage section) ── */
.stat-block { background: var(--blue); }
.stat-grid { max-width: 1200px; margin: 0 auto; padding: 64px 6%; display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; text-align: center; }
.stat-item .stat-num { font-family: var(--font-head); font-size: clamp(2rem,4vw,2.8rem); color: #fff; display: block; line-height: 1; margin-bottom: 8px; }
.stat-item .stat-lbl { font-size: 0.8rem; color: rgba(255,255,255,0.65); line-height: 1.5; }

@media (max-width: 768px) {
  .stat-grid { grid-template-columns: repeat(2,1fr); gap: 28px; }
  .trust-strip-inner { justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════
   COLOR SECTION SYSTEM — alternating navy/wine/green
   gradient sections with animated shimmer + frosted
   cards, plus parallax image banners. Shared across
   every page that links this stylesheet.
   ══════════════════════════════════════════════════ */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.section-navy, .section-wine, .section-green {
  position: relative;
  color: #fff;
  background-size: 300% 300%;
  animation: gradientShift 16s ease infinite;
  overflow: hidden;
}
.section-navy  { background-image: linear-gradient(120deg, #060c1c, #16264f, #0a1633, #1e3468); }
.section-wine  { background-image: linear-gradient(120deg, #23050f, #4a0f24, #2a0713, #611536); }
.section-green { background-image: linear-gradient(120deg, #04140b, #0f3a22, #061f12, #135030); }

.section-navy .section-tag,
.section-wine .section-tag,
.section-green .section-tag { color: #fff !important; }
.section-navy .section-tag::before,
.section-wine .section-tag::before,
.section-green .section-tag::before { background: #fff !important; }
.section-navy .section-title,
.section-wine .section-title,
.section-green .section-title,
.section-navy h1, .section-wine h1, .section-green h1,
.section-navy h2, .section-wine h2, .section-green h2 { color: #fff; }
.section-navy .section-title em, .section-navy h1 em, .section-navy h2 em,
.section-wine .section-title em, .section-wine h1 em, .section-wine h2 em,
.section-green .section-title em, .section-green h1 em, .section-green h2 em { color: #ffd9a0 !important; }
.section-navy .section-sub, .section-navy p,
.section-wine .section-sub, .section-wine p,
.section-green .section-sub, .section-green p { color: rgba(255,255,255,0.7); }
.section-navy .hero-badge, .section-wine .hero-badge, .section-green .hero-badge {
  background: rgba(255,255,255,0.12) !important; color: #fff !important; border-color: rgba(255,255,255,0.3) !important;
}

/* Frosted glass card variant for cards sitting on dark sections —
   covers homepage svc/blog cards as well as type-cards, category
   pills, and article cards used on services/blog/assessment pages */
.section-navy .svc-card, .section-wine .svc-card, .section-green .svc-card,
.section-navy .blog-card, .section-wine .blog-card, .section-green .blog-card,
.section-navy .type-card, .section-wine .type-card, .section-green .type-card,
.section-navy .card, .section-wine .card, .section-green .card {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(6px);
}
.section-navy .svc-card h3, .section-wine .svc-card h3, .section-green .svc-card h3,
.section-navy .blog-body h3, .section-wine .blog-body h3, .section-green .blog-body h3,
.section-navy .type-card h3, .section-wine .type-card h3, .section-green .type-card h3,
.section-navy .card h3, .section-wine .card h3, .section-green .card h3 { color: #fff !important; }
.section-navy .svc-card p, .section-wine .svc-card p, .section-green .svc-card p,
.section-navy .blog-body p, .section-wine .blog-body p, .section-green .blog-body p,
.section-navy .blog-meta, .section-wine .blog-meta, .section-green .blog-meta,
.section-navy .type-card p, .section-wine .type-card p, .section-green .type-card p { color: rgba(255,255,255,0.65) !important; }
.section-navy .svc-num, .section-wine .svc-num, .section-green .svc-num { color: rgba(255,255,255,0.45) !important; }
.section-navy .svc-link, .section-wine .svc-link, .section-green .svc-link { color: #ffd9a0 !important; }
.section-navy .blog-tag, .section-wine .blog-tag, .section-green .blog-tag {
  background: rgba(255,255,255,0.12) !important; color: #ffd9a0 !important;
}

/* Bold hover effects on every card everywhere */
.svc-card, .blog-card, .testi-card, .type-card {
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s, border-color 0.3s;
}
.svc-card:hover, .blog-card:hover, .type-card:hover { transform: translateY(-8px) scale(1.015); }
.testi-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.section-navy .svc-card:hover, .section-wine .svc-card:hover, .section-green .svc-card:hover,
.section-navy .blog-card:hover, .section-wine .blog-card:hover, .section-green .blog-card:hover,
.section-navy .type-card:hover, .section-wine .type-card:hover, .section-green .type-card:hover {
  background: rgba(255,255,255,0.11) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.btn-primary, .btn-ghost, .btn-white, .btn-outline-white { transition: all 0.25s cubic-bezier(.2,.8,.2,1) !important; }
.btn-primary:hover { transform: translateY(-2px) scale(1.03); }

/* Parallax image banners */
.img-banner {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.img-banner-overlay {
  position: absolute; inset: 0;
  background-size: 300% 300%;
  animation: gradientShift 16s ease infinite;
}
.img-banner-wine .img-banner-overlay { background-image: linear-gradient(120deg, rgba(35,5,15,0.92), rgba(74,15,36,0.75), rgba(42,7,19,0.92)); }
.img-banner-green .img-banner-overlay { background-image: linear-gradient(120deg, rgba(4,20,11,0.92), rgba(15,58,34,0.75), rgba(6,31,18,0.92)); }
.img-banner-inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; padding: 60px 6%; text-align: center; }
.img-banner h2 { font-family: var(--font-head); font-size: clamp(1.8rem,3.5vw,2.6rem); font-weight: 400; color: #fff; margin-bottom: 14px; line-height: 1.2; }
.img-banner h2 em { font-style: italic; color: #ffd9a0; }
.img-banner p { color: rgba(255,255,255,0.8); font-size: 0.98rem; line-height: 1.7; }
@media (max-width: 768px) { .img-banner { background-attachment: scroll; } }

/* Kenburns slow-zoom on hero slideshow for subtle motion */
@keyframes kenburns { 0%{transform:scale(1)} 100%{transform:scale(1.08)} }
.slide.active { animation: kenburns 8s ease-in-out infinite alternate; }

/* Animated stat counters */
.stat-item { transition: transform 0.3s; }
.stat-item:hover { transform: translateY(-4px); }

/* Contact section on dark navy — keep the form card itself light/white,
   but the surrounding info column adapts to light text */
.section-navy .contact-item h4 { color: #fff !important; }
.section-navy .contact-item p { color: rgba(255,255,255,0.65) !important; }
.section-navy .contact-icon { background: rgba(255,255,255,0.1) !important; color: #ffd9a0; }
.section-navy .contact-form { box-shadow: 0 20px 50px rgba(0,0,0,0.4); }

/* Scroll-reveal base state (JS toggles .is-visible) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── Mobile performance: trim continuous animation + blur cost ── */
@media (max-width: 768px) {
  .section-navy, .section-wine, .section-green,
  .img-banner-overlay {
    animation: none !important;
    background-size: 100% 100% !important;
  }
  .section-navy .svc-card, .section-wine .svc-card, .section-green .svc-card,
  .section-navy .blog-card, .section-wine .blog-card, .section-green .blog-card {
    backdrop-filter: none !important;
  }
  .slide.active { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .section-navy, .section-wine, .section-green, .img-banner-overlay, .slide.active {
    animation: none !important;
  }
  .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
}