@font-face{font-family:Onest;src:url(onest-regular.woff2);font-display:swap;font-weight:400}@font-face{font-family:Onest;src:url(onest-bold.woff2);font-display:swap;font-weight:700}*{box-sizing:border-box}body{margin:0;background:#faf9f5;color:#193e36;font:16px/1.6 Onest,Arial,sans-serif}header,main{max-width:1240px;width:calc(100% - 48px);margin:auto}header{display:flex;justify-content:space-between;align-items:center;min-height:100px;gap:20px;border-bottom:1px solid #dce2d6}a{color:inherit;text-underline-offset:4px}.brand{font-size:24px;letter-spacing:3px;text-decoration:none;line-height:1.1}.brand small{display:block;font-size:10px;text-align:center;margin-top:7px;color:#88764c}header>span{font-size:14px;color:#627365}header>a:last-child{text-decoration:none}.intro{padding:36px 0 30px}.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:700;color:#637d62;margin:0 0 10px}h1{font-size:clamp(30px,3vw,42px);letter-spacing:-1.3px;line-height:1.2;margin:0 0 16px}p{margin:0 0 18px}.intro>p:last-child{max-width:720px;color:#5b6e61;margin:0}.experience{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);border:1px solid #dbe1d5;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 15px 60px #173e3307}.stage{position:relative;background:#eee6da;min-width:0;overflow:hidden;display:flex;flex-direction:column}.viewport{position:relative;overflow:hidden;aspect-ratio:2/3;width:100%;max-height:none;flex:none}#scene{position:relative;width:100%;height:100%;transform-origin:50% 23%;transition:transform 1s cubic-bezier(.22,.61,.36,1)}.model{display:block;width:100%;height:100%;object-fit:fill}.skin-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:multiply}.stage-top{position:absolute;left:18px;right:18px;top:18px;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;z-index:3}.badge{font-size:11px;background:#fffdf5d9;border:1px solid #fff;border-radius:20px;padding:7px 10px;backdrop-filter:blur(7px)}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #9b733a;outline-offset:4px}#zoom{border:1px solid #c6c9bb;border-radius:20px;background:#fffffff0;padding:7px 12px;font-size:12px}.stage-bottom{z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fbfaf6;padding:14px 18px;font-size:12px;border-top:1px solid #deded2}#reset{border:0;background:transparent;font-size:12px;padding:5px;white-space:nowrap}.hotspot{position:absolute;border:0;background:transparent;padding:0;display:flex;align-items:center;gap:7px;z-index:2;transform:translate(-50%,-50%)}.hotspot span{display:block;width:28px;height:28px;flex-shrink:0;background:#fdfbf2d9;border:1px solid #48684b;border-radius:50%;box-shadow:0 0 0 5px #ffffff55;position:relative}.hotspot span:after{content:'';position:absolute;inset:8px;border-radius:50%;background:#5c7851}.hotspot b{font-size:12px;font-weight:400;background:#fffdf5ed;border:1px solid #d7ddcb;border-radius:20px;padding:5px 10px;white-space:nowrap}.hotspot[aria-pressed=true] span{background:#245744;border-color:white}.hotspot[aria-pressed=true] span:after{background:white}.hotspot[aria-pressed=true] b{background:#245744;color:white;border-color:#245744}.face{left:64%;top:22%}.neck{left:62%;top:33%}.chest{left:63%;top:43%}.hands{left:77%;top:85%}.zoomed .hotspot{visibility:hidden}aside{padding:34px;display:flex;flex-direction:column}.zone-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.zone-grid button{border:1px solid #cfdacb;border-radius:24px;background:#fafbf7;padding:10px 15px;font-size:15px;transition:background .25s}.zone-grid button[aria-pressed=true]{background:#245744;color:#fff;border-color:#245744}.description{padding:30px 0 20px;min-height:235px}.zone-number{font-size:12px;color:#a18b5a}h2{font-size:clamp(24px,2.6vw,30px);line-height:1.25;margin:8px 0 15px;letter-spacing:-.7px}.description p{color:#556b5d;font-size:16px}.transition-controls{border-top:1px solid #dbe3d6;padding-top:23px}.transition-controls label{font-size:12px;letter-spacing:1.3px;text-transform:uppercase;font-weight:700;color:#637d62}.endpoints{display:flex;justify-content:space-between;margin-top:16px}.endpoints button{border:0;background:transparent;padding:6px 0;font-weight:700}input[type=range]{width:100%;accent-color:#245744;cursor:ew-resize;margin:10px 0 22px;height:24px}.primary{background:#245744;color:white;border:0;border-radius:30px;padding:15px 22px;width:100%;font-weight:700;display:flex;justify-content:space-between;align-items:center}.primary:hover{background:#193e36}.hint{font-size:12px;color:#748273;margin-top:13px}.expectation{background:#eef3e9;padding:18px 22px;border-radius:16px;margin:4px 0 20px}h3{font-size:16px;margin:0 0 8px}.expectation p{font-size:14px;margin:0;color:#556b5d}.consult{margin-top:auto;font-weight:700;font-size:15px}.explanation{display:grid;grid-template-columns:220px 1fr;gap:30px;padding:28px 0;border-bottom:1px solid #dce2d6;font-size:13px;color:#627365}.explanation strong{color:#193e36}.explanation p{margin:0}.footer-links{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:25px 0;font-size:13px}@media(min-width:1000px){.viewport{aspect-ratio:2/3;flex:none}}@media(max-width:850px){.experience{grid-template-columns:1fr 1fr}aside{padding:22px}.description{min-height:0}.viewport{flex:none;aspect-ratio:2/3;max-height:none}.stage{justify-content:center}.stage-top{top:10px;left:10px;right:10px}.stage-bottom{position:relative}.badge{font-size:10px}.hotspot b{font-size:10px;padding:4px 6px}.hotspot span{width:22px;height:22px}.hotspot span:after{inset:6px}header>span{display:none}}@media(max-width:620px){header,main{width:calc(100% - 28px)}header{min-height:80px}.brand{font-size:20px}header>a:last-child{font-size:12px}.intro{padding:26px 0}.intro>p:last-child{font-size:15px}.experience{grid-template-columns:1fr;border-radius:22px}.viewport{max-height:620px;aspect-ratio:2/3;width:100%;flex:none}.stage{align-items:center}.stage-bottom{width:100%;font-size:11px}.stage-top{width:calc(100% - 20px)}aside{padding:25px 22px}.description{padding:24px 0 5px}.explanation{grid-template-columns:1fr;gap:10px}.hotspot b{font-size:11px}.footer-links{font-size:12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Controls immediately below the model. */
.stage>.transition-controls{position:relative;flex:none;width:100%;padding:18px 24px;background:#fbfaf6;border-top:1px solid #deded2}
.stage>.transition-controls label{display:none}
.stage>.transition-controls .endpoints{margin:0}
.stage>.transition-controls .endpoints button{padding:0;font-size:14px}
.stage>.transition-controls input{display:block;margin:4px 0 12px;height:28px}
.stage>.transition-controls .primary{padding:13px 18px;font-size:15px}
.stage>.transition-controls .hint{font-size:12px;line-height:1.4;margin:10px 0 0}
.stage-bottom{margin-top:0;width:100%}
@media(max-width:620px){.stage>.transition-controls{padding:16px 18px}}

.zone-dimmer{position:absolute;inset:0;pointer-events:none;z-index:1;background:rgba(110,120,116,.18);backdrop-filter:grayscale(1) brightness(.8);-webkit-backdrop-filter:grayscale(1) brightness(.8);mask-size:100% 100%;-webkit-mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}.zone-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible}.zone-outline ellipse{fill:none;stroke:#fff8df;stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px #245744)}

.zone-outline{display:none}.model{user-select:none;-webkit-user-drag:none}.viewport.is-zoomed{touch-action:none;cursor:grab}.viewport.dragging{cursor:grabbing}.dragging #scene{transition:none}.viewport>.hotspot{transition:top .6s ease,left .6s ease}.viewport.is-zoomed>.hotspot{left:auto;right:12px;transform:none;top:80px}.viewport.is-zoomed>.hotspot.neck{top:124px}.viewport.is-zoomed>.hotspot.chest{top:168px}.viewport.is-zoomed>.hotspot.hands{top:212px}.viewport.is-zoomed>.hotspot span{width:20px;height:20px}.viewport.is-zoomed>.hotspot span:after{inset:5px}@media(max-width:620px){.viewport.is-zoomed>.hotspot{top:100px}.viewport.is-zoomed>.hotspot.neck{top:142px}.viewport.is-zoomed>.hotspot.chest{top:184px}.viewport.is-zoomed>.hotspot.hands{top:226px}}

body{background:transparent}main{width:100%;max-width:none}.explanation{padding:20px 5px;margin:0}.consult{background:none;border:0;text-align:left;cursor:pointer}.stage{justify-content:flex-start}

/* Compact model with controls above the image. */
.experience{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.stage{align-items:center;justify-content:flex-start}
.stage>.transition-controls{order:0;padding:12px 18px;border-top:0;border-bottom:1px solid #deded2}
.stage>.transition-controls input{margin:0 0 6px;height:24px}
.stage>.transition-controls .primary{padding:10px 16px;font-size:14px}
.stage>.transition-controls .hint{margin:6px 0 0;font-size:11px}
.stage-top{position:relative;inset:auto;width:100%;padding:10px 12px;gap:6px;flex:none}
.viewport{width:min(100%,380px);aspect-ratio:2/3;max-height:none;flex:none}
aside{padding:24px}.description{min-height:0;padding:20px 0 12px}.consult{margin-top:18px}
@media(max-width:850px){.experience{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.stage-top{inset:auto;width:100%}.viewport{max-height:none;width:100%;aspect-ratio:2/3}}
@media(max-width:620px){.experience{grid-template-columns:1fr}.viewport{width:min(100%,300px);max-height:none}.stage-top{inset:auto;width:100%}aside{padding:20px}.description{padding:18px 0 6px}}

/* Full-width canvas; controls remain independent of image transforms. */
.viewport{width:100%;height:560px;aspect-ratio:auto;max-height:none;position:relative}
#scene{position:absolute;left:0;top:0}
.viewport>.hotspot,.viewport.is-zoomed>.hotspot{left:auto;right:12px;transform:none;top:calc(50% - 86px);transition:none}
.viewport>.hotspot.neck,.viewport.is-zoomed>.hotspot.neck{top:calc(50% - 42px)}
.viewport>.hotspot.chest,.viewport.is-zoomed>.hotspot.chest{top:calc(50% + 2px)}
.viewport>.hotspot.hands,.viewport.is-zoomed>.hotspot.hands{top:calc(50% + 46px)}
.viewport>.hotspot span{display:none}.viewport>.hotspot b{padding:8px 12px}
@media(max-width:620px){.viewport{width:100%;height:440px;aspect-ratio:auto}.viewport>.hotspot,.viewport.is-zoomed>.hotspot{right:8px}.viewport>.hotspot b{font-size:11px;padding:7px 9px}}

#scene{visibility:hidden}#scene.ready{visibility:visible}#scene.initial-position{transition:none}

/* Readable embedded interactive, 1.0.2. */
.experience{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
.viewport{height:600px}.stage>.transition-controls .primary{font-size:16px;min-height:44px}.stage>.transition-controls .hint{font-size:14px}.stage>.transition-controls .endpoints button{font-size:16px}.stage-top{flex-wrap:wrap}.stage-top button{font-size:14px}.explanation{font-size:14px}aside{padding:28px}.description{padding:20px 0;min-height:0}.description p{font-size:16px;line-height:1.6}.viewport>.hotspot b{font-size:14px}.zone-tabs button{min-height:44px}
@media(max-width:900px){.experience{grid-template-columns:1fr}.viewport{height:540px}aside{padding:24px}.description{padding:16px 0}.explanation{display:block}}
@media(max-width:620px){.viewport{height:440px}.viewport>.hotspot b{font-size:13px;padding:9px 10px}aside{padding:20px}}

button,.primary,.consult{text-align:center;justify-content:center}.primary{gap:0}button::before,button::after,a::before,a::after{content:none}
/* Portfolio embed: retain the model behavior, adapt its layout to the case study. */
.experience{border-radius:5px;box-shadow:none}.viewport{height:360px}.description h2{font-size:25px;line-height:1.15}.description p,.expectation p{font-size:12px;line-height:1.6}.expectation h3{font-size:15px}.zone-number{font-size:36px}.zone-grid button{font-size:11px;padding:10px 6px}.eyebrow{font-size:9px;letter-spacing:1px}.stage>.transition-controls .hint{font-size:10px}.stage>.transition-controls .primary{font-size:12px;padding:8px;min-height:36px}.stage>.transition-controls .endpoints button{font-size:12px}.stage-top .badge{font-size:8px}.stage-top button{font-size:10px!important}.viewport>.hotspot b{font-size:10px;padding:7px}.stage-bottom{font-size:8px;padding:10px}.stage-bottom button{font-size:10px}.consult{font-size:12px}.description{padding:15px 0}.expectation{padding:12px}.expectation p{margin:5px 0}.zone-number{display:none}
@media(min-width:561px){.experience{grid-template-columns:1.08fr 1fr}aside{padding:20px 18px}.zone-grid{gap:6px}.description h2{font-size:25px}.description p{font-size:12px}.stage-top{padding:8px;min-height:60px}}
@media(max-width:560px){.experience{grid-template-columns:1fr}.viewport{height:370px}aside{padding:20px}.description h2{font-size:28px}.description p{font-size:14px}.zone-grid button{font-size:13px}.stage>.transition-controls .hint{font-size:11px}.stage>.transition-controls .primary{font-size:14px}.stage-top .badge{font-size:9px}.stage-bottom{font-size:9px}}