/* WHAT WE SHAPE 服务数据 */
.studio-service-intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.shape-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .2rem;
  margin-top: .58rem;
}

.shape-stat {
  min-width: 0;
}

.shape-stat-value {
  display: flex;
  align-items: flex-end;
  gap: .07rem;
  margin: 0;
  color: var(--accent, #e71619);
  white-space: nowrap;
}

.shape-stat-value strong {
  font-size: .78rem;
  line-height: .82rem;
  font-weight: 600;
  letter-spacing: -.045rem;
}

.shape-stat-value span {
  padding-bottom: .08rem;
  font-size: .19rem;
  line-height: .26rem;
  font-weight: 700;
}

.shape-stat-label {
  margin: .13rem 0 0;
  color: var(--black, #111);
  font-size: .145rem;
  line-height: .23rem;
  font-weight: 600;
}

.shape-stat-value { gap: .035rem; }
.shape-stat-unit { align-self: flex-start; padding-top: .105rem; color: #e71619; font-variant-numeric: tabular-nums; }
.shape-stat-unit sup { position: relative; top: -.035rem; margin-left: .008rem; color: #e71619; font-size: .72em; line-height: 1; }

@media (max-width: 900px) {
  .shape-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .16rem;
    margin-top: .42rem;
  }

  .shape-stat-value strong {
    font-size: .52rem;
    line-height: .58rem;
    letter-spacing: -.025rem;
  }

  .shape-stat-value span {
    padding-bottom: .055rem;
    font-size: .17rem;
  }

  .shape-stat-label {
    font-size: .14rem;
    line-height: .22rem;
  }
}

@media (max-width: 560px) {
  .shape-stats {
    gap: .1rem;
  }

  .shape-stat-value {
    gap: .045rem;
  }

  .shape-stat-value strong {
    font-size: .42rem;
    line-height: .5rem;
    letter-spacing: -.02rem;
  }

  .shape-stat-value span {
    padding-bottom: .04rem;
    font-size: .15rem;
    line-height: .22rem;
  }

  .shape-stat-label {
    margin-top: .09rem;
    font-size: .13rem;
    line-height: .2rem;
  }
}

/* Keep the home statement in two balanced desktop lines. */
@media (min-width: 901px) {
  .studio-service-intro > h2 { max-width: 8.7rem; }
}

/* Mobile home rhythm: compact spacing and a calmer type scale. */
@media (max-width: 900px) {
  .studio-service-band {
    margin-top: .62rem;
    padding-bottom: .68rem;
  }

  .studio-service-intro > .eyebrow {
    margin-bottom: .18rem;
    font-size: .14rem;
    letter-spacing: .04rem;
  }

  .studio-service-intro > h2 {
    max-width: 7.2rem;
    font-size: .36rem;
    line-height: 1.38;
    letter-spacing: -.018em;
  }

  .shape-stats {
    gap: .34rem .26rem;
    margin-top: .5rem;
  }

  .shape-stat-value strong {
    font-size: .54rem;
    line-height: .6rem;
  }

  .shape-stat-label {
    margin-top: .11rem;
    font-size: .145rem;
    line-height: .23rem;
  }

  .studio-service-band > ul {
    margin-top: .7rem;
  }

  .studio-service-band > ul > li > a {
    padding: .26rem 0 .3rem;
  }
}

@media (max-width: 560px) {
  .studio-service-band { margin-top: .52rem; }
  .studio-service-intro > h2 { font-size: .34rem; line-height: 1.42; }
  .shape-stats { gap: .3rem .18rem; margin-top: .44rem; }
  .shape-stat-value strong { font-size: .5rem; line-height: .56rem; }
  .studio-service-band > ul { margin-top: .58rem; }
}

/* Mobile case cards use the compact editorial rhythm of the reference. */
@media (max-width: 560px) {
  .work-grid.work-grid-standard { margin-top: .34rem; }
  .work-grid.work-grid-standard li,
  .work-grid.work-grid-standard li:first-child { margin-bottom: .46rem; }

  .work-grid.work-grid-standard .case-copy,
  .work-grid.work-grid-standard li:first-child .case-copy { padding-top: .16rem; }
  .work-grid.work-grid-standard .case-kicker { font-size: .13rem; line-height: .2rem; }
  .work-grid.work-grid-standard .case-copy h2,
  .work-grid.work-grid-standard li:first-child .case-copy h2 { margin-top: .045rem; font-size: .23rem; line-height: .33rem; }
  .work-grid.work-grid-standard .case-copy b { width: .24rem; margin: .11rem 0; }

  .work-grid.work-grid-standard .case-right,
  .work-grid.work-grid-standard li:first-child .case-right { padding: .14rem 0 .16rem; }
  .work-grid.work-grid-standard .case-tags { min-height: 0; gap: .04rem .09rem; }
  .work-grid.work-grid-standard .case-tags span { font-size: .13rem; line-height: .22rem; }
  .work-grid.work-grid-standard .case-desc { display: -webkit-box; overflow: hidden; margin-top: .12rem; color: #777; font-size: .145rem; line-height: .25rem; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .work-grid.work-grid-standard .case-link { margin-top: .15rem; padding: .04rem .16rem; font-size: .14rem; line-height: .24rem; }
  .work-grid.work-grid-standard .case-date,
  .work-grid.work-grid-standard li:first-child .case-date { padding-top: .14rem; font-size: .13rem; line-height: .22rem; }
}

/* Tighter text leading for the compact mobile case-card copy. */
@media (max-width: 560px) {
  .work-grid.work-grid-standard .case-kicker { line-height: .18rem; }
  .work-grid.work-grid-standard .case-copy h2,
  .work-grid.work-grid-standard li:first-child .case-copy h2 { line-height: .29rem; }
  .work-grid.work-grid-standard .case-tags span { line-height: .2rem; }
  .work-grid.work-grid-standard .case-desc { line-height: .22rem; }
}

/* The mobile archive reads as a clean sequence: no CTA button inside cards. */
@media (max-width: 560px) {
  .work-grid.work-grid-standard .case-link { display: none; }
  .work-grid.work-grid-standard li,
  .work-grid.work-grid-standard li:first-child { margin-bottom: .78rem; }
  .work-grid.work-grid-standard .case-date,
  .work-grid.work-grid-standard li:first-child .case-date { padding-top: .2rem; }
}

/* Desktop WHAT WE SHAPE: statement, proof points and services read in sequence. */
@media (min-width: 901px) {
  .studio-service-band {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 1rem;
    padding-bottom: .76rem;
  }

  .studio-service-intro {
    display: block;
  }

  .studio-service-intro > h2 {
    max-width: 7.7rem;
    font-size: .42rem;
    line-height: .58rem;
  }

  .shape-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    margin-top: .72rem;
    border: 0;
    gap: .58rem;
  }

  .shape-stat {
    box-sizing: border-box;
    min-height: 0;
    padding: 0;
    border: 0;
  }

  .shape-stat:first-child {
    padding-left: 0;
  }

  .shape-stat-value strong {
    font-size: .58rem;
    line-height: .64rem;
    letter-spacing: -.03rem;
  }

  .shape-stat-value span {
    padding-bottom: .055rem;
    color: var(--muted);
    font-size: .17rem;
  }

  .shape-stat-label {
    margin-top: .12rem;
    color: var(--muted);
    font-size: .15rem;
    line-height: .24rem;
    font-weight: 400;
  }

  .studio-service-band > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 .64rem;
    margin-top: 1.08rem;
    border: 0;
  }

  .studio-service-band > ul > li,
  .studio-service-band > ul > li:nth-child(-n+2) {
    border-top: 0;
    border-left: 0;
  }

  .studio-service-band > ul > li:nth-child(n+3) {
    border-top: 1px solid var(--line);
  }

  .studio-service-band > ul > li > a {
    grid-template-columns: .42rem minmax(0, 1fr);
    gap: .16rem;
    padding: .34rem 0 .42rem;
  }

  .studio-service-band > ul > li:first-child > a {
    padding-left: 0;
  }

  .studio-service-band > ul strong {
    font-size: .23rem;
    line-height: .32rem;
    font-weight: 500;
  }

  .studio-service-band > ul em {
    margin-top: .2rem;
    font-size: .15rem;
    line-height: .26rem;
  }
}

/* Give the homepage proof points stronger visual hierarchy. */
@media (min-width: 901px) {
  .shape-stats { margin-top: .82rem; gap: .66rem; }
  .shape-stat-value strong { font-size: .78rem; line-height: .84rem; letter-spacing: -.045rem; }
  .shape-stat-value span { padding-bottom: .075rem; font-size: .21rem; line-height: .28rem; }
  .shape-stat-label { margin-top: .16rem; font-size: .18rem; line-height: .28rem; }
}

@media (max-width: 900px) {
  .shape-stat-value strong { font-size: .58rem; line-height: .64rem; }
  .shape-stat-value span { font-size: .18rem; }
  .shape-stat-label { margin-top: .12rem; font-size: .15rem; line-height: .24rem; }
}

@media (max-width: 560px) {
  .shape-stat-value strong { font-size: .48rem; line-height: .54rem; }
  .shape-stat-value span { font-size: .16rem; }
  .shape-stat-label { font-size: .135rem; line-height: .21rem; }
}

@media (min-width: 901px) {
  .work-grid {
    container-type: inline-size;
  }

  .work-grid li:nth-child(2) .work-image {
    height: calc(37.5cqw - .05625rem);
    aspect-ratio: auto;
  }
}

.studio-hero.studio-hero-banner {
  display: block;
  min-height: 0;
  margin-top: clamp(.5rem, 4.8vh, .78rem);
  padding-bottom: clamp(.56rem, 4.8vh, .76rem);
  border-bottom: 0;
}

.hero-slider.hero-slider-wide {
  height: auto;
  aspect-ratio: 519 / 244;
  background: #111;
}

.hero-slider-wide .hero-slide {
  display: block;
  color: #fff;
}

.hero-slider-wide .hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
  transition: transform 5.5s ease, opacity .65s;
}

.hero-slider-wide .hero-slide.active img {
  transform: scale(1);
}

.hero-banner-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.2) 48%, rgba(0,0,0,.06) 100%), linear-gradient(0deg, rgba(0,0,0,.5), transparent 42%);
}

