@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue"), local("HelveticaNeue");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Product Sans";
  src: local("Product Sans"), local("ProductSans-Regular");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Medium"), local("HelveticaNeue-Medium");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: light;
  --case-scale: 1;
  --case-width: 1440;
  --case-height: 11381;
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: clip;
  background: #fff;
}

body {
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.case-shell {
  position: relative;
  width: calc(var(--case-width) * 1px * var(--case-scale));
  height: calc(var(--case-height) * 1px * var(--case-scale));
  margin-inline: auto;
}

.case-stage {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1440px;
  height: 11381px;
  overflow: hidden;
  transform: scale(var(--case-scale));
  transform-origin: top left;
  background: #fff;
}

.case-grid {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: url("../assets/icons/final-desktop-grid.svg") left top / 1440px 1024px repeat-y;
  opacity: 1;
}

.desktop-header,
.mobile-header {
  position: absolute;
  z-index: 10;
  inset: 0;
  height: 53px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.desktop-header > * {
  position: absolute;
  top: 21px;
  height: 18px;
}

.desktop-header > :nth-child(1) { left: 30px; }
.desktop-header > :nth-child(2) { left: 360px; }
.desktop-header > :nth-child(3) { left: 720px; }
.desktop-header .header-site { left: 1080px; }
.desktop-header .header-mail { left: 1338px; }

.external-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.external-link > span { text-decoration: underline; }
.external-link > img {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  color: currentColor;
  transition: transform 150ms ease-out;
}
.external-link:hover > img { transform: translate(2px, -2px); }

.mobile-header { display: none; }
.menu-toggle,
.menu-close {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.menu-toggle {
  position: absolute;
  z-index: 2;
  top: 15px;
  right: 12px;
  width: 24px;
  height: 24px;
}
.menu-toggle span {
  position: absolute;
  left: 0;
  width: 24px;
  height: 1px;
  background: #000;
}
.menu-toggle span:first-child { top: 9px; }
.menu-toggle span:last-child { top: 15px; }

.desktop-break { display: inline; }
.mobile-break { display: none; }
.result-muted { color: rgba(0, 0, 0, .5); }
.result-emphasis { color: #000; font-weight: 500; }

.figma-copy {
  position: absolute;
  z-index: 3;
  margin: 0;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  white-space: pre-wrap;
  overflow-wrap: normal;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  letter-spacing: -.02em;
}

.copy-72,
.copy-80,
.copy-90 { letter-spacing: -.03em; }

.copy-0{left:716px;top:193px;width:694px;opacity:1;font-size:60px;line-height:51px;text-transform:lowercase;text-decoration:none;}
.copy-1{left:30px;top:205px;width:690px;opacity:1;font-size:20px;line-height:24px;text-transform:none;text-decoration:none;}
.copy-2{left:720px;top:338px;width:578px;opacity:0.5;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-3{left:720px;top:508px;width:130px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-4{left:720px;top:540px;width:690px;opacity:1;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-5{left:720px;top:606px;width:690px;opacity:0.5;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-6{left:720px;top:1574px;width:54px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-7{left:30px;top:1575px;width:45px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-8{left:360px;top:1575px;width:95px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-9{left:1080px;top:1575px;width:103px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-10{left:720px;top:1606px;width:247px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-11{left:30px;top:1607px;width:147px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-12{left:360px;top:1607px;width:250px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-13{left:1080px;top:1607px;width:250px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-14{left:718px;top:1788px;width:254px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-15{left:718px;top:1840px;width:657px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-16{left:28px;top:2109px;width:90px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-17{left:718px;top:2109px;width:43px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-18{left:28px;top:2151px;width:619px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-19{left:718px;top:2151px;width:579px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-20{left:28px;top:2250px;width:80px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-21{left:718px;top:2250px;width:67px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-22{left:28px;top:2288px;width:601px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-23{left:718px;top:2288px;width:692px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-24{left:28px;top:2387px;width:116px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-25{left:28px;top:2425px;width:529px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-26{left:716px;top:2547px;width:694px;opacity:1;font-size:60px;line-height:52px;text-transform:lowercase;text-decoration:none;}
.copy-27{left:29px;top:2555px;width:690px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-28{left:718px;top:2696px;width:692px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-29{left:718px;top:2813px;width:84px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-30{left:718px;top:2853px;width:692px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-31{left:30px;top:3439px;width:262px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-32{left:720px;top:3439px;width:275px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-33{left:30px;top:3465px;width:286px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-34{left:720px;top:3465px;width:304px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-35{left:718px;top:3580px;width:58px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-36{left:718px;top:3614px;width:692px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-37{left:716px;top:3743px;width:694px;opacity:1;font-size:60px;line-height:52px;text-transform:lowercase;text-decoration:none;}
.copy-38{left:29px;top:3751px;width:690px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-39{left:718px;top:3888px;width:692px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-40{left:28px;top:4007px;width:125px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-41{left:717px;top:4007px;width:80px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-42{left:28px;top:4066px;width:315px;opacity:1;font-size:40px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-43{left:718px;top:4066px;width:540px;opacity:1;font-size:40px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-44{left:28px;top:4123px;width:543px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-45{left:718px;top:4123px;width:579px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-46{left:28px;top:4234px;width:68px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-47{left:240px;top:4234px;width:407px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-48{left:720px;top:4234px;width:68px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-49{left:901px;top:4234px;width:438px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-50{left:28px;top:4324px;width:107px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-51{left:239px;top:4324px;width:417px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-52{left:720px;top:4324px;width:107px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-53{left:901px;top:4324px;width:509px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-54{left:720px;top:4435px;width:127px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-55{left:901px;top:4435px;width:438px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-56{left:28px;top:4437px;width:127px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-57{left:240px;top:4437px;width:407px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-58{left:720px;top:4606px;width:58px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-59{left:901px;top:4606px;width:411px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-60{left:28px;top:4616px;width:58px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-61{left:240px;top:4616px;width:331px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-62{left:718px;top:4780px;width:75px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-63{left:718px;top:4814px;width:692px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-64{left:716px;top:5108px;width:694px;opacity:1;font-size:60px;line-height:52px;text-transform:lowercase;text-decoration:none;}
.copy-65{left:29px;top:5116px;width:690px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-66{left:718px;top:5254px;width:692px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-67{left:718px;top:5340px;width:692px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-68{left:30px;top:6226px;width:232px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-69{left:720px;top:6226px;width:284px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-70{left:29px;top:6910px;width:278px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-71{left:29px;top:6959px;width:692px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-72{left:716px;top:7361px;width:694px;opacity:1;font-size:60px;line-height:52px;text-transform:lowercase;text-decoration:none;}
.copy-73{left:29px;top:7369px;width:690px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-74{left:719px;top:7506px;width:692px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-75{left:461px;top:7796px;width:34px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-76{left:30px;top:8754px;width:108px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-77{left:720px;top:8754px;width:130px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-78{left:719px;top:8872px;width:249px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-79{left:719px;top:8925px;width:691px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-80{left:716px;top:9204px;width:694px;opacity:1;font-size:60px;line-height:52px;text-transform:lowercase;text-decoration:none;}
.copy-81{left:29px;top:9212px;width:690px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-82{left:719px;top:9298px;width:692px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-83{left:720px;top:9406px;width:571px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-84{left:30px;top:9928px;width:49px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-85{left:720px;top:9928px;width:94px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-86{left:720px;top:10033px;width:691px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-87{left:720px;top:10105px;width:691px;opacity:0.5;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-88{left:719px;top:10173px;width:691px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-89{left:719px;top:10211px;width:691px;opacity:0.5;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-90{left:716px;top:10568px;width:694px;opacity:1;font-size:60px;line-height:52px;text-transform:lowercase;text-decoration:none;}
.copy-91{left:29px;top:10576px;width:690px;opacity:1;font-size:20px;line-height:24px;text-transform:lowercase;text-decoration:none;}
.copy-92{left:719px;top:10748px;width:692px;opacity:0.5;font-size:20px;line-height:22px;text-transform:lowercase;text-decoration:none;}
.copy-93{display:none;}

.case-media {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  margin: 0;
  background: #f1f2f5;
}
.case-media > picture,
.case-media > picture > img {
  width: 100%;
  height: 100%;
}
.case-media > picture > img {
  object-fit: fill;
}

.media-hero {
  left:30px;
  top:684px;
  width:1380px;
  height:852px;
  background:#a5a5a5 url("../assets/images/final-desktop-hero.webp") center/cover no-repeat;
  container-type:inline-size;
}
.media-baseline-home { left:30px; top:2989px; width:680px; height:425px; }
.media-baseline-schedule { left:720px; top:2988px; width:690px; height:425px; }
.media-popular { left:30px; top:5461px; width:679px; height:747px; }
.media-nearest { left:721px; top:5461px; width:690px; height:747px; }
.media-comparison { left:719px; top:6349px; width:690px; height:754px; }
.media-dates { left:30px; top:7987px; width:675px; height:744px; }
.media-booking { left:721px; top:7986px; width:685px; height:746px; }
.media-figma { left:30px; top:9472px; width:680px; height:427px; }
.media-production { left:720px; top:9472px; width:690px; height:427px; }

.hero-background-video {
  position:absolute;
  left:-5.13%;
  top:-.352%;
  width:110.145%;
  height:100.352%;
  object-fit:cover;
}
.hero-wash {
  position: absolute;
  inset: 0;
  background: rgba(132,132,132,.5);
}
.hero-screen {
  position: absolute;
  left: 6.594%;
  top: 10.681%;
  width: 86.739%;
  height: 78.65%;
  overflow: hidden;
  color: white;
  font-family: "Product Sans", Arial, sans-serif;
  background:url("../assets/images/final-desktop-hero-screen.webp") center/cover no-repeat;
}
.hero-screen > video {
  position: absolute;
  left: 0;
  top: -.49%;
  width: 100.037%;
  height: 100.516%;
  object-fit: cover;
}
.hero-ui-overlay,
.hero-ui-overlay > img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.motion-screen {
  position: absolute;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}
.motion-screen img,
.motion-screen video,
.motion-screen canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.motion-baseline-home { left:48.33px; top:37.5px; width:583.33px; height:350px; border-radius:10px; }
.motion-baseline-schedule { left:53.83px; top:38px; width:582.34px; height:349px; border-radius:10px; }
.motion-baseline-home,
.motion-baseline-schedule {
  box-sizing:content-box;
  padding:0 2px 2px 0;
}
.motion-baseline-home video,
.motion-baseline-schedule video {
  position:absolute;
  left:calc(50% + 1px);
  top:calc(50% + 1px);
  width:calc(100% - 2px);
  height:calc(100% - 2px);
  max-width:none;
  transform:translate(-50%, -50%) scale(1.012);
}
.motion-popular { left:208px; top:74px; width:263px; height:586px; border-radius:35px; }
.popular-dynamic-island { position:absolute; z-index:5; left:302px; top:84px; width:76px; height:22px; }
.motion-device-overlay { position:absolute; z-index:5; }
.popular-dynamic-island,
.motion-device-overlay {
  display:block;
  overflow:hidden;
  border-radius:999px;
  background:#000;
}
.motion-nearest { left:213px; top:74px; width:263px; height:586px; border-radius:35px; }
.island-nearest { left:307px; top:82px; width:76px; height:22px; }
.motion-comparison { left:213px; top:74px; width:263px; height:586px; border-radius:35px; }
.island-comparison { left:302px; top:82px; width:76px; height:22px; }
.motion-dates { left:206px; top:68px; width:263px; height:586px; border-radius:35px; }
.island-dates { left:300px; top:77px; width:76px; height:22px; }
.motion-booking { left:211px; top:70px; width:263px; height:586px; border-radius:35px; }
.island-booking { left:305px; top:78px; width:76px; height:22px; }
.motion-production-desktop { left:56px; top:85px; width:383px; height:252px; border-radius:7px 7px 0 0; }
.motion-production-mobile { left:499px; top:83px; width:124px; height:277px; border-radius:16px; }
.island-production { left:539.73px; top:90px; width:41.455px; height:12px; }

.flow-diagram {
  position: absolute;
  z-index: 3;
  left: 30px;
  top: 7679px;
  width: 1299px;
  height: 247px;
  pointer-events: none;
}
.flow-diagram > img { display:block; width:100%; height:100%; }

.case-cta {
  position: absolute;
  z-index: 5;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  border: 1px solid #000;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -.02em;
  text-transform: lowercase;
  transition: color 160ms ease, background-color 160ms ease;
}
.case-cta img { width:15px; height:18px; transform:rotate(90deg); transition:transform 160ms ease,filter 160ms ease; }
.case-cta:hover { color:#fff; background:#000; }
.case-cta:hover img { transform:rotate(90deg) translateY(-3px); filter:invert(1); }
.cta-measure { left:720px; top:1927px; width:361px; }
.cta-tradeoff { left:720px; top:4915px; width:278px; }
.cta-card { left:31px; top:7047px; width:435px; }
.cta-flow { left:720px; top:9010px; width:372px; }
.cta-production { left:719px; top:10302px; width:361px; }

.case-footer {
  position:absolute;
  z-index:8;
  left:0;
  top:10924px;
  width:1440px;
  height:457px;
  overflow:hidden;
  color:#fff;
  background:#000;
  font-size:16px;
  line-height:26px;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.next-project > img { position:absolute; left:360px; top:55px; width:363px; height:257px; object-fit:cover; }
.footer-next,.footer-title,.footer-meta,.footer-open,.footer-name,.footer-role,.case-footer>a:not(.next-project) { position:absolute; }
.footer-next { left:31px; top:53px; width:690px; opacity:.5; font-size:20px; line-height:24px; text-transform:lowercase; }
.footer-title { left:31px; top:188px; width:293px; font-size:20px; line-height:24px; }
.footer-meta { left:30px; top:274px; width:294px; opacity:.5; font-size:20px; line-height:24px; }
.footer-open { display:none; }
.footer-name { left:30px; top:407px; }
.footer-role { left:360px; top:408px; }
.footer-resume { left:864px; top:43px; text-decoration:underline; }
.footer-mail { left:1080px; top:43px; text-decoration:underline; }
.footer-site { left:864px; top:81px; text-decoration:underline; }
.case-footer .external-link { text-decoration:none; }
.case-footer .external-link > img { filter:invert(1); }

@media (min-width: 900px) {
  .desktop-header .external-link,
  .case-footer .external-link { text-decoration:none; }
  .desktop-header .external-link > span,
  .case-footer .external-link > span {
    position:relative;
    text-decoration:none;
  }
  .desktop-header .external-link > span::after,
  .case-footer .external-link > span::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:1px;
    background:currentColor;
    opacity:0;
    transition:opacity 160ms ease-out;
  }
  .desktop-header .external-link > img,
  .case-footer .external-link > img {
    opacity:0;
    transform:translateX(-5px);
    transition:opacity 160ms ease-out,transform 160ms ease-out;
  }
  .desktop-header .external-link:hover > span::after,
  .desktop-header .external-link:focus-visible > span::after,
  .case-footer .external-link:hover > span::after,
  .case-footer .external-link:focus-visible > span::after,
  .desktop-header .external-link:hover > img,
  .desktop-header .external-link:focus-visible > img,
  .case-footer .external-link:hover > img,
  .case-footer .external-link:focus-visible > img {
    opacity:1;
  }
  .desktop-header .external-link:hover > img,
  .desktop-header .external-link:focus-visible > img,
  .case-footer .external-link:hover > img,
  .case-footer .external-link:focus-visible > img { transform:translateX(0); }
}
.next-project::after {
  content:"";
  position:absolute;
  left:360px;
  top:55px;
  width:363px;
  height:257px;
  background:rgba(255,255,255,0);
  transition:background 200ms ease-out;
}
.next-project:hover::after { background:rgba(255,255,255,.08); }

.mobile-header nav { display:none; }

a:focus-visible,
button:focus-visible {
  outline:2px solid #2884fc;
  outline-offset:4px;
}