/* =============================================================
   clx-aiagents-v2 — "instrument panel" DARK skin for the agent stack.

   SHARED, ADDITIVE SKIN. Nothing here applies unless the panel root carries
   the `inv--v2` class, so the original DM panel styling is untouched and one
   class removal reverts completely.

   Every rule is prefixed `#clx-inv-panel.inv--v2` so it outranks the base
   sheet (which mixes bare `.inv-*`, `#clx-inv-panel …` and `!important`).

   Colour is token-driven — reskinning light/dark means changing the vars only.
   ============================================================= */

#clx-inv-panel.inv--v2{
  /* Palette carried over from "The Ways We Work" / "How AI Powers Our Workflows"
     on /about-us/ (the .awf-* system). Warm paper-on-near-black, not pure white
     on grey, so this panel reads as part of the same family. */
  --inv-bg:#08080a;                     /* awf --bg */
  --inv-card:rgba(255,255,255,.022);    /* barely-there lift (neutral, not cream) */
  --inv-line:rgba(255,255,255,.10);     /* faint dividers / inner hairlines */
  /* Card border. Stays 1px (same width as .svc-offer-card). White, but held back
     from full opacity: #fff on near-black is max contrast and makes the same 1px
     hairline read far thicker than the service cards' #e6e6ee on white. */
  --inv-edge:rgba(255,255,255,.35);
  --inv-ink:#ffffff;                    /* pure white text */
  --inv-muted:rgba(255,255,255,.75);
  --inv-dim:rgba(255,255,255,.55);
  --inv-accent:#FA4900;                 /* awf --ember */
  --inv-accent-bright:#FF8A4C;          /* awf --ember-bright */
  --inv-status:#22C55E;
  --inv-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  background:var(--inv-bg) !important;
  color:var(--inv-ink) !important;
  /* IN-GRID default (DM): rounded black card with real side padding so the
     agent cards never touch the black edge, and modest height. */
  margin:0 !important;
  overflow:hidden !important;      /* keeps the canvas inside the rounded corners */
  position:relative !important;
}

/* Full-bleed is OPT-IN via `inv--bleed`. The SEO panel is a standalone section
   so it bleeds edge to edge and squares off; the DM panel is a grid item inside
   .svc-cards-grid, where a -50vw bleed would break the grid, so it stays in flow. */
#clx-inv-panel.inv--v2.inv--bleed{
  /* Scrollbar-safe full bleed. Negative margins push the black band out to the
     viewport edges; the matching padding pulls the CONTENT back to the parent
     container's exact box, so the cards line up with the service grid above.
     (100vw centres on the viewport, which is wider than the document by the
     scrollbar, so it was off by ~8px per side.) */
  width:auto !important;
  left:auto !important;
  right:auto !important;
  margin-left:calc(-50vw + 50%) !important;
  margin-right:calc(-50vw + 50%) !important;
  padding-left:calc(50vw - 50%) !important;
  padding-right:calc(50vw - 50%) !important;
  padding-top:78px !important;
  padding-bottom:78px !important;
  border-radius:0 !important;
}

/* Content must clear the canvas/grain. Covers the SEO panel (.inv-content) and
   the DM panel, whose sections are direct children of the root. */
#clx-inv-panel.inv--v2 > *:not(.awf-canvas):not(.awf-grain){
  position:relative !important;z-index:2 !important;
}
#clx-inv-panel.inv--v2::after{content:none !important;}

/* ---- animated ember streak field (carried over from /about-us/) ----
   .awf-canvas and .awf-grain are ALREADY defined globally in site-wide.css
   (grain sits at opacity .06). We deliberately do NOT restyle them here, so this
   panel and the About Us section stay pixel-identical and cannot drift.
   Only the content stacking context is set. */
#clx-inv-panel.inv--v2 .inv-content{position:relative !important;z-index:2 !important;width:100% !important;}

/* The bleed padding above already restores the parent container box, so the
   inner wrapper must NOT re-centre or re-pad — it just fills that box, giving
   the cards the identical left/right edges as the service grid. */
#clx-inv-panel.inv--v2.inv--bleed .inv-content{
  max-width:none !important;margin:0 !important;padding:0 !important;
}

/* ---- heading + intro (centred, inverted) ---- */
#clx-inv-panel.inv--v2 .inv-heading{
  font-family:'Cabin',sans-serif !important;
  font-weight:500 !important;
  font-size:clamp(30px,4vw,46px) !important;
  line-height:1.15 !important;
  letter-spacing:-1.2px !important;
  color:var(--inv-ink) !important;
  text-align:center !important;
  margin:0 0 14px !important;
}
/* highlight word uses the SAME gradient as .awf-em ("AI" in "How AI Powers Our
   Workflows" on /about-us/), so the orange reads identically across all three */
