:root {
  --font-title: 'Oswald', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

body { font-family: var(--font-body); }


.logo-name,
.section-title { font-family: var(--font-title); font-weight: 500; }
.logo-name { font-weight: 500; letter-spacing: 0.12em; }
.logo-sub  { font-family: var(--font-body); }


html { scroll-behavior: smooth; }


#gallery { display: block; }
#gallery.is-masonry { display: flex; gap: 0.75rem; align-items: flex-start; }
@media (min-width: 768px) { #gallery.is-masonry { gap: 1rem; } }
.g-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 768px) { .g-col { gap: 1rem; } }
.g-item { display: block; overflow: hidden; margin-bottom: 0.75rem; line-height: 0; }
#gallery.is-masonry .g-item { margin-bottom: 0; }
.g-item img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; }
.g-item:hover img { transform: scale(1.04); }


input:focus, textarea:focus { border-color: transparent; }


.logo-marquee {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;              
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.logo-marquee.is-grabbing { cursor: grabbing; }
.logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}
.logo-item {
  flex: 0 0 auto;
  margin-right: 3.5rem;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-drag: none;
}
.logo-item img { height: 100%; width: auto; object-fit: contain; pointer-events: none; }