/* Cichocki Advisory — "Brass & Basalt" imagery pilot (candidate 18; Jan 2026-10-20 YES, worker/decision-art-direction.md).
   Loaded LAST on the six pilot pages (home, services, approach, governance, trust, diagnostic) so it wins every equal-specificity
   contest against the page's own inline styles and tailwind.css. Everything here is presentation of decorative artwork: no text,
   no form, no chat, no Calendly link is touched. All artwork is self-hosted under /assets/img/bb-*.{avif,webp}.

   Four components:
     .ca-bb-hero   interior page header. >=1025px: art on the right, copy left-aligned on a left-side gradient that guarantees
                   contrast (>=4.5:1 body / >=3:1 large, measured over the worst crop at 320/390/768/1280, worker/c18/evidence).
                   <=1024px (phones and tablets): the art is a band ABOVE the copy instead of an invisible background behind it.
     .ca-bb-band   thin brass-inlay divider between major sections (bb-inlay, lazy).
     .ca-bb-cta    closing call to action with the colonnade panorama behind it (bb-colonnade, lazy); the copy column sits on a
                   near-solid centre, the picture shows at the sides; a band above the copy on phones.
     .ca-bb-vista  the colonnade as a standalone band (approach page, pass 3): used where the closing section carries a protected
                   Calendly link, because no artwork may sit behind or inside a protected element (Codex C18V-01).
     .svc-art      services pillar card tops (bb-card-*, lazy). */

/* ── interior hero ──────────────────────────────────────────────────────── */
/* base box (restated here so the diagnostic, which does not load ca-page-header.css, gets the same art box as the p3 pages) */
.ca-bb-hero{position:relative;overflow:hidden}
.ca-bb-hero > *:not(.ca-page-art){position:relative;z-index:1}
.ca-bb-hero .ca-page-art{position:absolute;inset:0;z-index:0;pointer-events:none}
.ca-bb-hero .ca-page-art img{width:100%;height:100%;object-fit:cover;display:block;object-position:74% 50%}
.ca-bb-hero .ca-page-art::after{content:"";position:absolute;inset:0}
.ca-bb-hero .ca-page-art::after{
  /* left-anchored: solid behind the copy column, released to the right where the subject sits; the vertical ramp keeps the
     bottom (pills, CTA rows, diagram) and the top edge quiet */
  background:
    linear-gradient(90deg, rgba(10,11,15,.97) 0%, rgba(10,11,15,.95) 40%, rgba(10,11,15,.66) 58%, rgba(10,11,15,.26) 78%, rgba(10,11,15,.12) 100%),
    linear-gradient(180deg, rgba(10,11,15,.34) 0%, rgba(10,11,15,0) 28%, rgba(10,11,15,0) 52%, rgba(10,11,15,.90) 100%);
}
/* governance and the diagnostic carry wide content (org-chart diagram, terms strip, CTA) under the copy: hold the ground solid there */
.gov-hero.ca-bb-hero .ca-page-art::after,
.dx-hero.ca-bb-hero .ca-page-art::after{
  background:
    linear-gradient(90deg, rgba(10,11,15,.97) 0%, rgba(10,11,15,.95) 40%, rgba(10,11,15,.66) 58%, rgba(10,11,15,.26) 78%, rgba(10,11,15,.12) 100%),
    linear-gradient(180deg, rgba(10,11,15,.34) 0%, rgba(10,11,15,0) 24%, rgba(10,11,15,.92) 58%, rgba(10,11,15,.97) 100%);
}
/* the governance hero is taller than the picture is wide: show the brass threshold, not only the stone beside it */
.gov-hero.ca-bb-hero .ca-page-art img{object-position:60% 50%}

