/* Room One v12: researched story, balanced headings and crisp supporting media. */
.inner-page--room-one {
  --room-grid-gap: clamp(4px, calc(-0.758px + 1.22vw), 20px);
  --room-grid-margin: clamp(8px, calc(4.412px + 0.92vw), 20px);
  --room-grid-padding: calc(var(--room-grid-margin) - var(--room-grid-gap) / 2);
  --room-col-padding: calc(var(--room-grid-gap) / 2);
  --room-related-columns: repeat(3, minmax(0, 1fr));
  --room-phone-max-width: calc(390px * var(--scale));
  --room-external-icon-size: 1em;
  --room-related-mobile-width: 80%;
  --room-related-mobile-second: 70%;
  --room-related-mobile-third: 60%;
  --room-type-title: clamp(32px, calc(22.484px + 2.44vw), 64px);
  --room-type-editorial: clamp(40px, calc(26.896px + 3.36vw), 84px);
  --room-type-intro: clamp(28px, calc(24.412px + 0.92vw), 40px);
  --room-type-nav: clamp(20px, calc(18.791px + 0.31vw), 24px);
  --room-type-facts: clamp(13px, calc(12.103px + 0.23vw), 16px);
  --room-facts-gap: clamp(24px, calc(20.412px + 0.92vw), 36px);
  --room-title-top: 14px;
  --room-mobile-title-extra: 4px;
  --room-paragraph-gap: 1em;
  --room-mobile-copy-width: 50%;
  --room-mobile-intro-width: 75%;
  --room-small-media-width: calc(
    (100vw - 2 * var(--room-grid-padding)) / 3 - var(--room-grid-gap)
  );
  --room-cover-top: 16px;
  --room-chapter-space: 20px;
  --room-intro-bottom: 80px;
  --room-editorial-space: 60px;
  --room-label-gap: 12px;
  --room-mobile-title-bottom: 127px;
  --room-mobile-facts-top: 48px;
  --room-mobile-facts-bottom: 32px;
  --room-buro-phone-copy-gap: 56px;
  --room-buro-phone-chapter-top: 32px;
  --room-buro-phone-chapter-bottom: 8px;
}
/* The shared agency header and mobile menu remain the normal navigation. */
.inner-page--room-one main {
  padding: var(--paak-case-opening-top) 0 0;
}
.room-one-case :is(img, video) {
  display: block;
  width: 100%;
  height: auto;
}
.room-one-case video {
  background: var(--paak-surface-dark);
}
.room-one-case :is(h1, h2, p) {
  max-width: none;
  text-wrap: wrap;
}
.room-one-case :is(.room-project-overview, .room-introduction, .room-chapter) {
  display: flex;
  flex-wrap: wrap;
  padding-inline: var(--room-grid-padding);
}
.room-one-case .room-project-overview {
  margin: 0 0 var(--paak-lower-heading-gap);
}
.room-one-case .room-project-statement {
  width: calc(100% * 18 / 24);
  padding-inline: var(--room-col-padding);
  font-size: var(--room-type-title);
  line-height: 1.1;
  letter-spacing: -0.07em;
  text-indent: calc((100vw - 2 * var(--room-grid-padding)) * 6 / 24);
  margin-bottom: 0;
}
.room-one-case .room-project-facts {
  width: calc(100% * 4 / 24);
  margin-left: auto;
  padding-inline: var(--room-col-padding);
  font-size: var(--room-type-facts);
  line-height: 1.3;
  letter-spacing: -0.04em;
}
.room-one-case .room-project-facts :is(dl, dd) {
  margin: 0;
}
.room-one-case .room-project-facts dl > div {
  margin-bottom: var(--room-chapter-space);
}
.room-one-case .room-project-facts dl > div:last-child {
  margin-bottom: 0;
}
.room-one-case :is(.room-project-website, .room-finished-link) {
  display: inline-flex;
  align-items: center;
  gap: var(--room-grid-gap);
  min-height: var(--paak-hit-target);
  margin-top: var(--room-chapter-space);
  font-size: var(--paak-type-body);
}
.room-one-case .room-project-website {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.room-one-case .room-external-icon {
  width: var(--room-external-icon-size);
  height: var(--room-external-icon-size);
  flex-shrink: 0;
}
.room-one-case .room-project-facts dt {
  opacity: 0.4;
}
.room-one-case .room-project-facts ul {
  list-style: none;
  padding: 0;
}
.room-one-case .cover {
  margin: 0 var(--room-grid-margin);
}
.room-one-case .room-introduction {
  position: relative;
  margin-top: var(--room-chapter-space);
  margin-bottom: var(--room-intro-bottom);
  padding-top: var(--room-chapter-space);
}
.room-one-case :is(.room-introduction, .room-chapter)::before {
  content: "";
  position: absolute;
  inset: 0 var(--room-grid-margin) auto;
  border-top: 1px solid currentColor;
}
.room-one-case .room-introduction h2 {
  width: calc(100% * 10 / 24);
  padding-inline: var(--room-col-padding);
  font-size: var(--paak-type-section);
  line-height: 1.1;
  letter-spacing: -0.05em;
}
.room-one-case .room-intro-columns {
  width: calc(100% * 8 / 24);
  margin-left: auto;
  padding-inline: var(--room-col-padding);
  column-count: 1;
  column-gap: var(--room-grid-gap);
}
.room-one-case :is(.room-intro-columns p, .room-chapter-copy, .room-outcome) {
  font-size: var(--paak-type-label);
  line-height: 1.2;
  letter-spacing: -0.04em;
}
.room-one-case :is(.room-intro-columns p, .room-text-columns p) {
  margin-bottom: var(--room-paragraph-gap);
}
.room-one-case :is(.room-intro-columns p, .room-text-columns p):last-child {
  margin-bottom: 0;
}
.room-one-case .room-chapter {
  position: relative;
  margin-block: var(--room-chapter-space);
  padding-top: var(--room-chapter-space);
  align-items: stretch;
}
.room-one-case .room-copy-column {
  width: calc(100% * 8 / 24);
  padding-inline: var(--room-col-padding);
  min-width: 0;
}
.room-one-case .room-chapter-copy {
  position: sticky;
  top: var(--paak-inner-header-height);
  padding-top: 0;
}
.room-one-case .room-chapter-copy h2 {
  font-size: var(--paak-type-section);
  line-height: 1.2;
  letter-spacing: -0.05em;
  margin-bottom: var(--room-label-gap);
}
.room-one-case .room-text-columns {
  column-count: 1;
}
.room-one-case .room-media-column {
  display: flex;
  flex-direction: column;
  gap: var(--room-grid-margin);
  width: calc(100% * 14 / 24);
  margin-left: auto;
  padding-inline: var(--room-col-padding);
  min-width: 0;
}
.room-one-case .room-chapter-reverse .room-copy-column {
  order: 2;
  margin-left: auto;
}
.room-one-case .room-chapter-reverse .room-media-column {
  order: 1;
  margin-left: 0;
}
.room-one-case .room-media-small {
  width: var(--room-small-media-width);
  align-self: end;
}
.room-one-case .room-chapter-reverse .room-media-small {
  align-self: start;
}
.room-one-case .room-phone {
  max-width: var(--room-phone-max-width);
}
.room-one-case .room-services-chapter {
  background: var(--paak-surface-dark);
  color: var(--paak-surface-light);
  padding-block: var(--room-chapter-space);
}
.room-one-case .room-services-chapter .room-text-columns {
  color: var(--paak-muted-on-dark);
}
.room-one-case .room-wide-scene {
  margin: var(--room-grid-margin);
}
.room-one-case .room-photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--room-grid-gap);
  margin: var(--room-grid-margin);
  align-items: start;
}
.room-one-case .room-ending {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding: var(--room-editorial-space) var(--room-grid-margin);
  margin-top: var(--room-editorial-space);
  gap: var(--room-editorial-space);
}
.room-one-case .room-delivered {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.room-one-case .room-delivered h2 {
  width: calc(100% * 10 / 24);
  font-size: var(--paak-type-section);
  line-height: 1.1;
  letter-spacing: -0.05em;
}
.room-one-case .room-delivery-copy {
  width: calc(100% * 8 / 24);
  margin-left: auto;
}
.room-one-case .room-ending .case-scope {
  margin: 0 0 var(--room-label-gap);
}
.room-one-case .room-outcome {
  margin-block: var(--room-label-gap);
}
.room-one-case .room-next {
  width: 100%;
  min-width: 0;
  padding-top: var(--paak-lower-section-space);
}
.room-one-case .room-related-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--room-chapter-space);
  gap: var(--room-grid-gap);
}
.room-one-case .room-related-heading h2 {
  margin: 0;
  font-size: var(--paak-type-body);
  line-height: var(--paak-leading-body);
  letter-spacing: var(--paak-tracking-body);
}
.room-one-case .room-related-heading a {
  margin: 0;
  font-size: var(--paak-type-body);
  line-height: var(--paak-leading-body);
  letter-spacing: var(--paak-tracking-body);
}
.room-one-case .room-related-gallery {
  display: grid;
  grid-template-columns: var(--room-related-columns);
  gap: var(--room-grid-gap);
  align-items: start;
}
.room-one-case .room-related-project {
  display: block;
  min-width: 0;
  text-decoration: none;
}
.room-one-case .room-related-project figure {
  aspect-ratio: var(--paak-inner-image-ratio);
  overflow: hidden;
}
.room-one-case .room-related-project img {
  height: 100%;
  object-fit: cover;
}
.room-one-case .room-related-project h3 {
  font-size: var(--room-type-nav);
  line-height: 1.2;
  letter-spacing: -0.05em;
  margin-top: var(--room-label-gap);
}
.room-one-case .room-related-project:hover h3 {
  text-decoration: underline;
}
@media (width >= 2000px) {
  .inner-page--room-one {
    --room-grid-gap: 1vw;
    --room-grid-margin: 1vw;
    --room-type-title: 3.2vw;
    --room-type-editorial: 4.2vw;
    --room-type-intro: 2vw;
    --room-type-nav: 1.2vw;
    --room-type-facts: 0.8vw;
    --room-facts-gap: 1.8vw;
  }
}
@media (width <= 1440px) {
  .room-one-case :is(.room-text-columns, .room-intro-columns) {
    column-count: 1;
  }
}
@media (width <= 1290px) {
  .room-one-case .room-copy-column {
    width: calc(100% * 9 / 24);
  }
}
@media (width <= 1023px) {
  .inner-page--room-one {
    --room-label-gap: 16px;
  }
  .room-one-case .room-opening {
    display: flex;
    flex-direction: column;
  }
  .room-one-case .room-project-overview {
    display: contents;
  }
  .room-one-case .room-project-statement {
    order: 1;
    width: auto;
    padding-inline: var(--room-grid-margin);
    margin: 0 0 var(--paak-lower-heading-gap);
  }
  .room-one-case .cover {
    order: 3;
  }
  .room-one-case .room-project-facts {
    order: 2;
    width: auto;
    padding-inline: var(--room-grid-margin);
    margin: 0 0 var(--paak-lower-heading-gap);
  }
  .room-one-case .room-project-facts dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--room-grid-gap);
  }
  .room-one-case .room-project-facts dl > div {
    margin-bottom: 0;
  }
  .room-one-case .room-project-facts dl > div:last-child {
    grid-column: 1 / -1;
  }
  .room-one-case .room-chapter {
    margin-top: var(--room-buro-phone-chapter-top);
    margin-bottom: var(--room-buro-phone-chapter-bottom);
  }
  .room-one-case .room-chapter .room-copy-column {
    width: var(--room-mobile-copy-width);
    order: 1;
    margin-left: 0;
  }
  .room-one-case .room-chapter .room-media-column {
    width: 100%;
    order: 2;
    margin-left: 0;
  }
  .room-one-case .room-chapter-copy {
    position: relative;
    top: 0;
    padding-top: 0;
    margin-bottom: var(--room-buro-phone-copy-gap);
  }
  .room-one-case .room-media-small {
    width: 100%;
  }
  .room-one-case .room-introduction h2 {
    width: var(--room-mobile-intro-width);
    margin-bottom: var(--room-mobile-facts-top);
  }
  .room-one-case .room-intro-columns {
    width: 100%;
  }
  .room-one-case .room-delivered {
    width: 100%;
  }
  .room-one-case .room-delivered h2 {
    width: 100%;
    margin-bottom: var(--room-label-gap);
  }
  .room-one-case .room-delivery-copy {
    width: 100%;
  }
}
@media (width <= 743px) {
  .inner-page--room-one {
    --room-type-editorial: 32px;
  }
  .room-one-case .room-project-statement {
    text-indent: calc((100vw - 2 * var(--room-grid-padding)) * 5 / 24);
  }
  .room-one-case .room-chapter .room-copy-column {
    width: 100%;
  }
  .room-one-case .room-introduction h2 {
    width: 100%;
  }
  .room-one-case .room-photo-pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .room-one-case .room-related-gallery {
    display: flex;
    overflow-x: auto;
    gap: var(--room-grid-gap);
    scroll-snap-type: x proximity;
    padding-bottom: var(--room-chapter-space);
  }
  .room-one-case .room-related-project {
    flex: 0 0 var(--room-related-mobile-width);
    scroll-snap-align: start;
  }
}