.body-3 .navbar {
  z-index: 1100;
}

.arrowcircle {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #000;
  border-radius: 50%;
  /* The legacy footer interaction writes an inline black background when the
     neighbouring text circle is hovered. Keep the arrow state local to its
     own link instead. */
  background-color: transparent !important;
  aspect-ratio: 1 / 1;
  transform: translateZ(0);
  transition: background-color 180ms ease;
}

.arrowcircle .white-arrow,
.arrowcircle .black-arrow {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform: translateZ(0);
  transform-origin: center;
  transition: opacity 140ms ease;
  will-change: opacity;
}

.arrowcircle .black-arrow {
  opacity: 1 !important;
}

.arrowcircle .white-arrow {
  z-index: 2;
  opacity: 0 !important;
}

.arrowcircle::before,
.arrowcircle::after {
  display: none;
}

.link-block-10 {
  position: relative;
  display: block;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  height: 100%;
  width: auto;
}

.link-block-10.linkmobile {
  width: auto;
}

/* Size the contact area from the visible circles, not from a column
   percentage. Each control stays square because its height comes from the
   footer; when the text circle hides on phones, the right area naturally
   becomes one circle wide without changing the arrow circle's geometry. */
.hello-circle {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  width: auto;
  height: 100%;
  aspect-ratio: 1 / 1;
}

.footer-box .left-box.test {
  flex: 1 1 auto;
  width: auto;
}

.footer-box .roght-box.test-right {
  flex: 0 0 auto;
  width: auto;
  justify-content: flex-end;
}

/* Keep the arrow circle continuous across the 479/480px point where the
   neighbouring text circle appears. The legacy phone rule used 17vw here,
   causing the same arrow to jump down in size when the layout became 15vw. */
@media screen and (max-width: 479px) {
  .footer-box {
    height: clamp(68px, 15vw, 72px);
  }
}

.link-block-10:hover .arrowcircle,
.link-block-10:focus-visible .arrowcircle {
  background-color: #000 !important;
}

.link-block-10:hover .arrowcircle .black-arrow,
.link-block-10:focus-visible .arrowcircle .black-arrow {
  opacity: 0 !important;
}

.link-block-10:hover .arrowcircle .white-arrow,
.link-block-10:focus-visible .arrowcircle .white-arrow {
  opacity: 1 !important;
}

.hello-circle .circle-text,
.hello-circle .copy-email {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #111;
  font-family: acumin-pro, sans-serif;
  font-size: clamp(14px, 1.4vw, 20px);
  font-style: normal;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
}

.hello-circle .hello-circle-label {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding-inline: 8%;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
}

/* Phones keep one stable label so the narrow circle never has to accommodate
   the longer hover copy. Webflow may still write legacy inline display values,
   so keep the responsive state authoritative here. */
.hello-circle .circle-text {
  display: block !important;
}

.hello-circle .copy-email {
  display: none !important;
}

/* Desktop treats the complete two-circle region as one contact interaction.
   Entering either circle or their shared seam switches both the label and the
   arrow; keyboard focus on the mail link uses the same combined state.
   Tablet and smaller viewports keep the shorter, stable label and the arrow's
   own existing touch/hover behavior. */
@media screen and (min-width: 992px) {
  .footer-box .roght-box.test-right:hover .circle-text,
  .footer-box .roght-box.test-right:focus-within .circle-text {
    display: none !important;
  }

  .footer-box .roght-box.test-right:hover .copy-email,
  .footer-box .roght-box.test-right:focus-within .copy-email {
    display: block !important;
  }

  .footer-box .roght-box.test-right:hover .arrowcircle,
  .footer-box .roght-box.test-right:focus-within .arrowcircle {
    background-color: #000 !important;
  }

  .footer-box .roght-box.test-right:hover .arrowcircle .black-arrow,
  .footer-box .roght-box.test-right:focus-within .arrowcircle .black-arrow {
    opacity: 0 !important;
  }

  .footer-box .roght-box.test-right:hover .arrowcircle .white-arrow,
  .footer-box .roght-box.test-right:focus-within .arrowcircle .white-arrow {
    opacity: 1 !important;
  }
}

/* At the final two-circle width, keep both interaction labels inside the
   circle instead of letting their minimum desktop size cross the outline. */
@media screen and (min-width: 480px) and (max-width: 600px) {
  .hello-circle .circle-text {
    font-size: clamp(11px, 2.2vw, 13px);
  }

  .hello-circle .copy-email {
    font-size: clamp(9px, 1.8vw, 11px);
  }
}

.work .italic-caption {
  letter-spacing: 0.01em;
}

.nav-menu .w-nav-link {
  box-sizing: border-box;
  color: #111 !important;
  background-color: transparent !important;
  font-family: acumin-pro, sans-serif !important;
  font-style: normal;
  font-weight: 400 !important;
  font-synthesis: none;
  text-transform: uppercase;
  text-decoration-line: overline;
  text-decoration-color: #111;
  opacity: 1;
  outline: 0 solid transparent;
  box-shadow: none !important;
  transition: outline-color 160ms ease;
}

.nav-menu .w-nav-link:hover:not(.is-current) {
  background-color: transparent !important;
  text-decoration-color: #111;
  opacity: 1;
}

.nav-menu .w-nav-link:focus-visible {
  background-color: transparent !important;
  opacity: 1;
  outline: 2px solid #111;
  outline-offset: 3px;
}

.nav-menu .w-nav-link.is-current,
.nav-menu .w-nav-link[aria-current="page"] {
  background-color: transparent !important;
  font-family: ivyora-display, serif !important;
  font-style: italic;
  font-weight: 400 !important;
  text-transform: none;
  text-decoration-color: #111;
  opacity: 1;
}

@media screen and (min-width: 992px) {
  .nav-menu .w-nav-link[href="/"] {
    width: 5.78em;
  }

  .nav-menu .w-nav-link[href="/more-work"] {
    width: 9.06em;
  }

  .nav-menu .w-nav-link[href="/about"] {
    width: 6.01em;
  }

  .nav-menu .w-nav-link[href*="resume" i] {
    width: 6.95em;
  }
}

@media screen and (max-width: 991px) {
  .nav-menu .w-nav-link {
    line-height: 1.3em;
  }
}

.footer-box .left-box {
  justify-content: center;
  gap: clamp(4px, 0.75vw, 14px);
}

.footer-box .text-block {
  margin-top: 0;
  font-size: clamp(16px, 4vw, 64px);
  line-height: 1.2;
}