#clx-inv-panel.inv--v2 .inv-heading span{
  background:linear-gradient(92deg,#FFB07A,#FF8A4C 35%,#FA4900 80%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}
#clx-inv-panel.inv--v2 .inv-intro{
  font-family:'Cabin',sans-serif;
  font-size:17px;
  line-height:28px;
  color:var(--inv-muted);
  text-align:center;
  max-width:720px;
  margin:0 auto;
}

/* ---- dividers: the .awf-seam treatment (fades out at both ends) ---- */
#clx-inv-panel.inv--v2 .inv-rule{
  border:0 !important;
  height:1px !important;
  max-width:1120px !important;
  margin:22px auto 26px !important;
  background:linear-gradient(90deg, transparent, rgba(250,73,0,.55), transparent) !important;
  opacity:1 !important;
}
#clx-inv-panel.inv--v2 .inv-rule--muted{
  background:linear-gradient(90deg, transparent, var(--inv-line), transparent) !important;
  margin:44px auto 34px !important;
}

/* ---- grid + cards ---- */
#clx-inv-panel.inv--v2 .inv-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
}
/* card chrome carried over from .awf-card: warm hover lift + ember wash + a top
   accent rule that lights up on hover */
#clx-inv-panel.inv--v2 .inv-slot{
  position:relative !important;min-width:0 !important;overflow-wrap:anywhere !important;
  display:flex !important;flex-direction:column !important;   /* bar pins to card bottom */
  /* matches .awf-card: gradient fill + 16px edges + 6px backdrop blur */
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)) !important;
  border:1px solid var(--inv-edge) !important;
  border-radius:14px !important;
  padding:14px 14px 12px !important;gap:4px !important;
  color:var(--inv-ink) !important;
  box-shadow:none !important;
  overflow:hidden !important;
  -webkit-backdrop-filter:blur(6px) !important;
  backdrop-filter:blur(6px) !important;
  transition:border-color .3s,transform .3s,background .3s !important;
  /* revealed by JS (see clx-aiagents-v2.js); visible by default if JS fails */
}
#clx-inv-panel.inv--v2 .inv-slot::before{
  content:"" !important;position:absolute !important;top:0 !important;left:0 !important;right:0 !important;
  height:1px !important;background:var(--inv-line) !important;transition:background .25s ease !important;
}
#clx-inv-panel.inv--v2 .inv-slot:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(255,138,76,.35) !important;
  background:linear-gradient(180deg, rgba(250,73,0,.07), rgba(255,255,255,.012)) !important;
}
#clx-inv-panel.inv--v2 .inv-slot:hover::before{
  background:linear-gradient(90deg, transparent, rgba(255,138,76,.7), transparent) !important;
}
#clx-inv-panel.inv--v2 .inv-slot__top{
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  margin-bottom:8px !important;
}
#clx-inv-panel.inv--v2 .inv-slot__emoji{font-size:16px !important;line-height:1 !important;}
#clx-inv-panel.inv--v2 .inv-top-right{display:flex !important;align-items:center !important;gap:8px !important;}

/* RUNNING badge */
#clx-inv-panel.inv--v2 .inv-status{
  display:inline-flex !important;align-items:center !important;gap:6px !important;
  font-family:'Cabin',sans-serif !important;
  font-size:10px !important;font-weight:600 !important;
  letter-spacing:.10em !important;text-transform:uppercase !important;
  color:var(--inv-dim) !important;background:none !important;
  padding:0 !important;border:0 !important;
}
#clx-inv-panel.inv--v2 .inv-status .dot{
  width:7px !important;height:7px !important;border-radius:50% !important;
  background:var(--inv-status) !important;display:block !important;
  flex:none !important;
  animation:clx-inv-pulse 2s ease-in-out infinite;
}
/* Breathes with a glow + expanding halo rather than a faint opacity fade, so the
   "running" state actually reads. Animates opacity/box-shadow only (no layout). */
@keyframes clx-inv-pulse{
  0%,100%{
    opacity:.55;
    box-shadow:0 0 3px rgba(34,197,94,.35), 0 0 0 0 rgba(34,197,94,.45);
  }
  50%{
    opacity:1;
    box-shadow:0 0 9px rgba(34,197,94,.95), 0 0 0 5px rgba(34,197,94,0);
  }
}
@media (prefers-reduced-motion:reduce){
  #clx-inv-panel.inv--v2 .inv-status .dot{animation:none;}
}

/* callsign — monospaced, system stack (no extra webfont) */
#clx-inv-panel.inv--v2 .inv-slot__key{
  font-family:var(--inv-mono) !important;
  font-size:11px !important;font-weight:600 !important;letter-spacing:.04em !important;
  color:var(--inv-accent) !important;background:none !important;
  padding:0 !important;border:0 !important;
}

