/* Final interaction and responsive polish */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

html { -webkit-text-size-adjust: 100%; }
img, svg { max-width: 100%; }
.company > *,
.work-heading > *,
.services-heading > *,
.proof > *,
.clients-head > *,
.quote > *,
.contact > *,
footer > * { min-width: 0; }

.hero-copy.visible h1 {
  animation: hero-rise .85s cubic-bezier(.2,.75,.2,1) both;
}

.hero-copy.visible > p {
  animation: hero-rise .85s .1s cubic-bezier(.2,.75,.2,1) both;
}

.hero-copy.visible .hero-actions {
  animation: hero-rise .85s .2s cubic-bezier(.2,.75,.2,1) both;
}

.button-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.button-primary::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -45%;
  width: 28%;
  background: rgba(255,255,255,.28);
  transform: skewX(-20deg);
  transition: left .55s ease;
  z-index: 0;
  pointer-events: none;
}

.button-primary:hover::after { left: 125%; }

.capability-ribbon {
  background: linear-gradient(100deg, #ff6433, #f2492c 58%, #1b68ff 145%);
}

.ribbon-track a {
  position: relative;
}

.ribbon-track a::after {
  content: "↗";
  opacity: 0;
  transform: translate(-8px, 4px);
  transition: opacity .2s, transform .2s;
}

.ribbon-track a:hover::after {
  opacity: 1;
  transform: none;
}

.service { position: relative; }

.service:has(button[aria-expanded="true"]) {
  background: linear-gradient(90deg, rgba(27,104,255,.12), rgba(27,104,255,.035) 70%, transparent);
}

.service:has(button[aria-expanded="true"]) button strong {
  color: var(--sky);
}

.credential-row > div,
.proof-grid article {
  transition: background .25s ease, transform .25s ease;
}

.credential-row > div:hover {
  background: rgba(255,255,255,.1);
}

.proof-grid article:hover {
  background: #fff;
  transform: translateY(-4px);
}

.client-sector::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--orange), var(--blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}

.client-sector:hover::after { transform: scaleX(1); }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 980px) {
  .hero-proof strong { line-height: 1.25; }
  .hero-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .services-heading,
  .work-heading,
  .clients-head { gap: 1.25rem; }
}

@media (max-width: 620px) {
  h1 {
    font-size: clamp(2.7rem, 13.4vw, 3.55rem);
    line-height: 1.02;
  }

  .hero {
    display: block;
    min-height: auto;
  }

  .hero-copy {
    min-height: calc(100svh - 74px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: clamp(3rem, 11vh, 5rem);
    padding-bottom: 3rem;
  }

  .hero-proof {
    position: relative;
    inset: auto;
    width: 100%;
    grid-template-columns: 1fr;
  }

  .hero-proof div {
    min-width: 0;
    gap: 1rem;
  }

  .hero-proof strong {
    max-width: 58%;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .hero-proof small { flex: 1 1 auto; }

  .ribbon-track a {
    min-width: 190px;
    padding: 1rem 1.1rem;
  }

  .service button {
    padding: 1.45rem 0;
    gap: .75rem;
  }

  .service button strong {
    font-size: clamp(1.08rem, 5.3vw, 1.4rem);
  }

  .service-panel > p,
  .service-panel ul {
    margin-left: 0;
  }

  .service-panel > p {
    padding-right: .5rem;
  }

  .contact-links strong,
  footer p {
    overflow-wrap: anywhere;
  }

  .work-card,
  .work-card-large {
    min-height: 430px;
  }
}

@media (max-width: 360px) {
  .header { padding-inline: 1rem; }
  .logo { width: 178px; }
  .hero-copy { padding-inline: 1rem; }
  .hero-proof div { padding-inline: 1rem; }
  .section { padding-inline: 1rem; }
  .hero-actions { width: 100%; }
  .service button { grid-template-columns: 28px 1fr 36px; }
  .service button i { width: 34px; height: 34px; }
  .service button i::before,
  .service button i::after { left: 10px; top: 16px; }
}

@media (hover: none) {
  .client-sector:hover,
  .proof-grid article:hover,
  .button-primary:hover { transform: none; }
  .ribbon-track a::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy.visible h1,
  .hero-copy.visible > p,
  .hero-copy.visible .hero-actions { animation: none; }
  .button-primary::after { display: none; }
}