.footer-box .email-text,
.footer-box .email-text.email-text-tab.email-text-mobile,
.footer-box .email-text.email-text-tab.email-text-mobile.email-text-large {
  margin-bottom: 0;
}

.next-project-footer .detail-caption-box {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
  text-align: left !important;
}

.next-project-footer .datil-caption-left,
.next-project-footer .datil-caption-right {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.next-project-footer .datil-caption-left {
  justify-content: flex-start !important;
  text-align: left !important;
}

.next-project-footer .datil-caption-right {
  display: flex !important;
  justify-content: flex-end !important;
  text-align: right !important;
}

.next-project-footer .detail-next-italiccaption,
.next-project-footer .detail-next-caption-rightsans {
  margin-top: clamp(6px, 2vw, 24px);
  white-space: nowrap;
}

.migration-hide-unfinished {
  display: none !important;
}

.placeholder-work {
  display: none !important;
}

html[data-wf-page="65e194523b20af9354422e3c"] .project-text-tagline.detail-text-tagline-tab,
html[data-wf-page="65e194523b20af9354422e3c"] .detail-bodycopy.mobile-bodycopy.large-bodycopy {
  font-weight: 300;
}

.heading-24 {
  font-family: ivyora-display, sans-serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
}

/* About Resume uses the homepage Hero greeting as its responsive type role. */
.about_email .resume {
  font-size: 20px;
  line-height: 1.4;
}

.hero-paragraph.gaodian.fix-widow.rightsideimage.mobilechangecopy {
  font-family: var(--font-body);
  font-size: var(--type-body-large);
  font-weight: 300;
  letter-spacing: normal;
  line-height: var(--leading-body);
  margin-top: 8px;
  padding-top: 0;
}

.placeholder-project-media {
  aspect-ratio: 16 / 9;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #000;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: acumin-pro, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: uppercase;
}

@media screen and (min-width: 992px) {
  .section .work .mouse-hover-interaction.work-image.largerspacing,
  .section .work .mouse-hover-interaction.videohight,
  .section .work .mouse-hover-interaction.oct9video {
    margin-top: clamp(-64px, -4vw, -44px);
  }
}

@media screen and (max-width: 479px) {
  .heading-24 {
    font-size: 14px;
    line-height: 1.45;
  }

  .about_email .resume {
    font-size: 14px;
    line-height: 1.45;
  }

  .hero-paragraph.gaodian.fix-widow.rightsideimage.mobilechangecopy,
  .bodycopy.bodycopy-large {
    font-size: 14px;
    letter-spacing: normal;
    line-height: 1.45;
  }

  .hero-paragraph.gaodian.fix-widow.rightsideimage.mobilechangecopy {
    margin-top: 8px;
  }

  .detail-bodycopy.text-white-body.mobile-bodycopy {
    letter-spacing: normal;
    line-height: 1.35;
  }
}

/* Dwindle: after removing the process-card grid, the legacy two-column
   section must not leave its old bottom gutter between this heading and the
   following Styleguide artwork. Card Sorting uses the same flush relationship. */
.body-3 .dwindle-branding-heading {
  padding-bottom: 0;
}

/* Dwindle: the red product composition is the Solution chapter. */
.body-3 .deisgn .textleft > h2:first-child {
  color: #fff;
}

/* Within Dwindle's Solution chapter, Key Features is the H3 group and the
   named feature is an H4 leaf label. */
html[data-wf-page="6638168fa3042435a782ebef"] .dwindle-feature-label {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-style: normal;
  font-weight: 700;
  line-height: var(--leading-caption);
}

html[data-wf-page="6638168fa3042435a782ebef"]
  .dwindle-feature-label
  .bold-text-2 {
  font-size: inherit;
  line-height: inherit;
}

html[data-wf-page="6638168fa3042435a782ebef"]
  .dwindle-solution-subheading {
  color: #fff;
  margin-top: clamp(16px, 1.5vw, 24px);
  margin-bottom: clamp(10px, 1vw, 16px);
  text-transform: none;
}

/* Dwindle: the legacy Styleguide label is intentionally hidden, but the new
   chapter title must be visible inside the blue mascot / brand-assets section. */
.body-3 .detail-uiux-styleguide.dwindle-blue > .dwindle-branding-title {
  color: #fff;
  display: flex;
  margin: 0;
  padding: 5vw 5vw 2vw;
}

@media screen and (max-width: 991px) {
  .project-text .software.project-rightbox,
  .project-text-language .software.project-rightbox {
    column-gap: clamp(24px, 8vw, 48px);
    row-gap: clamp(28px, 8vw, 52px);
  }

  .project-textsection-heading.project-textsection-heading-tab {
    margin-bottom: 10px;
  }

  .project-textsection-bodycopy.project-textsection-bodycopy-tab {
    line-height: 1.35;
  }
}

/* Project Overview metadata follows one monotonic spacing contract across all
   eight case studies: compact on phones, progressively roomier through
   tablet/laptop, and capped at the established 45px desktop gap. */
.project-text .software.project-rightbox,
.project-text-language .software.project-rightbox {
  column-gap: clamp(24px, 3.515625vw, 45px);
  row-gap: clamp(32px, 3.515625vw, 45px);
}
.placeholder-work {
  display: none !important;
}

.work-group-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.5vw, 24px);
  padding: clamp(28px, 5vw, 72px) 0 clamp(18px, 2.5vw, 36px);
  font-family: acumin-pro, sans-serif;
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
}

.work-group-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: currentColor;
  opacity: 1;
}

.work-group-heading:first-child {
  padding-top: 0;
}

/* The Selected Work rule sits at the middle of its heading line. Remove the
   otherwise extra half-line plus bottom-padding from the following grid track
   so rule-to-title spacing matches the divider-to-title spacing between cards. */
.body .section > .grid:not(.more-work-list-grid) > .work-group-heading:first-child {
  margin-bottom: calc(0px - clamp(18px, 2.5vw, 36px) - 0.6em + 0.5px);
}

/* Homepage: the group heading supplies its own rule, so omit the old
   full-width divider immediately before the work section. */
.body > .line:has(+ .section .work-group-heading) {
  display: none;
}

.featured-work-card {
  grid-column: 1 / -1;
}

.imported-work-card {
  min-width: 0;
}

.grid.more-work-deck-grid {
  display: block;
}

.grid.more-work-list-grid {
  display: grid;
  grid-template-rows: none;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  grid-auto-rows: auto;
}

/* Match the first card's visual entry gap to the divider-to-card rhythm
   used between the remaining More Work cards. */
