html { background: #0b1030; }
html, body { height: 100%; }
body { margin: 0; background: #0b1030; color: #f6f6f3; font-family: Archivo, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
::selection { background: #f7a821; color: #0b1030; }
[hidden] { display: none !important; }
/* Read by screen readers and search engines, not shown on screen. */
.ss-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@keyframes ssLineUp { from { transform: translateY(105%) } to { transform: translateY(0) } }
@keyframes ssIntroOut { from { transform: translateY(0) } to { transform: translateY(-101%) } }
@keyframes ssWordUp { 0% { opacity: 0; transform: translateY(26%) } 100% { opacity: 1; transform: translateY(0) } }
@keyframes ssFadeIn { 0% { opacity: 0; transform: translateY(-8px) } 100% { opacity: 1; transform: translateY(0) } }

/* Hero sequence. With the intro, the menu and wordmark arrive as the intro
   panel lifts (it finishes at 2.6s). Without it (later page loads in the same
   visit), everything arrives straight away. */
:root { --seq-header: 2200ms; --seq-word: 2350ms; --seq-tag: 2650ms; }
.ss-no-intro { --seq-header: 0ms; --seq-word: 250ms; --seq-tag: 450ms; }
.ss-no-intro .ss-intro { display: none !important; }
[data-seq="header"] { animation: ssFadeIn 640ms cubic-bezier(0.16,1,0.3,1) var(--seq-header) both; }
[data-seq="word"] { animation: ssWordUp 980ms cubic-bezier(0.16,1,0.3,1) var(--seq-word) both; }
[data-seq="tag"] { animation: ssFadeIn 640ms cubic-bezier(0.16,1,0.3,1) var(--seq-tag) both; }

/* Keyboard focus: an orange ring with a navy edge, visible on light and dark. */
:focus-visible { outline: 2px solid #f7a821 !important; outline-offset: 2px !important; box-shadow: 0 0 0 4px #0b1030; }
/* Pop-ups take focus themselves so screen readers announce them; no ring on the whole panel. */
[role="dialog"]:focus, [role="dialog"]:focus-visible { outline: none !important; box-shadow: none; }
/* Work cards sit at the edge of a clipped strip, so their ring is drawn inside. */
[data-work]:focus-visible { outline: none !important; box-shadow: none; }
[data-work]:focus-visible::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px #f7a821, inset 0 0 0 5px #0b1030; pointer-events: none; }

/* Hover states. !important so they win over the inline styles they modify. */
.h-lift:hover { transform: translateY(-2px) !important; }
.h-zoom:hover { transform: scale(1.04) !important; }
.h-invert-light:hover { background: #F5F5F0 !important; color: #0b1030 !important; }
.h-invert-dark:hover { background: #0b1030 !important; color: #F5F5F0 !important; }
.h-reviews:hover { text-decoration: underline !important; text-decoration-color: #FDA80F !important; color: #F5F5F0 !important; }
.h-extendly:hover { border-bottom-color: #01B59E !important; color: #F5F5F0 !important; }
.h-footlink:hover { color: #0b1030 !important; }
.h-close:hover { background: rgba(11,16,48,0.16) !important; }
.h-option:hover { background: rgba(247,168,33,0.14) !important; }
/* While pricing is still light (mid-fade), the reviews link hovers to navy. */
[data-tone="light"] .h-reviews:hover { color: #0b1030 !important; }
.ss-strip-toggle:hover { background: #f6f6f3 !important; color: #0b1030 !important; }

/* Narrow screens keep only the GET IN TOUCH pill in the header. */
@media (max-width: 559.98px) {
  [data-nav-extra] { display: none !important; }
}

/* Reduce motion: nothing slides, spins, scales or floats. Colour changes and
   fades stay. js/home.js handles the scroll- and mouse-driven parts. */
@media (prefers-reduced-motion: reduce) {
  .ss-intro { display: none !important; }
  [data-seq], [data-seq] * { animation: none !important; }
  .ss-hero { height: 100vh !important; }
  .h-lift:hover, .h-zoom:hover { transform: none !important; }
  [data-work] img, [data-work] { transition: none !important; }
  .ss-track-static { width: auto !important; overflow-x: auto; padding: 0 5vw; }
  .ss-track-static > [data-dup] { display: none !important; }
  .ss-strip-toggle { display: none !important; }
}

@media print {
  @page { margin: 0.5cm; }
  figure, table { break-inside: avoid; }
  *, *::before, *::after {
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    animation-delay: -99s !important; animation-duration: .001s !important;
    animation-iteration-count: 1 !important; animation-fill-mode: both !important;
    animation-play-state: running !important; transition-duration: 0s !important;
  }
}