/* The brand book's Op Art industry icons (see-through WebP): misregistered red/yellow and blue/cyan rims, wavy bands.
   Multiply lets the last traces of the printed paper vanish into light cards. */
.op-icon{display:block;width:100%;height:auto;pointer-events:none;mix-blend-mode:multiply}
.industry-emblem--op{width:84px;height:84px;margin-right:6px;border:0;border-radius:0;background:none;overflow:visible}
/* the site tints every second card's emblem tile; the Op Art icon has no tile */
.industry-card:nth-child(n) .industry-emblem.industry-emblem--op{background:none;border:0}
.industry-emblem--op .op-icon{width:100%;height:100%;margin:0;transition:transform .35s cubic-bezier(.2,.9,.3,1.3)}
/* desktop: the icon's column is the icon's own width, then the card's usual gap */
.industry-card:has(.industry-emblem--op){grid-template-columns:84px minmax(0,1fr) 24px}
.industry-card:hover .industry-emblem--op .op-icon,.industry-card:focus-visible .industry-emblem--op .op-icon{transform:rotate(-6deg) scale(1.06)}
.niche-conversation{position:relative}
.niche-hero{overflow-x:clip}
.niche-op{position:absolute;right:-24px;top:-104px;width:clamp(130px,13vw,176px);transform:rotate(6deg);z-index:2}
@media (max-width:760px){.industry-emblem--op{width:64px;height:64px;margin-right:2px}.niche-op{right:-4px;top:-64px;width:88px}}
@media (prefers-reduced-motion:reduce){.industry-emblem--op .op-icon{transition:none}}
.case--op{position:relative}
.case-op{position:absolute;right:22px;top:18px;width:96px}
@media (max-width:760px){.case-op{right:14px;top:12px;width:72px}}
.case--op .case-type .ui-icon,.case--op .case-type svg{display:none}
/* Tablets and phones (narrow cards): the card is one grid. The icon sits in its own 64 px column beside the name and the
   trades; the description and "more" run the full width under them, so the long lines keep their room. */
@media (max-width:1150px){
.industry-card:has(.industry-emblem--op){grid-template-columns:64px minmax(0,1fr) 18px;grid-template-areas:"ico name arr" "ico trades arr" "body body body" "more more more";column-gap:14px;row-gap:0;align-items:center;padding:20px 18px 20px 16px}
.industry-card:has(.industry-emblem--op)>div{display:contents}
.industry-card .industry-emblem--op{grid-area:ico;align-self:center;width:64px;height:64px;margin:0}
.industry-card .industry-emblem--op .op-icon{width:100%;height:100%;margin:0}
.industry-card:has(.industry-emblem--op) h3{grid-area:name;align-self:end;margin:0 0 4px}
.industry-card:has(.industry-emblem--op) div>p:not(.industry-summary){grid-area:trades;align-self:start;font-size:13.5px;line-height:1.4}
.industry-card:has(.industry-emblem--op) .industry-summary{grid-area:body;margin-top:14px}
.industry-card:has(.industry-emblem--op) .industry-more{grid-area:more;justify-self:start;margin-top:10px}
.industry-card:has(.industry-emblem--op) .industry-arrow{grid-area:arr;align-self:start;margin-top:2px}
}