#clx-inv-panel.inv--v2 .inv-slot__name{
  font-family:'Cabin',sans-serif !important;
  font-size:15px !important;font-weight:700 !important;line-height:1.2 !important;
  color:var(--inv-ink) !important;margin:0 !important;
}
#clx-inv-panel.inv--v2 .inv-slot__cat{
  font-family:'Cabin',sans-serif !important;
  font-size:10px !important;font-weight:600 !important;
  letter-spacing:1.5px !important;text-transform:uppercase !important;
  color:var(--inv-dim) !important;margin:0 0 10px !important;
}
#clx-inv-panel.inv--v2 .inv-slot__bullets{
  /* bottom margin guarantees clearance from the progress bar even when the
     bar's margin-top:auto collapses on a full card */
  list-style:none !important;margin:0 0 12px !important;padding:0 !important;
}
#clx-inv-panel.inv--v2 .inv-slot__bullets li{
  /* flex (not absolute) so the dot tracks the first line box exactly and the
     text wraps in a proper column instead of under the marker */
  display:flex !important;align-items:flex-start !important;gap:7px !important;
  font-family:'DM Sans',sans-serif !important;
  font-size:11px !important;line-height:1.4 !important;
  color:var(--inv-muted) !important;
  padding-left:0 !important;margin:0 0 6px !important;
}
#clx-inv-panel.inv--v2 .inv-slot__bullets li:last-child{margin-bottom:0 !important;}

/* ---- progress bar + telemetry wave ----
   Retained from the DM panel and defined in full here (the base sheet only
   loads with the DM render), so the card is IDENTICAL on both pages. */
#clx-inv-panel.inv--v2 .inv-slot__bar-wrap{
  margin-top:auto !important;height:6px !important;
  background:rgba(255,255,255,.08) !important;
  border-radius:99px !important;overflow:hidden !important;position:relative !important;
  box-shadow:none !important;
}
#clx-inv-panel.inv--v2 .inv-slot__bar{
  background:transparent !important;position:relative !important;
  display:block !important;height:100% !important;animation:none !important;
}
#clx-inv-panel.inv--v2 .inv-slot__bar::after{
  content:"" !important;position:absolute !important;top:0 !important;bottom:0 !important;
  left:0 !important;width:40% !important;border-radius:999px !important;
  background:linear-gradient(90deg, rgba(234,88,12,0) 0%, #fb923c 50%, #ea580c 100%) !important;
  /* transform, not `left` — same motion, no layout-thrashing infinite animation */
  animation:clx-inv-run 5.5s linear infinite !important;
}
@keyframes clx-inv-run{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}

#clx-inv-panel.inv--v2 .inv-telemetry{margin-top:8px !important;display:flex !important;align-items:center !important;}
#clx-inv-panel.inv--v2 .inv-spark{display:inline-flex !important;gap:2px !important;align-items:flex-end !important;height:12px !important;}
#clx-inv-panel.inv--v2 .inv-spark span{
  width:3px !important;background:#fb923c !important;border-radius:1px !important;
  opacity:.85 !important;animation:clx-inv-spark 2s ease-in-out infinite !important;
}
#clx-inv-panel.inv--v2 .inv-spark span:nth-child(1){animation-delay:0s !important;}
#clx-inv-panel.inv--v2 .inv-spark span:nth-child(2){animation-delay:.25s !important;}
#clx-inv-panel.inv--v2 .inv-spark span:nth-child(3){animation-delay:.5s !important;}
#clx-inv-panel.inv--v2 .inv-spark span:nth-child(4){animation-delay:.75s !important;}
#clx-inv-panel.inv--v2 .inv-spark span:nth-child(5){animation-delay:1s !important;}
@keyframes clx-inv-spark{0%,100%{height:4px}50%{height:12px}}

@media (prefers-reduced-motion:reduce){
  #clx-inv-panel.inv--v2 .inv-slot__bar::after,
  #clx-inv-panel.inv--v2 .inv-spark span{animation:none !important;}
}
#clx-inv-panel.inv--v2 .inv-slot__bullets li::before{
  content:"" !important;position:static !important;flex:none !important;
  width:5px !important;height:5px !important;border-radius:50% !important;
  margin-top:5px !important;   /* centres the dot on the 15.4px first line */
  background:var(--inv-accent) !important;opacity:.85 !important;
}

/* ---- footer callouts: boxed, mirroring the DM panel's .inv-footer__col
   (label / heading / body in a bordered card) translated to dark ---- */
