.portfolio-section{--portfolio-accent:var(--gold);padding:0!important;position:relative;overflow:hidden;background:transparent;border-block:1px solid #ffffff14;isolation:isolate}
.portfolio-stage{height:calc(100svh - 86px);min-height:640px;max-height:960px;display:flex;flex-direction:column;padding:34px 0 24px}
.portfolio-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-shrink:0}
.portfolio-head .eyebrow{color:var(--gold);margin-bottom:13px}
.portfolio-head h2{font-size:clamp(40px,4.9vw,74px);font-weight:600;letter-spacing:-.055em;line-height:1.02;margin:0;color:#fafafa}
.portfolio-head h2 em{color:var(--gold)}
.portfolio-head-note{max-width:200px;font-size:11px;line-height:1.8;color:#9295a3;padding-bottom:6px}
.portfolio-window{width:100%;flex:1;min-height:0;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#fedf0a55 transparent;direction:ltr;overscroll-behavior-x:contain}
.portfolio-track{display:flex;align-items:center;gap:32px;width:max-content;padding:24px max(40px,calc((100vw - clamp(300px,64vw,880px))/2));position:relative;direction:ltr}
.portfolio-card{position:relative;flex:0 0 auto;width:clamp(300px,64vw,880px);border:1px solid #ffffff26;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,rgba(10,12,22,.8),rgba(10,12,22,.6));backdrop-filter:blur(22px);box-shadow:0 30px 70px #0008,inset 0 1px 0 #ffffff18;transform-origin:center;transition:border-color .3s;text-align:start;direction:inherit}
html[dir=rtl] .portfolio-card{direction:rtl}
.portfolio-pinned .portfolio-card{border-color:rgb(254 223 10 / calc(.1 + var(--center-glow,0) * .22));box-shadow:0 30px 70px #0008,0 0 65px rgb(254 223 10 / calc(var(--center-glow,0) * .12)),inset 0 1px 0 #ffffff18}
.portfolio-card:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 38px rgb(254 223 10 / calc(var(--center-glow,0) * .12))}
.portfolio-card:hover,.portfolio-card:focus-within{border-color:#fedf0a70}
.portfolio-website-link{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-size:12px}.portfolio-website-link svg{width:16px;height:16px}
.portfolio-media{position:relative;height:clamp(180px,32svh,365px);overflow:hidden;background:linear-gradient(135deg,#17170e,#0e111b);border-bottom:1px solid #ffffff14}
.portfolio-media img,.portfolio-media video{display:block;width:calc(100% + 64px);max-width:none;height:100%;margin-left:-32px;object-fit:cover;will-change:transform}
.portfolio-media:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#08090d88,transparent 55%),linear-gradient(100deg,#fedf0a0d,transparent 45%);pointer-events:none}
.portfolio-card-index{position:absolute;z-index:1;top:18px;left:20px;display:grid;place-items:center;width:36px;height:36px;border:1px solid #ffffff36;border-radius:50%;background:#09090d80;backdrop-filter:blur(12px);color:#fff;font-size:10px;letter-spacing:.08em}
.portfolio-concept{position:absolute;z-index:1;top:22px;right:20px;color:#fff;font-size:9px;text-transform:uppercase;letter-spacing:.12em;text-shadow:0 1px 8px #000}
.portfolio-card-body{padding:24px 28px 26px;display:grid;grid-template-columns:1fr auto;gap:18px 24px;align-items:end}
.portfolio-category{color:#adaeb9;font-size:9px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.portfolio-card h3{font-size:clamp(22px,2.2vw,32px);font-weight:500;letter-spacing:-.035em;line-height:1.2;margin-bottom:10px;color:#f7f7fa}
.portfolio-description{font-size:12px;line-height:1.7;max-width:440px;color:#a4a6b3}
.portfolio-case-link{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;font-size:10px;padding:12px 15px;border:1px solid #ffffff30;border-radius:999px;background:#ffffff05;color:#f7f7fa;transition:background .25s,border-color .25s;position:relative;z-index:2}
.portfolio-case-link svg{width:14px;height:14px;color:var(--gold)}
.portfolio-case-link:hover{background:#fedf0a16;border-color:#fedf0a66}
.portfolio-case-link:focus-visible{outline-color:var(--portfolio-accent)}
.portfolio-bottom{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-shrink:0;padding-top:10px}
.portfolio-direction{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#a0a2ad;display:flex;align-items:center;gap:14px}
.portfolio-direction svg{width:16px;height:16px;color:var(--gold);transform:rotate(180deg)}
.portfolio-swipe-hint{display:inline}.portfolio-scroll-hint{display:none}.portfolio-pinned .portfolio-swipe-hint{display:none}.portfolio-pinned .portfolio-scroll-hint{display:inline}
.portfolio-meter{height:2px;width:min(260px,30vw);background:#ffffff1a;overflow:hidden;direction:ltr}
.portfolio-meter span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#fedf0a,#fff);box-shadow:0 0 14px #fedf0a88}
.portfolio-counter{font-size:10px;color:#777b8c;letter-spacing:.14em;direction:ltr}.portfolio-counter b{color:#f3f3f5;font-weight:500}
.portfolio-pinned .portfolio-window{overflow:hidden;touch-action:pan-y}
.portfolio-pinned .portfolio-track{will-change:transform}
@media(max-width:850px){.portfolio-stage{height:calc(100svh - 76px);min-height:0;padding:28px 0 20px}.portfolio-head h2{font-size:clamp(38px,6vw,56px)}.portfolio-head-note{max-width:150px;font-size:10px}.portfolio-card{width:76vw}.portfolio-track{gap:22px;padding-inline:12vw}.portfolio-card-body{padding:20px;gap:16px}.portfolio-description{max-width:360px}.portfolio-case-link{font-size:9px;padding:11px}}
@media(max-width:520px){.portfolio-stage{height:calc(100svh - 70px);padding:24px 0 20px}.portfolio-head{display:block}.portfolio-head h2{font-size:40px;line-height:1.08}.portfolio-head-note{display:none}.portfolio-head .eyebrow{font-size:9px;margin-bottom:12px}.portfolio-track{gap:18px;padding-inline:9vw}.portfolio-card{width:82vw;min-width:0;border-radius:20px}.portfolio-media{height:clamp(155px,28svh,260px)}.portfolio-card-body{display:block;padding:18px 20px}.portfolio-card h3{font-size:23px}.portfolio-description{font-size:11px;line-height:1.6}.portfolio-case-link{margin-top:15px}.portfolio-concept{font-size:8px}.portfolio-direction{font-size:8px;letter-spacing:.08em;gap:8px}.portfolio-bottom{gap:15px}.portfolio-meter{width:65px}.portfolio-counter{font-size:9px}}
@media(max-height:539px),(prefers-reduced-motion:reduce){.portfolio-stage{height:auto;min-height:0;padding-block:35px}.portfolio-track{padding-left:clamp(18px,5vw,80px)}.portfolio-window{margin-block:20px;scroll-snap-type:x proximity}.portfolio-card{scroll-snap-align:center}.portfolio-meter{display:none}.portfolio-direction svg{transform:none}}
@media(min-height:540px) and (max-height:700px){.portfolio-stage{min-height:0;padding-block:16px}.portfolio-head h2{font-size:34px}.portfolio-head .eyebrow{margin-bottom:8px}.portfolio-track{padding-block:10px}.portfolio-media{height:23svh;min-height:110px}.portfolio-card-body{padding:12px 18px}.portfolio-card h3{font-size:21px;margin-bottom:6px}.portfolio-description{font-size:10px;line-height:1.5}.portfolio-case-link{padding:9px 12px;margin-top:10px}.portfolio-category{margin-bottom:5px}.portfolio-bottom{padding-top:6px}}
html[dir=rtl] .portfolio-head h2{letter-spacing:0;line-height:1.35;font-size:clamp(34px,4vw,60px)}
@media(max-width:520px){html[dir=rtl] .portfolio-head h2{font-size:32px}}
.portfolio-single .portfolio-stage{height:auto;min-height:0;max-height:none;padding-block:42px}.portfolio-single .portfolio-window{margin-block:24px;overflow:visible}.portfolio-single .portfolio-track{width:100%;padding:0;justify-content:center}.portfolio-single .portfolio-direction,.portfolio-single .portfolio-meter{display:none}.portfolio-single .portfolio-bottom{justify-content:flex-end}