.more-work-list-grid > .work-group-heading {
  padding-bottom: 0;
}

.more-work-list-grid > .work > a:has(.work_heading) {
  display: block;
  margin-bottom: 0;
}

/* More Work desktop composition: captions can be one or two lines, but their
   bottom edge should meet the image with the same rhythm. The smaller layouts
   retain Webflow's stacked treatment. */
@media screen and (min-width: 992px) {
  .more-work-list-grid > .work > a:has(> .work_heading) {
    position: relative;
    z-index: 2;
  }

  .more-work-list-grid > .work > a:has(> img, > .w-background-video) {
    position: relative;
    z-index: 1;
  }

  .more-work-list-grid
    > .work
    > a
    > :is(img, .w-background-video) {
    margin-top: clamp(-51.2px, -4vw, -44px) !important;
  }

  .more-work-list-grid > .work > .caption-box > .italic-caption {
    display: flex;
    align-items: flex-end;
    min-height: 48px;
  }
}

.more-work-deck-shell {
  width: 100%;
  padding-bottom: clamp(28px, 5vw, 72px);
}

.more-work-deck {
  position: relative;
  width: 100%;
  height: clamp(560px, 72vh, 760px);
  padding: 36px 56px 22px 0;
  outline: 0;
  perspective: 1400px;
  touch-action: pan-y;
}

.more-work-deck:focus-visible {
  outline: 2px solid #111;
  outline-offset: 8px;
}

.more-work-deck .more-work-card {
  --deck-offset: 0;
  --deck-z: 1;
  position: absolute;
  top: 36px;
  left: 0;
  z-index: var(--deck-z);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(10px, 1.2vw, 18px);
  width: calc(100% - 56px);
  height: calc(100% - 58px);
  margin: 0;
  padding: clamp(16px, 2vw, 28px);
  border: 1px solid #111;
  background-color: var(--off-white, #fff7e4);
  box-shadow: 0 8px 22px rgba(17, 17, 17, 0.07);
  opacity: 1;
  transform: translate3d(calc(var(--deck-offset) * 18px), calc(var(--deck-offset) * 15px), calc(var(--deck-offset) * -26px)) rotate(calc(var(--deck-offset) * 0.35deg)) scale(calc(1 - var(--deck-offset) * 0.012));
  transform-origin: 50% 12%;
  transition: transform 560ms cubic-bezier(0.22, 0.72, 0.18, 1), opacity 340ms ease, box-shadow 340ms ease;
  will-change: transform, opacity;
}

.more-work-deck .more-work-card::before {
  content: attr(data-file-label);
  position: absolute;
  top: -29px;
  right: clamp(10px, 2vw, 28px);
  height: 29px;
  padding: 7px 18px 0;
  border: 1px solid #111;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background-color: var(--off-white, #fff7e4);
  font-family: acumin-pro, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.more-work-deck .more-work-card.is-active {
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.1);
  pointer-events: auto;
}

.more-work-deck .more-work-card.is-past {
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-108%, -5%, 80px) rotate(-4deg) scale(0.96);
}

.more-work-deck .more-work-card.is-future {
  pointer-events: none;
}

.more-work-deck .more-work-card > a {
  min-width: 0;
  max-width: none;
}

.more-work-deck .more-work-card > a:has(.work_heading) {
  position: relative;
  z-index: 2;
  display: block;
}

.more-work-deck .more-work-card .work_heading {
  margin: 0;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.82;
}

.more-work-deck .more-work-card > a:has(img, video, .w-background-video) {
  display: block;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.22);
}

.more-work-deck .more-work-card > a:has(img, video, .w-background-video) > img,
.more-work-deck .more-work-card > a:has(img, video, .w-background-video) .w-background-video,
.more-work-deck .more-work-card > a:has(img, video, .w-background-video) video {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover;
}

.more-work-deck .more-work-card .w-background-video > video {
  position: static !important;
  inset: auto !important;
  background-position: center;
  background-size: cover;
}

.more-work-deck .more-work-card > .caption-box {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(12px, 3vw, 48px);
  align-items: start;
  text-align: left;
}

.more-work-deck .more-work-card .caption-sans,
.more-work-deck .more-work-card .italic-caption {
  position: static;
  display: block;
  margin: 0;
  max-width: none;
}

.more-work-deck .more-work-card > .line {
  display: none;
}

.more-work-deck-controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: clamp(18px, 3vw, 46px);
  align-items: center;
  min-height: 54px;
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
}

