/* ============================================================
   CUSTODI - cft- PREAMBLE  ·  site-wide CSS foundation
   ============================================================
   Preamble system version: 7.6

   CHANGES v7.5 -> v7.6 (Mathias, 12 Jul 2026):
   - Added § 15 TRUST BAR - new site-wide primitive, mid-slate
     backdrop, page-agnostic. Renders directly above the Avada
     footer via functions.php hook (see custodi_trust_bar()).
     Six credential items in a single row on desktop, wraps on
     mobile. Replaces the per-page Why Custodi band, which stays
     in § 12 for pages still using it during the transition.
   - § 11 AVADA OVERRIDES: main.clearfix padding-bottom set to
     zero. Removes the 60px gap between the last content
     container and whatever sits above the footer (trust bar
     when present, or the footer widget area otherwise). The
     55px padding-top on the footer widget area stays as the
     footer's own breathing room.
   - § 12 WHY CUSTODI BAND: marked deprecated in the header
     comment. Component CSS retained so pages still using the
     band render correctly until they migrate off it.

   CHANGES v7.4 -> v7.5 (Mathias, 3 Jul 2026):
   - § 14 HERO PROOF PILLS grid fills the column instead of
     capping at 520px, so each pill takes half the hero column
     width (matching the sub paragraph). Prevents descriptor
     text from wrapping to a second line on desktop viewports.
     Gap widened from 10px to 12px for balance at the larger
     pill size. Mobile stays single-column stack.

   CHANGES v7.3 -> v7.4 (Mathias, 3 Jul 2026):
   - § 14 HERO PROOF PILLS grid switched from centred to
     left-aligned. Hero column content (eyebrow, H1, sub) flows
     from the left; the pill row now follows the same rhythm
     instead of centring inside the column.

   CHANGES v7.2 -> v7.3 (Mathias, 3 Jul 2026):
   - § 14 HERO PROOF PILLS reshaped from single-row flex to a
     2x2 grid, fixed-width and centred in the column. Site
     standard is now four pills covering four capability domains
     per narrative page. Forensic Software adds MSAB alongside
     Belkasoft, Detego, xBit. Tactical & Defence adds Shielded
     Tents alongside Signal Isolation, Counter-Drone, Field
     Forensics. Mobile stacks 2x2 to a single column.

   CHANGES v7.1 -> v7.2 (Mathias, 3 Jul 2026):
   - Added § 14 HERO PROOF PILLS - site primitive for wayfinding
     pill row on narrative / explainer page heroes. Replaces action
     button rows where the reader hasn't earned the pitch yet.
     Cyan default accent. Brand-coloured modifier classes live in
     the relevant page CSS and only override border-left-color.
     Landed on Forensic Software and Tactical & Defence heroes.

   DELIVERY (May 2026):
   Enqueued site-wide by the Avada child theme - see
   functions.php, the "CFT PREAMBLE" enqueue block. Loads on
   every page automatically. Each page's own CSS lives in that
   page's Avada Layout Custom CSS field and builds on the cft-
   classes defined below; page CSS no longer embeds a copy of
   this preamble.

   TO UPDATE: edit this file, save, upload to the child theme
   directory. The enqueue uses filemtime() versioning, so the
   browser cache-bust is automatic - nothing else to change.

   LOCATION: wp-content/themes/Avada-Child-Theme/cft-preamble.css
   ============================================================

   ARCHITECTURE RULE:
   ALL typographic attributes (font-size, weight, colour,
   line-height, letter-spacing, margin) live here via cft-
   classes. Page layout CSS (cbel-, cmos- etc.) owns ONLY:
   container backgrounds, structural grids, component layout,
   and spacing unique to that page.
   HTML calls cft- classes for all visual attributes.

   CSS PREFIX REGISTER
   cft-    Custodi Foundation Token - this preamble only
   cmos-   Mission Darkness        cog-    OffGrid
   cbel-   Belkasoft               cdet-   Detego
   cibr-   iBrain                  cxbt-   xBit
   cna-    News & Articles         chp-    Home Page
   cdf-    Digital Forensics       ccorp-  Corporate Security
   cpers-  Personal Security       ctac-   Tactical & Defence
   cedu-   Education               cfs-    Forensic Software

   COMPLETE HTML PATTERNS
   ----------------------------------------------------------

   HERO (Code Block):
     <img class="cft-hero-logo" ...>
     <h1 class="cft-hero-h1">Line one <em>Accent line.</em></h1>
     <p class="cft-hero-sub">Subheading copy. <span class="cft-accent-close">Final clause.</span></p>
     <div class="cft-btn-row">
       <a class="cft-btn-primary" href="...">Primary CTA</a>
       <a class="cft-btn-secondary" href="...">Secondary CTA</a>
     </div>

   SECTION - light background (Text Block, Text tab):
     <p class="cft-eyebrow">Section Label</p>
     <h2 class="cft-h2">Section heading.</h2>
     <p class="cft-section-sub">Bold lead sentence under the heading.</p>
     <p class="cft-body">Body paragraph. <span class="cft-accent-close--light">Final clause.</span></p>

   SECTION - dark background (Text Block, Text tab):
     <p class="cft-eyebrow cft-eyebrow--dark">Section Label</p>
     <h2 class="cft-h2 cft-h2--dark">Section heading.</h2>
     <p class="cft-section-sub cft-section-sub--dark">Bold lead.</p>
     <p class="cft-body cft-body--dark">Body paragraph.</p>

   CARD CONTENTS (inside page-prefixed card wrapper):
     <div class="cft-card-title">Card Title</div>
     <div class="cft-card-tagline">Category / type</div>
     <div class="cft-card-body">Card body text.</div>
     <div class="cft-card-label">USE CASE · LABEL</div>

   CARD CONTENTS - dark background:
     <div class="cft-card-title cft-card-title--dark">Title</div>
     <div class="cft-card-body cft-card-body--dark">Body.</div>

   PULL QUOTE:
     <div class="cft-quote-text">Practitioner quote text.</div>
     <div class="cft-quote-attr">Attribution - Source, Year</div>

   WORKFLOW NODE (inside page-specific node wrapper):
     <div class="cft-wf-label">Node name</div>
     <div class="cft-wf-sub">Sub label</div>

   WHY CUSTODI BAND (Code Block inside cft-sand-section container):
     <div class="cft-why-custodi">
       <div class="cft-why-custodi-body">
         <p class="cft-eyebrow">Why Custodi</p>
         <h2 class="cft-h2">[Context headline]</h2>
         <p class="cft-body">[Paragraph 1 - authorisation + scope]</p>
         <p class="cft-body">[Paragraph 2 - advisory depth + procurement discipline]</p>
         <p class="cft-body">[Paragraph 3 - optional closing line]</p>
       </div>
       <div class="cft-why-custodi-panel">
         <p class="cft-why-custodi-panel-label">Custodi Credentials</p>
         <div class="cft-why-custodi-credential">
           <div class="cft-why-custodi-credential-title">Credential label</div>
           <div class="cft-why-custodi-credential-sub">Context line</div>
         </div>
         <!-- repeat 4–5 more times (5–6 credentials total) -->
       </div>
     </div>

   HERO PROOF PILLS (replaces cft-btn-row on narrative page heroes):
     <div class="cft-hero-proof">
       <a href="#anchor-1" class="cft-hero-proof-pill">Domain One <em>· Descriptor</em></a>
       <a href="#anchor-2" class="cft-hero-proof-pill">Domain Two <em>· Descriptor</em></a>
       <a href="#anchor-3" class="cft-hero-proof-pill">Domain Three <em>· Descriptor</em></a>
       <a href="#anchor-4" class="cft-hero-proof-pill">Domain Four <em>· Descriptor</em></a>
     </div>
   Site standard is four pills in a 2x2 grid, fixed-width and centred
   in the column. Brand-colour modifier classes (e.g.
   cft-hero-proof-pill--belkasoft) live in the relevant page CSS and
   only override border-left-color. Anchor IDs on the target Avada
   containers make the pills wayfinding.

   SPACING STANDARD (locked - do not override per page)
   Hero logo to H1:      26px   (logo margin-bottom)
   H1 to sub:            16px   (sub margin-top)
   Sub to buttons:       32px   (btn-row margin-top)
   Button gap:           12px
   Eyebrow to H2:        10px   (eyebrow margin-bottom)
   H2 to section-sub:    12px   (section-sub margin-top)
   Body paragraph gap:   12px   (body margin-top)
   ============================================================ */


