.website-projects{position:relative;background:#fff;color:#222;scroll-margin-top:0}
.wp-pin{position:relative;padding:100px 6% 80px;isolation:isolate}
.wp-typo{position:relative;display:block;font-size:clamp(60px,14vw,230px);font-weight:700;line-height:.85;letter-spacing:-.065em;color:#f1eeeb;pointer-events:none;z-index:-1}
.wp-typo-top{color:transparent;-webkit-text-stroke:1px #f4cdb6}
.wp-typo-bottom{margin-top:15px;margin-bottom:40px}
.wp-topline{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:45px;font-size:12px;letter-spacing:1px}
.wp-topline>p{margin:0;color:#9c8d83}
.wp-topline>a{font-size:14px;letter-spacing:-.3px;border-bottom:1px solid #ccc1b9;padding-bottom:6px}
.wp-topline>a:hover{color:#ff5400;border-color:#ff5400}
.wp-track{display:flex;flex-direction:column;gap:65px}
.wp-case{width:100%;min-width:0}
.wp-project-link{display:block}
.wp-thumbnail{position:relative;width:100%;aspect-ratio:1.65;overflow:hidden;border-radius:22px;background:#fff1e6;box-shadow:0 15px 50px #a2441310}
.wp-thumbnail img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.wp-project-link:hover .wp-thumbnail img{transform:scale(1.035)}
.wp-case-number{position:absolute;left:22px;top:15px;color:#fff;font-size:70px;font-weight:700;line-height:1;letter-spacing:-5px;text-shadow:0 2px 20px #0002;opacity:.85}
.wp-category{position:absolute;right:20px;bottom:20px;border-radius:999px;padding:9px 15px;background:#ffffffed;color:#574b43;backdrop-filter:blur(8px);font-size:12px}
.wp-case-copy{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:20px 5px 0}
.wp-case-type{font-size:10px;font-weight:600;letter-spacing:1.6px;color:#ff5400;margin:0 0 8px}
.wp-case h3{font-size:30px;line-height:1.3;font-weight:600;letter-spacing:-1px;margin:0 0 10px}
.wp-case-description{font-size:14px;line-height:1.7;color:#998b80;margin:0;word-break:keep-all}
.wp-view{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:104px;min-height:44px;border:1px solid #ebded4;border-radius:999px;font-size:13px;transition:color .2s,background .2s,border-color .2s}
.wp-project-link:hover .wp-view{color:#fff;background:#ff5400;border-color:#ff5400}
.wp-progress{display:none}
.website-projects.is-pinned .wp-pin{position:sticky;top:0;height:100dvh;padding:0;overflow:hidden}
.website-projects.is-pinned .wp-typo{position:absolute;left:6%;margin:0;font-size:clamp(130px,15vw,250px)}
.website-projects.is-pinned .wp-typo-top{top:45px}
.website-projects.is-pinned .wp-typo-bottom{bottom:35px;left:auto;right:5%;color:#f3eeea}
.website-projects.is-pinned .wp-topline{position:absolute;top:103px;left:6%;right:6%;margin:0;z-index:2}
.website-projects.is-pinned .wp-rail{position:absolute;left:0;right:0;top:55%;transform:translateY(-50%)}
.website-projects.is-pinned .wp-track{flex-direction:row;gap:clamp(42px,6vw,100px);width:max-content;padding:0 12vw;will-change:transform}
.website-projects.is-pinned .wp-case{width:min(64vw,860px);flex-shrink:0;padding-top:var(--case-offset,0px)}
.website-projects.is-pinned .wp-thumbnail{height:clamp(240px,41dvh,440px);aspect-ratio:auto;border-radius:24px}
.website-projects.is-pinned .wp-case h3{font-size:clamp(24px,2.1vw,34px)}
.website-projects.is-pinned .wp-case-description{font-size:13px}
.website-projects.is-pinned .wp-progress{position:absolute;bottom:29px;left:6%;right:6%;display:flex;align-items:center;gap:24px}
.wp-count{font-size:12px;letter-spacing:2px;color:#b6a69b;white-space:nowrap}
.wp-count b{color:#ff5400;font-weight:600}
.wp-progress-bar{height:2px;background:#f0e4dc;flex:1;overflow:hidden}
.wp-progress-bar i{display:block;height:100%;background:#ff5400;transform:scaleX(0);transform-origin:left}
.wp-jump{display:flex;gap:10px}
.wp-jump button{display:block;width:7px;height:7px;background:#e5d7cd;border-radius:50%;padding:0}
.wp-jump button[aria-current=true]{background:#ff5400}
.wp-jump button:before{content:"";display:block;position:relative;inset:-8px;width:23px;height:23px}
@media(max-width:760px){.wp-pin{padding:85px 22px}.wp-typo{font-size:clamp(55px,14.3vw,105px)}.wp-topline{font-size:9px;letter-spacing:.7px;gap:12px}.wp-topline>a{font-size:12px}.wp-track{gap:42px}.wp-thumbnail{aspect-ratio:1.4;border-radius:18px}.wp-case-number{font-size:52px;left:16px;top:15px}.wp-category{right:12px;bottom:12px;font-size:10px;padding:8px 11px}.wp-case-copy{padding:18px 2px 0;gap:16px;align-items:flex-start}.wp-case h3{font-size:26px}.wp-case-description{font-size:13px}.wp-view{min-width:82px;min-height:38px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.wp-thumbnail img{transition:none}}
/* Keep the website screens, rather than the laptop bases, at the crop's focal point. */
.wp-thumbnail img{object-position:center 20%}
.website-projects{scroll-margin-top:-132px}
.production-system{scroll-margin-top:-42px}
/* Scroll blends the project section from white into deep navy. */
.website-projects{--wp-bg:#fff;--wp-ink:#232323;--wp-muted:#8f857d;--wp-outline:#ebd3c2;background:var(--wp-bg);color:var(--wp-ink)}
.wp-typo-top{-webkit-text-stroke-color:var(--wp-outline)}
.wp-typo-bottom,.website-projects.is-pinned .wp-typo-bottom{color:var(--wp-ink);opacity:.05}
.wp-topline{justify-content:flex-end}
.wp-topline>a{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:17px 28px;border:1px solid #ff5400;border-radius:999px;background:#ff5400;color:#fff;font-size:18px;letter-spacing:-.4px;transition:background .2s,border-color .2s}
.wp-topline>a:hover{background:#333;border-color:#333;color:#fff}
.wp-case-description,.website-projects.is-pinned .wp-case-description{font-size:18px;line-height:1.7;color:var(--wp-muted)}
.wp-media{position:relative}
.wp-case-number{left:0;top:0;transform:translate(-50%,-50%);display:grid;place-items:center;width:76px;height:76px;border-radius:18px;background:#ff5400;color:#fff;font-size:40px;font-weight:600;line-height:1;letter-spacing:-1.5px;opacity:1;text-shadow:none;box-shadow:0 9px 28px #00000014;z-index:1}
.wp-thumbnail{aspect-ratio:1.45}
.website-projects.is-pinned .wp-case{width:min(74vw,1080px)}
.website-projects.is-pinned .wp-thumbnail{height:clamp(280px,48dvh,500px)}
.website-projects.is-pinned .wp-track{padding-top:42px}
.website-projects.is-pinned .wp-topline{top:97px}
.website-projects.is-pinned .wp-typo-top{font-size:clamp(145px,17vw,280px)}
.wp-count{color:var(--wp-muted)}
.wp-view{border-color:var(--wp-outline)}
.wp-progress-bar{background:var(--wp-outline)}
.wp-jump button{background:var(--wp-outline)}
@media(max-width:760px){
 .wp-pin{padding:85px 34px}
 .wp-topline{margin-bottom:58px}
 .wp-topline>a{font-size:16px;min-height:54px;padding:15px 24px}
 .wp-track{gap:65px}
 .wp-case-number{width:54px;height:54px;border-radius:14px;font-size:29px}
 .wp-case-copy{display:block;padding-top:21px}
 .wp-case-description{font-size:18px}
 .wp-view{display:inline-flex;margin-top:18px;min-width:100px;min-height:42px;font-size:13px}
}
.website-projects.is-pinned .wp-case{padding-top:calc(var(--case-offset,0px)*.6)}
.website-projects.is-pinned .wp-typo-bottom{right:0;font-size:clamp(180px,22vw,370px);text-align:right}
@media(max-width:760px){.wp-typo-bottom{width:100%;text-align:right;font-size:clamp(60px,18vw,125px)}}
/* Reserve the pinned gallery's scroll length before deferred scripts run. */
@media(min-width:900px) and (min-height:620px) and (prefers-reduced-motion:no-preference){.website-projects{height:calc(100dvh + min(370vw,5400px) + clamp(168px,24vw,400px) - 76vw)}}

/* Centered project heading and a separate CTA below the gallery pagination. */
.wp-heading{text-align:center;margin:0 auto 55px;position:relative;z-index:1}
.wp-heading h2{font-size:clamp(36px,4.2vw,64px);font-weight:400;line-height:1.3;letter-spacing:-2.7px;margin:0;word-break:keep-all}
.wp-heading strong{font-weight:700;color:#ff5400}
.wp-topline,.website-projects.is-pinned .wp-topline{position:relative;inset:auto;display:flex;justify-content:center;margin:48px 0 30px;padding:0}
.website-projects.is-pinned .wp-pin{height:auto;min-height:100dvh;padding:90px 0 45px;overflow:clip}
.website-projects.is-pinned .wp-rail{position:relative;inset:auto;transform:none}
.website-projects.is-pinned .wp-track{padding-top:0}
.website-projects.is-pinned .wp-case{padding-top:0}
.website-projects.is-pinned .wp-thumbnail{height:clamp(360px,56dvh,640px)}
.website-projects.is-pinned .wp-progress{position:relative;inset:auto;margin:42px 6% 0}
.wp-thumbnail{aspect-ratio:1.2}
.wp-case-copy{display:block}
@media(max-width:760px){.wp-heading{margin-bottom:45px}.wp-heading h2{font-size:36px;letter-spacing:-1.6px}.wp-topline{margin:48px 0 30px}.wp-thumbnail{aspect-ratio:1.1}}

/* Continuous typography stays behind the project imagery. */
.wp-pin{overflow:clip}
.wp-typo-bottom,.website-projects.is-pinned .wp-typo-bottom{position:absolute;top:42%;bottom:auto;left:0;right:auto;display:flex;width:max-content;max-width:none;margin:0;font-size:clamp(180px,22vw,370px);line-height:1;white-space:nowrap;z-index:0;animation:wp-type-flow 45s linear infinite;opacity:.055}
.wp-typo-bottom>span{display:block;flex-shrink:0}
.wp-rail,.wp-progress,.wp-topline{position:relative;z-index:1}
@keyframes wp-type-flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.wp-typo-bottom{animation:none}}

.wp-typo-bottom,.website-projects.is-pinned .wp-typo-bottom{top:0}


/* Let taller gallery content scroll up before pinning, keeping its controls reachable. */
.website-projects.is-pinned .wp-pin{top:var(--wp-sticky-top,0px)}