/* Approved coffee-bar depth composition, confined to the homepage. */

.hero-media{perspective:1100px;isolation:isolate}
.hero-photo{backface-visibility:hidden;will-change:transform,clip-path;transform-origin:50% 58%}
.phone{will-change:transform;transform-origin:60% 80%;backface-visibility:hidden}
.matched-latte{position:absolute;z-index:5;left:39%;bottom:-20px;width:275px;height:240px;pointer-events:auto;touch-action:pan-y pinch-zoom}
.matched-latte canvas{display:block;width:100%;height:100%;filter:drop-shadow(0 9px 12px #32170815)}
.hero[data-preview="latte"] .hero-media::after{content:"";position:absolute;z-index:3;left:39%;bottom:-15px;width:270px;height:145px;background:radial-gradient(ellipse,#fff5e6bd 0%,#fffdf900 70%);pointer-events:none}
.motion-enabled .role-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;transform-style:preserve-3d}
.motion-enabled .role-card:hover{transform:perspective(850px) translateY(-5px) rotateX(3deg);box-shadow:0 14px 26px #32170817}
.matched-reveal{opacity:1}
.motion-enabled .matched-reveal{opacity:0;transform:perspective(1200px) translateY(22px) rotateX(3deg);transform-origin:center bottom;transition:opacity .75s var(--reveal-delay,0ms),transform .85s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms)}
.motion-enabled .matched-reveal.is-visible{opacity:1;transform:none}
.motion-paused .matched-reveal{opacity:1;transform:none;transition:none}
.preview-toolbar{position:fixed;z-index:100;bottom:max(15px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(864px,calc(100% - 28px));background:#fffdf9f5;border:1px solid #e1d2c3;border-radius:16px;box-shadow:0 10px 55px #32170826;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:10px;display:flex;gap:9px;align-items:center;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#21160f}
.preview-heading{width:93px;flex-shrink:0;padding-left:5px;font-size:10px;line-height:1.5;color:#8e7363;letter-spacing:.05em}
.preview-heading strong{display:block;font-size:12px;color:#382318;letter-spacing:-.02em}
.preview-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;flex:1;min-width:0}
.preview-option{display:flex;align-items:center;gap:9px;text-align:left;padding:7px 9px;min-height:50px;border:1px solid transparent;border-radius:9px;background:transparent;color:#5b4739;cursor:pointer;transition:background .2s,border-color .2s}
.preview-option:hover{background:#f6eee5}
.preview-option[aria-pressed="true"]{background:#f9ebdc;border-color:#c96530;color:#7e300c}
.preview-option img{width:35px;height:35px;border-radius:6px;object-fit:cover;flex-shrink:0}
.preview-option strong{display:block;font-size:11px;line-height:1.3;font-weight:650;white-space:nowrap}
.preview-option small{display:block;font-size:9px;color:#93765f;line-height:1.4;margin-top:3px;white-space:nowrap}
.preview-option .option-number{display:none}
.preview-actions{display:flex;gap:3px;padding-left:4px;border-left:1px solid #e5d8cb}
.preview-action{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-width:37px;min-height:46px;padding:4px;background:transparent;border:0;border-radius:7px;color:#775740;font-size:10px;cursor:pointer}
.preview-action>span:first-child{font-family:Arial,sans-serif;font-size:19px;line-height:1}
.preview-action>span:last-child{font-size:8px}
.preview-action:hover{background:#f4e9dd}
.preview-action:disabled{opacity:.5;cursor:default}
.preview-toolbar button:focus-visible{outline:3px solid #bd4c10;outline-offset:2px}
.preview-attribution{padding:22px 24px 35px;background:#fffdf9;color:#8b7866;font:11px/1.7 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;text-align:center}
.preview-attribution p{margin:0 0 5px}
.preview-attribution a{color:#98471b;text-decoration:underline;text-underline-offset:3px}
.preview-attribution details{max-width:780px;margin:12px auto 0;text-align:center;font-size:10px}
.preview-attribution summary{cursor:pointer;color:#765e49;display:inline-block}
.preview-attribution details p{margin-top:8px}
.preview-status{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.preview-error{font-size:11px;color:#8b4018;padding:8px 15px;border-radius:8px;background:#fff3e8;position:fixed;bottom:100px;left:50%;transform:translateX(-50%);z-index:101;max-width:calc(100% - 30px)}
@media(min-width:681px) and (max-width:1050px){.matched-latte{width:230px;height:205px;left:31%;bottom:-15px}.hero[data-preview="latte"] .hero-media::after{left:30%;width:230px}.preview-heading{width:75px}.preview-toolbar{gap:6px}.preview-option{padding:7px;gap:6px}.preview-option img{width:29px;height:32px}.preview-option strong{font-size:10px}.preview-option small{font-size:8px}}
@media(max-width:680px){
 
 .matched-latte{width:155px;height:150px;left:8px;bottom:-8px}
 .hero[data-preview="latte"] .hero-media::after{left:0;bottom:-16px;width:170px;height:105px}
 .preview-toolbar{bottom:max(8px,env(safe-area-inset-bottom));width:calc(100% - 16px);padding:7px;gap:6px;border-radius:13px;align-items:stretch}
 .preview-heading{display:none}
 .preview-options{gap:4px}
 .preview-option{padding:5px 3px;min-height:65px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;border-radius:8px}
 .preview-option img{width:45px;height:26px;border-radius:4px}
 .preview-option strong{font-size:8px;line-height:1.25;white-space:normal;letter-spacing:-.01em}
 .preview-option small{display:none}
 .preview-actions{flex-direction:column;justify-content:center;padding-left:4px;gap:2px}
 .preview-action{min-height:28px;min-width:30px;padding:3px}
 .preview-action>span:first-child{font-size:18px}
 .preview-action>span:last-child{display:none}
 .preview-attribution{padding:18px 20px 20px;font-size:10px}
 .site-header.open .nav-links{top:100%}
 .preview-error{bottom:105px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-photo,.phone{transform:none!important;clip-path:none!important}.matched-reveal,.motion-enabled .matched-reveal{opacity:1;transform:none;transition:none}.role-card,.preview-option{transition:none!important}.role-card:hover{transform:none!important}}

/* Stronger photographic depth; all type and UI colors inherit the current website. */
.hero-media{touch-action:pan-y pinch-zoom}
.hero-photo{user-select:none;-webkit-user-drag:none}
.hero-photo-stack{position:absolute;inset:0;z-index:5;pointer-events:none;perspective:1100px;transform-style:preserve-3d}
.hero-float-photo{position:absolute;margin:0;background:var(--paper);border:5px solid var(--paper);border-radius:12px;box-shadow:0 22px 34px #32170840,0 3px 5px #32170819;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform}
.hero-float-photo::after{content:"";position:absolute;inset:-5px;border-radius:12px;pointer-events:none;border-right:4px solid #eadfd5;border-bottom:4px solid #eadfd5}
.hero-float-photo img{width:100%;height:100%;object-fit:cover;border-radius:7px;user-select:none;-webkit-user-drag:none;pointer-events:auto}
.hero-float-crop{width:100%;height:100%;overflow:hidden;border-radius:7px}
.hero-float-crop img{transform-origin:center bottom}
.float-portrait{width:174px;height:218px;right:36%;top:25px;transform:rotateY(-14deg) rotateZ(7deg)}
.float-portrait img{object-position:center 30%}
.float-detail{width:146px;height:114px;right:54%;top:174px;transform:rotateY(10deg) rotateZ(-10deg)}
.float-detail img{object-position:50% 66%}
.matched-latte{width:360px;height:330px;left:29%;bottom:-31px;z-index:6;transform-origin:50% 70%;will-change:transform}
.matched-latte canvas{filter:drop-shadow(0 14px 14px #32170822)}
.hero[data-preview] .hero-media::after{content:"";position:absolute;z-index:3;left:31%;bottom:-20px;width:320px;height:165px;background:radial-gradient(ellipse,#fffdf9cf 0%,#fffdf900 70%);pointer-events:none}
.hero .phone{z-index:8;box-shadow:0 20px 38px #32170840}
.motion-enabled .community,.motion-enabled .audience-card{transform-style:preserve-3d;transform-origin:50% 50%;will-change:transform}
.motion-enabled .community.matched-reveal.is-visible,.motion-enabled .audience-card.matched-reveal.is-visible{transform:perspective(1600px) rotateY(var(--panel-yaw,0deg)) rotateX(var(--panel-pitch,0deg));transition:opacity .75s,transform .45s ease-out}
.motion-enabled .community>img,.motion-enabled .audience-card>img{transform:translateY(var(--panel-image-y,0px)) scale(1.11);transition:transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform}
.motion-enabled .community-copy,.motion-enabled .audience-copy{transform:translateZ(28px)}
.motion-enabled .step-icon{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.motion-enabled .step:hover .step-icon{transform:perspective(400px) rotateY(24deg) rotateX(-9deg) translateZ(16px)}
.motion-paused .hero-float-photo{will-change:auto}
.motion-paused .community,.motion-paused .audience-card,.motion-paused .community>img,.motion-paused .audience-card>img,.motion-paused .community-copy,.motion-paused .audience-copy{transform:none!important}
@media(min-width:681px) and (max-width:1050px){
 .float-portrait{width:138px;height:180px;right:34%;top:24px}
 .float-detail{width:117px;height:92px;right:54%;top:166px}
 .matched-latte{width:300px;height:275px;left:20%;bottom:-25px}
 .hero[data-preview] .hero-media::after{width:260px;left:24%;bottom:-15px}
}
@media(max-width:680px){
 .hero-media{height:305px}
 .float-portrait{width:103px;height:142px;right:20px;top:16px;border-width:4px;border-radius:9px}
 .float-portrait img{border-radius:5px}
 .hero-float-photo::after{inset:-4px;border-radius:9px;border-right-width:3px;border-bottom-width:3px}
 .float-detail{width:89px;height:74px;right:94px;top:95px;border-width:4px;border-radius:9px}
 .float-detail img{border-radius:5px}
 .matched-latte{width:218px;height:208px;left:1px;bottom:-15px}
 .hero[data-preview] .hero-media::after{left:0;bottom:-15px;width:200px;height:135px}
 .motion-enabled .community.matched-reveal.is-visible,.motion-enabled .audience-card.matched-reveal.is-visible{transform:perspective(1600px) rotateY(var(--panel-yaw,0deg)) rotateX(var(--panel-pitch,0deg))}
}
@media(max-width:360px){.hero-media{height:285px}.float-portrait{width:93px;height:131px;right:16px}.float-detail{right:85px;top:88px;width:79px;height:69px}.matched-latte{width:203px;height:196px}}
@media(prefers-reduced-motion:reduce){.hero-float-photo{will-change:auto}.hero .phone,.hero-photo{transform:none!important}.community,.audience-card,.community>img,.audience-card>img,.community-copy,.audience-copy,.step-icon{transform:none!important;transition:none!important}}

/* A wider photo frame keeps both café teammates visible. */
.hero[data-preview="depth"] .float-portrait{width:208px;height:166px}
@media(min-width:681px) and (max-width:1050px){
 .hero[data-preview="depth"] .float-portrait{width:168px;height:134px;right:30%}
}
@media(max-width:680px){
 .hero[data-preview="depth"] .float-portrait{width:128px;height:104px}
}
@media(max-width:360px){
 .hero[data-preview="depth"] .float-portrait{width:114px;height:94px}
}