/* ============================================================
   § 1 - HERO TYPOGRAPHY
============================================================ */

/* H1 */
.cft-hero-h1,
.fusion-text .cft-hero-h1 {
  font-size: clamp(36px, 4.5vw, 48px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  padding: 0 !important;
  font-style: normal !important;
}
.cft-hero-h1 em {
  color: #00C4E8 !important;
  font-style: normal !important;
  display: block !important;
}

/* Kill Avada default h1 margin in dark sections */
.cft-dark-section h1,
.cft-dark-section .cft-hero-h1 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Hero sub */
.cft-hero-sub,
.fusion-text .cft-hero-sub,
p.cft-hero-sub {
  font-size: 17px !important;
  font-weight: 400 !important;
  color: #C2D4DB !important;
  line-height: 1.8 !important;
  margin: 16px 0 0 0 !important;
  padding: 0 !important;
}

/* Closing accent spans */
.cft-accent-close {
  color: #00C4E8 !important;
  font-weight: 600 !important;
}
.cft-accent-close--light {
  color: #0088AA !important;
  font-weight: 600 !important;
}


/* ============================================================
   § 2 - SECTION TYPOGRAPHY
============================================================ */

/* Eyebrow - light bg default */
.cft-eyebrow,
.fusion-text .cft-eyebrow,
p.cft-eyebrow {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: #0088AA !important;
  display: block !important;
  margin-bottom: 10px !important;
  line-height: 1 !important;
  font-style: normal !important;
}
/* Dark bg modifier */
.cft-eyebrow--dark,
.fusion-text .cft-eyebrow--dark,
p.cft-eyebrow--dark {
  color: #00C4E8 !important;
}
/* Automatic dark-section cascade - any cft-eyebrow inside a
   cft-dark-section container flips to cyan without needing
   the --dark modifier class on the element. */
.cft-dark-section .cft-eyebrow,
.cft-dark-section .fusion-text .cft-eyebrow,
.cft-dark-section p.cft-eyebrow,
.fusion-fullwidth.cft-dark-section .cft-eyebrow,
.fusion-fullwidth.cft-dark-section .fusion-text .cft-eyebrow,
.fusion-fullwidth.cft-dark-section p.cft-eyebrow {
  color: #00C4E8 !important;
}

/* Legacy aliases - keeps existing page HTML working */
.custodi-site-eyebrow,
.fusion-text .custodi-site-eyebrow,
p.custodi-site-eyebrow,
.cbel-eyebrow,
.fusion-text .cbel-eyebrow,
p.cbel-eyebrow {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: #0088AA !important;
  display: block !important;
  margin-bottom: 10px !important;
  line-height: 1 !important;
  font-style: normal !important;
}
.custodi-site-eyebrow--dark-bg,
.fusion-text .custodi-site-eyebrow--dark-bg,
p.custodi-site-eyebrow--dark-bg,
.cbel-gpt-eyebrow,
.fusion-text .cbel-gpt-eyebrow,
p.cbel-gpt-eyebrow {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: #00C4E8 !important;
  display: block !important;
  margin-bottom: 10px !important;
  line-height: 1 !important;
  font-style: normal !important;
}

/* Section H2 - light bg */
.cft-h2,
.fusion-text .cft-h2,
h2.cft-h2 {
  font-size: clamp(26px, 3vw, 38px) !important;
  font-weight: 800 !important;
  color: #2B3237 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-style: normal !important;
}
/* Dark bg modifier */
.cft-h2--dark,
.fusion-text .cft-h2--dark,
h2.cft-h2--dark {
  color: #ffffff !important;
}
/* Em accent inside section H2 */
.cft-h2 em,
h2.cft-h2 em {
  color: #0088AA !important;
  font-style: normal !important;
}
.cft-h2--dark em,
h2.cft-h2--dark em {
  color: #00C4E8 !important;
  font-style: normal !important;
}
/* Em accent - dark section without explicit class */
.cft-dark-section h2 em,
.fusion-fullwidth.cft-dark-section h2 em {
  color: #00C4E8 !important;
  font-style: normal !important;
}

/* Section sub - bold lead sentence under H2 */
.cft-section-sub,
.fusion-text .cft-section-sub,
p.cft-section-sub {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #2B3237 !important;
  line-height: 1.4 !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  font-style: normal !important;
}
.cft-section-sub--dark,
.fusion-text .cft-section-sub--dark,
p.cft-section-sub--dark {
  color: #C2D4DB !important;
}

/* Body - light bg */
.cft-body,
.fusion-text .cft-body,
p.cft-body {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #4A5568 !important;
  line-height: 1.8 !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}
/* Dark bg */
.cft-body--dark,
.fusion-text .cft-body--dark,
p.cft-body--dark {
  color: #A8B9C4 !important;
}
/* Large variant - about sections, wider columns */
.cft-body--lg,
.fusion-text .cft-body--lg,
p.cft-body--lg {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #4A5568 !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

/* Section intro - lighter than body, descriptor weight */
.cft-section-intro,
.fusion-text .cft-section-intro,
p.cft-section-intro {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #6B7780 !important;
  line-height: 1.75 !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}
/* v7.1: .cft-section-intro--dark retired. Dark-bg section intros use
   cft-body + cft-body--dark instead. */


/* ============================================================
   § 3 - CARD & TILE TYPOGRAPHY
============================================================ */

/* Card title - standard (feature tiles, problem cards) */
.cft-card-title,
.fusion-text .cft-card-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #1a1f24 !important;
  line-height: 1.25 !important;
  margin-bottom: 8px !important;
  font-style: normal !important;
}
/* Large variant - platform cards, about cards */
.cft-card-title--lg,
.fusion-text .cft-card-title--lg {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #1a1f24 !important;
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
  font-style: normal !important;
}
/* Dark bg */
.cft-card-title--dark,
.fusion-text .cft-card-title--dark,
.cft-card-title--lg.cft-card-title--dark,
.fusion-text .cft-card-title--lg.cft-card-title--dark {
  color: #ffffff !important;
}

/* Card tagline - uppercase category label */
.cft-card-tagline,
.fusion-text .cft-card-tagline {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: #0088AA !important;
  margin-bottom: 14px !important;
  display: block !important;
  line-height: 1 !important;
}

/* Card body */
.cft-card-body,
.fusion-text .cft-card-body {
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: #4A5568 !important;
  line-height: 1.75 !important;
  margin-bottom: 0 !important;
}
.cft-card-body--dark,
.fusion-text .cft-card-body--dark {
  color: #A8B9C4 !important;
}

/* Card label - pill-style use case / category tag */
.cft-card-label,
.fusion-text .cft-card-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6B7780 !important;
  padding: 6px 12px !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 4px !important;
  display: inline-block !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
  margin-top: 14px !important;
}


