/* Review-only layer. All palette, typography and dimensions come from Omega. */
[data-interaction-preview] .proof-grid dd {font-variant-numeric:tabular-nums}
[data-interaction-preview] .proof-grid dd.preview-counting {display:grid}
[data-interaction-preview] .proof-grid dd > :is(.preview-counter-original,.preview-counter-drawing) {
  grid-area:1/1;font:inherit;letter-spacing:inherit;color:inherit;margin:0;vertical-align:baseline;
}
[data-interaction-preview] .preview-counter-original {opacity:0}
[data-interaction-preview] .preview-counter-drawing {pointer-events:none}

[data-interaction-preview] .button {
  transition:background .22s,border-color .22s,transform .25s,box-shadow .25s;
}
[data-interaction-preview] .button:focus-visible {
  transform:translateY(-2px);box-shadow:0 6px 16px rgb(6 45 67 / .10);
}
[data-interaction-preview] .button:is(:hover,:focus-visible) > .icon {transform:translateX(6px)}
[data-interaction-preview] .button:active {transform:translateY(0);box-shadow:none}

[data-interaction-preview] .audience-card .text-link {position:relative}
[data-interaction-preview] .audience-card .text-link::before {
  content:"";position:absolute;inset:-1px 0 auto;height:2px;background:var(--turquoise);
  transform:scaleX(0);transform-origin:left;transition:transform .38s cubic-bezier(.22,.61,.36,1);
}
[data-interaction-preview] .audience-card:focus-within .text-link::before {transform:scaleX(1)}
[data-interaction-preview] .audience-card .text-link .icon,
[data-interaction-preview] .image-arrow {transition:background .25s,transform .3s}
[data-interaction-preview] .audience-card:focus-within .text-link .icon,
[data-interaction-preview] .project-card:focus-within .image-arrow {transform:translateX(3px)}

[data-interaction-preview] .project-image-link {position:relative}
[data-interaction-preview] .project-image-link::after {
  content:"";position:absolute;inset:0;border:2px solid var(--turquoise);
  border-radius:inherit;opacity:0;transition:opacity .25s;pointer-events:none;
}
[data-interaction-preview] .project-card:focus-within .project-image-link::after {opacity:1}
[data-interaction-preview] .project-copy h3 a {
  text-decoration:none;background:linear-gradient(var(--turquoise),var(--turquoise)) left bottom/0 2px no-repeat;
  transition:background-size .35s;
}
[data-interaction-preview] .project-card:focus-within .project-copy h3 a {background-size:100% 2px}
[data-interaction-preview] .service-photo {transition:transform .45s cubic-bezier(.22,.61,.36,1)}
[data-interaction-preview] .service-list > a:focus-visible .service-photo {transform:scale(1.04)}

@media (hover:hover) and (pointer:fine) {
  [data-interaction-preview] .button:hover {transform:translateY(-2px);box-shadow:0 6px 16px rgb(6 45 67 / .10)}
  [data-interaction-preview] .button:active {transform:translateY(0);box-shadow:none}
  [data-interaction-preview] .audience-card:hover .text-link::before {transform:scaleX(1)}
  [data-interaction-preview] .audience-card:hover .text-link .icon,
  [data-interaction-preview] .project-card:hover .image-arrow {transform:translateX(3px)}
  [data-interaction-preview] .project-card:hover .project-image-link::after {opacity:1}
  [data-interaction-preview] .project-card:hover .project-copy h3 a {background-size:100% 2px}
  [data-interaction-preview] .service-list > a:hover .service-photo {transform:scale(1.04)}
}

@media (prefers-reduced-motion:reduce) {
  [data-interaction-preview] *,[data-interaction-preview] *::before,[data-interaction-preview] *::after {
    transition:none!important;animation:none!important;scroll-behavior:auto!important;
  }
  [data-interaction-preview] .button,[data-interaction-preview] .button > .icon,
  [data-interaction-preview] .image-arrow,[data-interaction-preview] .audience-card .text-link .icon,
  [data-interaction-preview] .service-photo {transform:none!important}
}
@media print {
  [data-interaction-preview] .preview-counter-original {opacity:1}
  [data-interaction-preview] .preview-counter-drawing {display:none}
}