#clx-inv-panel.inv--v2 .inv-footer{
  display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:10px !important;
  background:none !important;border:0 !important;padding:0 !important;
}
#clx-inv-panel.inv--v2 .inv-footer__col{min-width:0 !important;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)) !important;
  border:1px solid var(--inv-edge) !important;
  border-radius:16px !important;
  padding:16px 18px !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:blur(6px) !important;
  backdrop-filter:blur(6px) !important;
  display:flex !important;flex-direction:column !important;gap:8px !important;
}
#clx-inv-panel.inv--v2 .inv-footer__label{
  display:block !important;
  font-family:'Cabin',sans-serif !important;
  font-size:11px !important;font-weight:600 !important;
  letter-spacing:2px !important;text-transform:uppercase !important;
  color:var(--inv-accent) !important;margin:0 !important;
}
#clx-inv-panel.inv--v2 .inv-footer__col-heading{
  font-family:'Cabin',sans-serif !important;
  font-size:15px !important;line-height:1.35 !important;font-weight:600 !important;
  color:var(--inv-ink) !important;margin:0 !important;
}
#clx-inv-panel.inv--v2 .inv-footer__body{
  font-family:'DM Sans',sans-serif !important;
  font-size:13.5px !important;line-height:1.55 !important;font-weight:400 !important;
  color:var(--inv-muted) !important;margin:0 !important;
}

/* ---- scroll reveal (staggered). Failsafe: visible if JS never runs. ---- */
#clx-inv-panel.inv--v2.is-armed .inv-slot{opacity:0;transform:translateY(14px);}
#clx-inv-panel.inv--v2.is-armed.is-in .inv-slot{
  opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease;
}
#clx-inv-panel.inv--v2.is-armed.is-in .inv-slot:nth-child(2){transition-delay:.1s;}
#clx-inv-panel.inv--v2.is-armed.is-in .inv-slot:nth-child(3){transition-delay:.2s;}
#clx-inv-panel.inv--v2.is-armed.is-in .inv-slot:nth-child(4){transition-delay:.3s;}
#clx-inv-panel.inv--v2.is-armed.is-in .inv-slot:nth-child(5){transition-delay:.4s;}
#clx-inv-panel.inv--v2.is-armed.is-in .inv-slot:nth-child(6){transition-delay:.5s;}

@media (max-width:1000px){
  #clx-inv-panel.inv--v2 .inv-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width:680px){
  /* NEVER zero the horizontal padding here — that used to leave the cards
     flush against the panel edge on phones. Only the vertical rhythm changes;
     side spacing comes from the inner wrapper so it works for both variants. */
  #clx-inv-panel.inv--v2{padding-top:52px !important;padding-bottom:52px !important;}
  #clx-inv-panel.inv--v2 .inv-content,
  #clx-inv-panel.inv--v2.inv--bleed .inv-content{
    padding-left:20px !important;padding-right:20px !important;
  }
  #clx-inv-panel.inv--v2 .inv-grid{grid-template-columns:1fr !important;}
  #clx-inv-panel.inv--v2 .inv-footer{grid-template-columns:1fr !important;gap:12px !important;}
  #clx-inv-panel.inv--v2 .inv-heading{font-size:clamp(24px,7vw,32px) !important;}
}

/* eyebrow ("Proprietary AI") is dropped in the v2 skin */
#clx-inv-panel.inv--v2 .inv-eyebrow{display:none !important;}

/* "6 agents active" — plain muted label, same treatment as the other small
   text in the panel (function labels / RUNNING). The base sheet gives it a
   mid-grey that is too dark on black, a pulsing dot and a blinking caret. */
#clx-inv-panel.inv--v2 .inv-badge{
  font-family:'Cabin',sans-serif !important;
  font-size:11px !important;font-weight:600 !important;
  letter-spacing:.10em !important;text-transform:uppercase !important;
  color:var(--inv-dim) !important;
  background:none !important;border:0 !important;padding:0 !important;
}
/* the pulsing dot stays off... */
#clx-inv-panel.inv--v2 .inv-badge::before{content:none !important;display:none !important;}
/* ...but keep the blinking terminal caret, in the original #FA4900.
   Keyframe is namespaced because the base sheet only loads on /digital-marketing/. */
#clx-inv-panel.inv--v2 .inv-badge::after{
  content:"_" !important;display:inline !important;
  color:var(--inv-accent) !important;
  margin-left:1px !important;
  animation:clx-inv-blink .5s steps(1,end) infinite !important;
}
@keyframes clx-inv-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  #clx-inv-panel.inv--v2 .inv-badge::after{animation:none !important;}
}

/* the header row now holds only the badge — keep it out of the centred stack */
#clx-inv-panel.inv--v2 .inv-header{justify-content:flex-end !important;margin-bottom:2px !important;}