.more-work-deck-instruction,
.more-work-deck-progress {
  margin: 0;
  font-family: acumin-pro, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.more-work-deck-buttons {
  display: flex;
  align-self: stretch;
}

.more-work-deck-button {
  min-width: 94px;
  padding: 0 18px;
  border: 0;
  border-left: 1px solid #111;
  color: #111;
  background: transparent;
  font-family: acumin-pro, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  transition: background-color 160ms ease, color 160ms ease;
}

.more-work-deck-button:hover:not(:disabled),
.more-work-deck-button:focus-visible {
  color: var(--off-white, #fff7e4);
  background-color: #111;
}

.more-work-deck-button:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}

.more-work-deck-button:disabled {
  cursor: default;
  opacity: 0.3;
}

@media (prefers-reduced-motion: reduce) {
  .more-work-deck .more-work-card {
    transition: none;
  }
}

@media screen and (max-width: 767px) {
  .work-group-heading,
  .featured-work-card {
    grid-column: 1;
  }

  .more-work-deck {
    height: clamp(490px, 71svh, 610px);
    padding: 30px 25px 16px 0;
  }

  .more-work-deck .more-work-card {
    top: 30px;
    width: calc(100% - 25px);
    height: calc(100% - 46px);
    padding: 14px;
    transform: translate3d(calc(var(--deck-offset) * 8px), calc(var(--deck-offset) * 10px), calc(var(--deck-offset) * -18px)) rotate(calc(var(--deck-offset) * 0.28deg)) scale(calc(1 - var(--deck-offset) * 0.01));
  }

  .more-work-deck .more-work-card.is-past {
    transform: translate3d(-112%, -3%, 50px) rotate(-3deg) scale(0.97);
  }

  .more-work-deck .more-work-card::before {
    top: -25px;
    height: 25px;
    padding: 6px 12px 0;
    font-size: 9px;
  }

  .more-work-deck .more-work-card .work_heading {
    font-size: clamp(38px, 13vw, 58px);
  }

  .more-work-deck .more-work-card > .caption-box {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .more-work-deck .more-work-card .caption-sans,
  .more-work-deck .more-work-card .italic-caption {
    font-size: 11px;
    line-height: 1.2;
  }

  .more-work-deck-controls {
    grid-template-columns: 1fr auto;
    gap: 12px;
    min-height: 48px;
  }

  .more-work-deck-instruction {
    display: none;
  }

  .more-work-deck-progress {
    padding-left: 4px;
  }

  .more-work-deck-button {
    min-width: 72px;
    padding: 0 12px;
    font-size: 10px;
  }
}

/* More Work extractable file deck */
.more-work-deck {
  overflow: visible;
  padding: 0 64px 0 0;
}

.more-work-deck-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.more-work-deck .more-work-card,
.more-work-deck .more-work-card.is-active,
.more-work-deck .more-work-card.is-past,
.more-work-deck .more-work-card.is-future {
  position: absolute;
  top: 152px;
  left: 0;
  z-index: var(--deck-z);
  width: calc(100% - 24px);
  height: calc(100% - 152px);
  min-height: 0;
  overflow: hidden;
  opacity: 1;
  transform: translate3d(calc(var(--deck-offset) * 8px), calc(var(--deck-offset) * -38px), calc(var(--deck-offset) * -20px)) scale(calc(1 - var(--deck-offset) * 0.004));
  transform-origin: 50% 8%;
  transition: transform 520ms cubic-bezier(0.22, 0.72, 0.18, 1), box-shadow 300ms ease;
  will-change: transform;
}

.more-work-deck .more-work-card::before {
  display: none;
}

.more-work-deck .more-work-card::after {
  display: none;
}

.more-work-deck .more-work-card.is-active {
  z-index: calc(var(--deck-z) + 10);
  box-shadow: 0 16px 36px rgba(17, 17, 17, 0.1);
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.more-work-deck .more-work-card.is-future {
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.06);
  cursor: pointer;
  pointer-events: auto;
}

.more-work-deck .more-work-card.is-future > * {
  opacity: 0;
}

.more-work-deck .more-work-card.is-future::after {
  content: attr(data-file-label) "   " attr(data-file-title);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.24);
  color: #111;
  background: var(--off-white, #fff7e4);
  font-family: acumin-pro, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.more-work-deck:hover .more-work-card.is-future {
  transform: translate3d(calc(var(--deck-offset) * 9px), calc(var(--deck-offset) * -41px), calc(var(--deck-offset) * -20px)) scale(calc(1 - var(--deck-offset) * 0.004));
}

.more-work-deck .more-work-card.is-future.is-peeking {
  transform: translate3d(calc(var(--deck-offset) * 9px), calc(var(--deck-offset) * -41px - 12px), 10px) scale(calc(1 - var(--deck-offset) * 0.003));
}

.more-work-deck .more-work-card.is-future.is-extracting {
  z-index: 30;
  transform: translate3d(calc(var(--deck-offset) * 9px), calc(var(--deck-offset) * -41px - 28px), 30px) scale(calc(1 - var(--deck-offset) * 0.002));
}

.more-work-file-tabs {
  display: none;
}

.more-work-file-tab {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  height: 35px;
  margin-left: -1px;
  padding: 0 12px;
  border: 1px solid #111;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  color: #111;
  background: var(--off-white, #fff7e4);
  font-family: acumin-pro, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transform: translateY(8px);
  transition: transform 220ms ease;
}

.more-work-file-tab:hover,
.more-work-file-tab:focus-visible {
  transform: translateY(3px);
}

.more-work-file-tab.is-active {
  transform: translateY(0);
}

.more-work-file-tab:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .more-work-deck .more-work-card,
  .more-work-file-tab {
    transition: none;
  }
}

@media screen and (max-width: 767px) {
  .more-work-deck {
    padding: 0 20px 0 0;
  }

  .more-work-deck .more-work-card,
  .more-work-deck .more-work-card.is-active,
  .more-work-deck .more-work-card.is-past,
  .more-work-deck .more-work-card.is-future {
    top: 112px;
    width: calc(100% - 14px);
    height: calc(100% - 112px);
    transform: translate3d(calc(var(--deck-offset) * 4px), calc(var(--deck-offset) * -28px), calc(var(--deck-offset) * -12px)) scale(calc(1 - var(--deck-offset) * 0.003));
  }

  .more-work-deck:hover .more-work-card.is-future,
  .more-work-deck .more-work-card.is-future.is-peeking {
    transform: translate3d(calc(var(--deck-offset) * 4px), calc(var(--deck-offset) * -28px), calc(var(--deck-offset) * -12px)) scale(calc(1 - var(--deck-offset) * 0.003));
  }

  .more-work-deck .more-work-card.is-future.is-extracting {
    transform: translate3d(calc(var(--deck-offset) * 4px), calc(var(--deck-offset) * -28px - 16px), 20px) scale(calc(1 - var(--deck-offset) * 0.002));
  }

  .more-work-deck .more-work-card.is-future::after {
    height: 28px;
    padding: 0 10px;
    font-size: 8px;
  }
}

/* Synced contrast rule from the reviewed portfolio branch. */
html[data-wf-page="66f86dc46b15e18434fd6143"] section.purple
  .heading-16.text-white.mobile-heading {
  color: var(--white);
}

/* Match Fynspo's solution title-to-media rhythm to its Discover/Develop sections. */
html[data-wf-page="66f86dc46b15e18434fd6143"]
  .fynspo-solution-title {
  margin-bottom: 0;
  padding-bottom: 5vw;
}

/* InLane colored panels use inverse headings for reliable contrast. */
html[data-wf-page="664779940c2458cd707342d7"] section.orange
  .heading-16.text-white.mobile-heading {
  color: var(--white);
}

/* Typography normalization layer
 *
 * Keeps the migrated visual language while smoothing the abrupt Webflow
 * breakpoint jumps. Unique editorial compositions retain their local rules;
 * the tokens below cover the shared, repeatable text roles.
 */
:root {
  --font-display: ivyora-display, Georgia, "Times New Roman", serif;
  --font-body: acumin-pro, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-script: Kapakana, Georgia, "Times New Roman", serif;

  --type-project-title: clamp(38px, 10vw, 100px);
  --type-project-script: clamp(55px, 15vw, 150px);
  --type-section-title: clamp(20px, calc(15.6px + 1.125vw), 30px);
  --type-subsection: clamp(16px, calc(13px + 0.36vw), 20px);
  --type-body-large: clamp(14px, calc(11.4px + 0.67vw), 20px);
  --type-body: clamp(14px, calc(12.8px + 0.31vw), 17px);
  --type-support: clamp(12px, calc(8.5px + 0.9vw), 20px);
  --type-caption: clamp(12px, 1.25vw, 16px);
  --type-project-nav-label: clamp(12px, calc(8px + 0.9375vw), 20px);
  --type-label: var(--type-body-large);
  --type-micro: 12px;

  --leading-display: 1.2;
  --leading-heading: 1.2;
  --leading-body: 1.4;
  --leading-caption: 1.25;
  --leading-project-nav-label: 1.2;
}

@media screen and (min-width: 1280px) {
  :root {
    --type-project-title: clamp(100px, 6.25vw, 120px);
    --type-project-script: clamp(150px, 9.375vw, 180px);
  }
}

/* Shared project-detail display titles. Homepage cards retain Webflow sizing. */
.project-hero > .work_heading,
.project-hero > .work > .work_heading {
  font-family: var(--font-display);
  font-size: var(--type-project-title);
  line-height: var(--leading-display);
}

.project-hero > .work_heading .script,
.project-hero > .work > .work_heading .script {
  font-family: var(--font-script);
  font-size: var(--type-project-script);
  /* The script face is 1.5× the title size; 0.8 keeps its line box aligned
     with the title's 1.2 leading instead of expanding the whole Hero row. */
  line-height: 0.8;
}

/* Repeated case-study hierarchy. */
.body-3 .heading-16:not(.smallertext),
.body-3 .mobile-heading:not(.smallertext) {
  font-family: var(--font-body);
  font-size: var(--type-section-title);
  line-height: var(--leading-heading);
}

.body-3 .heading-19,
.project-text .heading-24,
.project-text-language .heading-24 {
  font-size: var(--type-section-title);
  line-height: var(--leading-heading);
}

.project-textsection-heading.project-textsection-heading-tab,
.heading-11,
.heading-12,
.heading-13 {
  font-family: var(--font-body);
  font-size: var(--type-label);
  font-style: normal;
  line-height: var(--leading-caption);
}

/* Metadata labels only: Overview facts on project pages and the About
   Colophon component. Subsection headings that reuse the legacy label class,
   such as Roomance's Interview heading, retain their own casing. */
.project-text-language .software.project-rightbox
  .project-textsection-heading.project-textsection-heading-tab,
.project-text .software.project-rightbox
  .project-textsection-heading.project-textsection-heading-tab,
.colophon .heading-11,
.colophon .heading-12,
.colophon .heading-13 {
  text-transform: uppercase;
}

/* About Colophon metadata subtitles share the same emphasis as project
   metadata labels. */
.colophon .heading-11,
.colophon .heading-12,
.colophon .heading-13 {
  font-weight: 700;
}

/* Some migrated metadata labels contain nested formatting spans with their
   own legacy casing. Keep those descendants aligned with the component. */
.project-text-language .software.project-rightbox
  .project-textsection-heading.project-textsection-heading-tab *,
.project-text .software.project-rightbox
  .project-textsection-heading.project-textsection-heading-tab *,
.colophon .heading-11 *,
.colophon .heading-12 *,
.colophon .heading-13 * {
  text-transform: inherit;
}

/* Red Lantern's Chinese tab carried legacy "large" classes that diverged
   from the English tab. Both language panes share the same semantic roles. */
html[data-wf-page="657620bfabe35789fb4f3d4e"]
  .project-textsection-heading-laege {
  font-size: var(--type-label) !important;
  line-height: var(--leading-caption) !important;
}

/* Reading text. The selectors stay explicit so decorative copy is untouched. */
.bodycopy.bodycopy-large,
.hero-paragraph.gaodian.fix-widow.rightsideimage.mobilechangecopy,
.body-3 .project-text-tagline.detail-text-tagline-tab:not(.detail-text-tagline-large),
.body-3 .detail-bodycopy,
.body-3 .homefinderbodycopy,
html[data-wf-page="6638168fa3042435a782ebef"]
  .deisgn p.text-white-body {
  font-family: var(--font-body);
  font-size: var(--type-body-large);
  line-height: var(--leading-body);
}

html[data-wf-page="657620bfabe35789fb4f3d4e"]
  .project-text-tagline.detail-text-tagline-tab.detail-text-tagline-large {
  font-family: var(--font-body);
  font-size: var(--type-body-large) !important;
  font-weight: 300 !important;
  line-height: var(--leading-body) !important;
}

/* HomeFinder Identity copy follows the shared desktop-light/mobile-regular
   reading contract even though its migrated markup lacks mobile-bodycopy. */
.body-3 .homefinderbodycopy {
  font-size: var(--type-body-large) !important;
  font-weight: 300 !important;
  line-height: var(--leading-body) !important;
}

/* Dwindle's Onboarding and Key Feature copy predates detail-bodycopy.
   Treat it as reading text without broadening the white-text utility globally. */
html[data-wf-page="6638168fa3042435a782ebef"]
  .deisgn p.text-white-body {
  font-weight: 300 !important;
}

.body-3 .detail-bodycopy {
  font-size: var(--type-body-large) !important;
  font-weight: 300 !important;
  line-height: var(--leading-body) !important;
}

/* Stacked case-study narratives use one bounded reading measure. Historical
   `_60`, `_30`, and `_100` utilities came from copied Overview blocks and do
   not describe the current composition. Text/media split components are
   intentionally excluded so their copy continues to fill its allocated
   column instead of the full section. */
html[data-wf-page="664779940c2458cd707342d7"]
  :is(.design-process, .detail-single-pic.wireframe)
  p.detail-bodycopy,
html[data-wf-page="66f86dc46b15e18434fd6143"]
  :is(
    .design-process,
    .detail-single-pic.wireframe,
    .detail-single-pic-option.cardsorting.design-system
  )
  p.detail-bodycopy,
html[data-wf-page="6638168fa3042435a782ebef"]
  .design-process
  p.detail-bodycopy,
html[data-wf-page="65e194956ab08d791fc19d54"]
  .detail-single-pic.mobile-section-space
  > p.homefinderbodycopy {
  width: 100%;
  max-width: min(90vw, 45rem) !important;
}

.project-textsection-bodycopy.project-textsection-bodycopy-tab {
  font-family: var(--font-body);
  font-size: var(--type-body-large);
  font-weight: 300;
  line-height: var(--leading-body);
}

.about-reading-copy.about-colophon,
.paragraph-4.about-colophon {
  font-family: var(--font-body);
  font-size: var(--type-body-large);
  font-weight: 300;
  line-height: var(--leading-body);
  padding-top: 1vw;
}

/* Match the About colophon label-to-copy rhythm to the detail-page
   Industry/ metadata groups at every breakpoint. */
.colophon .about-grid-test h3 {
  margin-bottom: max(10px, 1vw);
}

/* The migrated grid fixed its first row to 1.2em. Once the lists became
   responsive reading text, that row clipped the groups into the footer at
   tablet and larger widths. Let every group define its natural row height. */
.colophon .about-grid-test {
  grid-template-rows: auto;
  grid-auto-rows: auto;
}

.colophon .about-grid-test > div {
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 479px) {
  .colophon .about-grid-test {
    display: flex;
    flex-direction: column;
    gap: 15vw;
  }
}

/* About: keep the closing thought as a separate paragraph without adding an
   extra blank line between the two reading blocks. */
.bodycopy.bodycopy-large.about-personal-thought,
.bodycopy.bodycopy-large.about-closing-thought {
  margin-top: 0;
}

/* About biography: semantic paragraph breaks prevent the introduction from
   reading as one dense rectangular slab. Pretty wrapping only improves the
   last line; it does not force editorial line breaks into the copy. */
.bodycopy.bodycopy-large.about-biography-paragraph {
  margin-bottom: 0;
  text-wrap: pretty;
}

.bodycopy.bodycopy-large.about-biography-paragraph
  + .bodycopy.bodycopy-large.about-biography-paragraph {
  margin-top: 0.9em;
}

/* About tablet: the long bilingual biography needs the same vertical reading
   order as mobile. Keep the complete portrait composition as one block, then
   place the language tabs and copy below it; desktop retains the split layout. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .hero-about {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .hero-about .hero-box {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  .hero-about .lefy-box {
    flex-direction: column;
    width: 100%;
  }

  .hero-about .rightbox {
    width: 100%;
    padding-top: clamp(32px, 5vw, 48px);
  }
}

/* InLane: offset the orange top padding baked into the competitor artwork. */
html[data-wf-page="664779940c2458cd707342d7"]
  img[src$="-Competitor.png"] {
  display: block;
  aspect-ratio: 1600 / 814;
  object-fit: cover;
  object-position: center bottom;
}

/* InLane: match Brainstorming's preceding content gap to the User Mindset
   rhythm. The preceding list already contributes a 10px bottom margin. */
html[data-wf-page="664779940c2458cd707342d7"]
  .detail-single-pic.wireframe
  > div
  > .workflow:has(+ .project-textsection-heading) {
  padding-bottom: max(0px, calc(4vw - 10px));
}

/* InLane: standalone H3 between the two fidelity boards needs the same
   preceding-content rhythm as the other case-study H3 headings. */
html[data-wf-page="664779940c2458cd707342d7"]
  .detail-single-pic.wireframe.color-change
  > div
  > img
  + .project-textsection-heading {
  margin-top: 4vw;
}

/* InLane: User Journey and Storyboard share Value Proposition's desktop
   title-to-media rhythm; the mobile composition intentionally stays tight. */
html[data-wf-page="664779940c2458cd707342d7"]
  .detail-2-pic.orange
  .heading-19 {
  padding-bottom: 2vw;
}

/* InLane: both paired-board sections use the same full-width, centered media
   contract as neighboring case-study content on phones. */
@media screen and (max-width: 767px) {
  html[data-wf-page="664779940c2458cd707342d7"]
    .detail-2-pic.cream
    .heading-16.right {
    justify-content: flex-start;
    text-align: left;
  }

  html[data-wf-page="664779940c2458cd707342d7"]
    .detail-2-pic.orange
    .speaker-spread-right
    > .heading-19 {
    align-self: stretch;
    width: 100%;
    text-align: left;
  }

  html[data-wf-page="664779940c2458cd707342d7"]
    .detail-2-pic:is(.cream, .orange)
    :is(.speaker-spread-left, .speaker-spread-right) {
    width: 100%;
  }

  html[data-wf-page="664779940c2458cd707342d7"]
    .detail-2-pic:is(.cream, .orange)
    :is(.speaker-spread-left, .speaker-spread-right)
    > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
  }
}

/* Preserve the established visual weight when InLane's nested labels use
   their correct H4 semantic level instead of inheriting Webflow's H4 weight. */
html[data-wf-page="664779940c2458cd707342d7"]
  .project-textsection-heading.project-textsection-heading-tab {
  font-weight: 700;
}

/* InLane Overview: keep the chapter's exit space readable on narrow screens,
   continuous through the tablet breakpoint, and bounded on wide screens. */
html[data-wf-page="664779940c2458cd707342d7"]
  .project-text-language {
  padding-bottom: clamp(32px, 5vw, 72px);
}

/* InLane metadata: Service and Tool use the established two-column grid.
   Service itself is a vertical semantic list at every breakpoint. */
html[data-wf-page="664779940c2458cd707342d7"] .service-items {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.25em;
  width: 100%;
  margin: 0;
  padding: 1vw 0 0;
  list-style: none;
  text-transform: none;
}

html[data-wf-page="664779940c2458cd707342d7"] .service-item {
  white-space: nowrap;
}

/* Roomance: the Onboarding copy duplicates the App Features introduction in
   the same showcase. Keep the latter as the single visible section label. */
html[data-wf-page="65e194523b20af9354422e3c"]
  .deisgn.roomance-background-black
  .textleft
  > .migration-heading-placeholder:first-child,
html[data-wf-page="65e194523b20af9354422e3c"]
  .deisgn.roomance-background-black
  .textleft
  > p:first-of-type {
  display: none;
}

/* Roomance's product showcase follows the shared Solution hierarchy:
   The Solution (H2) -> Key Features (H3) -> supporting copy/media. */
html[data-wf-page="65e194523b20af9354422e3c"]
  .deisgn.roomance-background-black
  .textleft
  > .roomanceheadingspce {
  margin-top: 0;
  padding-top: 0;
}

html[data-wf-page="65e194523b20af9354422e3c"]
  .deisgn.roomance-background-black
  .roomance-solution-subheading {
  color: #fff;
  margin-top: clamp(16px, 1.5vw, 24px);
  margin-bottom: clamp(10px, 1vw, 16px);
  text-transform: none;
}

/* Roomance semantic H2 migration must retain the original H3 visual weight. */
html[data-wf-page="65e194523b20af9354422e3c"]
  h2:is(.roomance, .roomanceheadingspce) {
  font-weight: 700;
}

/* Frantic semantic H2 migration retains the original H3 visual treatment. */
html[data-wf-page="6636b5a01d558fc6ef68b922"]
  h2.heading-3.mobile-heading {
  font-size: var(--type-section-title);
  line-height: var(--leading-heading);
}

html[data-wf-page="6636b5a01d558fc6ef68b922"]
  h2.heading-3:not(.mobile-heading),
html[data-wf-page="6636b5a01d558fc6ef68b922"] h2.heading-22 {
  font-size: 30px;
  line-height: 36px;
}

html[data-wf-page="6636b5a01d558fc6ef68b922"] h2.heading-22 {
  font-weight: 700;
}

/* Frantic Checkout copy: light on desktop, regular on the mobile layout. */
@media screen and (min-width: 768px) {
  html[data-wf-page="6636b5a01d558fc6ef68b922"]
    .project-text-tagline.detail-text-tagline-tab.fantic-left-body {
    font-weight: 300 !important;
  }
}

@media screen and (max-width: 479px) {
  html[data-wf-page="664779940c2458cd707342d7"]
    .detail-2-pic.orange
    .heading-19 {
    padding-bottom: 0;
  }
}

/* Project navigation labels stay compact on phones and regain hierarchy as
   the viewport grows. Both sides share one fluid role. */
.body-3 .next-project-footer .detail-next-italiccaption,
.body-3 .next-project-footer .detail-next-caption-rightsans {
  font-size: var(--type-project-nav-label) !important;
  line-height: var(--leading-project-nav-label) !important;
}

/* Preserve each label's original typographic identity even when its semantic
   element changes: editorial project name on the left, taxonomy on the right. */
.body-3 .next-project-footer .detail-next-italiccaption {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}

.body-3 .next-project-footer .detail-next-caption-rightsans {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
}

@media screen and (max-width: 767px) {
  /* Shared mobile reading size for project details (including metadata
     values), the homepage intro, About reading copy, and More Work supporting
     descriptions. Navigation, functional controls, and footer labels stay
     unchanged. */
  .body-3 .project-text-tagline.detail-text-tagline-tab,
  .body-3 .detail-bodycopy,
  .body-3 .homefinderbodycopy,
  .body-3 .project-textsection-bodycopy.project-textsection-bodycopy-tab,
  .hero-paragraph.gaodian.fix-widow.rightsideimage.mobilechangecopy,
  .bodycopy.bodycopy-large,
  .about-reading-copy.about-colophon,
  .more-work-list-grid > .work > .caption-box > .italic-caption,
  html[data-wf-page="6638168fa3042435a782ebef"]
    .deisgn p.text-white-body {
    font-size: 16px !important;
  }

  .more-work-list-grid > .work > .caption-box > .italic-caption {
    line-height: 1.45 !important;
  }

  html[data-wf-page="6636b5a01d558fc6ef68b922"]
    .project-text-tagline.detail-text-tagline-tab.fantic-left-body {
    font-weight: 300 !important;
    line-height: 1.45 !important;
  }

  html[data-wf-page="657620bfabe35789fb4f3d4e"]
    .project-text-tagline.detail-text-tagline-tab.detail-text-tagline-large {
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.45 !important;
  }

  .body-3 .project-text-tagline.detail-text-tagline-tab:not(.detail-text-tagline-large),
  .body-3 .detail-bodycopy,
  .body-3 .project-textsection-bodycopy.project-textsection-bodycopy-tab,
  .bodycopy.bodycopy-large,
  .about-reading-copy.about-colophon,
  .paragraph-4.about-colophon,
  .hero-paragraph.gaodian.fix-widow.rightsideimage.mobilechangecopy,
  .body-3 .homefinderbodycopy,
  html[data-wf-page="6638168fa3042435a782ebef"]
    .deisgn p.text-white-body {
    font-weight: 300 !important;
    line-height: 1.45 !important;
  }

  .body-3 .footer-box .email-text,
  .body-3 .footer-box .email-text.email-text-tab.email-text-mobile,
  .body-3 .footer-box .email-text.email-text-tab.email-text-mobile.email-text-large,
  .body-3 .footer .link-2,
  .body-3 .footer .link-3,
  .body-3 .footer .text-block-3 {
    font-size: var(--type-micro);
    line-height: var(--leading-caption);
  }
}

/* Project Hero composition contract: title above media with a shared optical overlap. */
.project-hero {
  --project-hero-overlap: clamp(20px, 4vw, 64px);
}

.project-hero > .work_heading,
.project-hero > .work > .work_heading {
  position: relative;
  z-index: 2;
}

.project-hero > img,
.project-hero > a > img,
.project-hero > .work > img,
.project-hero > .work > a > img,
.project-hero > .w-background-video,
.project-hero > a > .w-background-video,
.project-hero > .work > .w-background-video,
.project-hero > .work > a > .w-background-video {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--project-hero-overlap)) !important;
}

