#future.future-lab {
  position: relative;
  overflow: clip;
  padding-bottom: 0;
}

#future .future-heading {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(32px,5vw,68px);
}

#future .future-horizontal {
  /* This lazy-loaded scene owns its motion. The older stage reveal can be
     initialized before replacement and otherwise keep deep-link returns hidden. */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  --future-count: 5;
  position: relative;
  width: 100vw;
  height: calc(var(--future-count) * 82vh);
  min-height: 2860px;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  background:
    radial-gradient(circle at 16% 28%,rgba(255,255,255,.92),transparent 34%),
    radial-gradient(circle at 86% 70%,rgba(173,224,239,.25),transparent 36%),
    #edf7fa;
}

.future-horizontal__sticky {
  position: sticky;
  top: 76px;
  height: calc(100vh - 76px);
  min-height: 544px;
  overflow: hidden;
  border-top: 1px solid rgba(49,88,126,.18);
  border-bottom: 1px solid rgba(49,88,126,.18);
  background:
    repeating-radial-gradient(ellipse at 50% 50%,transparent 0 52px,rgba(54,110,145,.035) 53px 54px,transparent 55px 80px),
    linear-gradient(112deg,rgba(255,255,255,.58),rgba(224,243,248,.74));
}

.future-horizontal__topbar {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 24px clamp(24px,4vw,66px);
  color: #557794;
  font: 500 9px/1.4 var(--mono);
  letter-spacing: .13em;
  pointer-events: none;
}
.future-horizontal__topbar p { margin: 0; }
.future-horizontal__topbar i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  background: #3ea4c7;
  box-shadow: 0 0 0 5px rgba(62,164,199,.12);
}

.future-horizontal__track {
  display: flex;
  width: calc(var(--future-count) * 100vw);
  height: 100%;
  will-change: transform;
  transition: transform .56s cubic-bezier(.22,1,.36,1);
}

.future-panel {
  position: relative;
  display: grid;
  flex: 0 0 100vw;
  grid-template-columns: minmax(250px,.62fr) minmax(480px,1.38fr);
  align-items: center;
  gap: clamp(42px,7vw,118px);
  width: 100vw;
  height: 100%;
  padding: 6vh max(7vw,72px) 8vh;
}
.future-panel:nth-child(even) { grid-template-columns: minmax(250px,.62fr) minmax(480px,1.38fr); }
.future-panel:nth-child(even) .future-panel__copy { order: 0; }

.future-panel__copy {
  position: relative;
  z-index: 2;
  max-width: 430px;
  opacity: .32;
  transform: translateY(28px);
  transition: opacity .5s ease,transform .75s cubic-bezier(.22,1,.36,1);
}
.future-panel.is-active .future-panel__copy { opacity: 1; transform: none; }
.future-panel__copy::before {
  content:"";
  position:absolute;
  left:-24px;
  top:4px;
  width:1px;
  height:70px;
  background:linear-gradient(#399fc3,rgba(57,159,195,0));
}
.future-panel__copy > p:first-child {
  margin: 0 0 22px;
  color: #3d89ac;
  font: 600 11px/1.5 var(--mono);
  letter-spacing: .11em;
}
.future-panel__copy h3 {
  margin: 0;
  color: #123f70;
  font: 400 clamp(38px,4vw,58px)/1.08 "Noto Serif SC",serif;
  letter-spacing: -.055em;
}
.future-panel__summary {
  margin: 28px 0 0;
  color: #4f708d;
  font-size: 14px;
  line-height: 1.95;
}
.future-panel__vision {
  margin: 14px 0 0;
  padding-left: 14px;
  border-left: 1px solid rgba(57,159,195,.38);
  color: #66839b;
  font-size: 12px;
  line-height: 1.85;
}
.future-panel__keywords {
  display: inline-block;
  margin-top: 20px;
  color: #68849c;
  font: 500 10px/1.5 var(--mono);
  letter-spacing: .09em;
}
.future-panel__enter{display:flex;align-items:center;justify-content:space-between;width:174px;min-height:44px;margin-top:22px;padding:10px 0;border-bottom:1px solid #35768d;color:#215e78;font-size:13px;text-decoration:none;position:relative;z-index:3}
.future-panel__enter:hover{color:#123f70;border-bottom-color:#123f70}
.future-panel__enter:focus-visible{outline:3px solid #28778a;outline-offset:5px}

.future-panel__media {
  position: relative;
  z-index: 2;
  justify-self: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  aspect-ratio: 1.45;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: .65;
  transform: scale(.94);
  transition: opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1);
}
.future-panel:nth-child(even) .future-panel__media { border-radius: 0; }
.future-panel.is-active .future-panel__media { opacity: 1; transform: scale(1); }
.future-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--future-art-scale, 1));
  transform-origin: center;
  filter: saturate(.82) brightness(1.035);
}

/* All illustrations share the same square canvas, but their subjects use
   different amounts of transparent space. These small optical corrections
   make the five scenes read at one consistent size without cropping them. */
