:root {
  --ink: #181d2d;
  --muted: #5a5c75;
  --soft: #8f919b;
  --line: #efeeef;
  --dark: #171722;
  --white: #fff;
  --surface: #f4f5f7;
  --inverse-muted: #c0c2d4;
  --content-width: 1280px;
  --story-sidebar-width: 232px;
  --story-column-gap: 28px;
  --panel-radius: 24px;
  --panel-padding: 40px;
  --max: 1120px;
  --nav-scrolled-width: 690px;
  --radius: 20px;
  color: var(--ink);
  background: var(--white);
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--white); }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { display: block; max-width: 100%; }

.skip-link {
  position: fixed;
  z-index: 50;
  top: 12px;
  left: 50%;
  transform: translate(-50%, -150%);
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--dark);
  color: #fff;
  transition: transform 180ms ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  width: 100%;
  height: 80px;
  margin: 0;
  padding: 0;
}
.site-header--home { position: fixed; top: 0; left: 0; width: 100%; margin: 0; transform: none; }
.site-header--home .site-header__inner {
  width: min(100% - 32px, 1280px);
  border-color: transparent;
  background: linear-gradient(90deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 49.055%, rgba(255, 255, 255, .2));
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: min(100% - 32px, 760px);
  height: 54px;
  margin: 14px auto 0;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 40px;
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(20px);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: 181px;
  height: 48px;
  flex: 0 0 181px;
  min-width: 0;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark__avatar { display: block; width: 48px; height: 48px; flex: 0 0 48px; overflow: hidden; border-radius: 50%; }
.wordmark__avatar img { display: block; width: 181px; height: 48px; max-width: none; }
.wordmark__name { font-family: "Inter", sans-serif; font-size: 16px; font-weight: 500; line-height: 1.45; letter-spacing: -.08px; }
.site-nav { display: flex; align-items: center; gap: 40px; width: 373px; height: 48px; flex: 0 0 373px; }
.site-nav__links { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: 40px; min-width: 0; }
.site-nav__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 0;
  border-radius: 0;
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.08px;
  white-space: nowrap;
}
.site-nav__links a[data-nav="cases"] { width: 72px; }
.site-nav__links a[data-nav="about"] { width: 59px; }
.site-nav__links a[data-nav="cases"],
.site-nav__links a[data-nav="about"] { position: relative; transition: color 300ms ease; }
.site-nav__links a[data-nav="cases"]::after,
.site-nav__links a[data-nav="about"]::after {
  position: absolute;
  right: -4px;
  bottom: -5px;
  left: -4px;
  height: 1px;
  border-radius: 1px;
  background: var(--muted);
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms ease;
}
.site-nav__links a[data-nav="cases"]:hover,
.site-nav__links a[data-nav="cases"]:focus-visible,
.site-nav__links a[data-nav="about"]:hover,
.site-nav__links a[data-nav="about"]:focus-visible { color: var(--muted); }
.site-nav__links a[data-nav="cases"]:hover::after,
.site-nav__links a[data-nav="cases"]:focus-visible::after,
.site-nav__links a[data-nav="about"]:hover::after,
.site-nav__links a[data-nav="about"]:focus-visible::after { transform: scaleX(1); }
.site-nav__links a:hover { color: var(--ink); }
.site-nav .nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 48px;
  min-height: 48px;
  padding: 0 19px;
  border: 1px solid transparent;
  border-radius: 51.575px;
  background: var(--dark);
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.32px;
  white-space: nowrap;
  transition: gap 340ms ease, padding-right 340ms ease, background-color 340ms ease, border-color 340ms ease, color 340ms ease;
}
.site-nav .nav-pill:hover, .site-nav .nav-pill:focus-visible { gap: 8px; padding-right: 17px; border-color: #171722; background: rgba(255, 255, 255, .9); color: #171722; }
.site-nav .nav-pill__label { display: block; transition: transform 340ms ease; }
.site-nav .nav-pill:hover .nav-pill__label, .site-nav .nav-pill:focus-visible .nav-pill__label { transform: translateX(-2px); }
.site-nav .nav-pill__arrow { display: inline-flex; flex: 0 0 auto; align-items: center; width: 0; height: 22px; overflow: hidden; opacity: 0; transition: width 340ms ease, opacity 240ms ease; }
.site-nav .nav-pill .button-arrow { display: block; flex: 0 0 22px; width: 22px; height: 22px; transform: translateX(10px); transition: transform 340ms ease, filter 340ms ease; }
.site-nav .nav-pill:hover .nav-pill__arrow, .site-nav .nav-pill:focus-visible .nav-pill__arrow { width: 22px; opacity: 1; }
.site-nav .nav-pill:hover .button-arrow, .site-nav .nav-pill:focus-visible .button-arrow { filter: brightness(0); transform: translateX(0); }
.site-header--case-home .site-header__case-about-desktop { display: none; }
.site-header--case-home .site-header__case-about-responsive { display: inline; }

main { overflow: clip; }
.hero {
  position: relative;
  height: 449px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 159px 80px 12px;
  text-align: left;
  isolation: isolate;
}
.hero__content { display: flex; align-items: flex-end; gap: 80px; width: min(100%, 1280px); margin: 0 auto; }
.hero__text { display: flex; flex: 0 0 942px; flex-direction: column; gap: 24px; min-width: 0; }
.hero__decor {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 700px;
  pointer-events: none;
}
.hero__decor img { position: absolute; max-width: none; pointer-events: none; }
.hero__decor-one { width: 1203px; height: 1145px; top: -325px; left: 50%; transform: translateX(-50%); }
.hero__decor-two { width: 2018px; height: 1599px; top: -449px; left: 50%; transform: translateX(-50%); }
.hero__decor-three { width: 1745px; height: 1493px; top: -570px; left: calc(50% - 605px); }
.hero__decor-four { width: 751px; height: 715px; top: -111px; left: calc(50% - 710px); }
.hero__eyebrow {
  margin: 0;
  color: var(--muted);
  font-family: "Work Sans", sans-serif;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -.036em;
}
.hero h1 {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-family: "Work Sans", sans-serif;
  font-size: 76px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -5.32px;
}
.hero h1 em { font-style: italic; font-weight: 400; }
.hero .social-row { display: flex; flex: 0 0 258px; align-items: flex-start; gap: 24px; width: 258px; margin: 0; }
.hero .social-link { width: 70px; height: 70px; }
.hero .social-link img { width: 32px; height: 32px; }
.social-link {
  display: grid;
  position: relative;
  width: 32px;
  height: 32px;
  place-items: center;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}
.social-link img { width: 32px; height: 32px; object-fit: contain; transition: opacity 180ms ease; }
.social-link--dribbble { --social-brand: #ea4c89; --social-mask: url("/assets/social-dribbble-mask.svg"); }
.social-link--linkedin { --social-brand: #0a66c2; --social-mask: url("/assets/social-linkedin-mask.svg"); }
.social-link--behance { --social-brand: #1769ff; --social-mask: url("/assets/social-behance-mask.svg"); }
.social-link::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  background-color: var(--social-brand);
  -webkit-mask: var(--social-mask) center / contain no-repeat;
  mask: var(--social-mask) center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease;
  content: "";
}
.social-link:hover, .social-link:focus-visible { transform: translateY(-2px); }
.social-link:hover img, .social-link:focus-visible img { opacity: 0; }
.social-link:hover::after, .social-link:focus-visible::after { opacity: 1; }

.section { width: min(100%, 1500px); margin: 0 auto; padding-right: 80px; padding-left: 80px; }
.section-heading {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--muted);
  font-family: "Work Sans", sans-serif;
  font-size: 40px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -1.8px;
  text-align: left;
}
.work-section, .identity-section, .behance-section { width: min(100%, 1280px); padding-right: 0; padding-left: 0; }
.work-section { padding-top: 120px; padding-bottom: 0; }
.work-section > .section-heading { height: 79px; margin: 0 0 80px; }
.work-social-slot { display: none; }
.section-title { display: flex; align-items: center; gap: 16px; }
.work-section .section-title, .identity-section .section-title, .behance-section .section-title { text-transform: uppercase; }
.section-marker { display: block; position: relative; width: 15px; height: 40.5px; flex: 0 0 15px; }
.section-marker::before { position: absolute; top: 2px; left: 7px; width: 1.5px; height: 37px; border-radius: 2px; background: currentColor; content: ""; transform: rotate(19deg); }
.project-stack { display: grid; gap: 80px; }
.project-card {
  position: relative;
  display: grid;
  width: min(100%, 1280px);
  margin-right: auto;
  margin-left: auto;
  grid-template-columns: 640px minmax(0, 584px);
  column-gap: 56px;
  align-items: center;
  justify-content: start;
  height: 498px;
  min-height: 498px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: #fff;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.project-card::after { position: absolute; z-index: 2; inset: 0; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; content: ""; transition: border-color 220ms ease; }
.project-card:hover, .project-card:focus-visible { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(24, 29, 45, .08); }
.project-card:hover::after, .project-card:focus-visible::after { border-color: #d5d6de; }
.project-card__art { position: relative; width: 640px; height: 498px; min-height: 498px; overflow: hidden; }
.project-card__art--fintech { background: linear-gradient(145deg, #fffbc6 0%, #ecf1d9 100%); }
.project-card__art--operations { background: linear-gradient(145deg, #c7e0fd 0%, #509de9 100%); }
.project-card__art--analytics { background: linear-gradient(145deg, #dce0e4 0%, #b8cee7 100%); }
.project-card__art--identity { background: linear-gradient(145deg, #e9f2f0 0%, #f4f5f4 100%); }
.project-card__art picture { position: absolute; z-index: 1; inset: 0; display: block; }
.project-card__art img { width: 100%; height: 100%; object-fit: cover; }
.project-card__body { display: flex; flex-direction: column; justify-content: space-between; width: 100%; min-width: 0; height: 320px; padding: 0 94px 0 0; }
.project-card__body > div:first-child { display: flex; flex-direction: column; gap: 24px; }
.project-card__body h3 { max-width: 490px; margin: 0; color: var(--ink); font-family: "Work Sans", sans-serif; font-size: 40px; font-weight: 400; line-height: 1.05; letter-spacing: -.045em; }
.project-card__body p { max-width: 490px; margin: 0; color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 14px; line-height: 1.5; letter-spacing: -.28px; }
.project-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--muted); border-radius: 8px; color: var(--muted); font-family: "Work Sans", sans-serif; font-size: 12px; font-weight: 500; line-height: 1.1; white-space: nowrap; }
.project-card .tag { padding-right: 12px; padding-left: 12px; letter-spacing: -.54px; }
.project-card--text-first { grid-template-columns: 584px 640px; }
.project-card--text-first .project-card__art { grid-column: 2; grid-row: 1; }
.project-card--text-first .project-card__body { grid-column: 1; grid-row: 1; padding: 0 38px 0 56px; }
.project-card--identity { grid-template-columns: 640px 544px; padding-right: 40px; }
.project-card--identity .project-card__body { padding-right: 54px; }
.project-card__block-brand { position: relative; width: 120px; height: 11px; flex: none; }
.project-card__block-brand img { position: absolute; max-width: none; }
.project-card__block-brand img:first-child { inset: 0 0 1.58% 28.22%; width: 71.78%; height: 98.42%; }
.project-card__block-brand img:last-child { inset: .12% 80.34% 2.83% 0; width: 19.66%; height: 97.05%; }
.project-card__portal-brand { display: block; width: 119px; height: 22.922px; max-width: none; object-fit: contain; }
.project-card__stark-brand { position: relative; width: 50px; height: 39.375px; }
.project-card__stark-brand img:first-child { position: absolute; top: 0; left: 15.38px; width: 16.739px; height: 24.072px; }
.project-card__stark-brand img:last-child { position: absolute; top: 30.65px; left: 0; width: 50px; height: 8.725px; }
.subsection-heading { display: flex; align-items: center; margin: 0; color: var(--muted); font-family: "Work Sans", sans-serif; font-size: 40px; font-style: italic; font-weight: 400; line-height: 1.05; letter-spacing: -1.8px; text-align: left; }
.identity-section { padding: 120px 0 0; }
.identity-section > .subsection-heading { height: 42px; margin: 0 0 80px; }
.behance-section { padding: 200px 0 0; }
.behance-section > .subsection-heading { height: 42px; margin: 0 0 80px; }
.behance-section > .subsection-heading .section-title { justify-content: flex-end; gap: 28px; width: 100%; white-space: nowrap; }
.behance-grid { display: grid; gap: 0; }
.behance-card { display: grid; width: 100%; min-height: 520px; grid-template-columns: 560px 560px; align-items: start; justify-content: center; gap: 0; padding: 0 80px 100px; }
.behance-card:last-child { min-height: 540px; padding-bottom: 120px; }
.behance-card--reverse .behance-art { order: -1; }
.behance-copy { display: flex; flex-direction: column; align-items: flex-start; width: 560px; height: 420px; gap: 0; padding: 0; }
.behance-copy h3 { margin: 0; font-family: "Work Sans", sans-serif; font-size: 32px; font-weight: 400; line-height: 1.05; letter-spacing: -1.44px; }
.behance-copy p { width: 488px; max-width: 100%; margin: 24px 0 56px; font-family: "Work Sans", sans-serif; font-size: 18px; line-height: 1.6; letter-spacing: -.81px; }
.behance-card--reverse .behance-copy { align-items: flex-end; justify-content: flex-end; text-align: right; }
.behance-card--reverse .behance-copy p { margin: 24px 0 32px; }
.dark-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; min-height: 56px; padding: 0 29px; border: 1px solid transparent; border-radius: 88px; background: #5a5c75; color: #fff; font-family: "DM Sans", sans-serif; font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: -.4px; white-space: nowrap; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
.dark-button:hover, .dark-button:focus-visible { border-color: #181d2d; background: #fff; color: #171722; }
.dark-button--light { background: var(--dark); }
.button-arrow { display: block; flex: 0 0 28px; width: 28px; height: 28px; object-fit: contain; transition: filter 180ms ease; }
.dark-button--light:hover .button-arrow, .dark-button--light:focus-visible .button-arrow { filter: brightness(0); }
.behance-copy .dark-button { height: 63px; min-height: 63px; padding: 0 30px; }
.behance-card--reverse .behance-copy .dark-button { align-self: flex-end; }
.behance-art { display: block; width: 560px; height: 420px; max-width: 100%; aspect-ratio: 560 / 420; border-radius: 20px; background: #181818; overflow: hidden; }
.behance-art picture { display: block; width: 100%; height: 100%; }
.behance-art img { width: 100%; height: 100%; object-fit: cover; opacity: .94; }
@media (min-width: 816px) {
  [data-route="home"] .behance-copy .dark-button {
    border-color: #181d2d;
    background: #fff;
    color: #171722;
  }
  [data-route="home"] .behance-copy .dark-button .button-arrow { filter: brightness(0); }
  [data-route="home"] .behance-copy .dark-button:hover,
  [data-route="home"] .behance-copy .dark-button:focus-visible {
    border-color: transparent;
    background: var(--dark);
    color: #fff;
  }
  [data-route="home"] .behance-copy .dark-button:hover .button-arrow,
  [data-route="home"] .behance-copy .dark-button:focus-visible .button-arrow { filter: none; }
}
@media (min-width: 1296px) {
  [data-route="home"] .behance-section {
    padding-bottom: 120px;
  }
  [data-route="home"] .behance-card {
    display: flex;
    width: 100%;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
  }
  [data-route="home"] .behance-card:last-child {
    min-height: 0;
    padding-bottom: 0;
  }
  [data-route="home"] .behance-card:nth-child(2) {
    margin-top: 420px;
  }
  [data-route="home"] .behance-grid {
    grid-template-columns: repeat(2, minmax(0, 560px));
    justify-content: space-between;
    align-items: start;
    gap: 0;
  }
  [data-route="home"] .behance-art {
    order: -1;
    width: 100%;
    height: auto;
    max-width: 560px;
    aspect-ratio: 4 / 3;
  }
  [data-route="home"] .behance-copy {
    align-items: flex-start;
    width: 100%;
    height: auto;
    padding-top: 32px;
    text-align: left;
  }
  [data-route="home"] .behance-copy h3 {
    font-size: 40px;
    letter-spacing: -.045em;
  }
  [data-route="home"] .behance-copy p {
    width: 100%;
    margin: 24px 0 32px;
  }
  [data-route="home"] .behance-card--reverse .behance-copy {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }
  [data-route="home"] .behance-card--reverse .behance-copy p {
    width: 100%;
    margin: 24px 0 32px;
  }
  [data-route="home"] .behance-card--reverse .behance-copy .dark-button {
    align-self: flex-start;
  }
}

/* Case-study pages */
.case-page { padding: 16px 0 120px; }
.case-hero { width: min(100% - 160px, 1120px); margin: 0 auto 112px; text-align: center; }
.case-hero__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1120 / 605;
  margin: 0 auto 96px;
  overflow: hidden;
  border-radius: 22px;
  background: #f2f3f5;
}
.case-hero__visual picture { position: absolute; z-index: 0; inset: 0; display: block; }
.case-hero__showcase { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.case-hero__visual img { position: absolute; max-width: none; }
.case-hero__background { inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.case-hero__foreground { z-index: 1; top: 10%; left: 50%; width: 75%; height: 80%; object-fit: contain; transform: translateX(-50%); }
.case-page--block-earner .case-hero__visual { background-color: #fffcfc; }
.case-page--block-earner .case-hero__background { opacity: .4; }
.case-page--crm .case-hero__visual { background: linear-gradient(-15.26843deg, #a9d3f3 8.1073%, #fff 94.117%); }
.case-page--stark-shipping .case-hero__visual { background: linear-gradient(229.9761deg, #fcebbd 20.657%, #fcfcfc 46.343%, #c3c9d2 109.58%); }
.case-page--block-earner .case-hero__foreground { top: 10.74%; width: 75.36%; height: 78.51%; }
.case-page--block-earner .case-hero h1, .case-page--stark-shipping .case-hero h1 { color: var(--muted); }
.case-page--crm .case-hero__brand { width: 162px; max-width: 100%; height: 31px; margin-bottom: 40px; }
.case-page--crm .case-hero__text, .case-page--stark-shipping .case-hero__text { max-width: 778px; }
.case-page--crm .case-hero h1, .case-page--stark-shipping .case-hero h1 { margin-bottom: 40px; }
.case-hero__responsive { display: none; }
.case-hero__mobile, .mobile-copy { display: none; }
.case-labels > .case-hero__desktop { display: contents; }
.case-labels > .case-hero__responsive { display: none; }
.case-hero__brand { width: auto; max-width: 210px; height: 32px; margin: 0 auto 34px; object-fit: contain; }
.case-hero__brand--block { position: relative; display: block; width: 151px; height: 14px; max-width: none; max-height: none; }
.case-hero__brand--block img { position: absolute; max-width: none; }
.case-hero__brand--block img:first-child { inset: 0 0 1.58% 28.22%; width: 71.78%; height: 98.42%; }
.case-hero__brand--block img:last-child { inset: .12% 80.34% 2.83% 0; width: 19.66%; height: 97.05%; }
.case-hero__brand--stark { position: relative; display: block; width: 80px; height: 63px; max-width: none; max-height: none; }
.case-hero__brand--stark img { position: absolute; max-width: none; }
.case-hero__brand--stark img:first-child { inset: 0 auto auto 30.76%; width: 33.48%; height: 61.13%; }
.case-hero__brand--stark img:last-child { inset: 77.84% auto auto 0; width: 100%; height: 22.16%; }
.case-hero__text { max-width: 566px; margin: 0 auto; }
.case-hero h1 {
  margin: 0 0 34px;
  color: var(--ink);
  font-family: "Work Sans", sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -2px;
}
.case-labels { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.case-hero .tag { min-height: 38px; padding: 0 12px; border: 0; border-radius: 8px; background: #f4f5f7; color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 400; }

.case-about {
  width: min(100% - 32px, 1348px);
  min-height: 318px;
  position: relative;
  isolation: isolate;
  margin: 0 auto;
  color: #fff;
  background: #25282f var(--lazy-background, none) center / cover no-repeat;
}
.case-about::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--lazy-background, none) center / cover no-repeat; }
.case-about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  width: min(100% - 160px, 1120px);
  margin: 0 auto;
  padding: 84px 0 78px;
}
.case-about h2 { margin: 0; font-family: "Work Sans", sans-serif; font-size: clamp(34px, 4vw, 44px); font-weight: 400; line-height: 1; letter-spacing: -.06em; }
.case-about__aside { margin: 0 0 24px; }
.case-about__aside:last-child { margin-bottom: 0; }
.case-about__aside h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-family: "Work Sans", sans-serif; font-size: 24px; font-weight: 400; line-height: 1.1; }
.case-about__aside h3 img { width: 28px; height: 28px; object-fit: contain; }
.case-about__challenge-icon { width: 22px; height: 22px; flex: 0 0 22px; color: inherit; }
.case-about__aside p { max-width: 540px; margin: 0; color: #c0c2d4; font-family: "Work Sans", sans-serif; font-size: 18px; line-height: 1.6; }
.case-page--block-earner .case-about { width: 100%; min-height: 319px; margin: 0; overflow: hidden; background: linear-gradient(220.7821deg, #171722 16.07%, #3d3d3d 100%); }
.case-page--block-earner .case-about::before { top: -28.85%; height: 161.51%; background-size: 100% 100%; opacity: .4; }
.case-page--block-earner .case-about__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(100% - 160px, 1120px); padding: 100px 0; }
.case-page--block-earner .case-about h2 { font-size: 32px; font-weight: 400; line-height: 1.05; letter-spacing: -1.44px; }
.case-page--block-earner .case-sphere-field { display: none; }
.case-page--crm .case-about, .case-page--stark-shipping .case-about { width: 100%; min-height: 471px; margin: 0; padding: 100px 0; overflow: hidden; background: linear-gradient(25.35134deg, #171722 49.545%, #3fa6f5 106.7%); }
.case-page--crm .case-about::before { opacity: .2; }
.case-page--stark-shipping .case-about { background: linear-gradient(220.6275deg, #171722 50.868%, #57637a 101.79%); }
.case-page--stark-shipping .case-about::before { opacity: .3; }
.case-page--crm .case-about__inner, .case-page--stark-shipping .case-about__inner { position: relative; padding: 0; }
.case-page--crm .case-about__inner { grid-template-columns: minmax(0, 1fr) 535px; }
.case-page--stark-shipping .case-about__inner { grid-template-columns: minmax(0, 1fr) 652px; gap: 0; }
.case-page--crm .case-about h2, .case-page--stark-shipping .case-about h2 { margin: 0; font-size: 32px; line-height: 1.05; letter-spacing: -1.44px; }
.case-page--crm .case-about__aside, .case-page--stark-shipping .case-about__aside { margin: 0 0 50px; }
.case-page--crm .case-about__aside:last-child, .case-page--stark-shipping .case-about__aside:last-child { margin-bottom: 0; }

.case-section { padding: 0 0 80px; }
.case-section__inner { width: min(100% - 160px, 1120px); margin: 0 auto; }
.case-section__title { margin: 0 0 70px; color: var(--ink); font-family: "Work Sans", sans-serif; font-size: 32px; font-weight: 400; line-height: 1.05; letter-spacing: -1.44px; }
.case-overview-section { padding-top: 120px; padding-bottom: 180px; }
.meta-grid { display: grid; grid-template-columns: minmax(0, .68fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.meta-grid__group { min-width: 0; padding: 40px; border: 1px solid var(--line); border-radius: 24px; }
.meta-grid__group--secondary { background: linear-gradient(135deg, #f4f5f7, #fff); }
.meta-grid__group dl { display: flex; flex-direction: column; gap: 32px; margin: 0; }
.meta-item { min-height: 0; padding: 0; border: 0; border-radius: 0; }
.meta-item dt { margin-bottom: 4px; color: var(--ink); font-family: "Work Sans", sans-serif; font-size: 20px; font-weight: 400; line-height: 1.6; letter-spacing: -.9px; }
.meta-item__icon-box, .meta-item__icon { display: none; }
.meta-item dd { max-width: 100%; margin: 0; color: var(--muted); font-family: "Work Sans", sans-serif; font-size: 18px; line-height: 1.6; }
.responsive-copy { display: none; }

.case-process-section { padding-top: 0; padding-bottom: 80px; }
.case-process-section .case-section__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 652px); gap: 56px; }
.case-process-section .case-section__title { margin: 0; }
.process-grid { display: grid; gap: 28px; }
.process-card { padding: 0; }
.process-card strong { display: block; margin-bottom: 4px; color: var(--ink); font-family: "Work Sans", sans-serif; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -.45px; }
.process-card p { max-width: 720px; margin: 0; color: var(--muted); font-family: "Work Sans", sans-serif; font-size: 18px; line-height: 1.6; }

.contribution-section { padding: 0 0 100px; }
.contribution-section__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 652px); gap: 56px; width: min(100% - 160px, 1120px); margin: 0 auto; }
.contribution-section h2 { margin: 0; color: var(--ink); font-family: "Work Sans", sans-serif; font-size: 32px; font-weight: 400; line-height: 1.05; letter-spacing: -1.44px; }
.contribution-section p { max-width: 652px; margin: 0 0 22px; color: var(--muted); font-family: "Work Sans", sans-serif; font-size: 18px; line-height: 1.6; }
.case-page--visual-identity .case-hero--visual-only { margin-bottom: 0; }
.case-page--visual-identity .case-hero--visual-only .case-hero__visual { margin-bottom: 0; }
.case-page--visual-identity .contribution-section { padding: 120px 80px 100px; background: #fff; }
.case-page--visual-identity .contribution-section__inner { display: flex; flex-direction: column; gap: 70px; width: min(100%, 1120px); }
.case-page--visual-identity .contribution-section h2 { width: 283px; font-size: 40px; line-height: 42px; letter-spacing: -1.44px; }
.case-page--visual-identity .contribution-section p { max-width: none; margin: 0; color: #181d2d; font-family: "Work Sans", sans-serif; }
.case-page--visual-identity .contribution-grid { display: grid; grid-template-columns: 452px 253px minmax(0, 1fr); grid-template-rows: 170px 170px; gap: 16px; width: 100%; }
.case-page--visual-identity .contribution-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; padding: 47px 39px; overflow: hidden; border: 1px solid #efeeef; border-radius: 24px; }
.case-page--visual-identity .contribution-card img { display: block; width: 32px; height: 32px; flex: 0 0 32px; }
.case-page--visual-identity .contribution-card p { color: #181d2d; font-size: 20px; line-height: 1.6; letter-spacing: -.9px; }
.case-page--visual-identity .contribution-card--1 { grid-column: 1; grid-row: 1 / span 2; background: #fff; }
.case-page--visual-identity .contribution-card--1 p { width: 325px; max-width: 100%; line-height: 1.6; }
.case-page--visual-identity .contribution-card--2 { grid-column: 2 / span 2; grid-row: 1; background: linear-gradient(193.16deg, #f4f5f7 25.647%, #fff 80.665%); }
.case-page--visual-identity .contribution-card--2 p { line-height: 1.4; white-space: nowrap; }
.case-page--visual-identity .contribution-card--3 { grid-column: 2; grid-row: 2; background: #fff; }
.case-page--visual-identity .contribution-card--3 p,
.case-page--visual-identity .contribution-card--4 p { line-height: 1.4; }
.case-page--visual-identity .contribution-card--3 p,
.case-page--visual-identity .contribution-card--4 p { white-space: nowrap; }
.case-page--visual-identity .contribution-card--4 { grid-column: 3; grid-row: 2; background: linear-gradient(238.66deg, #f4f5f7 39.361%, #fff 91.314%); }

.case-stories-section { padding-bottom: 0; }
.story { padding: 0 0 100px; }
.story__header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 652px); gap: 56px; align-items: start; }
.story__header h3 { margin: 0 0 16px; color: var(--ink); font-family: "Work Sans", sans-serif; font-size: 32px; font-weight: 400; line-height: 1.05; letter-spacing: -1.44px; }
.story__header > div:first-child > p { margin: 0; color: var(--muted); font-family: "Work Sans", sans-serif; font-size: 18px; line-height: 1.6; letter-spacing: -.81px; }
.story__body h4 { margin: 0 0 7px; color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.3; }
.story__body h4:not(:first-child) { margin-top: 26px; }
.story__body p { max-width: 652px; margin: 0 0 18px; color: var(--muted); font-family: "Work Sans", sans-serif; font-size: 18px; line-height: 1.6; }
.story__intro-desktop, .case-process-media { display: none; }
.state-labels { display: flex; flex-wrap: wrap; gap: 10px; margin: 48px 0 0; }
.state-labels span { padding: 10px 14px; border: 1px solid #e0e0e5; border-radius: 999px; color: var(--muted); font-size: 14px; }
.image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 80px; }
.image-grid--stack { grid-template-columns: 1fr; }
.image-frame { min-width: 0; margin: 0; overflow: hidden; border-radius: 20px; background: #f1f2f3; }
.image-frame picture { display: block; width: 100%; }
.image-frame img { width: 100%; height: auto; object-fit: contain; }
.image-frame--count-1, .image-frame--count-3:last-child, .image-frame--count-4:last-child { grid-column: 1 / -1; }
.video-frame { position: relative; aspect-ratio: 1120 / 747; margin: 42px 0 0; overflow: hidden; border-radius: 20px; background: #171722; }
.video-frame iframe { width: 100%; height: 100%; border: 0; }

.case-behance { position: relative; overflow: hidden; padding: 100px 80px; color: #fff; background: linear-gradient(233deg, #171722 16%, #3d3d3d 100%); }
.case-behance::before { position: absolute; inset: 0; background: var(--lazy-background, none) center / cover no-repeat; content: ""; opacity: .4; }
.case-behance__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 505px; gap: 40px; width: min(100%, 1120px); min-height: 360px; margin: 0 auto; }
.case-behance__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 60px; padding: 60px 0; }
.case-behance__copy h2 { margin: 0; color: #fff; font-family: "Work Sans", sans-serif; font-size: 40px; font-weight: 400; line-height: 1.05; letter-spacing: -2px; }
.case-behance__art { min-height: 360px; overflow: hidden; border: 1px solid #474747; border-radius: 20px; background: #000; }
.case-behance__art img { width: 100%; height: 100%; object-fit: cover; }
.more-projects { padding: 100px 0 0; border-top: 1px solid var(--line); }
.more-projects h2 { margin: 0 0 70px; color: var(--muted); font-family: "Work Sans", sans-serif; font-size: 32px; font-weight: 400; letter-spacing: -1.44px; }
.more-projects__list { display: grid; gap: 30px; }
.more-project { display: grid; grid-template-columns: minmax(0, 452px) minmax(0, 1fr); gap: 40px; align-items: center; min-height: 320px; padding-right: 40px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; transition: transform 180ms ease, box-shadow 180ms ease; }
.more-project:hover, .more-project:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(24,29,45,.08); }
.more-project__art { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 452 / 340; overflow: hidden; border-radius: 20px; background: #f4f5f7; }
.more-project__art picture { display: block; width: 100%; height: 100%; }
.more-project__art img { width: 100%; height: 100%; object-fit: cover; }
.more-project__art--fintech { background: linear-gradient(145deg, #fffbc6, #ecf1d9); }
.more-project__art--operations { background: linear-gradient(145deg, #c7e0fd, #509de9); }
.more-project__art--analytics { background: linear-gradient(145deg, #dce0e4, #b8cee7); }
.more-project__art--identity { background: linear-gradient(145deg, #e9f2f0, #f4f5f4); }
.more-project__body { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.more-project__brand { display: block; width: auto; max-width: 250px; max-height: 32px; object-fit: contain; }
.more-project__title { color: var(--ink); font-family: "Work Sans", sans-serif; font-size: 32px; line-height: 1.05; letter-spacing: -1.44px; }
.more-project__tags { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-family: "Work Sans", sans-serif; font-size: 12px; line-height: 1.1; }

/* About */
/* About */
.about-page { width: min(100% - 40px, 1140px); margin: 0 auto; padding: 94px 0 110px; }
.about-layout { display: grid; grid-template-columns: 289px minmax(0, 1fr); gap: 100px; align-items: start; }
.about-copy { padding-top: 0; }
.about-copy p { margin: 0 0 28px; color: var(--muted); font-family: "Work Sans", sans-serif; font-size: 18px; line-height: 1.6; letter-spacing: -.81px; }
.about-portrait { width: 289px; height: 298px; overflow: hidden; border-radius: 22px; background: #f2f4f4; }
.about-portrait picture { display: block; width: 100%; height: 100%; }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.project-card__brands, .more-project__brands { display: flex; align-items: center; gap: 26px; }
.project-card__brands { min-height: 22px; gap: 25.856px; }
.project-card__brands img, .more-project__brands img { display: block; width: auto; max-width: 108px; height: 22px; object-fit: contain; }
.project-card__brands img:first-child, .more-project__brands img:first-child { height: 10px; }
.project-card__brands img:nth-child(2), .more-project__brands img:nth-child(2) { height: 18px; }
.project-card__brands img:nth-child(3), .more-project__brands img:nth-child(3) { height: 22px; }
.project-card__brands img:first-child { height: 9.795px; }
.project-card__brands img:nth-child(2) { height: 17.918px; }
.desktop-only { display: inline; }
.responsive-only { display: none; }
.outline-button { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border: 1px solid #a7a8b0; border-radius: 999px; font-size: 15px; transition: background 180ms ease, border-color 180ms ease; }
.outline-button:hover, .outline-button:focus-visible { border-color: var(--ink); background: #f3f3f6; }

:focus-visible { outline: 3px solid #8e9ff1; outline-offset: 4px; }

@media (max-width: 815px) {
  .site-header { height: 85px; }
  .site-header__inner { width: min(100% - 16px, 612px); height: 53px; margin-top: 16px; }
  .site-header--home { top: 0; margin: 0; }
  .site-header--home .site-header__inner { margin-top: 16px; }
  .wordmark, .wordmark__avatar { height: 47px; }
  .wordmark__avatar { width: 47px; flex-basis: 47px; }
  .wordmark__avatar img { width: 177px; height: 47px; }
  .site-nav { width: auto; flex: 0 0 auto; }
  .site-nav__links { flex: 0 0 auto; }
  .hero { min-height: 480px; padding: 120px 24px 20px; gap: 20px; }
  .hero__eyebrow { margin-bottom: 0; font-size: 24px; }
  .hero h1 { max-width: 752px; font-size: 72px; }
  .social-row { margin-top: 0; }
  .section { padding-right: 24px; padding-left: 24px; }
  .work-section > .section-heading { padding: 40px 0 80px; }
  .desktop-only { display: none; }
  .responsive-only { display: inline; }
  .project-card { display: flex; flex-direction: column; gap: 60px; min-height: 0; padding: 40px 50px 70px 40px; border: 0; border-radius: 20px; background: #f9f9f9; }
  .project-card::after { display: none; }
  .project-card__art { width: 100%; height: auto; min-height: 0; aspect-ratio: 672 / 400; border: 1px solid var(--line); border-radius: 20px; }
  .project-card__art--fintech { aspect-ratio: 662 / 400; }
  .project-card__body { display: flex; width: 100%; min-height: 0; height: auto; gap: 54px; padding: 0; }
  .project-card__body > div:first-child { gap: 24px; }
  .project-card__body h3 { max-width: none; font-size: 32px; }
  .project-card__body p { max-width: none; font-family: "Work Sans", sans-serif; font-size: 18px; line-height: 1.6; letter-spacing: -.81px; }
  .project-stack { gap: 24px; }
  .work-section, .identity-section { padding-bottom: 0; }
  .identity-section > .subsection-heading, .behance-section > .subsection-heading { padding: 80px 0; }
  .behance-card { grid-template-columns: 1fr; gap: 56px; min-height: 0; padding: 40px 24px 70px; }
  .behance-card--reverse .behance-art { order: 0; }
  .behance-art { width: 100%; height: auto; min-height: 0; max-width: 376px; }
  .behance-art--product { aspect-ratio: 376 / 293; }
  .behance-art--guard { aspect-ratio: 376 / 291; }
  .case-page { padding-top: 25px; }
  .case-page--block-earner { padding-top: 57px; }
  .case-hero { width: 100%; margin-bottom: 80px; }
  .case-hero__visual { min-height: 0; margin-bottom: 80px; border-radius: 0; aspect-ratio: 800 / 440; }
  .case-page--block-earner .case-hero__visual { aspect-ratio: 800 / 408; }
  .case-page--block-earner .case-hero__brand { margin-bottom: 28px; }
  .case-page--stark-shipping .case-hero__brand { margin-bottom: 28px; }
  .case-page--block-earner .case-hero h1,
  .case-page--crm .case-hero h1,
  .case-page--stark-shipping .case-hero h1 { line-height: 1.05; }
  .case-page--block-earner .case-hero h1 { margin-bottom: 28px; }
  .case-hero__visual { border-radius: 20px; }
  .case-hero__visual img { min-height: 0; }
  .case-hero__foreground { width: 88%; height: 82%; top: 9%; }
  .case-page--block-earner .case-hero__foreground { top: 11.15%; width: 70.5%; height: 77.7%; }
  .case-page--crm .case-hero__brand { width: 244px; height: 47px; margin-bottom: 28px; }
  .case-page--stark-shipping .case-hero__brand--stark { width: 80px; height: 63px; max-width: none; max-height: none; }
  .case-page--crm .case-hero h1, .case-page--stark-shipping .case-hero h1 { margin-bottom: 28px; }
  .case-page--crm .case-hero__text, .case-page--stark-shipping .case-hero__text { max-width: 566px; }
  .case-hero__responsive { display: inline; }
  .case-hero__desktop { display: none; }
  .case-labels > .case-hero__desktop { display: none; }
  .case-labels > .case-hero__responsive { display: contents; }
  .case-about__inner, .case-process-section .case-section__inner, .contribution-section__inner, .story__header, .about-layout { grid-template-columns: 1fr; gap: 34px; }
  .case-page--visual-identity .contribution-section { padding: 79px 40px 80px; border-top: 1px solid #efeeef; }
  .case-page--visual-identity .contribution-section__inner { display: flex; flex-direction: column; gap: 70px; width: 100%; }
  .case-page--visual-identity .contribution-section h2 { width: 241px; font-size: 34px; line-height: 36px; }
  .case-page--visual-identity .contribution-grid { grid-template-columns: 452px minmax(0, 1fr); grid-template-rows: 252px 168px; gap: 16px; }
  .case-page--visual-identity .contribution-card { padding: 47px 39px; }
  .case-page--visual-identity .contribution-card { border-color: #e4e2f0; }
  .case-page--visual-identity .contribution-card--1 { grid-column: 1; grid-row: 1; height: 252px; align-self: start; background: linear-gradient(144.54deg, #f4f5f7 12.953%, #fff 92.626%); }
  .case-page--visual-identity .contribution-card--1 p { font-size: 20px; line-height: 1.4; letter-spacing: -.9px; }
  .case-page--visual-identity .contribution-card--2 { grid-column: 2; grid-row: 1; height: 254px; background: #fff; }
  .case-page--visual-identity .contribution-card--2 p { white-space: normal; }
  .case-page--visual-identity .contribution-card--3 { grid-column: 2; grid-row: 2; height: 166px; background: linear-gradient(-30.82deg, #f4f5f7 2.1651%, #fff 105.07%); }
  .case-page--visual-identity .contribution-card--3 { transform: translateY(2px); }
  .case-page--visual-identity .contribution-card--3 p { line-height: 1.4; white-space: normal; }
  .case-page--visual-identity .contribution-card--4 { grid-column: 1; grid-row: 2; height: 168px; background: linear-gradient(67.21deg, #f4f5f7 29.824%, #fff 97.13%); }
  .case-page--visual-identity .contribution-card--4 p { line-height: 1.4; white-space: normal; }
  .case-about { min-height: 0; }
  .case-about__inner { width: min(100% - 48px, 640px); padding: 58px 0 54px; }
  .case-page--block-earner .case-about { min-height: 301px; border-radius: 24px; background-image: linear-gradient(232.481deg, #171722 16.07%, #3d3d3d 100%); }
  .case-page--block-earner .case-about::before { top: -49.54%; height: 161.51%; }
  .case-page--block-earner .case-about__inner { width: min(100% - 160px, 640px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; padding: 80px 0; }
  .case-page--block-earner .case-about h2 { font-size: 32px; font-weight: 500; }
  .case-page--crm .case-about, .case-page--stark-shipping .case-about { min-height: 434px; padding: 80px 40px; }
  .case-page--crm .case-about { border-radius: 24px; background-image: linear-gradient(34.10952deg, #171722 49.545%, #3fa6f5 106.7%); }
  .case-page--stark-shipping .case-about { min-height: 430px; background-image: linear-gradient(231.4118deg, #171722 50.868%, #57637a 101.79%); }
  .case-page--crm .case-about__inner, .case-page--stark-shipping .case-about__inner { width: 100%; grid-template-columns: minmax(0, 1fr) 335px; gap: 50px; }
  .case-about__aside p { font-size: 14px; line-height: 1.4; letter-spacing: -.81px; }
  .case-section__inner, .contribution-section__inner { width: min(100% - 80px, 720px); }
  .case-overview-section { padding: 80px 40px 40px; }
  .case-overview-section .case-section__inner { width: 100%; }
  .case-overview-section .case-section__title { margin-bottom: 70px; font-size: 32px; line-height: 1.125; }
  .meta-grid { grid-template-columns: minmax(0, .58fr) minmax(0, 1fr); align-items: start; }
  .meta-grid__group { padding: 32px; }
  .meta-grid__group dl { gap: 32px; }
  .case-overview-section .meta-item dt { font-size: 20px; line-height: 1.6; letter-spacing: -.9px; }
  .case-overview-section .meta-item dd { font-family: "DM Sans", sans-serif; font-size: 14px; line-height: 1.4; letter-spacing: -.28px; }
  .case-overview-section .meta-grid__group--secondary .meta-item:last-child dt { line-height: 1.4; }
  .case-page--block-earner .case-overview-section .meta-grid__group--primary .meta-item:first-child dd { max-width: 153px; }
  .case-page--crm .case-overview-section .meta-grid__group--primary .meta-item:first-child dd { line-height: 20px; }
  .case-page--stark-shipping .case-overview-section .meta-grid__group--primary .meta-item:first-child dd { line-height: 19.85px; }
  .responsive-copy { display: inline; }
  .desktop-copy { display: none; }
  .case-process-section .case-section__title { margin-bottom: 0; }
  .story__header { gap: 26px; }
  .story__header h3 { font-size: 32px; }
  .story__header > div:first-child > p { font-size: 18px; }
  .process-grid, .image-grid { grid-template-columns: 1fr; }
  .image-frame--count-1, .image-frame--count-3:last-child, .image-frame--count-4:last-child { grid-column: auto; }
  .image-grid { gap: 20px; margin-top: 40px; }
  .story { padding-bottom: 80px; }
  .more-project { grid-template-columns: 1fr; gap: 28px; min-height: 0; padding: 0 0 36px; }
  .more-project__art { max-width: 600px; aspect-ratio: 600 / 197; }
  .more-project__body { padding: 0 28px; }
  .case-behance { padding: 64px 24px; }
  .case-behance__inner { grid-template-columns: 1fr; }
  .case-behance__art { min-height: 0; height: 360px; }
  .about-page { width: min(100% - 80px, 1140px); padding-top: 76px; }
  .about-layout { grid-template-columns: 256px minmax(0, 1fr); gap: 32px; }
  .about-portrait { width: 256px; height: 264px; }
  .about-portrait img { min-height: 0; }
}

@media (max-width: 520px) {
  .site-header { height: 56px; }
  .site-header__inner { width: min(100%, 375.5px); height: 56px; margin: 0 auto; padding: 4px 16px; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; }
  .site-header--home { top: 0; margin: 0; }
  .site-header--home .site-header__inner { margin-top: 0; }
  .wordmark, .wordmark__avatar { width: 32px; height: 32px; }
  .wordmark { flex: 0 0 32px; }
  .wordmark__avatar { flex-basis: 32px; }
  .wordmark__avatar img { width: 120px; height: 32px; }
  .wordmark__name { display: none; }
  .site-nav { width: auto; height: 48px; flex: 0 0 auto; gap: 16px; }
  .site-nav__links { flex: 0 0 auto; gap: 16px; }
  .site-nav__links a[data-nav="cases"] { width: auto; }
  .site-nav__links a[data-nav="about"] { width: auto; font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -.28px; }
  .hero { min-height: 569px; padding: 80px 16px 20px; gap: 40px; }
  .hero__eyebrow { max-width: 300px; margin-bottom: 18px; font-size: 18px; }
  .hero h1 { font-size: 40px; line-height: 1; letter-spacing: -2px; }
  .social-row { margin-top: 0; gap: 20px; }
  .social-link, .social-link img { width: 32px; height: 32px; }
  .section { padding-right: 16px; padding-left: 16px; }
  .work-section > .section-heading, .identity-section > .subsection-heading, .behance-section > .subsection-heading { padding: 80px 0; }
  .section-heading, .subsection-heading { font-size: 32px; }
  .project-stack { gap: 16px; }
  .project-card { gap: 40px; padding: 20px; }
  .project-card__art { height: auto; min-height: 0; aspect-ratio: 460 / 333.84; }
  .more-project__art { width: 100%; max-width: 311px; aspect-ratio: 311 / 280; }
  .project-card__body { gap: 72px; }
  .project-card__body h3 { font-size: 32px; }
  .project-card__body p { font-size: 18px; }
  .project-card__brands { gap: 16px; }
  .project-card__brands img { max-width: 82px; }
  .behance-card { gap: 56px; padding: 40px 0 20px; }
  .behance-card:first-child .behance-art { aspect-ratio: 343 / 280; }
  .behance-card:last-child .behance-art { aspect-ratio: 343 / 293; }
  .behance-copy { gap: 24px; }
  .behance-copy p { margin: 0; font-size: 14px; line-height: 1.5; letter-spacing: -.28px; }
  .case-hero { width: min(100% - 32px, 1120px); }
  .case-page { padding-top: 33px; }
  .case-page--block-earner { padding-top: 42px; }
  .case-hero { width: 100%; }
  .case-hero__visual { width: min(100% - 32px, 343px); margin-bottom: 80px; aspect-ratio: 343 / 372; }
  .case-page--block-earner .case-hero__visual { aspect-ratio: 343 / 236; }
  .case-page--block-earner .case-hero__brand--block { width: 151px; height: 14px; max-width: none; max-height: none; }
  .case-page--block-earner .case-hero__text { width: min(100% - 48px, 327px); }
  .case-page--block-earner .case-hero__brand { margin-bottom: 28px; }
  .case-page--stark-shipping .case-hero__brand--stark { width: 80px; height: 63px; max-width: none; max-height: none; }
  .case-hero__foreground { width: 88%; height: 82%; top: 9%; }
  .case-page--block-earner .case-hero__foreground { top: 14.83%; width: 86%; height: 70.34%; }
  .case-hero h1 { font-size: 24px; line-height: 1.05; letter-spacing: -1.44px; }
  .case-hero__brand { max-width: 170px; max-height: 36px; height: auto; margin-bottom: 24px; }
  .case-about__inner { width: min(100% - 40px, 520px); padding: 46px 0 42px; }
  .case-page--block-earner .case-about { min-height: 242px; border-radius: 24px; background-image: linear-gradient(245.883deg, #171722 16.07%, #3d3d3d 100%); }
  .case-page--block-earner .case-about::before { top: -49.54%; height: 161.51%; }
  .case-page--block-earner .case-about__inner { display: flex; flex-direction: column; gap: 30px; width: 295px; padding: 64px 0; }
  .case-page--block-earner .case-about h2 { width: 100%; font-size: 32px; font-weight: 500; line-height: 1.05; letter-spacing: -1.44px; }
  .case-page--crm .case-hero__brand { width: 244px; max-width: 100%; height: 47px; max-height: none; margin-bottom: 33px; }
  .case-page--crm .case-hero h1 { margin-bottom: 31px; }
  .case-page--block-earner .case-hero h1 { line-height: 1.21; margin-bottom: 33px; }
  .case-page--stark-shipping .case-hero__brand { margin-bottom: 28px; }
  .case-page--stark-shipping .case-hero h1 { font-size: 24px; line-height: 1.21; letter-spacing: -1.44px; margin-bottom: 28px; }
  .case-page--block-earner .case-labels, .case-page--stark-shipping .case-labels { gap: 8px; }
  .case-hero h1:has(.case-hero__mobile) .case-hero__responsive { display: none; }
  .case-hero__mobile { display: inline; }
  .case-page--crm .case-hero__text, .case-page--stark-shipping .case-hero__text { width: min(100% - 48px, 327px); }
  .case-page--crm .case-about, .case-page--stark-shipping .case-about { min-height: 530px; padding: 80px 40px; }
  .case-page--crm .case-about { background-image: linear-gradient(60.3452deg, #171722 49.545%, #3fa6f5 106.7%); }
  .case-page--stark-shipping .case-about { background-image: linear-gradient(64.8315deg, #171722 33.442%, #57637a 85.338%); }
  .case-page--crm .case-about__inner, .case-page--stark-shipping .case-about__inner { width: 100%; grid-template-columns: 1fr; gap: 48px; }
  .case-page--crm .case-about__aside, .case-page--stark-shipping .case-about__aside { margin-bottom: 50px; }
  .case-page--crm .case-about__aside h3, .case-page--stark-shipping .case-about__aside h3 { margin-bottom: 16px; font-size: 20px; }
  .case-page--crm .case-about__aside p, .case-page--stark-shipping .case-about__aside p { font-size: 14px; line-height: 1.4; letter-spacing: -.81px; }
  .case-page--crm .case-about__aside h3 img, .case-page--stark-shipping .case-about__aside h3 img { display: none; }
  .case-about__aside h3 img { width: 28px; height: 28px; }
  .case-section__inner, .contribution-section__inner { width: min(100% - 32px, 343px); }
  .case-overview-section { padding: 80px 16px 40px; }
  .case-overview-section .case-section__inner { width: 100%; }
  .case-overview-section .case-section__title { margin-bottom: 40px; font-size: 28px; line-height: 1.05; letter-spacing: -1.4px; }
  .meta-grid { grid-template-columns: 1fr; gap: 20px; }
  .meta-grid__group { padding: 24px; border-radius: 24px; }
  .meta-grid__group dl { gap: 24px; }
  .responsive-copy { display: inline; }
  .desktop-copy { display: none; }
  .meta-item dt { font-size: 20px; }
  .meta-item dd { font-size: 18px; }
  .meta-item:has(.responsive-copy) dd .responsive-copy { font-family: "Work Sans", sans-serif; }
  .case-page--block-earner .case-labels .tag:nth-child(3) { order: 4; }
  .case-page--block-earner .case-labels .tag:nth-child(4) { order: 3; }
  .case-page--crm .case-about { border-radius: 24px; }
  .case-page--stark-shipping .case-about { border-radius: 0; }
  .case-process-section .case-section__inner { width: min(100% - 32px, 343px); }
  .case-process-section .case-section__title { font-size: 40px; line-height: 1.05; letter-spacing: -2.8px; }
  .meta-item:has(.responsive-copy) dd { max-width: 100%; }
  .meta-item:has(.responsive-copy) dd .responsive-copy { display: inline; }
  .case-process-section .case-section__title { margin-bottom: 40px; }
  .meta-item dt, .meta-item dd, .process-card p, .story__body p { font-size: 16px; }
  .contribution-section p { font-size: 16px; }
  .case-page--visual-identity .contribution-section { padding: 79px 16px 80px; border-top: 1px solid #efeeef; }
  .case-page--visual-identity .contribution-section__inner { display: flex; flex-direction: column; gap: 70px; width: 100%; }
  .case-page--visual-identity .contribution-section h2 { width: 198px; font-size: 28px; line-height: 29px; letter-spacing: -1.44px; }
  .case-page--visual-identity .contribution-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px; }
  .case-page--visual-identity .contribution-card { padding: 39px; }
  .case-page--visual-identity .contribution-card--1 { grid-column: 1; grid-row: auto; gap: 12px; height: auto; background: #fff; }
  .case-page--visual-identity .contribution-card--1 p { width: 218px; max-width: 218px; font-size: 16px; line-height: 20px; letter-spacing: -.81px; white-space: normal; }
  .case-page--visual-identity .contribution-card--2 { grid-column: 1; grid-row: auto; gap: 23px; height: auto; background: linear-gradient(.85deg, #f4f5f7 .174%, #fff 109.3%); }
  .case-page--visual-identity .contribution-card--2 p { width: 263px; max-width: none; font-size: 16px; line-height: 22px; letter-spacing: -.9px; white-space: normal; }
  .case-page--visual-identity .contribution-card--3 { grid-column: 1; grid-row: auto; gap: 23px; height: auto; background: #f4f5f7; }
  .case-page--visual-identity .contribution-card--3 { transform: none; }
  .case-page--visual-identity .contribution-card--3 p { width: 106px; max-width: none; font-size: 16px; line-height: 22px; letter-spacing: -.9px; white-space: nowrap; }
  .case-page--visual-identity .contribution-card--4 p { width: 191px; max-width: none; font-size: 16px; line-height: 22px; letter-spacing: -.9px; white-space: nowrap; }
  .case-page--visual-identity .contribution-card--4 { grid-column: 1; grid-row: auto; gap: 23px; height: auto; background: linear-gradient(180deg, #f4f5f7, #fff); }
  .case-section { padding-bottom: 70px; }
  .case-section p { font-size: 16px; }
  .case-overview-section { padding-bottom: 40px; }
  .case-overview-section .meta-item dt { font-size: 20px; line-height: 1.6; letter-spacing: -.9px; }
  .case-overview-section .meta-item dd { font-family: "DM Sans", sans-serif; font-size: 14px; line-height: 1.41; letter-spacing: -.28px; }
  .case-overview-section .meta-grid__group--secondary .meta-item:last-child dt { line-height: 1.4; }
  .case-page--block-earner .case-overview-section .meta-grid__group--primary .meta-item:first-child dd { max-width: none; }
  .case-page--block-earner .case-overview-section .meta-grid__group--primary dl,
  .case-page--block-earner .case-overview-section .meta-grid__group--secondary dl { gap: 23px; }
  .case-page--stark-shipping .case-overview-section .meta-grid__group--secondary { padding-top: 23.65px; padding-bottom: 23.65px; }
  .case-page--block-earner .case-overview-section .meta-grid__group--primary .meta-item dd { line-height: 1.5; }
  .case-page--block-earner .case-overview-section .meta-grid__group--secondary .meta-item:first-child dd { font-family: "Work Sans", sans-serif; font-size: 18px; line-height: 1.6; letter-spacing: -.81px; }
  .case-page--block-earner .case-overview-section .meta-grid__group--secondary .meta-item:not(:first-child) dd { font-family: "DM Sans", sans-serif; font-size: 14px; line-height: 1.5; letter-spacing: -.28px; }
  .case-overview-section .meta-item:has(.mobile-copy) .responsive-copy { display: none; }
  .case-overview-section .mobile-copy { display: inline; }
  .case-intro__lead { font-size: 26px; }
  .about-page { width: min(100% - 32px, 1140px); padding-top: 22px; }
  .about-layout { grid-template-columns: 1fr; gap: 40px; }
  .about-portrait { width: 100%; height: auto; aspect-ratio: 289 / 298; }
  .about-copy p { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (max-width: 815px) {
  .site-header--home .site-header__inner { width: min(100% - 16px, 612px); }
  .site-header--home .site-nav__links a[data-nav="work"] { display: none; }
  .hero { height: auto; min-height: 480px; flex-direction: column; align-items: center; justify-content: flex-start; padding: 120px 24px 20px; text-align: center; }
  .hero__content { flex-direction: column; align-items: center; gap: 20px; width: min(100%, 752px); }
  .hero__text { flex: initial; align-items: center; width: 100%; gap: 24px; }
  .hero h1 { max-width: 752px; font-size: 72px; letter-spacing: -3.6px; }
  .hero .social-row { flex: initial; width: 258px; margin: 0; }
  .work-section { width: min(100%, 1280px); padding-top: 0; }
  .work-section > .section-heading { height: auto; justify-content: center; margin: 0; padding: 40px 0 80px; }
  .identity-section { padding-top: 0; padding-bottom: 0; }
  .identity-section > .subsection-heading, .behance-section > .subsection-heading { height: auto; justify-content: center; margin: 0; padding: 80px 0; }
  .behance-section { padding-top: 0; }
  .project-card--text-first .project-card__body, .project-card--identity .project-card__body { padding: 0; }
  .project-card { height: auto; }
  .behance-card:last-child { min-height: 0; padding: 40px 24px 70px; }
  .behance-copy { width: 100%; height: auto; }
  .behance-copy p { margin: 0; }
  .behance-copy .dark-button { height: 56px; min-height: 56px; }
  .behance-card--reverse .behance-copy { align-items: flex-start; justify-content: flex-start; text-align: left; }
  .behance-card--reverse .behance-copy p { width: auto; margin: 0; }
  .behance-section > .subsection-heading .section-title { justify-content: center; gap: 16px; }
}

@media (max-width: 520px) {
  .site-header--home .site-header__inner { width: min(100%, 375.5px); }
  .hero { min-height: 569px; padding: 80px 16px 20px; }
  .hero__content { gap: 40px; }
  .hero__text { gap: 18px; }
  .hero__eyebrow { margin-bottom: 0; }
  .hero h1 { font-size: 40px; line-height: 1; letter-spacing: -2px; }
  .hero .social-row { flex: initial; width: auto; gap: 20px; }
  .hero .social-link, .hero .social-link img { width: 32px; height: 32px; }
  .work-section, .identity-section, .behance-section { width: 100%; padding-right: 16px; padding-left: 16px; }
  .work-section > .section-heading, .identity-section > .subsection-heading, .behance-section > .subsection-heading { justify-content: center; }
  .project-card--identity { padding-right: 50px; }
  .behance-card:last-child { padding: 40px 0 20px; }
}

@media (min-width: 816px) and (max-width: 1295px) {
  .hero { padding-right: 40px; padding-left: 40px; }
  .hero__content { gap: clamp(24px, 5.55vw, 80px); }
  .hero__text { flex: 1 1 0; }
  .hero h1 { font-size: clamp(44px, 5.28vw, 76px); letter-spacing: -.07em; }
  .project-card { height: auto; grid-template-columns: minmax(0, 640fr) minmax(0, 584fr); gap: clamp(24px, 4.375vw, 56px); min-height: 320px; }
  .project-card--text-first { grid-template-columns: minmax(0, 584fr) minmax(0, 640fr); }
  .project-card--identity { grid-template-columns: minmax(0, 640fr) minmax(0, 544fr); padding-right: 3.125%; }
  .project-card__art { width: 100%; height: auto; min-height: 0; aspect-ratio: 640 / 498; }
  .project-card__body { height: 320px; padding-right: 16.1%; }
  .project-card__body h3 { font-size: clamp(32px, 3.125vw, 40px); }
  .project-card--text-first .project-card__body { padding: 0 6.5% 0 9.6%; }
  .project-card--identity .project-card__body { padding-right: 9.9%; }
  .behance-card { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 6.25%; padding-left: 6.25%; }
  .behance-copy { width: 100%; }
  .behance-art { width: 100%; height: auto; }
  .behance-card--reverse .behance-copy p { width: 87.14%; }
}

@media (min-width: 1400px) {
  .work-section, .identity-section, .behance-section {
    margin-right: 0;
    margin-left: calc((100vw - 1280px) / 2);
  }
}

@media (min-width: 816px) {
  [data-route="home"] .project-card:hover,
  [data-route="home"] .project-card:focus-visible { transform: none; box-shadow: none; }

  .site-header--home .site-header__inner {
    border-color: transparent;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: width 380ms cubic-bezier(.22, .61, .36, 1), border-color 280ms ease, background-color 280ms ease, backdrop-filter 280ms ease;
  }

  .site-header--home.site-header--scrolled .site-header__inner {
    width: min(100% - 32px, var(--nav-scrolled-width));
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
}

@media (min-width: 816px) and (max-width: 1295px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-route="home"] .project-card__art picture {
    clip-path: inset(0 round 0);
    transform: scale(1) rotate(0deg);
    transform-origin: center;
    backface-visibility: hidden;
    transition: transform 640ms cubic-bezier(.22, .61, .36, 1), clip-path 640ms cubic-bezier(.22, .61, .36, 1);
  }

  [data-route="home"] .project-card:hover .project-card__art picture,
  [data-route="home"] .project-card:focus-visible .project-card__art picture {
    transform: scale(1.3) rotate(-5deg);
  }

  [data-route="home"] .project-card:hover .project-card__art--fintech picture,
  [data-route="home"] .project-card:focus-visible .project-card__art--fintech picture {
    clip-path: inset(7.8% 5.2% 4.8% 5.2% round 8px);
  }

  [data-route="home"] .project-card:hover .project-card__art--operations picture,
  [data-route="home"] .project-card:focus-visible .project-card__art--operations picture,
  [data-route="home"] .project-card:hover .project-card__art--analytics picture,
  [data-route="home"] .project-card:focus-visible .project-card__art--analytics picture {
    clip-path: inset(14.4% 5.6% 14.4% 5.6% round 8px);
  }

  [data-route="home"] .project-card:hover .project-card__art--identity picture,
  [data-route="home"] .project-card:focus-visible .project-card__art--identity picture {
    clip-path: inset(17% 0 17% 0);
  }
}

/* Homepage desktop art is composed from the individual Figma screen layers.
   The card's gradient stays still while only those layers move to the hover frame. */
.project-card__motion { display: none; }

@media (min-width: 1296px) and (hover: hover) and (pointer: fine) {
  .motion-card .project-card__art {
    isolation: isolate;
  }

  .motion-card .project-card__art--fintech {
    background: linear-gradient(222.38deg, #fefed2 8.99%, #e3e6e1 102.56%);
  }
  .motion-card .project-card__art--operations {
    background: linear-gradient(212.59deg, #bed8f4 22.55%, #4da3ff 103.17%);
  }
  .motion-card .project-card__art--analytics {
    background: linear-gradient(128.72deg, #d7d7d7 28.63%, #9cc0e7 131.18%);
  }
  .motion-card .project-card__art:not(.project-card__art--identity) > picture {
    opacity: 0;
  }
  .motion-card .project-card__motion {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    pointer-events: none;
  }
  .motion-card .project-card__motion img {
    position: absolute;
    display: block;
    max-width: none;
    object-fit: fill;
    transform-origin: center center;
    backface-visibility: hidden;
    transition:
      left 640ms cubic-bezier(.22, .61, .36, 1),
      top 640ms cubic-bezier(.22, .61, .36, 1),
      width 640ms cubic-bezier(.22, .61, .36, 1),
      height 640ms cubic-bezier(.22, .61, .36, 1),
      transform 640ms cubic-bezier(.22, .61, .36, 1),
      opacity 360ms ease;
  }

  .motion-card .project-card__art--fintech .project-card__motion-screen {
    left: 35px; top: 40px; width: 567px; height: 319px;
  }
  .motion-card .project-card__art--fintech .project-card__motion-stroke {
    left: 33px; top: 38px; width: 571px; height: 323px;
  }
  .motion-card .project-card__art--fintech .project-card__motion-phone {
    left: 475px; top: 273px; width: 100px; height: 203px;
  }
  .motion-card:hover .project-card__art--fintech .project-card__motion-screen,
  .motion-card:focus-visible .project-card__art--fintech .project-card__motion-screen {
    left: -247.5px; top: 43.8px; width: 795.68px; height: 447.66px;
    transform: rotate(-2deg);
  }
  .motion-card:hover .project-card__art--fintech .project-card__motion-stroke,
  .motion-card:focus-visible .project-card__art--fintech .project-card__motion-stroke {
    left: -250.33px; top: 40.98px; width: 801.29px; height: 453.27px;
    transform: rotate(-2deg);
  }
  .motion-card:hover .project-card__art--fintech .project-card__motion-phone,
  .motion-card:focus-visible .project-card__art--fintech .project-card__motion-phone {
    left: 459.9px; top: 246.4px; width: 140.67px; height: 284.19px;
    transform: rotate(-2deg);
  }

  .motion-card .project-card__art--operations .project-card__motion-screen {
    left: 35px; top: 71px; width: 567px; height: 354px; border-radius: 8px;
  }
  .motion-card:hover .project-card__art--operations .project-card__motion-screen,
  .motion-card:focus-visible .project-card__art--operations .project-card__motion-screen {
    left: -120.36px; top: 71px; width: 722.36px; height: 451.48px;
    border-radius: 10.2px; transform: rotate(-2deg);
  }

  .motion-card .project-card__art--analytics .project-card__motion-screen {
    left: 36px; top: 72px; width: 567px; height: 354px; border-radius: 8px;
  }
  .motion-card:hover .project-card__art--analytics .project-card__motion-screen,
  .motion-card:focus-visible .project-card__art--analytics .project-card__motion-screen {
    left: -117.76px; top: 72px; width: 720.76px; height: 450.48px;
    border-radius: 10.2px; transform: rotate(-2deg);
  }

}

@media (min-width: 1296px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .motion-card .project-card__motion img { transition: none; }
}

/* Visual Identity is composed from Figma's separate screen layers on desktop.
   The card backdrop remains stationary; only the two interface screens animate. */
@media (min-width: 1280px) {
  .motion-card .project-card__art--identity {
    overflow: hidden;
    isolation: isolate;
    border-radius: 20px 0 0 20px;
    border: 0;
    box-shadow: inset 0 0 0 1px #efeeef;
    background: linear-gradient(52.0678deg, #eff0ef 28.639%, #c1d1d0 113.34%);
  }

  .motion-card .project-card__art--identity > picture {
    display: none;
  }

  .motion-card:hover .project-card__art--identity .project-card__motion--identity picture,
  .motion-card:focus-visible .project-card__art--identity .project-card__motion--identity picture {
    clip-path: none;
    transform: none;
  }

  .motion-card .project-card__art--identity .project-card__motion--identity {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .motion-card .project-card__art--identity .project-card__motion--identity picture {
    position: absolute;
    inset: 0;
    display: block;
    overflow: visible;
    width: 100%;
    height: 100%;
  }

  .motion-card .project-card__art--identity .project-card__motion--identity img {
    position: absolute;
    display: block;
    max-width: none;
    object-fit: cover;
    transform: rotate(0deg);
    transform-origin: center center;
    backface-visibility: hidden;
  }

  .motion-card .project-card__art--identity .project-card__motion-screen-left {
    left: -181px;
    top: 86px;
    width: 537px;
    height: 323px;
    border-radius: 17px;
  }

  .motion-card .project-card__art--identity .project-card__motion-screen-right {
    left: 428px;
    top: 98px;
    width: 461px;
    height: 298px;
    border-radius: 9px;
  }
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .motion-card .project-card__art--identity .project-card__motion--identity img {
    transition:
      left 640ms cubic-bezier(.22, .61, .36, 1),
      top 640ms cubic-bezier(.22, .61, .36, 1),
      width 640ms cubic-bezier(.22, .61, .36, 1),
      height 640ms cubic-bezier(.22, .61, .36, 1),
      transform 640ms cubic-bezier(.22, .61, .36, 1);
  }

  .motion-card:hover .project-card__art--identity .project-card__motion-screen-left,
  .motion-card:focus-visible .project-card__art--identity .project-card__motion-screen-left {
    left: -404.814px;
    top: 77.858px;
    width: 684.036px;
    height: 411.441px;
    border-radius: 17px;
    transform: rotate(-5.85deg);
  }

  .motion-card:hover .project-card__art--identity .project-card__motion-screen-right,
  .motion-card:focus-visible .project-card__art--identity .project-card__motion-screen-right {
    left: 365.818px;
    top: 19.148px;
    width: 587.226px;
    height: 379.595px;
    border-radius: 9px;
    transform: rotate(-5.85deg);
  }
}

@media (min-width: 1280px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .motion-card .project-card__art--identity .project-card__motion--identity img {
    transition: none;
  }
}

@keyframes hero-segment-reveal {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hero-complex-resolve {
  from {
    opacity: .32;
    filter: blur(8px);
    transform: translate3d(10px, 8px, 0) scale(.99);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (min-width: 816px) and (prefers-reduced-motion: no-preference) {
  [data-route="home"] .hero-motion__eyebrow,
  [data-route="home"] .hero-motion__segment {
    animation: hero-segment-reveal 720ms cubic-bezier(.22, .61, .36, 1) both;
  }

  [data-route="home"] .hero-motion__eyebrow { animation-delay: 60ms; }
  [data-route="home"] .hero-motion__segment { display: inline-block; }
  [data-route="home"] .hero-motion__segment--lead { animation-delay: 180ms; }
  [data-route="home"] .hero-motion__segment--complex {
    animation-name: hero-complex-resolve;
    animation-duration: 900ms;
    animation-delay: 300ms;
  }
  [data-route="home"] .hero-motion__segment--clarify { animation-delay: 440ms; }
  [data-route="home"] .hero-motion__segment--outcome { animation-delay: 560ms; }
}

@media (min-width: 816px) {
  [data-route="home"] .work-section { position: relative; }
  [data-route="home"] .work-section > .work-social-slot {
    position: absolute;
    top: 120px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 258px;
    height: 79px;
  }
  [data-route="home"] .work-section > .work-social-slot .social-row {
    display: flex;
    flex: 0 0 212px;
    align-items: center;
    gap: 16px;
    width: 212px;
    margin: 0;
  }
  [data-route="home"] .work-section > .work-social-slot .social-link {
    box-sizing: border-box;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
  }
  [data-route="home"] .work-section > .work-social-slot .social-link img,
  [data-route="home"] .work-section > .work-social-slot .social-link::after {
    width: 24px;
    height: 24px;
  }

  [data-route="home"] .work-section .project-card {
    grid-template-columns: minmax(0, 640fr) minmax(0, 584fr);
  }
  [data-route="home"] .work-section .project-card__art {
    grid-column: 1;
    grid-row: 1;
  }
  [data-route="home"] .work-section .project-card__body {
    grid-column: 2;
    grid-row: 1;
    padding: 0 94px 0 0;
  }
}

@media (min-width: 816px) and (max-width: 1295px) {
  [data-route="home"] .work-section .project-card__body { padding-right: 16.1%; }
}

/* Desktop homepage: cursor treatment for clickable portfolio cards. */
.card-cursor { display: none; }

@media (min-width: 816px) and (hover: hover) and (pointer: fine) {
  .has-card-cursor .project-card:hover,
  .has-card-cursor .behance-art:hover,
  .has-card-cursor .case-page--desktop-story .more-project:hover { cursor: default; }

  .card-cursor {
    position: fixed;
    z-index: 60;
    display: block;
    width: 0;
    height: 0;
    color: var(--dark);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease, visibility 160ms ease;
  }

  .card-cursor--visible { opacity: 1; visibility: visible; }
  .card-cursor__label {
    position: absolute;
    top: 24px;
    left: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--dark);
    color: #fff;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(23, 23, 34, .18);
  }
  .card-cursor--left .card-cursor__label { right: 12px; left: auto; }
  .card-cursor--above .card-cursor__label { top: -40px; }
}

@media (min-width: 816px) {
  [data-route="home"] .hero__decor img { filter: saturate(1.3); }

  [data-route="home"] .scroll-reveal { will-change: opacity, transform; }

  [data-route="home"] .work-section .section-title,
  [data-route="home"] .identity-section .section-title,
  [data-route="home"] .behance-section .section-title { gap: 8px; text-transform: none; }

  [data-route="home"] .work-section > .section-heading,
  [data-route="home"] .identity-section > .subsection-heading,
  [data-route="home"] .behance-section > .subsection-heading {
    height: 79px;
    margin: 0 0 32px;
    color: var(--muted);
    font-size: 36px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -1.62px;
  }

  [data-route="home"] .section-marker {
    width: 15px;
    height: 40.5px;
    flex-basis: 15px;
  }
  [data-route="home"] .section-marker::before {
    top: 2px;
    left: 7px;
    width: 1.5px;
    height: 37px;
  }

  [data-route="home"] .behance-section > .subsection-heading .section-title {
    justify-content: flex-start;
    width: auto;
    white-space: nowrap;
  }
  [data-route="home"] .behance-section .section-marker { order: -1; }
}

/* Shared desktop story layout; Block Earner remains the reference. */
@media (min-width: 1296px) {
  .site-header--case-home {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    transform: none;
  }
  .site-header--case-home .site-header__inner {
    width: min(100% - 32px, 1280px);
    border-color: transparent;
    background: linear-gradient(90deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 49.055%, rgba(255, 255, 255, .2));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: width 380ms cubic-bezier(.22, .61, .36, 1), border-color 280ms ease, background-color 280ms ease, backdrop-filter 280ms ease;
  }
  .site-header--case-home .site-header__case-about-desktop { display: inline; }
  .site-header--case-home .site-header__case-about-responsive { display: none; }
  .site-header--case-home.site-header--scrolled .site-header__inner {
    width: min(100% - 32px, var(--nav-scrolled-width));
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  .case-page--desktop-story {
    display: flex;
    flex-direction: column;
    padding-top: 96px;
  }
  .case-page--desktop-story > .case-hero {
    order: 0;
    width: min(100% - 32px, 1280px);
    margin-bottom: 0;
  }
  .case-page--desktop-story > .case-about { order: 1; }
  .case-page--desktop-story > .case-about {
    width: min(100% - 32px, 1280px);
    margin: 0 auto;
    border-radius: 24px;
  }
  .case-page--desktop-story > .case-story-layout { order: 2; }
  .case-page--desktop-story > .case-behance {
    order: 4;
    width: min(100% - 32px, 1280px);
    margin: 0 auto;
    border-radius: 24px;
  }
  .case-page--block-earner .case-sphere-field {
    display: block;
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .9;
    pointer-events: none;
  }
  .case-page--desktop-story .case-about__inner,
  .case-page--desktop-story .case-behance__inner { position: relative; z-index: 1; }
  .case-page--desktop-story > .more-projects { order: 5; }
  .case-page--desktop-story .case-hero__visual { margin-bottom: 100px; }
  .case-page--desktop-story .case-hero__visual--photo { aspect-ratio: 8 / 5; }
  .case-page--desktop-story .case-hero__brand { margin-bottom: 40px; }
  .case-page--desktop-story .case-hero h1 {
    margin-bottom: 40px;
    color: var(--ink);
    line-height: 1.05;
    letter-spacing: -2.8px;
  }
  .case-page--desktop-story .case-labels { gap: 8px; margin-bottom: 100px; }
  .case-page--desktop-story .case-hero .tag { line-height: 1.5; letter-spacing: -.28px; }
  .case-page--visual-identity.case-page--desktop-story .case-hero__visual { margin-bottom: 100px; aspect-ratio: 2240 / 1210; }
  .case-page--visual-identity.case-page--desktop-story .contribution-section { padding: 0 0 80px; }
  .case-page--visual-identity.case-page--desktop-story .contribution-section__inner { width: 100%; }
  .case-page--visual-identity.case-page--desktop-story .contribution-section h2 { width: auto; font-size: 32px; line-height: 1.05; }
  .case-page--visual-identity.case-page--desktop-story .contribution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 1fr;
    gap: 20px;
  }
  .case-page--visual-identity.case-page--desktop-story .contribution-card {
    grid-column: auto;
    grid-row: auto;
    padding: 40px;
    overflow: visible;
  }
  .case-page--visual-identity.case-page--desktop-story .contribution-card p {
    width: auto;
    max-width: 100%;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -.81px;
    white-space: normal;
  }
  .case-page--visual-identity.case-page--desktop-story .contribution-card__icon { display: block; width: 22px; height: 22px; flex: 0 0 22px; color: var(--ink); }
  .case-page--desktop-story .case-about__inner { padding: 100px 0 90px; }
  .case-page--crm > .case-about,
  .case-page--stark-shipping > .case-about { min-height: 319px; padding: 0; }
  .case-page--crm .case-about__inner,
  .case-page--stark-shipping .case-about__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; }
  .case-page--desktop-story .case-about__aside { margin-bottom: 24px; }
  .case-page--desktop-story .case-about__aside:last-child { margin-bottom: 0; }
  .case-page--desktop-story .case-about__aside p { color: #fff; letter-spacing: -.81px; }
  .case-page--desktop-story .case-overview-section { padding-top: 0; padding-bottom: 0; }
  .case-page--desktop-story .case-overview-section .case-section__title { min-height: 42px; }
  .case-page--desktop-story .meta-item { --overview-icon-size: 40px; --overview-icon-gap: 10px; }
  .case-page--desktop-story .meta-item dt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--overview-icon-gap); font-weight: 500; line-height: 1.4; }
  .case-page--desktop-story .meta-item__icon-box { display: inline-flex; align-items: center; justify-content: center; width: var(--overview-icon-size); height: var(--overview-icon-size); flex: 0 0 var(--overview-icon-size); border-radius: 8px; background: var(--line); color: inherit; }
  .case-page--desktop-story .meta-item__icon { display: block; width: 22px; height: 22px; flex: 0 0 22px; color: inherit; }
  .case-page--desktop-story .meta-item dd { margin-left: 0; line-height: 1.4; letter-spacing: -.81px; }

  .case-page--desktop-story .case-story-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
    width: min(100% - 32px, 1280px);
    margin: 0 auto 100px;
    padding-top: 120px;
  }
  .case-page--desktop-story .case-story-nav {
    position: sticky;
    top: 104px;
    align-self: start;
    max-height: calc(100vh - 128px);
    overflow: auto;
    padding: 7px 0 4px;
  }
  .case-page--desktop-story .case-story-nav__label {
    margin: 0 0 16px;
    color: var(--muted);
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .2em;
    text-transform: uppercase;
  }
  .case-page--desktop-story .case-story-nav ol {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0 8px;
    border-left: 1px solid var(--line);
    list-style: none;
  }
  .case-page--desktop-story .case-story-nav a {
    display: block;
    padding: 10px 12px;
    border-radius: 999px;
    color: var(--soft);
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    line-height: 1.3;
    transition: background-color 200ms ease, color 200ms ease;
  }
  .case-page--desktop-story .case-story-nav a:hover,
  .case-page--desktop-story .case-story-nav a:focus-visible,
  .case-page--desktop-story .case-story-nav a[aria-current="location"] {
    background: #f4f5f7;
    color: var(--ink);
  }
  .case-page--desktop-story .case-story-nav a:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }

  .case-page--desktop-story .case-story-layout__content { min-width: 0; }
  .case-page--desktop-story .case-story-layout [tabindex="-1"] { scroll-margin-top: 104px; }
  .case-page--desktop-story .case-story-layout__content > .case-section { width: 100%; }
  .case-page--desktop-story .case-story-layout .case-section__inner { width: 100%; }
  .case-page--desktop-story .case-story-layout [tabindex="-1"]:focus-visible,
  .case-page--desktop-story #block-earner-outcome:focus-visible { outline: none; }
  .case-page--desktop-story .case-process-section { padding: 180px 0 80px; }
  .case-page--desktop-story .case-process-section .case-section__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(32px, 4vw, 56px);
    row-gap: 80px;
  }
  .case-page--desktop-story .case-process-section .case-section__title {
    margin: 0;
    font-size: 32px;
  }
  .case-page--desktop-story .process-grid { gap: 28px; }
  .case-page--desktop-story .process-card strong { font-size: 20px; letter-spacing: -.9px; }
  .case-page--desktop-story .process-card p { letter-spacing: -.81px; }
  .case-page--desktop-story .case-process-media {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 636fr) minmax(0, 452fr);
    gap: 32px;
  }
  .case-page--desktop-story .case-process-media img { display: block; width: 100%; height: auto; }
  .case-page--block-earner .case-process-media img:nth-child(1) { aspect-ratio: 1272 / 880; }
  .case-page--block-earner .case-process-media img:nth-child(2) { aspect-ratio: 904 / 880; }
  .case-page--block-earner .case-process-media img:nth-child(3) { aspect-ratio: 2240 / 1082; }
  .case-page--desktop-story .case-process-media img:last-child { grid-column: 1 / -1; }
  .case-process-media__flow {
    position: relative;
    grid-column: 1 / -1;
    aspect-ratio: 1120 / 480;
    margin: 0;
    overflow: hidden;
  }
  .case-page--desktop-story .case-process-media__flow img {
    position: absolute;
    top: .1%;
    left: 0;
    width: 100%;
    height: 105.63%;
    aspect-ratio: auto;
  }
  .case-page--desktop-story .case-stories-section { padding: 0; }
  .case-page--desktop-story .story { padding: 100px 0 80px; scroll-margin-top: 104px; }
  .case-page--desktop-story .story:last-child { padding-bottom: 0; }
  .case-page--desktop-story .story__header {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(32px, 4vw, 56px);
  }
  .case-page--desktop-story .story__heading h3 { margin-bottom: 0; font-size: 32px; line-height: 1.05; letter-spacing: -1.44px; }
  .case-page--desktop-story .story__eyebrow { display: none; }
  .case-page--desktop-story .story__intro-desktop { display: block; }
  .case-page--desktop-story .story__body h4 {
    margin-bottom: 4px;
    font-family: "Work Sans", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.9px;
  }
  .case-page--desktop-story .story__body p { max-width: none; letter-spacing: -.81px; }
  .case-page--desktop-story .state-labels { display: none; }
  .case-page--desktop-story .image-grid { margin-top: 70px; }
  .case-page--desktop-story #block-story-1 .image-frame { aspect-ratio: 2240 / 880; }
  .case-page--desktop-story #block-story-2 .image-frame:nth-child(-n + 2) { aspect-ratio: 1088 / 880; }
  .case-page--desktop-story #block-story-2 .image-frame:last-child,
  .case-page--desktop-story #block-story-3 .image-frame,
  .case-page--desktop-story #block-story-4 .image-frame,
  .case-page--desktop-story #block-story-5 .image-frame { aspect-ratio: 2240 / 1400; }
  .case-page--stark-shipping #stark-story-1 .image-frame { aspect-ratio: 2240 / 2000; }
  .case-page--stark-shipping #stark-story-2 .image-frame,
  .case-page--stark-shipping #stark-story-3 .image-frame { aspect-ratio: 2240 / 1600; }
  .case-page--stark-shipping #stark-story-4 .image-frame,
  .case-page--stark-shipping #stark-story-6 .image-frame { aspect-ratio: 2240 / 1400; }
  .case-page--stark-shipping #stark-story-5 .image-frame { aspect-ratio: 2240 / 1938; }
  .case-page--visual-identity #identity-story-1 .image-frame { aspect-ratio: 2240 / 1408; }
  .case-page--visual-identity #identity-story-2 .image-frame { aspect-ratio: 2240 / 1350; }
  .case-page--visual-identity #identity-story-3 .image-frame { aspect-ratio: 2240 / 1450; }
  .case-page--visual-identity #identity-story-4 .image-frame { aspect-ratio: 2240 / 1554; }
  .case-page--visual-identity #identity-story-5 .image-frame { aspect-ratio: 2240 / 1258; }
  .case-page--visual-identity #identity-story-6 .image-frame { aspect-ratio: 2240 / 1460; }
  .case-page--desktop-story .video-frame { margin-top: 32px; }
  .case-page--desktop-story .case-behance__inner,
  .case-page--desktop-story .case-behance__art { min-height: 293px; }
  .case-page--desktop-story .case-behance__copy { justify-content: flex-start; padding: 0; }
  .case-page--desktop-story .more-projects { padding: 100px 0 120px; }
  .case-page--desktop-story .more-projects .case-section__inner { width: min(100% - 32px, 1280px); }
  .case-page--desktop-story .more-projects__heading {
    display: flex;
    align-items: center;
    min-height: 79px;
    margin: 0 0 32px;
    color: var(--muted);
    font-size: 36px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -1.62px;
  }
  .case-page--desktop-story .more-projects__heading .section-title { gap: 8px; }
  .case-page--desktop-story .more-projects__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .case-page--desktop-story .more-project {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height: 0;
    padding: 0;
    gap: 0;
    transition: none;
  }
  .case-page--desktop-story .more-project:hover,
  .case-page--desktop-story .more-project:focus-visible { transform: none; box-shadow: none; }
  .case-page--desktop-story .more-project__art {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 640 / 498;
    border-radius: 20px 20px 0 0;
  }
  .case-page--desktop-story .more-project__art .project-card__motion {
    inset: 0 auto auto 0;
    width: 640px;
    height: 498px;
    transform: scale(var(--motion-art-scale, 1));
    transform-origin: top left;
  }
  .case-page--desktop-story .more-project__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-height: 278px; gap: 0; padding: 32px; }
  .case-page--desktop-story .more-project__logo { display: flex; align-items: center; height: 40px; }
  .case-page--crm .more-project__brands,
  .case-page--stark-shipping .more-project__brands { min-height: 22px; gap: 25.856px; }
  .case-page--crm .more-project__brands img:first-child,
  .case-page--stark-shipping .more-project__brands img:first-child { height: 9.795px; }
  .case-page--crm .more-project__brands img:nth-child(2),
  .case-page--stark-shipping .more-project__brands img:nth-child(2) { height: 17.918px; }
  .case-page--desktop-story .more-project__legacy-brand,
  .case-page--desktop-story .more-project__tags { display: none; }
  .case-page--desktop-story .more-project__title {
    display: block;
    margin-top: 16px;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.045em;
  }
  .case-page--desktop-story .more-project__description {
    display: block;
    max-width: 490px;
    margin-top: 12px;
    color: var(--ink);
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -.28px;
  }
  .case-page--desktop-story #block-project-overview,
  .case-page--desktop-story #block-design-process,
  .case-page--desktop-story #block-earner-outcome { scroll-margin-top: 104px; }
}

@keyframes case-hero-enter {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

@media (min-width: 1296px) and (prefers-reduced-motion: no-preference) {
  .case-hero__visual--entrance > .case-hero__showcase { transform: scale(1.08); }
  .case-hero__visual--entrance.is-hero-entering > .case-hero__showcase {
    animation: case-hero-enter 900ms cubic-bezier(.22, 1, .36, 1) both;
    will-change: transform;
  }
  .case-hero__visual--entrance.is-hero-settled > .case-hero__showcase { transform: scale(1); }
}

@media (max-width: 1295px) {
  .case-hero__intro--desktop { display: none; }
  .case-page--desktop-story .case-story-layout,
  .case-page--desktop-story .case-story-layout__content { display: contents; }
  .case-page--desktop-story .case-story-nav { display: none; }
  .case-page--desktop-story .more-projects__heading .section-marker,
  .case-page--desktop-story .more-project__logo,
  .case-page--desktop-story .more-project__description { display: none; }
  .case-page--desktop-story .more-project__legacy-brand,
  .case-page--visual-identity .more-project__logo--responsive,
  .case-page--crm .more-project__logo--responsive,
  .case-page--stark-shipping .more-project__logo--responsive { display: contents; }
  .case-page--desktop-story .more-project__art { width: 100%; height: auto; min-height: 0; border-radius: 20px; }
  .case-page--desktop-story .more-project__art .project-card__motion { display: none; }
  .case-page--desktop-story .more-project__art > picture { display: block; }
  .case-page--crm .more-project__art,
  .case-page--visual-identity .more-project__art,
  .case-page--stark-shipping .more-project__art { aspect-ratio: 452 / 340; border: 0; }
}

@media (max-width: 815px) {
  .case-page--crm .more-project__art,
  .case-page--visual-identity .more-project__art,
  .case-page--stark-shipping .more-project__art { aspect-ratio: 600 / 197; }
}
@media (max-width: 520px) {
  .case-page--crm .more-project__art,
  .case-page--visual-identity .more-project__art,
  .case-page--stark-shipping .more-project__art { aspect-ratio: 311 / 280; }
}

/* Shared, one-time scroll entrance for home and desktop story cases. */
[data-route].has-scroll-reveal .scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 640ms cubic-bezier(.22, .61, .36, 1) var(--scroll-reveal-delay, 0ms),
    transform 640ms cubic-bezier(.22, .61, .36, 1) var(--scroll-reveal-delay, 0ms);
}
[data-route].has-scroll-reveal .scroll-reveal--visible,
[data-route].has-scroll-reveal .scroll-reveal:focus-within {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* About desktop reuses the portfolio's existing type, palette and spacing. */
@media (min-width: 1296px) {
  .about-career-page { --about-footer-boundary-space: 100px; }
  .about-career-page {
    width: min(100% - 32px, var(--content-width));
    margin: 0 auto;
    padding: 160px 0 var(--about-footer-boundary-space);
    font-family: "Work Sans", sans-serif;
  }
  .about-career-page:focus { outline: none; }
  .about-career {
    display: grid;
    grid-template-columns: var(--story-sidebar-width) minmax(0, 1fr);
    align-items: start;
    gap: var(--story-column-gap);
  }
  .about-career__sidebar {
    position: sticky;
    top: 104px;
    align-self: start;
  }
  .about-career__eyebrow,
  .about-timeline__chapter {
    margin: 0;
    color: var(--muted);
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .2em;
    text-transform: uppercase;
  }
  .about-career__sidebar h1 {
    margin: 16px 0 24px;
    color: var(--ink);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -1.44px;
  }
  .about-timeline__chapter {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 28px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--line);
    color: var(--ink);
  }
  .about-career__intro,
  .about-timeline__description,
  .about-education p {
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -.81px;
  }
  .about-timeline {
    display: grid;
    grid-auto-rows: auto;
    gap: 20px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .about-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    min-width: 0;
  }
  .about-timeline__item:not(:last-child)::before {
    position: absolute;
    top: 64px;
    bottom: -20px;
    left: 32px;
    border-left: 1px solid var(--line);
    content: "";
  }
  .about-timeline__number {
    position: relative;
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
  }
  .about-timeline__card {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 252px;
    padding: var(--panel-padding);
    border: 1px solid var(--line);
    border-radius: var(--panel-radius);
    background: var(--surface);
  }
  .about-timeline__period {
    margin: 16px 0 12px;
    color: var(--muted);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -.28px;
  }
  .about-timeline__card h2 {
    margin: 0;
    color: var(--ink);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -1.44px;
  }
  .about-timeline__role {
    margin: 4px 0 16px;
    color: var(--muted);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -.9px;
  }
  .about-timeline__description { width: 100%; max-width: none; }
  .about-timeline__continuation { margin-top: 32px; }
  .about-education { margin-top: 160px; }
  .about-education .section-heading { margin-bottom: 32px; }
  .about-education__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .about-education__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 20px; }
  .about-education__item:last-child { width: max-content; max-width: 100%; justify-self: end; }
  .about-education__logo { display: block; width: 64px; height: 64px; }
  .about-education__logo img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); }
  .about-education__logo--projector img { filter: brightness(0); }
  .about-education h3 {
    margin: 0 0 4px;
    color: var(--ink);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.9px;
  }
}

/* Shared footer, rendered once after every page. */
  .about-footer {
    --about-footer-boundary-space: 100px;
    overflow: clip;
    background: var(--dark);
    color: var(--white);
    font-family: "Work Sans", sans-serif;
  }
  .about-footer__inner { width: min(100% - 32px, var(--content-width)); margin: 0 auto; padding-top: var(--about-footer-boundary-space); }
  .about-footer h2 {
    margin: 0;
    font-size: 76px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -5.32px;
  }
  .about-footer__contacts,
  .about-footer__details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px var(--story-sidebar-width);
    align-items: start;
    gap: 80px;
  }
  .about-footer__contacts { margin-top: 80px; padding-bottom: 20px; border-bottom: 1px solid var(--soft); }
  .about-footer__contacts > div:last-child,
  .about-footer__details > div:last-child { justify-self: end; text-align: right; }
  .about-footer__details { padding-top: 28px; }
  .about-footer h3 {
    margin: 0 0 12px;
    color: var(--inverse-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -.28px;
  }
  .about-footer a,
  .about-footer__details p {
    font-family: "DM Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -.28px;
  }
  .about-footer__details p { margin: 0 0 4px; }
  .about-footer__contacts > div > a,
  .about-footer__details > div > a,
  .about-footer__menu a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .about-footer__contacts > div > a:hover,
  .about-footer__details > div > a:hover,
  .about-footer__menu a:hover { text-decoration-line: underline; }
  .about-footer__menu { display: flex; gap: 28px; }
  .about-footer .social-row { display: flex; align-items: center; gap: 16px; margin: 0; }
  .about-footer .social-link { width: 48px; height: 48px; border-radius: 50%; background: var(--white); }
  .about-footer .social-link img { width: 24px; height: 24px; }
  .about-footer .social-link::after { width: 24px; height: 24px; background: var(--ink); }
  .about-footer a:focus-visible { outline-color: var(--white); }
  .about-footer__name-frame { --about-name-crop: 40px; position: relative; height: calc(252px - var(--about-name-crop)); margin-top: 16px; overflow: hidden; pointer-events: none; }
  .about-footer__name-frame::after {
    position: absolute;
    inset: 50% 0 0;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(transparent, var(--white));
    mask-image: linear-gradient(transparent, var(--white));
    content: "";
  }
  .about-footer__name {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: max-content;
    font-size: 76px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -5.32px;
    filter: blur(calc(3px / var(--about-name-scale, 1)));
    transform: scale(var(--about-name-scale, 1));
    transform-origin: top right;
    -webkit-mask-image: linear-gradient(var(--white) 60%, transparent 100%);
    mask-image: linear-gradient(var(--white) 60%, transparent 100%);
  }

@media (max-width: 1295px) {
  .about-footer { --about-footer-boundary-space: 80px; }
  .about-footer h2 { font-size: 56px; letter-spacing: -2.8px; }
  .about-footer__contacts,
  .about-footer__details { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .about-footer__contacts > div,
  .about-footer__details > div { min-width: 0; }
  .about-footer a,
  .about-footer__details p { overflow-wrap: anywhere; }
  .about-footer__name-frame { --about-name-crop: 20px; }
}

@media (max-width: 815px) {
  .about-footer { --about-footer-boundary-space: 64px; }
  .about-footer h2 { font-size: 40px; letter-spacing: -1.44px; }
  .about-footer__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .about-footer h2 { grid-column: 1 / -1; margin-bottom: 12px; }
  .about-footer__contacts,
  .about-footer__details { display: contents; }
  .about-footer__contacts > div:nth-child(1) { grid-area: 2 / 1; }
  .about-footer__details > div:nth-child(1) { grid-area: 3 / 1; }
  .about-footer__contacts > div:nth-child(2) { grid-area: 2 / 2; }
  .about-footer__details > div:nth-child(2) { grid-area: 3 / 2; }
  .about-footer__details::before { grid-area: 4 / 1 / 5 / -1; border-top: 1px solid var(--soft); content: ""; }
  .about-footer__contacts > div:last-child { grid-area: 5 / 1; justify-self: start; text-align: left; }
  .about-footer__details > div:last-child { grid-area: 5 / 2; }
  .about-footer a,
  .about-footer__details p { font-size: 16px; }
  .about-footer__name-frame { grid-area: 6 / 1 / 7 / -1; margin-top: 0; --about-name-crop: 0px; }
}

@media (max-width: 560px) {
  .about-footer__inner { grid-template-columns: minmax(0, 1fr); }
  .about-footer__contacts > div:nth-child(1) { grid-area: 2 / 1; }
  .about-footer__details > div:nth-child(1) { grid-area: 3 / 1; }
  .about-footer__contacts > div:nth-child(2) { grid-area: 4 / 1; }
  .about-footer__details > div:nth-child(2) { grid-area: 5 / 1; }
  .about-footer__details::before { grid-area: 6 / 1; }
  .about-footer__contacts > div:last-child { grid-area: 7 / 1; }
  .about-footer__details > div:last-child { grid-area: 8 / 1; justify-self: start; text-align: left; }
  .about-footer__name-frame { grid-area: 9 / 1; }
}