/* Revision 24 — stable experience header, long axis arrows and viewport-aware details. */
.experienceCopy h2 i{
  display:block;
  position:relative;
  flex:1 1 auto;
  min-width:72px;
  height:1px;
  margin:0 clamp(16px,2.5vw,38px);
  padding:0!important;
  border:0;
  background:rgba(27,196,243,.78);
  color:transparent;
  font-size:0!important;
  transform:none;
}
.experienceCopy h2 i::before,.experienceCopy h2 i::after{
  content:"";
  position:absolute;
  top:-4px;
  width:0;
  height:0;
  border:0;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transform:none;
}
.experienceCopy h2 i::before{left:-1px;border-right:7px solid var(--cyan)}
.experienceCopy h2 i::after{right:-1px;border-left:7px solid var(--cyan)}

.experienceNode.detailAbove .nodeDetail{top:auto;bottom:calc(100% + 10px)}
.experienceNode.detailLeft .nodeDetail{left:auto;right:0}
.experienceLandscape:has(.experienceNode:hover),.experienceLandscape:has(.experienceNode:focus-visible),.experienceLandscape:has(.experienceNode[aria-expanded='true']){z-index:15}
.experienceNode .nodeDetail{translate:var(--detail-shift-x,0) var(--detail-shift-y,0)}

@media(max-width:900px){
  .experienceCopy h2 i{min-width:48px;margin:0 10px}
  .experienceNode.detailLeft .nodeDetail{left:auto;right:0;transform:translateY(6px)}
  .experienceNode.detailLeft:hover .nodeDetail,.experienceNode.detailLeft:focus-visible .nodeDetail,.experienceNode.detailLeft[aria-expanded='true'] .nodeDetail{transform:none}
  .experienceNode.detailAbove .nodeDetail{top:auto;bottom:calc(100% + 9px)}
}

@media(max-width:520px){
  .heroState{height:100svh;min-height:680px}
  .heroPhoto{
    inset:0;
    background-size:auto 72%;
    background-position:65% 4%;
    background-repeat:no-repeat;
    filter:saturate(.78) contrast(1.04) brightness(.92);
    transform:none;
  }
  .heroVeil{
    background:
      linear-gradient(0deg,var(--navy) 0 18%,rgba(22,27,40,.78) 37%,rgba(22,27,40,.12) 62%,transparent 74%),
      linear-gradient(90deg,rgba(22,27,40,.38),rgba(22,27,40,.06) 72%,transparent);
  }
  .heroStatement{top:auto;bottom:22%;transform:translateX(-50%)}
  .heroStatement .stateLabel{margin-bottom:12px}
  .heroStatement h1{font-size:16vw;line-height:.79}
  .principle{bottom:8%;max-width:none;white-space:nowrap;font-size:clamp(.46rem,1.85vw,.55rem);letter-spacing:.09em}
  .location{bottom:2.5%;font-size:.49rem}
  .location span{display:block}
  .nodeDetail{position:absolute}
}

@media(max-width:380px){
  .heroStatement{bottom:23%}
  .heroStatement h1{font-size:15.5vw}
  .location{font-size:.45rem}
}

@media(prefers-reduced-motion:reduce){.heroPhoto{animation:none}}