/* ============================================================
   § 4 - PULL QUOTE
============================================================ */

.cft-quote-text,
.fusion-text .cft-quote-text {
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: #C2D4DB !important;
  line-height: 1.7 !important;
  margin-bottom: 12px !important;
}
.cft-quote-attr,
.fusion-text .cft-quote-attr {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #4A5A65 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-style: normal !important;
  display: block !important;
}


/* ============================================================
   § 5 - WORKFLOW / DIAGRAM TYPOGRAPHY
============================================================ */

.cft-wf-label,
.fusion-text .cft-wf-label {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #1a1f24 !important;
  line-height: 1.2 !important;
  display: block !important;
}
.cft-wf-sub,
.fusion-text .cft-wf-sub {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #6B7780 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-top: 3px !important;
  display: block !important;
}


/* ============================================================
   § 6 - BUTTONS
============================================================ */

/* Primary - Custodi Blue / white */
a.cft-btn-primary,
.cft-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #0088AA !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  letter-spacing: 0.2px !important;
  transition: background 0.2s ease !important;
  border: none !important;
}
a.cft-btn-primary:hover,
.cft-btn-primary:hover {
  background: #00C4E8 !important;
  color: #ffffff !important;
}

/* Secondary - ghost / white border - dark backgrounds */
a.cft-btn-secondary,
.cft-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 13px 28px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
a.cft-btn-secondary:hover,
.cft-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}

