/* Homepage */

/* First paint has to match the hero band. Without a seed value the environmental
   layer starts on --bg-page and then crossfades to blue for 1200ms once
   theme-transition.js sets --theme-bg, which reads as a load glitch. The script
   writes the same value inline, so scroll transitions still take over. */
html {
  --theme-bg: var(--bg-signal);
}

/* Theme-specific refinement */

.section-shell[data-theme="blue"] .section-lead {
  opacity: 0.88;
}

.section-shell[data-theme="dark"] .section-lead {
  opacity: 0.74;
}

.section-shell[data-theme="mineral-deep"] .section-lead {
  opacity: 0.74;
}

/* Hero identity system map */

.section--hero {
  isolation: isolate;
  overflow: visible;
}

.section--hero > .section-inner {
  z-index: 3;
}

@media (max-width: 1024px) {

  .section--hero {
    min-height: 50vh;
  }

}

.hero-system-map {
  position: absolute;
  z-index: 2;
  top: 48%;
  right: max(32px, var(--section-padding-x));
  box-sizing: content-box;
  width: min(46.2vw, 744px);
  max-width: calc(66% - var(--section-padding-x));
  padding-top: calc(var(--space-6) + var(--space-6));
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.82;
}

.hero-system-map__svg {
  display: block;
  overflow: visible;
  width: 100%;
  height: auto;
}

.hero-system-map {
  --map-ease: cubic-bezier(0.33, 1, 0.45, 1);
  --map-arc-draw: 0.675s;
  --map-arc-outer-delay: 0.72s;
  --map-arc-mid-outer-delay: 1.02s;
  --map-arc-middle-delay: 1.32s;
  --map-arc-inner-delay: 1.62s;
  --map-callout-draw: 0.4s;
  --map-node-touch-in: 0.35s;
  --map-label-expand: 1.238s;
  --map-label-callout-overlap: 0.7;
  --map-label-pulse-identity: 2.55s;
  --map-label-pulse-structure: 3.15s;
  --map-label-pulse-system: 2.85s;
  --map-label-pulse-experience: 3.35s;
  --map-label-pulse-phase-identity: 0s;
  --map-label-pulse-phase-structure: 0.62s;
  --map-label-pulse-phase-system: 1.18s;
  --map-label-pulse-phase-experience: 0.34s;
}

.hero-system-map .map-lines .map-line {
  stroke: currentColor;
}

.hero-system-map .map-lines .map-line--ring {
  fill: none;
}

.hero-system-map .map-grid,
.hero-system-map .map-dot-field {
  opacity: 0.5;
}

.hero-system-map .map-lines--main .map-line--ring-solid,
.hero-system-map .map-arc {
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  opacity: 0.46;
}

.hero-system-map .map-lines--main .map-line--ring-dashed,
.hero-system-map .map-guide {
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 5 11;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  opacity: 0.3;
}

.hero-system-map .map-crosshairs .map-crosshair,
.hero-system-map .map-crosshairs .map-dot {
  stroke: currentColor;
  fill: none;
  opacity: 0.33;
  transform-box: fill-box;
  transform-origin: center;
}

.hero-system-map .map-label-leaders .map-label-leader,
.hero-system-map .map-callout {
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  opacity: 0.42;
}

.hero-system-map .map-nodes .map-node {
  fill: currentColor;
  opacity: 0.9;
  transform-box: fill-box;
  transform-origin: center;
}

.hero-system-map .map-labels .map-label {
  fill: currentColor;
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  dominant-baseline: alphabetic;
}

