/* The portfolio shares the homepage's typography, black surface and copper accents. */
:root{--work-gutter:clamp(20px,3.4vw,58px);--work-top:108px}
.work-app[hidden],[hidden]{display:none!important}
.work-app{position:fixed;inset:0;z-index:40;background:var(--bg-color);color:var(--text-color);overflow:hidden;color-scheme:dark;overscroll-behavior:none}
html.work-mode,body.work-active{overflow:hidden!important;scrollbar-gutter:auto!important}
body.work-active #smooth-wrapper{visibility:hidden;pointer-events:none}
body.work-active .hover-reveal,body.work-active #canvas-container,body.work-active #wrapper{visibility:hidden}
body.work-active .loader{display:none!important}
body.work-active .nav-glass{background:rgba(5,5,5,.94)}
body.work-active .nav-all-work{color:var(--accent)!important}
.nav-links{gap:clamp(16px,1.6vw,28px)}
.work-surface{position:absolute;inset:var(--work-top) 24px 12px}
.work-archive{display:grid;grid-template-rows:64px minmax(0,1fr) 48px}
.archive-toolbar{display:flex;align-items:center;gap:48px;border-bottom:1px solid #ffffff24;padding-bottom:12px}
.archive-toolbar h1{font-family:var(--font-display);font-weight:400;font-size:38px;white-space:nowrap;line-height:1;letter-spacing:-.02em}
.archive-toolbar h1 em{color:var(--accent);font-weight:400}
.work-filters{display:flex;align-items:center;gap:30px;width:100%;min-width:0}
.filter-field{width:180px;max-width:25vw;min-width:0}
.filter-reset{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--accent);font:inherit;cursor:pointer;font-size:10px;white-space:nowrap;padding:12px 0}
.work-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mosaic-stage{position:relative;min-height:0;min-width:0;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;isolation:isolate}
.archive-board{margin-top:10px}
.mosaic-stage.is-dragging,.mosaic-stage.is-dragging *{cursor:grabbing!important}
.mosaic-band{position:absolute;overflow:hidden;contain:layout paint}
.mosaic-track{position:absolute;left:0;top:0;width:100%;height:100%;will-change:transform}
.work-tile{position:absolute;display:block;overflow:hidden;isolation:isolate;text-decoration:none!important;color:#fff!important;background:#292520;-webkit-tap-highlight-color:transparent;border:2px solid var(--bg-color);cursor:pointer}
.tile-image{width:100%;height:100%;overflow:hidden}
.tile-image img{display:block;width:100%;height:100%;object-fit:contain;transition:filter .35s;pointer-events:none}
.tile-label{position:absolute;inset:auto 0 0;padding:48px 22px 20px;display:grid;grid-template-columns:minmax(0,1fr) 22px;gap:5px 12px;background:linear-gradient(transparent,rgba(0,0,0,.9));opacity:0;transform:translateY(8px);transition:opacity .25s,transform .35s;pointer-events:none}
.tile-name{font-family:var(--font-display);font-size:clamp(23px,2.5vw,38px);line-height:1.05}
.tile-industry{grid-column:1;font-size:8px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:#ddd}
.tile-arrow{grid-column:2;grid-row:1/3;align-self:center;color:var(--accent)}
.tile-arrow svg{width:22px;height:22px}
.work-tile:hover .tile-label,.work-tile:focus-visible .tile-label{opacity:1;transform:none}
.work-tile:hover .tile-image img{filter:brightness(.8)}
.work-tile.tile-small .tile-label{padding:20px 9px 9px;display:block}
.work-tile.tile-small .tile-name{font:10px/1.3 var(--font-body)}
.work-tile.tile-small .tile-industry,.work-tile.tile-small .tile-arrow,.work-tile.tile-tiny .tile-label{display:none}
.work-tile.tile-tiny{border-width:1px}
.work-app :focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.work-app .work-tile:focus-visible{outline-offset:-3px;z-index:2}
.work-app h1:focus{outline:none}
.archive-controls{display:flex;align-items:center;gap:24px;font-size:9px;letter-spacing:.1em;color:#8e8982}
.mosaic-hint{white-space:nowrap;display:inline-flex;align-items:center;gap:10px}
.browse-direction{display:block;width:22px;height:22px;flex-shrink:0;color:var(--accent)}
.browse-direction-vertical{transform:rotate(90deg)}
.mosaic-hover{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--accent);font-size:10px;letter-spacing:.03em}
.archive-controls>.mosaic-hover{max-width:260px;margin-left:10px}
.mosaic-position{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:9px;font-variant-numeric:tabular-nums}
.mosaic-current{color:var(--accent);min-width:24px;text-align:right}
.mosaic-range{appearance:none;-webkit-appearance:none;width:160px;height:20px;background:transparent;cursor:pointer;accent-color:var(--accent)}
.mosaic-range::-webkit-slider-runnable-track{height:1px;background:#ffffff40}
.mosaic-range::-moz-range-track{height:1px;background:#ffffff40}
.mosaic-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:7px;background:var(--accent);margin-top:-3px;border-radius:0}
.mosaic-range::-moz-range-thumb{width:16px;height:7px;background:var(--accent);border:0;border-radius:0}
.mosaic-arrows{display:flex;gap:8px}
.mosaic-arrows button{appearance:none;-webkit-appearance:none;border:1px solid #ffffff30;color:var(--accent);background:transparent;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;cursor:pointer}
.mosaic-arrows button:hover{background:#ffffff10}
.mosaic-arrows button:disabled{opacity:.3;cursor:default}
.mosaic-arrows svg{width:14px;height:14px}
.mosaic-arrows button:last-child svg{transform:rotate(180deg)}
.work-empty{position:absolute;inset:64px 0 48px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px;background:var(--bg-color);text-align:center;padding:24px}
.work-empty h2{font-family:var(--font-display);font-size:36px;font-weight:400}
.mosaic-fallback{display:grid;grid-template-columns:repeat(5,1fr);height:100%;overflow:auto}
.mosaic-fallback .work-tile{position:relative;aspect-ratio:1}
.mosaic-fallback img{width:100%;height:100%;object-fit:contain}
.mosaic-fallback span{position:absolute;bottom:4px;left:6px;background:#050505;font-size:12px}
.work-project{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:4px}
.project-pane{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#4c4338 #050505;-webkit-overflow-scrolling:touch;min-width:0;background:var(--bg-color)}
.project-main{padding:24px var(--work-gutter) 24px 12px}
.case-opening{padding:6px 0 0}
.work-back{display:inline-flex;align-items:center;gap:12px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#bbb;text-decoration:none;margin-bottom:36px}
.work-back svg{width:18px;height:18px;color:var(--accent)}
.work-eyebrow{font-family:var(--font-body);font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);line-height:1.7}
.case-heading h1{font-family:var(--font-display);font-weight:400;font-size:clamp(50px,6vw,100px);line-height:1.05;letter-spacing:-.025em;margin:14px 0 22px;overflow-wrap:break-word}
.case-intro{font-size:clamp(14px,1.25vw,18px);line-height:1.75;color:#a5a5a5;max-width:720px;margin-bottom:36px}
.case-cover{background:#131313;aspect-ratio:1;margin:0;overflow:hidden}
.case-cover img{display:block;width:100%;height:100%;object-fit:contain}
.case-details{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(150px,1fr);gap:40px;padding:56px 0 60px;border-bottom:1px solid #ffffff26}
.case-description{font-size:15px;line-height:1.9;color:#bbb;margin-top:18px}
.case-description p+p{margin-top:20px}
.case-credits{font-size:11px;line-height:1.8;color:#777;margin-top:24px}
.case-scope ul{list-style:none;padding:0;margin:18px 0 28px}
.case-scope li{font-size:11px;padding:9px 0;border-bottom:1px solid #ffffff18;color:#bbb;line-height:1.5}
.work-pill{display:inline-flex;gap:24px;align-items:center;justify-content:center;padding:16px 24px;border:1px solid #ffffff40;border-radius:40px;background:transparent;color:var(--text-color);font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;appearance:none;-webkit-appearance:none;transition:background .25s,color .25s,border-color .25s}
.work-pill svg{width:18px;height:18px;flex-shrink:0}
.work-pill:hover{background:var(--accent);border-color:var(--accent);color:#050505}
.case-visit{font-size:9px;padding:14px 18px;gap:14px}
.case-gallery{padding-top:48px}
.case-gallery-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:20px}
.case-gallery-heading h2{font-family:var(--font-display);font-size:36px;font-weight:400}
.case-gallery figure{margin:0 0 40px}
.case-gallery img{width:100%;height:auto;display:block;background:#141414}
.case-gallery figcaption{display:flex;justify-content:space-between;gap:15px;font-size:9px;letter-spacing:.1em;color:#787878;padding:14px 0;text-transform:uppercase}
.case-next{display:block;border-top:1px solid #ffffff26;padding:40px 0 0;margin-top:60px;text-decoration:none}
.case-next-name{display:flex;justify-content:space-between;gap:24px;align-items:center;font-family:var(--font-display);font-size:clamp(36px,4vw,64px);line-height:1.1;margin-top:18px}
.case-next-name svg{width:40px;height:40px;flex-shrink:0;color:var(--accent);transition:transform .3s}
.case-next:hover svg{transform:translate(4px,-4px)}
.project-rail{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 32px;overflow:hidden}
.rail-caption{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--accent);padding:0 4px}
.rail-board .tile-label{padding:30px 12px 12px}
.rail-board .tile-name{font-size:24px}
.rail-board .tile-industry{font-size:7px}
.work-footer{padding:60px 0 16px;margin-top:70px;border-top:1px solid #ffffff26}
.work-footer-main{display:flex;justify-content:space-between;gap:24px;align-items:center;margin:24px 0 40px}
.work-footer h2{font-family:var(--font-display);font-size:clamp(40px,4.5vw,74px);font-weight:400;line-height:1.05}
.work-footer h2 em{color:#777}
.work-footer-bottom{border-top:1px solid #ffffff1a;padding-top:24px;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;color:#929292;font-size:9px;letter-spacing:.06em}
.work-footer-bottom a:hover{color:var(--accent)}
.home-work-more{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-top:38px}
.home-work-more p{color:#888;font-size:13px;max-width:330px;line-height:1.7}
.work-transition{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.work-app.is-transitioning .work-surface{pointer-events:none}
.work-surface.is-entering{visibility:hidden}
.work-surface.is-entering .case-opening{opacity:0;transform:translateY(15px)}
@media(max-width:1100px){.archive-toolbar{gap:30px}.work-filters{gap:20px}.filter-field{width:150px}.case-details{gap:24px}.work-footer-main{align-items:flex-start;flex-direction:column}.work-footer-main .work-pill{margin-top:4px}.archive-controls>.mosaic-hover{max-width:180px}.mosaic-range{width:100px}}
@media(max-width:736px){:root{--work-top:94px;--work-gutter:20px}.work-surface{inset:var(--work-top) 14px 6px}.work-archive{grid-template-rows:96px minmax(0,1fr) 52px}.archive-toolbar{display:block;padding:0 2px 10px}.archive-toolbar h1{font-size:31px;margin-bottom:10px}.work-filters{gap:16px}.filter-field{width:auto;max-width:none;flex:1}.filter-select select{font-size:10px;padding-top:6px;padding-bottom:6px}.filter-select:after{top:11px}.work-result-count{font-size:8px}.filter-reset{font-size:9px}.archive-controls{gap:12px;font-size:8px}.mosaic-hint{font-size:0}.mosaic-hint{gap:0}.archive-controls>.mosaic-hover{display:none}.mosaic-position{gap:10px;margin-left:0;flex:1}.mosaic-range{width:100%;min-width:30px}.mosaic-arrows{gap:6px}.mosaic-arrows button{width:36px;height:36px}.work-tile{border-width:1.5px}.tile-label{padding:35px 14px 14px}.tile-name{font-size:28px}.tile-industry{font-size:7px}.work-project{display:block}.project-pane{height:100%}.project-main{padding:16px 6px 20px}.project-rail{display:none}.work-back{margin-bottom:28px}.case-heading h1{font-size:clamp(46px,12vw,70px);margin-bottom:18px}.case-heading .work-eyebrow{font-size:8px}.case-intro{font-size:14px;margin-bottom:28px}.case-details{grid-template-columns:1fr;gap:32px;padding:36px 0 44px}.case-description{font-size:14px}.case-scope ul{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.case-gallery{padding-top:36px}.case-gallery-heading h2{font-size:30px}.case-gallery figure{margin-bottom:24px}.case-gallery figcaption{font-size:8px}.case-next{margin-top:32px}.case-next-name{font-size:36px}.work-footer{margin-top:50px;padding-top:40px}.work-footer-bottom a:last-child{flex-basis:100%}.home-work-more{align-items:flex-start;flex-direction:column;gap:22px}.work-empty{top:96px;bottom:52px}.work-empty h2{font-size:30px}}
@media(hover:none){.mosaic-band:first-child .tile-label{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.work-app *{scroll-behavior:auto!important;transition:none!important;animation:none!important}.work-surface.is-entering .case-opening{transform:none}}
.work-surface.is-revealing .case-opening,.work-surface.is-revealing .archive-toolbar{opacity:0;transform:translateY(15px)}
body.work-active nav{transform:translateZ(0);isolation:isolate}
.work-transition{clip-path:inset(var(--work-top) 0 0)}
body.work-active .nav-glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:#080808}

.archive-toolbar{position:relative;z-index:2}
.filter-field{position:relative}
.filter-trigger{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:42px;padding:10px 12px;border:1px solid #ffffff20;border-radius:6px;background:#0d0d0d;color:#bfbab4;font:11px/1.5 var(--font-body);appearance:none;-webkit-appearance:none;text-align:left;cursor:pointer;transition:border-color .2s,color .2s}
.filter-trigger>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-trigger>svg{width:14px;height:14px;flex-shrink:0;color:var(--accent);transition:transform .2s}
.filter-trigger:hover,.filter-trigger[aria-expanded="true"]{border-color:var(--accent);color:var(--text-color)}
.filter-trigger[aria-expanded="true"]>svg{transform:rotate(180deg)}
.filter-options{position:absolute;top:calc(100% + 8px);left:0;z-index:8;width:max-content;min-width:100%;max-width:calc(100vw - 56px);max-height:min(370px,48dvh);overflow-y:auto;overscroll-behavior:contain;background:#11100e;border:1px solid #b89c734d;border-radius:8px;box-shadow:0 16px 50px #000b;padding:6px;scrollbar-width:thin;scrollbar-color:#66533d #11100e}
.filter-option{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:42px;padding:10px 13px;background:transparent;border:0;border-radius:3px;color:#bfbab4;font:11px/1.5 var(--font-body);text-align:left;appearance:none;-webkit-appearance:none;cursor:pointer;white-space:nowrap}
.filter-option>svg{width:14px;height:14px;opacity:0;flex-shrink:0}
.filter-option[aria-selected="true"]{color:var(--accent)}
.filter-option[aria-selected="true"]>svg{opacity:1}
.filter-option:hover,.filter-option:focus-visible{background:#b89c7314;color:#e9d6bb;outline:none}
.mosaic-position{min-width:140px}
@media(max-width:736px){.work-filters{gap:10px}.filter-trigger{min-height:40px;font-size:10px;padding:9px 11px}.filter-field[data-filter="industry"] .filter-options{left:auto;right:0}.filter-options{max-height:45dvh}.filter-option{min-height:44px;font-size:11px}.filter-reset{margin-left:2px}.mosaic-position{min-width:0}}
.work-app>nav{position:absolute;inset:0 0 auto;z-index:10;transform:none}

/* The mosaic reaches the viewport edges; its controls retain the page gutter. */
.work-archive{left:0;right:0;--archive-gutter:24px}
.work-archive>.archive-toolbar,.work-archive>.archive-controls{margin-left:var(--archive-gutter);margin-right:var(--archive-gutter)}
@media(max-width:736px){.work-archive{--archive-gutter:14px}}