/* Secondary - light backgrounds - Custodi Blue outline / Custodi Blue text */
a.cft-btn-secondary--light,
.cft-btn-secondary--light {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  color: #0088AA !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  border-radius: 6px !important;
  border: 1px solid #0088AA !important;
  text-decoration: none !important;
  letter-spacing: 0.2px !important;
  transition: all 0.2s ease !important;
}
a.cft-btn-secondary--light:hover,
.cft-btn-secondary--light:hover {
  background: #0088AA !important;
  border-color: #0088AA !important;
  color: #ffffff !important;
}

/* Solid - Custodi Blue / white - light backgrounds */
a.cft-btn-solid,
.cft-btn-solid {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #0088AA !important;
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  border: none !important;
}
a.cft-btn-solid:hover,
.cft-btn-solid:hover {
  background: #006888 !important;
  color: #ffffff !important;
}

/* Button row */
.cft-btn-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 32px !important;
  margin-bottom: 0 !important;
}
/* wpautop wraps <a> in <p> - collapse */
.cft-btn-row p {
  display: contents !important;
  margin: 0 !important;
}


/* ============================================================
   § 7 - DARK SECTION SCAFFOLD
   Apply cft-dark-section to Avada container CSS Class field.
   Set Avada container background to None in UI.
   Page layout CSS supplies the gradient via its container class.
============================================================ */

