.site-header{position:relative;z-index:20;gap:20px}
.header-actions{display:flex;align-items:center;gap:20px;flex-shrink:0}
.paint-control{position:relative;flex-shrink:0;margin-left:0;font-family:var(--font-body)}
.paint-trigger{display:flex;align-items:center;justify-content:center;width:88px;height:44px;background:var(--color-blue) url('../assets/round-two/paint-oval.svg') center/contain no-repeat;border-radius:50%;color:var(--color-ivory);font-family:var(--font-body);font-size:11px;line-height:12px;letter-spacing:.18em;text-transform:uppercase;padding-left:2px}
.paint-panel{position:absolute;top:60px;right:-40px;width:320px;padding:22px 22px 16px;border:2px solid var(--color-ink);border-radius:24px;background:var(--color-ivory);color:var(--color-ink);box-shadow:0 18px 40px #16161647;max-height:calc(100svh - 120px);overflow:auto}
.paint-panel[hidden]{display:none}
.paint-panel h2{font:400 20px/26px var(--font-body);margin:0}
.paint-panel p{font:400 14px/21px var(--font-body);margin:6px 0 14px}
.paint-option{display:flex;width:100%;align-items:center;gap:12px;border-top:1px solid #16161626;padding:12px 0;text-align:left;color:var(--color-ink)}
.paint-swatch{width:42px;height:24px;flex-shrink:0;border-radius:50%;background-image:none}
.paint-copy{display:flex;flex:1;flex-direction:column;gap:2px;font:400 17px/22px var(--font-body)}
.paint-copy small{font:400 13px/17px var(--font-body);color:#6E7076}
.paint-check{width:16px;visibility:hidden}.paint-option[aria-pressed=true] .paint-check{visibility:visible}
.paint-option:hover .paint-copy>span{text-decoration:underline;text-underline-offset:3px}
.paint-trigger:focus-visible,.paint-option:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.hero,.contact,.opening-band,#mobile-menu{transition:background-color .65s ease}
@media(min-width:901px) and (max-width:1200px){.desktop-nav{gap:18px}.paint-trigger{width:74px}.site-header{gap:14px}.paint-control{margin-left:0}}
@media(max-width:900px){.site-header{gap:12px}.header-actions{margin-left:auto;order:1;gap:0}.paint-control{margin-left:0}.menu-toggle{order:2}.paint-trigger{width:72px;height:44px}.paint-panel{position:fixed;top:88px;right:20px;width:min(320px,calc(100vw - 40px));max-height:calc(100svh - 108px);padding:22px 22px 14px}.site-header>a:first-child svg{width:clamp(125px,36vw,160px)}}
@media(prefers-reduced-motion:reduce){.hero,.contact,.opening-band,#mobile-menu{transition:none}}
/* Keep secondary footer text legible across the paint palette. */
.contact{--color-blue-grey:var(--color-ivory)}
/* Paper P2: Paint joins the navigation with a small outlined colour oval. */
.paint-trigger{width:auto;height:44px;gap:10px;padding:0;background:none;border-radius:0;font-size:calc(15 * var(--u));line-height:calc(20 * var(--u));letter-spacing:.08em;white-space:nowrap}
.paint-indicator{display:block;width:22px;height:14px;flex-shrink:0;border:2px solid var(--color-ivory);border-radius:50%;background:var(--color-blue)}
.desktop-nav{align-items:center}
.paint-panel{right:0;top:52px}
@media(max-width:900px){.paint-trigger{font-size:13px;line-height:20px;gap:8px}.paint-indicator{width:20px;height:13px}.paint-panel{top:88px;right:20px}}