/* services-investigations.css — per-page styles for /services/investigations.html. See docs/pages/services/README.md for shared conventions. */

/* ============================================================
   Afrique Du Sud K9 — Investigations detail
   Page-specific styles for /src/pages/services/investigations.html.
   Tokens, base styles, header/footer chrome, .container,
   .slash-mask, [data-reveal], .mono, .skip-link, .btn-*
   utilities all live in main.css — do not redefine here.
   Mobile-first; widen via @media (min-width: 700px / 1100px).
   Section BEM roots locked by the frozen plan map:
     .investigations-overview /
     .investigations-offer / .investigations-trust
     (hero + related now use shared partials in main.css)
   ============================================================ */


/* ============================================================
   Hero — uses shared .page-hero from main.css via the
   src/partials/page-hero.html partial. No page-local rules.
   ============================================================ */


/* ============================================================
   #investigations-overview — paper intro band
   Single intro paragraph. No jump nav (short page). Padding-block
   halved (matches Training / K9 Units / Surveillance precedent).
   ============================================================ */
#investigations-overview.investigations-overview {
  background: var(--paper);
  padding-block: calc(var(--section-y) / 2);
}

.investigations-overview__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.investigations-overview__lead {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--grey-700);
  max-width: 70ch;
  margin: 0;
}


/* ============================================================
   #investigations-offer — white band; "What we offer"
    Eight text-only cards in a 1-col mobile grid, widening to
    2-col at >=700px and 3-col at >=1100px. Cards use --paper bg
    + left orange rule for emphasis.
   ============================================================ */
#investigations-offer.investigations-offer {
  background: var(--white);
  padding-block: var(--section-y);
}

.investigations-offer__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.investigations-offer__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 2rem;
}

.investigations-offer__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.investigations-offer__item {
  background: var(--paper);
  border-radius: var(--radius);
  border-left: 3px solid var(--orange);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.investigations-offer__name {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.investigations-offer__desc {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--grey-700);
  margin: 0;
}


/* ============================================================
   #investigations-trust — ink callout band
   Mirrors .k9-callout / .guarding-people / .surveillance-sensing
   ink-callout pattern. No heading. Centered display-font quote,
   mono tag underneath, single orange display-uppercase link.
   ============================================================ */
#investigations-trust.investigations-trust {
  background: var(--ink);
  color: var(--white);
  padding-block: var(--section-y);
  text-align: center;
}

.investigations-trust__inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.investigations-trust__quote {
  margin: 0 auto 1.5rem;
  max-width: 90vw;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--white);
}

.investigations-trust__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 1.5rem;
}

.investigations-trust__link {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-small);
  color: var(--orange);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 0.15rem;
  transition: color 200ms ease;
}
.investigations-trust__link:hover,
.investigations-trust__link:focus-visible {
  color: var(--white);
  text-decoration: none;
}


/* ============================================================
   Related services — uses shared .related-services block
   from main.css via the src/partials/related-services.html
   partial. No page-local rules.
   ============================================================ */


/* ============================================================
   Breakpoint: >=700px
   Tablet shifts: offer items become 2-col; importance lists
   gain a touch more horizontal breathing room via 2-col grid.
   ============================================================ */
@media (min-width: 700px) {
  .investigations-offer__items {
    grid-template-columns: 1fr 1fr;
  }
  .investigations-importance__list {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
  }
}


/* ============================================================
   Breakpoint: >=1100px
   Desktop: importance lead + close get a touch more measure.
   ============================================================ */
@media (min-width: 1100px) {
  .investigations-offer__items {
    grid-template-columns: repeat(3, 1fr);
  }
  .investigations-importance__lead,
  .investigations-importance__close {
    max-width: 75ch;
  }
}


/* ============================================================
   #investigations-importance — paper band, importance + lists
   Title + lead paragraph, then two subtitle/list pairs (client
   base, problems solved), closing with a muted bridging line.
   Lists are punchy: bold strong lead-in (display font, ink)
   followed by descriptive body text. Mirrors the tonal weight
   of #investigations-offer without re-using card chrome.
   ============================================================ */
#investigations-importance.investigations-importance {
  background: var(--paper);
  padding-block: var(--section-y);
}

.investigations-importance__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.investigations-importance__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
}

.investigations-importance__lead {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--grey-700);
  max-width: 70ch;
  margin: 0 0 2.5rem;
}

.investigations-importance__subtitle {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 1rem;
}

.investigations-importance__list {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 80ch;
}

.investigations-importance__item {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--grey-700);
  padding-left: 1rem;
  border-left: 2px solid var(--orange);
  margin: 0;
}

.investigations-importance__item strong {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.investigations-importance__close {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--grey-700);
  max-width: 70ch;
  margin: 0;
}


/* ============================================================
   Reduced-motion local guards
   (global guard in main.css already disables transitions/anims
   on everything; this is a belt-and-braces guard for the
   trust-link colour swap.)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .investigations-trust__link {
    transition: none;
  }
}