/* Refit the longer wordmark inside the original responsive navigation. */
.navbar-logo, .navbar-logo-contact { width: 14.375em; max-width: 40vw; }
.logo-svg { width: 100%; height: auto; }
.logo-svg svg { display: block; width: 100%; height: auto; }
.footer-svg-logo svg { width: 100%; height: auto; display: block; }
.faq-logo-svg svg { width: 100%; height: 100%; }
.voxel-hero-image { width: 100%; height: 100%; object-fit: cover; display: block; animation: voxel-hero-sway 4.8s ease-in-out infinite; }
@keyframes voxel-hero-sway { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-0.35%) rotate(0.12deg); } }
@media (prefers-reduced-motion: reduce) { .voxel-hero-image { animation: none; } }

/* Cobalt identity and restrained keyboard focus states. */
:root { --brand-primary: #2563eb; --brand-accent: #eaf2ff; --brand-secondary: #f3f7ff; --brand-white: #f8fbff; --brand-black: #071a35; }
::selection { background: #2563eb; color: #fff; }
a:focus-visible, button:focus-visible { outline: 2px solid #2563eb; outline-offset: 5px; }
.logo-svg svg { overflow: visible; }
.voxel-hero-image { object-position: center; mask-image: linear-gradient(to bottom, transparent, #000 9%); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%); }

/* Keep the poster and moving artwork registered inside the original hero box. */
.hero-video-bg { height: 40em; }
.hero-video-bg .voxel-hero-image {
  height: 100% !important;
  object-fit: contain;
  object-position: center top;
  animation: none;
  mask-image: none;
  -webkit-mask-image: none;
}
@media (max-width: 991px) { .hero-video-bg { height: 23em; } }
@media (max-width: 767px) { .hero-video-bg { height: 16em; } }
@media (max-width: 479px) {
  .hero-video-bg {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 1672 / 940;
    transform: none !important;
  }
}

/* Keep mobile lettering readable and let the badges breathe around it. */
@media (max-width: 767px) {
  .section-hero-wrapper { padding-top: 108px; }
  .hero-text { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; justify-items: center; gap: 18px 8px; width: calc(100% - 40px); max-width: 560px; margin-bottom: 32px; }
  .hero-text .heading { grid-column: 1 / -1; width: 100%; font-size: clamp(52px, 14.5vw, 82px); line-height: .92; text-wrap: balance; }
  .hero-text .hero-pill { position: relative; inset: auto; max-width: 100%; padding: 9px 13px; font-size: 13px; }
  .hero-text .hero-pill.two { grid-column: 1 / -1; }
  .hero-text .hero-pill-text { font-size: 12px; line-height: 1.2; }
  .section-about-wrapper { height: 100svh; padding: 88px 24px 40px; }
  .about-pinned { flex-flow: row wrap; gap: 16px 10px; }
  .about-pinned .about-text { width: 100%; margin: 0 0 4px; text-align: center; font-size: 12px; }
  .about-pinned .about-para { width: 100%; max-width: 520px; font-size: clamp(26px, 6.4vw, 34px); line-height: 1.14; letter-spacing: -.6px; margin: 0 0 12px; }
  .about-pinned .about-pill { position: relative; inset: auto; flex: 0 0 auto; max-width: 100%; padding: 9px 12px; font-size: 12px; transform: rotate(-3deg); }
  .about-pinned .about-pill.first { transform: rotate(3deg); }
  .about-pinned .about-pill.third { transform: rotate(-2deg); }
  .about-pinned .about-pill .hero-pill-text { font-size: 12px; line-height: 1.2; }
}
@media (max-width: 767px) and (max-height: 520px) {
  .section-hero-wrapper { padding-top: 88px; }
  .section-about-wrapper { height: auto; min-height: 100svh; padding: 76px 28px 28px; }
  .about-pinned { gap: 12px 10px; }
  .about-pinned .about-para { max-width: 620px; font-size: clamp(21px, 3.4vw, 26px); }
}