/* Astraway — shared base: reset, a11y, header/mobile menu, footer, ArrowButton. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a { color: #ffffff; text-decoration: none; }
a:hover { color: #8b8b90; }
img, video { max-width: none; }
[hidden] { display: none !important; }
template { display: none; }

/* ---------- focus ring & accessibility ---------- */
:focus { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid rgba(255,255,255,0.9); outline-offset: 3px; border-radius: 6px;
}
[data-skip] { position: fixed; left: 16px; top: 16px; z-index: 200; padding: 13px 20px; border-radius: 12px; background: #ffffff; color: #050506; font-size: 14px; transform: translateY(-180%); transition: transform .32s cubic-bezier(.22,1,.36,1); }
[data-skip]:focus { transform: translateY(0); }
[data-skip]:hover { color: #050506; }
/* 44px hit area without moving the underline */
[data-nav]::before { content: ''; position: absolute; left: -6px; right: -6px; top: -13px; bottom: -13px; }
[data-inline-hit]::before { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
[data-nav-brand] { display: flex; align-items: center; min-height: 44px; }
footer [data-flink] { display: flex; align-items: center; min-height: 44px; }
@media (max-width: 900px) { [data-foot-grid] { grid-template-columns: 1fr 1fr !important; gap: 40px 32px !important; } }
@media (max-width: 760px) { [data-foot-grid] { grid-template-columns: 1fr !important; gap: 32px !important; } }
@media (forced-colors: active) {
  [data-grad-text] { background: none !important; -webkit-text-fill-color: currentColor !important; color: CanvasText !important; }
}
::selection { background: #0088ff; color: #ffffff; }
main:focus { outline: none; }

/* ---------- header ---------- */
@keyframes navExpand {
  from { max-width: 132px; opacity: 0; transform: translateY(-6px) scaleY(.72); }
  35%  { opacity: 1; }
  to   { max-width: 1180px; opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes navFade { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { a[data-nav]:hover::after { transform: scaleX(1) !important; } }
[data-deck-link] svg { transition: transform .42s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) and (pointer: fine) { [data-deck-link]:hover svg { transform: translateY(2px); } }
[data-nav-burger] { display: none; }
[data-nav-panel] a, [data-nav-panel] button { font-family: inherit; }
@media (max-width: 900px) {
  [data-nav-links] { display: none !important; }
  [data-deck-link] { display: none !important; }
  [data-nav-burger] { display: inline-flex !important; }
  [data-nav-bar] { padding: 8px 8px 8px 18px !important; }
}
@media (max-width: 420px) {
  [data-nav-cta] { display: none !important; }
}
@keyframes navPanelIn { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } }
[data-nav-panel] > a, [data-nav-panel] > button { animation: navPanelIn .42s cubic-bezier(.22,1,.36,1) both; }
[data-nav-panel] > *:nth-child(2) { animation-delay: .04s; }
[data-nav-panel] > *:nth-child(3) { animation-delay: .08s; }
[data-nav-panel] > *:nth-child(4) { animation-delay: .12s; }
[data-nav-panel] > *:nth-child(5) { animation-delay: .16s; }
/* mobile menu: keep the panel scrollable on short screens */
[data-nav-panel] { max-height: calc(100dvh - 104px); overflow-y: auto; overscroll-behavior: contain; }

/* ---------- ArrowButton (design component) ---------- */
@keyframes awDitherPulse { 0%,100% { opacity: .25; } 45% { opacity: 1; } }
@keyframes awTextDither {
  0%   { -webkit-mask-position: 0 0; mask-position: 0 0; }
  25%  { -webkit-mask-position: 2px 1px; mask-position: 2px 1px; }
  50%  { -webkit-mask-position: 1px 2px; mask-position: 1px 2px; }
  75%  { -webkit-mask-position: 3px 2px; mask-position: 3px 2px; }
  100% { -webkit-mask-position: 0 0; mask-position: 0 0; }
}
.awb {
  position: relative; display: inline-flex; align-items: center; padding: 2px; border-radius: 999px; cursor: pointer; overflow: hidden;
  -webkit-user-select: none; user-select: none; font-family: 'Manrope', Helvetica, Arial, sans-serif;
  background: #ffffff; border: none; box-shadow: none; color: #050506; -webkit-tap-highlight-color: transparent;
}
.awb:hover { color: #050506; }
.awb--glass {
  background: linear-gradient(180deg,rgba(255,255,255,0.17) 0%,rgba(255,255,255,0.07) 52%,rgba(255,255,255,0.04) 100%);
  backdrop-filter: blur(26px) saturate(190%); -webkit-backdrop-filter: blur(26px) saturate(190%); color: #ffffff;
}
.awb--glass:hover { color: #ffffff; }
.awb:focus-visible { outline-offset: 3px; border-radius: 999px; }
.awb-fill { position: absolute; top: 2px; left: 2px; bottom: 2px; width: 40px; border-radius: 999px; background: #000000; overflow: hidden; transition: width .5s cubic-bezier(.22,1,.36,1); }
.awb--glass .awb-fill { background: rgba(5,5,6,0.55); }
.awb--plain .awb-fill { width: 0px; }
.awb-one { position: absolute; top: 0; left: 0; width: 40px; height: 100%; display: flex; align-items: center; justify-content: center; transition: opacity .25s ease; opacity: 1; }
.awb--plain .awb-one { opacity: 0; }
.awb-row { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 20px; transition: opacity .3s ease .12s; opacity: 0; }
.awb-glyph {
  display: block; position: relative; width: 2px; height: 2px; flex: 0 0 auto; background: #ffffff;
  box-shadow: 3px 3px 0 0 rgba(255,255,255,0.95),6px 6px 0 0 rgba(255,255,255,0.95),9px 9px 0 0 rgba(255,255,255,0.95),6px 12px 0 0 rgba(255,255,255,0.95),3px 15px 0 0 rgba(255,255,255,0.95),0 18px 0 0 rgba(255,255,255,0.95),3px 0 0 0 rgba(255,255,255,0.40),6px 3px 0 0 rgba(255,255,255,0.40),9px 6px 0 0 rgba(255,255,255,0.40),6px 15px 0 0 rgba(255,255,255,0.40),3px 18px 0 0 rgba(255,255,255,0.40),0 6px 0 0 rgba(255,255,255,0.20),0 12px 0 0 rgba(255,255,255,0.20),12px 9px 0 0 rgba(255,255,255,0.20);
  transform: translate(-5px,-10px); animation: awDitherPulse 1.4s ease-in-out infinite;
}
.awb-glyph--one { animation-duration: 1.8s; }
.awb-spacer { display: block; height: 40px; width: 40px; flex: 0 0 auto; }
.awb--plain .awb-spacer { width: 0px; }
.awb-label { display: block; position: relative; padding: 0 20px 0 6px; font-size: 15px; font-weight: 500; white-space: nowrap; flex: 0 0 auto; color: #050506; transition: opacity .25s ease; opacity: 1; }
.awb--plain .awb-label { padding: 0 18px; }
.awb--glass .awb-label { color: #ffffff; }
.awb-lw { position: relative; display: inline-block; }
.awb-base { display: block; transition: opacity .2s ease; opacity: 1; }
.awb-dither {
  position: absolute; left: 0; top: 0; white-space: nowrap; transition: opacity .2s ease; opacity: 0;
  -webkit-mask-image: repeating-conic-gradient(#000 0 25%,transparent 0 50%); mask-image: repeating-conic-gradient(#000 0 25%,transparent 0 50%);
  -webkit-mask-size: 4px 4px; mask-size: 4px 4px; animation: awTextDither .45s steps(1) infinite;
}
/* hover / keyboard focus = the prototype's `hover` state */
.awb:hover .awb-fill, .awb:focus-visible .awb-fill { width: calc(100% - 4px); }
.awb:hover .awb-one, .awb:focus-visible .awb-one { opacity: 0; }
.awb:not(.awb--plain):hover .awb-row, .awb:not(.awb--plain):focus-visible .awb-row { opacity: 1; }
.awb:not(.awb--plain):hover .awb-label, .awb:not(.awb--plain):focus-visible .awb-label { opacity: 0; }
.awb--plain:hover .awb-base, .awb--plain:focus-visible .awb-base { opacity: 0; }
.awb--plain:hover .awb-dither, .awb--plain:focus-visible .awb-dither { opacity: 1; }
@media (hover: none) {
  /* touch: no sticky hover after tap */
  .awb:hover .awb-fill { width: 40px; } .awb--plain:hover .awb-fill { width: 0px; }
  .awb:not(.awb--plain):hover .awb-one { opacity: 1; }
  .awb:not(.awb--plain):hover .awb-row { opacity: 0; }
  .awb:not(.awb--plain):hover .awb-label { opacity: 1; }
  .awb--plain:hover .awb-base { opacity: 1; } .awb--plain:hover .awb-dither { opacity: 0; }
}

/* ---------- audit fixes (shared) ---------- */
/* a closing sheet / scrim must not take clicks during its 300ms exit */
[data-closing="1"] { pointer-events: none !important; }
/* headings: no orphan words */
h1, h2 { text-wrap: balance !important; }
/* hero heading renders immediately (LCP) — CSS-only entrance, no JS dependency */
@keyframes heroIntro { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
[data-hero-intro] { animation: heroIntro .38s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) { [data-hero-intro] { animation: none; } }
/* footer bottom row: copyright alone now that the placeholder circles are gone */
footer > div:last-child { flex-wrap: wrap; gap: 12px; }
/* forced colors: text sitting on photos/video keeps its own colours (no opaque system backplates) */
@media (forced-colors: active) {
  [data-works-card], [data-works-card] *, [data-reel], [data-reel] *, [data-case], [data-case] *, [data-tile], [data-tile] * { forced-color-adjust: none; }
  .awb, .awb * { forced-color-adjust: none; }
  .awb { border: 1px solid CanvasText; }
}
/* ≥44px tap target for the ArrowButton (40px glyph + 2px ring rounded down to 43px in some layouts) */
.awb { min-height: 44px; }
/* just-opened dialogs: content ignores the pointer until the entrance settles (double-click guard) */
[data-opening="1"] * { pointer-events: none !important; }

/* ---- page lock behind dialogs / menu: overflow only, the scroll position never changes ---- */
html { scrollbar-gutter: stable; }
html[data-scroll-locked] { overflow: hidden; overscroll-behavior: none; }
[role="dialog"], [role="dialog"] [data-agent-list], [data-nav-panel] { overscroll-behavior: contain; }
/* ---- everything behind an open dialog holds still (3D clocks freeze in JS, CSS loops here) ---- */
html[data-bg-paused] :is(main, footer) *,
html[data-bg-paused] :is(main, footer) *::before,
html[data-bg-paused] :is(main, footer) *::after { animation-play-state: paused !important; }
/* ---- decorative videos never show a native play glyph (iOS Low Power Mode refuses autoplay) ---- */
video::-webkit-media-controls,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; opacity: 0 !important; }