/* JDD Design Studio, shared styles. Fonts are served from this site, no external requests. */
@font-face { font-family: 'Schibsted Grotesk'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/schibsted-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/schibsted-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/schibsted-grotesk-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

:root { color-scheme: light; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FFFFFF; color: #12161C; overflow-x: hidden; }
img, video { max-width: 100%; }
a { color: #12161C; }
a:hover { color: #3A4350; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #1B3FCC; outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
section[id] { scroll-margin-top: 16px; }
.form-note { font-size: 15px; color: #C5CBD3; }

@media (max-width: 600px) {
  header, section, body > div > nav, footer { padding-left: max(16px, env(safe-area-inset-left, 0px)) !important; padding-right: max(16px, env(safe-area-inset-right, 0px)) !important; }
  section > div { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Home hero: slow crossfade between four images */
.hero-fade img { animation: heroFade 24s infinite both; }
.hero-fade img:nth-child(1) { animation-delay: -1s; }
.hero-fade img:nth-child(2) { animation-delay: 5s; }
.hero-fade img:nth-child(3) { animation-delay: 11s; }
.hero-fade img:nth-child(4) { animation-delay: 17s; }
@keyframes heroFade { 0% { opacity: 0 } 5% { opacity: 1 } 25% { opacity: 1 } 30% { opacity: 0 } 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .hero-fade img { animation: none; } .hero-fade img:not(:first-child) { display: none; } }

/* Works filters */
.work-filters button:hover { color: #12161C !important; }
.works-grid > [hidden] { display: none !important; }