/* Shared motion layer. Layout, content and native scrolling stay in place. */
:root { --motion-ease: cubic-bezier(.2,.75,.25,1); }

/* The existing home photo becomes the full-screen backdrop. */
.home-hero.home-hero-static { overflow: hidden; min-height: calc(100svh - var(--header-height)); }
.home-hero-static .home-hero-grid {
  position: static; display: flex; align-items: center;
  min-height: calc(100svh - var(--header-height)); padding-block: 80px;
}
.home-hero-static .hero-copy { position: relative; z-index: 2; max-width: 720px; }
.home-hero-static .hero-copy h1 { font-size: clamp(3.6rem, 6.7vw, 6.8rem); }
.home-hero-static .hero-subtitle { max-width: 48ch; color: #e0e5eb; }
.home-hero-static .hero-visual { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.home-hero-static .hero-frame { position: absolute; inset: 0; overflow: hidden; }
.home-hero-static .hero-frame img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 65% center; }
.home-hero-static .hero-frame::after {
  display: block; background: linear-gradient(90deg, rgba(4,10,18,.92), rgba(4,10,18,.78) 34%, rgba(4,10,18,.12) 72%, transparent), linear-gradient(0deg, rgba(4,10,18,.35), transparent 40%);
}

/* Small tactile responses, with no movement of surrounding content. */
.button, .nav-contact, .deck-pattern-button { transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, translate 280ms var(--motion-ease), box-shadow 280ms ease; }
.button svg, .button > span[aria-hidden], .deck-text-link > svg, .contact-link > span:last-child { transition: translate 280ms var(--motion-ease); }
.mission-card, .service-item, .capability { transition: border-color 300ms ease, box-shadow 300ms ease; }
.deck-pattern-button img { transition: scale 350ms var(--motion-ease); }
.contact-form input, .contact-form textarea { transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease; }
.contact-form input:focus, .contact-form textarea:focus { box-shadow: 0 3px 0 -1px var(--procut-blue); }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:hover, .nav-contact:hover { translate: 0 -3px; box-shadow: 0 8px 20px -10px rgba(0,0,0,.65); }
  .button:hover svg, .button:hover > span[aria-hidden], .deck-text-link:hover > span, .contact-link:hover > span:last-child { translate: 3px 0; }
  .button:active, .nav-contact:active { translate: 0 0; }
  .mission-card:hover, .service-item:hover, .capability:hover { border-color: rgba(116,148,255,.55); box-shadow: inset 0 2px 0 rgba(116,148,255,.4); }
  .deck-pattern-button:hover img { scale: .97; }
}

@media (prefers-reduced-motion: no-preference) {
  .about-hero-copy > *, .services-hero-copy > *, .deck-showcase-copy > *, .contact-intake-copy > *, .gallery-placeholder h1, .gallery-placeholder p {
    animation: copy-arrive 800ms var(--motion-ease) both;
  }
  .about-hero-copy > :nth-child(2), .services-hero-copy > :nth-child(2), .deck-showcase-copy > :nth-child(2) { animation-delay: 80ms; }
  .about-hero-copy > :nth-child(3), .services-hero-copy > :nth-child(3), .deck-showcase-copy > :nth-child(3) { animation-delay: 160ms; }
  .deck-showcase-copy > :nth-child(4) { animation-delay: 230ms; }
  .js .reveal { transition: opacity 650ms ease var(--reveal-delay, 0ms), transform 800ms var(--motion-ease) var(--reveal-delay, 0ms); }
  .js .reveal:focus-within { opacity: 1; transform: none; }
  .hero-depth-active .home-hero-static .hero-frame img,
  .hero-depth-active .about-hero-background,
  .hero-depth-active .services-hero-background,
  .hero-depth-active .prodeck-page .deck-hero-background {
    transform: translate3d(0, var(--hero-drift, 0px), 0) scale(var(--hero-zoom, 1.14));
  }
}

/* Scroll-scrubbed typography keeps the original selectable text and line breaks. */
.kinetic-heading .motion-word-mask { display: inline-block; vertical-align: top; overflow: clip; padding-block: .13em; margin-block: -.13em; }
.kinetic-heading .motion-word { display: inline-block; transform-origin: left bottom; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { --reveal-y: 40px; transition-duration: 800ms, 1000ms; }
  .js .reveal-left { --reveal-x: -44px; }
  .js .reveal-right { --reveal-x: 44px; }
  .scroll-motion-active .kinetic-heading { animation: none; }
  .hero-depth-active .hero-copy, .hero-depth-active .about-hero-copy,
  .hero-depth-active .services-hero-copy, .hero-depth-active .deck-showcase-copy { translate: 0 var(--hero-copy-drift, 0px); }
  .scroll-motion-active .scroll-steps > li { position: relative; transition: border-color 400ms ease; }
  .scroll-motion-active .scroll-steps > li::after {
    content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 2px;
    background: var(--procut-blue); transform: scaleX(0); transform-origin: left;
    transition: transform 550ms var(--motion-ease);
  }
  .scroll-motion-active .scroll-steps > .step-current::after,
  .scroll-motion-active .scroll-steps > .step-complete::after { transform: scaleX(1); }
  .scroll-motion-active .scroll-steps > .step-current { border-color: rgba(116,148,255,.6); }
  .scroll-motion-active .scroll-steps h3 { transition: color 400ms ease; }
  .scroll-motion-active .scroll-steps > .step-current h3 { color: #a8baff; }
}
@media (max-width: 680px) and (prefers-reduced-motion: no-preference) {
  .js .reveal { --reveal-y: 26px; }
  .js .reveal-left, .js .reveal-right { --reveal-x: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-word, .hero-copy, .about-hero-copy, .services-hero-copy, .deck-showcase-copy { translate: none; }
}
@keyframes copy-arrive { from { opacity: 0; transform: translate3d(0,18px,0); } to { opacity: 1; transform: none; } }

@media (max-width: 680px) {
  .home-hero-static .home-hero-grid { min-height: max(680px, calc(100svh - var(--header-height))); align-items: flex-end; padding-block: 64px 48px; }
  .home-hero-static .hero-copy h1 { font-size: clamp(3rem, 12.5vw, 4.5rem); }
  .home-hero-static .hero-subtitle { font-size: 1rem; }
  .home-hero-static .hero-frame img { object-position: 72% center; }
  .home-hero-static .hero-frame::after { background: linear-gradient(0deg, rgba(4,10,18,.98), rgba(4,10,18,.9) 42%, rgba(4,10,18,.08) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-progress { display: none; }
  .js .reveal, .js .reveal.is-visible, [data-sc-in] { opacity: 1; transform: none; transition: none; }
  .button, .nav-contact, .deck-pattern-button, .deck-pattern-button img, .button svg, .button > span[aria-hidden], .deck-text-link > svg, .contact-link > span:last-child { transition: none; translate: none; scale: none; }
}

/* Centre the navigation CTA, including its mobile menu placement. */
.site-nav .nav-contact { justify-content: center; text-align: center; }
@media (max-width: 900px) {
  .site-nav .nav-contact { display: flex; width: fit-content; margin: 12px auto 0; }
}