/* Shared studio branding for the service, assessment, product and support pages. */
:root{--studio-gold:#d6b56f;--font-serif:"Instrument Serif",Georgia,serif}
.site-header,.header{background:rgba(5, 5, 5,.94)}
.wordmark,.brand{display:inline-flex;align-items:center;gap:11px}
.wordmark__logo,.brand__logo,.brand>img{width:40px;height:40px;object-fit:contain;mix-blend-mode:screen;flex-shrink:0}
.brand-name{font:500 16px/1.2 "Manrope",sans-serif;letter-spacing:2.8px;color:#f4f1ea}
.brand-name small{display:block;margin-top:5px;font-size:8px;letter-spacing:4px;color:var(--studio-gold)}
.hero h1,.welcome h1,.products-hero h1,.products-section h2,.section h2,.cta h2{font-family:var(--font-serif);font-weight:400;letter-spacing:-.025em;line-height:1.05}
.button{font-family:"Manrope",sans-serif;font-size:14px;letter-spacing:0;text-transform:none}
.wordmark:focus-visible,.brand:focus-visible{outline:2px solid var(--studio-gold);outline-offset:5px}
@media(max-width:700px){
 .wordmark__logo,.brand__logo,.brand>img{width:34px;height:34px}
 .brand-name{font-size:12px;letter-spacing:2px}
 .brand-name small{font-size:7px;letter-spacing:3px}
 .site-header{gap:14px}
}

/* 2026 re-theme: headings use the studio display face */
h1, h2, .welcome h1, .products-hero h1, .hero h1 { font-family: "Bricolage Grotesque", "Manrope", sans-serif; font-weight: 600; letter-spacing: -.03em; }