.project-hero > a:has(> img, > .w-background-video),
.project-hero > .work > a:has(> img, > .w-background-video) {
  position: relative;
  z-index: 1;
}

/* Tablet project-detail Heroes use the same title-to-media composition as
   homepage project cards: 80px display type, 116px script glyphs, and a 5vw
   optical overlap. The desktop and phone contracts remain independent. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .project-hero {
    --project-hero-overlap: 5vw;
  }

  .project-hero > .work_heading,
  .project-hero > .work > .work_heading {
    font-size: 80px;
    line-height: 1.2;
  }

  .project-hero > .work_heading .script,
  .project-hero > .work > .work_heading .script {
    font-size: 116px;
    line-height: calc(96 / 116);
  }
}

/* Small-screen project cards use the next Webflow composition step. Mirror
   it in detail Heroes so the relationship stays stable before phone size. */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .project-hero {
    --project-hero-overlap: 6vw;
  }

  .project-hero > .work_heading,
  .project-hero > .work > .work_heading {
    font-size: 70px;
    line-height: 1.2;
  }

  .project-hero > .work_heading .script,
  .project-hero > .work > .work_heading .script {
    font-size: 100px;
    line-height: 0.84;
  }
}

@media screen and (max-width: 479px) {
  .project-hero {
    --project-hero-overlap: 5vw;
  }

  /* Phone Overview copy shares the same full content rail as its language
     tabs, heading, Hero media, and metadata. Override the exported 90% width
     without changing the Tablet two-column composition. */
  .body-3
    :is(.project-text, .project-text-language)
    .project-text-tagline.detail-text-tagline-tab {
    width: 100%;
  }

  .project-hero > .work_heading,
  .project-hero > .work > .work_heading {
    font-size: 38px;
    line-height: 1.2;
  }

  .project-hero > .work_heading .script,
  .project-hero > .work > .work_heading .script {
    font-size: 55px;
    line-height: calc(45.6 / 55);
  }

  html[data-wf-page="66e368d0745f9d4e37ce2209"]
    .more-work-list-grid
    > .work:has(a[href="/homefinder"])
    .mouse-hover-interaction.work-image {
    margin-top: -20px !important;
  }
}

