/* Header lockup and hero parallax */
.header-fx { position:relative; width:58px; height:66px; display:block; overflow:hidden; --px:.5; --py:.5; flex:none; }
.header-fx .fx-spot { position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(48px circle at calc(var(--px) * 100%) calc(var(--py) * 100%), rgba(248,176,24,.28), transparent 62%); }
.header-fx .fx-layer { position:relative; z-index:1; transition:transform .16s ease-out; }
.header-fx .header-bull { display:block; width:100%; height:100%; object-fit:contain; }
.brand:hover .header-bull { transform:none; }
.header-wordmark { line-height:.78; gap:1px; }
.header-wordmark b { display:block; font:800 16px/1 Syne,Arial,sans-serif; letter-spacing:-.08em; }
.header-wordmark small { line-height:1.1; }

.brand > .header-bull { display:block; width:58px; height:66px; object-fit:contain; overflow:visible; flex:none; }
.hero .fx-spot { position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(480px circle at calc(var(--px, .5) * 100%) calc(var(--py, .5) * 100%), rgba(248,176,24,.25), transparent 62%); }
.hero .fx-layer { position:relative; z-index:1; transition:transform .16s ease-out; }
.real-bull svg { display:block; width:100%; height:auto; overflow:visible; }

.grey-ring { position:absolute; left:50%; top:50%; width:min(60vw,620px); aspect-ratio:460/495; height:auto; z-index:0; pointer-events:none; animation:ringdrift 60s ease-in-out infinite; }
.g-ring { transform-box:fill-box; transform-origin:center; animation:spin 40s linear infinite; }
@keyframes ringdrift {
  0%   { transform:translate(-50%,-50%) translate(0,0); }
  30%  { transform:translate(-50%,-50%) translate(65vw,-10vh); }
  60%  { transform:translate(-50%,-50%) translate(-55vw,30vh); }
  100% { transform:translate(-50%,-50%) translate(0,0); }
}
@media(prefers-reduced-motion:reduce){
  .g-ring{ animation:none; }
  .grey-ring{ animation:none; transform:translate(-50%,-50%); }
}

.process-chapter { background:#fff; padding:110px 9.5vw 125px; }

/* ---------- visual grid ---------- */
.shot-grid{ display:grid; grid-template-columns:1fr .8fr .95fr .8fr .9fr; align-items:end; gap:16px; margin-top:40px; perspective:1000px; }
.shot{ position:relative; margin:0; overflow:hidden; cursor:pointer; will-change:transform; box-shadow:0 13px 32px rgba(5,5,5,.12); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.shot:nth-child(1){ height:520px; }
.shot:nth-child(2){ height:400px; }
.shot:nth-child(3){ height:470px; }
.shot:nth-child(4){ height:410px; }
.shot:nth-child(5){ height:450px; }
.shot:hover{ transform:translateY(-12px) rotate(-1deg); }
.shot img{ width:100%; height:100%; display:block; object-fit:cover; filter:saturate(1.15) contrast(1.05); transition:transform .8s cubic-bezier(.16,1,.3,1), filter .5s; }
.shot:hover img{ transform:scale(1.08); filter:saturate(1.4) contrast(1.12); }
.shot::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; z-index:2; background:var(--c, var(--yellow)); }
.shot::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.7)); pointer-events:none; }
.shot figcaption{ position:absolute; left:18px; bottom:16px; z-index:2; display:flex; align-items:center; gap:9px; color:#fff; text-transform:uppercase; font:10px 'DM Mono',monospace; letter-spacing:.05em; }
.shot figcaption .num{ color:var(--c, var(--yellow)); }
@media(max-width:700px){
  .shot-grid{ grid-template-columns:1fr; gap:12px; margin-top:30px; }
  .shot, .shot:nth-child(1), .shot:nth-child(2), .shot:nth-child(3), .shot:nth-child(4), .shot:nth-child(5){ height:300px; }
}
@media(prefers-reduced-motion:reduce){ .shot, .shot img{ transition:none; } }

/* ---------- legal footer ---------- */
.legal-footer{ margin-top:14px; display:flex; gap:10px; align-items:center; font:10px 'DM Mono',monospace; opacity:.75; }
.legal-footer a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.legal-footer a:hover{ opacity:.7; }
@media(max-width:700px){ .legal-footer{ font-size:9px; } }
.process-chapter .process-head { margin-top:0; }
@media(max-width:700px){.brand > .header-bull{width:47px;height:54px}.header-wordmark b{font-size:13px}.process-chapter{padding:80px 5vw 85px}}