@font-face {
  font-family: Heebo;
  src: url("fonts/heebo-regular.b6252952a232.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Heebo;
  src: url("fonts/heebo-bold.bbd6e2b3cf97.ttf") format("truetype");
  font-weight: 700 900;
  font-display: swap;
}
@font-face {
  font-family: Heebo;
  src: url("fonts/heebo-semibold.985d776e5206.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
:root {
  --blue: #1e4097;
  --light: #5272c7;
  --stone: #65758f;
  --gray: #6d7479;
  --white: #f8f8f8;
  --brand-blue: #1e4097;
  --page-bg: #fff;
  --placeholder-bg: #d9d9d9;
  --hero-bg: #9eb0cb;
  --hero-label: #111;
  --muted: #65758f;
  --brand-accent: #587fe5;
  --button-text: #fff;
  --button-bg: var(--brand-blue);
  --button-shadow: #142c69;
  --footer-bg: var(--brand-blue);
  --footer-text: #f8f8f8;
  --preview-bg: #eaf0ff;
  --download-bg: #5576ce;
  --divider: #9eb0cb;
  color-scheme: light;
  --heading: "industry-inc-base", sans-serif;
  --gutter: clamp(20px, 3.68vw, 80px);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 30px;
}
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--blue);
  font-family: Heebo, Arial, sans-serif;
  font-size: 24px;
  line-height: 1.46;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  cursor: pointer;
}
a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--light);
  outline-offset: 6px;
}
p,
h1,
h2,
h3,
figure,
dl,
dd {
  margin: 0;
}
h1,
h2,
h3,
.wordmark {
  font-family: var(--heading);
  font-weight: 400;
  text-transform: uppercase;
}
h2 {
  font-size: 64px;
  line-height: 1.2;
}
h3 {
  font-size: 40px;
  line-height: 0.95;
}
img {
  display: block;
}
figure img {
  max-width: 100%;
  height: auto;
}
button {
  color: inherit;
}
main {
  overflow: clip;
}
.page-width {
  width: calc(100% - var(--gutter) * 2);
  max-width: 1600px;
  margin-inline: auto;
}
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  background: var(--page-bg);
  padding: 10px;
  z-index: 20;
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 26px clamp(20px, 4.58vw, 90px) 0;
  min-height: 77px;
  gap: 25px;
}
.wordmark {
  font-size: clamp(32px, 4.445vw, 72px);
  white-space: nowrap;
  line-height: 1.2;
}
.wordmark span {
  color: var(--brand-accent);
}
.wordmark:hover {
  text-decoration: none;
}
.site-header nav {
  display: flex;
  gap: 32px;
  font: 400 32px/1.2 var(--heading);
  text-transform: uppercase;
  color: var(--stone);
}
.menu-toggle {
  display: none;
}
.mobile-copy,
.mobile-arrow {
  display: none;
}
.home-hero {
  position: relative;
  min-height: 763px;
  padding: 157px var(--gutter) 100px;
  isolation: isolate;
}
.hero-copy {
  position: relative;
  max-width: 936px;
}
.eyebrow {
  font-size: 24px;
  color: var(--stone);
}
.home-hero .eyebrow {
  margin: 0 0 20px 13px;
}
.home-hero h1 {
  font-size: clamp(86px, 11.46vw, 180px);
  line-height: 0.8;
  letter-spacing: -0.03em;
}
.hero-line {
  display: block;
}
.accent {
  color: var(--light);
}
.hero-description {
  max-width: 749px;
  color: var(--light);
  margin-top: 20px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 67px;
  margin-top: 20px;
  min-height: 74px;
  font-size: 20px;
}
.button {
  --press-depth: 3px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: 16px 30px;
  border-radius: 4px;
  color: var(--button-text);
  background: var(--button-bg);
  box-shadow: 0 3px 0 var(--button-shadow);
}
/* Move the whole control, including its arrow, without changing layout. */
:is(
  a.button[href],
  a.text-link[href],
  a.project-link[href],
  a.file-link[href],
  .contact nav > a[href],
  .about-more summary,
  .menu-toggle
) {
  transition:
    translate 140ms ease-out,
    box-shadow 140ms ease-out;
}
:is(
  a.button[href],
  a.text-link[href],
  a.project-link[href],
  a.file-link[href],
  .contact nav > a[href],
  .about-more summary,
  .menu-toggle
):hover {
  text-decoration: none;
  translate: 0 1px;
}
a.button[href]:hover {
  box-shadow: 0 2px 0 var(--button-shadow);
}
:is(
  a.button[href],
  a.text-link[href],
  a.project-link[href],
  a.file-link[href],
  .contact nav > a[href],
  .about-more summary,
  .menu-toggle
):active {
  translate: 0 var(--press-depth, 2px);
}
a.button[href]:active {
  box-shadow: 0 0 0 var(--button-shadow);
}
.text-link,
.project-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-actions .text-link {
  gap: 13px;
  color: var(--light);
}
.arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 17.5px;
  height: 17.5px;
}
.hero-waves {
  position: absolute;
  top: 131px;
  left: 26.11%;
  width: 73.89%;
  height: 581px;
  overflow: hidden;
  z-index: -1;
}
.waves {
  position: relative;
  width: 1064px;
  height: 581px;
  overflow: hidden;
}
.waves > img {
  position: absolute;
  left: 143.257px;
  top: -81.5px;
  mask-image: url("assets/wave-mask.6df81f683d34.svg");
  mask-position: -143.257px 81.5px;
  mask-size: 1064px 581px;
  mask-repeat: no-repeat;
}
.selected-work > h2 {
  margin-bottom: 24px;
}
.featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 42px 38px;
}
.project-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 23px;
}
.project-image {
  display: block;
  height: 378px;
  background: var(--placeholder-bg);
  overflow: hidden;
}
.project-image > img,
.gallery-image > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.placeholder {
  display: block;
  background: var(--placeholder-bg);
  width: 100%;
  height: 100%;
}
.project-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  flex: 1;
}
.project-copy h3 {
  max-width: 520px;
}
.project-description {
  color: var(--light);
  line-height: 32px;
}
.project-category {
  font-size: 20px;
  color: var(--stone);
}
.project-link {
  margin-top: auto;
  padding-top: 14px;
  border-bottom: 0;
  background: url("assets/rule-link.7bf2edb8a38c.svg") left bottom/202px 2px no-repeat;
  line-height: 32px;
  padding-bottom: 7px;
}
.lead-project {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: minmax(0, 789fr) minmax(0, 507fr);
  gap: 32px;
}
.lead-project .project-copy {
  gap: 11px;
}
.project-kicker {
  font-size: 20px;
  color: var(--gray);
}
.lead-project .project-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}
.feature-rule {
  width: 100%;
  height: 2px;
  background: url("assets/rule-feature.0c3660838e08.svg") left center/100% 2px no-repeat;
}
.project-card:not(.lead-project) {
  min-height: 694px;
}
.about {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 48px;
  margin-top: 98px;
  margin-bottom: 92px;
}
.portrait {
  height: 460px;
  background: var(--placeholder-bg);
}
.portrait > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.about-copy h2 {
  line-height: 1.1;
}
.prose p + p {
  margin-top: 1.46em;
}
.about .prose {
  color: var(--light);
}
.about-more summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.about-more summary::-webkit-details-marker {
  display: none;
}
.about-more .prose {
  padding-top: 24px;
}
.contact {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 20px var(--gutter);
  min-height: 288px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.contact-top {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.contact h2 {
  line-height: 77px;
}
.contact nav {
  display: flex;
  flex-direction: column;
  gap: 15px;
  justify-content: center;
  min-width: 119px;
}
.contact nav > a,
.contact nav > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.footer-rule {
  height: 2px;
  background: url("assets/rule-footer.a7e28436b492.svg") left center/100% 2px no-repeat;
}
.contact-bottom {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 16px;
  margin-top: -2px;
}
.work-page {
  padding-top: 130px;
  padding-bottom: 110px;
  min-height: 65vh;
}
.work-page h1 {
  font-size: 96px;
  line-height: 1;
  margin-bottom: 40px;
}
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px 32px;
}
.gallery-image {
  display: block;
  aspect-ratio: 1;
  background: var(--placeholder-bg);
  margin-bottom: 24px;
}
.work-grid h2 {
  font-size: 32px;
  line-height: 1.1;
  margin-bottom: 12px;
}
.work-grid .text-link {
  font-size: 20px;
  margin-top: 15px;
}
.case-header {
  position: relative;
  min-height: 624px;
  padding: 140px 60px 60px;
  isolation: isolate;
}
.case-heading {
  max-width: 742px;
}
.case-header .eyebrow {
  margin-bottom: 21px;
}
.case-header h1 {
  font-size: 96px;
  line-height: 80px;
  max-width: 700px;
  margin-bottom: 21px;
}
.case-summary {
  max-width: 742px;
  color: var(--light);
}
.project-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 50px;
  margin-top: 32px;
}
.project-details > div {
  padding-top: 2px;
  background: url("assets/rule-detail.d4c4d9fdace2.svg") left top/100% 2px no-repeat;
}
.project-details dt {
  font-weight: 700;
}
.project-details dd {
  overflow-wrap: anywhere;
}
.case-waves {
  position: absolute;
  left: calc(50% - 300px);
  bottom: 0;
  z-index: -1;
  overflow: hidden;
  width: calc(50% + 300px);
  height: 581px;
}
.case-hero-image {
  height: 440px;
  background: var(--hero-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hero-label);
}
.case-hero-image img {
  width: 100%;
  max-height: 900px;
  object-fit: contain;
}
.case-blocks {
  max-width: 1720px;
  margin: 0 auto;
  padding: 15px 60px 134px;
}
.case-block {
  margin: 40px 0;
}
.case-block h2 {
  font-size: 48px;
  line-height: 1.2;
}
.block-text {
  padding: 0 0 20px;
}
.case-block figure {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.case-block figure img {
  width: 100%;
  object-fit: contain;
}
.case-block figcaption {
  font-size: 16px;
  color: var(--stone);
}
.block-image {
  margin: 60px 0 40px;
}
.block-image .case-image {
  height: 500px;
}
.block-text_image,
.block-image_text,
.block-two_images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 68px;
  align-items: center;
  padding: 40px 0;
}
.block-text_image .case-image,
.block-image_text .case-image,
.block-two_images .case-image {
  height: 316px;
}
.block-file {
  padding: 40px 0;
}
.file-link {
  display: flex;
  gap: 27px;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: auto;
  width: fit-content;
}
.download-icon {
  width: 139px;
  height: 139px;
  background: var(--download-bg);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.file-copy {
  display: flex;
  flex-direction: column;
  max-width: 327px;
}
.file-copy > span {
  color: var(--light);
}
.file-copy strong {
  font-weight: 600;
}
.block-stats {
  padding: 80px 0 0;
}
.stats {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 40px;
  min-height: 325px;
  align-items: center;
  text-align: center;
}
.stats > div {
  flex: 1 1 180px;
  max-width: 340px;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}
.stats dd {
  font: 400 64px/1 var(--heading);
}
.stats dt {
  font-size: 36px;
  color: var(--light);
  white-space: pre-line;
}
.preview-banner {
  background: var(--preview-bg);
  padding: 12px 20px;
  font-size: 16px;
}
.preview-banner a {
  text-decoration: underline;
}
@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.hero-enter {
  animation: enter 0.7s both cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-line:nth-child(1) {
  animation-delay: 0.08s;
}
.hero-line:nth-child(2) {
  animation-delay: 0.16s;
}
.hero-description {
  animation-delay: 0.24s;
}
.hero-actions {
  animation-delay: 0.32s;
}
.reveal-ready {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.6s,
    transform 0.6s;
}
.reveal-ready.is-visible {
  opacity: 1;
  transform: none;
}
@media (min-width: 1600px) {
  .home-hero,
  .case-header {
    max-width: 1760px;
    margin: auto;
  }
}
@media (max-width: 1100px) and (min-width: 701px) {
  body {
    font-size: 20px;
  }
  .site-header nav {
    font-size: 24px;
    gap: 20px;
  }
  .home-hero {
    padding-top: 120px;
    min-height: 650px;
  }
  .eyebrow {
    font-size: 18px;
  }
  .hero-description {
    max-width: 650px;
  }
  .project-image {
    height: 300px;
  }
  .project-card:not(.lead-project) {
    min-height: 610px;
  }
  h2 {
    font-size: 48px;
  }
  h3 {
    font-size: 32px;
  }
  .project-description {
    line-height: 1.4;
  }
  .project-category {
    font-size: 18px;
  }
  .about {
    grid-template-columns: 30% 1fr;
    gap: 32px;
  }
  .portrait {
    height: 400px;
  }
  .about-copy {
    gap: 20px;
  }
  .case-header {
    padding: 100px 40px 60px;
  }
  .case-header h1 {
    font-size: 80px;
    line-height: 0.9;
    max-width: 640px;
  }
  .case-heading {
    max-width: 680px;
  }
  .project-details {
    gap: 24px;
  }
  .case-blocks {
    padding-inline: 40px;
  }
  .case-block h2 {
    font-size: 38px;
  }
  .block-text_image,
  .block-image_text,
  .block-two_images {
    gap: 32px;
  }
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  :root {
    --gutter: 20px;
  }
  body {
    font-size: 16px;
    line-height: 1.46;
  }
  h2 {
    font-size: 32px;
  }
  h3 {
    font-size: 24px;
    line-height: 23px;
  }
  .desktop-copy {
    display: none;
  }
  .mobile-copy {
    display: inline;
  }
  .desktop-arrow {
    display: none;
  }
  .mobile-arrow {
    display: block;
  }
  .site-header {
    position: relative;
    margin: 26px 20px 0;
    min-height: 29px;
    gap: 10px;
  }
  .wordmark {
    font-size: 24px;
  }
  .menu-toggle {
    display: block;
    border: 0;
    padding: 5px 0;
    background: none;
    font-size: 20px;
    color: var(--stone);
    min-height: 44px;
  }
  .site-header nav {
    display: none;
    position: absolute;
    z-index: 10;
    top: 55px;
    left: -20px;
    right: -20px;
    padding: 24px 20px;
    background: var(--page-bg);
    border-bottom: 2px solid var(--stone);
    font: 400 24px/1.5 var(--heading);
    flex-direction: column;
    gap: 14px;
  }
  .site-header nav.open {
    display: flex;
  }
  .site-header nav a {
    padding: 6px 0;
  }
  .home-hero {
    padding: 80px 20px 0;
    min-height: 410px;
  }
  .hero-copy {
    max-width: none;
  }
  .home-hero .eyebrow {
    font-size: 16px;
    color: var(--light);
    margin: 0 0 12px 5px;
  }
  .home-hero h1 {
    font-size: clamp(54px, 16.41vw, 100px);
    line-height: 0.828125;
  }
  .hero-description {
    font-size: 16px;
    margin-top: 12px;
    max-width: 520px;
  }
  .hero-actions {
    gap: 20px;
    margin-top: 12px;
    min-height: 37px;
    font-size: 12px;
  }
  .button {
    min-height: 37px;
    padding: 9px 10px;
    border-radius: 1px;
    gap: 8px;
  }
  .hero-actions .text-link {
    gap: 8px;
  }
  .hero-actions .arrow {
    width: 14px;
    height: 14px;
  }
  .hero-actions .arrow-light {
    transform: none;
  }
  .hero-waves,
  .case-waves {
    display: none;
  }
  .selected-work > h2 {
    font-size: 32px;
    line-height: 54px;
    margin: 0;
  }
  .featured-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .project-card,
  .lead-project {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-height: 0 !important;
  }
  .lead-project {
    gap: 16px;
  }
  .project-image {
    height: 320px;
  }
  .project-copy {
    gap: 7px;
  }
  .lead-project .project-copy {
    gap: 11px;
  }
  .project-copy h3 {
    max-width: none;
  }
  .project-kicker {
    font-size: 20px;
  }
  .project-description {
    font-size: 16px;
    line-height: 1.46;
  }
  .project-category {
    font-size: 16px;
  }
  .project-link {
    margin-top: 0;
    padding: 0 0 7px;
    font-size: 16px;
    line-height: 1.46;
  }
  .project-card:not(.lead-project) .project-link {
    min-width: 202px;
  }
  .about {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 78px;
    margin-bottom: 80px;
  }
  .portrait {
    height: 320px;
    width: 100%;
  }
  .about-copy {
    gap: 15px;
  }
  .about h2 {
    font-size: 24px;
    line-height: 23px;
  }
  .contact {
    padding: 20px;
    min-height: 224px;
    gap: 16px;
    justify-content: space-between;
  }
  .contact-top {
    gap: 10px;
  }
  .contact h2 {
    font-size: 24px;
    line-height: 23px;
  }
  .contact-top > div {
    min-width: 0;
  }
  .contact nav {
    min-width: 118px;
    justify-content: flex-start;
    gap: 15px;
  }
  .contact nav > a,
  .contact nav > span {
    min-height: 24px;
  }
  .contact-bottom {
    font-size: 12px;
    gap: 8px;
    margin: 0;
  }
  .contact .arrow {
    width: 14px;
    height: 14px;
  }
  .work-page {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .work-page h1 {
    font-size: 64px;
    margin-bottom: 30px;
  }
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
  }
  .work-grid h2 {
    font-size: 24px;
    line-height: 1;
  }
  .work-grid .project-category {
    font-size: 14px;
  }
  .work-grid .text-link {
    font-size: 16px;
  }
  .gallery-image {
    margin-bottom: 16px;
  }
  .case-header {
    padding: 62px 20px 32px;
    min-height: 576px;
  }
  .case-header .eyebrow {
    font-size: 16px;
    margin-bottom: 14px;
  }
  .case-heading {
    max-width: none;
  }
  .case-header h1 {
    font-size: 64px;
    line-height: 55px;
    max-width: 350px;
    margin-bottom: 14px;
    overflow-wrap: break-word;
  }
  .case-summary {
    font-size: 20px;
  }
  .project-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px 50px;
    max-width: 346px;
    margin-top: 32px;
    font-size: 24px;
  }
  .case-hero-image {
    height: 247px;
  }
  .case-hero-image img {
    min-height: 0;
    max-height: none;
  }
  .case-blocks {
    padding: 0 20px 80px;
  }
  .case-block {
    margin: 0;
    padding: 20px 0;
  }
  .block-text {
    padding: 40px 0 20px;
  }
  .case-block h2 {
    font-size: 24px;
    line-height: 23px;
  }
  .block-image {
    padding: 20px 15px 30px;
  }
  .block-image .case-image {
    height: auto;
    aspect-ratio: 319/206;
  }
  .block-text_image,
  .block-image_text,
  .block-two_images {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }
  .block-image_text {
    gap: 30px;
  }
  .block-text_image .case-image,
  .block-image_text .case-image,
  .block-two_images .case-image {
    height: 316px;
  }
  .case-block figcaption {
    font-size: 16px;
  }
  .block-file {
    padding: 60px 0 20px;
  }
  .file-link {
    flex-direction: column;
    gap: 27px;
    text-align: center;
  }
  .download-icon {
    width: 83px;
    height: 83px;
  }
  .file-arrow {
    display: none;
  }
  .file-copy {
    font-size: 24px;
    max-width: 100%;
  }
  .block-stats {
    padding: 100px 0 40px;
  }
  .stats {
    flex-direction: column;
    gap: 39px;
    min-height: 0;
  }
  .stats > div {
    flex: none;
    width: 100%;
    max-width: 100%;
    gap: 10px;
  }
  .stats dd {
    font-size: 48px;
    line-height: 55px;
  }
  .stats dt {
    font-size: 24px;
  }
  .preview-banner {
    font-size: 14px;
  }
}
@media (max-width: 370px) {
  .wordmark {
    font-size: 21px;
  }
  .work-grid {
    grid-template-columns: 1fr;
  }
  .project-details {
    gap: 25px;
  }
  .contact nav {
    min-width: 90px;
  }
  .contact-bottom {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(
    a.button[href],
    a.text-link[href],
    a.project-link[href],
    a.file-link[href],
    .contact nav > a[href],
    .about-more summary,
    .menu-toggle
  ) {
    translate: none !important;
  }
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal-ready {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 700px) {
  .case-blocks {
    display: flex;
    flex-direction: column;
  }
  .case-block {
    order: var(--mobile-order);
  }
}

.case-header h1 {
  white-space: pre-line;
}
.eyebrow {
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .feature-rule,
  .footer-rule {
    background-image: url("assets/rule-mobile.d708c6b1db8f.svg");
  }
}
/* The locked mobile composition leaves 42px after the About content. */
@media (max-width: 700px) {
  .about {
    margin-bottom: 42px;
  }
}
/* Caption height is included in the reference's 396px paired-image rows. */
@media (min-width: 1101px) {
  .block-text_image,
  .block-image_text,
  .block-two_images {
    padding-block: 23.5px;
  }
  .case-blocks {
    padding-bottom: 99px;
  }
}

/* Figma fidelity: normal-weight text uses grayscale antialiasing, like the
   reference renderer. Typography scales with desktop layouts up to 1440px. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.work-page {
  max-width: 1144px;
  padding-top: 64px;
  padding-bottom: 80px;
}
.work-page h1 {
  font-size: 64px;
  line-height: 1.2;
  margin-bottom: 32px;
}
.work-grid {
  gap: 40px 32px;
}
.gallery-image {
  margin-bottom: 16px;
}
.work-grid h2 {
  font-size: 28px;
  line-height: 1.05;
  margin-bottom: 8px;
}
.work-grid .project-category {
  font-size: 16px;
  line-height: 24px;
}
.work-grid .text-link {
  font-size: 16px;
  line-height: 24px;
  margin-top: 10px;
}
@media (min-width: 1101px) {
  :root {
    --design-px: min(1px, 0.0694444444vw);
  }
  body {
    font-size: calc(24 * var(--design-px));
    line-height: 1.4583333333;
  }
  .page-width:not(.work-page) {
    width: calc(100% - var(--gutter) * 2 - 4px);
    max-width: 1330px;
    margin-left: max(var(--gutter), calc((100% - 1440px) / 2 + 53px));
    margin-right: auto;
  }
  .site-header {
    max-width: 1308px;
    margin-inline: max(calc(66 * var(--design-px)), calc((100% - 1308px) / 2));
  }
  .wordmark {
    font-size: calc(64 * var(--design-px));
  }
  .site-header nav {
    font-size: calc(32 * var(--design-px));
  }
  .home-hero h1 {
    font-size: calc(165 * var(--design-px));
  }
  .eyebrow {
    font-size: calc(24 * var(--design-px));
  }
  .hero-description {
    max-width: calc(749 * var(--design-px));
  }
  .selected-work > h2 {
    font-size: calc(64 * var(--design-px));
    line-height: calc(94 * var(--design-px));
  }
  .project-copy h3 {
    max-width: calc(507 * var(--design-px));
    font-size: calc(40 * var(--design-px));
    line-height: calc(38 * var(--design-px));
  }
  .project-description {
    font-size: calc(24 * var(--design-px));
    line-height: calc(32 * var(--design-px));
    max-width: calc(642 * var(--design-px));
  }
  .project-category,
  .project-kicker {
    font-size: calc(20 * var(--design-px));
    line-height: calc(29 * var(--design-px));
  }
  .project-link {
    font-size: calc(24 * var(--design-px));
    line-height: calc(32 * var(--design-px));
  }
  .lead-project {
    grid-template-columns: minmax(0, 789fr) minmax(0, 509fr);
  }
  .feature-rule {
    height: 0;
    position: relative;
    overflow: visible;
  }
  .feature-rule::after {
    content: "";
    position: absolute;
    inset: -2px 0 0;
    background: url("assets/rule-feature.0c3660838e08.svg") left center / 100% 2px no-repeat;
  }
  .project-image {
    height: auto;
    aspect-ratio: 646 / 378;
  }
  .lead-project .project-image {
    aspect-ratio: 789 / 378;
  }
  .project-card:not(.lead-project) {
    min-height: calc(694 * var(--design-px));
  }
  .about {
    grid-template-columns: calc(400 * var(--design-px)) minmax(0, 1fr);
    gap: calc(48 * var(--design-px));
    margin-top: 81px;
  }
  .portrait {
    height: calc(460 * var(--design-px));
  }
  .about-copy h2 {
    font-size: calc(64 * var(--design-px));
    line-height: calc(94 * var(--design-px));
    height: calc(63 * var(--design-px));
  }
  .about .prose {
    font-size: calc(24 * var(--design-px));
    line-height: calc(35 * var(--design-px));
  }
  .contact {
    padding-inline: max(var(--gutter), calc((100% - 1440px) / 2 + 53px));
    gap: 39px;
  }
  .contact h2 {
    font-size: calc(64 * var(--design-px));
    line-height: calc(94 * var(--design-px));
    height: calc(77 * var(--design-px));
  }
  .contact nav {
    line-height: calc(32 * var(--design-px));
  }
  .work-grid .project-category {
    font-size: 16px;
    line-height: 24px;
  }
  .case-header {
    max-width: 1440px;
    margin-inline: auto;
    padding-top: 137.5px;
    padding-inline: calc(60 * var(--design-px));
  }
  .case-heading {
    max-width: calc(742 * var(--design-px));
  }
  .case-header h1 {
    max-width: calc(682 * var(--design-px));
    font-size: calc(96 * var(--design-px));
    line-height: calc(80 * var(--design-px));
    margin-bottom: calc(4 * var(--design-px));
  }
  .case-summary {
    max-width: calc(742 * var(--design-px));
    font-size: calc(24 * var(--design-px));
    line-height: calc(35 * var(--design-px));
  }
  .project-details {
    font-size: calc(24 * var(--design-px));
    line-height: calc(35 * var(--design-px));
    gap: calc(50 * var(--design-px));
  }
  .project-details > div {
    padding-top: 0;
    position: relative;
    background: none;
  }
  .project-details > div::before {
    content: "";
    position: absolute;
    inset: -2px 0 auto;
    height: 2px;
    background: url("assets/rule-detail.d4c4d9fdace2.svg") left center / 100% 2px no-repeat;
  }
  .case-waves {
    left: 502px;
    width: calc(100% - 502px);
  }
  .case-blocks {
    max-width: 1440px;
  }
  .case-block h2 {
    font-size: calc(48 * var(--design-px));
    line-height: calc(71 * var(--design-px));
  }
  .case-block .prose {
    font-size: calc(24 * var(--design-px));
    line-height: calc(35 * var(--design-px));
  }
  .block-image .case-image {
    height: auto;
    aspect-ratio: 1320 / 500;
  }
  .block-text_image .case-image,
  .block-image_text .case-image,
  .block-two_images .case-image {
    height: auto;
    aspect-ratio: 626 / 316;
  }
  .block-two_images {
    margin-top: 27px;
  }
}
@media (max-width: 700px) {
  .work-page {
    padding-top: 48px;
    padding-bottom: 60px;
  }
  .work-page h1 {
    font-size: 32px;
    line-height: 54px;
    margin-bottom: 24px;
  }
  .work-grid {
    gap: 30px 20px;
  }
  .work-grid h2 {
    font-size: 24px;
    line-height: 23px;
  }
  .work-grid .project-category {
    font-size: 14px;
    line-height: 20px;
  }
}

@media (min-width: 1101px) {
  /* Match the Adobe webfont baseline to Figma's Industry Inc text boxes. */
  .selected-work > h2,
  .project-copy h3,
  .about-copy h2,
  .contact h2,
  .case-header h1,
  .case-block h2 {
    position: relative;
    top: -0.08em;
  }
  .project-card .project-link {
    padding-top: 0;
  }
  .lead-project .project-copy {
    max-width: calc(507 * var(--design-px));
  }
  .case-block figcaption {
    line-height: 24px;
  }
  .contact-bottom {
    line-height: 24px;
  }
}
@media (min-width: 1101px) {
  /* Gaps measured between the exported case-study image rectangles. */
  .block-image {
    margin-bottom: 26px;
  }
  .block-text_image {
    margin-top: 26px;
    margin-bottom: 26px;
  }
  .block-two_images {
    margin-top: 26px;
  }
  .block-file {
    padding-top: 42px;
    padding-bottom: 38px;
    margin-bottom: 43px;
  }
  .block-stats {
    padding-top: 94px;
  }
  .case-blocks {
    padding-bottom: 94px;
  }
  .contact {
    gap: 38.5px;
  }
}
@media (min-width: 1101px) {
  .home-hero {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: calc(53 * var(--design-px));
  }
}

/* The dedicated biography uses the homepage's portrait and editorial spacing. */
.about-page {
  padding-block: 64px 92px;
  overflow-wrap: anywhere;
}
.about-page h1 {
  font-size: clamp(40px, 4.445vw, 64px);
  line-height: 1.2;
  margin-bottom: 40px;
}
.about-page-intro {
  display: flow-root;
}
.about-page-intro > .about-page-portrait {
  float: left;
  width: calc((100% - 48px) * 400 / 1282);
  margin: 0 48px 24px 0;
}
.about-page-intro > .about-copy {
  display: block;
}
.about-page .about-page-intro .prose {
  max-width: none;
  text-align: left;
}
.about-page-intro .text-link {
  margin-top: 24px;
}
.about-page .prose {
  color: var(--light);
  max-width: 48ch;
}
.about-page-portrait img {
  width: 100%;
  height: auto;
}
.about-page-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  margin-top: 64px;
}
.about-page-details h2 {
  font-size: clamp(28px, 2.78vw, 40px);
  line-height: 1.1;
  margin-bottom: 24px;
}
@media (max-width: 700px) {
  .about-page {
    padding-block: 40px 64px;
  }
  .about-page-intro > .about-page-portrait {
    float: none;
    width: 100%;
    margin: 0 0 32px;
  }
  .about-page-details {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .about-page-details {
    margin-top: 40px;
  }
  .about-page-details h2 {
    margin-bottom: 16px;
  }
}

/* Image geometry belongs to the template, never to the uploaded source. */
.project-image,
.gallery-image,
.case-hero-image,
.case-image,
.about-page-portrait {
  position: relative;
  overflow: hidden;
}
.case-image {
  flex-shrink: 0;
}
.project-image > img,
.gallery-image > img,
.case-hero-image > img,
.case-image > img,
.about-page-portrait > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
.gallery-image > img,
.about-page-portrait > img {
  object-fit: cover;
}
.about-page-portrait {
  aspect-ratio: 4 / 5;
  align-self: start;
  background: var(--placeholder-bg);
}
.portrait > img {
  object-position: center;
}

/* Shared navigation states apply to the desktop bar and mobile menu. */
.site-header nav a {
  color: var(--stone);
  text-decoration: none;
  transition:
    color 140ms ease-out,
    translate 140ms ease-out;
}
.site-header nav a:hover,
.site-header nav a:focus,
.site-header nav a[aria-current] {
  color: var(--blue);
  text-decoration: none;
}
.site-header nav a:active {
  translate: 0 2px;
}
@media (prefers-reduced-motion: reduce) {
  .site-header nav a:active {
    translate: none;
  }
}

/* Share content rows across each gallery row, including longer CMS copy. */
.work-grid > article {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.work-grid > article > .gallery-image {
  flex-shrink: 0;
}
.work-grid > article > h2 {
  min-height: 2lh;
  overflow-wrap: anywhere;
}
.work-grid > article > .project-category {
  min-height: 2lh;
  overflow-wrap: anywhere;
}
.work-grid > article > .text-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 10px;
}
@supports (grid-template-rows: subgrid) {
  .work-grid > article {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .work-grid > article > .text-link {
    align-self: end;
    justify-self: start;
  }
}

:root[data-theme="dark"] {
  --blue: #aec4ff;
  --light: #9db6f1;
  --stone: #a5b6d0;
  --gray: #aeb9c9;
  --page-bg: #101827;
  --placeholder-bg: #253247;
  --hero-bg: #253247;
  --hero-label: #dce6fa;
  --muted: #a5b6d0;
  --brand-accent: #8fabf6;
  --button-bg: var(--brand-blue);
  --button-shadow: #080f1d;
  --footer-bg: #14264d;
  --footer-text: #f8f8f8;
  --preview-bg: #223453;
  --divider: #738db9;
  color-scheme: dark;
}
.project-category,
.case-block figcaption {
  color: var(--muted);
}
.site-header nav {
  align-items: center;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: none;
  color: var(--blue);
  transition:
    color 140ms ease-out,
    translate 140ms ease-out;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: var(--blue);
}
.theme-toggle:active {
  translate: 0 2px;
}
:root[data-theme="dark"] .arrow-blue img,
:root[data-theme="dark"] .arrow-light img,
:root[data-theme="dark"] .file-arrow {
  filter: brightness(0) saturate(100%) invert(80%) sepia(30%) saturate(750%)
    hue-rotate(185deg);
}
:root[data-theme="dark"] .feature-rule,
:root[data-theme="dark"] .project-card:not(.lead-project) .project-link,
:root[data-theme="dark"] .footer-rule > div {
  background-image: linear-gradient(var(--divider), var(--divider));
}
@media (max-width: 700px) {
  .site-header nav {
    align-items: stretch;
  }
  .theme-toggle {
    align-self: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle:active {
    translate: none;
  }
}

/* All three project destinations share the same restrained press feedback. */
.project-title-link {
  display: block;
}
:is(.featured-grid, .work-grid) a.project-card-link[href] {
  text-decoration: none;
  transition: translate 140ms ease-out;
}
:is(.featured-grid, .work-grid)
  a.project-card-link[href]:is(:hover, :focus-visible) {
  text-decoration: none;
  translate: 0 1px;
}
:is(.featured-grid, .work-grid) a.project-card-link[href]:active {
  translate: 0 3px;
}
@media (prefers-reduced-motion: reduce) {
  :is(.featured-grid, .work-grid) a.project-card-link[href] {
    translate: none !important;
  }
}

.theme-toggle svg {
  display: block;
  flex-shrink: 0;
}