/* User-supplied colour mark; preserve its transparency and proportions. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-semibold.ttf') format('truetype');
}

.eyebrow,
.footer-reveal .footer-intro > .eyebrow,
.footer-reveal .footer-nav > .eyebrow,
.mag-running-head,
.mag-masthead { font-weight: 600; }

.site-header .brand-link {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
}
.brand-logo { display: block; height: auto; }
.site-header .brand-logo { width: clamp(118px, 9.3vw, 148px); }
.footer-reveal .footer-brand {
  width: fit-content;
  max-width: 100%;
  margin: 30px auto 28px;
}
.footer-brand .brand-logo { width: clamp(218px, 24vw, 365px); max-width: 100%; }

@media (max-width: 700px) {
  .site-header .brand-logo { width: clamp(101px, 26vw, 121px); }
  .footer-brand .brand-logo { width: clamp(182px, 52vw, 230px); }
}

.footer-language-row { justify-content: flex-end; }

.audience-cards .route-label {
  display: flex;
  gap: .65em;
  align-items: baseline;
}
.audience-cards .route-label > .pixel,
.audience-cards .route-label .eyebrow {
  font-size: clamp(1.05rem, 1.4vw, 1.45rem);
  line-height: 1.3;
}
.audience-cards .route-label > .pixel { margin: 0; }
.audience-cards .route-label .eyebrow {
  letter-spacing: .015em;
  text-wrap: balance;
}

/* Translucent dark glass lets the scene remain visible beneath readable copy. */
.audience-cards .service-option {
  background: linear-gradient(150deg, rgb(9 16 12 / 75%), rgb(9 16 12 / 61%));
  -webkit-backdrop-filter: blur(12px) saturate(.8);
  backdrop-filter: blur(12px) saturate(.8);
  box-shadow: inset 0 1px 0 rgb(220 201 169 / 8%), 0 8px 30px rgb(0 0 0 / 10%);
}
.audience-cards .service-option.is-active {
  background: linear-gradient(150deg, rgb(9 16 12 / 81%), rgb(9 16 12 / 66%));
}
.audience-cards .service-option p { color: #e0d6c2; }
.audience-cards .service-option h3 { color: #f3e8d6; }

.brand-link, .footer-brand { position: relative; }
.wordmark > .logo-glints {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 2;
  pointer-events: none;
  color: #fff8e9;
}
.brand-link:has(img[src*="black"]) .logo-glints { color: #91642c; }
.logo-glint {
  position: absolute;
  width: var(--glint-size, 12px);
  height: var(--glint-size, 12px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  filter: drop-shadow(0 0 3px currentColor);
}
.logo-glint::before, .logo-glint::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  clip-path: polygon(50% 0, 58% 39%, 100% 50%, 58% 61%, 50% 100%, 42% 61%, 0 50%, 42% 39%);
}
.logo-glint::after { transform: rotate(45deg) scale(.48); opacity: .6; }
.motion-off .logo-glints { display: none; }
@media (prefers-reduced-motion: reduce) {
  .logo-glints { display: none; }
}

.site-footer .footer-link-row {
  flex-wrap: wrap;
  justify-content: space-between;
}
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 clamp(15px,2.2vw,34px);
}
.footer-socials a {
  gap: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--beige);
  font-size: 14px;
}
.footer-socials a:is(:hover,:focus-visible) { color: var(--green); }

.footer-socials img { width: 20px; height: 20px; object-fit: contain; flex: none; filter: invert(1); }

/* Underlined links need inline letters so their line continues through each word. */
:is(.pitch-jumps a, a.mobile-enquire, .article-body a:not(.text-link), .contact-page .caption a, .dialog-source a) :is(.glitch-word, .glitch-char) {
  display: inline;
}

.story-pixel-mark.story-brand {
  grid-column: 1 / 5;
  display: block;
  justify-self: center;
  scroll-margin-top: 32vh;
  width: clamp(160px, 18vw, 252px);
  height: auto;
  max-width: 100%;
  padding: 0;
  transform: none;
  opacity: 1;
}
@media (max-width: 900px) {
  .story-pixel-mark.story-brand {
    grid-column: 1 / -1;
    grid-row: 8;
    justify-self: start;
    width: 136px;
    margin-left: 15px;
  }
  .studio-collage .story-finale { grid-row: 9; }
}