/* Native scrolling, timed text entries and restrained photographic motion. */
html { scrollbar-gutter:stable; }
body:is(.menu-open,.search-open,.experience-open,.explore-open) { overflow:hidden; }
.motion-line { display:block; }

/* The original one-shot reveal observer remains available to the base page. */
body.js-ready.motion-ready .reveal:not([data-motion]) {
  opacity:1;
  transform:none;
  transition:none;
}
body.motion-ready .motion-target[data-motion] {
  --motion-distance:32px;
  --motion-scale:1;
  --motion-blur:5px;
  --motion-duration:850ms;
  opacity:0;
  transform:translate3d(0,var(--motion-distance),0) scale(var(--motion-scale));
  filter:blur(var(--motion-blur));
  transition:opacity var(--motion-duration) ease,transform var(--motion-duration) cubic-bezier(.22,.74,.18,1),filter calc(var(--motion-duration)*.85) ease;
  transition-delay:var(--motion-delay,0ms);
}
body.motion-ready .motion-target[data-motion="headline"] {
  --motion-distance:38px;
  --motion-duration:1050ms;
  --motion-blur:7px;
}
body.motion-ready .motion-target[data-motion="media"] {
  --motion-distance:64px;
  --motion-duration:1200ms;
  --motion-scale:.965;
  --motion-blur:3px;
  transform-origin:center 28%;
}
body.motion-ready .motion-target[data-motion="card"] {
  --motion-distance:40px;
  --motion-duration:950ms;
  --motion-blur:3px;
}
body.motion-ready .motion-target[data-motion].motion-entered,
body.motion-ready .motion-target[data-motion]:focus-within {
  opacity:1;
  transform:none;
  filter:none;
}
body.motion-ready .motion-target[data-motion].motion-instant,
body.motion-ready .motion-target[data-motion]:focus-within {
  transition:none;
}
.hero-stage-image {
  transform:translate3d(0,var(--hero-media-y,0px),0) scale(var(--hero-media-scale,1.055));
  transform-origin:center;
}
.hero-stage.motion-media-active .hero-stage-image { will-change:transform; }

