.bp-ref{--ink:#20231f;--muted:#787a73;--line:#e2e4dc;--paper:#fafaf7;--sage:#546654;--hl:#e4eccc;--ease:cubic-bezier(.19,1,.22,1);overflow-x:clip}
.bp-ref main{display:block}
.ref-hero{max-width:1600px;margin:auto;padding:64px 4% 56px}
.ref-title{font-size:clamp(58px,11.5vw,200px);line-height:.88;letter-spacing:-.065em;font-weight:500;margin:0 0 56px}
.ref-line{display:block;overflow:hidden;padding:0 .03em .09em;margin-bottom:-.09em}
.ref-line>span{display:inline-block}
.ref-title .muted{color:#9ca092}
.js .ref-line>span{transform:translateY(108%);transition:transform 1.2s var(--ease)}
.js .ref-line+.ref-line>span{transition-delay:.12s}
.is-ready .ref-line>span{transform:none}
.ref-hero-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;border-top:1px solid var(--line);padding-top:26px}
.ref-hero-meta p{max-width:430px;color:#6e7369;font-size:15px;line-height:1.7;margin:0}
.ref-count{display:flex;align-items:flex-end;gap:12px}
.ref-count strong{font-size:clamp(52px,6vw,104px);font-weight:500;letter-spacing:-.05em;line-height:.85;font-variant-numeric:tabular-nums}
.ref-count span{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);line-height:1.5}
.ref-empty-note{max-width:1600px;margin:0 auto;padding:0 4% 8px;font-size:11px;color:var(--muted)}
.ref-filters-wrap{position:sticky;top:83px;z-index:15;background:rgba(250,250,247,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ref-filters{max-width:1600px;margin:0 auto;padding:14px 4%;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.ref-filters::-webkit-scrollbar{display:none}
.ref-chip{flex-shrink:0;border:1px solid var(--line);border-radius:99px;padding:10px 18px;font-size:12px;background:#fff;transition:background .25s,color .25s,border-color .25s}
.ref-chip:hover{border-color:var(--ink)}
.ref-chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.ref-chip sup{font-size:9px;margin-left:5px;opacity:.55}
.ref-grid{max-width:1600px;margin:0 auto;padding:40px 4% 120px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:clamp(48px,7vw,120px);align-items:start}
.ref-card{display:block;grid-column:span 6;position:relative;color:inherit}
.ref-card--0{grid-column:1/span 7}
.ref-card--1{grid-column:9/span 4;margin-top:clamp(60px,16vw,260px)}
.ref-card--2{grid-column:2/span 4}
.ref-card--3{grid-column:7/span 6;margin-top:clamp(40px,8vw,140px)}
.ref-card--4{grid-column:1/-1}
.ref-media{position:relative;overflow:hidden;border-radius:4px;background:#eeeee7;aspect-ratio:4/5}
.ref-card--3 .ref-media{aspect-ratio:5/4}
.ref-card--4 .ref-media{aspect-ratio:21/9}
.ref-media img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;display:block;translate:0 var(--py,0%);scale:1.02;transition:scale 1.4s var(--ease)}
.ref-card:hover .ref-media img{scale:1.08}
.ref-media:after{content:'';position:absolute;inset:0;z-index:3;background:var(--hl);transform:scaleY(0);transform-origin:top;pointer-events:none}
.js [data-reveal] .ref-media:after{transform:scaleY(1);transition:transform 1.2s cubic-bezier(.77,0,.18,1)}
.js [data-reveal].is-in .ref-media:after{transform:scaleY(0)}
.ref-badge{position:absolute;left:14px;top:14px;z-index:2;background:rgba(250,250,247,.92);backdrop-filter:blur(8px);border-radius:99px;padding:7px 12px;font-size:10px;letter-spacing:.4px}
.ref-ph{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,hsl(var(--h) 30% 91%),hsl(var(--h) 18% 80%));transition:scale 1.4s var(--ease)}
.ref-card:hover .ref-ph{scale:1.05}
.ref-ph svg{width:auto;height:58%;max-width:72%;stroke:none;filter:drop-shadow(0 28px 36px rgba(20,30,15,.18))}
.ref-ph .g-fill{fill:hsl(var(--h) 22% 38%)}
.ref-ph .g-line{fill:none;stroke:hsl(var(--h) 25% 24%);stroke-width:.7}
.ref-ph .g-handle{fill:none;stroke:hsl(var(--h) 22% 38%);stroke-width:1.8}
.ref-info{display:grid;grid-template-columns:auto 1fr auto;column-gap:18px;row-gap:6px;align-items:baseline;padding-top:20px}
.js [data-reveal] .ref-info{opacity:0;translate:0 18px;transition:opacity .9s .35s,translate .9s .35s var(--ease)}
.js [data-reveal].is-in .ref-info{opacity:1;translate:0 0}
.ref-num{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.ref-info h2{font-size:clamp(22px,2.1vw,34px);font-weight:500;letter-spacing:-.045em;line-height:1.08;margin:0}
.ref-info h2 span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
.ref-card:hover h2 span{background-size:100% 1px}
.ref-info p{grid-column:2;margin:0;font-size:12px;line-height:1.6;color:var(--muted)}
.ref-arrow{grid-column:3;grid-row:1;font-size:22px;transition:transform .5s var(--ease)}
.ref-card:hover .ref-arrow{transform:translate(5px,-5px)}
.ref-grid.is-filtered .ref-card{grid-column:span 4;margin-top:0}
.ref-grid.is-filtered .ref-media{aspect-ratio:4/5}
.has-cursor .ref-card{cursor:none}
.ref-cursor{position:fixed;left:0;top:0;z-index:100;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:11px;letter-spacing:.8px;pointer-events:none;scale:0;transition:scale .45s var(--ease)}
.ref-cursor.on{scale:1}
.ref-marquee{overflow:hidden;background:var(--hl);border-block:1px solid #d6dfbd;padding:24px 0}
.ref-marquee-track{display:flex;width:max-content;animation:ref-marq 40s linear infinite}
.ref-marquee span{font-size:clamp(34px,5.5vw,84px);font-weight:500;letter-spacing:-.045em;white-space:nowrap;padding-right:.5em;line-height:1}
.ref-marquee i{font-style:normal;color:var(--sage);font-size:.6em;vertical-align:.25em}
@keyframes ref-marq{to{transform:translateX(-50%)}}
.ref-cta{background:var(--ink);color:var(--paper);padding:clamp(70px,10vw,140px) 4%}
.ref-cta-inner{max-width:1600px;margin:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:48px;flex-wrap:wrap}
.ref-cta .eyebrow{color:#b8c0ab}
.ref-cta .dot{background:var(--hl)}
.ref-cta h2{font-size:clamp(46px,7.5vw,128px);line-height:.92;letter-spacing:-.06em;font-weight:500;margin:0}
.ref-cta h2 span{color:#8f9a82}
.ref-cta-actions{display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.ref-cta-btn{display:inline-flex;align-items:center;gap:42px;background:var(--hl);color:var(--ink);padding:22px 30px;border-radius:99px;font-size:14px;transition:gap .4s var(--ease),background .3s}
.ref-cta-btn span{font-size:20px}
.ref-cta-btn:hover{gap:64px;background:#fff}
.ref-cta-mail{font-size:13px;color:#b8c0ab;border-bottom:1px solid #4b5245;padding-bottom:4px}
.ref-cta-mail:hover{color:#fff}
.ra-hero{max-width:1600px;margin:auto;padding:48px 4%}
.ra-back{display:inline-flex;gap:10px;font-size:12px;color:var(--muted);margin-bottom:56px;transition:color .2s,gap .3s}
.ra-back:hover{color:var(--ink);gap:16px}
.ra-title{font-size:clamp(46px,8.5vw,150px);line-height:.9;letter-spacing:-.06em;font-weight:500;margin:0 0 56px}
.ra-meta{display:grid;grid-template-columns:1fr 1fr 2fr;gap:32px;border-top:1px solid var(--line);padding-top:24px;margin:0}
.ra-meta dt{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ra-meta dd{margin:0;font-size:15px;line-height:1.5}
.ra-meta .ra-lead{font-size:clamp(17px,1.5vw,21px);line-height:1.55;letter-spacing:-.01em;color:#40453c}
.ra-cover{margin:0 4%;overflow:hidden;border-radius:4px;aspect-ratio:16/9;background:#eeeee7}
.ra-cover img{width:100%;height:100%;object-fit:cover;display:block;scale:var(--s,1.12)}
.ra-body{max-width:860px;margin:0 auto;padding:clamp(60px,8vw,120px) 4%}
.ra-body>*:first-child{margin-top:0}
.ra-body p,.ra-body li{font-size:18px;line-height:1.75;color:#393d35}
.ra-body h2,.ra-body h3{font-size:clamp(28px,3vw,46px);font-weight:500;letter-spacing:-.045em;line-height:1.08;margin:72px 0 22px}
.ra-body img{width:100%;height:auto;border-radius:4px;margin:24px 0;display:block}
.ra-body blockquote{margin:64px 0;padding-left:28px;border-left:2px solid var(--sage);font-size:clamp(24px,2.8vw,38px);line-height:1.25;letter-spacing:-.03em}
.ra-body a{border-bottom:1px solid currentColor}
@media(min-width:1100px){.ra-body img{width:calc(100% + 240px);max-width:none;margin-left:-120px}}
.ra-nav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.ra-nav a{padding:clamp(40px,6vw,80px) 4%;font-size:clamp(28px,4.2vw,68px);letter-spacing:-.05em;line-height:1;transition:background .35s}
.ra-nav a:hover{background:var(--hl)}
.ra-nav small{display:block;font-size:10px;letter-spacing:1.5px;color:var(--muted);margin-bottom:16px}
.ra-nav .ra-next{grid-column:2;text-align:right;border-left:1px solid var(--line)}
@media(max-width:900px){.ref-card,.ref-card--0,.ref-card--1,.ref-card--2,.ref-card--3,.ref-grid.is-filtered .ref-card{grid-column:span 6;margin-top:0}.ref-card--4{grid-column:1/-1}.ref-card--4 .ref-media{aspect-ratio:16/10}.ref-hero-meta{flex-direction:column;align-items:flex-start}.ra-meta{grid-template-columns:1fr 1fr}.ra-meta>div:nth-child(3){grid-column:1/-1}.ref-cta-actions{align-items:flex-start}}
@media(max-width:600px){.ref-card,.ref-card--0,.ref-card--1,.ref-card--2,.ref-card--3,.ref-grid.is-filtered .ref-card{grid-column:1/-1}.ref-card--4 .ref-media,.ref-card--3 .ref-media{aspect-ratio:4/5}}
@media(max-width:760px){.ref-filters-wrap{top:68px}.ref-hero{padding:40px 5%}.ref-grid{padding:24px 5% 80px}.ref-filters{padding:12px 5%}.ref-empty-note{padding:0 5% 8px}.ra-hero{padding:32px 5%}.ra-back{margin-bottom:36px}.ra-cover{margin:0 5%;aspect-ratio:4/3}.ra-body p,.ra-body li{font-size:16px}.ra-nav{grid-template-columns:1fr}.ra-nav .ra-next{grid-column:1;border-left:0;border-top:1px solid var(--line);text-align:left}.ref-cta{padding:64px 5%}.ref-cursor{display:none}}
@media(prefers-reduced-motion:reduce){.ref-marquee-track{animation:none}.js .ref-line>span{transform:none}.ra-cover img{scale:1}}