.hero-banner-label {
  position: absolute;
  top: .25rem;
  right: .28rem;
  left: .28rem;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,.8);
  font: 600 .12rem/1.3 Arial,sans-serif;
  letter-spacing: .025rem;
  pointer-events: none;
}

.hero-banner-copy {
  position: absolute;
  left: .42rem;
  bottom: .42rem;
  z-index: 3;
  display: flex;
  max-width: 7.4rem;
  flex-direction: column;
  align-items: flex-start;
}

.hero-banner-copy small {
  margin-bottom: .14rem;
  color: rgba(255,255,255,.76);
  font: 600 .13rem/1.3 Arial,sans-serif;
  letter-spacing: .022rem;
}

.hero-banner-copy strong {
  font-size: clamp(.38rem, 3.2vw, .56rem);
  line-height: 1.22;
  font-weight: 550;
}

.hero-banner-copy em {
  margin-top: .2rem;
  padding-bottom: .04rem;
  border-bottom: 1px solid rgba(255,255,255,.72);
  font-size: .16rem;
  line-height: .28rem;
  font-style: normal;
}

.hero-controls {
  position: absolute;
  right: .28rem;
  bottom: .28rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .24rem;
}

.hero-slider-wide .hero-dots {
  position: static;
}

.hero-slider-wide .hero-dots button {
  width: .08rem;
  height: .08rem;
  background: rgba(255,255,255,.45);
}