/* Red Lantern: keep the Sketch Illustration video visible through tablet and
   small-desktop widths. The migrated layout only assigned the video a size on
   large desktops, allowing the flex item to collapse at intermediate widths. */
@media screen and (max-width: 1279px) {
  html[data-wf-page="657620bfabe35789fb4f3d4e"]
    .detail-single-pic-option.redlanternshow {
    flex-direction: row;
    align-items: flex-start;
  }

  html[data-wf-page="657620bfabe35789fb4f3d4e"]
    .detail-single-pic-option.redlanternshow
    .detail-l-video {
    flex: 0 1 30%;
    width: 30%;
    min-width: 0;
  }

  html[data-wf-page="657620bfabe35789fb4f3d4e"]
    .detail-single-pic-option.redlanternshow
    .detail-right-video.lion-video {
    display: block !important;
    flex: 1 1 70%;
    width: 70%;
    max-width: 70%;
    height: auto;
    min-width: 0;
    aspect-ratio: 16 / 9;
  }

  html[data-wf-page="657620bfabe35789fb4f3d4e"]
    .detail-single-pic-option.redlanternshow
    .background-video-3 {
    width: 100%;
    height: 100%;
    margin: 0;
  }
}

/* On phones the copy and video become a full-width vertical composition so
   neither side is squeezed as the viewport narrows. */