/* The global navigation leaves with the document; its local counterpart floats. */
body.motion-ready .site-header {
  position:relative;
  top:auto;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.motion-ready .local-bar {
  position:relative;
  min-height:var(--local-bar-height,64px);
}
body.nav-floating .local-inner {
  position:fixed;
  top:10px;
  left:50%;
  z-index:110;
  width:min(1044px,calc(100% - 32px));
  min-height:60px;
  padding-inline:25px;
  border:1px solid #ffffff21;
  border-radius:20px;
  background:rgba(24,24,26,.91);
  box-shadow:0 8px 35px #0003;
  backdrop-filter:blur(24px) saturate(1.35);
  -webkit-backdrop-filter:blur(24px) saturate(1.35);
  transform:translateX(-50%);
  animation:local-navigation-enter .4s cubic-bezier(.22,.74,.18,1) both;
}
body.motion-ready .site-search {
  position:fixed;
  top:84px;
  left:50%;
  right:auto;
  width:min(1044px,calc(100% - 32px));
  max-height:calc(100dvh - 104px);
  overflow:auto;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 24px 80px #0008;
  transform:translateX(-50%);
  z-index:125;
}
@keyframes local-navigation-enter {
  from { opacity:0; transform:translate(-50%,-12px); }
  to { opacity:1; transform:translate(-50%,0); }
}

.approach-cinematic .approach-grid { display:block; text-align:center; }
.approach-cinematic .approach-grid > :first-child { max-width:960px; margin-inline:auto; }
.approach-cinematic h2 { max-width:960px; margin-inline:auto; font-size:clamp(52px,6.1vw,78px); }
.approach-cinematic .approach-copy { max-width:760px; margin:34px auto 0; padding:0; font-size:17px; line-height:1.65; }
.approach-cinematic .approach-copy .lead { max-width:700px; margin-inline:auto; font-size:24px; }
.approach-cinematic .approach-copy p + p { margin-top:21px; }
.approach-cinematic .approach-copy strong { color:var(--paper); font-weight:500; }

/* Three photographs settle from a compact stack into an open composition. */
.motion-fan {
  --fan-drift:0px;
  position:relative;
  width:100%;
  height:clamp(340px,43vw,545px);
  margin:85px auto 0;
  isolation:isolate;
}
.motion-fan > figure {
  --photo-x:0%;
  --photo-y:0px;
  --photo-angle:0deg;
  position:absolute;
  top:0;
  left:50%;
  width:38%;
  margin:0;
  opacity:1;
  transform:translate(calc(-50% + var(--photo-x)),calc(var(--photo-y) + var(--fan-drift))) rotate(var(--photo-angle));
  transform-origin:center 72%;
}
.motion-fan > figure:nth-child(1) { --photo-x:-80%; --photo-y:25px; --photo-angle:-8deg; z-index:1; }
.motion-fan > figure:nth-child(2) { z-index:3; }
.motion-fan > figure:nth-child(3) { --photo-x:80%; --photo-y:25px; --photo-angle:8deg; z-index:2; }
.motion-fan > figure > img { width:100%; aspect-ratio:1.05; height:auto; object-fit:cover; border-radius:23px; box-shadow:0 24px 60px #0006; }
.motion-fan figcaption { margin-top:19px; text-align:center; font-size:15px; font-weight:500; letter-spacing:-.015em; color:var(--muted); }
body.motion-ready .motion-fan > figure {
  opacity:0;
  --photo-x:-5%;
  --photo-y:46px;
  --photo-angle:-15deg;
  transition:transform 1300ms cubic-bezier(.2,.75,.18,1),opacity 800ms ease;
}
body.motion-ready .motion-fan > figure:nth-child(2) { --photo-x:0%; --photo-y:18px; --photo-angle:0deg; transition-delay:65ms; }
body.motion-ready .motion-fan > figure:nth-child(3) { --photo-x:5%; --photo-y:46px; --photo-angle:15deg; transition-delay:130ms; }
body.motion-ready .motion-fan.motion-entered > figure { opacity:1; }
body.motion-ready .motion-fan.motion-entered > figure:nth-child(1) { --photo-x:-80%; --photo-y:25px; --photo-angle:-8deg; }
body.motion-ready .motion-fan.motion-entered > figure:nth-child(2) { --photo-x:0%; --photo-y:0px; --photo-angle:0deg; }
body.motion-ready .motion-fan.motion-entered > figure:nth-child(3) { --photo-x:80%; --photo-y:25px; --photo-angle:8deg; }
body.motion-ready .motion-fan.motion-settled > figure { transition:none; }
body.motion-ready.motion-priming .motion-target[data-motion],
body.motion-ready.motion-priming .motion-fan > figure { transition:none; }

@media(max-width:760px) {
  body.motion-ready .local-bar { min-height:var(--local-bar-height,60px); }
  body.nav-floating .local-inner { top:8px; width:calc(100% - 24px); min-height:58px; padding-inline:17px; gap:12px; border-radius:18px; }
  body.nav-floating .local-title { font-size:17px; }
  body.motion-ready .site-nav { top:100%; }
  body.nav-floating .site-nav { top:calc(100% + 8px); padding:18px 22px 23px; border:1px solid var(--line); border-radius:20px; background:rgba(24,24,26,.98); box-shadow:0 20px 60px #0007; }
  body.motion-ready .site-search { top:77px; width:calc(100% - 24px); }
  body.motion-ready .motion-target[data-motion] { --motion-distance:26px; --motion-blur:4px; --motion-duration:800ms; }
  body.motion-ready .motion-target[data-motion="media"] { --motion-distance:42px; --motion-duration:1050ms; }
  .approach-cinematic h2 { max-width:590px; font-size:43px; }
  .approach-cinematic .approach-copy { margin-top:28px; font-size:15px; max-width:570px; }
  .approach-cinematic .approach-copy .lead { font-size:22px; max-width:470px; }
  .motion-fan { height:clamp(285px,62vw,420px); margin-top:64px; }
  .motion-fan > figure { width:44%; }
  .motion-fan > figure > img { aspect-ratio:.88; border-radius:17px; }
  .motion-fan figcaption { font-size:12px; margin-top:14px; }
  .motion-fan > figure:nth-child(1),body.motion-ready .motion-fan.motion-entered > figure:nth-child(1) { --photo-x:-58%; --photo-y:22px; --photo-angle:-8deg; }
  .motion-fan > figure:nth-child(3),body.motion-ready .motion-fan.motion-entered > figure:nth-child(3) { --photo-x:58%; --photo-y:22px; --photo-angle:8deg; }
  body.motion-ready .motion-fan:not(.motion-entered) > figure:nth-child(1) { --photo-x:-5%; --photo-y:38px; --photo-angle:-15deg; }
  body.motion-ready .motion-fan:not(.motion-entered) > figure:nth-child(3) { --photo-x:5%; --photo-y:38px; --photo-angle:15deg; }
}
@media(max-width:480px) {
  .approach-cinematic h2 { font-size:clamp(35px,10vw,43px); }
  .motion-fan { height:280px; margin-top:55px; }
  .motion-fan > figure { width:45%; }
  .motion-fan figcaption { font-size:10px; }
}

body.motion-ready.motion-reduced .motion-target[data-motion] {
  opacity:1;
  transform:none;
  filter:none;
  transition:none;
}
body.motion-reduced .hero-stage-image { transform:none; will-change:auto; }
body.motion-reduced .local-inner,body.motion-reduced .motion-fan > figure { animation:none; transition:none; }
@media(prefers-reduced-motion:reduce) {
  body.motion-ready .motion-target[data-motion] { opacity:1; transform:none; filter:none; transition:none; }
  .hero-stage-image { transform:none; }
  .motion-fan > figure { transition:none!important; }
  body.nav-floating .local-inner { animation:none; }
}
