/* The BISMO page (site/automation.html): everything page-specific that v2.css and exp.css do not carry.
   1. the finished take-4 hand inside the brown BISMO card
   2. the window colour picker and the glass window's frame inside #crm
   3. the monotone logo wall of every tool the CRM connects to
   Colours are the site palette only: paper #F2E9D6, card #FFFDF8, ink #2A1F0A, ink-2 #4F463A, ink-3 #655B4D, rust #93380B,
   brass-2 #F86A1A. */

/* ---------- 1. the brown card's hand ---------- */
/* The hero clip's last frame, dark ink on cream paper. The card is dark brown, so the figure is greyed, contrasted until the
   paper clips to white, inverted (paper goes black, ink goes white), warmed a little, then screened onto the brown: black
   adds nothing, so no light rectangle, and only the engraved lines show, in cream. */
.ag-org__boss{isolation:isolate}
.ag-org__boss .ag-org__film{margin:0;width:100%;max-width:340px;justify-self:center;aspect-ratio:4/5;overflow:hidden;
  filter:grayscale(1) contrast(1.35) invert(1) sepia(.35) brightness(1.04);mix-blend-mode:screen}
.ag-org__boss .ag-org__film img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 46%;filter:none;transform:none;transition:none}
@media (min-width:1001px){.ag-org__boss .ag-org__film{max-width:none}}
@media (max-width:1000px) and (min-width:761px){.ag-org__boss .ag-org__film{max-width:none;aspect-ratio:1/1}}
@media (max-width:760px){.ag-org__boss .ag-org__film{width:min(78%,300px)}}

/* ---------- 2. window picker and frame ---------- */
.bz-themes{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 16px}
.bz-themes__lab{margin-right:4px;font:600 .8rem/1 var(--font-body,'Work Sans','Work Sans Fallback',sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3,#655B4D)}
.bz-themes button{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 10px;border:1.5px solid rgba(42,31,10,.28);border-radius:999px;background:transparent;color:#2A1F0A;font:600 .93rem/1 var(--font-body,'Work Sans','Work Sans Fallback',sans-serif);cursor:pointer;transition:background-color .2s,border-color .2s}
.bz-themes button:hover{background:rgba(255,253,248,.7)}
.bz-themes button[aria-checked="true"]{background:#FFFDF8;border-color:#2A1F0A;box-shadow:0 0 0 1px #2A1F0A inset}
.bz-themes button:focus-visible{outline:3px solid #93380B;outline-offset:3px}
.bz-sw{display:block;flex:none;width:22px;height:22px;border-radius:50%;border:1px solid rgba(42,31,10,.4)}
.bz-sw--light{background:linear-gradient(135deg,#F2E9D6 50%,#2A1F0A 50%)}
.bz-sw--dark{background:linear-gradient(135deg,#2A1F0A 50%,#4F463A 50%)}
.bz-sw--brown{background:linear-gradient(135deg,#4F463A 50%,#655B4D 50%)}
.bz-sw--orange{background:linear-gradient(135deg,#F86A1A 50%,#93380B 50%)}
.bz-sw--mustard{background:linear-gradient(135deg,#D4A94F 50%,#655B4D 50%)}

/* The home page's section is a full-width band. Here it is a framed panel inside the page's container. */
.ag-window-sec .v2-crm{border-radius:28px;padding:clamp(20px,3vw,36px) 0;margin-top:0}
.ag-window-sec .v2-crm .cg{padding-left:clamp(14px,2.4vw,32px);padding-right:clamp(14px,2.4vw,32px)}
.bz-ctls{display:flex;justify-content:flex-end;margin:0 0 14px}
.bz-ctls .cg-controls{grid-column:auto;grid-row:auto}
.ag-window-sec .v2-crm .cg-bg__art{right:-8%;top:0;width:min(1100px,100%)}
.ag-window-sec .v2-crm__acts{margin-top:20px}

/* ---------- 3. logo wall ---------- */
/* The technique of .wk-logo on the Our work page: one ink colour behind a CSS mask of the logo, so every mark is the same
   tone whatever its own brand colours. */
.bz-wall{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,1.2vw,14px);margin:clamp(22px,3vw,32px) 0 0;padding:0}
.bz-wall li{margin:0;padding:0}
.bz-wall li::before{content:none}
.bz-tool{display:grid;grid-template-rows:1fr auto;place-items:center;gap:.75rem;height:100%;min-height:clamp(108px,10vw,132px);padding:1.05rem .6rem .85rem;border-radius:14px;background:#FFFDF8;border:1px solid var(--xg-edge,#E6DECB);text-align:center;transition:border-color .25s ease}
.bz-tool:hover{border-color:#F86A1A}
.bz-logo{display:block;width:calc(var(--lw) * 1px);max-width:78%;aspect-ratio:var(--ar);height:auto;background:var(--xg-ink,#2A1F0A);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;transition:background-color .25s ease}
.bz-tool:hover .bz-logo{background:#93380B}
.bz-tool__lab{font:600 .72rem/1.25 var(--font-body,'Work Sans','Work Sans Fallback',sans-serif);letter-spacing:.06em;text-transform:uppercase;color:#4F463A}
.bz-tool__word{display:grid;place-items:center;font:500 1.4rem/1.05 var(--font-display,'Fraunces','Fraunces Fallback',Georgia,serif);color:var(--xg-ink,#2A1F0A);padding:.2rem .3rem}
@media (max-width:1100px){.bz-wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.bz-wall{grid-template-columns:repeat(2,minmax(0,1fr))}.bz-tool{min-height:104px}}
@media (prefers-reduced-motion:reduce){.bz-tool,.bz-logo{transition:none}}
/* "Your website" carries the one brand mark, in colour (masked it flattens to a plain hexagon) */
.bz-mark{display:block;width:42px;height:auto;aspect-ratio:914/1024}
/* Ownership line under the wall: the logos say what the CRM connects to, not who endorses us */
.bz-wall__note{margin:14px 0 0;font-size:.86rem;line-height:1.5;color:var(--ink-3)}
/* Four points under the wall sit in two rows of two */
.ag-window-sec .rd-crm-points{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.ag-window-sec .rd-crm-points{grid-template-columns:1fr}}