/* Orion's sitewide interaction and accessibility baseline. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #66d8ff;
  outline-offset: 3px;
}

:where(input, select, textarea):focus-visible {
  border-color: #66d8ff;
}

:where(a, button, input, select, textarea, summary) {
  -webkit-tap-highlight-color: rgba(102, 216, 255, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto !important;
  }

  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  video[autoplay] {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid CanvasText;
  }
}

/* Honest, reusable proof treatment: current work is published on Instagram. */
.instagram-proof-section {
  padding: clamp(72px, 9vw, 128px) 0;
  background: #0b0b0b;
}

.instagram-proof-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(32px, 6vw, 84px);
  padding: clamp(32px, 5vw, 64px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background:
    radial-gradient(circle at 88% 16%, rgba(255,255,255,.09), transparent 24rem),
    #101010;
}

.instagram-proof-copy {
  max-width: 760px;
}

.instagram-proof-copy h2 {
  margin: 14px 0 18px;
  color: #fff;
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: .98;
  letter-spacing: -.045em;
}

.instagram-proof-copy p,
.instagram-showcase-copy {
  max-width: 680px;
  color: rgba(255,255,255,.68);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
}

.instagram-proof-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: min(100%, 310px);
  min-height: 56px;
  padding: 15px 18px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 7px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.instagram-proof-link:hover {
  background: #fff;
  border-color: #fff;
  color: #080808;
}

.instagram-showcase {
  min-height: auto !important;
  padding: clamp(82px, 10vw, 132px) 0 !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(80, 170, 255, .18), transparent 28rem),
    #071522 !important;
}

.instagram-showcase .showreel-content {
  gap: 28px;
}

.instagram-showcase .showreel-title {
  margin-bottom: 18px;
}

.hero-instagram-proof {
  display: grid !important;
  place-items: center;
  min-height: clamp(360px, 46vw, 570px);
  background:
    linear-gradient(180deg, rgba(7,21,34,.08), rgba(7,21,34,.82)),
    radial-gradient(circle at 50% 35%, rgba(126,221,255,.22), transparent 17rem),
    #0b1620;
}

.instagram-proof-mark {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.16);
  font-size: clamp(120px, 20vw, 260px);
  font-weight: 950;
  line-height: 1;
  transform: translateY(-6%);
  text-shadow: 0 0 80px rgba(126,221,255,.18);
}

@media (max-width: 720px) {
  .instagram-proof-panel {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .instagram-proof-link {
    width: 100%;
  }
}