.cft-dark-section,
.fusion-fullwidth.cft-dark-section {
  position: relative !important;
  overflow: hidden !important;
}

/* Cyan grid overlay */
.cft-dark-section::before,
.fusion-fullwidth.cft-dark-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(0, 196, 232, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 196, 232, 0.03) 1px, transparent 1px) !important;
  background-size: 60px 60px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Content above overlay */
.cft-dark-section .fusion-row,
.fusion-fullwidth.cft-dark-section .fusion-row {
  position: relative !important;
  z-index: 1 !important;
}

/* Columns above overlay - keeps Code Blocks clickable */
.cft-dark-section .fusion-layout-column,
.fusion-fullwidth.cft-dark-section .fusion-layout-column {
  position: relative !important;
  z-index: 2 !important;
}

/* White headings on dark sections */
.cft-dark-section h1,
.cft-dark-section h2,
.cft-dark-section h3,
.cft-dark-section h4,
.cft-dark-section .fusion-text h1,
.cft-dark-section .fusion-text h2,
.cft-dark-section .fusion-text h3,
.cft-dark-section .fusion-text h4,
.fusion-fullwidth.cft-dark-section h1,
.fusion-fullwidth.cft-dark-section h2,
.fusion-fullwidth.cft-dark-section h3,
.fusion-fullwidth.cft-dark-section h4,
.fusion-fullwidth.cft-dark-section .fusion-text h1,
.fusion-fullwidth.cft-dark-section .fusion-text h2,
.fusion-fullwidth.cft-dark-section .fusion-text h3,
.fusion-fullwidth.cft-dark-section .fusion-text h4 {
  color: #ffffff !important;
  font-style: normal !important;
}

/* Mist body text on dark sections */
.cft-dark-section .fusion-text p,
.cft-dark-section .fusion-text li,
.fusion-fullwidth.cft-dark-section .fusion-text p,
.fusion-fullwidth.cft-dark-section .fusion-text li {
  color: #C2D4DB !important;
}


/* ============================================================
   § 8 - HERO LOGO, BACKGROUND & GLOW

   The canonical hero treatment across every brand and solutions
   page combines three preamble classes on the hero container:

     class="cft-dark-section cft-hero-bg cft-hero-glow"

   - cft-dark-section (§ 7) provides the cyan grid overlay and
     positioning scaffold.
   - cft-hero-bg (below) supplies the navy-purple gradient.
   - cft-hero-glow (below) adds the radial cyan glow.

   Brand-specific hero-container classes (cdet-hero-container,
   cmos-hero-container, cog-hero-container, cbel-hero-container)
   are retained for non-typography overrides only (padding,
   button-row spacing, Avada-specific column quirks). They no
   longer carry background, grid, or glow rules.
============================================================ */

/* Logo - base. Page CSS overrides height when brand logo
   differs from the standard 36px (e.g. Belkasoft = 76px). */
.cft-hero-logo {
  display: block !important;
  max-width: 220px !important;
  height: auto !important;
  margin: 0 0 26px 0 !important;
  opacity: 0.92 !important;
}

