.portfolio{position:relative;z-index:5;background:#222021;padding:120px 5.5% 85px;scroll-margin-top:80px;border-top:1px solid #ffffff14}
.portfolio-heading{max-width:1440px;margin:0 auto 90px;display:grid;grid-template-columns:1.5fr 1fr;gap:8%;align-items:end}
.portfolio .eyebrow{font-size:12px;letter-spacing:2px;color:#c9c1b9}
.portfolio h2{font-weight:400;font-size:clamp(48px,6.2vw,92px);line-height:1.06;letter-spacing:-.05em;margin:0}
.portfolio h2 em{font-family:var(--serif);font-weight:400;color:#dbb698;font-size:1.12em;letter-spacing:-.03em}
.portfolio-intro{max-width:330px;padding-bottom:5px}.portfolio-intro p{font-size:17px;line-height:1.85;color:#d0c9c2;margin:0 0 20px}.portfolio-intro .concept-note{font-size:13px;color:#a9a09a;line-height:1.7;margin:0;padding-top:20px;border-top:1px solid #ffffff25}
.portfolio-grid{max-width:1440px;margin:auto;display:grid;gap:100px}
.transformation-card{display:grid;grid-template-columns:220px minmax(0,1fr);gap:42px;align-items:center;min-width:0;transition:opacity .75s,transform .75s}
.transformation-card.is-pending{opacity:0;transform:translateY(24px)}
.transformation-caption{align-self:stretch;display:flex;flex-direction:column;padding-top:16px}.portfolio-index{font-family:var(--serif);font-size:66px;color:#9f8573;line-height:1;margin-bottom:28px;font-weight:300}
.transformation-caption h3{font-size:27px;line-height:1.25;font-weight:400;letter-spacing:-.7px;margin-bottom:16px}.transformation-caption>p{font-size:15px;color:#bdb4ac;line-height:1.85;max-width:220px;margin-bottom:28px}.material-notes{margin-top:auto;padding-top:24px;border-top:1px solid #ffffff20;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12px;color:#af9b8a;letter-spacing:.35px}
.comparison-unit{min-width:0}.comparison{--split:44%;position:relative;isolation:isolate;aspect-ratio:3/2;background:#181617;overflow:hidden;user-select:none}
.comparison>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.comparison .compare-before{clip-path:inset(0 calc(100% - var(--split)) 0 0);z-index:1}
.compare-label{position:absolute;top:20px;z-index:3;font-size:11px;letter-spacing:1.7px;padding:7px 12px;background:#222021b8;color:#fff5e9;backdrop-filter:blur(8px);pointer-events:none;transition:opacity .2s}.compare-label.before{left:20px}.compare-label.after{right:20px}
.compare-line{position:absolute;left:var(--split);top:0;bottom:0;width:1px;background:#f6ede0e6;z-index:2;pointer-events:none;filter:drop-shadow(0 0 3px #0005)}
.compare-handle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;display:flex;align-items:center;justify-content:center;gap:11px;border:1px solid #f6ede0b3;border-radius:50%;background:#222021b8;backdrop-filter:blur(8px);font:19px/1 var(--font);color:#fff5e9}
.comparison input[type=range]{position:absolute;z-index:4;top:0;left:-24px;width:calc(100% + 48px);height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;appearance:none;-webkit-appearance:none;background:transparent;touch-action:pan-y}
.comparison input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:48px;height:48px;border:0;background:transparent}.comparison input[type=range]::-moz-range-thumb{width:48px;height:48px;border:0;background:transparent}
.comparison:has(input:focus-visible){outline:2px solid var(--orange);outline-offset:6px}.comparison:has(input:focus-visible) .compare-handle{background:#dbb698;color:#222021;box-shadow:0 0 0 5px #22202188}
.comparison[data-mode=after] .compare-label.before,.comparison[data-mode=before] .compare-label.after{opacity:0}.comparison[data-mode=after] .compare-handle,.comparison[data-mode=before] .compare-handle{opacity:0}
.compare-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid #ffffff24}
.compare-modes{display:flex;gap:5px;align-items:center}.compare-controls button{border:0;background:transparent;color:#bfb5ad;font-size:13px;padding:10px 12px;min-height:44px}.compare-modes button[aria-pressed=true]{color:#fff0df;background:#ffffff0d}.compare-modes>span{font-size:12px;color:#6c625c}.compare-controls .compare-expand{padding-right:0;color:#e0bca0;display:flex;align-items:center;gap:17px}.compare-expand span{font-size:20px}.compare-instruction{font-size:12px;color:#a69b92;margin:0;letter-spacing:.15px}
.portfolio-bottom{max-width:1440px;margin:85px auto 0;padding-top:32px;border-top:1px solid #ffffff24;display:flex;justify-content:space-between;gap:30px;align-items:center}.portfolio-bottom p{max-width:510px;font-size:13px;color:#aaa099;margin:0;line-height:1.8}.portfolio-bottom>a{font-size:16px;white-space:nowrap}.portfolio-bottom>a span{margin-left:25px;color:var(--orange)}
.portfolio-shortcut{display:flex;justify-content:space-between;width:300px;margin-top:18px;font-size:14px;color:#e6ddd2;min-height:44px;align-items:center}.portfolio-shortcut span{color:var(--orange)}
.project-viewer{background:#222021;color:var(--paper);border:1px solid #ffffff25;padding:20px 26px;width:min(1160px,calc(100vw - 32px));max-width:1160px;max-height:95svh;overflow:auto;box-shadow:0 30px 100px #0009}
.project-viewer::backdrop{background:#121112eb;backdrop-filter:blur(14px)}.project-viewer .comparison{max-height:70svh;width:auto;max-width:100%;margin:auto}.project-viewer .comparison-unit{width:min(100%,105svh);margin:auto}
.viewer-toolbar,.viewer-navigation{display:flex;justify-content:space-between;align-items:center;gap:20px}.viewer-toolbar{margin-bottom:16px}.viewer-title-group{display:flex;align-items:center;gap:24px}#viewer-count{font-size:12px;color:#b6a294}.project-viewer h3{font-size:22px;font-weight:400;margin:0;line-height:1.4}.project-viewer button{border:0;background:transparent;min-height:44px;font-size:14px;padding:10px}.viewer-toolbar button span{font-size:22px;margin-left:14px}.viewer-navigation{padding-top:8px}.viewer-navigation>span{font-size:12px;color:#ada197}.viewer-navigation button{color:#e0bca0}.project-viewer .compare-controls{justify-content:center}
body.viewer-open{overflow:hidden}.contact-section{border-top:1px solid #ffffff1a;scroll-margin-top:80px}
@media(min-width:1500px){.transformation-card{grid-template-columns:260px minmax(0,1fr);gap:60px}.transformation-caption h3{font-size:32px}.transformation-caption>p{font-size:16px;max-width:240px}}
@media(max-width:1000px){.transformation-card{grid-template-columns:170px minmax(0,1fr);gap:24px}.transformation-caption h3{font-size:24px}.portfolio-index{font-size:52px;margin-bottom:20px}.transformation-caption>p{font-size:14px;margin-bottom:18px}.compare-instruction{display:none}.material-notes{padding-top:15px;font-size:11px;gap:5px 12px}.portfolio-heading{gap:5%;grid-template-columns:1.35fr 1fr}}
@media(max-width:700px){.portfolio{padding:85px 6% 65px}.portfolio-heading{grid-template-columns:1fr;gap:28px;margin-bottom:58px}.portfolio h2{font-size:clamp(46px,9.5vw,65px)}.portfolio-intro{max-width:440px}.portfolio-intro p{font-size:16px;margin-bottom:15px}.portfolio-intro .concept-note{padding-top:15px}.portfolio-grid{gap:64px}.transformation-card{display:block}.transformation-caption{display:grid;grid-template-columns:42px 1fr;column-gap:16px;padding-top:0}.portfolio-index{grid-row:1/3;font-size:40px;margin:0}.transformation-caption h3{font-size:25px;margin-bottom:7px}.transformation-caption>p{font-size:14px;max-width:none;line-height:1.65;margin-bottom:20px}.material-notes{display:none}.compare-label{top:12px;font-size:10px;letter-spacing:1px;padding:5px 9px}.compare-label.before{left:12px}.compare-label.after{right:12px}.compare-controls{gap:8px;padding:7px 0}.compare-controls button{font-size:12px;padding:10px 8px}.compare-controls .compare-expand{gap:8px}.compare-handle{width:42px;height:42px;gap:9px}.portfolio-bottom{display:block;margin-top:58px}.portfolio-bottom>a{display:flex;justify-content:space-between;margin-top:25px;white-space:normal}.portfolio-shortcut{width:280px}.project-viewer{padding:14px;width:calc(100vw - 20px);max-height:94svh}.viewer-title-group{gap:12px}.project-viewer h3{font-size:18px}.viewer-toolbar{gap:10px}.viewer-toolbar button{font-size:0;padding:8px}.viewer-toolbar button span{font-size:26px;margin:0}.viewer-navigation>span{display:none}.final-copy .portfolio-shortcut{margin-top:6px}}
@media(prefers-reduced-motion:reduce){.transformation-card.is-pending{opacity:1;transform:none}.transformation-card,.compare-label{transition:none}}