@media screen and (max-width: 767px) {
  /* Homepage only: keep the mobile entrance mark compact while preserving the
     exported preloader timing and centered composition. */
  html[data-wf-page="64ed5655ecb141100ff8d1e7"] .preloader-image {
    width: 112px;
    height: 112px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }

  /* The animated hero copy visually overlaps the Frantic card at narrow
     widths. It is decorative, so allow taps to reach the card underneath. */
  html[data-wf-page="64ed5655ecb141100ff8d1e7"]
    .hreo-section
    .div-block-31.down {
    pointer-events: none;
  }

  /* About mobile uses one shared content rail. The Hero already supplies the
     outer 5vw inset, so the copy column must not add a second inset that makes
     the language tabs and reading text narrower than the portrait block. */
  html[data-wf-page="656a33e39c0d7007c11f7d5e"]
    .hero-about
    .rightbox {
    padding-right: 0;
    padding-left: 0;
  }

  html[data-wf-page="656a33e39c0d7007c11f7d5e"]
    .hero-about
    .rightbox
    > .w-tabs {
    width: 100%;
  }

  html[data-wf-page="657620bfabe35789fb4f3d4e"]
    .detail-single-pic-option.redlanternshow {
    flex-direction: column;
    align-items: stretch;
  }

  html[data-wf-page="657620bfabe35789fb4f3d4e"]
    .detail-single-pic-option.redlanternshow
    .detail-l-video,
  html[data-wf-page="657620bfabe35789fb4f3d4e"]
    .detail-single-pic-option.redlanternshow
    .detail-right-video.lion-video {
    flex-basis: auto;
    width: 100%;
    max-width: 100%;
  }
}