/* Hero background gradient - add cft-hero-bg to container CSS Class.
   v7.1: standardised on Detego's navy-purple gradient as the
   canonical hero treatment across all brand and solutions pages. */
.cft-hero-bg,
.fusion-fullwidth.cft-hero-bg {
  background: linear-gradient(
    148deg,
    #08090f 0%,
    #0f1020 38%,
    #161628 68%,
    #1A1A2E 100%
  ) !important;
  background-color: transparent !important;
}

/* Radial glow - add cft-hero-glow to container CSS Class */
.cft-hero-glow::after {
  content: '' !important;
  position: absolute !important;
  top: -160px !important;
  right: -60px !important;
  width: 600px !important;
  height: 600px !important;
  background: radial-gradient(circle, rgba(0, 196, 232, 0.04) 0%, transparent 55%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}


/* ============================================================
   § 9 - STAT COMPONENTS
============================================================ */

.cft-stats-panel {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(0, 196, 232, 0.15) !important;
  border-radius: 8px !important;
  padding: 22px !important;
  margin-top: 20px !important;
}
.cft-stat-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}
.cft-stat {
  text-align: center !important;
  padding: 13px 8px !important;
  border-radius: 8px !important;
  background: rgba(0, 196, 232, 0.05) !important;
}
.cft-stat-num {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #00C4E8 !important;
  line-height: 1 !important;
  display: block !important;
}
.cft-stat-lbl {
  font-size: 10px !important;
  color: #B8B3AD !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-top: 5px !important;
  font-weight: 500 !important;
  display: block !important;
}


/* ============================================================
   § 10 - CARD SHELLS
   Structural card surfaces. Typography classes (§ 3) go
   on the elements inside - not here.
============================================================ */

