/* Shared base for all four directions: reset, logo/theme swaps, placeholders, a11y helpers.
   Each direction defines its own tokens and layout in /vN/style.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
body { margin: 0; min-width: 320px; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
html.menu-open body { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.ico { flex: none; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 999; padding: 10px 16px; background: #003399; color: #fff; border-radius: 4px; text-decoration: none; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Logo: two images, CSS shows the one that suits the current theme */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo-img { width: auto; height: var(--lh, 40px); }
.logo .logo-on-dark { display: none; }
[data-theme="dark"] .logo .logo-on-light { display: none; }
[data-theme="dark"] .logo .logo-on-dark { display: block; }
.logo.on-dark .logo-on-light { display: none; }
.logo.on-dark .logo-on-dark { display: block; }

/* Theme switch shows the icon of the mode you'd switch to */
[data-theme-toggle] { display: inline-grid; place-items: center; }
[data-theme-toggle] .i-sun { display: none; }
[data-theme="dark"] [data-theme-toggle] .i-sun { display: block; }
[data-theme="dark"] [data-theme-toggle] .i-moon { display: none; }

/* Placeholder contact details (client to supply) */
.placeholder { font-style: italic; opacity: .72; border-bottom: 1px dashed currentColor; }

/* Mobile menu: hidden until opened (site.js toggles hidden + .is-open) */
.mobile-menu { position: fixed; inset: 0; z-index: 200; }

/* Hero intro elements start hidden (no flash before GSAP runs). A CSS fail-safe reveals them
   after 2.5s whatever happens (the intro is finished by then); scroll reveals below the fold use gsap.from() and need no CSS. */
.js [data-anim] { opacity: 0; animation: anim-failsafe .4s 2.5s forwards; }
@keyframes anim-failsafe { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js [data-anim] { opacity: 1; animation: none; } }