/* Homepage Hero: the exported phone composition keeps a 105vw animation
   track in normal flow while visually pulling the Frantic card upward. Pull
   the intro copy through that invisible remainder with one fluid offset so
   the visible card-to-copy gap stays stable from 320px through 479px. */
@media screen and (max-width: 479px) {
  html[data-wf-page="64ed5655ecb141100ff8d1e7"]
    .hreo-section
    > .div-block-36 {
    margin-top: calc(-22vw + 3px);
  }
}

/* At the next exported composition the Frantic card ends flush against the
   copy. Preserve the same small breathing space through tablet widths. */
@media screen and (min-width: 480px) and (max-width: 991px) {
  html[data-wf-page="64ed5655ecb141100ff8d1e7"]
    .hreo-section
    > .div-block-36 {
    margin-top: clamp(20px, 2vw, 24px);
  }
}

/* Fynspo Profile study: the exported presentation baked its subtitle and
   screens into one transparent PNG. Restore the subtitle as semantic content
   and crop only the presentation header from the media below it. */
html[data-wf-page="66f86dc46b15e18434fd6143"] .fynspo-profile-study {
  width: 100%;
  margin-top: clamp(20px, 2vw, 28px);
  margin-bottom: clamp(24px, 3vw, 40px);
}

html[data-wf-page="66f86dc46b15e18434fd6143"] .fynspo-profile-subtitle {
  margin-bottom: clamp(28px, 4vw, 60px);
}

html[data-wf-page="66f86dc46b15e18434fd6143"] .fynspo-profile-heading {
  margin: 0 0 clamp(10px, 1vw, 16px);
}

html[data-wf-page="66f86dc46b15e18434fd6143"] .fynspo-profile-points {
  display: grid;
  gap: clamp(6px, 0.7vw, 11px);
  margin: 0;
  padding-left: 1.2em;
  font-family: var(--font-body);
  font-size: var(--type-body-large);
  font-weight: 300;
  line-height: var(--leading-body);
}

html[data-wf-page="66f86dc46b15e18434fd6143"] .fynspo-profile-screens {
  width: 100%;
  aspect-ratio: 2018 / 900;
  overflow: hidden;
}

html[data-wf-page="66f86dc46b15e18434fd6143"] .fynspo-profile-screens-image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  transform: translateY(-23.65%);
}

@media screen and (max-width: 767px) {
  html[data-wf-page="66f86dc46b15e18434fd6143"] .fynspo-profile-points {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.45;
  }
}

/* Fynspo long-form pilot: at large reading widths, headings and prose share
   one bounded rail while the presentation media remains on the wider section
   canvas. Overview is intentionally excluded because it is a split component. */
@media screen and (min-width: 948px) {
  html[data-wf-page="66f86dc46b15e18434fd6143"]
    .fynspo-longform-title,
  html[data-wf-page="66f86dc46b15e18434fd6143"]
    .fynspo-longform-reading
    > h3,
  html[data-wf-page="66f86dc46b15e18434fd6143"]
    .fynspo-longform-reading
    > p {
    width: 100%;
    max-width: 45rem !important;
    margin-right: auto;
  }
}