/* Homepage "Aionos framework", laid out like the Capabilities mega menu: the section heading on the left,
   four capabilities in a 2 x 2 grid, and Enterprise Platforms across the full width beneath them.
   Card colours, artwork and type are unchanged. The Customer Experience & Growth card is no longer the
   double-size feature card, so its sizes follow the other cards at every width.
   Loaded on the homepage only, before viewport-scale.css. */
.home-client-update #capabilities .framework-grid{display:grid;grid-template-columns:minmax(0,.85fr) repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}

/* Heading column (the mega menu's introduction panel) */
.home-client-update #capabilities .framework-intro{grid-column:1;grid-row:1/4;align-self:start;position:sticky;top:calc(var(--header-height,100px) + 24px);display:flex;flex-direction:column;gap:24px;padding:29px 32px 25px 0;min-width:0}
.home-client-update #capabilities .framework-intro .eyebrow{margin:0 0 18px}
.home-client-update #capabilities .framework-intro h2{margin:0}
.home-client-update #capabilities .framework-summary{margin:0;max-width:40ch;color:var(--muted);font-size:15px;line-height:1.75}

/* Customer Experience & Growth: same size and spacing as the other cards */
.home-client-update #capabilities .framework-grid>.capability-0{grid-column:auto;grid-row:auto;display:flex;flex-direction:column;padding:29px 24px 25px}
.home-client-update #capabilities .framework-grid>.capability-0>h3{font-size:clamp(27px,2.15vw,36px);max-width:calc(100% - 52px);min-height:78px}
.home-client-update #capabilities .framework-grid>.capability-0 .reference-art{height:100px;min-height:0;flex:none;margin:5px 0 20px}
.home-client-update #capabilities .framework-grid>.capability-0 .orbit-art{width:auto;height:100%}
.home-client-update #capabilities .framework-grid>.capability-0 .orbit-art .ai-mark{width:32%}
.home-client-update #capabilities .framework-grid>.capability-0 .cap-copy>.cap-tagline{font-size:21px;max-width:29ch}

/* Enterprise Platforms: full width under the four cards, name and artwork on the left, copy on the right */
.home-client-update #capabilities .framework-grid>.capability-4{grid-column:2/4;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-content:start}
.home-client-update #capabilities .framework-grid>.capability-4>h3{grid-column:1;grid-row:1}
.home-client-update #capabilities .framework-grid>.capability-4 .reference-art{grid-column:1;grid-row:2}
.home-client-update #capabilities .framework-grid>.capability-4 .cap-copy{grid-column:2;grid-row:1/3;align-self:center;padding-right:56px}

@media(min-width:1024px) and (max-width:1919px){
  .home-client-update #capabilities .framework-grid>.capability-0>h3{font-size:clamp(23px,1.85vw,36px);min-height:clamp(54px,4.1vw,78px)}
  .home-client-update #capabilities .framework-grid>.capability-0 .reference-art{height:clamp(60px,4.8vw,100px);margin:2px 0 14px}
  .home-client-update #capabilities .framework-grid>.capability-0 .cap-copy>.cap-tagline{font-size:clamp(17px,1.1vw,21px)}
}
/* Tablets: heading on top, then the same 2 x 2 grid with Enterprise Platforms across both columns.
   The card sizes below match what the shared styles give the other cards at these widths. */
@media(max-width:1023px){
  .home-client-update #capabilities .framework-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-client-update #capabilities .framework-intro{grid-column:1/-1;grid-row:auto;position:static;padding:0 0 12px}
  .home-client-update #capabilities .framework-grid>.capability-4{grid-column:1/-1}
  .home-client-update #capabilities .framework-grid>.capability-0{padding:29px 22px 22px}
}
@media(max-width:767px){
  .home-client-update #capabilities .framework-grid>.capability-0{padding:29px 20px 20px}
  .home-client-update #capabilities .framework-grid>.capability-0>h3{font-size:31px;min-height:0}
  .home-client-update #capabilities .framework-grid>.capability-0 .cap-copy>.cap-tagline{font-size:22px}
}
/* Phones: one column; Enterprise Platforms goes back to the normal card layout */
@media(max-width:559px){
  .home-client-update #capabilities .framework-grid{grid-template-columns:1fr}
  .home-client-update #capabilities .framework-grid>.capability-0{padding:29px 25px 25px}
  .home-client-update #capabilities .framework-grid>.capability-4{display:flex;flex-direction:column}
  .home-client-update #capabilities .framework-grid>.capability-4 .cap-copy{padding-right:0}
}