/* Explicit control colours also override iOS Safari's blue button defaults. */
button { -webkit-appearance: none; appearance: none; color: var(--ink); }
button.button { color: var(--paper); }
button.button-outline, button.button-light { color: var(--ink); }
.menu-toggle { color: var(--ink); -webkit-text-fill-color: var(--ink); }
.menu-toggle:active { opacity: .65; }
.button, .header-cta { transition: background .22s, color .22s, border-color .22s, transform .22s; }
.button:active, .header-cta:active { transform: scale(.97); }
.button span, .text-link span, .header-cta span, .product-card-top>span { transition: transform .25s ease; }
.button:hover span, .text-link:hover span, .header-cta:hover span, .product-card:hover .product-card-top>span { transform: translate(3px,-3px); }
.reveal-item { transition: opacity .65s ease, transform .65s cubic-bezier(.2,.65,.3,1); }
.reveal-pending { opacity: 0; transform: translateY(24px); }
.reveal-pending:focus-within { opacity: 1; transform: none; }
.home-intro>.eyebrow, .hero-heading-row, .page-intro h1, .page-intro>.lead { animation: intro-arrive .65s ease both; }
.hero-heading-row, .page-intro>.lead { animation-delay: .1s; }
@keyframes intro-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media(max-width:850px) {
  .menu-icon { position: relative; width: 20px; height: 16px; border: 0; }
  .menu-icon::before, .menu-icon::after { content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 1px; background: currentColor; transition: transform .3s ease, top .3s ease; }
  .menu-icon::after { top: 11px; }
  .menu-toggle[aria-expanded=true] .menu-icon::before { top: 8px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded=true] .menu-icon::after { top: 8px; transform: rotate(-45deg); }
  .main-navigation { display: flex; visibility: hidden; opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity .25s ease, transform .3s ease, visibility 0s .3s; max-height: calc(100dvh - 78px); overflow-y: auto; }
  .main-navigation.is-open { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: 0s; }
  .main-navigation>a { opacity: 0; transform: translateY(-7px); transition: opacity .22s ease, transform .3s ease; }
  .main-navigation.is-open>a { opacity: 1; transform: none; transition-delay: calc(var(--nav-order, 0) * 35ms); }
}
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 0 20px; }
.filter-chip { background: transparent; border: 1px solid var(--line); padding: 12px 18px; border-radius: 30px; min-height: 44px; font-size: 12px; transition: color .2s, background .2s, border-color .2s; }
.filter-chip:hover { border-color: var(--ink); }
.filter-chip[aria-pressed=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.catalogue-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 52px; margin-bottom: 20px; border-top: 1px solid var(--line); }
.catalogue-summary p { font-size: 12px; color: var(--muted); margin: 0; }
#clear-filters { background: none; border: 0; padding: 12px 0; font-size: 12px; flex-shrink: 0; }
.model-section { padding-block: 55px 70px; }
.model-viewer { border: 1px solid var(--line); background: #e9e8e1; }
.model-topline { display: flex; justify-content: space-between; gap: 20px; padding: 23px 28px; font-size: 14px; border-bottom: 1px solid var(--line); }
.model-topline .eyebrow { margin: 0; font-size: 10px; }
.model-stage { height: 460px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #f6f5ef, #e9e8e1 70%); }
.model-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.model-stage canvas:active { cursor: grabbing; }
.model-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 25px; padding: 25px; text-align: center; }
.model-orbit { display: grid; place-items: center; font-size: 40px; width: 110px; height: 110px; border: 1px solid #a1a496; border-radius: 50%; transform: rotate(-15deg); }
.model-status { color: var(--muted); margin: 0; }
.model-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 15px; border-top: 1px solid var(--line); }
.model-controls button { background: transparent; border: 1px solid #bfc1b4; min-width: 44px; min-height: 44px; padding: 10px 15px; font-size: 12px; transition: background .2s, color .2s; }
.model-controls button:hover, .model-controls button[aria-pressed=true] { background: var(--ink); color: var(--paper); }
.model-caption { font-size: 11px; color: var(--muted); text-align: center; padding: 0 20px 20px; margin: 0; }
.model-load:disabled { opacity: .6; cursor: wait; }
@media(max-width:550px) { .filter-chip { padding: 11px 14px; } .model-stage { height: 330px; } .model-topline { padding: 18px; font-size: 12px; } .model-controls { gap: 6px; padding: 12px; } }
@media(prefers-reduced-motion:reduce) { .reveal-pending { opacity: 1; transform: none; } }