/* Site creative layer (DRAFT 2026-09-28): credit strip, midnight sky, title film.
   Loaded after style.css; edits no existing rule in place. Midnight blue, never jet black. */
:root{--night:#0a1628;--night-deep:#07101c;--night-soft:#0c1d27;--star:#e8eef7;--star-dim:#b8c5d6;--credit-h:32px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 1. Midnight sky: blue base, soft glow, two star tiles (static + twinkle). Stars sit under all content.
   Applied to the existing dark bands by selector (no markup change) and to any element with .night-sky. */
.night-sky,.story,.film,.world-mobile-list,.footer{position:relative;isolation:isolate;background-color:var(--night);background-image:radial-gradient(1100px 560px at 72% -8%,rgba(74,122,181,.2),transparent 62%),radial-gradient(900px 520px at 8% 108%,rgba(40,80,120,.16),transparent 58%),linear-gradient(180deg,var(--night) 0%,var(--night-deep) 100%)}
.night-sky::before,.story::before,.film::before,.world-mobile-list::before,.footer::before,.night-sky::after,.story::after,.film::after,.world-mobile-list::after,.footer::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-repeat:repeat}
.night-sky::before,.story::before,.film::before,.world-mobile-list::before,.footer::before{background-image:url('./sky/stars-a.svg');background-size:367px 367px;opacity:.9}
.night-sky::after,.story::after,.film::after,.world-mobile-list::after,.footer::after{background-image:url('./sky/stars-b.svg');background-size:541px 541px;opacity:.6;animation:night-twinkle 6.5s ease-in-out infinite alternate;will-change:opacity}
@keyframes night-twinkle{from{opacity:.3}to{opacity:.95}}
.story .story-image{background-color:transparent}
.footer .footer-top{border-bottom-color:rgba(184,197,214,.18)}

/* 2. Credit strip: thin bar above the masthead, real crawlable links (dofollow: rel="noopener" only). */
.credit-strip{position:relative;z-index:30;height:var(--credit-h);display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:0 clamp(24px,5vw,88px);background:var(--night-deep);border-bottom:1px solid rgba(255,255,255,.08);color:var(--star-dim);font-size:.72rem;letter-spacing:.04em;white-space:nowrap;overflow:hidden}
.credit-strip__label{margin:0;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#d8c08f}
.credit-strip__list{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.credit-strip__link{display:inline-flex;align-items:center;gap:7px;color:inherit;text-decoration:none}
.credit-strip__link svg{width:14px;height:14px;flex:none;stroke:#d8c08f;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.credit-strip__role{opacity:.72}
.credit-strip__link:hover,.credit-strip__link:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:4px}
.credit-strip__link:focus-visible{outline:2px solid #efbc68;outline-offset:3px}
.has-credit-strip .masthead{top:var(--credit-h)}

/* 3. Title film (Manus) with optional score (Suno): full-bleed night band inside "What we do". */
.motion-film{margin:48px calc(-1 * clamp(24px,6vw,108px)) 64px;padding:clamp(34px,5vw,72px) clamp(16px,5vw,72px) clamp(22px,3vw,34px);color:var(--star)}
.motion-film__frame{position:relative;max-width:1280px;margin:0 auto;aspect-ratio:16/9;background:var(--night-soft);box-shadow:0 30px 80px rgba(3,8,16,.55),0 0 0 1px rgba(184,197,214,.14)}
.motion-film__video{display:block;width:100%;height:100%;object-fit:cover}
.motion-film__bar{max-width:1280px;margin:16px auto 0;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-size:.74rem;letter-spacing:.03em;color:var(--star-dim)}
.motion-film__bar a{color:#e9d3a7;text-underline-offset:4px}
.motion-film__controls{display:flex;gap:10px}
.motion-film__controls button{min-height:40px;min-width:74px;padding:8px 14px;border:1px solid rgba(184,197,214,.4);background:rgba(10,22,40,.6);color:var(--star);font:700 .72rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.motion-film__controls button:hover{border-color:#e9d3a7;color:#fff}
.motion-film__controls button[aria-pressed="true"]{background:#e9d3a7;border-color:#e9d3a7;color:#102532}
.motion-film__controls button[hidden]{display:none}
#services .motion-film+.service-list{margin-top:0}

@media(max-width:760px){
  .credit-strip{justify-content:center;gap:14px;padding:0 16px}
  .credit-strip__list{gap:14px}
  .credit-strip__role{display:none}
  .motion-film{margin:34px -24px 44px;padding:26px 0 18px}
  .motion-film__bar{padding:0 16px}
}
@media(max-width:350px){.credit-strip__label{display:none}}
@media(prefers-reduced-motion:reduce){.night-sky::after,.story::after,.film::after,.world-mobile-list::after,.footer::after{animation:none;opacity:.7}}