@media (prefers-reduced-motion: no-preference) {

  .hero-system-map .map-dot-field {
    opacity: 0;
    animation-name: hero-map-dot-field-in;
    animation-duration: 0.6s;
    animation-timing-function: var(--map-ease);
    animation-fill-mode: both;
  }

  .hero-system-map .map-crosshairs .map-dot {
    opacity: 0;
    transform: scale(0.92);
    animation-name: hero-map-dot-in, hero-map-crosshair-pulse;
    animation-duration: 0.35s, 2.4s;
    animation-timing-function: var(--map-ease), ease-in-out;
    animation-fill-mode: both, none;
    animation-iteration-count: 1, infinite;
  }

  .hero-system-map .map-crosshairs .map-dot:nth-child(1) { animation-delay: 0.2s, 3.6s; }
  .hero-system-map .map-crosshairs .map-dot:nth-child(2) { animation-delay: 0.24s, 3.68s; }
  .hero-system-map .map-crosshairs .map-dot:nth-child(3) { animation-delay: 0.28s, 3.76s; }
  .hero-system-map .map-crosshairs .map-dot:nth-child(4) { animation-delay: 0.32s, 3.84s; }
  .hero-system-map .map-crosshairs .map-dot:nth-child(5) { animation-delay: 0.36s, 3.92s; }

  .hero-system-map .map-guide {
    opacity: 0;
    animation-name: hero-map-guide-in;
    animation-duration: 0.3s;
    animation-timing-function: var(--map-ease);
    animation-fill-mode: both;
  }

  .hero-system-map .map-guide--outer { animation-delay: 0.35s; }
  .hero-system-map .map-guide--mid-outer { animation-delay: 0.42s; }
  .hero-system-map .map-guide--middle { animation-delay: 0.49s; }
  .hero-system-map .map-guide--inner { animation-delay: 0.56s; }

  .hero-system-map .map-arc {
    opacity: 0;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation-name: hero-map-arc-draw;
    animation-duration: var(--map-arc-draw);
    animation-timing-function: var(--map-ease);
    animation-fill-mode: both;
  }

  .hero-system-map .map-arc--outer { animation-delay: var(--map-arc-outer-delay); }
  .hero-system-map .map-arc--mid-outer { animation-delay: var(--map-arc-mid-outer-delay); }
  .hero-system-map .map-arc--middle { animation-delay: var(--map-arc-middle-delay); }
  .hero-system-map .map-arc--inner { animation-delay: var(--map-arc-inner-delay); }

  .hero-system-map .map-arc-layer {
    opacity: 1;
  }

  .hero-system-map .map-arc-layer--outer,
  .hero-system-map .map-arc-layer--middle,
  .hero-system-map .map-arc-layer--inner {
    animation-name: hero-map-arc-layer-breathe;
    animation-duration: 12s;
    animation-timing-function: ease-in-out;
    animation-delay: 3.6s;
    animation-iteration-count: infinite;
  }

  .hero-system-map .map-arc-layer--middle { animation-delay: 3.75s; }
  .hero-system-map .map-arc-layer--inner { animation-delay: 3.9s; }

  .hero-system-map .map-node {
    opacity: 0;
    transform: scale(0.9);
    animation-name: hero-map-node-in, hero-map-node-pulse;
    animation-duration: var(--map-node-touch-in), 2.4s;
    animation-timing-function: var(--map-ease), ease-in-out;
    animation-fill-mode: both, none;
    animation-iteration-count: 1, infinite;
  }

  /* Nodes: experience (label) → outer, structure → mid-outer, system → middle, identity (label) → inner */
  .hero-system-map .map-nodes .map-node-layer:nth-child(1) .map-node {
    animation-delay:
      calc(var(--map-arc-outer-delay) + var(--map-arc-draw)),
      3.6s;
  }

  .hero-system-map .map-nodes .map-node-layer:nth-child(2) .map-node {
    animation-delay:
      calc(var(--map-arc-mid-outer-delay) + var(--map-arc-draw)),
      3.7s;
  }

  .hero-system-map .map-nodes .map-node-layer:nth-child(3) .map-node {
    animation-delay:
      calc(var(--map-arc-middle-delay) + var(--map-arc-draw)),
      3.8s;
  }

  .hero-system-map .map-nodes .map-node-layer:nth-child(4) .map-node {
    animation-delay:
      calc(var(--map-arc-inner-delay) + var(--map-arc-draw)),
      3.9s;
  }

  .hero-system-map .map-callout {
    opacity: 0;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation-name: hero-map-callout-draw;
    animation-duration: var(--map-callout-draw);
    animation-timing-function: var(--map-ease);
    animation-fill-mode: both;
  }

  .hero-system-map .map-callout--identity {
    animation-delay: calc(var(--map-arc-outer-delay) + var(--map-arc-draw));
  }

  .hero-system-map .map-callout--structure {
    animation-delay: calc(var(--map-arc-mid-outer-delay) + var(--map-arc-draw));
  }

  .hero-system-map .map-callout--system {
    animation-delay: calc(var(--map-arc-middle-delay) + var(--map-arc-draw));
  }

  .hero-system-map .map-callout--experience {
    animation-delay: calc(var(--map-arc-inner-delay) + var(--map-arc-draw));
  }

  .hero-system-map .map-labels .map-label {
    opacity: 0;
    clip-path: inset(-20% 100% -20% 0);
    animation-name: hero-map-label-expand, hero-map-label-pulse;
    animation-timing-function: var(--map-ease), ease-in-out;
    animation-fill-mode: forwards, none;
    animation-iteration-count: 1, infinite;
  }

  .hero-system-map .map-labels .map-label--identity {
    animation-duration: var(--map-label-expand), var(--map-label-pulse-identity);

    animation-delay:
      calc(
        var(--map-arc-outer-delay) + var(--map-arc-draw) +
        var(--map-callout-draw) * var(--map-label-callout-overlap)
      ),
      calc(
        var(--map-arc-outer-delay) + var(--map-arc-draw) +
        var(--map-callout-draw) * var(--map-label-callout-overlap) +
        var(--map-label-expand) + var(--map-label-pulse-phase-identity)
      );
  }

  .hero-system-map .map-labels .map-label--structure {
    animation-duration: var(--map-label-expand), var(--map-label-pulse-structure);

    animation-delay:
      calc(
        var(--map-arc-mid-outer-delay) + var(--map-arc-draw) +
        var(--map-callout-draw) * var(--map-label-callout-overlap)
      ),
      calc(
        var(--map-arc-mid-outer-delay) + var(--map-arc-draw) +
        var(--map-callout-draw) * var(--map-label-callout-overlap) +
        var(--map-label-expand) + var(--map-label-pulse-phase-structure)
      );
  }

  .hero-system-map .map-labels .map-label--system {
    animation-duration: var(--map-label-expand), var(--map-label-pulse-system);

    animation-delay:
      calc(
        var(--map-arc-middle-delay) + var(--map-arc-draw) +
        var(--map-callout-draw) * var(--map-label-callout-overlap)
      ),
      calc(
        var(--map-arc-middle-delay) + var(--map-arc-draw) +
        var(--map-callout-draw) * var(--map-label-callout-overlap) +
        var(--map-label-expand) + var(--map-label-pulse-phase-system)
      );
  }

  .hero-system-map .map-labels .map-label--experience {
    animation-duration: var(--map-label-expand), var(--map-label-pulse-experience);

    animation-delay:
      calc(
        var(--map-arc-inner-delay) + var(--map-arc-draw) +
        var(--map-callout-draw) * var(--map-label-callout-overlap)
      ),
      calc(
        var(--map-arc-inner-delay) + var(--map-arc-draw) +
        var(--map-callout-draw) * var(--map-label-callout-overlap) +
        var(--map-label-expand) + var(--map-label-pulse-phase-experience)
      );
  }

}