.hero-slider-wide .hero-dots button.active {
  background: #fff;
}

.hero-arrows {
  display: flex;
  gap: 1px;
}

.hero-arrows button {
  display: grid;
  width: .42rem;
  height: .42rem;
  border: 1px solid rgba(255,255,255,.58);
  background: rgba(0,0,0,.22);
  color: #fff;
  place-items: center;
  cursor: pointer;
  font: .2rem/1 Arial,sans-serif;
  transition: background .2s,color .2s;
}

.hero-arrows button:hover {
  background: #fff;
  color: #111;
}

@media (max-width: 900px) {
  .studio-hero.studio-hero-banner {
    display: block;
    width: calc(100% + .4rem);
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0 -.2rem;
    padding-bottom: .5rem;
    border-bottom: 0;
  }

  .hero-slider.hero-slider-wide {
    height: auto;
    aspect-ratio: 519 / 244;
  }

  .hero-slider-wide .hero-slide img {
    object-fit: cover;
    object-position: center;
  }

  .hero-banner-copy {
    right: .24rem;
    bottom: .28rem;
    left: .24rem;
  }

  .hero-banner-copy strong {
    font-size: .38rem;
  }

  .hero-banner-label {
    top: .2rem;
    right: .2rem;
    left: .2rem;
  }

  .hero-banner-label span:last-child,
  .hero-arrows {
    display: none;
  }

  .hero-controls {
    right: .22rem;
    bottom: .22rem;
  }

  .hero-slider-wide .hero-dots button {
    width: .1rem;
    height: .1rem;
  }

  .studio-hero.studio-hero-banner { padding-bottom: 0; }
  .studio-service-band { margin-top: .48rem; }
}