@media (min-width:1025px){
  /* pass 2 (Jan 2026-10-20): the governance hero is ~1000px tall and cover was cropping the picture to its middle third, under a
     scrim 92% solid from 58% down: nearly invisible. The art now covers only the TOP 600px (the copy block; the org-chart diagram
     below it sits on plain ground), is anchored to the right edge where the brass lines are brightest, and the gradients hold
     solid only behind the copy column (text ends at ~54% of the hero width) and fade to the page ground at the bottom. */
  /* pass 3 (Codex C18V-01 class): the hero's "Book a Governance Call" link is a PROTECTED Calendly link and sat over this art box
     (x 104-331 of a 1072px hero at 1280; the box spanned the full width). The box is now the RIGHT HALF only (50% wide), so the
     copy column's CTA row (left-aligned, ~230px wide, ~450px at 200% text) never touches it at any width >= 1025px. The visible
     pixels are unchanged: the picture is right-anchored, so the right half shows exactly what it showed before, and the left half
     was under a 95-97% scrim (page ground). The horizontal gradient keeps the same absolute stops (62% / 76% of the full hero =
     24% / 52% of the half-width box). */
  .gov-hero.ca-bb-hero .ca-page-art{inset:0 0 auto auto;width:50%;height:600px}
  .gov-hero.ca-bb-hero .ca-page-art img{object-position:100% 50%}
  .gov-hero.ca-bb-hero .ca-page-art::after{
    background:
      linear-gradient(90deg, rgba(10,11,15,.97) 0%, rgba(10,11,15,.95) 4%, rgba(10,11,15,.62) 24%, rgba(10,11,15,.22) 52%, rgba(10,11,15,.08) 100%),
      linear-gradient(180deg, rgba(10,11,15,.30) 0%, rgba(10,11,15,0) 22%, rgba(10,11,15,0) 62%, rgba(10,11,15,.70) 86%, #0A0B0F 100%);
  }
  /* desktop: copy left, subject right; below this width the copy would run under the subject, so the band layout applies instead */
  .ca-bb-hero{text-align:left}
  .ca-bb-hero nav,
  .ca-bb-hero .engage-modes,
  .ca-bb-hero .approach-pills,
  .ca-bb-hero .gov-pillars,
  .ca-bb-hero .gov-cta-row,
  .ca-bb-hero .page-breadcrumb{justify-content:flex-start}
  .ca-bb-hero h1,
  .ca-bb-hero .lede,
  .ca-bb-hero .max-w-3xl{margin-left:0;margin-right:auto}
  .ca-bb-hero h1{max-width:min(640px, 14ch)}
  .ca-bb-hero .lede{max-width:600px}
  .ca-bb-hero .max-w-3xl{text-align:left}
  .ca-bb-hero .gov-diagram{margin-left:auto;margin-right:auto}
  .dx-hero.ca-bb-hero .lede{margin-left:0}
}

@media (max-width:1024px){
  /* the art becomes a band above the copy: the picture is seen, and the copy never sits on it */
  .ca-bb-hero.svc-hero,
  .ca-bb-hero.approach-hero,
  .ca-bb-hero.gov-hero,
  .ca-bb-hero.dx-hero,
  .trust section.ca-bb-hero{padding-top:0}
  .ca-bb-hero .ca-page-art{position:relative;inset:auto;height:clamp(200px,28vw,260px);margin:0 0 1.5rem;pointer-events:none}
  .ca-bb-hero .ca-page-art img{object-position:50% 50%}
  .ca-bb-hero .ca-page-art::after,
  .gov-hero.ca-bb-hero .ca-page-art::after,
  .dx-hero.ca-bb-hero .ca-page-art::after{
    background:linear-gradient(180deg, rgba(10,11,15,.18) 0%, rgba(10,11,15,0) 30%, rgba(10,11,15,.30) 68%, #0A0B0F 100%);
  }
  .ca-bb-hero .max-w-3xl{padding-top:0}
}

/* ── home hero (the rotator's base image; .sov-hero-art is the existing art box) ───────────────────────────────────────── */
.sov-hero .sov-hero-art picture{display:contents}
@media (max-width:720px){
  .sov.sov-cichocki .sov-hero{padding-top:0}
  .sov-hero .sov-hero-art{position:relative;inset:auto;height:220px;margin-bottom:1.75rem}
  .sov-hero .sov-hero-art img{object-position:50% 50%}
  /* !important: the rotator stylesheet declares the desktop scrim with !important (it has to beat the page's inline block) */
  .sov-hero .sov-hero-art::after{background:linear-gradient(180deg, rgba(10,11,15,.18) 0%, rgba(10,11,15,0) 30%, rgba(10,11,15,.30) 68%, #0A0B0F 100%) !important}
}

/* ── divider band ───────────────────────────────────────────────────────── */
.ca-bb-band{height:clamp(56px,7vw,96px);overflow:hidden;background:#0A0B0F;border-top:1px solid rgba(201,169,97,.14);border-bottom:1px solid rgba(201,169,97,.14)}
.ca-bb-band picture{display:contents}
.ca-bb-band img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.sov.sov-cichocki > .ca-bb-band + .sov-section{border-top:0}

/* ── closing CTA panorama ───────────────────────────────────────────────── */
.ca-bb-cta{position:relative;overflow:hidden}
.ca-bb-cta > *:not(.ca-bb-pan){position:relative;z-index:1}
.ca-bb-pan{position:absolute;inset:0;z-index:0;pointer-events:none}
.ca-bb-pan picture{display:contents}
.ca-bb-pan img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.ca-bb-pan::after{
  content:"";position:absolute;inset:0;
  /* the copy column (max 600px, centred) sits on a near-solid plateau; the colonnade shows at both sides */
  background:
    linear-gradient(90deg, rgba(10,11,15,.30) 0%, rgba(10,11,15,.95) calc(50% - 330px), rgba(10,11,15,.95) calc(50% + 330px), rgba(10,11,15,.30) 100%),
    linear-gradient(180deg, rgba(10,11,15,.35) 0%, rgba(10,11,15,0) 30%, rgba(10,11,15,.45) 100%);
}
@media (max-width:720px){
  .ca-bb-pan{position:relative;inset:auto;height:160px;margin:0 0 1.5rem}
  .ca-bb-pan::after{background:linear-gradient(180deg, rgba(10,11,15,.18) 0%, rgba(10,11,15,0) 30%, rgba(10,11,15,.30) 68%, #0A0B0F 100%)}
  .cta-banner.ca-bb-cta,
  .gov-cta.ca-bb-cta,
  .dx-final-cta.ca-bb-cta{padding-top:0}
  .sov-final.ca-bb-cta{padding-top:0}
}

/* ── standalone colonnade vista (pass 3, Codex C18V-01) ─────────────────── */
/* The approach page's closing CTA section carries a PROTECTED Calendly link, so the panorama may not sit behind it. The colonnade
   is its own band there, between the honesty callout and the CTA section: nothing is inside it and nothing sits on it. */
.ca-bb-vista{position:relative;height:clamp(180px,24vw,320px);margin:3rem 0 0;overflow:hidden;background:#0A0B0F;border-top:1px solid rgba(201,169,97,.14);border-bottom:1px solid rgba(201,169,97,.14);pointer-events:none}
.ca-bb-vista picture{display:contents}
.ca-bb-vista img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.ca-bb-vista::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,11,15,.35) 0%, rgba(10,11,15,0) 30%, rgba(10,11,15,0) 70%, rgba(10,11,15,.45) 100%)}
.ca-bb-vista + .cta-banner{margin-top:2rem}

/* ── services pillar card tops ──────────────────────────────────────────── */
.svc-card .svc-art{margin:-2rem -2rem 1.25rem;aspect-ratio:16/7;overflow:hidden;border-bottom:1px solid rgba(201,169,97,.14)}
.svc-card .svc-art picture{display:contents}
.svc-card .svc-art img{display:block;width:100%;height:100%;object-fit:cover}

@media print{
  .ca-bb-band,.ca-bb-pan,.ca-bb-vista,.svc-art{display:none !important}
}