:root {
  --ease-out: cubic-bezier(.22,.72,.24,1);
  --ease-settle: cubic-bezier(.16,1,.3,1);
}
.hero-material { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.hero-art { z-index: 0; }
.hero-kicker { display: flex; align-items: center; gap: .6rem; margin-bottom: clamp(.9rem,1.5vw,1.45rem); color: #d8e3f0; font-size: .74rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.hero-kicker::before { content: ""; width: 2.3rem; height: 1px; background: #f79645; transform-origin: left; }
.hero-kicker > span { color: #efa461; }
.hero-line, .hero-line > span { display: block; }
.hero-line { overflow: clip; padding-bottom: .09em; margin-bottom: -.09em; }
.work-photo { overflow: hidden; border-radius: 4px; }
.work-frame img { border-radius: 0; }
.button { gap: .62em; }
.button::after, .resource-links a::after {
  content: ""; display: inline-block; flex: 0 0 auto; width: .86em; height: .78em; background: currentColor;
  clip-path: polygon(0 43%,73% 43%,47% 11%,59% 0,100% 50%,59% 100%,47% 89%,73% 57%,0 57%);
}
.resource-links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.resource-links a::after { color: var(--blue); }
.header-line nav a::after { content: ""; position: absolute; left: 0; bottom: 3px; width: 18px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; }
.header-line nav a:is([aria-current="page"],:focus-visible)::after { transform: scaleX(1); }
@media (min-width: 781px) {
  html { scroll-padding-top: 88px; }
  .top { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.94); backdrop-filter: saturate(125%) blur(14px); }
  .hire-sidebar { top: 88px; }
}
@media (max-width: 540px) {
  .hero { min-height: 389px; }
  .hero-kicker { font-size: .63rem; gap: .45rem; margin-bottom: .72rem; }
  .hero-kicker::before { width: 1.55rem; }
}
@media (hover: hover) {
  .header-line nav a:hover::after { transform: scaleX(1); }
  .work-frame:hover span, .rental-sample:hover span, .task:hover span { color: var(--blue); text-decoration: none; }
}

@keyframes line-arrive { from { transform: translateY(.46em); opacity: .33; } }
@keyframes soft-arrive { from { transform: translateY(9px); opacity: .60; } }
@keyframes art-arrive { from { transform: scale(1.045); } }
@keyframes rule-arrive { from { transform: scaleX(.25); } }
@keyframes page-leave { to { opacity: 0; } }
@keyframes page-arrive { from { opacity: 0; transform: translateY(3px); } }

@media screen and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 105ms ease-out both page-leave; mix-blend-mode: normal; }
  ::view-transition-new(root) { animation: 215ms var(--ease-out) 100ms both page-arrive; mix-blend-mode: normal; }
  ::view-transition-group(focus-photo) { animation-duration: 420ms; animation-timing-function: var(--ease-settle); }
  ::view-transition-old(focus-photo), ::view-transition-new(focus-photo) { height: 100%; width: 100%; object-fit: cover; }
  .top { view-transition-name: site-header; }
  html:focus-within { scroll-behavior: smooth; }
  .hero-line > span { animation: 730ms var(--ease-settle) both line-arrive; }
  .hero-line + .hero-line > span { animation-delay: 65ms; }
  .hero-kicker::before { animation: 680ms var(--ease-out) both rule-arrive; }
  .hero-copy p, .hero-actions { animation: 530ms var(--ease-out) 75ms backwards soft-arrive; }
  .hero-art { animation: 1050ms var(--ease-settle) backwards art-arrive; transform-origin: 76% 52%; }
  .page-heading h1, .hire-intro h1 { animation: 540ms var(--ease-settle) backwards soft-arrive; }
  .hire-scene .hire-piece { animation: 620ms var(--ease-settle) backwards soft-arrive; }
  .hire-scene .piece-48 { animation-delay: 65ms; }
  .hire-scene .piece-64 { animation-delay: 105ms; }
  .task-services:target, .album[open] .album-photos { animation: 280ms var(--ease-out) backwards soft-arrive; }
  .header-line nav a, .hire-categories a { transition: color 160ms ease; }
  .header-line nav a::after { transition: transform 240ms var(--ease-out); }
  .button { transition: background-color 200ms, color 200ms, transform 210ms var(--ease-out), box-shadow 220ms; }
  .button::after, .resource-links a::after { transition: transform 220ms var(--ease-settle); }
  .button:active { transform: translateY(1px); }
  .work-photo img, .album-cover img { transition: transform 650ms var(--ease-settle); }
  .rental-sample img, .task img { transition: transform 320ms var(--ease-out); }
  .album-label::after { transition: transform 260ms var(--ease-out); }
  .hire-dialog, .viewer {
    opacity: 0; transform: translateY(10px) scale(.99);
    transition: opacity 190ms ease, transform 250ms var(--ease-settle), overlay 250ms allow-discrete, display 250ms allow-discrete;
  }
  .hire-dialog[open], .viewer[open] { opacity: 1; transform: translateY(0) scale(1); }
  .hire-dialog::backdrop, .viewer::backdrop {
    opacity: 0;
    transition: opacity 200ms ease, overlay 250ms allow-discrete, display 250ms allow-discrete;
  }
  .hire-dialog[open]::backdrop, .viewer[open]::backdrop { opacity: 1; }
  @starting-style {
    .hire-dialog[open], .viewer[open] { opacity: 0; transform: translateY(10px) scale(.99); }
    .hire-dialog[open]::backdrop, .viewer[open]::backdrop { opacity: 0; }
  }
  @media (hover: hover) and (pointer: fine) {
    .hero-material { transform: scale(1.016) translate(var(--shot-x,0px),var(--shot-y,0px)); transition: transform 420ms var(--ease-out); }
    .hero-material::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 26% 66% at 74% 43%,rgb(141 196 255 / .14),transparent 90%);
      transform: translate(var(--light-x,0px),var(--light-y,0px)); transition: transform 500ms var(--ease-out);
    }
    .work-frame:is(:hover,:focus-visible) .work-photo img, .album:not([open]) summary:is(:hover,:focus-visible) img { transform: scale(1.038); }
    .task:hover img, .rental-sample:hover img { transform: translateY(-2px); }
    .button:hover { transform: translateY(-1px); box-shadow: 0 5px 13px rgb(11 38 61 / .12); }
    .button:hover::after, .resource-links a:hover::after { transform: translateX(3px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hire-piece:hover img, .hire-product-link:hover img { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media print { .hero-material { transform: none; } }