/* Desktop-only refinements over the downloaded production site.
   Preserve the established collage, brand colors and mobile layouts. */
@media (min-width: 1024px) {
  .featured-grid {
    max-width: 1180px;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 32px 52px;
    margin: 58px auto 0;
    min-height: 0;
    align-items: stretch;
  }
  .featured-grid > div { min-width: 0; }
  .featured-grid > div:first-child { grid-row: 1 / 3; }
  .featured-card { height: 100%; padding: 0; }
  .featured-image { height: auto; padding-bottom: 34px; }
  .featured-image::before { inset: 0 8px 38px; height: auto; transform: rotate(-2deg); }
  .featured-image img { display: block; width: 100%; height: 180px; transform: rotate(1deg); }
  .featured-image span { left: 0; bottom: 0; color: #626262; font-size: 13px; }
  .featured-copy { padding: 18px 0 0; }
  .featured-copy h3 { font-size: 24px; line-height: 1.4; }
  .featured-copy p, .featured-role, .featured-copy svg { opacity: 1; transform: none; }
  .featured-copy p { color: #555; font-size: 16px; line-height: 1.65; margin: 9px 30px 0 0; }
  .featured-role { margin-top: 10px; color: #626262; font-size: 13px; }
  .featured-copy svg { top: 22px; width: 22px; height: 22px; }
  .featured-grid > div:first-child .featured-image img {
    content: url('/images/case/aigc-interface-overview.png');
    height: 350px;
    object-fit: contain;
    background: #101820;
    border: 8px solid #eceeef;
    transform: rotate(-1deg);
  }
  .featured-grid > div:first-child .featured-copy h3 { font-size: 30px; }
  .featured-grid > div:not(:first-child) .featured-card {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    align-items: center;
    gap: 26px;
  }
  .featured-grid > div:not(:first-child) .featured-copy { padding: 0 0 30px; }
  .featured-grid > div:not(:first-child) .featured-copy h3 { font-size: 22px; padding-right: 26px; }
  .featured-grid > div:not(:first-child) .featured-copy svg { top: 5px; }
  .featured-card:hover .featured-image img,
  .featured-card:focus-visible .featured-image img { transform: translateY(-5px) rotate(0); }
  .featured-card:hover .featured-image::before,
  .featured-card:focus-visible .featured-image::before { transform: rotate(-3deg); }

  .home-section:not(.experience-section) .section-title-row p { color: #626262; line-height: 1.6; }
  .case-summary, .case-section-title > span,
  .about-page-intro p:not(.case-kicker) { color: #555; font-size: 17px; line-height: 1.8; }
  .metric-strip span, .research-list small, .archive-intro,
  .archive-card p, .principle-slide footer span { color: #626262; }
  .case-lead { gap: 44px; padding-top: 48px; padding-bottom: 64px; min-height: 600px; }
  .case-lead h1 { font-size: clamp(34px, 3vw, 46px); line-height: 1.35; }
  .case-section { padding-top: 76px; padding-bottom: 76px; }
  .case-section-title { margin-bottom: 44px; }


}
@media (min-width: 1024px) and (max-width: 1199px) {
  .featured-grid { gap: 26px 32px; }
  .featured-grid > div:not(:first-child) .featured-card { grid-template-columns: 1fr; gap: 0; }
  .featured-grid > div:not(:first-child) .featured-image img { height: 135px; }
  .featured-grid > div:not(:first-child) .featured-copy { padding-bottom: 0; }
  .featured-grid > div:first-child .featured-image img { height: 390px; }
}

/* Keep the three experience selectors equal, including hover/focus states. */
@media (min-width: 1024px) {
  .experience-mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .experience-mini-grid button {
    height: 120px; min-height: 120px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
    padding: 14px 12px;
  }
  .experience-mini-grid button > span { min-height: 35px; }
  .experience-mini-grid button strong { margin: 8px 0 4px; }
  .experience-mini-grid button:hover,
  .experience-mini-grid button:focus-visible { transform: none; }
}

/* Reserve the primary card slot even during AnimatePresence's exit/enter gap. */
@media (min-width: 1024px) {
  .experience-cards {
    display: grid;
    grid-template-rows: 216px 120px;
    row-gap: 12px;
    align-self: start;
  }
  .experience-primary {
    grid-row: 1;
    width: 100%;
    height: 216px;
    min-height: 216px;
    max-height: 216px;
    box-sizing: border-box;
    transform: none !important;
  }
  .experience-cards > .experience-mini-grid { grid-row: 2; margin-top: 0; }
}