.brand-system-page{background:radial-gradient(circle at 72% 12%, #7ba7c91f, transparent 28rem), radial-gradient(circle at 18% 84%, #c9a87b14, transparent 22rem), var(--black)}.brand-hero{border-bottom:1px solid var(--gray-900);align-items:center;min-height:96vh;padding:9rem 2rem 6rem;display:grid;position:relative;overflow:hidden}#brand-system-canvas,.brand-scene-fallback{width:100%;height:100%;position:absolute;inset:0}#brand-system-canvas{z-index:0;filter:saturate(1.15)brightness(1.35)}.brand-scene-fallback{z-index:0;opacity:.16;pointer-events:none;place-items:center end;padding-right:clamp(1rem,8vw,8rem);display:grid}.webgpu-ready .brand-scene-fallback{opacity:.12}.brand-scene-fallback img{filter:drop-shadow(0 0 28px #7ba7c940);width:min(46vw,34rem);max-width:82%}.brand-hero:before{content:"";z-index:1;pointer-events:none;background:linear-gradient(90deg,#0a0a0afa 0%,#0a0a0ae6 36%,#0a0a0a6b 58%,#0a0a0a00 82%),linear-gradient(#0000 68%,#0a0a0ab8);position:absolute;inset:0}.brand-hero-inner{z-index:2;max-width:var(--inner-max);width:100%;margin:0 auto;position:relative}.brand-hero h1{max-width:760px;margin:0 0 1.6rem;font-size:clamp(3rem,8vw,7.2rem);line-height:.95}.brand-hero-copy{max-width:660px;color:var(--gray-300);font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.65}.brand-hero-actions{flex-wrap:wrap;gap:.9rem;margin-top:2rem;display:flex}.brand-section{padding:var(--section-pad) 2rem}.principle-grid,.logo-grid,.application-grid{gap:1rem;display:grid}.principle-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.principle-item,.logo-tile,.application-strip,.material-sample,.type-sample{border:var(--pixel-border);background:#0a0a0ad1}.principle-item{align-content:space-between;gap:1.1rem;min-height:14rem;padding:1.35rem;display:grid}.principle-index,.app-kicker,.type-label{font-family:var(--font-mono);color:var(--wc-blue);text-transform:uppercase;font-size:.72rem}.principle-item h3,.logo-tile h3,.material-sample h3,.application-strip strong{font-family:var(--font-mono);color:var(--white);font-size:1.05rem}.principle-item p,.logo-tile p,.application-strip p,.material-sample p{color:var(--gray-300);line-height:1.65}.brand-mark-layout{grid-template-columns:minmax(0,.9fr) minmax(20rem,1.1fr);align-items:center;gap:clamp(2rem,5vw,5rem);display:grid}.mark-anatomy{border:1px solid var(--gray-900);background:linear-gradient(#ffffff06 1px, transparent 1px), linear-gradient(90deg, #ffffff06 1px, transparent 1px), var(--black);background-size:42px 42px;place-items:center;min-height:28rem;margin:0;display:grid}.mark-anatomy img{filter:drop-shadow(0 0 22px #7ba7c952);width:min(58%,19rem)}.mark-anatomy figcaption{border-top:1px solid var(--gray-900);grid-template-columns:repeat(4,1fr);width:100%;display:grid}.mark-anatomy figcaption span{border-right:1px solid var(--gray-900);color:var(--gray-500);font-family:var(--font-mono);text-transform:uppercase;text-align:center;padding:.8rem;font-size:.72rem}.mark-anatomy figcaption span:last-child{border-right:0}.logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.logo-tile{grid-template-rows:minmax(8rem,1fr) auto auto;gap:.75rem;min-height:19rem;padding:1.2rem;transition:transform .2s,border-color .2s,box-shadow .2s;display:grid}.logo-tile:hover{border-color:var(--wc-blue);box-shadow:4px 4px 0 var(--gray-900);transform:translate(-2px,-2px)}.logo-tile img{object-fit:contain;border:1px solid var(--gray-900);background-color:#ffffff05;background-image:linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:20px 20px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;width:100%;height:100%;min-height:8rem;padding:1rem}.logo-tile-sheet{grid-column:span 2}.token-layout{grid-template-columns:minmax(11rem,.55fr) minmax(0,1fr) minmax(0,.9fr);gap:1rem;display:grid}.color-rail{border:var(--pixel-border);grid-template-columns:repeat(2,1fr);display:grid}.color-rail span{background:var(--swatch);min-height:7rem;color:var(--white);font-family:var(--font-mono);text-transform:uppercase;border-bottom:1px solid #ffffff2e;border-right:1px solid #ffffff2e;align-items:flex-end;padding:.9rem;font-size:.72rem;display:flex}.color-rail span:first-child,.color-rail span:nth-child(2){color:var(--gray-300)}.type-sample{padding:1.5rem}.type-sample strong{color:var(--white);font-family:var(--font-mono);margin:.8rem 0 2rem;font-size:clamp(1.4rem,4vw,3.3rem);line-height:1;display:block}.type-sample span{max-width:28rem;color:var(--gray-300);font-size:clamp(1rem,2vw,1.25rem);line-height:1.6;display:block}.type-label-sans{color:var(--wc-amber)}.material-sample{align-content:space-between;gap:1rem;padding:1.5rem;display:grid}.material-ledger{flex-wrap:wrap;gap:.5rem;display:flex}.material-ledger span{border:1px solid var(--gray-700);color:var(--gray-300);font-family:var(--font-mono);text-transform:uppercase;padding:.45rem .65rem;font-size:.72rem}.application-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.application-strip{border-left:3px solid var(--wc-blue);padding:1.25rem}.application-strip:nth-child(2){border-left-color:var(--wc-sage)}.application-strip:nth-child(3){border-left-color:var(--wc-amber)}.application-strip strong{margin:.8rem 0 .35rem;display:block}@media (width<=980px){.principle-grid,.logo-grid,.token-layout,.application-grid,.brand-mark-layout{grid-template-columns:1fr}.logo-tile-sheet{grid-column:auto}.brand-hero:before{background:linear-gradient(90deg,#0a0a0afa 0%,#0a0a0ac2 100%),linear-gradient(#0000 52%,#0a0a0adb)}}@media (width<=720px){.brand-hero{min-height:88vh;padding:8rem 1rem 4rem}.brand-section{padding-left:1rem;padding-right:1rem}.brand-hero h1{font-size:clamp(2.6rem,14vw,4.5rem)}.brand-hero-actions .btn{justify-content:center;width:100%}.mark-anatomy{min-height:20rem}.mark-anatomy figcaption{grid-template-columns:repeat(2,1fr)}}@media (prefers-reduced-motion:reduce){.logo-tile,.logo-tile:hover{transition:none;transform:none}}