@keyframes hero-map-dot-field-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.5;
  }
}

@keyframes hero-map-dot-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 0.33;
    transform: scale(1);
  }
}

@keyframes hero-map-guide-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.3;
  }
}

@keyframes hero-map-arc-draw {
  from {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  to {
    opacity: 0.46;
    stroke-dashoffset: 0;
    stroke-dasharray: none;
  }
}

@keyframes hero-map-callout-draw {
  from {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  to {
    stroke-dashoffset: 0;
    stroke-dasharray: none;
    opacity: 0.42;
  }
}

@keyframes hero-map-node-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 0.9;
    transform: scale(1);
  }
}

@keyframes hero-map-label-expand {
  0% {
    opacity: 0.4;
    clip-path: inset(-20% calc(100% - 0.72em) -20% 0);
  }

  8% {
    opacity: 0.4;
    clip-path: inset(-20% calc(100% - 0.72em) -20% 0);
  }

  100% {
    opacity: 0.4;
    clip-path: inset(-20% 0 -20% 0);
  }
}

@keyframes hero-map-label-pulse {
  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.8;
  }
}

@keyframes hero-map-arc-layer-breathe {
  0%,
  100% {
    opacity: 0.97;
  }

  50% {
    opacity: 1;
  }
}

@keyframes hero-map-crosshair-pulse {
  0%,
  100% {
    opacity: 0.33;
    transform: scale(1);
  }

  50% {
    opacity: var(--opacity-interactive-subtle);
    transform: scale(1.45);
  }
}

