:root {
  --site-nav-height: 112px;
  --site-nav-reserved: 112px;
  --brand-duration: 650ms;
  --brand-ease: cubic-bezier(.22, 1, .36, 1);
}
:root[data-brand-compact] { --site-nav-height: 72px; }
/* Reserve the initial header footprint. Only its visible surface contracts;
   page content never reflows and scroll anchoring cannot retrigger the logo. */
.nav.animated-nav {
  height: var(--site-nav-reserved);
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  isolation: isolate;
}
.nav.animated-nav::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: var(--site-nav-height);
  z-index: -1;
  background: color-mix(in oklab, var(--cream, #f3f0e8) 94%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid transparent;
}
[data-brand-compact] .nav.animated-nav::before { border-bottom-color: var(--line-soft, rgba(57,31,17,.12)); }
.nav.animated-nav .nav-inner {
  height: var(--site-nav-height);
  min-height: 0;
  pointer-events: auto;
}
.nav.animated-nav .brand {
  position: relative;
  display: block;
  width: 160px;
  height: 100%;
  flex: 0 0 160px;
  margin: 0;
}
.brand-motion {
  position: absolute;
  width: 160px;
  height: 96px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.nav.animated-nav .brand-motion img {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  max-width: none;
  max-height: none;
  transform-origin: 0 0;
}
.nav.animated-nav .brand-wordmark {
  width: 112px;
  height: 26.84px;
  transform: translate(24px, 66.73px) scale(1);
}
.nav.animated-nav .brand-mascot {
  width: 49px;
  height: 69.82817266px;
  transform: translate(54.18px, 3px) scale(1);
}
.nav.animated-nav .brand-wordmark-horizontal {
  height: 26.64704776px;
  opacity: 0;
}
/* Original horizontal SVG, 12% smaller (135.52px wide), centred vertically.
   Scale both parts together to preserve the original plaque overlap. */
[data-brand-compact] .nav.animated-nav .brand-wordmark { transform: translate(23.779301px, 37.418379px) scale(.99768481); opacity: 0; }
[data-brand-compact] .nav.animated-nav .brand-wordmark-horizontal { opacity: 1; }
[data-brand-compact] .nav.animated-nav .brand-mascot { transform: translate(0, 25.383037px) scale(.64778903); }
[data-brand-ready] .nav.animated-nav .brand-motion img { transition: transform var(--brand-duration) var(--brand-ease), opacity var(--brand-duration) var(--brand-ease); }
[data-brand-ready] .nav.animated-nav::before,
[data-brand-ready] .nav.animated-nav .nav-inner { transition: height var(--brand-duration) var(--brand-ease), border-color .25s; }
.nav-actions { display: flex; align-items: center; gap: 14px; }
/* The same balance on the home, contact and catalogue pages; stable columns
   mean the links don't slide sideways as the artwork changes shape. */
@media (min-width: 1181px) {
  .nav.animated-nav .nav-inner { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 24px; }
  .nav.animated-nav .nav-inner > .nav-links { justify-self: center; gap: 22px; }
  .nav.animated-nav .nav-actions { justify-self: end; }
}
@media (min-width: 1181px) and (max-width: 1300px) {
  .nav.animated-nav .nav-inner { gap: 16px; }
  .nav.animated-nav .nav-inner > .nav-links { gap: 16px; font-size: 13px; }
  .nav.animated-nav .figurine-search-form { width: 180px; }
  .nav.animated-nav .cat-switch-btn { max-width: 135px; }
}
@media (min-width: 920px) and (max-width: 1180px) {
  .nav.animated-nav#siteNav .nav-inner { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; }
  .nav.animated-nav#siteNav .nav-links { justify-self: center; gap: 14px; }
}
@media (max-width: 1180px) {
  :root { --site-nav-height: 100px; --site-nav-reserved: 100px; }
  :root[data-brand-compact] { --site-nav-height: 66px; }
  .nav.animated-nav .brand { width: 132px; flex-basis: 132px; }
  .nav.animated-nav .brand-motion { transform: translateY(-50%) scale(.84); transform-origin: left center; }
  .nav.animated-nav .nav-inner { gap: 12px; }
  .nav.animated-nav .nav-polish-toggle { margin-left: 0; }
  .nav.animated-nav .figurine-search-panel { top: calc(var(--site-nav-height) + 8px); }
  .polish-mobile-panel {
    top: calc(var(--site-nav-height) + 8px);
    max-height: calc(100dvh - var(--site-nav-height) - 24px);
  }
  [data-brand-ready] .polish-mobile-panel { transition: top var(--brand-duration) var(--brand-ease); }
  [data-brand-ready] .nav.animated-nav .figurine-search-panel { transition: top var(--brand-duration) var(--brand-ease); }
}
@media (max-width: 760px) {
  .nav.animated-nav .nav-actions { display: none; }
  .nav.animated-nav .container { padding-inline: 14px; }
}
@media (max-width: 919px) {
  .nav.animated-nav#siteNav .nav-actions { display: none; }
  .nav.animated-nav#siteNav .nav-links { top: calc(var(--site-nav-height) + 8px); max-height: calc(100dvh - var(--site-nav-height) - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --brand-duration: 0ms; }
  [data-brand-ready] .nav.animated-nav::before,
  [data-brand-ready] .nav.animated-nav .nav-inner,
  [data-brand-ready] .polish-mobile-panel { transition: none; }
}
/* Long catalogue names keep the dropdown arrow and search control visible. */
.nav.animated-nav .cat-switch-btn > span[style] { min-width: 0; }
.nav.animated-nav #catSwitchLabel { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav.animated-nav .cat-switch-btn > svg,
.nav.animated-nav .cat-switch-btn > .swatch { flex-shrink: 0; }