/*
  FILE GUIDE: division-pages.css

  What this controls:
  - Tablet and mobile overrides for division pages, about page, and shared division CTAs.

  How to change it:
  - 980px block = tablet / narrow desktop layout.
  - 640px block = phone layout.
  - Put page-specific responsive fixes here only when they need to override shared/page files late.

  This file preserves legacy responsive cascade order.
*/

@media (max-width: 980px) {
  .division-hero__inner,
  .division-section__header,
  .division-final-cta__inner,
  .division-hub-grid {
    grid-template-columns: 1fr;
  }

  .division-hero__cta {
    align-self: start;
    margin-bottom: 0;
    padding-left: 0;
    border-left: 0;
  }

  .division-process__list li {
    grid-template-columns: 3rem 1fr;
  }

  .division-process__list p {
    grid-column: 2;
  }

  .animation-services__inner {
    min-height: 0;
  }

  .animation-services__copy {
    padding-right: 0;
  }

  .animation-services__title {
    font-size: clamp(2.75rem, 7.5vw, 4.4rem);
  }

  .animation-services__title span {
    white-space: normal;
  }

  .animation-services__grid {
    grid-template-columns: 1fr;
    max-width: 38rem;
    gap: 1.35rem;
  }

  .animation-services__grid h3,
  .animation-services__grid p {
    max-width: none;
  }

  .animation-services__art {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 2rem;
  }

  .animation-services__art img {
    width: min(100%, 38rem);
  }

  .animation-process__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .animation-process__title {
    max-width: 14ch;
  }

  .animation-process__list li {
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: .55rem 1.35rem;
  }

  .animation-process__list p {
    grid-column: 2;
  }

  .healthcare-services__inner {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .healthcare-services__copy {
    padding-right: 0;
  }

  .healthcare-services__title {
    font-size: clamp(2.75rem, 7.5vw, 4.4rem);
  }

  .healthcare-services__title span,
  .healthcare-process__title span {
    white-space: normal;
  }

  .healthcare-services__grid,
  .healthcare-showcase__grid,
  .healthcare-tones__header,
  .healthcare-partners__intro {
    grid-template-columns: 1fr;
  }

  .healthcare-services__grid h3,
  .healthcare-services__grid p,
  .healthcare-showcase__card p {
    max-width: none;
  }

  .healthcare-services__art {
    position: relative;
    inset: auto;
    width: min(100%, 38rem);
    justify-self: start;
    margin-top: 2rem;
  }

  .healthcare-process__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .healthcare-process__title {
    max-width: 16ch;
  }

  .healthcare-process__sticker {
    left: -17vw;
    right: auto;
    bottom: 0;
    width: clamp(48rem, 72vw, 62rem);
    opacity: .92;
  }

  .healthcare-process__list li {
    grid-template-columns: 4rem minmax(12rem, .42fr) minmax(0, 1fr);
    gap: .55rem 1.35rem;
  }

  .healthcare-process__list p {
    grid-column: auto;
  }

  .healthcare-partners__grid {
    --partner-logo-gap-x: 1.75rem;
    width: min(100%, 58rem);
    gap: 2.25rem var(--partner-logo-gap-x);
  }

  .healthcare-partners__grid li {
    flex-basis: calc((100% - (3 * var(--partner-logo-gap-x))) / 4);
  }

  .healthcare-partners__grid li:first-child:nth-last-child(5),
  .healthcare-partners__grid li:first-child:nth-last-child(5) ~ li,
  .healthcare-partners__grid li:first-child:nth-last-child(6),
  .healthcare-partners__grid li:first-child:nth-last-child(6) ~ li,
  .healthcare-partners__grid li:first-child:nth-last-child(9),
  .healthcare-partners__grid li:first-child:nth-last-child(9) ~ li {
    flex-basis: calc((100% - (2 * var(--partner-logo-gap-x))) / 3);
  }

  .healthcare-tones__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .games-pipeline__layout {
    min-height: 0;
    padding-bottom: 0;
  }

  .games-pipeline__title {
    max-width: none;
    font-size: clamp(2.75rem, 7.5vw, 4.4rem);
  }

  .games-pipeline__title-line {
    white-space: normal;
  }

  .games-pipeline__copy {
    width: 100%;
    padding-right: 0;
  }

  .games-pipeline__grid {
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
  }

  .games-capabilities {
    min-height: auto;
    padding: 4.5rem 0 5rem;
  }

  .games-capabilities__inner {
    padding-left: 0;
  }

  .games-capabilities__art {
    position: relative;
    inset: auto;
    height: clamp(18rem, 42vw, 24rem);
    margin-bottom: 2.25rem;
  }

  .games-capabilities__art-layer--silhouettes {
    left: 50%;
    top: 1.5rem;
    width: min(86vw, 40rem);
    transform: translateX(-58%) rotate(-2.5deg);
  }

  .games-capabilities__art-layer--badguys {
    left: 50%;
    top: -1.75rem;
    width: min(54vw, 24rem);
    transform: translateX(-8%) rotate(2deg);
  }

  .games-capabilities__title {
    max-width: 14ch;
    margin-bottom: 2.25rem;
    font-size: 3.1rem;
  }

  .games-capabilities__grid {
    width: min(100%, 46rem);
  }

  .games-capabilities__grid li {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: .5rem 1.5rem;
  }

  .games-capabilities__grid p {
    grid-column: 2;
  }

  .games-portfolio__header h2 span {
    white-space: normal;
  }

  .games-portfolio__showcase {
    grid-template-columns: 1fr;
  }

  .games-portfolio__visual {
    aspect-ratio: 4 / 3;
  }

  .about-hero__inner,
  .about-story__inner,
  .about-founders__header,
  .about-founder,
  .about-founder--wink {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-founder--wink .about-founder__media,
  .about-founder--wink .about-founder__bio {
    grid-column: auto;
    grid-row: auto;
  }

  .about-hero__title {
    max-width: none;
    font-size: 4.1rem;
  }

  .about-hero__cta {
    max-width: 30rem;
    padding-left: 0;
    padding-top: 1.5rem;
    border-left: 0;
    border-top: 1px solid rgba(249,249,244,.22);
  }

  .about-story__intro h2,
  .about-founders__header h2 {
    max-width: none;
    font-size: 3rem;
  }

  .about-founder__media {
    width: min(100%, 32rem);
    max-width: none;
    margin-top: 0;
  }

  .about-founder__media img {
    min-height: 0;
  }

  .about-principles__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .division-hero__title {
    font-size: clamp(2.65rem, 10.5vw, 3.6rem);
    max-width: min(7.5ch, 100%);
  }

  .wonderwood-sticker--pinecone {
    display: none;
  }

  .division-hero--animation {
    background:
      linear-gradient(90deg, rgba(16,16,17,.72) 0%, rgba(16,16,17,.42) 48%, rgba(16,16,17,.08) 100%),
      linear-gradient(180deg, rgba(16,16,17,.08), rgba(16,16,17,.34)),
      url('/Assets/Artworks/Animation/WildheartLegends/Banners/Wildheart_BannerExtend.webp') 54% center / cover no-repeat;
  }

  .division-hero--games {
    background: #315c32;
  }

  .division-hero--games::before {
    display: none;
  }

  .division-hero--games::after {
    display: block;
  }

  .animation-services {
    padding-top: 3.25rem;
  }

  .animation-services__title {
    font-size: clamp(2.2rem, 9vw, 3.2rem);
    line-height: .96;
    margin-bottom: 2rem;
  }

  .animation-services__grid h3 {
    font-size: 1.35rem;
  }

  .animation-services__grid p {
    font-size: 1rem;
  }

  .animation-services__art img {
    width: min(100%, 34rem);
    margin-left: 0;
  }

  .animation-wide-frame .wonderwood-sticker--garlic {
    top: auto;
    bottom: -3.25rem;
    left: 6vw;
    width: clamp(9rem, 42vw, 12rem);
    transform: rotate(-8deg);
  }

  .animation-process {
    padding: 3.75rem 0 4rem;
  }

  .animation-process__title {
    font-size: 2.35rem;
  }

  .animation-process__list li {
    grid-template-columns: 1fr;
    gap: .45rem;
    padding: .85rem 0;
  }

  .animation-process__list p {
    font-size: 1rem;
    grid-column: auto;
  }

  .animation-process__asset-reel {
    width: min(100% - 1.5rem, 76rem);
    margin-top: 2.5rem;
  }

  .animation-asset-reel__visual {
    aspect-ratio: 4 / 3;
  }

  .animation-asset-reel__slide {
    --asset-frame-pad: 0rem;
  }

  .animation-asset-reel__slide--sticker img {
    transform: translateY(2%) scale(.9);
  }

  .animation-asset-reel__media {
    width: 100%;
  }

  .animation-asset-reel__slide img,
  .animation-asset-reel__slide video {
    object-fit: contain;
  }

  .animation-asset-reel__slide video {
    width: 100%;
    height: 100%;
  }

  .healthcare-services {
    padding-top: 3.25rem;
  }

  .healthcare-services__title {
    font-size: clamp(2.2rem, 9vw, 3.2rem);
    line-height: .96;
    margin-bottom: 2rem;
  }

  .healthcare-services__grid {
    gap: 1.2rem;
  }

  .healthcare-services__grid h3 {
    max-width: none;
    font-size: 1.35rem;
  }

  .healthcare-services__grid p {
    font-size: 1rem;
  }

  .healthcare-asset--portrait {
    min-height: 20rem;
  }

  .healthcare-wide-frame {
    height: 18rem;
  }

  .healthcare-asset--wide {
    min-height: 100%;
  }

  .healthcare-process {
    padding: 3.75rem 0 4rem;
  }

  .healthcare-process__title {
    font-size: 2.35rem;
  }

  .healthcare-process__list li {
    grid-template-columns: 1fr;
    gap: .45rem;
    padding: .85rem 0;
  }

  .healthcare-process__list p {
    font-size: 1rem;
    grid-column: auto;
  }

  .healthcare-process__sticker {
    display: none;
  }

  .healthcare-tones {
    padding: 3.75rem 0 4rem;
  }

  .healthcare-tones__header h2,
  .healthcare-partners__heading {
    font-size: 2.45rem;
  }

  .healthcare-tones__grid {
    grid-template-columns: 1fr;
  }

  .healthcare-tones__grid article {
    min-height: 0;
  }

  .healthcare-showcase {
    padding: 4rem 0 4.75rem;
  }

  .healthcare-partners {
    padding: 3.75rem 0 4.25rem;
  }

  .healthcare-partners__heading {
    white-space: normal;
  }

  .healthcare-partners__grid {
    --partner-logo-gap-x: 1.25rem;
    width: min(100%, 22rem);
    gap: 1.75rem var(--partner-logo-gap-x);
  }

  .healthcare-partners__grid li {
    flex-basis: calc((100% - var(--partner-logo-gap-x)) / 2);
    min-height: 2.75rem;
  }

  .healthcare-partners__grid img {
    width: min(100%, 9.5rem);
    max-height: 3.35rem;
  }

  .healthcare-showcase__header h2 {
    font-size: 2.45rem;
  }

  .healthcare-asset--card {
    min-height: 15rem;
  }

  .healthcare-next-step {
    padding-bottom: 3.5rem;
  }

  .healthcare-next-step p {
    font-size: 1.45rem;
  }

  .animation-boards {
    padding: 4rem 0 4.75rem;
  }

  .animation-boards__header h2 {
    font-size: 2.45rem;
  }

  .animation-boards__stack {
    min-height: 28rem;
  }

  .animation-boards__card {
    width: min(92vw, 30rem);
  }

  .animation-boards__arrow {
    top: auto;
    bottom: -1.25rem;
    width: 2.45rem;
    height: 2.45rem;
  }

  .animation-boards__arrow--prev {
    left: calc(50% - 3.1rem);
  }

  .animation-boards__arrow--next {
    right: calc(50% - 3.1rem);
  }

  .animation-boards__arrow--prev:hover,
  .animation-boards__arrow--next:hover {
    transform: translateY(-50%);
  }

  .animation-next-step {
    padding-bottom: 3.5rem;
  }

  .games-pipeline {
    padding-top: 2.25rem;
    padding-bottom: 0;
  }

  .games-pipeline__layout {
    padding-bottom: clamp(10.5rem, 40vw, 14.5rem);
  }

  .games-pipeline__eyebrow {
    margin-bottom: .9rem;
    font-size: .875rem;
  }

  .games-pipeline__title {
    font-size: clamp(2.2rem, 9vw, 3.2rem);
    line-height: .96;
    margin-bottom: 2rem;
  }

  .games-pipeline__grid {
    gap: 1.2rem;
    margin-bottom: 1.5rem;
  }

  .games-pipeline__item {
    padding: 0;
  }

  .games-pipeline__item h3 {
    max-width: none;
    font-size: 1.35rem;
  }

  .games-pipeline__item p {
    max-width: none;
    font-size: 1rem;
  }

  .games-pipeline__art {
    top: auto;
    right: auto;
    bottom: clamp(-8rem, -20vw, -5.75rem);
    left: 56%;
    z-index: 3;
    transform: translateX(-50%);
  }

  .games-pipeline__art img {
    width: min(100vw, 28rem);
    transform: rotate(1deg);
  }

  .games-capabilities {
    padding: 0 0 3.25rem;
  }

  .games-capabilities__art {
    height: clamp(18rem, 64vw, 24rem);
    margin-bottom: 1.75rem;
  }

  .games-capabilities__art-layer--silhouettes {
    left: 50%;
    top: 1rem;
    bottom: auto;
    width: min(120vw, 33rem);
    transform: translateX(-52%) rotate(-2deg);
  }

  .games-capabilities__art-layer--badguys {
    left: 50%;
    top: -1rem;
    width: min(76vw, 18rem);
    transform: translateX(-18%) rotate(2deg);
  }

  .games-capabilities__eyebrow {
    margin-bottom: 1.25rem;
  }

  .games-capabilities__title {
    max-width: 9ch;
    margin-bottom: 1.75rem;
    font-size: 2.35rem;
  }

  .games-capabilities__grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .games-capabilities__grid li {
    grid-template-columns: 1fr;
    gap: .45rem;
    padding: .85rem 0;
  }

  .games-capabilities__grid p {
    font-size: 1rem;
    grid-column: auto;
  }

  .games-capabilities__grid strong {
    font-size: 1.1rem;
  }

  .games-banner__overlay {
    left: 3vw;
    width: auto;
    height: calc(100% - 1.5rem);
    max-width: 82vw;
  }

  .games-portfolio {
    padding: 4rem 0 5.75rem;
  }

  .games-portfolio__header {
    grid-template-columns: 1fr;
  }

  .games-portfolio__header h2 {
    max-width: none;
  }

  .games-portfolio__showcase {
    grid-template-columns: 1fr;
  }

  .games-portfolio__visual {
    aspect-ratio: 4 / 3;
  }

  .games-portfolio__arrow {
    top: auto;
    bottom: -1.25rem;
    width: 2.45rem;
    height: 2.45rem;
  }

  .games-portfolio__arrow--prev {
    left: calc(50% - 3.1rem);
  }

  .games-portfolio__arrow--next {
    right: calc(50% - 3.1rem);
  }

  .games-portfolio__arrow--prev:hover,
  .games-portfolio__arrow--next:hover {
    transform: translateY(-50%);
  }

  .games-next-step {
    padding-bottom: 3.5rem;
  }

  .games-next-step__inner {
    gap: 1.5rem;
  }

  .games-next-step p {
    font-size: 1.45rem;
  }

  .about-hero {
    min-height: calc(var(--viewport-height) * .68);
    padding: 7rem 0 3rem;
    background-position: center;
  }

  .about-hero::before {
    opacity: .36;
  }

  .about-hero__title {
    font-size: 3.25rem;
  }

  .about-hero__title span {
    white-space: normal;
  }

  .about-story,
  .about-founders,
  .about-principles {
    padding: 3.5rem 0;
  }

  .about-story__intro h2,
  .about-founders__header h2,
  .about-founder__bio h3 {
    font-size: 2.45rem;
  }

  .about-founders__header h2 span {
    white-space: normal;
  }

  .about-story__copy {
    padding-top: 1.5rem;
  }

  .about-founder {
    padding: 2.25rem 0;
  }

  .about-principles__grid article {
    min-height: 0;
  }

  .about-principles__grid p {
    margin-top: 1.5rem;
  }

  .about-next-step {
    padding-bottom: 3.5rem;
  }

  .about-next-step p {
    font-size: 1.45rem;
  }
}