/* Scoped portfolio revision. The approved page styles remain unchanged. */
#works.worksReview{--gold:#ebc775;--goldMuted:#81704b;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 76%,#211b1099,transparent 54%),linear-gradient(160deg,#090909,#0c0c0c 55%,#070707);padding:86px 0 72px}
#works .worksHeading{text-align:center;margin:0 auto 32px;max-width:850px}
#works .worksEyebrow{font-size:10px;letter-spacing:.34em;color:var(--gold);margin:0 0 12px}
#works .worksHeading h2{font-size:clamp(36px,4.5vw,66px);font-weight:550;line-height:1.08;letter-spacing:-.045em;margin:0}
#works .worksHeading h2 span{background:linear-gradient(110deg,#f7dea1,#e4af4d);background-clip:text;-webkit-background-clip:text;color:transparent}
#works .worksLead{font-size:15px;line-height:1.65;color:#c1bfb9;margin:15px auto 0;max-width:620px}
#works .worksStage{position:relative;height:clamp(450px,43vw,580px);max-width:1240px;margin:auto;touch-action:pan-y;isolation:isolate}
#works .workCard{position:absolute;width:33.333%;left:33.333%;top:0;bottom:0;display:flex;flex-direction:column;overflow:hidden;border-radius:23px;background:#101010;border:1px solid #756440;box-shadow:0 14px 35px #0005;transition:transform 380ms ease,box-shadow 380ms ease,border-color 380ms ease;transform-origin:center center}
#works .workCard[data-position="left"]{transform:translateX(-100%) scale(.96);z-index:1}
#works .workCard[data-position="right"]{transform:translateX(100%) scale(.96);z-index:1}
#works .workCard[data-position="center"]{transform:translateX(0) scale(.96);z-index:2;border:1px solid #756440;box-shadow:0 14px 35px #0005}
#works .workPhoto{display:block;position:relative;width:100%;flex:1;min-height:0;padding:0;border:0;border-radius:0;background:#0c0c0c;color:inherit;cursor:pointer}
#works .workPhoto picture{display:block;width:100%;height:100%;position:absolute;inset:0}
#works .workPhoto img{display:block;width:100%;height:100%;object-fit:contain}
#works .workBody{padding:19px 25px 23px;background:linear-gradient(145deg,#151411,#0b0b0b);flex:none}
#works .workBody h3{font-size:clamp(20px,2vw,28px);font-weight:550;line-height:1.15;letter-spacing:-.035em;margin:0 0 9px;overflow-wrap:anywhere}
#works .workBody p{font-size:clamp(13px,1.25vw,17px);line-height:1.45;color:#c9c7c0;min-height:2.9em;margin:0 0 19px}
#works .workOpen{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;border:1px solid var(--gold);border-radius:28px;color:#f5d88f;background:transparent;font-size:14px;font-weight:550;padding:11px 14px;min-height:44px;cursor:pointer}
#works .workCard[data-position="center"] .workOpen{background:transparent;color:#f5d88f;border-color:var(--gold)}
#works .workOpen:hover{box-shadow:0 0 0 2px #e8c47133}
#works .worksControls{display:flex;justify-content:center;align-items:center;gap:25px;margin-top:27px}
#works .worksArrow,.caseViewer .caseArrow{width:46px;height:46px;min-width:46px;border:1px solid #c8a653;border-radius:50%;display:grid;place-items:center;background:#0a0a0a;color:#f1d38c;cursor:pointer}
#works svg,.caseViewer svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
#works .worksDots{display:flex;align-items:center;gap:3px}
#works .worksDot{width:27px;height:44px;border:0;background:transparent;display:grid;place-items:center;padding:0;cursor:pointer}
#works .worksDot:before{content:"";width:7px;height:7px;border-radius:8px;background:#70706c;transition:width 380ms ease,background 380ms ease}
#works .worksDot[aria-current="true"]:before{width:20px;background:var(--gold)}
#works button:focus-visible,.caseViewer button:focus-visible{outline:2px solid #fff;outline-offset:-5px}
#works .worksAnnouncement,.caseViewer .caseAnnouncement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.caseViewer{--gold:#ebc775;box-sizing:border-box;width:min(1120px,calc(100% - 40px));max-width:none;max-height:calc(100dvh - 40px);padding:0;border:1px solid #8e7749;border-radius:20px;color:#f4f4f1;background:#101010;box-shadow:0 30px 100px #000b;overflow:auto;overscroll-behavior:contain}
.caseViewer::backdrop{background:#000d;backdrop-filter:blur(5px)}
.caseViewer .caseTop{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 22px;border-bottom:1px solid #30302d}
.caseViewer .caseTop h2{font-size:23px;line-height:1.2;font-weight:500;letter-spacing:-.03em;margin:0}
.caseViewer .caseClose{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid #6f6b61;border-radius:50%;background:#191918;color:#f1e1ba;cursor:pointer}
.caseViewer .caseMedia{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;align-items:center;padding:16px;background:#090909;touch-action:pan-y}
.caseViewer .caseFigure{margin:0;min-width:0;min-height:0}
.caseViewer .caseImageFrame{position:relative;height:min(48dvh,470px);min-width:0;min-height:0;overflow:hidden;background:#0b0b0b}
.caseViewer .caseImage{position:absolute;inset:0;display:block;min-width:0;min-height:0;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.caseViewer .caseImage[hidden]{display:none}
.caseViewer .caseCaption{text-align:center;font-size:12px;color:#e0ce9e;line-height:1.5;margin:10px 0 0}
.caseViewer .caseBottom{padding:0 22px 23px}
.caseViewer .caseThumbs{display:flex;justify-content:center;gap:8px;padding:15px 0;flex-wrap:wrap}
.caseViewer .caseThumb{width:68px;height:55px;padding:3px;border:1px solid #666052;border-radius:7px;background:#191919;cursor:pointer}
.caseViewer .caseThumb[aria-current="true"]{border:2px solid var(--gold)}
.caseViewer .caseThumb img{width:100%;height:100%;object-fit:contain;display:block}
.caseViewer .caseTechnical{font-size:13px;line-height:1.7;color:#c6c5c0;margin:0;max-width:940px}
.caseViewer .caseError{color:#f4d28f;text-align:center;font-size:13px}
@media(min-width:681px) and (max-width:1050px){
 #works .worksStage{height:550px}
 #works .workCard{width:48%;left:26%}
 #works .workCard[data-position="left"]{transform:translateX(-100%) scale(.96)}
 #works .workCard[data-position="right"]{transform:translateX(100%) scale(.96)}
 #works .workBody{padding:19px 20px 22px}
}
@media(max-width:680px){
 #works.worksReview{padding:58px 0 48px}
 #works .worksHeading{margin-bottom:25px}
 #works .worksHeading h2{font-size:clamp(33px,8.6vw,47px)}
 #works .worksLead{font-size:13px;max-width:340px;margin-top:13px}
 #works .worksStage{height:clamp(460px,135vw,610px);max-width:420px}
 #works .workCard{width:100%;left:0;border-radius:19px;transition:transform 380ms ease,opacity 380ms ease,visibility 0s linear 380ms}
 #works .workCard[data-position="center"]{opacity:1;visibility:visible;transition:transform 380ms ease,opacity 380ms ease,visibility 0s}
 #works .workCard[data-position="left"]{transform:translateX(-112%) scale(.94);opacity:0;visibility:hidden;pointer-events:none}
 #works .workCard[data-position="right"]{transform:translateX(112%) scale(.94);opacity:0;visibility:hidden;pointer-events:none}
 #works .workBody{padding:18px 22px 21px}
 #works .workBody h3{font-size:25px}
 #works .workBody p{font-size:15px;min-height:2.9em;margin-bottom:17px}
 #works .worksControls{margin-top:20px;gap:20px}
 .caseViewer{width:calc(100% - 16px);max-height:calc(100dvh - 16px);border-radius:14px}
 .caseViewer .caseTop{padding:12px;gap:10px}
 .caseViewer .caseTop h2{font-size:20px}
 .caseViewer .caseMedia{position:relative;display:block;padding:10px 8px 0}
 .caseViewer .caseImageFrame{height:42dvh;min-height:180px}
 .caseViewer .caseMedia>.caseArrow{position:absolute;z-index:1;top:calc(21dvh - 12px);background:#101010e8}
 .caseViewer .caseMedia>.caseArrow:first-child{left:8px}
 .caseViewer .caseMedia>.caseArrow:last-child{right:8px}
 .caseViewer .caseBottom{padding:0 14px 18px}
 .caseViewer .caseCaption{padding:0 38px}
 .caseViewer .caseTechnical{font-size:12px;line-height:1.65}
}
@media(prefers-reduced-motion:reduce){#works .workCard[data-position],#works .worksDot:before{transition:none}}

/* Experience: compact editorial section, no new images or decorative effects. */
#experience .experienceLayout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:70px;align-items:start}
#experience .experienceEyebrow{font-size:10px;letter-spacing:.18em;color:#d8bd7d;margin:0 0 16px;text-transform:uppercase}
#experience h2{font-size:clamp(33px,3.6vw,50px);font-weight:410;line-height:1.1;letter-spacing:-.045em;margin:0;max-width:470px}
#experience .experienceCopy{border-left:1px solid #8d784b;padding-left:30px;max-width:740px}
#experience .experienceCopy p{font-size:15px;line-height:1.8;color:#b9b9bc;margin:0 0 19px}
#experience .experienceCopy p:last-child{margin-bottom:0}
.nav .experienceNav{display:none}
@media(min-width:1320px){.nav .experienceNav{display:inline-flex}}
@media(max-width:800px){
 #experience .experienceLayout{grid-template-columns:1fr;gap:25px}
 #experience .experienceCopy{padding-left:20px}
 #experience .experienceCopy p{font-size:14px}
}

/* Pointer feedback stays in place. Hover never changes the carousel selection. */
@media(min-width:681px) and (hover:hover) and (pointer:fine){
 #works .workCard:is(:hover,:focus-within){border-color:#f0cf83;box-shadow:0 0 18px #d5a34722,0 18px 38px #0007;z-index:3}
 #works .workCard[data-position="left"]:is(:hover,:focus-within){transform:translateX(-100%) scale(.975)}
 #works .workCard[data-position="right"]:is(:hover,:focus-within){transform:translateX(100%) scale(.975)}
 #works .workCard[data-position="center"]:is(:hover,:focus-within){transform:translateX(0) scale(.975)}
}
@media(min-width:681px) and (max-width:1050px) and (hover:hover) and (pointer:fine){
 #works .workCard[data-position="left"]:is(:hover,:focus-within){transform:translateX(-100%) scale(.975)}
 #works .workCard[data-position="right"]:is(:hover,:focus-within){transform:translateX(100%) scale(.975)}
}
@media(min-width:681px) and (prefers-reduced-motion:reduce){
 #works .workCard[data-position]:is(:hover,:focus-within){transform:none}
 #works .workCard[data-position="left"]:is(:hover,:focus-within){transform:translateX(-100%) scale(.96)}
 #works .workCard[data-position="right"]:is(:hover,:focus-within){transform:translateX(100%) scale(.96)}
 #works .workCard[data-position="center"]:is(:hover,:focus-within){transform:translateX(0) scale(.96)}
}
@media(min-width:681px) and (max-width:1050px) and (prefers-reduced-motion:reduce){
 #works .workCard[data-position="left"]:is(:hover,:focus-within){transform:translateX(-100%) scale(.96)}
 #works .workCard[data-position="right"]:is(:hover,:focus-within){transform:translateX(100%) scale(.96)}
}

@media(max-width:680px){#works .workCard[data-position="center"]{transform:translateX(0) scale(1)}}

#works .workBody h3{min-height:2.3em}