#future-home { --future-art-scale: .98; }
#future-transit { --future-art-scale: 1.13; }
#future-office { --future-art-scale: .98; }
#future-restaurant { --future-art-scale: 1.03; }
#future-entertainment { --future-art-scale: 1.05; }
.future-horizontal__scene-nav {
  position:absolute;
  z-index:6;
  right:clamp(24px,4vw,66px);
  bottom:82px;
  left:clamp(24px,4vw,66px);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid rgba(47,93,127,.14);
}
.future-horizontal__scene-nav button {
  position:relative;
  display:grid;
  justify-items:center;
  gap:5px;
  min-height:58px;
  padding:13px 12px 7px;
  border:0;
  border-right:1px solid rgba(47,93,127,.13);
  color:#70879b;
  background:transparent;
  cursor:pointer;
  transition:color .24s ease,background .24s ease;
}
.future-horizontal__scene-nav button:last-child { border-right:0; }
.future-horizontal__scene-nav button::before {
  position:absolute;
  top:-1px;
  left:50%;
  width:0;
  height:2px;
  content:"";
  background:#3c9fc3;
  transform:translateX(-50%);
  transition:width .28s ease;
}
.future-horizontal__scene-nav button span {
  font:600 9px/1 var(--mono);
  letter-spacing:.08em;
}
.future-horizontal__scene-nav button strong {
  font-size:12px;
  font-weight:500;
  letter-spacing:.02em;
}
.future-horizontal__scene-nav button i {
  width:6px;
  height:6px;
  border:1px solid currentColor;
  border-radius:50%;
  opacity:0;
  transform:scale(.5);
  transition:opacity .24s ease,transform .24s ease,box-shadow .24s ease;
}
.future-horizontal__scene-nav button:hover,
.future-horizontal__scene-nav button:focus-visible { color:#265f87;background:rgba(255,255,255,.28); }
.future-horizontal__scene-nav button.is-active { color:#145083; }
.future-horizontal__scene-nav button.is-active::before { width:54%; }
.future-horizontal__scene-nav button.is-active i {
  opacity:1;
  transform:scale(1);
  background:#54afcd;
  box-shadow:0 0 0 5px rgba(84,175,205,.12);
}

.future-horizontal__progress {
  position:absolute;
  z-index:6;
  left:clamp(24px,4vw,66px);
  bottom:26px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#557692;
  font:500 10px var(--mono);
}
.future-horizontal__progress strong { color:#145083;font-size:15px;font-weight:500; }
.future-horizontal__progress > div {
  width:clamp(100px,15vw,210px);
  height:2px;
  margin:0 10px;
  overflow:hidden;
  background:rgba(38,78,113,.14);
}
.future-horizontal__progress > div i {
  display:block;
  width:100%;
  height:100%;
  background:#3c9fc3;
  transform:scaleX(0);
  transform-origin:left center;
}
.future-horizontal__progress button {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid rgba(42,81,116,.22);
  border-radius:50%;
  color:#265d86;
  background:rgba(255,255,255,.55);
  cursor:pointer;
}
.future-horizontal__progress button:hover { background:#fff; }
.future-horizontal__progress button:disabled { opacity:.32;cursor:not-allowed; }

@media (max-width: 760px) {
  #future .future-horizontal { height:auto;min-height:0;padding:0 16px 58px;background:#edf7fa; }
  .future-horizontal__sticky { position:relative;top:auto;height:auto;min-height:0;overflow:visible;border:0;background:transparent; }
  .future-horizontal__topbar { position:relative;padding:20px 0; }
  .future-horizontal__topbar > span { display:none; }
  .future-horizontal__track { width:100%;height:auto;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;transform:none!important;scrollbar-width:none; }
  .future-horizontal__track::-webkit-scrollbar { display:none; }
  .future-panel,.future-panel:nth-child(even) { flex:0 0 88vw;grid-template-columns:1fr;align-content:start;gap:24px;width:88vw;height:auto;min-height:610px;padding:28px 0 20px;scroll-snap-align:start; }
  .future-panel:nth-child(even) .future-panel__copy { order:initial; }
  .future-panel__copy { opacity:1;transform:none;padding:0 10px; }
  .future-panel__copy h3 { font-size:34px; }
  .future-panel__media,.future-panel:nth-child(even) .future-panel__media { width:100%;opacity:1;transform:none;border-radius:0; }
  .future-horizontal__scene-nav { position:relative;right:auto;bottom:auto;left:auto;display:flex;margin-top:12px;overflow-x:auto;border-top:1px solid rgba(47,93,127,.14);scrollbar-width:none; }
  .future-horizontal__scene-nav::-webkit-scrollbar { display:none; }
  .future-horizontal__scene-nav button { flex:0 0 132px;min-height:64px; }
  .future-horizontal__progress { position:relative;left:auto;bottom:auto;margin-top:8px; }
  .future-horizontal__progress > div { flex:1; }
}

@media (prefers-reduced-motion: reduce) {
  .future-panel__copy,.future-panel__media { opacity:1;transform:none;transition:none; }
  .future-horizontal__track { scroll-behavior:auto; }
}