@media (max-width: 560px) {
  .hero-banner-copy strong {
    font-size: .33rem;
  }

  .hero-banner-copy em {
    font-size: .14rem;
  }
}

.work-grid.work-grid-standard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .34rem .28rem;
}

.work-grid.work-grid-standard li,
.work-grid.work-grid-standard li:first-child {
  width: auto;
  min-width: 0;
  margin-bottom: .46rem;
}

.work-grid.work-grid-standard li:first-child > a {
  display: block;
  padding-bottom: 0;
}

.work-grid.work-grid-standard li:first-child .work-image,
.work-grid.work-grid-standard li:nth-child(2) .work-image {
  display: block;
  height: auto;
  aspect-ratio: 1 / 1;
}

.work-grid.work-grid-standard li:first-child .case-copy,
.work-grid.work-grid-standard li:first-child .case-right,
.work-grid.work-grid-standard li:first-child .case-date {
  display: block;
}

.work-grid.work-grid-standard li:first-child .case-copy h2 {
  font-size: .24rem;
  line-height: .34rem;
}

.work-grid.work-grid-standard li:first-child .case-link {
  margin-top: .18rem;
}

.work-grid.work-grid-standard li:first-child .case-date {
  padding-top: .2rem;
}

@media (max-width: 900px) {
  .work-grid.work-grid-standard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem .18rem;
  }
}

@media (max-width: 560px) {
  .work-grid.work-grid-standard {
    grid-template-columns: 1fr;
  }

  .work-grid.work-grid-standard li,
  .work-grid.work-grid-standard li:first-child {
    margin-bottom: .6rem;
  }

  .work-grid.work-grid-standard li:first-child .work-image {
    aspect-ratio: 1 / 1;
  }

  /* Keep the mobile case heading as a compact editorial introduction. */
  .home-case-head {
    display: block;
    margin-top: .72rem;
  }

  .home-case-head .eyebrow {
    margin-bottom: .14rem;
  }

  .home-case-head h2 {
    font-size: .34rem;
    line-height: .46rem;
    font-weight: 600;
  }

  .home-case-head > .mark {
    display: none;
  }

  .home-case-intro {
    max-width: 100%;
    margin: .16rem 0 0;
    color: #757575;
    font-size: .18rem;
    line-height: .34rem;
    letter-spacing: 0;
  }
}

@media (min-width: 561px) {
  .home-case-intro { display: none; }
}