/* Light card - standard for all light/bone section cards */
.cft-card-light {
  background: #F0EEEB !important;
  border: 1px solid #E0DEDB !important;
  border-radius: 10px !important;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06),
    0 6px 16px rgba(0, 0, 0, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.cft-card-light:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 10px 24px rgba(0, 136, 170, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
}

/* Dark card */
.cft-card-dark {
  background: linear-gradient(135deg, #2B3237 0%, #3A4045 100%) !important;
  border-radius: 12px !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.10),
    0 12px 32px rgba(0, 0, 0, 0.08) !important;
}

/* Deep dark card - navy with cyan border */
.cft-card-dark-deep {
  background: linear-gradient(160deg, #0a0d0f 0%, #111518 45%, #1a2430 100%) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 196, 232, 0.2) !important;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.22),
    0 20px 48px rgba(0, 0, 0, 0.12) !important;
}


/* ============================================================
   § 11 - AVADA OVERRIDES
============================================================ */

/* Prevent Avada italic on headings in custom HTML */
.fusion-text h1,
.fusion-text h2,
.fusion-text h3,
.fusion-text h4 {
  font-style: normal !important;
}

/* Suppress blank wpautop paragraphs */
.cft-dark-section > .fusion-row > p:empty,
.cft-dark-section > p:empty {
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Kill the Avada main padding-bottom so the last content
   container sits flush against whatever comes next - the trust
   bar (§ 15) when present, or the footer widget area otherwise.
   The 55px padding-top on .fusion-footer-widget-area stays as
   the footer's own internal breathing room. */
main.clearfix,
body main.clearfix {
  padding-bottom: 0 !important;
}


/* ============================================================
   § 12 - WHY CUSTODI BAND (v7 component - DEPRECATED at v7.6)
   Standard positioning close, historically sat between FAQ and
   Final CTA on every Solutions and Brand page. Being replaced
   by the § 15 TRUST BAR site-wide primitive. CSS retained so
   pages still using the band render correctly during the
   transition. Remove containers from individual pages in Avada
   Builder as each page is migrated.

   Original positioning notes below apply to legacy uses only.

   Avada container CSS Class: cft-sand-section
   Container background: #EBE9E6 (applied via the sand-section utility).
   The band creates its own internal two-column layout - no Avada
   column structure required. Drop as a single Code Block inside
   a single-column Container.

   Left column (60%): body copy - eyebrow, H2, 2–3 body paragraphs.
   Right column (40%): dark credentials panel - label plus 5–6
   credential lines, each with a title and sub.
============================================================ */

.cft-why-custodi {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
  gap: 48px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  align-items: start !important;
}

.cft-why-custodi-body {
  display: flex !important;
  flex-direction: column !important;
}

.cft-why-custodi-body .cft-eyebrow {
  margin-bottom: 14px !important;
}

.cft-why-custodi-body .cft-h2 {
  margin-bottom: 20px !important;
  max-width: 560px !important;
}

.cft-why-custodi-body .cft-body {
  margin-bottom: 16px !important;
}

.cft-why-custodi-body .cft-body:last-child {
  margin-bottom: 0 !important;
}

/* Credentials panel - dark card on sand surface */
.cft-why-custodi-panel {
  background: linear-gradient(160deg, #111518 0%, #1a2028 100%) !important;
  border: 1px solid rgba(0, 196, 232, 0.18) !important;
  border-radius: 12px !important;
  padding: 32px 30px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.cft-why-custodi-panel-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #00C4E8 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin: 0 0 22px 0 !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(0, 196, 232, 0.25) !important;
  line-height: 1 !important;
}

.cft-why-custodi-credential {
  position: relative !important;
  padding: 14px 0 14px 22px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.cft-why-custodi-credential:first-of-type {
  padding-top: 0 !important;
}

.cft-why-custodi-credential:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.cft-why-custodi-credential::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 20px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #00C4E8 !important;
}

.cft-why-custodi-credential:first-of-type::before {
  top: 6px !important;
}

.cft-why-custodi-credential-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
}

.cft-why-custodi-credential-sub {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: #A8B9C4 !important;
  line-height: 1.5 !important;
}

/* Responsive - collapse to single column under 900px */
@media (max-width: 900px) {
  .cft-why-custodi {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .cft-why-custodi-panel {
    padding: 26px 24px !important;
  }
}



/* ============================================================
   § 14 - CARD-LEVEL EYEBROW PRIMITIVE  (v7.1 addition)

   cft-eyebrow is the SECTION-level eyebrow (above an H2).
   cft-card-eyebrow is the CARD-level eyebrow: small uppercase
   labels inside cards, tiles, dark header bars, and featured
   panels.

   HTML pattern:
     <span class="cft-card-eyebrow cft-card-eyebrow--dark">Pack Includes</span>
     <span class="cft-card-eyebrow cft-card-eyebrow--mute">Operating system</span>
     <span class="cft-card-eyebrow cft-card-eyebrow--accent">Custodi recommends</span>

   Retires per-brand eyebrow classes (sweep across brand layout
   files): cdet-pack-config-label, cdet-hw-spec-label,
   cdet-hw-pairing-label, cdet-hw-product-eyebrow,
   cdet-deployment-eyebrow, cdet-feat-eyebrow, cdet-pillar-head,
   cdet-court-award-label, and equivalents in cmos-, cog-, cbel-.
============================================================ */

.cft-card-eyebrow {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  display: block !important;
  margin: 0 !important;
  font-family: inherit !important;
}

.cft-card-eyebrow--accent { color: #0088AA !important; }
.cft-card-eyebrow--cyan   { color: #00C4E8 !important; }
.cft-card-eyebrow--gold   { color: #D19900 !important; }
.cft-card-eyebrow--mute   { color: #B8B3AD !important; }
.cft-card-eyebrow--dark   { color: rgba(194, 212, 219, 0.7) !important; }
.cft-card-eyebrow--faint  { color: rgba(255, 255, 255, 0.35) !important; }


/* ============================================================
   § 14 - HERO PROOF PILLS (v7.3+)
   Wayfinding pattern for narrative / explainer page heroes.
   Replaces action button rows where the reader hasn't earned
   the pitch yet. Anchor-linked to deep sections.

   Site standard: four pills in a 2x2 grid, fixed-width and
   centred in the column. Each pill covers one capability
   domain, mapping to a deep section anchor further down the
   page.

   Cyan default accent matches dark-section eyebrow voice.
   Brand-coloured modifier classes live in relevant page CSS
   (e.g. .cft-hero-proof-pill--belkasoft in cfs-layout.css)
   and only override border-left-color.

   USAGE: See HTML PATTERNS block at top of file.
   FIRST LANDED: Forensic Software, Tactical & Defence (Jul 2026)
============================================================ */

.cft-hero-proof {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin: 28px 0 0 !important;
  width: 100% !important;
}
.cft-hero-proof-pill,
a.cft-hero-proof-pill {
  display: flex !important;
  align-items: center !important;
  padding: 10px 16px 10px 13px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-left: 3px solid #00C4E8 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.4px !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
}
a.cft-hero-proof-pill:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}
.cft-hero-proof-pill em {
  font-style: normal !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-left: 4px !important;
}


/* ============================================================
   § 15 - TRUST BAR (v7.6 site-wide primitive)
   Renders directly above the Avada footer on every page.
   Injected via the custodi_trust_bar() function in
   functions.php, hooked to avada_footer_before (with wp_footer
   priority 1 as fallback).

   Deployment note: MUST render outside main.clearfix (via the
   functions.php hook), not inside an Avada container. If placed
   inside an Avada container, that container's padding will
   expose the bone background around the bar. The hook approach
   outputs after </main> so the bar sits flush against the footer
   with no wrapper padding.

   Structure: two labelled clusters in one row.
   - Left cluster:  government customer / preferred-supplier credential
   - Right cluster: manufacturer authorised-channel credential
   Each cluster has a small uppercase label above a bold name list.

   Mid-slate backdrop reads correctly whether the container above
   is light (bone / white) or dark (charcoal gradient). Zero
   vertical margin, zero horizontal padding on the outer bar -
   flush edge-to-edge.
   ============================================================ */

/* Trust bar breaks out to viewport width regardless of the Avada
   container it's placed in. Combines width: 100vw with a negative-
   margin offset so it centres on the viewport and ignores any
   parent max-width or padding. Means the trust bar can be pasted
   into any Code Block on any page and always render edge-to-edge. */
.cft-trust-bar {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  background: #5A6570 !important;
  padding: 22px 0 !important;
  position: relative !important;
}

.cft-trust-bar-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 48px !important;
  flex-wrap: wrap !important;
}

.cft-trust-bar-cluster {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.cft-trust-bar-cluster--right {
  align-items: flex-end !important;
  text-align: right !important;
}

.cft-trust-bar-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1 !important;
}

.cft-trust-bar-list {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.92) !important;
  line-height: 1.3 !important;
}

@media (max-width: 900px) {
  .cft-trust-bar { padding: 20px 0 !important; }
  .cft-trust-bar-inner {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: flex-start !important;
    padding: 0 20px !important;
  }
  .cft-trust-bar-cluster--right {
    align-items: flex-start !important;
    text-align: left !important;
  }
  .cft-trust-bar-label { font-size: 9px !important; letter-spacing: 0.18em !important; }
  .cft-trust-bar-list { font-size: 12px !important; letter-spacing: 0.06em !important; }
}


/* ============================================================
   § 13 - RESPONSIVE
============================================================ */

@media (max-width: 800px) {
  .cft-hero-h1 { font-size: clamp(28px, 8vw, 36px) !important; }
  .cft-hero-sub { font-size: 15px !important; margin-top: 14px !important; }
  .cft-hero-logo { max-width: 200px !important; }
  .cft-btn-row {
    flex-direction: column !important;
    align-items: center !important;
    margin-top: 24px !important;
  }
  /* Buttons ~20% smaller on mobile for the cft- button variants.
     Hero-specific overrides (in the page CSS) have higher specificity
     and win where they apply. */
  .cft-btn-primary,
  .cft-btn-secondary,
  .cft-btn-secondary--light,
  .cft-btn-solid {
    padding: 10px 22px !important;
    font-size: 12px !important;
  }
  .cft-h2 { font-size: clamp(22px, 5.5vw, 26px) !important; }
  .cft-section-sub { font-size: 15px !important; }
  .cft-stat-row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Hero proof pills - stack to single column on narrow viewports */
@media (max-width: 600px) {
  .cft-hero-proof {
    grid-template-columns: 1fr !important;
  }
  .cft-hero-proof-pill,
  a.cft-hero-proof-pill {
    font-size: 11px !important;
    padding: 9px 14px 9px 11px !important;
  }
}