@keyframes hero-map-node-pulse {
  0%,
  100% {
    opacity: 0.9;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.38);
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-system-map .map-dot-field,
  .hero-system-map .map-dot,
  .hero-system-map .map-guide,
  .hero-system-map .map-arc,
  .hero-system-map .map-arc-layer,
  .hero-system-map .map-node,
  .hero-system-map .map-node-layer,
  .hero-system-map .map-callout,
  .hero-system-map .map-label {
    animation: none;
  }

  .hero-system-map .map-grid,
  .hero-system-map .map-dot-field {
    opacity: 0.5;
  }

  .hero-system-map .map-lines--main .map-line--ring-solid,
  .hero-system-map .map-arc {
    opacity: 0.46;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .hero-system-map .map-arc-layer {
    opacity: 1;
  }

  .hero-system-map .map-lines--main .map-line--ring-dashed,
  .hero-system-map .map-guide {
    opacity: 0.3;
    stroke-dasharray: 5 11;
    stroke-dashoffset: 0;
  }

  .hero-system-map .map-crosshairs .map-crosshair,
  .hero-system-map .map-crosshairs .map-dot {
    opacity: 0.33;
    transform: none;
  }

  .hero-system-map .map-label-leaders .map-label-leader,
  .hero-system-map .map-callout {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0.42;
  }

  .hero-system-map .map-node-layer {
    opacity: 1;
  }

  .hero-system-map .map-nodes .map-node {
    opacity: 0.9;
    transform: none;
  }

  .hero-system-map .map-labels .map-label {
    opacity: 0.4;
    clip-path: none;
  }
}

/* Selected work — homepage spacing */

#selected-work {
  --selected-work-column-gap: clamp(var(--space-3), 0.75vw, var(--space-4));
  --selected-work-section-gap: clamp(var(--space-6), 3.5vw, var(--space-8));
  --selected-work-desc-max-ch: 42ch;
}

#selected-work .work-feature {
  margin-top: 0;
}

#selected-work .work-feature + .work-index,
#selected-work .work-index-cta + .work-index {
  margin-top: var(--selected-work-section-gap);
}

@media (min-width: 761px) {

  #selected-work .work-feature-link {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--selected-work-column-gap);
    align-items: center;
  }

  #selected-work .work-feature-media {
    grid-column: 1 / span 3;
  }

  #selected-work .work-feature-content {
    grid-column: 4 / span 3;
    max-width: none;
    padding-left: var(--space-8);
  }
}

#selected-work .work-feature-title {
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
}

#selected-work .work-feature-description {
  max-width: var(--selected-work-desc-max-ch, 42ch);
}

@media (max-width: 760px) {

  #selected-work .work-feature-title {
    font-size: clamp(var(--text-lg), 10vw, var(--text-2xl));
  }
}

#selected-work .work-index {
  overflow: visible;
  align-items: stretch;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--selected-work-column-gap);
  padding-bottom: var(--space-8);
}

#selected-work .work-index .work-card {
  position: relative;

  display: grid;
  overflow: visible;

  aspect-ratio: auto;

  background: transparent;
  outline: none;
  border-radius: 0;

  color: inherit;
  text-decoration: none;

  transform: translateY(0);

  transition: transform 0.41s ease-in-out;
}

#selected-work .work-index .work-card::before {
  content: "";
  grid-area: 1 / 1;

  width: 100%;
  aspect-ratio: 10 / 16;

  pointer-events: none;
}

#selected-work .work-index .work-card:focus-visible {
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  #selected-work .work-index .work-card:hover {
    transform: none;
  }
}

#selected-work .work-index .work-card--placeholder {
  pointer-events: auto;
  cursor: default;
}

#selected-work .work-index .work-card-media {
  position: relative;
  grid-area: 1 / 1;
  align-self: start;
  inset: auto;
  flex: none;

  overflow: hidden;

  width: 100%;
  aspect-ratio: 10 / 16;

  border-radius: var(--radius-card-compact);

  transform: translateY(0);

  transition:
    aspect-ratio 0.41s ease-in-out,
    transform 0.41s ease-in-out;
}

#selected-work .work-index .work-card:focus-visible .work-card-media {
  aspect-ratio: 10 / 14;
  transform: translateY(calc(var(--space-3) * -1));
}

