/* TheDesignSpider v1.2 — real-client portfolio layer. The v1.1 identity is intentionally preserved. */
:root{--portfolio-line:#d9dcd6}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Actual project/client marks cropped from supplied screenshots. Colours are not altered. */
.client-strip .section-line{align-items:baseline}
.client-logo-gallery{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding:5px;padding:3px 3px 13px;margin-top:27px;scrollbar-color:#aaa #e9ebe6;scrollbar-width:thin}
.client-logo-gallery .client-logo{flex:0 0 clamp(165px,17.5vw,224px);min-height:103px;padding:18px 16px;border:1px solid #e3e5df;border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center;scroll-snap-align:start;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.client-logo-gallery .client-logo img{width:100%;height:63px;object-fit:contain;object-position:center;display:block}
.client-logo-gallery .client-logo:hover{border-color:#999f98;transform:translateY(-3px);box-shadow:0 12px 24px #1111110b}
.client-logo-gallery .client-logo:focus-visible{outline:2px solid #101211;outline-offset:3px}
.client-after{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px;color:#747974;font-size:11px;letter-spacing:.01em}
.client-after a{color:#191b1a;border-bottom:1px solid #191b1a;padding-bottom:5px;white-space:nowrap;font-weight:700}
/* Featured real work; retain original horizontal on desktop and native swipe on mobile. */
.work-image.work-feature-link{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;background:#e3e6e2;border:1px solid #d6d9d5}
.work-image.work-feature-link img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.work-image-hint{position:absolute;right:16px;bottom:15px;background:#101413;color:#fff;padding:11px 14px;border-radius:5px;text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.08em;display:flex;gap:15px;align-items:center;box-shadow:0 5px 20px #0005}
.work-feature-link:hover img{transform:scale(1.025)}
.work-feature-link:focus-visible{outline:3px solid #111;outline-offset:4px}
.work-slide-meta>div{min-width:0;flex-wrap:wrap;row-gap:5px}
.work-slide-meta strong{font-size:17px}
/* Work directory */
.portfolio-main{padding-top:58px}
.portfolio-tools{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:27px;margin-bottom:24px;flex-wrap:wrap}
.project-filters{display:flex;gap:8px;flex-wrap:wrap}
.filter-pill{border:1px solid #d7dad4;border-radius:100px;display:inline-flex;align-items:center;gap:13px;padding:12px 17px;background:#fff;color:#282b28;font-size:12px;font-weight:700;line-height:1;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.filter-pill span{color:#929791;font-size:10px;font-weight:700}
.filter-pill.is-active{background:#121513;border-color:#121513;color:#fff}
.filter-pill.is-active span{color:#c1c5be}
.filter-pill:hover{border-color:#3d433f}
.project-search-label{display:flex;align-items:center;gap:10px;border-bottom:1px solid #a8aca6;padding:9px 2px 12px;min-width:240px;max-width:100%}
.project-search-label svg{width:18px;height:18px;flex:none}
.project-search-label input{border:0;background:transparent;outline:0;width:100%;font:inherit;color:#151715;font-size:13px}
.project-search-label input::placeholder{color:#939891}
.portfolio-summary{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:8px 0 13px;font-size:11px;font-weight:650;color:#696f69}
.portfolio-summary>span:last-child{font-size:9px;letter-spacing:.11em;color:#939791}
.portfolio-grid.portfolio-grid--real{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:54px 24px;margin-top:16px}
.portfolio-grid--real .portfolio-tile:nth-child(3){grid-column:auto;max-width:none}
.project-entry[hidden],.portfolio-empty[hidden]{display:none!important}
.project-open{display:block;color:#161918;text-decoration:none}
.project-frame{aspect-ratio:1.72;display:flex;flex-direction:column;background:#e9eae6;overflow:hidden;border:1px solid #dedfda;border-radius:12px;position:relative;transition:box-shadow .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.project-browser{height:33px;flex:0 0 33px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 13px;background:#f9faf8;color:#818781;border-bottom:1px solid #e2e4de;font-size:9px;font-weight:750;letter-spacing:.075em}
.browser-dots{display:flex;gap:4px}.browser-dots i{display:block;height:6px;width:6px;border-radius:50%;background:#c1c7c0}
.project-browser>span:last-child{font-size:14px}
.project-frame>img{width:100%;height:calc(100% - 33px);aspect-ratio:auto!important;object-fit:contain!important;object-position:center top;border-radius:0!important;background:#e7e9e5;transition:transform .8s cubic-bezier(.22,.7,.22,1)}
.project-open:hover .project-frame{box-shadow:0 18px 46px #1317141c;transform:translateY(-4px)}
.project-open:hover img{transform:scale(1.018)}
.project-open:hover .circle-arrow{background:#111;color:#fff;border-color:#111}
.project-open:focus-visible{outline:2px solid #101211;outline-offset:5px;border-radius:12px}
.project-entry .portfolio-tile-caption{padding:16px 2px 0}
.project-entry .portfolio-tile-caption strong{font-size:19px}
.project-entry .portfolio-tile-caption small{font-size:12px}
.project-entry .circle-arrow{transition:background .2s,color .2s,border-color .2s}
.portfolio-empty{padding:42px;text-align:center;border:1px dashed #cdd1c9;border-radius:12px;color:#656b65;margin-top:25px}
.portfolio-end{border-top:1px solid #d9dcd5;margin-top:75px;padding-top:28px;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:14px;color:#616761}
/* Project details, overlaid without fake claims or fabricated destinations. */
body.project-dialog-open{overflow:hidden}
.project-dialog{position:fixed;inset:0;margin:auto;width:min(1190px,calc(100vw - 48px));max-width:none;max-height:min(92dvh,880px);padding:0;border:1px solid #dee0da;border-radius:15px;background:#f8f9f6;color:#111413;box-shadow:0 32px 90px #0008;overflow:auto;overscroll-behavior:contain}
.project-dialog::backdrop{background:rgba(9,13,12,.68);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.project-dialog-inner{padding:25px}
.project-dialog-top{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:10px;font-weight:750;letter-spacing:.1em;color:#676f68;margin-bottom:23px}
.project-dialog-close{padding:11px 13px;display:flex;align-items:center;gap:18px;cursor:pointer;border:1px solid #cbd0c8;border-radius:3px;background:transparent;color:#151817;font-size:11px;font-weight:750;letter-spacing:.045em}
.project-dialog-grid{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(280px,.8fr);gap:35px;align-items:center}
.project-dialog-media{min-width:0;background:#e9eae7;border:1px solid #dee0d9;border-radius:9px;overflow:hidden}
.project-dialog-media img{display:block;width:100%;height:auto;aspect-ratio:1.94;object-fit:contain;object-position:top center}
.project-dialog-info{padding:15px 10px 20px 0;min-width:0}
.project-dialog-info h2{font-size:clamp(37px,4vw,66px);font-weight:650;letter-spacing:-.065em;line-height:1.01;margin:17px 0 14px;overflow-wrap:anywhere}
.project-dialog-info>p{color:#636963;font-size:14px;line-height:1.6}
.project-dialog-info .project-dialog-note{margin-top:25px;border-top:1px solid #d6dbd4;padding-top:23px}
.project-dialog-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:26px 0 32px}
.project-dialog-actions .button{justify-content:center;display:flex;padding:15px 18px;min-height:53px}
.project-dialog-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #d6d9d4;padding-top:14px;color:#626961;font-size:12px;font-weight:700}
.project-dialog-pager button{border:0;background:transparent;cursor:pointer;font-size:12px;font-weight:700;color:#111}
.project-dialog-pager button:hover{text-decoration:underline}
@media(max-width:800px){
 .client-logo-gallery{gap:9px;margin-top:20px;padding-bottom:12px}
 .client-logo-gallery .client-logo{flex-basis:174px;min-height:90px;padding:11px 13px}
 .client-logo-gallery .client-logo img{height:56px}
 .client-after{align-items:flex-start;font-size:10px}
 .work-image-hint{bottom:9px;right:9px;padding:9px 11px;font-size:9px}
 .portfolio-grid.portfolio-grid--real{gap:38px 17px}
 .project-dialog{width:calc(100vw - 22px);max-height:93dvh;border-radius:12px}
 .project-dialog-inner{padding:17px}
 .project-dialog-grid{grid-template-columns:1fr;gap:18px}
 .project-dialog-info{padding:0 4px 8px}
 .project-dialog-info h2{font-size:clamp(34px,7vw,56px);margin:10px 0}
 .project-dialog-info .project-dialog-note{margin-top:13px;padding-top:13px}
 .project-dialog-actions{margin:18px 0 22px}
}
@media(max-width:600px){
 .client-after{display:flex;flex-direction:column;gap:9px}
 .client-logo-gallery .client-logo{flex-basis:154px;min-height:83px}
 .work-slide-meta strong{font-size:14px}
 .work-slide-meta span{font-size:10px}
 .portfolio-tools{margin:20px 0 17px;align-items:stretch;flex-direction:column}
 .project-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .filter-pill{padding:12px 8px;font-size:10px;justify-content:center;gap:5px;white-space:nowrap}
 .filter-pill span{font-size:9px}
 .project-search-label{width:100%;min-width:0;padding:12px 4px}
 .portfolio-summary>span:last-child{display:none}
 .portfolio-grid.portfolio-grid--real{grid-template-columns:1fr;gap:31px;margin-top:6px}
 .project-frame{aspect-ratio:1.6}
 .project-entry .portfolio-tile-caption{padding:14px 2px 0}
 .project-entry .portfolio-tile-caption strong{font-size:17px}
 .project-entry .portfolio-tile-caption small{font-size:11px}
 .portfolio-end{margin-top:48px;align-items:stretch;flex-direction:column;font-size:13px}
 .project-dialog{width:100vw;max-height:100dvh;height:100dvh;border-radius:0;border:0}
 .project-dialog-inner{padding:15px 16px max(38px,env(safe-area-inset-bottom))}
 .project-dialog-top{position:sticky;top:-15px;z-index:2;background:#f8f9f6;padding:14px 0;margin-top:-14px;margin-bottom:14px}
 .project-dialog-top>span{font-size:9px}
 .project-dialog-info h2{font-size:40px}
 .project-dialog-info .project-dialog-note{font-size:13px}
 .project-dialog-pager{padding-bottom:20px}
}
@media(prefers-reduced-motion:reduce){.client-logo-gallery .client-logo,.work-image.work-feature-link img,.project-frame,.project-frame img{transition:none!important}}

.button-outline-dark{background:transparent!important;color:#111!important;border:1px solid #aeb3aa!important;border-radius:5px;font-size:12px;font-weight:700;text-align:center;text-decoration:none}
.button-outline-dark:hover{border-color:#111!important;background:#eff0ed!important}