:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --motion-fast: 140ms;
  --motion-base: 180ms;
  --focus-ring: #20a6cf;
}

/* One restrained feedback system: quick press, clear keyboard focus, no blanket transitions. */
button,
a,
[role="button"],
summary {
  touch-action: manipulation;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.button,
.icon-button,
.chip,
.option,
.story-control,
.nav-item,
.capability-shortcut,
.capability-feature,
.capability-card,
.quick-card {
  transition:
    transform var(--motion-fast) var(--ease-out),
    color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-base) var(--ease-out);
}

.button:active,
.icon-button:active,
.chip:active,
.option:active,
.story-control:active,
.nav-item:active,
.capability-shortcut:active,
.capability-feature:active,
.capability-card:active,
.quick-card:active {
  transform: scale(.975);
}

/* Reveal on entry explains page changes; keep it short and stagger only in small groups. */
.motion-reveal {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 220ms var(--ease-out),
    transform 220ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Hover is reserved for a precise pointer. Phone taps never inherit hover lift. */
@media (hover: hover) and (pointer: fine) {
  .capability-shortcut:hover,
  .capability-feature:hover,
  .capability-card:hover,
  .quick-card:hover {
    transform: translateY(-2px);
  }

  .capability-feature:hover .capability-feature-image img,
  .capability-card:hover .capability-photo img,
  .direction-card:hover img {
    transform: scale(1.025);
  }

  .capability-shortcut:hover b,
  .capability-card:hover .capability-arrow {
    transform: translate(2px, -1px);
  }
}

.capability-feature,
.capability-card,
.capability-shortcut {
  animation: none;
}

/* Editorial: four equally weighted entry points in a calm 2×2 spread. */
.capability-featured {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(clamp(230px, 25vw, 310px), auto);
  gap: 12px;
  align-items: stretch;
}

.capability-feature {
  min-height: clamp(230px, 25vw, 310px);
  min-width: 0;
}

.capability-feature-image {
  height: 100%;
  min-height: inherit;
  aspect-ratio: auto;
}

.capability-feature-copy {
  min-width: 0;
}

.capability-feature-copy strong,
.capability-feature-copy small {
  overflow-wrap: anywhere;
}

@media (max-width: 1024px) and (min-width: 601px) {
  .capability-featured {
    gap: 10px;
  }

  .capability-feature {
    min-height: 220px;
  }
}

@media (max-width: 600px) {
  .capability-featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(clamp(170px, 51vw, 228px), auto));
    gap: 9px;
  }

  .capability-feature {
    min-height: clamp(170px, 51vw, 228px);
    border-radius: 15px;
  }

  .capability-feature-image {
    min-height: clamp(170px, 51vw, 228px);
  }

  .capability-feature-copy strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .capability-feature-copy small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}

/* Cancel legacy hover declarations on touch-only devices so taps never stick. */
@media (hover: none), (pointer: coarse) {
  .capability-shortcut:hover { background: #fbfaf6d9; border-color: #dce0d6; transform: none; }
  .capability-shortcut:hover b,
  .capability-card:hover .capability-arrow { transform: none; }
  .capability-card:hover { transform: none; border-color: #dfe1d9; box-shadow: none; }
  .capability-card:hover .capability-photo img,
  .capability-feature:hover .capability-feature-image img { transform: none; }
  .capability-feature:hover { transform: none; border-color: #d7e1e4; box-shadow: none; }
  .capability-feature:hover .capability-feature-arrow { transform: none; background: #12384977; }
  .capability-sites a:hover { background: #f8f8f2; border-color: #dce1d7; }
}

.capability-feature-image img,
.capability-photo img,
.direction-card img,
.card-media img {
  transition: transform 180ms var(--ease-out);
}

.capability-feature:focus-visible,
.capability-card:focus-visible,
.capability-shortcut:focus-visible,
.card:focus-visible,
.quick-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.story-track {
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}

.bottom-nav {
  padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 720px) {
  .header {
    padding-top: env(safe-area-inset-top, 0px);
  }

  .global-search input,
  .ask-box input,
  .ask-box textarea {
    font-size: 16px;
  }

  .story-control {
    width: 40px;
    height: 40px;
  }

  .toast {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  .sticky-action {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  .story-track {
    scroll-behavior: auto;
  }

  .motion-reveal,
  .motion-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .button:active,
  .icon-button:active,
  .chip:active,
  .option:active,
  .story-control:active,
  .nav-item:active,
  .capability-shortcut:active,
  .capability-feature:active,
  .capability-card:active,
  .quick-card:active,
  .capability-shortcut:hover,
  .capability-feature:hover,
  .capability-card:hover,
  .quick-card:hover,
  .capability-shortcut:hover b,
  .capability-card:hover .capability-arrow,
  .capability-feature:hover .capability-feature-image img,
  .capability-card:hover .capability-photo img,
  .direction-card:hover img {
    transform: none;
  }

  .button,
  .icon-button,
  .chip,
  .option,
  .story-control,
  .nav-item,
  .capability-shortcut,
  .capability-feature,
  .capability-card,
  .quick-card,
  .capability-feature-image img,
  .capability-photo img,
  .direction-card img,
  .card-media img {
    transition: color 120ms ease, background-color 120ms ease, opacity 120ms ease;
  }
}