@media (hover: hover) and (pointer: fine) {
  #selected-work .work-index .work-card:hover .work-card-media {
    aspect-ratio: 10 / 14;
    transform: translateY(calc(var(--space-3) * -1));
  }
}

#selected-work .work-index .work-card-media .work-card-image,
#selected-work .work-index .work-card-media .work-card-video {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  width: 100%;
  height: auto;
  aspect-ratio: 10 / 16;

  object-fit: cover;
  object-position: top center;

  opacity: 1;
  transform: none;

  transition: none;
}

#selected-work .work-index .work-card:focus-visible .work-card-media .work-card-image,
#selected-work .work-index .work-card:focus-visible .work-card-media .work-card-video {
  opacity: 1;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  #selected-work .work-index .work-card:hover .work-card-media .work-card-image,
  #selected-work .work-index .work-card:hover .work-card-media .work-card-video {
    opacity: 1;
    transform: none;
  }
}

#selected-work .work-index .work-card-media .work-card-arrow {
  position: absolute;
  z-index: 2;
  top: var(--space-2);
  right: var(--space-2);

  font-size: clamp(3rem, 3vw, 3.75rem);
  line-height: var(--leading-heading);
  color: var(--text-inverse-strong);

  opacity: 0;
  pointer-events: none;

  transform: translateY(var(--space-2));

  transition:
    opacity 0.28s ease-in,
    transform 0.28s ease-in;
}

#selected-work .work-index .work-card:focus-visible .work-card-media .work-card-arrow {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  #selected-work .work-index .work-card:hover .work-card-media .work-card-arrow {
    opacity: 1;
    transform: translateY(0);
  }
}

#selected-work .work-index .work-card-overlay {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  align-self: stretch;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto auto;
  row-gap: 0;
  align-items: end;

  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  background: transparent;
  opacity: 1;
  transform: none;

  pointer-events: none;

  transition: none;
}

#selected-work .work-index .work-card:focus-visible .work-card-overlay {
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  #selected-work .work-index .work-card:hover .work-card-overlay {
    background: transparent;
  }
}

#selected-work .work-index .work-card-meta {
  grid-column: 1;
  grid-row: 2;

  margin: 0 0 var(--space-2);

  font-size: var(--text-xs);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-body);
  font-weight: var(--weight-regular);

  opacity: 0;
  transform: translateY(var(--space-3));

  transition:
    opacity 0.28s ease-in,
    transform 0.28s ease-in;
}

#selected-work .work-index .work-card:focus-visible .work-card-meta {
  opacity: var(--opacity-interactive-subtle);
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  #selected-work .work-index .work-card:hover .work-card-meta {
    opacity: var(--opacity-interactive-subtle);
    transform: translateY(0);
  }
}

#selected-work .work-index .work-card-title {
  grid-column: 1;
  grid-row: 3;

  margin: 0;

  font-size: var(--text-lg);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-body);
  font-weight: var(--weight-regular);
  text-wrap: wrap;

  opacity: 0;
  transform: translateY(var(--space-3));

  transition:
    opacity 0.28s ease-in,
    transform 0.28s ease-in;
}

#selected-work .work-index .work-card:focus-visible .work-card-title {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  #selected-work .work-index .work-card:hover .work-card-title {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile: no overlay at all, regardless of input device — bare media only. */
@media (max-width: 760px) {
  #selected-work .work-index .work-card-overlay {
    display: none;
  }
}

/* Index CTA — 5th column (desktop + tablet) */

#selected-work .work-index .work-card--index-cta {
  background: transparent;
}

#selected-work .work-index .work-card-index-cta-panel {
  position: relative;

  grid-area: 1 / 1;
  align-self: stretch;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2);

  min-height: 100%;
  padding: var(--space-5);

  border-radius: var(--radius-card-compact);

  background: var(--mineral);
  color: var(--text-inverse-strong);

  transition: background-color 0.28s ease-in;
}

#selected-work .work-index .work-card-index-cta-label {
  display: flex;
  flex-direction: column;

  margin: 0;

  font-size: var(--text-lg-plus);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-body);
  font-weight: var(--weight-regular);

  text-wrap: balance;
}

#selected-work .work-index .work-card-index-cta-line {
  display: block;
}

