/* JJS v1 - design overrides
   Loaded only by index-v1.html. Overrides style.css for the v1 variant.

   v1 vs v2:
   - Hero + quote share ONE seamless dark photo band (separate sections, one background)
   - Investigations/risk are dark photo sections (not gold/gold-tint)
   - Service cards are white (not dark/gold)
   - Contact section has gold CTA buttons
*/


/* ================================================================
   HERO BAND
   Wrapper that provides the shared dark background for both
   the hero (logo only) and the quote (text + CTA) sections.
   The two sections are visually ONE surface split across scroll.
   ================================================================ */
.hero-band {
  position: relative;
  background: #000;
}

/* Rainy-street photo: grayscale, layered over black */
.hero-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/hero.webp') center bottom / cover no-repeat;
  filter: grayscale(1);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

/* Vignette: fades black at top and bottom, clear in the middle */
.hero-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.80) 0%,
    rgba(0,0,0,0)    18%,
    rgba(0,0,0,0)    75%,
    rgba(0,0,0,0.90) 100%
  );
  pointer-events: none;
  z-index: 1;
}


/* ================================================================
   HERO (within band)
   Transparent - background comes from .hero-band.
   Logo centred vertically in one viewport height.
   ================================================================ */
.hero-band .section--hero {
  background: transparent;
  min-height: 100vh;
  position: relative;
  z-index: 2;
}

/* ================================================================
   NAV v1: always dark throughout the page
   Figma dark-mode variant: #0D0D0F background, white logo, white bars.
   Logo visibility on scroll is handled by main.js (logo--visible class).
   ================================================================ */
.nav {
  background: var(--jjs-neutral-950);
}

.nav__hamburger span {
  background: var(--jjs-neutral-0);
}


/* ================================================================
   QUOTE (within band)
   Transparent - shares the hero-band background.
   Suppress the quote section's own ::before / ::after photo layers.
   Padding from Figma: 144px top/bottom, 168px sides (via section-px).
   ================================================================ */
.hero-band .section--quote {
  background: transparent;
  min-height: auto;
  position: relative;
  z-index: 2;
}

/* Clear the quote section's own image/overlay pseudo-elements */
.hero-band .section--quote::before,
.hero-band .section--quote::after {
  display: none;
}

/* Ensure quote content sits above band overlays */
.hero-band .section--quote .section__inner {
  position: relative;
  z-index: 2;
}


/* ================================================================
   INVESTIGATIONS v1
   Dark photo + vignette gradient. Was: gold bg + screen-blend.
   ================================================================ */
.section--investigations {
  background-color: #000;
  min-height: 800px;
}

/* Override: 50% grayscale photo (was 10% screen-blend) */
.section--investigations::before {
  filter: grayscale(1);
  opacity: 0.5;
  mix-blend-mode: normal;
}

/* Vignette gradient (::after was unused in base for investigations) */
.section--investigations::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,1)    0%,  rgba(0,0,0,0) 22%,
    rgba(0,0,0,0)   78%,  rgba(0,0,0,1)    100%
  );
  pointer-events: none;
  z-index: 1;
}

.section--investigations .section__inner { z-index: 2; }

/* Gold CTA in investigations column (was btn--dark in v2) */
.section--investigations .btn--dark {
  background: var(--accent);
  color: var(--text-on-gold);
}


/* ================================================================
   RISK v1
   Keep dark photo + luminosity (::before unchanged).
   Replace gold colour-blend (::after) with vignette gradient.
   ================================================================ */
.section--risk::after {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,1)    0%,  rgba(0,0,0,0) 22%,
    rgba(0,0,0,0)   78%,  rgba(0,0,0,1)    100%
  );
  mix-blend-mode: normal;
}


/* ================================================================
   WHITE SERVICE CARD (v1 - both investigations and risk)
   ================================================================ */
.service-card--white {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--card-r-inv);
}

.service-card--white .service-card__intro { color: var(--text-primary); }
.service-card--white .service-card__list li { color: var(--text-primary); }


/* ================================================================
   CONTACT v1
   Gold CTA buttons replace text links.
   ================================================================ */
.contact-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 40px;
}

.contact-actions .btn {
  text-align: center;
  text-decoration: none;
}

.contact-actions a[href^="tel:"] { display: none; }

@media (max-width: 900px) {
  .contact-actions a[href^="tel:"] { display: inline-flex; }
}


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
  .hero-band .section--quote { padding-top: 0; }
}

@media (max-width: 600px) {
  .contact-actions .btn { width: 100%; }
}