/* Small physical cues, with the photographs and typography doing the work. */
.hero-visual {
  box-shadow: 5px 6px 0 #bbc5b8, 0 20px 35px -25px #172f3550;
}

@media (prefers-reduced-motion: no-preference) {
  .button, .round-link, .sector-enquiry {
    transition: background-color 180ms ease, color 180ms ease, box-shadow 220ms ease;
  }
  .button > span[aria-hidden], .text-link > span[aria-hidden],
  .capability-strip a > span:last-child, .tab-arrow {
    display: inline-block;
    transition: transform 240ms cubic-bezier(.2,.7,.2,1);
  }
  .button:hover > span[aria-hidden], .button:focus-visible > span[aria-hidden],
  .capability-strip a:hover > span:last-child,
  .capability-tabs [role=tab]:hover .tab-arrow {
    transform: translate(2px,-2px);
  }
  .text-link:hover > span[aria-hidden], .text-link:focus-visible > span[aria-hidden] {
    transform: translateY(3px);
  }
  .sector-row { transition: border-color 220ms ease; }
  .sector-row:hover, .sector-row:focus-within { border-color: #b9a172; }
  .hero-selector button { position: relative; }
  .hero-selector button::after {
    content: "";
    position: absolute;
    inset: auto 0 -5px;
    height: 1px;
    background: #9c591d;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms ease;
  }
  .hero-selector button[aria-pressed=true]::after { transform: scaleX(1); }
}

@media (hover: hover) and (pointer: fine) and (min-width: 801px) and (prefers-reduced-motion: no-preference) {
  .depth-surface {
    transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform 550ms cubic-bezier(.2,.7,.2,1), box-shadow 350ms ease;
    backface-visibility: hidden;
  }
  .depth-surface.is-tilting {
    transition-duration: 140ms, 350ms;
    will-change: transform;
    box-shadow: 0 22px 35px -22px #10292f80;
  }
  .hero-visual.depth-surface.is-tilting {
    box-shadow: 5px 6px 0 #bbc5b8, 0 24px 38px -22px #172f3580;
  }
  .button:hover { box-shadow: 0 5px 0 -2px #172f352b; }
}

@media (max-width: 800px) {
  .hero-visual { box-shadow: 3px 4px 0 #bbc5b8; }
}

@media (prefers-reduced-motion: reduce) {
  .depth-surface { transform: none !important; }
  .project-card:hover img { transform: none; }
}

@media print {
  .depth-surface { transform: none !important; box-shadow: none !important; }
}