html body .hero {
  height: 100svh !important;
  min-height: 100svh !important;
}

@media (max-width: 900px) {
  html body .hero {
    height: 100svh !important;
    min-height: 100svh !important;
  }
}

@media (min-width: 901px) {
  html body .site-header.header-over-hero .dropdown {
    background: rgba(12, 18, 28, .14) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }

  html body .site-header.header-over-hero .dropdown a {
    color: #fff !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.35);
  }

  html body .site-header.header-over-hero .dropdown a:hover,
  html body .site-header.header-over-hero .dropdown a:focus-visible {
    color: rgba(255,255,255,.72) !important;
    background: rgba(255,255,255,.06) !important;
  }

  html body .site-header.header-scrolled .dropdown {
    background: rgba(255,255,255,.99) !important;
    border: 0 !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html body .site-header.header-scrolled .dropdown a {
    color: #414141 !important;
    text-shadow: none;
  }
}

html body .mosaic[data-macro-mosaic='true'] .tile,
html body .mosaic .tile {
  animation: none !important;
}

html body .portfolio-overlay {
  left: 50% !important;
  top: 50% !important;
  min-width: 218px !important;
  min-height: 66px !important;
  padding: 0 28px !important;
  gap: 15px;
  transform: translate(-50%, -50%) !important;
  color: #30343a !important;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  text-shadow: none !important;
  -webkit-backdrop-filter: blur(9px) saturate(.8);
  backdrop-filter: blur(9px) saturate(.8);
  transition:
    background-color .35s ease,
    box-shadow .35s ease,
    transform .35s cubic-bezier(.22,.61,.36,1),
    color .35s ease !important;
}

html body .portfolio-overlay::after {
  content: '→';
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}

html body .portfolio-overlay:hover,
html body .portfolio-overlay:focus-visible {
  color: #20242a !important;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
  transform: translate(-50%, -50%) scale(1.025) !important;
  opacity: 1 !important;
}

html body .portfolio-overlay:hover::after,
html body .portfolio-overlay:focus-visible::after {
  transform: translateX(6px);
}

html body .category-section {
  height: auto !important;
  min-height: 620px;
  padding: 78px 20px 110px !important;
  overflow: hidden;
}

html body .category-intro {
  position: relative;
  z-index: 8;
  margin: 0 auto 58px;
  text-align: center;
  color: #414141;
}

html body .category-intro p {
  margin: 0 0 10px;
  font-family: Avenir, 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
}

html body .category-intro h2 {
  margin: 0;
  font-family: Tahoma, Arial, sans-serif;
  font-size: clamp(34px, 3.2vw, 54px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -.025em;
}

html body .category-intro span {
  display: block;
  margin-top: 14px;
  color: #777;
  font-family: Avenir, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  font-weight: 300;
}

html body .category-grid {
  margin-top: 0 !important;
}

html body .category-card::after {
  opacity: .3 !important;
  background: linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.48)) !important;
}

html body .category-card .category-label {
  position: absolute;
  z-index: 3;
  left: 18px;
  right: 18px;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translateY(-50%);
  color: #fff;
  text-align: center;
  opacity: 1 !important;
}

html body .category-card .category-label strong {
  font-family: 'DIN Next', 'Arial Narrow', Arial, sans-serif;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: .1em;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}

html body .category-card .category-label small {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: Avenir, 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  opacity: .88;
}

html body .category-card .category-label b {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

html body .category-card:hover .category-label b,
html body .category-card:focus-visible .category-label b {
  transform: translateX(7px);
}

html body .category-card:hover,
html body .category-card:focus-visible {
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

/* Neutral white placeholders until each media asset has real pixels ready. */
html body .hero,
html body .tile,
html body .category-card,
html body .video-tile,
html body picture {
  background: #fff !important;
}

html body img,
html body video {
  visibility: hidden;
}

html body img.media-ready,
html body video.media-ready,
html body img[complete] {
  visibility: visible;
}

/* Keep structural overlays visible while the underlying media loads. */
html body .hero-shade,
html body .hero-logo,
html body .scroll-cue img,
html body .brand img {
  visibility: visible;
}

@media (max-width: 900px) {
  html body .portfolio-overlay {
    min-width: 190px !important;
    min-height: 58px !important;
    padding: 0 22px !important;
    gap: 12px;
    font-size: 20px !important;
  }

  html body .portfolio-overlay::after {
    font-size: 19px;
  }

  html body .category-section {
    min-height: 0;
    padding: 64px 12px 96px !important;
  }

  html body .category-intro {
    margin-bottom: 42px;
  }

  html body .category-intro h2 {
    font-size: 36px;
  }

  html body .category-intro span {
    font-size: 14px;
  }

  html body .category-card .category-label strong {
    font-size: 15px;
  }

  html body .category-card .category-label small {
    font-size: 9px;
  }
}