/* Services: a concise list by default, with the supporting line revealed on intent. */
.studio-service-toggle {
  display: grid;
  grid-template-columns: .42rem minmax(0, 1fr);
  column-gap: .16rem;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.studio-service-toggle em {
  grid-column: 2;
  display: block;
  overflow: hidden;
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transition: max-height .28s ease, margin .28s ease, opacity .22s ease;
}

.studio-service-toggle.is-open em,
.studio-service-toggle:focus-visible em {
  max-height: .8rem;
  margin-top: .2rem;
  opacity: 1;
}

.studio-service-toggle:focus-visible { outline: 1px solid var(--accent, #e71619); outline-offset: -.04rem; }

@media (hover: hover) and (min-width: 561px) {
  .studio-service-toggle:hover em { max-height: .8rem; opacity: 1; }
}

@media (max-width: 560px) {
  .studio-service-band > .studio-service-list {
    display: block;
    margin-top: .5rem;
    border-top: 1px solid var(--line, #e5e2db);
  }

  .studio-service-band > .studio-service-list > li,
  .studio-service-band > .studio-service-list > li:nth-child(-n+2),
  .studio-service-band > .studio-service-list > li:nth-child(n+3) {
    border: 0;
    border-bottom: 1px solid var(--line, #e5e2db);
  }

  .studio-service-band > .studio-service-list > li:last-child { border-bottom: 0; }

  .studio-service-toggle {
    display: grid;
    grid-template-columns: .52rem minmax(0, 1fr);
    column-gap: .12rem;
    padding: .22rem 0;
  }

  .studio-service-toggle > span {
    padding-top: .025rem;
    color: var(--muted, #818181);
    font-size: .16rem;
    line-height: .3rem;
    font-weight: 400;
  }

  .studio-service-toggle > strong {
    font-size: .25rem;
    line-height: .34rem;
    font-weight: 600;
    letter-spacing: -.012em;
  }

  .studio-service-toggle em {
    grid-column: 2;
    font-size: .17rem;
    line-height: .3rem;
    font-style: normal;
    font-weight: 400;
    color: var(--muted, #777);
  }

  .studio-service-toggle.is-open { padding-bottom: .24rem; }
  .studio-service-toggle.is-open em { max-height: .6rem; margin-top: .1rem; }
}

/* Selected work follows the reference's smaller editorial scale on phones. */
@media (max-width: 560px) {
  .home-case-head { margin-top: .66rem; }

  .home-case-head .eyebrow {
    margin-bottom: .12rem;
    font-size: .13rem;
    line-height: .2rem;
    letter-spacing: .03rem;
  }

  .home-case-head h2 {
    font-size: .3rem;
    line-height: .42rem;
    letter-spacing: -.012em;
  }

  .home-case-intro {
    margin-top: .14rem;
    font-size: .17rem;
    line-height: .31rem;
  }

  .work-grid.work-grid-standard {
    margin-top: .28rem;
    row-gap: .21rem;
  }

  .work-grid.work-grid-standard li,
  .work-grid.work-grid-standard li:first-child {
    margin-bottom: .3rem;
  }
}

/* Final mobile service scale: close to the reference's restrained menu rhythm. */
@media (max-width: 560px) {
  .studio-service-intro > .eyebrow {
    margin-bottom: .14rem;
    font-size: .13rem;
    line-height: .2rem;
    letter-spacing: .03rem;
  }

  .studio-service-intro > h2 {
    max-width: 100%;
    font-size: .3rem;
    line-height: .43rem;
    letter-spacing: -.014em;
  }

  .studio-service-band > .studio-service-list { margin-top: .46rem; }

  .studio-service-toggle {
    grid-template-columns: .5rem minmax(0, 1fr);
    column-gap: .1rem;
    padding: .2rem 0;
  }

  .studio-service-toggle > span {
    font-size: .14rem;
    line-height: .28rem;
  }

  .studio-service-toggle > strong {
    font-size: .23rem;
    line-height: .32rem;
  }

  .studio-service-toggle em {
    font-size: .16rem;
    line-height: .28rem;
  }

  .studio-service-toggle.is-open { padding-bottom: .22rem; }
}

/* The final service uses the same close divider as the preceding rows. */
@media (max-width: 560px) {
  .studio-service-band {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .studio-service-band > .studio-service-list > li:last-child {
    border-bottom: 1px solid var(--line, #e5e2db);
  }
}

/* Selected work type scale matches the supplied mobile reference. */
@media (max-width: 560px) {
  .home-case-head h2 {
    font-size: .34rem;
    line-height: .46rem;
    font-weight: 500;
    letter-spacing: 0;
  }

  .home-case-intro {
    margin-top: .16rem;
    font-size: .18rem;
    line-height: .34rem;
  }
}

/* Mobile work cards use the reference's five-step reading rhythm. */
@media (max-width: 560px) {
  .work-grid.work-grid-standard .case-copy,
  .work-grid.work-grid-standard li:first-child .case-copy {
    padding-top: .16rem;
  }

  .work-grid.work-grid-standard .case-kicker {
    font-size: .14rem;
    line-height: .22rem;
  }

  .work-grid.work-grid-standard .case-copy h2,
  .work-grid.work-grid-standard li:first-child .case-copy h2 {
    margin-top: .06rem;
    font-size: .24rem;
    line-height: .34rem;
  }

  .work-grid.work-grid-standard .case-copy b {
    margin: .12rem 0 .15rem;
  }

  .work-grid.work-grid-standard .case-right,
  .work-grid.work-grid-standard li:first-child .case-right {
    padding: 0;
  }

  .work-grid.work-grid-standard .case-tags { display: none; }

  .work-grid.work-grid-standard .case-desc {
    margin-top: 0;
    font-size: .17rem;
    line-height: .31rem;
    -webkit-line-clamp: 2;
  }

  .work-grid.work-grid-standard .case-date,
  .work-grid.work-grid-standard li:first-child .case-date {
    padding-top: .15rem;
    font-size: .14rem;
    line-height: .22rem;
  }
}

/* Mobile service list: number/title offset and type scale follow the reference. */
@media (max-width: 560px) {
  .studio-service-band > .studio-service-list { margin-top: .44rem; }

  .studio-service-toggle {
    grid-template-columns: .34rem minmax(0, 1fr);
    column-gap: .04rem;
    padding: .15rem 0;
  }

  .studio-service-toggle > span {
    padding-top: .015rem;
    font-size: .13rem;
    line-height: .26rem;
  }

  .studio-service-toggle > strong {
    font-size: .22rem;
    line-height: .3rem;
    font-weight: 600;
    letter-spacing: -.01em;
  }

  .studio-service-toggle em {
    font-size: .16rem;
    line-height: .28rem;
  }

  .studio-service-toggle.is-open { padding-bottom: .18rem; }
}

/* Restore the service-content line between the title rule and the summary. */
@media (max-width: 560px) {
  .work-grid.work-grid-standard .case-tags {
    display: flex;
    min-height: 0;
    gap: .04rem .1rem;
    margin: 0 0 .16rem;
  }

  .work-grid.work-grid-standard .case-tags span {
    color: #555;
    font-size: .14rem;
    line-height: .24rem;
    font-weight: 600;
  }
}

@media (max-width: 560px) {
  .home-case-intro {
    font-size: .14rem;
    line-height: .28rem;
  }
}

/* Desktop keeps the services fully expanded in the original two-column format. */
@media (min-width: 901px) {
  .studio-service-band > .studio-service-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 .64rem;
    margin-top: 1.08rem;
    border: 0;
  }

  .studio-service-band > .studio-service-list > li,
  .studio-service-band > .studio-service-list > li:nth-child(-n+2) {
    border-top: 0;
    border-left: 0;
  }

  .studio-service-band > .studio-service-list > li:nth-child(n+3) {
    border-top: 1px solid var(--line, #e8e6dc);
  }

  .studio-service-toggle {
    display: grid;
    grid-template-columns: .42rem minmax(0, 1fr);
    column-gap: .16rem;
    padding: .34rem 0 .42rem;
    cursor: default;
  }

  .studio-service-toggle > span {
    color: var(--muted, #6f6f67);
    font-size: .15rem;
    line-height: .28rem;
    font-weight: 400;
  }

  .studio-service-toggle > strong {
    font-size: .23rem;
    line-height: .32rem;
    font-weight: 500;
  }

  .studio-service-toggle em,
  .studio-service-toggle.is-open em {
    display: block;
    max-height: none;
    margin-top: .2rem;
    opacity: 1;
    color: var(--muted, #6f6f67);
    font-size: .15rem;
    line-height: .26rem;
    font-style: normal;
  }
}

/* Exact compact mobile type scale for work-card information. */
@media (max-width: 560px) {
  .work-grid.work-grid-standard .case-kicker {
    font-size: .13rem;
    line-height: .2rem;
  }

  .work-grid.work-grid-standard .case-copy h2,
  .work-grid.work-grid-standard li:first-child .case-copy h2 {
    font-size: .2rem;
    line-height: .3rem;
    font-weight: 600;
  }

  .work-grid.work-grid-standard .case-tags span {
    font-size: .13rem;
    line-height: .22rem;
  }

  .work-grid.work-grid-standard .case-desc {
    font-size: .14rem;
    line-height: .26rem;
  }

  .work-grid.work-grid-standard .case-date,
  .work-grid.work-grid-standard li:first-child .case-date {
    font-size: .13rem;
    line-height: .22rem;
  }
}

@media (min-width: 901px) {
  .work-grid.work-grid-standard .case-date,
  .work-grid.work-grid-standard li:first-child .case-date {
    display: none;
  }
}

@media (min-width: 901px) {
  .studio-service-toggle > span {
    font-size: .17rem;
    line-height: .3rem;
  }

  .studio-service-toggle > strong {
    font-size: .26rem;
    line-height: .36rem;
  }

  .studio-service-toggle em,
  .studio-service-toggle.is-open em {
    font-size: .17rem;
    line-height: .29rem;
  }
}

@media (min-width: 901px) {
  .work-grid.work-grid-standard .case-tags span {
    font-size: .16rem;
    line-height: .27rem;
  }

  .work-grid.work-grid-standard .case-desc {
    font-size: .18rem;
    line-height: .31rem;
  }
}

@media (max-width: 560px) {
  .work-grid.work-grid-standard .case-date,
  .work-grid.work-grid-standard li:first-child .case-date {
    padding-top: .1rem;
  }
}

/* Tighter desktop rhythm below the banner and before the proof points. */
@media (min-width: 901px) {
  .studio-hero.studio-hero-banner { padding-bottom: .32rem; }
  .studio-service-band { margin-top: .48rem; }
  .shape-stats { margin-top: .48rem; }
}
/* Homepage case categories reuse the live archive taxonomy. */
.home-case-filter {
  display: flex;
  max-width: 7.8rem;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .06rem .28rem;
}

.home-case-filter a {
  position: relative;
  color: #777;
  font-size: .18rem;
  line-height: .34rem;
  white-space: nowrap;
  transition: color .25s ease;
}

.home-case-filter a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: #e71619;
  content: "";
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .28s ease;
}

.home-case-filter a:hover,
.home-case-filter a.active { color: #111; }
.home-case-filter a:hover::after,
.home-case-filter a.active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

@media (max-width: 900px) {
  .home-case-filter { display: none; }
}

@media (max-width: 560px) {
  .home-case-filter {
    display: flex;
    width: 100%;
    max-width: none;
    margin: .32rem 0 .3rem;
    padding: 0;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: .1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .home-case-filter::-webkit-scrollbar { display: none; }

  .home-case-filter a {
    flex: 0 0 auto;
    padding: .04rem .12rem;
    border: 1px solid #000;
    color: #000;
    font-size: .13rem;
    line-height: .22rem;
    transition: background-color .22s ease, color .22s ease;
  }

  .home-case-filter a::after { display: none; }

  .home-case-filter a:hover,
  .home-case-filter a.active {
    background: #000;
    color: #fff;
  }
}