@media (min-width: 761px) and (max-width: 1024px) {

  #selected-work .work-feature-content {
    padding-left: var(--space-4);
  }

  #selected-work .work-feature-content .btn--text {
    margin-top: calc(var(--space-8) * 0.7);
  }

  #selected-work .work-index .work-card-index-cta-label {
    font-size: var(--text-base);
  }
}

#selected-work .work-index .work-card-index-cta-arrow {
  font-size: clamp(3rem, 3vw, 3.75rem);
  line-height: var(--leading-heading);

  color: var(--text-inverse-strong);

  opacity: 0;
  pointer-events: none;

  transform: translateY(var(--space-2));

  transition:
    opacity 0.28s ease-in,
    transform 0.28s ease-in;
}

#selected-work .work-index .work-card--index-cta:focus-visible .work-card-index-cta-panel {
  background: var(--bg-signal);
}

#selected-work .work-index .work-card--index-cta:focus-visible .work-card-index-cta-arrow {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  #selected-work .work-index .work-card--index-cta:hover .work-card-index-cta-panel {
    background: var(--bg-signal);
  }

  #selected-work .work-index .work-card--index-cta:hover .work-card-index-cta-arrow {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 761px) {

  #selected-work .work-index-cta {
    display: none;
  }

  #selected-work .work-index {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));

    width: auto;
    margin-right: 0;

    overflow: visible;
    scroll-snap-type: none;
    padding-right: 0;
  }

  #selected-work .work-index .work-card {
    flex: unset;
    scroll-snap-align: unset;
  }
}

@media (max-width: 760px) {

  #selected-work .work-index .work-card--index-cta {
    display: none;
  }

  #selected-work .work-index {
    display: flex;
    gap: var(--selected-work-column-gap);

    width: calc(100% + var(--section-padding-x));
    margin-right: calc(var(--section-padding-x) * -1);

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    padding-right: var(--section-padding-x);
    scroll-padding-right: var(--section-padding-x);

    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  #selected-work .work-index::-webkit-scrollbar {
    display: none;
  }

  #selected-work .work-index .work-card:not(.work-card--index-cta) {
    flex: 0 0 40vw;
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  #selected-work .work-index .work-card {
    transition: none;
  }

  #selected-work .work-index .work-card:focus-visible {
    transform: none;
  }

  #selected-work .work-index .work-card-media {
    transition: none;
  }

  #selected-work .work-index .work-card:focus-visible .work-card-media {
    aspect-ratio: 10 / 16;
    transform: none;
  }

  #selected-work .work-index .work-card-media .work-card-arrow {
    opacity: 1;
    transform: none;
    transition: none;
  }

  #selected-work .work-index .work-card-meta {
    opacity: var(--opacity-interactive-subtle);
    transform: none;
    transition: none;
  }

  #selected-work .work-index .work-card-title {
    opacity: 1;
    transform: none;
    transition: none;
  }

  #selected-work .work-index .work-card--index-cta:focus-visible .work-card-index-cta-arrow {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  #selected-work .work-index .work-card:hover {
    transform: none;
  }

  #selected-work .work-index .work-card:hover .work-card-media {
    aspect-ratio: 10 / 16;
    transform: none;
  }

  #selected-work .work-index .work-card--index-cta:hover .work-card-index-cta-arrow {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 980px) and (min-width: 761px) {

  .hero-system-map {
    top: 48%;
    right: max(24px, var(--section-padding-x));
    width: min(43.2vw, 624px);
    max-width: calc(62.4% - var(--section-padding-x));
    opacity: 0.78;
  }
}

@media (max-width: 760px) {

  .section--hero:has(.hero-system-map) {
    padding-bottom: calc((var(--space-8) + var(--space-4)) * 0.4);
  }

  .section--hero:has(.hero-system-map) .section-title {
    margin-top: 231px;
  }

  .section--hero {
    overflow: hidden;
  }

  .hero-system-map .map-labels .map-label {
    font-size: 13px;
  }

  .hero-system-map {
    top: var(--section-padding-x);
    right: calc(-1 * var(--space-3));
    left: auto;
    width: min(100%, 408px);
    max-width: 100%;
    padding-top: calc(var(--space-6) + var(--space-6));
    transform: translateY(-5%);
    opacity: 0.68;
  }

  #selected-work.section--showcase {
    padding-top: calc(var(--section-padding-block-mobile) * 0.4);
  }
}