/* Mobile portfolio layout. Applies at 640px and below.
   Desktop and tablet rules live in the existing stylesheets. */

.life-nav,
.m-casebar,
.home-hero__links .u-narrow {
  display: none;
}

@media (max-width: 640px) {
  :root {
    --m-gutter: clamp(16px, 5.13vw, 24px);
    --m-section: clamp(48px, 16.41vw, 64px);
    --m-case: clamp(48px, 12.82vw, 56px);
  }

  .home-page,
  .about-page,
  .bc-page {
    --page-gutter: var(--m-gutter);
  }

  .home-page,
  .about-page {
    --m-gutter: clamp(20px, 5.6vw, 24px);
    --page-gutter: var(--m-gutter);
  }

  /* ---------- Header: Home and About ---------- */

  .home-page .site-header,
  .about-page .site-header {
    height: 64px;
  }

  .home-page .site-header__inner,
  .about-page .site-header__inner {
    gap: 8px;
  }

  .home-page .site-header__brand,
  .about-page .site-header__brand,
  .home-page .site-header__mark,
  .about-page .site-header__mark {
    width: 44px;
    height: 44px;
  }

  .home-page .site-header__aq,
  .about-page .site-header__aq {
    font-size: 14px;
    text-shadow: 0 0 3px #2B2E36, 0 0 6px #2B2E36;
  }

  .home-page .site-header__nav,
  .about-page .site-header__nav {
    gap: 22px;
  }

  .home-page .site-header a.site-header__link,
  .about-page .site-header a.site-header__link {
    min-height: 44px;
    padding: 0;
    font-size: 15px;
    gap: 6px;
  }

  .home-page .site-header__marklet,
  .about-page .site-header__marklet {
    width: 14px;
    height: 14px;
  }

  .home-page .site-main,
  .about-page .site-main {
    width: min(100% - (var(--m-gutter) * 2), var(--page-max));
    max-width: 100%;
    padding-bottom: 72px;
    box-sizing: border-box;
  }

  .home-page .home-hero,
  .home-page .work,
  .home-page .project,
  .home-page .project-row,
  .home-page .project__stage,
  .home-page .project__phones {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* ---------- Home ---------- */

  .home-page .home-hero {
    display: block;
    padding-top: 40px;
    gap: 0;
  }

  .home-page .home-hero__title {
    font-size: clamp(46px, 12vw, 58px);
    line-height: 0.95;
  }

  .home-hero__lede {
    margin-top: 10px;
    max-width: none;
    font-size: 17px;
    line-height: 1.5;
    color: #2B2E36;
  }

  .home-hero__lede em {
    font-size: inherit;
    line-height: inherit;
  }

  .home-page .home-hero__links {
    justify-content: flex-start;
    gap: 8px 20px;
    max-width: none;
    margin-top: 8px;
  }

  .home-page .home-hero__links a {
    min-height: 44px;
  }

  .home-hero__links .u-narrow {
    display: inline;
  }

  .home-hero__links .u-wide {
    display: none;
  }

  .home-bag {
    justify-content: flex-start;
    margin-top: 28px;
  }

  .home-bag__toggle {
    width: min(100%, 340px);
    align-items: flex-start;
    text-align: left;
  }

  .home-bag__stage {
    min-height: 300px;
  }

  .home-bag__label {
    font-size: 26px;
  }

  .home-index {
    margin-top: 36px;
  }

  .home-index__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2B2E36;
  }

  .home-index__role {
    font-size: 16px;
    font-weight: 500;
    color: #2B2E36;
  }

  .home-index__prev {
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    color: rgba(43, 46, 54, 0.72);
  }

  .home-index__list a {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 52px;
    padding: 0;
    gap: 8px;
    border-bottom: 1px solid rgba(43, 46, 54, 0.14);
  }

  .home-index__list a::after {
    content: "→";
    font-size: 16px;
    line-height: 1;
    color: rgba(43, 46, 54, 0.5);
  }

  .home-index__num {
    font-size: 18px;
  }

  .home-index__name {
    font-size: 15px;
  }

  .home-page .work {
    padding-top: 56px;
  }

  .work-head {
    align-items: baseline;
    padding-bottom: 12px;
    border-bottom: 1px solid #2B2E36;
  }

  .work-head span {
    letter-spacing: 0.12em;
  }

  .work-head__rest {
    display: none;
  }

  .home-page .project {
    margin-top: 28px;
  }

  .home-page .project-row {
    display: flex;
    flex-direction: column;
    gap: 48px;
    margin-top: 48px;
  }

  .home-page .project-row .project {
    margin-top: 0;
    min-width: 0;
  }

  .home-page .project__stage {
    height: 232px;
    border-radius: 12px;
  }

  .home-page .project--feature .project__stage {
    height: 280px;
  }

  .home-page .project--phones .project__stage {
    height: 300px;
  }

  .home-page .project__screen {
    width: 88%;
    height: 82%;
  }

  .home-page .project--feature .project__screen {
    left: 6%;
    right: 6%;
    top: 9%;
    bottom: 9%;
    width: auto;
    height: auto;
  }

  .home-page .project--phones .project__stage {
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .home-page .project__phones {
    width: auto;
    height: 86%;
    max-width: none;
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
  }

  .home-page .project__phones img {
    height: 100%;
    width: auto;
    max-height: none;
    max-width: 46%;
  }

  .home-page .project:hover .project__screen,
  .home-page .project:focus-visible .project__screen,
  .home-page .project:hover .project__phones,
  .home-page .project:focus-visible .project__phones {
    transform: none;
  }

  .home-page .project__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: 0;
    padding: 0;
  }

  .home-page .project__title,
  .home-page .project--feature .project__title {
    margin-top: 12px;
    padding: 0 2px;
    font-family: "Apple Garamond", "Iowan Old Style", Palatino, serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.12;
    white-space: normal;
  }

  .home-page .project__tags {
    justify-content: flex-start;
    margin-top: 12px;
    padding: 0 2px;
  }

  .home-page .project__tag {
    padding: 7px 10px;
    font-size: 12.5px;
  }

  .home-page .project__blurb {
    margin: 8px 0 0;
    padding: 0 2px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(43, 46, 54, 0.75);
  }

  /* ---------- About ---------- */

  .about-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 36px;
    padding-bottom: 8px;
  }

  .about-hero > div {
    display: contents;
  }

  .about-hero > div > .site-kicker,
  .about-hero > div > h1,
  .about-hero > div > .about-hero__lede {
    order: 1;
  }

  .about-portrait {
    order: 2;
    width: 100%;
    margin-top: 28px;
  }

  .about-list,
  .about-hero > div > .about-textlink {
    order: 3;
  }

  .about-hero h1 {
    font-size: 52px;
    line-height: 0.92;
  }

  .about-hero__lede {
    margin-top: 18px;
    font-size: 17px;
    line-height: 1.5;
    color: #2B2E36;
  }

  .about-portrait img {
    width: 100%;
    height: 440px;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 16%;
    border-radius: 4px;
  }

  .about-list {
    margin-top: 36px;
  }

  .about-list ul {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .about-block > h2,
  .about-split h2,
  .life-copy h2 {
    font-size: 36px;
    line-height: 1.02;
    letter-spacing: -0.01em;
  }

  .closing h2 {
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -0.01em;
  }

  .about-split {
    gap: 28px;
  }

  .job {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "org dates" "role role";
    gap: 4px 16px;
    align-items: baseline;
    padding: 16px 0;
  }

  .job__org {
    grid-area: org;
    font-size: 24px;
  }

  .job__dates {
    grid-area: dates;
    text-align: right;
    font-size: 13px;
    color: rgba(43, 46, 54, 0.68);
  }

  .job__role {
    grid-area: role;
  }

  .belief {
    margin-top: 56px;
    padding: var(--m-section) var(--m-gutter);
  }

  .belief h2 {
    font-size: 42px;
    line-height: 0.98;
  }

  .belief__quote {
    font-size: 25px;
    line-height: 1.35;
  }

  .belief__cols {
    margin-top: 28px;
    gap: 18px;
  }

  .belief__cols p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
  }

  .life {
    margin-top: 56px;
  }

  .board-frame {
    height: auto;
    padding-bottom: 0;
    overflow: visible;
  }

  .board {
    position: relative;
    display: block;
    width: 100%;
    height: 250px;
    margin: 8px 0 0;
    padding: 0;
    overflow: visible;
    transform: none !important;
    touch-action: pan-y;
  }

  .polaroid {
    position: absolute !important;
    left: var(--life-l, 19%) !important;
    top: var(--life-t, 3%) !important;
    width: var(--life-w, 62%) !important;
    margin: 0 !important;
    opacity: var(--life-o, 1);
    transform: var(--life-r, none) !important;
    transform-origin: center center;
    cursor: var(--cursor-link, pointer);
    transition: left 0.38s cubic-bezier(0.2, 0.7, 0.2, 1), top 0.38s cubic-bezier(0.2, 0.7, 0.2, 1), width 0.38s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.38s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease;
  }

  .polaroid[data-role="front"] {
    z-index: 3;
    box-shadow: 0 22px 40px -18px rgba(43, 46, 54, 0.45);
  }

  .polaroid[data-role="left"],
  .polaroid[data-role="right"] {
    z-index: 1;
    box-shadow: 0 10px 22px -12px rgba(43, 46, 54, 0.35);
  }

  .polaroid[data-role="back"] {
    z-index: 0;
    box-shadow: none;
  }

  .polaroid__photo img {
    height: 150px;
  }

  .polaroid:hover .polaroid__cap {
    opacity: 0;
    transform: translateY(8px);
  }

  .polaroid.is-open .polaroid__cap,
  .polaroid:focus-visible .polaroid__cap {
    opacity: 1;
    transform: translateY(0);
  }

  .life-nav {
    display: flex;
    margin-top: -24px;
  }

  .closing {
    margin-top: 64px;
    gap: 28px;
  }

  .closing__links a {
    min-height: 44px;
    font-size: 21px;
    line-height: 1.2;
    padding: 18px 0;
  }

  /* ---------- Shared footer ---------- */

  .home-page .site-footer__body,
  .about-page .site-footer__body,
  .bc-page .site-footer__body {
    width: min(100% - (var(--m-gutter) * 2), var(--page-max));
    max-width: var(--page-max);
    margin-inline: auto;
    padding: 36px 0 32px;
    box-sizing: border-box;
  }

  .home-page .site-footer__top,
  .about-page .site-footer__top,
  .bc-page .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .home-page .site-footer__hello,
  .about-page .site-footer__hello,
  .bc-page .site-footer__hello {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
  }

  .home-page .site-footer__mail,
  .about-page .site-footer__mail,
  .bc-page .site-footer__mail {
    margin-top: 12px;
    font-size: 30px;
    line-height: 1.15;
    text-underline-offset: 8px;
    overflow-wrap: anywhere;
  }

  .home-page .site-footer__nav,
  .about-page .site-footer__nav,
  .bc-page .site-footer__nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 24px;
  }

  .home-page .site-footer__nav a,
  .about-page .site-footer__nav a,
  .bc-page .site-footer__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ---------- Case studies ---------- */

  .bc-page .site-header {
    display: none;
  }

  .bc-page .bf-rail-col {
    display: none !important;
  }

  .bc-page .bf-layout {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    column-gap: 0 !important;
    min-width: 0;
  }

  .bc-page .bf-content {
    min-width: 0;
    max-width: 100%;
    padding-top: 0;
    padding-bottom: 64px;
  }

  .brilliant-final .bf-content {
    gap: 0;
  }

  .m-casebar {
    display: block;
    position: sticky;
    top: 0;
    z-index: 40;
    background: #fff;
    border-bottom: 1px solid rgba(43, 46, 54, 0.22);
  }

  .m-casebar__row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    height: 56px;
    padding: 0 12px;
  }

  .m-casebar__back,
  .m-casebar__contents {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: #2B2E36;
    font: 500 14px/1 "Satoshi", sans-serif;
    text-decoration: none;
    cursor: var(--cursor-link, pointer);
  }

  .m-casebar__back {
    font-size: 20px;
    justify-content: flex-start;
  }

  .m-casebar__contents {
    gap: 8px;
    padding: 0 8px;
  }

  .m-casebar__back:focus-visible,
  .m-casebar__contents:focus-visible,
  .m-casebar__menu a:focus-visible {
    outline: 2px solid #2B2E36;
    outline-offset: 2px;
  }

  .m-casebar__id {
    min-width: 0;
    text-align: left;
  }

  .m-casebar__id span {
    display: block;
    font: 700 10px/1 "Satoshi", sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(43, 46, 54, 0.65);
  }

  .m-casebar__id strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Satoshi", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    color: #2B2E36;
  }

  .m-casebar__track {
    height: 2px;
    background: #eef1f4;
  }

  .m-casebar__fill {
    display: block;
    height: 100%;
    width: 100%;
    background: #2B2E36;
    transform: scaleX(0);
    transform-origin: left center;
  }

  .m-casebar.is-tf-public .m-casebar__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    height: auto;
    min-height: 56px;
    padding: 12px 20px;
    gap: 12px;
  }

  .m-casebar.is-tf-public .m-casebar__back {
    min-width: 0;
    gap: 8px;
    font: 500 11px/1 "Satoshi", sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(43, 46, 54, 0.65);
  }

  .m-casebar.is-tf-public .m-casebar__progress {
    text-align: center;
    font: 500 11px/1 "Satoshi", sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(43, 46, 54, 0.55);
  }

  .m-casebar.is-tf-public .m-casebar__unlock {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    background: #2B2E36;
    color: #fff;
    font: 500 13px/1 "Satoshi", sans-serif;
    text-decoration: none;
  }

  .m-casebar.is-tf-public .m-casebar__track {
    display: none;
  }

  .m-casebar__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: min(70vh, 520px);
    overflow: auto;
    margin: 0;
    padding: 6px 0;
    background: #fff;
    box-shadow: 0 18px 30px -18px rgba(43, 46, 54, 0.35);
    counter-reset: sec;
  }

  .m-casebar__menu[hidden] {
    display: none;
  }

  .m-casebar__menu a {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    color: #2B2E36;
    font: 500 15px/1.3 "Satoshi", sans-serif;
    text-decoration: none;
  }

  .m-casebar__menu a::before {
    counter-increment: sec;
    content: counter(sec, decimal-leading-zero);
    font-family: "Satoshi", sans-serif;
    font-weight: 500;
    font-size: 16px;
  }

  .m-casebar__menu a:hover,
  .m-casebar__menu a:focus-visible {
    background: #f7f8fa;
  }

  .case-final,
  .case-final:not(.terraform-page),
  .brilliant-final {
    --m-gutter: clamp(20px, 5.6vw, 24px);
    --cs-x: var(--m-gutter);
  }

  .brilliant-final {
    --bf-gutter: 0px;
    --bf-pad: var(--m-gutter);
  }

  .terraform-page {
    --m-gutter: clamp(20px, 5.6vw, 24px);
  }

  .terraform-page .cs-body {
    padding-inline: var(--m-gutter);
    box-sizing: border-box;
  }

  .terraform-page .cs-body > :not(.tf-bleed):not(#terraform-locked),
  .terraform-page .terraform-locked__inner > :not(.tf-bleed),
  .terraform-page .bf-content > .bf-cta,
  .terraform-page .cs-body .tf-bleed > * {
    width: 100%;
    max-width: none;
  }

  .terraform-page .cs-body .tf-bleed {
    margin-left: calc(var(--m-gutter) * -1);
    margin-right: calc(var(--m-gutter) * -1);
    padding-left: var(--m-gutter);
    padding-right: var(--m-gutter);
  }

  .bc-page .cs-body h1,
  .brilliant-final .bf-hero__title {
    font-size: 42px !important;
    line-height: 1 !important;
    letter-spacing: -0.01em;
  }

  .bc-page .cs-body h2 {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  .bc-page .cs-body > div:first-child p,
  .brilliant-final .bf-hero__lede {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .case-final .cs-body [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0;
  }

  .case-final .cs-body [style*="grid-template-columns"] > * {
    min-width: 0;
    max-width: 100%;
  }

  .case-final .cs-body [style*="grid-template-columns:52px"],
  .case-final .cs-body [style*="grid-template-columns: 52px"] {
    grid-template-columns: 32px minmax(0, 1fr) !important;
  }

  .case-final .cs-body > div:first-child > div[style*="display:grid"] > img,
  .terraform-page .cs-body > div:first-child img:not(.tf-public-hero__shot) {
    display: block;
    grid-column: 1 / -1;
    width: calc(100% + (var(--m-gutter) * 2)) !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
    margin: 0 calc(var(--m-gutter) * -1) 0 !important;
    object-fit: contain !important;
    object-position: center;
    background: linear-gradient(180deg, #f1f4f7, #e9edf1);
    box-shadow: inset 0 0 0 1px rgba(43, 46, 54, 0.05);
    box-sizing: border-box;
    padding: 26px 5%;
    filter: drop-shadow(0 14px 22px rgba(43, 46, 54, 0.16));
  }

  .case-final .cs-body > div:first-child,
  .case-final .cs-body > div:first-child * {
    overflow-wrap: break-word;
  }

  .case-final .cs-body > div:first-child [style*="aspect-ratio:400"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10 !important;
    width: calc(100% + (var(--m-gutter) * 2));
    max-width: none;
    height: auto;
    margin: 40px calc(var(--m-gutter) * -1) 0;
    overflow: hidden;
    background: linear-gradient(180deg, #f1f4f7, #e9edf1);
    box-shadow: inset 0 0 0 1px rgba(43, 46, 54, 0.05);
  }

  .case-final .cs-body > div:first-child [style*="aspect-ratio:400"] img {
    position: static !important;
    width: 90% !important;
    height: 80% !important;
    max-width: 90%;
    object-fit: contain;
    filter: drop-shadow(0 14px 22px rgba(43, 46, 54, 0.16));
  }

  .case-final .cs-body > div:first-child img[src*="feature-case-card"],
  .case-final .cs-body > div:first-child img[src*="feature-role-clear"] {
    display: none !important;
  }

  .brilliant-final .bf-hero {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .brilliant-final .bf-hero__copy {
    padding: 32px 20px 0;
  }

  .brilliant-final .bf-hero__title {
    margin-top: 14px;
  }

  .brilliant-final .bf-hero__phones {
    width: 100%;
    max-width: none;
    height: auto;
    margin: 20px 0 0;
    padding: 12px 0 0;
    aspect-ratio: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(10px, 3vw, 18px);
    overflow: hidden;
    background: linear-gradient(180deg, #f1f4f7, #e9edf1);
    box-shadow: inset 0 0 0 1px rgba(43, 46, 54, 0.05);
  }

  .brilliant-final .bf-hero__phone,
  .brilliant-final .bf-hero__phone--back,
  .brilliant-final .bf-hero__phone--front {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: clamp(200px, 58vw, 320px);
    max-width: 46%;
    transform: none;
  }

  .brilliant-final .bf-jump {
    margin-top: 10px;
  }

  .brilliant-final .bf-jump__label {
    margin-bottom: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
  }

  .brilliant-final .bf-jump__row {
    justify-content: space-between;
    gap: 12px;
  }

  .brilliant-final .bf-jump .bf-btn {
    min-height: 44px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #2B2E36;
    font-size: 15px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: rgba(43, 46, 54, 0.35);
  }

  .brilliant-final .bf-decision,
  .brilliant-final .bf-decision--flip {
    justify-items: center;
  }

  .brilliant-final .bf-decision__copy {
    justify-self: stretch;
    width: 100%;
  }

  .brilliant-final .bf-decision__phone {
    margin-inline: auto;
  }

  .brilliant-final .bf-marquee {
    padding: 28px 0 8px;
    border-radius: 0;
    overflow: visible;
  }

  .brilliant-final .bf-marquee__viewport {
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .brilliant-final .bf-marquee__track,
  .brilliant-final .bf-marquee.is-ready .bf-marquee__track {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    animation: none;
  }

  .brilliant-final .bf-marquee__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
    padding: 0;
  }

  .brilliant-final .bf-marquee__item {
    width: min(220px, 62%);
    margin-inline: auto;
  }

  .case-final .cs-body [style*="display:flex"][style*="gap:26px"],
  .case-final .cs-body [style*="display:flex"][style*="gap: 26px"],
  .case-final .cs-body [style*="justify-content:space-between"],
  .case-final .cs-body [style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    justify-content: space-between;
    align-items: center !important;
    gap: 4px 12px !important;
  }

  .case-final .cs-body a[style*="border-radius:999px"] {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #2B2E36 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: rgba(43, 46, 54, 0.35);
  }

  .terraform-page .tf-public-hero {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .terraform-page .tf-public-hero__copy {
    order: 1;
  }

  .terraform-page .tf-public-hero__shot {
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 22px !important;
    aspect-ratio: auto;
    padding: 0;
    background: none;
    box-shadow: none;
    filter: none;
  }

  .terraform-page .tf-public-hero__actions {
    order: 3;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100%;
    margin: 0;
    gap: 12px !important;
  }

  .terraform-page .tf-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 22px;
  }

  .terraform-page .tf-hero__read {
    text-align: center;
  }

  .m-casebar.is-tf-public .m-casebar__unlock.is-done {
    background: #d5dbe3;
    color: rgba(43, 46, 54, 0.55);
    pointer-events: none;
  }

  .terraform-page .tf-hero__unlock {
    align-self: stretch !important;
    justify-content: center;
    width: 100% !important;
    max-width: 100%;
    margin: 0 !important;
    min-height: 54px;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: #2B2E36 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-sizing: border-box;
  }

  .terraform-page .tf-hero__unlock.is-done {
    background: #d5dbe3 !important;
    color: rgba(43, 46, 54, 0.55) !important;
    pointer-events: none;
  }

  .terraform-page .tf-public-hero__actions span {
    display: block;
    text-align: center;
    font-size: 14px !important;
    line-height: 1 !important;
    color: rgba(43, 46, 54, 0.7) !important;
    opacity: 1 !important;
  }

  .terraform-page .cs-body > div:first-child .case-project-kicker {
    margin: 0 0 18px;
  }

  .terraform-page .cs-body > div:first-child h1 {
    margin: 0 0 18px !important;
    font-size: 44px !important;
    line-height: 1.04 !important;
  }

  .terraform-page .tf-public-hero__copy p {
    margin: 0 0 24px !important;
    font-size: 17px !important;
    line-height: 1.58 !important;
  }

  .terraform-page .cs-body > div[data-part="public"]:not([id]) + div[data-part="public"]:not([id]) {
    padding-top: 36px !important;
  }

  .terraform-page .bf-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 22px;
    margin: 36px 0 0;
    padding: 22px 0;
    border-top: 1.5px solid #2B2E36;
    border-bottom: 1px solid rgba(43, 46, 54, 0.2);
  }

  .terraform-page .bf-meta__item {
    display: block;
    padding: 0;
    border: 0;
  }

  .terraform-page .bf-meta__item:last-child {
    grid-column: 1 / -1;
  }

  .terraform-page .bf-meta__label {
    display: block;
    margin: 0 0 8px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: #2B2E36;
  }

  .terraform-page .bf-meta__list li:not(:last-child)::after {
    content: " · ";
  }

  /* Stacked editorial project details. One list, not a card grid. */
  .bc-page .bf-meta {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 28px 0 0;
    padding: 0;
    border: 0;
    border-top: 1.5px solid #2B2E36;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    column-gap: 0;
    row-gap: 0;
  }

  .brilliant-final.bc-page .bf-meta {
    box-sizing: border-box;
    width: auto;
    margin-left: var(--m-gutter);
    margin-right: var(--m-gutter);
  }

  .case-final .bf-meta {
    width: 100%;
    margin-top: 28px;
    margin-bottom: 36px;
    margin-left: 0;
    margin-right: 0;
  }

  .bc-page .bf-meta__item {
    display: grid;
    grid-template-columns: clamp(100px, 31.8vw, 124px) minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    min-width: 0;
    margin: 0;
    padding: 17px 0;
    border: 0;
    border-bottom: 1px solid rgba(43, 46, 54, 0.14);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .bc-page .bf-meta__label {
    margin: 2px 0 0;
    padding: 0;
    min-width: 0;
    font-family: "Satoshi", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(43, 46, 54, 0.65);
  }

  .bc-page .bf-meta__value,
  .bc-page .bf-meta__list {
    margin: 0;
    padding: 0;
    min-width: 0;
    font-family: "Satoshi", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.45;
    color: #2B2E36;
    list-style: none;
  }

  .bc-page .bf-meta__list li {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bc-page .bf-meta__list li::before {
    content: none;
  }

  .bc-page .bf-meta__list li:not(:last-child)::after {
    content: ", ";
  }

  .bc-page:not(.brilliant-final) .bf-cta {
    display: flex;
    justify-content: flex-start;
    margin: 20px 0 0;
    padding: 0 var(--m-gutter);
  }

  .brilliant-final .bf-cta {
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
    padding-left: var(--bf-pad);
    padding-right: var(--bf-pad);
  }

  .bc-page .bf-cta .bf-btn {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: #2B2E36;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
  }

  .case-final .cs-specimens.cs-specimens--grid,
  .case-final .cs-specimens.cs-specimens--compact,
  .case-final .cs-specimens__row,
  .case-final .cs-specimens__row--lead,
  .case-final .cs-decision__row,
  .case-final .cs-ds-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .anda-page .anda-score {
    max-width: 100%;
  }

  .terraform-page .tf-gate__control {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 55px;
    overflow: hidden;
    box-sizing: border-box;
  }

  .terraform-page .tf-gate__control .password {
    --width: auto;
    --height: 55px;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 100%;
    overflow: hidden;
  }

  .terraform-page .tf-gate__control .password .monkey,
  .terraform-page .tf-gate__control .password .monkey-hands {
    flex: 0 0 55px;
    width: 55px;
    height: 100%;
  }

  .terraform-page .tf-gate__control .password .monkey-hands {
    right: 0;
    top: 0;
  }

  .terraform-page .terraform-gate__row {
    align-items: stretch;
    max-width: 100%;
  }

  .terraform-page .terraform-gate__submit,
  .terraform-page .tf-gate__control .terraform-gate__submit {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    min-height: 0;
    padding: 0 16px;
  }

  .terraform-page .terraform-gate__heading h2 {
    white-space: normal;
  }

  .terraform-page .tf-scale {
    max-width: 100%;
    overflow: visible;
  }

  .terraform-page .tf-scale__head,
  .terraform-page .tf-scale__row {
    min-width: 0;
  }

  .terraform-page .tf-audit {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-top: 24px;
    aspect-ratio: 16 / 9;
  }

  .terraform-page .tf-scale__intro {
    flex-wrap: wrap;
  }

  .terraform-page .tf-scale__pull {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
  }

  .terraform-page .tf-workflow__frame {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1000 / 760;
    overflow: hidden;
    container-type: inline-size;
  }

  .terraform-page .tf-workflow__frame iframe {
    width: 1000px;
    max-width: none;
    height: 760px;
    transform: scale(min(1, 100cqw / 1000px));
    transform-origin: 0 0;
  }

  .bc-page .cs-body [style*="overflow:hidden"],
  .bc-page .cs-body [style*="overflow: hidden"] {
    max-width: 100%;
  }

  /* Case-study interiors follow the phone template. */

  .case-final .cs-body > div:first-child {
    padding: 32px 20px 0 !important;
  }

  .terraform-page .cs-body > div:first-child {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .case-final .cs-body > div:first-child [style*="border-radius:22px"] {
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .case-final .cs-body > div:not(:first-child):not(#terraform-locked),
  .case-final .cs-body > section[id] {
    margin-top: 0 !important;
    padding-top: var(--m-case) !important;
    padding-bottom: 0 !important;
    scroll-margin-top: 76px;
  }

  .case-final .cs-body [id] [style*="align-items:baseline"] {
    margin-bottom: 14px !important;
  }

  .case-final .cs-body h2 {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }

  .case-final #design-system h2 {
    margin-bottom: 0 !important;
  }

  .case-final #design-system [style*="flex-direction:column"] {
    gap: 20px !important;
  }

  .brilliant-final .bf-ds__lead + .bf-ds__text {
    margin-top: 20px;
  }

  .case-final .cs-body [data-sec] {
    font: 500 18px/1 "Satoshi", sans-serif !important;
    letter-spacing: 0 !important;
    color: #2B2E36 !important;
  }

  .case-final .cs-body [style*="background:#2B2E36"] [data-sec],
  .case-final .cs-body [style*="background:#2B2E36"] [data-sec],
  .terraform-page .tf-bleed[style*="background:#2B2E36"] [data-sec],
  .terraform-page .tf-bleed[style*="background:#2B2E36"] [data-sec] {
    color: #fff !important;
  }

  .case-final .cs-body [style*="grid-template-columns:52px"] {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 14px 0 !important;
  }

  .case-final .cs-body [style*="grid-template-columns:52px"] > span {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  .case-final .cs-body [style*="grid-template-columns:52px"] p {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .case-final .cs-strip {
    width: 100%;
    max-width: 100%;
    margin-inline: calc(var(--m-gutter) * -1);
    margin-top: 0 !important;
    padding: 12px 0 4px !important;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    touch-action: pan-y;
  }

  .case-final .cs-strip [data-preview-track],
  .case-final .cs-strip .cs-device-row,
  .case-final .cs-strip [data-preview-track].is-ready,
  .case-final .cs-strip [data-showcase].is-ready {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: max-content !important;
    max-width: none !important;
    gap: clamp(16px, 4vw, 28px) !important;
    animation: cs-marquee 48s linear infinite;
  }

  .case-final .cs-body .cs-strip img,
  .case-final .cs-body .cs-device-row img {
    flex: 0 0 auto;
    width: min(78vw, 480px) !important;
    max-width: none !important;
    height: auto !important;
    max-height: none;
    object-fit: contain;
    border-radius: 6px;
    box-sizing: border-box;
    padding: 0;
    background: none;
    filter: none;
  }

  .case-final .cs-body .cs-strip img.is-phone,
  .case-final .cs-body .cs-device-row img.is-phone {
    width: auto !important;
    height: clamp(180px, 46vw, 240px) !important;
  }

  .case-final .cs-decision__shot {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }

  .case-final .cs-body > [id] > .cs-decision {
    padding-top: 0;
    border-top: 0;
  }

  .case-final .cs-body [style*="padding:var(--cs-x) 64px"],
  .case-final .cs-body [style*="padding: var(--cs-x) 64px"] {
    padding: 28px 20px !important;
    text-align: left !important;
  }

  .case-final .cs-decision__title {
    margin: 0 0 12px;
    padding-bottom: 0;
    border-bottom: 0;
    font-size: 26px;
    line-height: 1.1;
  }

  .case-final .cs-decisions {
    gap: 28px;
  }

  .case-final .cs-body [style*="grid-template-columns:265px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 32px 20px !important;
    border-radius: 10px !important;
    background: #eef1f4 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .case-final .cs-body [style*="grid-template-columns:265px"] > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .case-final .cs-body [style*="grid-template-columns:265px"] > div:first-child img {
    width: 64px !important;
    height: 64px !important;
    flex: none;
    border-radius: 999px !important;
    object-fit: cover !important;
    padding: 0 !important;
    background: #fff !important;
    filter: none !important;
    max-height: none !important;
  }

  .case-final .cs-body [style*="grid-template-columns:265px"] > div:first-child > div {
    position: static !important;
    padding: 0 !important;
    background: none !important;
  }

  .case-final .cs-body [style*="grid-template-columns:265px"] > div:first-child span {
    color: #2B2E36 !important;
  }

  .case-final .cs-body [style*="grid-template-columns:265px"] > div:first-child span:first-child {
    font: 500 24px/1 "Satoshi", sans-serif !important;
  }

  .case-final .cs-body [style*="grid-template-columns:265px"] [style*="grid-template-columns:repeat(3"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border: 0 !important;
  }

  .case-final .cs-body [style*="grid-template-columns:265px"] [style*="grid-template-columns:repeat(3"] > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 22px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(43, 46, 54, 0.16) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .case-final .cs-body [style*="grid-template-columns:265px"] [style*="grid-template-columns:repeat(3"] > div:last-child {
    border-bottom: 0 !important;
    padding-bottom: 2px !important;
  }

  .case-final .cs-body [style*="grid-template-columns:265px"] [style*="grid-template-columns:repeat(3"] > div > span:first-child {
    margin: 0 !important;
  }

  .case-final .cs-body [style*="grid-template-columns:265px"] [style*="margin-top:auto"] {
    margin-top: 16px !important;
  }

  .brilliant-final .bf-section,
  .brilliant-final .bf-constraints,
  .brilliant-final .bf-decisions,
  .brilliant-final .bf-ds,
  .brilliant-final .bf-takeaways {
    padding: var(--m-case) var(--m-gutter) 0;
  }

  .brilliant-final .bf-problem {
    margin: 20px 0 0;
    padding: var(--m-case) var(--m-gutter) 16px;
    background: #fff;
    color: #2B2E36;
  }

  .brilliant-final .bf-problem .bf-head__num,
  .brilliant-final .bf-problem .bf-head__label,
  .brilliant-final .bf-problem__statement,
  .brilliant-final .bf-problem .bf-challenge,
  .brilliant-final .bf-problem .bf-challenge__title,
  .brilliant-final .bf-problem .bf-challenge__text,
  .brilliant-final .bf-problem .bf-challenge__kicker {
    color: #2B2E36;
  }

  .brilliant-final .bf-problem__card,
  .brilliant-final .bf-problem__quote {
    color: #fff;
  }

  .brilliant-final .bf-problem__card {
    border-radius: 8px;
    padding: 18px 18px 20px;
    background: #2B2E36;
  }

  .brilliant-final .bf-head__num {
    font: 500 18px/1 "Satoshi", sans-serif;
  }

  .brilliant-final .bf-section__lead,
  .brilliant-final .bf-problem__statement,
  .brilliant-final .bf-constraints__lead,
  .brilliant-final .bf-decisions__lead,
  .brilliant-final .bf-ds__lead,
  .brilliant-final .bf-takeaways__lead {
    font-size: 30px;
    line-height: 1.08;
  }

  .brilliant-final .bf-persona {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border-radius: 10px;
    background: #eef1f4;
    box-shadow: none;
  }

  .brilliant-final .bf-persona__figure {
    display: flex;
    align-items: center;
    gap: 14px;
    background: transparent;
  }

  .brilliant-final .bf-persona__photo {
    width: 64px;
    height: 64px;
    min-height: 0;
    flex: none;
    border-radius: 999px;
    object-fit: cover;
  }

  .brilliant-final .bf-persona__caption {
    position: static;
    padding: 0;
    background: none;
  }

  .brilliant-final .bf-persona__name {
    font-family: "Satoshi", sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #2B2E36;
  }

  .brilliant-final .bf-persona__role {
    color: rgba(43, 46, 54, 0.72);
  }

  .brilliant-final .bf-persona__quote {
    font-size: 21px;
    line-height: 1.3;
  }

  .brilliant-final .bf-persona__stats {
    display: flex;
    flex-direction: column;
  }

  .brilliant-final .bf-persona__stat {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-right: 0;
    border-bottom: 0;
    border-top: 1px solid rgba(43, 46, 54, 0.14);
  }

  .home-page .site-footer__mail,
  .about-page .site-footer__mail,
  .bc-page .site-footer__mail {
    font-size: 30px;
  }

  /* Claude mobile block grammar. Inline desktop colors lose here. */

  .terraform-page .bf-meta {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 8px;
    width: 100%;
  }

  .terraform-page #overview.tf-bleed {
    background: #2B2E36 !important;
    color: #fff !important;
    margin-top: 44px !important;
    margin-left: calc(var(--m-gutter) * -1) !important;
    margin-right: calc(var(--m-gutter) * -1) !important;
    padding: 48px var(--m-gutter) 40px !important;
  }

  .terraform-page #overview.tf-bleed h2,
  .terraform-page #overview.tf-bleed p,
  .terraform-page #overview.tf-bleed span {
    color: #fff !important;
  }

  .terraform-page #overview.tf-bleed h2 {
    margin: 0 0 18px !important;
    font-size: 32px !important;
    line-height: 1.18 !important;
  }

  .terraform-page #overview.tf-bleed [data-sec],
  .terraform-page #users [data-sec] {
    font-size: 26px !important;
    line-height: 1 !important;
  }

  .terraform-page #overview.tf-bleed [style*="repeat(3"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 34px !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
  }

  .terraform-page #overview.tf-bleed [style*="repeat(3"] > div {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    row-gap: 10px !important;
    align-items: start !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 22px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.34) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .terraform-page #overview.tf-bleed [style*="repeat(3"] > div > span:first-child {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: block !important;
    margin: 0 !important;
    font: 500 42px/1 "Satoshi", sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #fff !important;
  }

  .terraform-page #overview.tf-bleed [style*="repeat(3"] > div > span:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    display: block !important;
    margin: 0 0 10px !important;
    font: 500 11px/1 "Satoshi", sans-serif !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #fff !important;
  }

  .terraform-page #overview.tf-bleed [style*="repeat(3"] > div > p {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    max-width: none !important;
    font-size: 15px !important;
    line-height: 1.56 !important;
    color: #fff !important;
  }

  .case-final .cs-body [style*="minmax(0,200px)"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    padding: 16px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #f7f8fa !important;
    box-shadow: inset 0 0 0 1px rgba(43, 46, 54, 0.08);
  }

  .case-final .cs-body [style*="minmax(0,200px)"] > span {
    font: 500 16px/1.3 "Satoshi", sans-serif !important;
  }

  .case-final .cs-body [style*="minmax(0,200px)"] > p {
    margin: 0 !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    color: rgba(43, 46, 54, 0.8) !important;
  }

  .case-final .cs-body [style*="repeat(3,minmax(0,1fr)"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .case-final .cs-body [style*="repeat(3,minmax(0,1fr)"] > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 16px 18px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #f7f8fa !important;
    color: #2B2E36 !important;
    box-shadow: inset 0 0 0 1px rgba(43, 46, 54, 0.08);
  }

  .case-final .cs-body [style*="repeat(3,minmax(0,1fr)"] > div > span:first-child {
    margin-bottom: 0 !important;
  }

  .anda-page.case-final .anda-score__notes {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
    width: 100%;
    margin-top: 8px;
  }

  .anda-page.case-final .anda-score__notes > div {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 16px 0 0 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .case-final .cs-body [style*="grid-template-columns:265px"] > div:last-child {
    width: 100% !important;
    max-width: none !important;
    padding: 4px 0 0 !important;
    gap: 16px !important;
  }

  .case-final .cs-body [style*="grid-template-columns:265px"] > div:last-child span,
  .case-final .cs-body [style*="grid-template-columns:265px"] > div:last-child p {
    max-width: none !important;
  }

  .case-final .cs-body [style*="repeat(3,minmax(0,1fr)"] > div,
  .case-final .cs-body [style*="repeat(3,minmax(0,1fr)"] > div span {
    color: #2B2E36 !important;
  }

  .case-final .cs-body [style*="repeat(3,minmax(0,1fr)"] > div > div > span:first-child {
    display: inline-flex !important;
    align-self: flex-start;
    width: auto !important;
    padding: 5px 8px !important;
    border-radius: 4px !important;
    background: #2B2E36 !important;
    color: #fff !important;
    font: 500 12px/1 "Satoshi", sans-serif !important;
  }

  /* The callout and #roadmap are the same gray. Section margin is cleared
     globally, so they were flush. This margin is the white break. */
  body.anda-page.case-final .cs-body > div#roadmap {
    margin-top: 52px !important;
  }

  .anda-page .anda-order {
    margin-top: 28px !important;
  }

  .anda-page.case-final .cs-body .anda-tradeoff {
    margin: 0 0 20px !important;
    padding: 22px !important;
    border: 1.5px solid #2B2E36 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .anda-page.case-final .cs-body .anda-tradeoff > span:first-child {
    display: block !important;
    align-self: auto;
    width: auto !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #2B2E36 !important;
    font: 500 11px/1 "Satoshi", sans-serif !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
  }

  /* Terraform phone page, from the unlocked mobile handoff. */

  .terraform-page .cs-body h1 {
    letter-spacing: -0.015em !important;
  }

  .terraform-page .cs-body h2 {
    margin-top: 0 !important;
    font-size: 30px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  .terraform-page .terraform-locked__inner {
    gap: 0;
  }

  .terraform-page #terraform-locked {
    margin: 0 !important;
    padding: 0 !important;
  }

  .terraform-page .cs-body > .tf-problem {
    margin-top: var(--tf-s-128) !important;
    padding-top: 0 !important;
  }

  .terraform-page.case-final .cs-body > div#terraform-gate:not(:first-child) {
    margin-top: var(--tf-s-104) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .terraform-page .terraform-locked__inner > #workflow,
  .terraform-page .terraform-locked__inner > #audit {
    margin-top: var(--tf-s-96) !important;
    padding-top: 0 !important;
  }

  .terraform-page .terraform-locked__inner > #research,
  .terraform-page .terraform-locked__inner > #testing,
  .terraform-page .terraform-locked__inner > #details {
    margin-top: var(--tf-s-136) !important;
    padding-top: 0 !important;
  }

  .terraform-page .terraform-locked__inner > #directions {
    margin-top: var(--tf-s-136) !important;
    padding-top: 0 !important;
  }

  .terraform-page .terraform-locked__inner > #view-edit,
  .terraform-page .terraform-locked__inner > #system,
  .terraform-page .terraform-locked__inner > #rules {
    margin-top: var(--tf-s-144) !important;
    padding-top: 0 !important;
  }

  .terraform-page .terraform-locked__inner > #combined {
    margin-top: var(--tf-s-144) !important;
    padding-top: var(--tf-s-80) !important;
  }

  .terraform-page .terraform-locked__inner > #handoff {
    margin-top: var(--tf-s-144) !important;
    padding-top: var(--tf-s-64) !important;
  }

  .terraform-page .terraform-locked__inner > #outcome {
    margin-top: 0 !important;
    padding-top: var(--tf-s-80) !important;
  }

  .terraform-page .terraform-locked__inner > #reflection {
    margin-top: var(--tf-s-120) !important;
    padding-top: 0 !important;
  }

  .terraform-page .bf-cta {
    margin-top: 36px;
  }

  .terraform-page .bf-meta {
    margin-top: 36px;
    margin-bottom: 0;
    border-top: 1.5px solid #2B2E36;
    border-bottom: 1px solid rgba(43, 46, 54, 0.2);
  }

  .terraform-page .bf-meta__item {
    column-gap: 0;
    padding: 0;
    border-bottom: 0;
  }

  .terraform-page .bf-meta__label {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: rgba(43, 46, 54, 0.62);
  }

  .terraform-page .bf-meta__value,
  .terraform-page .bf-meta__list {
    font-size: 15px;
    line-height: 1.45;
  }

  .terraform-page #users {
    padding-top: 48px !important;
  }

  .terraform-page #users h2 {
    margin: 0 0 22px !important;
    font-size: 30px !important;
    line-height: 1.2 !important;
  }

  .terraform-page #users [style*="minmax(0,200px)"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(43, 46, 54, 0.22) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .terraform-page #users [style*="minmax(0,200px)"]:last-child {
    border-bottom: 0 !important;
  }

  .terraform-page #users [style*="minmax(0,200px)"] > span {
    font: 500 23px/1.22 "Satoshi", sans-serif !important;
    color: #2B2E36 !important;
  }

  .terraform-page #users [style*="minmax(0,200px)"] > p {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.56 !important;
    color: #2B2E36 !important;
  }

  .terraform-page #mapping.tf-bleed,
  .terraform-page #research.tf-bleed,
  .terraform-page #combining.tf-bleed {
    background: #fff !important;
    color: #2B2E36 !important;
  }

  .terraform-page #mapping [data-sec],
  .terraform-page #mapping span,
  .terraform-page #mapping p,
  .terraform-page #research span,
  .terraform-page #research p,
  .terraform-page #combining span,
  .terraform-page #combining p {
    color: #2B2E36 !important;
  }

  .terraform-page #pattern [style*="repeat(5"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 20px !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(43, 46, 54, 0.14) !important;
  }

  .terraform-page #pattern [style*="repeat(5"] > div {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    column-gap: 6px !important;
    row-gap: 4px !important;
    align-items: start !important;
    padding: 14px 0 !important;
    background: transparent !important;
    border-top: 1px solid rgba(43, 46, 54, 0.14) !important;
  }

  .terraform-page #pattern [style*="repeat(5"] > div > span:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0 !important;
    font: 500 18px/1.25 "Satoshi", sans-serif !important;
    color: #2B2E36 !important;
  }

  .terraform-page #pattern [style*="repeat(5"] > div > p {
    grid-column: 2;
    margin: 0 !important;
    font: 500 15px/1.35 "Satoshi", sans-serif !important;
    color: #2B2E36 !important;
  }

  .terraform-page #pattern [style*="repeat(5"] > div > span:last-child {
    grid-column: 2;
    font: 400 14px/1.5 "Satoshi", sans-serif !important;
    color: rgba(43, 46, 54, 0.7) !important;
  }

  .terraform-page #research [style*="minmax(0,1fr) minmax(0,1fr)"] {
    gap: 12px !important;
  }

  .terraform-page #research [style*="minmax(0,1fr) minmax(0,1fr)"] > div:last-child {
    margin-top: 0;
    padding: 18px 18px 20px;
    border-radius: 8px;
    background: #2B2E36;
  }

  .terraform-page #research [style*="minmax(0,1fr) minmax(0,1fr)"] > div:last-child > span {
    color: rgba(255, 255, 255, 0.75) !important;
    font: 700 10.5px/1 "Satoshi", sans-serif !important;
    letter-spacing: 0.16em !important;
  }

  .terraform-page #research [style*="border-radius:18px"] {
    margin-top: 10px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .terraform-page #research [style*="border-radius:18px"] p {
    margin: 0 !important;
    font: 500 20px/1.35 "Satoshi", sans-serif !important;
    color: #fff !important;
  }

  .terraform-page #explorations [style*="repeat(2"],
  .terraform-page #combining [style*="300px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  .terraform-page #explorations [style*="repeat(2"] > div > p {
    margin: 14px 0 0 !important;
    font: 400 16px/1.5 "Satoshi", sans-serif !important;
    color: #2B2E36 !important;
  }

  .terraform-page #testing > [style*="0.75fr"] {
    gap: 16px !important;
  }

  .terraform-page #testing [style*="gap:0"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 16px !important;
  }

  .terraform-page #testing [style*="gap:0"] > div {
    margin: 0 !important;
    padding: 16px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(43, 46, 54, 0.18) !important;
  }

  .terraform-page #testing [style*="gap:0"] > div > span {
    display: block !important;
    margin: 0 0 8px !important;
    font: 500 11px/1 "Satoshi", sans-serif !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #2B2E36 !important;
  }

  .terraform-page #testing [style*="gap:0"] > div > p {
    margin: 0 !important;
    font: 400 16px/1.5 "Satoshi", sans-serif !important;
    color: #2B2E36 !important;
  }

  .terraform-page #explorations .tf-shot-scroll,
  .terraform-page #combining .tf-shot-scroll,
  .terraform-page #refining .tf-refine__shot {
    display: flex !important;
    flex: none !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: calc(100% + (var(--m-gutter) * 2)) !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    margin-left: calc(var(--m-gutter) * -1) !important;
    margin-right: calc(var(--m-gutter) * -1) !important;
    padding: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #f1f4f7, #e9edf1) !important;
    box-shadow: none !important;
  }

  .terraform-page #explorations .tf-shot-scroll img,
  .terraform-page #combining .tf-shot-scroll img,
  .terraform-page #refining .tf-refine__shot img {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none;
    height: auto !important;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(43, 46, 54, 0.08), 0 10px 18px -8px rgba(43, 46, 54, 0.18);
  }

  .terraform-page .tf-workflow__frame {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    contain: inline-size;
  }

  .terraform-page #testing [style*="gap:1px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .terraform-page #testing [style*="gap:1px"] > div {
    padding: 16px 0 !important;
    border-top: 1px solid rgba(43, 46, 54, 0.14) !important;
    border-bottom: 0 !important;
    background: transparent !important;
  }

  .terraform-page #testing [style*="gap:1px"] > div:last-child {
    border-bottom: 1px solid rgba(43, 46, 54, 0.14) !important;
  }

  .terraform-page #testing [style*="gap:1px"] > div > span:first-child {
    font: 500 40px/1 "Satoshi", sans-serif !important;
    margin: 0 0 6px !important;
  }

  .terraform-page #refining [style*="flex-wrap:wrap"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
    margin-top: 28px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  .terraform-page #refining [style*="flex-wrap:wrap"] + [style*="flex-wrap:wrap"] {
    margin-top: 36px !important;
    padding-top: 28px !important;
    border-top: 1px solid rgba(43, 46, 54, 0.18) !important;
  }

  .terraform-page #refining [style*="flex-wrap:wrap"] > .tf-refine__shot {
    order: 2;
  }

  .terraform-page #refining [style*="flex-wrap:wrap"] > div:not(.tf-refine__shot) {
    order: 1;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  .terraform-page #refining h3 {
    font-size: 34px !important;
    line-height: 1.02 !important;
  }

  .terraform-page #refining [style*="letter-spacing:.2em"] {
    font: 500 24px/1.1 "Satoshi", sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  .terraform-page #refining [style*="letter-spacing:.2em"] > span {
    font: italic 400 17px/1 "Satoshi", sans-serif !important;
    color: rgba(43, 46, 54, 0.55) !important;
  }

  .terraform-page #outcome > p {
    margin: 24px 0 0 !important;
  }

  .terraform-page #outcome.tf-bleed {
    padding-bottom: 24px !important;
  }

  .terraform-page #outcome [style*="repeat(4"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 24px 0 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  .terraform-page #outcome [style*="repeat(4"] > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 22px 0 24px !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: transparent !important;
  }

  .terraform-page #outcome [style*="repeat(4"] > div > span:first-child {
    margin: 0 !important;
    font: 500 64px/0.92 "Satoshi", sans-serif !important;
    letter-spacing: -0.02em !important;
    color: #fff !important;
  }

  .terraform-page #outcome [style*="repeat(4"] > div > span:nth-child(2) {
    margin: 14px 0 0 !important;
    font: 500 17px/1.2 "Satoshi", sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #fff !important;
  }

  .terraform-page #outcome [style*="repeat(4"] > div > p {
    margin: 6px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }

  .terraform-page #learned p {
    font: 500 22px/1.35 "Satoshi", sans-serif !important;
    color: #2B2E36 !important;
  }

  .terraform-page .tf-scale.is-scale-tabs .tf-scale__stage {
    width: calc(100% + (var(--m-gutter) * 2));
    max-width: none;
    margin-inline: calc(var(--m-gutter) * -1);
    border-radius: 0;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .polaroid,
  .carousel__slide,
  .m-casebar__fill,
  .project__screen,
  .project__phones {
    transition: none !important;
  }

  .case-final .cs-strip {
    overflow-x: auto;
    touch-action: pan-x pan-y;
  }

  .case-final .cs-strip [data-preview-track],
  .case-final .cs-strip [data-showcase] {
    animation: none !important;
  }
}