/* DAE only: original artwork and vertical mobile composition. */
.dae-detail .projects-atmosphere{background:linear-gradient(180deg,#88abc0 0%,#b6cfdb 58%,#e0e9e9 100%)}
.dae-detail .project-cloud{width:110%;height:95%;bottom:-17%;opacity:.85}
.dae-detail .project-cloud-left{left:-45%}.dae-detail .project-cloud-right{right:-45%;bottom:-12%}
.dae-detail .case-main{padding-bottom:28px}
.dae-scene{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 2.6fr 2fr;align-items:end;gap:2%;padding:75px 0 100px;margin:0 -1vw}
.dae-scene:before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:43% -5vw -5%;background:linear-gradient(180deg,transparent,rgba(235,244,245,.82) 45%,rgba(220,236,240,.8) 65%,transparent);filter:blur(15px)}
.dae-piece{position:relative;margin:0;min-width:0;isolation:isolate}
.dae-object{position:relative;width:100%;overflow:hidden}
.dae-object>img{position:absolute;max-width:none;height:auto;display:block}
.dae-phone .dae-object{aspect-ratio:850/1660}.dae-phone .dae-object>img{width:192.7059%;left:-46.4706%;top:-12.6506%}
.dae-imac .dae-object{aspect-ratio:1403/1087}.dae-imac .dae-object>img{width:116.7498%;left:-8.4105%;top:-38.6385%}
.dae-kit .dae-object{aspect-ratio:1280/755}.dae-kit .dae-object>img{width:127.9688%;left:-13.6719%;top:-67.5497%}
.dae-screen{position:absolute;left:2.566%;top:3.036%;width:94.797%;height:63.661%;object-fit:cover;background:#e8e8dd}
.dae-reflection{position:absolute;inset:100% 0 auto;height:100%;transform:scaleY(-1);transform-origin:50% 50%;opacity:.12;filter:blur(2px);pointer-events:none;mask-image:linear-gradient(to top,#000 0%,transparent 23%);-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 23%)}
.dae-piece:after{content:"";position:absolute;left:12%;right:12%;height:3px;bottom:0;background:#48616b30;filter:blur(4px);border-radius:50%;pointer-events:none}
.dae-detail .case-pagination{padding-top:8px}
@media(max-width:700px){
 .dae-detail .project-cloud{position:absolute;width:180%;height:85%;bottom:-10%}
 .dae-detail .case-main{padding-top:104px}
 .dae-detail .case-heading p{margin-bottom:0}
 .dae-scene{display:flex;flex-direction:column;align-items:center;gap:100px;padding:48px 0 70px;margin:0}
 .dae-scene:before{inset:0 -6vw;background:linear-gradient(180deg,transparent,rgba(235,244,245,.22) 30%,rgba(230,242,245,.55) 70%,transparent);filter:blur(15px)}
 .dae-phone{width:55%;max-width:240px}.dae-imac{width:100%}.dae-kit{width:100%}
 .dae-piece:before{content:"";position:absolute;z-index:-1;inset:65% -10vw -18%;background:radial-gradient(ellipse at 50% 55%,#e7f0f3c9,transparent 70%);pointer-events:none}
 .dae-reflection{opacity:.1}
 .dae-detail .case-pagination{padding:14px 0}
}

/* Mobile refinement: readable artwork, compact vertical rhythm, contained floor. */
@media(max-width:700px){
 .dae-detail{overflow-x:clip}
 .dae-detail .case-main{width:100%;min-width:0;padding-left:6vw;padding-right:6vw}
 .dae-detail .case-heading{min-width:0}
 .dae-detail .case-heading h1{font-size:clamp(40px,10.5vw,70px);line-height:1.08}
 .dae-detail .case-heading p{font-size:16px;line-height:1.5;max-width:34em}
 .dae-detail .dae-scene{gap:clamp(64px,18vw,90px);padding-top:36px;padding-bottom:58px;width:100%}
 .dae-detail .dae-piece{flex:none;max-width:100%}
 .dae-detail .dae-phone{width:62%;max-width:240px}
 .dae-detail .dae-imac,.dae-detail .dae-kit{width:100%}
 .dae-detail .dae-piece:before{left:-5vw;right:-5vw}
 .dae-detail .dae-reflection{opacity:.08}
 .dae-detail .case-pagination{justify-content:flex-end;padding:12px 0 6px}
 .dae-detail .case-pagination a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 0;font-size:13px}
 .dae-detail .case-closing{padding-top:26px;padding-bottom:18px}
 .dae-detail .case-closing>a{font-size:clamp(31px,8.2vw,48px);line-height:1.2}
}

/* Compact project ending with two clear actions, in the normal page flow. */
.dae-detail .dae-scene{padding-top:42px;padding-bottom:56px}
.dae-detail .dae-actions{display:block;width:100%;margin:0;position:relative;z-index:2;text-align:center;padding:14px 0 calc(22px + env(safe-area-inset-bottom,0px));background:transparent}
.dae-actions>p{margin:0 0 18px;font-size:17px;font-weight:500;line-height:1.4;letter-spacing:.3px}
.dae-actions>p>span{color:var(--red)}
.dae-actions nav{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.dae-actions nav>a{display:inline-flex;justify-content:center;align-items:center;gap:16px;min-height:48px;padding:13px 23px;border:1px solid #1d1b1c80;border-radius:999px;font-size:14px;font-weight:500;line-height:1.3;text-decoration:none}
.dae-actions .dae-action-primary{color:#fff;background:var(--red);border-color:var(--red)}
.dae-actions .dae-action-next{color:var(--ink);background:#eee6d930}
.dae-actions nav>a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.dae-actions nav>a:active{background:var(--ink);border-color:var(--ink);color:#fff}
.dae-actions small{display:block;margin-top:22px;font-size:10px;line-height:1.5;opacity:.8}
@media(hover:hover){.dae-actions nav>a:hover{background:var(--ink);border-color:var(--ink);color:#fff}}
@media(max-width:700px){
 .dae-detail .dae-scene{padding-top:36px;padding-bottom:55px}
 .dae-actions{padding-top:12px}
 .dae-actions>p{font-size:17px;margin-bottom:18px}
 .dae-actions nav{flex-direction:column;gap:12px;max-width:350px;margin:auto}
 .dae-actions nav>a{width:100%;min-height:48px;padding:13px 18px}
}

/* v74: same studio sky, floor and closing as approved Esme. */
.dae-detail{overflow-x:clip;color:#101214;background:#687b87}
.dae-detail .projects-atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,#687b87 0%,#a8b8bf 62%,#d9d9d0 100%)}
.dae-detail .projects-atmosphere:before{content:"";position:absolute;inset:48% -4% 0;background:url("https://static.wixstatic.com/media/536243_b4c3a6b48a13448db097463916156a7c~mv2.png") center bottom / 100% 240% no-repeat;filter:grayscale(.9) saturate(.2);opacity:.55;mask-image:linear-gradient(180deg,transparent,#000 35%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 35%)}
.dae-detail .project-cloud{display:block;position:absolute;width:105%;height:70%;bottom:-23%;max-width:none;object-fit:contain;opacity:.9;z-index:1}
.dae-detail .project-cloud-left{left:-53%}
.dae-detail .project-cloud-right{right:-52%;bottom:-18%;transform:scaleX(-1)}
.dae-detail .case-main{position:relative;z-index:1;max-width:1680px;width:92%;padding:clamp(120px,9vw,165px) 0 25px;margin:0 auto;min-height:100svh}
.dae-detail .case-heading{display:flex;align-items:center;gap:4%;margin:0;padding:0 3%}
.dae-detail .case-heading h1{font:400 clamp(60px,6.7vw,108px)/1.04 "Anton",Impact,sans-serif;letter-spacing:-.025em;white-space:nowrap;flex:0 0 43%;margin:0}
.dae-detail .case-heading h1 span{color:#e90029}
.dae-detail .case-heading p{flex:1;max-width:34em;font-size:clamp(16px,1.4vw,23px);font-weight:500;line-height:1.45;border-left:1px solid #22303988;padding:0 0 0 4%;margin:0}
.dae-detail .dae-actions{display:block;position:relative;z-index:2;width:100%;padding:14px 0 calc(8px + env(safe-area-inset-bottom,0px));margin:0;background:transparent;color:#101214;text-align:center}
.dae-detail .dae-actions>p{margin:0 0 20px;font-size:clamp(25px,2.2vw,36px);font-weight:700;line-height:1.25;letter-spacing:-.025em}
.dae-detail .dae-actions>p>span{color:inherit}
.dae-detail .dae-actions nav{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap}
.dae-detail .dae-actions nav>a{display:inline-flex;justify-content:center;align-items:center;gap:20px;min-height:48px;padding:12px 26px;border:1px solid #27343d99;border-radius:999px;font-size:15px;font-weight:600;line-height:1.3;text-decoration:none;transition:background-color .18s,box-shadow .18s,transform .18s,border-color .18s;color:#151719}
.dae-detail .dae-actions .dae-action-primary{background:#f2ede4;border-color:#b9b1a5;box-shadow:0 2px 5px #27343d16}
.dae-detail .dae-actions .dae-action-next{background:transparent}
.dae-detail .dae-actions nav>a:focus-visible{outline:2px solid #27343d;outline-offset:4px;background:#eee6d9}
.dae-detail .dae-actions nav>a:active{background:#e3d8c6;border-color:#a59a88;box-shadow:0 3px 9px #27343d26;transform:translateY(1px);color:#151719}
.dae-detail .dae-actions small{display:block;position:static;margin:20px 0 0;font-size:10px;line-height:1.5;opacity:.8}
@media(hover:hover){.dae-detail .dae-actions nav>a:hover{background:#e9dfce;border-color:#a59a88;box-shadow:0 4px 10px #27343d24;transform:translateY(-2px);color:#151719}}

.dae-detail .dae-scene{margin:0;padding:55px 0 52px}
.dae-detail .dae-scene:before,.dae-detail .dae-piece:before{display:none}
.dae-detail .dae-piece:after{left:8%;right:8%;height:9px;bottom:-5px;background:#32455030;filter:blur(5px)}
.dae-detail .dae-imac:after{left:34%;right:34%;height:11px;background:radial-gradient(ellipse,#263c5260,transparent 72%);filter:blur(4px)}
.dae-detail .dae-reflection{opacity:.15;filter:blur(2px)}
@media(max-width:700px){
.dae-detail .case-main{width:100%;max-width:none;padding:108px 6vw 24px}
.dae-detail .case-heading{display:block;padding:0;margin:0}
.dae-detail .case-heading h1{font-size:clamp(36px,10.2vw,70px);white-space:nowrap;margin:0 0 20px}
.dae-detail .case-heading p{font-size:15px;line-height:1.5;max-width:100%;padding:0;border:0}
.dae-detail .dae-scene{gap:clamp(64px,18vw,90px);padding:38px 0 50px}
.dae-detail .projects-atmosphere:before{inset:38% -30% 0;background-size:auto 190%;opacity:.42}
.dae-detail .project-cloud{width:180%;height:62%;bottom:-15%}
.dae-detail .project-cloud-left{left:-120%}
.dae-detail .project-cloud-right{right:-120%;bottom:-10%}
.dae-detail .dae-actions{padding-top:0}
.dae-detail .dae-actions>p{font-size:26px;margin-bottom:20px}
.dae-detail .dae-actions nav{flex-direction:column;gap:12px;max-width:350px;margin:auto}
.dae-detail .dae-actions nav>a{width:100%;min-height:48px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.dae-detail .dae-actions nav>a{transition:none}}
/* v75: desktop composition sized by available viewport height, without clipping. */
@media(min-width:701px) and (min-height:650px){
.dae-detail{--dae-top:clamp(105px,13svh,145px);--dae-title:clamp(58px,9svh,100px);--dae-gap:clamp(24px,4svh,45px)}
.dae-detail .case-main{padding-top:var(--dae-top);padding-bottom:20px}
.dae-detail .case-heading h1{font-size:min(6.7vw,var(--dae-title))}
.dae-detail .case-heading p{font-size:clamp(15px,1.3vw,21px)}
.dae-detail .dae-scene{width:min(100%,calc((100svh - var(--dae-top) - var(--dae-title) * 1.04 - var(--dae-gap) * 2 - 200px) * 2.85));margin:0 auto;padding-top:var(--dae-gap);padding-bottom:var(--dae-gap)}
}

@media(min-width:701px) and (min-height:650px){.dae-detail .dae-scene{overflow:clip;overflow-clip-margin:8px}}

/* v93: touch playback fallback and reflections scaled for mobile artwork. */
.dae-video-play{position:absolute;z-index:2;left:50%;top:34%;transform:translate(-50%,-50%);border:1px solid #b9b1a5;border-radius:999px;background:#f2ede4;color:#151719;padding:11px 18px;font:600 14px/1.3 "DM Sans",sans-serif;box-shadow:0 2px 8px #27343d26;cursor:pointer}
.dae-video-play[hidden]{display:none}
@media(max-width:700px){
 .dae-detail .dae-reflection{opacity:.11;filter:blur(1.4px);mask-image:linear-gradient(to top,#000 0,transparent 42px);-webkit-mask-image:linear-gradient(to top,#000 0,transparent 42px)}
 .dae-detail .dae-piece:after{height:5px;bottom:-2px;filter:blur(3px);background:#32455024}
 .dae-detail .dae-imac:after{background:radial-gradient(ellipse,#263c5245,transparent 72%)}
}

/* v94: fade reflections completely before the scene boundary. */
.dae-detail .dae-scene{overflow:visible}
.dae-detail .dae-reflection{opacity:.10;filter:blur(1.5px);mask-image:linear-gradient(to top,#000 0,transparent 44px);-webkit-mask-image:linear-gradient(to top,#000 0,transparent 44px)}
.dae-detail .dae-piece:after{height:6px;bottom:-3px;background:radial-gradient(ellipse,#32455038,transparent 72%);filter:blur(3px)}
.dae-detail .dae-phone:after{left:9%;right:9%}
.dae-detail .dae-imac:after{left:36%;right:36%;height:7px;background:radial-gradient(ellipse,#263c5245,transparent 72%)}
.dae-detail .dae-kit:after{left:20%;right:26%;height:6px;background:radial-gradient(ellipse,#32455032,transparent 72%)}
@media(max-width:700px){.dae-detail .dae-reflection{mask-image:linear-gradient(to top,#000 0,transparent 36px);-webkit-mask-image:linear-gradient(to top,#000 0,transparent 36px)}}

/* Reflection viewport contains only its fading contact strip. */
.dae-detail .dae-reflection{height:44px;overflow:hidden;transform:none;mask-image:linear-gradient(to bottom,#000 0,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0,transparent 100%)}
.dae-detail .dae-reflection>.dae-object{transform:scaleY(-1)}
@media(max-width:700px){.dae-detail .dae-reflection{height:36px;mask-image:linear-gradient(to bottom,#000 0,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0,transparent 100%)}}

/* v96: restore visible floor reflections with a gradual, contained fade. */
.dae-detail .dae-reflection{height:70px;opacity:.22;filter:blur(1.4px);mask-image:linear-gradient(to bottom,#000 0%,#0009 35%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#0009 35%,transparent 100%)}
.dae-detail .dae-piece:after{height:9px;bottom:-4px;background:radial-gradient(ellipse,#32455066 0%,#32455028 45%,transparent 74%);filter:blur(3px)}
.dae-detail .dae-imac:after{left:35%;right:35%;height:9px;background:radial-gradient(ellipse,#263c5270 0%,#263c5228 45%,transparent 74%)}
.dae-detail .dae-kit:after{left:17%;right:22%;height:9px;background:radial-gradient(ellipse,#32455060 0%,#32455024 45%,transparent 74%)}
@media(max-width:700px){.dae-detail .dae-reflection{height:58px;opacity:.18}.dae-detail .dae-piece:after{height:7px}}

/* v98: mobile is an animated image, without video UI. */
.dae-detail .dae-imac .dae-object>img.dae-screen-mobile{display:none;left:2.566%;top:3.036%;width:94.797%;height:63.661%;object-fit:cover}
@media(max-width:700px){.dae-detail .dae-screen,.dae-detail .dae-video-play{display:none!important}.dae-detail .dae-imac .dae-object>img.dae-screen-mobile{display:block}}
