/* Capability takes: a tile opens into the whole board. On wide screens the title and summary hold the
   first column and the take reads across the other two; narrower, the take reads below the summary, under a rule. */
.capability-board{position:relative;align-content:start}
.capability-tile{position:relative}
.content-page .capability-tile h2{padding-right:52px}
.capability-open,.capability-open:hover{color:inherit;text-decoration:none}
.capability-open::after{content:'';position:absolute;inset:0;z-index:1}
.capability-arrow.link-arrow{position:absolute;top:40px;right:clamp(26px,3.5vw,56px)}
.capability-tile:hover .capability-arrow,.capability-open:focus-visible~.capability-arrow{box-shadow:0 0 0 1px currentColor}

.capability-panel{position:absolute;top:0;left:0;width:100%;z-index:3;background:#fff;border-bottom:var(--line);box-sizing:border-box}
.capability-panel[hidden]{display:none}
.capability-board.is-reading .capability-tile{display:none}
.capability-board.is-reading .capability-panel{position:relative}
.capability-open.quiet-focus:focus-visible{outline:none}
.capability-open.quiet-focus:focus-visible~.capability-arrow{box-shadow:none}
.capability-panel.is-moving{min-height:0!important;overflow:hidden;outline:var(--line);outline-offset:-1px}
.capability-panel-inner{position:relative;padding:40px clamp(26px,3.5vw,56px) clamp(56px,6vw,96px)}
.capability-panel h2:focus{outline:none}
.content-page .capability-panel h2{font-size:var(--type-card);line-height:1.08;margin:0 0 20px;padding-right:120px}
.content-page .capability-panel .capability-summary{font-size:var(--type-body);line-height:1.55;margin:0;max-width:34ch}
.capability-panel-take{margin:40px calc(-1*clamp(26px,3.5vw,56px)) 0;padding:40px clamp(26px,3.5vw,56px) 0;border-top:var(--line)}
.capability-panel-take :is(p,ul){max-width:68ch}
.content-page .capability-panel-take p{font-size:var(--type-body);line-height:1.65;margin:0 0 1.2em}
.content-page .capability-panel-take p:last-child{margin-bottom:0}
.capability-panel-take ul{margin:0 0 1.2em;padding-left:1.2em}
.content-page .capability-panel-take li{font-size:var(--type-body);line-height:1.65;margin:0 0 .6em}
.capability-close{position:absolute;top:40px;right:clamp(26px,3.5vw,56px);display:inline-flex;align-items:center;gap:12px;background:none;border:0;padding:0;font-size:15px}
.capability-close .link-arrow{font-size:22px}
.capability-close-end{display:none}
.capability-close:hover .link-arrow,.capability-close:focus-visible .link-arrow{box-shadow:0 0 0 1px currentColor}
@media(min-width:901px){
 .capability-panel:not([hidden]){display:flex;flex-direction:column}
 .capability-panel-inner{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto 1fr;padding:0}
 .content-page .capability-panel h2{grid-column:1;padding:40px clamp(26px,3.5vw,56px) 0}
 .content-page .capability-panel .capability-summary{grid-column:1;padding:0 clamp(26px,3.5vw,56px) 40px}
 .capability-panel-take{grid-column:2/span 2;grid-row:1/span 2;margin:0;max-width:none;border-top:0;border-left:var(--line);padding:44px calc(clamp(26px,3.5vw,56px) + 72px) clamp(56px,6vw,96px) clamp(26px,3.5vw,56px)}
 .capability-panel-take :is(p,ul){max-width:64ch}
}
@media(max-width:560px){
 .capability-arrow.link-arrow,.capability-close{top:32px;right:26px}
 .capability-panel-inner{padding:32px 26px 56px}
 .capability-panel-take{margin:32px -26px 0;padding:32px 26px 0}
 .content-page .capability-panel h2{padding-right:96px}
 .capability-close-end{position:static;display:inline-flex;margin-top:40px;font-size:18px}
}

/* Grid art. One picture spans the whole board and each tile holds its slice: the square picture
   in the grid, a tall one down the single phone column. With a mouse the hovered tile shows its
   slice; without one, tiles light while they cross the middle of the screen. site JS sets
   art-hover or art-scroll and the slice geometry. */
@media(min-width:901px){.capability-board{grid-template-rows:repeat(3,1fr)}}
.capability-board.has-art .capability-tile{isolation:isolate}
.capability-board.has-art .capability-tile::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;background:var(--art) no-repeat;background-size:var(--slice-size);background-position:var(--slice-x) var(--slice-y);image-rendering:pixelated;transition:opacity .15s steps(3,end)}
.capability-board.art-hover .capability-tile:hover::before,.capability-board.art-scroll .capability-tile.is-lit::before{opacity:1}
.capability-board.art-hover .capability-tile:hover,.capability-board.art-scroll .capability-tile.is-lit{color:#fff}
.capability-board.art-hover .capability-tile:hover :is(h2,p),.capability-board.art-scroll .capability-tile.is-lit :is(h2,p){text-shadow:2px 2px 0 #111}
.capability-board.art-hover .capability-tile:hover .capability-arrow,.capability-board.art-scroll .capability-tile.is-lit .capability-arrow{background:#111}
.capability-board.art-hover .capability-tile,.capability-board.art-hover .capability-open{cursor:url('/assets/cursor-pixel.svg') 1 1,pointer}
@media(prefers-reduced-motion:reduce){.capability-board.has-art .capability-tile::before{transition:none}}