/* Approved raster artwork stays static; only these ruby-masked overlays move. */
.site-header .brand.brand-approved {
  position: relative;
  display: block;
  width: 220px;
  flex: 0 0 220px;
  gap: 0;
  letter-spacing: normal;
  line-height: 1;
  text-shadow: none;
}
.brand-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1864 / 534;
  isolation: isolate;
}
.brand-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
.site-header.nav-on-light .brand-art { filter: drop-shadow(0 .5px .6px #23132160); }

@supports (mask-image: url('/static/brand/samela-ruby-mask.png?v=20261018-centered-slogan')) or (-webkit-mask-image: url('/static/brand/samela-ruby-mask.png?v=20261018-centered-slogan')) {
  .brand-art::before, .brand-art::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-mask: url('/static/brand/samela-ruby-mask.png?v=20261018-centered-slogan') left center / contain no-repeat;
    mask: url('/static/brand/samela-ruby-mask.png?v=20261018-centered-slogan') left center / contain no-repeat;
  }
  .brand-art::before {
    background: linear-gradient(112deg, transparent 40%, #fff2d000 46%, #fff2d0a0 49%, #fff9eb70 50%, transparent 55%);
    background-size: 300% 100%;
    background-position: 100% 0;
    opacity: .65;
    animation: brand-ruby-sheen 8s ease-in-out infinite;
  }
  .brand-art::after {
    background-image:
      radial-gradient(circle, #fffceb 0 .45px, transparent .85px),
      radial-gradient(circle, #ffdaa3 0 .4px, transparent .8px),
      radial-gradient(circle, #fffdf4 0 .5px, transparent .9px);
    background-size: 19px 17px, 31px 23px, 43px 29px;
    background-position: 1px 2px, 7px 11px, 13px 4px;
    opacity: .85;
    animation: brand-ruby-sparkles 12s linear infinite;
  }
}
@keyframes brand-ruby-sheen {
  0%, 15% { background-position: 100% 0; }
  70%, 100% { background-position: 0 0; }
}
@keyframes brand-ruby-sparkles {
  to { background-position: 20px -15px, -24px 34px, 56px -25px; }
}
.motion-paused .brand-art::before, .motion-paused .brand-art::after,
.page-inactive .brand-art::before, .page-inactive .brand-art::after {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .brand-art::before, .brand-art::after { animation: none; opacity: 0; }
}
@media (min-width: 851px) {
  .site-header .brand.brand-approved { transform: translateY(12px); }
  .brand-art { transform: scale(1.35); transform-origin: left top; }
}
/* Match the landscape hero's text edge without moving the desktop navigation. */
@media (min-width: 851px) and (min-aspect-ratio: 10001/10000) {
  .site-header .brand.brand-approved {
    position: absolute;
    left: calc(3.2vw - max(0px, calc(50vw - 720px)));
    top: 50%;
    transform: translateY(calc(-50% + 12px));
  }
  .site-header .site-nav { margin-left: auto; }
}
@media (max-width: 700px) {
  .brand-art { transform: scale(1.1); transform-origin: left top; }
  .site-header .brand.brand-approved {
    width: clamp(120px, 33.2vw, 138px);
    flex-basis: clamp(120px, 33.2vw, 138px);
    margin-left: -4px;
    margin-right: 6px;
  }
}


/* Retain the former eyebrow's line box so the approved copy does not move. */
.opening-copy > .opening-accent { position: relative; }
.opening-accent-line {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  width: 40.8vw;
  height: 3px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #eee1c35c, #eee1c326 65%, #eee1c300);
  clip-path: polygon(0 30%, 100% 50%, 0 70%);
  pointer-events: none;
}
@media (max-width: 700px) {
  .opening-accent-line { width: calc(44vw - 14px); height: 2px; transform: translateY(calc(-50% - 18px)); }
}