/* Scoped to the hero. Shared navigation and following sections are unchanged. */
.reference-hero{--hero-progress:0;height:calc(100svh + 320px);padding:120px 30px 30px;background:#f6f6f6;background-image:linear-gradient(to right,transparent calc(100% - 1px),#ddd 1px);background-size:calc((100% - 60px)/4) 100%;background-position:30px 0}
.reference-stage{position:sticky;top:120px;height:calc(100svh - 150px);min-height:520px;overflow:hidden}.reference-heading{position:absolute;left:5px;right:10px;top:80px;display:grid;grid-template-columns:3fr 1fr;align-items:end;gap:15px}.reference-heading h1{font-family:Greycliff,Arial,sans-serif;font-size:clamp(110px,15.625vw,240px);font-weight:700;line-height:.8;letter-spacing:-.065em;margin:0;color:#0b0b0b}.reference-facts{text-align:right;height:170px;display:flex;flex-direction:column;justify-content:space-between;border-bottom:1px solid #dedede;padding-bottom:10px}.fact-controls{display:flex;justify-content:flex-end;gap:12px}.fact-controls button{width:16px;height:16px;padding:0;background:none;border:0;position:relative;border-radius:50%}.fact-controls button:after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:#999;top:5px;left:5px}.fact-controls button.active{border:1px solid #111}.fact-controls button.active:after{background:#111;top:4px;left:4px}.fact-copy strong{display:block;font-size:38px;line-height:1;letter-spacing:-.05em}.fact-copy>span{display:block;font-size:13px;color:#555;margin-top:5px}.reference-photo{position:absolute;left:0;right:0;bottom:0;top:calc(300px * (1 - var(--hero-progress)));background:#111;overflow:hidden}.reference-photo>img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:grayscale(1)}.reference-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 60%,#0007);pointer-events:none}.reference-actions{position:absolute;left:20px;bottom:20px;display:flex;gap:10px;z-index:2}.reference-button{display:inline-flex;align-items:center;justify-content:center;gap:15px;padding:20px 29px;font-size:13px;border:1px solid #343434;border-radius:50px;transition:transform .2s}.reference-button:hover{transform:translateY(-3px)}.reference-button-dark{background:#111;color:white}.reference-button-light{background:#f6f6f6;color:#111;border-color:#eee}.reference-button span{font-size:16px}
@media(max-width:991px){.reference-heading h1{font-size:15vw}.reference-heading{top:80px}.reference-facts{height:115px}.fact-copy strong{font-size:32px}.reference-photo{top:calc(250px * (1 - var(--hero-progress)))}}
@media(max-width:600px){.reference-hero{padding:105px 16px 20px;height:calc(100svh + 240px);background-size:calc((100% - 32px)/4) 100%;background-position:16px 0}.reference-stage{top:105px;height:calc(100svh - 125px);min-height:510px}.reference-heading{left:0;right:0;top:65px;grid-template-columns:2.4fr 1fr;gap:8px}.reference-heading h1{font-size:23vw;letter-spacing:-.07em}.reference-facts{height:85px}.fact-copy strong{font-size:25px}.fact-copy>span{font-size:9px;line-height:1.2}.reference-photo{top:calc(190px * (1 - var(--hero-progress)))}.reference-actions{left:12px;right:12px;bottom:14px;gap:7px}.reference-button{font-size:10px;padding:14px 12px;gap:8px;flex:1;white-space:nowrap}.reference-button span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.reference-hero{height:100svh;min-height:665px}.reference-stage{position:relative;top:0}.reference-button{transition:none}}
@media(min-width:601px){.reference-heading h1{transform:scaleX(1.5);transform-origin:left center;width:66.666%}}

.reference-heading h1{font-size:clamp(70px,11.8vw,185px);font-weight:700;letter-spacing:-.055em;transform:none;width:auto;text-transform:uppercase}
@media(max-width:600px){.reference-heading h1{font-size:13.8vw;letter-spacing:-.06em}}

@font-face{font-family:"Inter Display";src:url(assets/inter-display-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
.reference-heading h1{font-family:"Inter Display",sans-serif;font-weight:800}
@font-face{font-family:"Inter Display";src:url(assets/inter-display-400.woff2);font-weight:400;font-display:swap}
@font-face{font-family:"Inter Display";src:url(assets/inter-display-500.woff2);font-weight:500;font-display:swap}
.reference-hero,.reference-button{font-family:"Inter Display",sans-serif}
.fact-copy{overflow:hidden;padding:3px 0}.fact-copy strong{font-family:"Inter Display",sans-serif;font-weight:500}.fact-copy>span{font-family:"Inter Display",sans-serif;font-weight:400}
.reference-button{height:58px;padding:0 29px;font-weight:500;font-size:13px;gap:12px;overflow:hidden;transition:background .25s,border-color .25s}.reference-button:hover{transform:none}.reference-button .button-label{font-size:inherit;position:relative;display:block;line-height:20px;transition:transform .4s cubic-bezier(.22,1,.36,1)}.button-label:after{content:attr(data-label);position:absolute;left:0;top:40px;white-space:nowrap}.reference-button:hover .button-label{transform:translateY(-40px)}.reference-button .button-icon{font-size:15px}.reference-button-dark:hover{background:#242424}.reference-button-light:hover{background:#e8e8e8}
.fact-controls button.active{animation:fact-pulse 5.5s linear infinite}@keyframes fact-pulse{from{border-color:#111}to{border-color:#888}}
@media(max-width:600px){.reference-button{height:48px;padding:0 12px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.reference-button .button-label{transition:none}.fact-controls button.active{animation:none}}
